Add cursor:pointer to PieChart and StackedBarChart

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

@@ -39,7 +39,9 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
       maintainAspectRatio: false,
       responsive: true,
       animation: {
@@ -50,6 +52,17 @@ export const options = {
             borderRadius: 4
          }
       },
+      onHover: function (event: any, elements: any[], chart: any)
+      {
+         if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
+         {
+            chart.canvas.style.cursor = "pointer";
+         }
+         else
+         {
+            chart.canvas.style.cursor = "default";
+         }
+      },
       plugins: {
          tooltip: {
             // todo - some configs around this
@@ -97,7 +110,8 @@ export const options = {
             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: {