Add cursor:pointer to PieChart and StackedBarChart

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

@@ -39,65 +39,79 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
+export const makeOptions = (data: DefaultChartData) =>
-   maintainAspectRatio: false,
+{
-   responsive: true,
+   return({
-   animation: {
+      maintainAspectRatio: false,
-      duration: 0
+      responsive: true,
-   },
+      animation: {
-   elements: {
+         duration: 0
-      bar: {
+      },
-         borderRadius: 4
+      elements: {
-      }
+         bar: {
-   },
+            borderRadius: 4
-   plugins: {
+         }
-      tooltip: {
+      },
-         // todo - some configs around this
+      onHover: function (event: any, elements: any[], chart: any)
-         callbacks: {
+      {
-            title: function(context: any)
+         if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
-            {
+         {
-               return ("");
+            chart.canvas.style.cursor = "pointer";
-            },
+         }
-            label: function(context: any)
+         else
-            {
+         {
-               if(context.dataset.label.startsWith(context.label))
+            chart.canvas.style.cursor = "default";
-               {
+         }
-                  return `${context.label}: ${context.formattedValue}`;
+      },
-               }
+      plugins: {
-               else
+         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
                }
             }
          }
       },
-      legend: {
+      scales: {
-         position: "bottom",
+         x: {
-         labels: {
+            stacked: true,
-            usePointStyle: true,
+            grid: {display: false},
-            pointStyle: "circle",
+            ticks: {autoSkip: false, maxRotation: 90}
-            boxHeight: 6,
+         },
-            boxWidth: 6,
+         y: {
-            padding: 12,
+            stacked: true,
-            font: {
+            position: "right",
-               size: 14
+            ticks: {precision: 0}
-            }
+         },
-         }
-      }
-   },
-   scales: {
-      x: {
-         stacked: true,
-         grid: {display: false},
-         ticks: {autoSkip: false, maxRotation: 90}
       },
-      y: {
+   });
-         stacked: true,
+}
-         position: "right",
-         ticks: {precision: 0}
-      },
-   },
-};
 
 interface Props
 {
@@ -149,9 +163,9 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
 
    return data ? (
       <Box>
-         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
+         {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} layout="inline" />)}
          <Box width="100%" height="300px">
-            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
+            <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
          </Box>
       </Box>
    ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

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

@@ -70,7 +70,7 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
          chartData.dataset.backgroundColors = chartColors;
       }
    }
-   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
+   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
 
    useEffect(() =>
    {

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

@@ -23,7 +23,7 @@ import colors from "qqq/assets/theme/base/colors";
 
 const {gradients, dark} = colors;
 
-function configs(labels: any, datasets: any)
+function configs(labels: any, datasets: any, urls: string[] | undefined)
 {
    const backgroundColors = [];
 
@@ -66,6 +66,17 @@ function configs(labels: any, datasets: any)
       options: {
          maintainAspectRatio: false,
          responsive: true,
+         onHover: function (event: any, elements: any[], chart: any)
+         {
+            if(event.type == "mousemove" && elements.length > 0 && urls && urls.length > elements[0].index && urls[elements[0].index])
+            {
+               chart.canvas.style.cursor = "pointer";
+            }
+            else
+            {
+               chart.canvas.style.cursor = "default";
+            }
+         },
          plugins: {
             tooltip: {
                callbacks: {