@pablo-amberflo/ui-kit-test/src/components/molecules/BarGraph/BarGraph.jsx

Amberflo UI Kit

import React, { useEffect } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import { Paper } from "@mui/material";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const addZeroAfterDecimal = (number) => {
  const string = number.toString();
  const decimals = string.split(".")[1];

  const length = decimals && decimals.length > 2 ? decimals.length : 2;

  const fixedNumber = parseFloat(number).toFixed(length);

  return fixedNumber;
};

const defaultOptions = {
  responsive: true,
  indexAxis: "y",
  plugins: {
    title: {
      display: true,
      text: "Usage by dimensions",
      position: "top",
      fullSize: true,
      font: {
        color: "#212121",
        size: 16,
      },
      padding: {
        bottom: 50,
      },
    },
    legend: {
      position: "bottom",
      labels: {
        boxWidth: 7,
        usePointStyle: true,
        pointStyle: "circle",
        color: "#212121",
        padding: 20,
        font: {
          size: 14,
        },
      },
    },
  },
  scales: {
    y: {
      beginAtZero: true,
      grid: {
        color: "#cccccc",
        borderDash: [4, 4],
      },
      stacked: true,
      ticks: {
        color: "#212121",
        font: {
          size: 14,
        },
        callback(value) {
          return Math.floor(value) !== 0
            ? `$${addZeroAfterDecimal(value)}`
            : value;
        },
      },
    },
    x: {
      stacked: true,
      grid: {
        color: "transparent",
      },
      ticks: {
        color: "black",
        font: {
          size: 14,
        },
      },
    },
  },
};

const barChartData = {
  labels: ["08/01", "08/02", "08/03"],
  datasets: [
    {
      label: "us-east-1",
      backgroundColor: "#55BDC5",
      borderColor: "#55BDC5",
      hoverBackgroundColor: "#55BDC5",
      hoverBorderColor: "#55BDC5",
      barPercentage: 0.7,
      categoryPercentage: 0.3,
      data: [1200, 1500, 2000],
    },
    {
      label: "us-east-2",
      backgroundColor: "#4D49CB",
      borderColor: "#4D49CB",
      hoverBackgroundColor: "#4D49CB",
      hoverBorderColor: "#4D49CB",
      barPercentage: 0.7,
      categoryPercentage: 0.3,
      data: [900, 800, 1222],
    },
    {
      label: "us-west-1",
      backgroundColor: "#DC8B39",
      borderColor: "#DC8B39",
      hoverBackgroundColor: "#DC8B39",
      hoverBorderColor: "#DC8B39",
      barPercentage: 0.7,
      categoryPercentage: 0.3,
      data: [650, 700, 890],
    },
    {
      label: "us-west-2",
      backgroundColor: "#ca03fc",
      borderColor: "#ca03fc",
      hoverBackgroundColor: "#ca03fc",
      hoverBorderColor: "black",
      barPercentage: 0.7,
      categoryPercentage: 0.3,
      data: [650, 700, 890],
    },
  ],
};

/* In options (props):
 * indexAxis => horizontal ("y") or vertical ("x")
 * stacked => true (everything is in one colum) or false (multiple columns)
 */

export const BarGraph = (props) => {
  const { options, data } = props;
  return (
    <div style={{ padding: "4rem" }}>
      <Paper
        style={{
          padding: "2rem 2rem 1rem 2rem",
          boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
        }}
      >
        <Bar options={options || defaultOptions} data={data || barChartData} />
      </Paper>
    </div>
  );
};