From fa65d6c0add4b9ef9463349ebfecc8bd8f68b4da Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Wed, 21 Feb 2024 19:18:34 -0600
Subject: [PATCH] Add cursor:pointer to PieChart and StackedBarChart

---
 .../widgets/charts/StackedBarChart.tsx        | 122 ++++++++++--------
 .../widgets/charts/piechart/PieChart.tsx      |   2 +-
 .../charts/piechart/PieChartConfigs.ts        |  13 +-
 3 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/src/qqq/components/widgets/charts/StackedBarChart.tsx b/src/qqq/components/widgets/charts/StackedBarChart.tsx
index c72d3fe..9bff184 100644
--- a/src/qqq/components/widgets/charts/StackedBarChart.tsx
+++ b/src/qqq/components/widgets/charts/StackedBarChart.tsx
@@ -39,65 +39,79 @@ ChartJS.register(
    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
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+         duration: 0
+      },
+      elements: {
+         bar: {
+            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
+            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: {
-         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}
+      scales: {
+         x: {
+            stacked: true,
+            grid: {display: false},
+            ticks: {autoSkip: false, maxRotation: 90}
+         },
+         y: {
+            stacked: true,
+            position: "right",
+            ticks: {precision: 0}
+         },
       },
-      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"}} />;
diff --git a/src/qqq/components/widgets/charts/piechart/PieChart.tsx b/src/qqq/components/widgets/charts/piechart/PieChart.tsx
index 18ac555..e562e59 100644
--- a/src/qqq/components/widgets/charts/piechart/PieChart.tsx
+++ b/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(() =>
    {
diff --git a/src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts b/src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts
index 0fa202e..30bda5b 100644
--- a/src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts
+++ b/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: {