CE-604 Adding chartSubheaderData; updating styles

src/qqq/components/widgets/charts/StackedBarChart.tsx

@@ -28,6 +28,7 @@ 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,
@@ -39,18 +40,32 @@ ChartJS.register(
 );
 
 export const options = {
+   maintainAspectRatio: false,
    responsive: true,
    animation: {
       duration: 0
    },
+   plugins: {
+      legend: {
+         position: "bottom",
+         labels: {
+            usePointStyle: true,
+            pointStyle: "circle",
+            pointStyleWidth: 3,
+            padding: 20
+         }
+      }
+   },
    scales: {
       x: {
          stacked: true,
-         grid: {offset: false},
+         grid: {display: false},
          ticks: {autoSkip: false, maxRotation: 90}
       },
       y: {
          stacked: true,
+         position: "right",
+         ticks: {precision: 0}
       },
    },
 };
@@ -58,10 +73,12 @@ export const options = {
 interface Props
 {
    data: DefaultChartData;
+   chartSubheaderData?: ChartSubheaderData;
 }
 
 const {gradients} = colors;
-function StackedBarChart({data}: Props): JSX.Element
+
+function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 {
    const navigate = useNavigate();
 
@@ -76,7 +93,7 @@ function StackedBarChart({data}: Props): JSX.Element
          navigate(data.urls[e[0]["index"]]);
       }
       console.log(e);
-   }
+   };
 
    useEffect(() =>
    {
@@ -85,9 +102,16 @@ function StackedBarChart({data}: Props): JSX.Element
          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);
       }
@@ -95,7 +119,12 @@ function StackedBarChart({data}: Props): JSX.Element
 
 
    return data ? (
-      <Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
+      <Box p={3} pt={1}>
+         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
+         <Box width="100%" height="250px">
+            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
+         </Box>
+      </Box>
    ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;
 }
 

src/qqq/components/widgets/charts/piechart/PieChart.tsx

@@ -30,6 +30,7 @@ import {useNavigate} from "react-router-dom";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import {chartColors} from "qqq/components/widgets/charts/DefaultChartData";
 import configs from "qqq/components/widgets/charts/piechart/PieChartConfigs";
+import ChartSubheaderWithData, {ChartSubheaderData} from "qqq/components/widgets/components/ChartSubheaderWithData";
 
 //////////////////////////////////////////
 // structure of expected bar chart data //
@@ -51,12 +52,13 @@ interface Props
 {
    description?: string;
    chartData: PieChartData;
+   chartSubheaderData?: ChartSubheaderData;
 
    [key: string]: any;
 }
 
 
-function PieChart({description, chartData}: Props): JSX.Element
+function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Element
 {
    const navigate = useNavigate();
    const [dataLoaded, setDataLoaded] = useState(false);
@@ -82,14 +84,17 @@ function PieChart({description, chartData}: Props): JSX.Element
          // @ts-ignore
          navigate(chartData.dataset.urls[e[0]["index"]]);
       }
-   }
+   };
 
    return (
-      <Card sx={{minHeight: "400px", boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1, border: 0}}>
+      <Card sx={{boxShadow: "none", height: "100%", width: "100%", display: "flex", flexGrow: 1, border: 0}}>
-         <Box mt={3}>
+         <Box mt={1}>
+            <Box px={3}>
+               {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
+            </Box>
             <Grid container alignItems="center">
                <Grid item xs={12} justifyContent="center">
-                  <Box width="100%" height="80%" py={2} pr={2} pl={2}>
+                  <Box width="100%" height="250px" py={2} pr={2} pl={2}>
                      {useMemo(
                         () => (
                            <Pie data={data} options={options} getElementsAtEvent={handleClick} />
@@ -105,16 +110,18 @@ function PieChart({description, chartData}: Props): JSX.Element
                            left: "50%",
                            transform: "translate(-50%, -50%)",
                            display: "flex",
-                           justifyContent: "center"}}>
+                           justifyContent: "center"
+                        }}>
                            <Skeleton sx={{width: "150px", height: "150px"}} variant="circular" />
                         </Box>
                      )
                   }
                </Grid>
             </Grid>
-            <Divider />
             {
                description && (
+                  <>
+                     <Divider />
                      <Grid container>
                         <Grid item xs={12}>
                            <Box pb={2} px={2} display="flex" flexDirection={{xs: "column", sm: "row"}} mt="auto">
@@ -124,6 +131,7 @@ function PieChart({description, chartData}: Props): JSX.Element
                            </Box>
                         </Grid>
                      </Grid>
+                  </>
                )
             }
          </Box>

src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts

@@ -30,10 +30,16 @@ function configs(labels: any, datasets: any)
    if (datasets.backgroundColors)
    {
       datasets.backgroundColors.forEach((color: string) =>
-         gradients[color]
+      {
-            ? backgroundColors.push(gradients[color].state)
+         if (gradients[color])
-            : backgroundColors.push(dark.main)
+         {
-      );
+            backgroundColors.push(gradients[color].state);
+         }
+         else
+         {
+            backgroundColors.push(color);
+         }
+      });
    }
    else
    {
@@ -58,12 +64,17 @@ function configs(labels: any, datasets: any)
          ],
       },
       options: {
-         maintainAspectRatio: true,
+         maintainAspectRatio: false,
          responsive: true,
-         aspectRatio: 2,
          plugins: {
             legend: {
                position: "bottom",
+               labels: {
+                  usePointStyle: true,
+                  pointStyle: "circle",
+                  pointStyleWidth: 3,
+                  padding: 20
+               }
             },
          },
          scales: {