Graphs UI Components – Artemis Library

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="bg-white rounded">
      <div class="flex flex-wrap items-center py-5 px-6">
        <h3 class="w-full md:w-auto mb-4 md:mb-0 text-2xl font-bold">Daily Visitiors</h3>
        <div class="ml-auto inline-block py-2 px-3 border rounded text-xs text-gray-500">
          <select class="pr-1" name="" id="">
            <option value="1">March</option>
            <option value="1">June</option>
            <option value="1">September</option>
          </select>
        </div>
        <div class="ml-2 inline-block py-2 px-3 border rounded text-xs text-gray-500">
          <select class="pr-1" name="" id="">
            <option value="1">Daily</option>
            <option value="1">Weekly</option>
            <option value="1">Monthly</option>
          </select>
        </div>
      </div>
      <div class="chart p-6" data-type="columns"></div>
    </div>
  </div>
</section>

<section class="py-8">
  <div class="container">
    <div class="pt-4 bg-white rounded shadow">
      <div class="px-6 pb-5 row align-items-center border-bottom border-primary-light">
        <div class="col-12 col-md-auto me-auto mb-4 mb-md-0">
          <h5 class="mb-0" >Daily Visitiors</h5>
        </div>
        <div class="col-12 col-md-auto d-flex align-items-center">
          <div class="d-inline-block me-3 text-secondary">
            <select class="form-select rounded small" aria-label="Select example" name="name">
              <option value="1" >March</option>
              <option value="1" >June</option>
              <option value="1" >September</option>
            </select>
          </div>
          <div class="d-inline-block text-secondary">
            <select class="form-select rounded small" aria-label="Select example" name="name">
              <option value="1" >Daily</option>
              <option value="1" >Weekly</option>
              <option value="1" >Monthly</option>
            </select>
          </div>
        </div>
      </div>

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-3-desktop is-6-tablet">
        <div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
          <span class="has-text-grey" style="font-size: 12px;">Engaged Users</span>
          <h3 class="title mb-2 mt-2 is-size-3">1 450</h3>
          <span class="tag is-success is-light has-text-success">+115</span>
          <div class="chart" data-type="area-small" data-variant="indigo"></div>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
          <span class="has-text-grey" style="font-size: 12px;">Total Profit</span>
          <h3 class="title mb-2 mt-2 is-size-3">$9,054</h3>
          <span class="tag is-danger is-light has-text-danger">-$1,535</span>
          <div class="chart" data-type="area-small" data-variant="blue"></div>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <div class="pt-6 has-background-white has-text-centered" style="border-radius: 4px;">
          <span class="has-text-grey" style="font-size: 12px;">Click Counter</span>
          <h3 class="title mb-2 mt-2 is-size-3">73.5%</h3>
          <span class="tag is-success is-light has-text-success">+5.64%</span>

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container }  from '@mui/material';
import theme from '../../theme/theme.js';

const GraphTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            pt: theme.spacing(3),
            textAlign: 'center',
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
            mb: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
        },