qqq-frontend-material-dashboard/src/qqq/components/widgets/charts/StackedBarChart.tsx

/*
 * QQQ - Low-code Application Framework for Engineers.
 * Copyright (C) 2021-2022.  Kingsrook, LLC
 * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
 * contact@kingsrook.com
 * https://github.com/Kingsrook/
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */


import {Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip,} from "chart.js";
import React, {useEffect, useState} from "react";
import {Bar} from "react-chartjs-2";
import {useNavigate} from "react-router-dom";
import colors from "qqq/assets/theme/base/colors";
import {chartColors, DefaultChartData} from "qqq/components/widgets/charts/DefaultChartData";
import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";

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

export const options = {
   maintainAspectRatio: false,
   responsive: true,
   animation: {
      duration: 0
   },
   elements: {
      bar: {
         borderRadius: 4
      }
   },
   plugins: {
      tooltip: {
         // todo - some configs around this
         callbacks: {
            title: function(context: any)
            {
               return ("");
            },
            label: function(context: any)
            {
               if(context.dataset.label.startsWith(context.label))
               {
                  return `${context.label}: ${context.formattedValue}`;
               }
               else
               {
                  return ("");
               }
            }
         }
      },
      legend: {
         position: "bottom",
         labels: {
            usePointStyle: true,
            pointStyle: "circle",
            boxHeight: 6,
            boxWidth: 6,
            padding: 12,
            font: {
               size: 14
            }
         }
      }
   },
   scales: {
      x: {
         stacked: true,
         grid: {display: false},
         ticks: {autoSkip: false, maxRotation: 90}
      },
      y: {
         stacked: true,
         position: "right",
         ticks: {precision: 0}
      },
   },
};

interface Props
{
   data: DefaultChartData;
   chartSubheaderData?: ChartSubheaderData;
}

const {gradients} = colors;

function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
{
   const navigate = useNavigate();

   const [stateData, setStateData] = useState(data);


   const handleClick = (e: Array<{}>) =>
   {
      if (e && e.length > 0 && data?.urls && data?.urls.length)
      {
         // @ts-ignore
         navigate(data.urls[e[0]["index"]]);
      }
      console.log(e);
   };

   useEffect(() =>
   {
      if (data)
      {
         data?.datasets.forEach((dataset: any, index: number) =>
         {
            if (!dataset.backgroundColor)
            {
               if (gradients[chartColors[index]])
               {
                  dataset.backgroundColor = gradients[chartColors[index]].state;
               }
               else
               {
                  dataset.backgroundColor = chartColors[index];
               }
            }
         });
         setStateData(stateData);
      }
   }, [data]);


   return data ? (
      <Box>
         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
         <Box width="100%" height="300px">
            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
         </Box>
      </Box>
   ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;
}

export default StackedBarChart;