Added callbacks to xy and donut charts

playground/src/main.ts

@@ -75,7 +75,9 @@ arrow({
   parent: gauge.chart
 })
 
-
+function xyCb(item: any) {
+  console.log(item)
+}
 
 let xy = chartXy({
   dataset: [
@@ -103,9 +105,23 @@ let xy = chartXy({
     xAxisLabels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
     title: "Title",
     zoomColor: "#0000FF10"
+  },
+  callbacks: {
+    onClickLegend: xyCb,
+    // onHoverLegend: xyCb,
+    onClickPeriod: xyCb,
+    // onHoverPeriod: xyCb,
   }
 })
 
+function getArc(arc: any) {
+  console.log(arc)
+}
+
+function getLegend(legend: any) {
+  console.log(legend)
+}
+
 let donut = chartDonut({
   dataset: [
     {
@@ -156,6 +172,12 @@ let donut = chartDonut({
     donutRadiusRatio: 1,
     dataLabelsRoundingValue: 1,
     dataLabelsRoundingPercentage: 2
+  },
+  callbacks: {
+    onClickArc: getArc,
+    onClickLegend: getLegend,
+    onHoverArc: getArc,
+    onHoverLegend: getLegend
   }
 })
 

savyg/package.json

@@ -1,7 +1,7 @@
 {
   "name": "savyg",
   "private": false,
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "A savvy library to create svg elements and charts with ease",
   "author": "Alec Lloyd Probert",
   "repository": {

savyg/src/utils_chart_donut.ts

@@ -52,11 +52,18 @@ export type ChartDonutOptions = {
 export function chartDonut({
     dataset,
     options,
-    parent
+    parent,
+    callbacks
 }: {
     dataset: ChartDonutDatasetItem[]
     options?: ChartDonutOptions
     parent?: HTMLElement
+    callbacks?: {
+        onClickArc?: (args?: any) => void
+        onClickLegend?: (args?: any) => void
+        onHoverArc?: (args?: any) => void
+        onHoverLegend?: (args?: any) => void
+    }
 }) {
 
     const globalUid = createUid();
@@ -421,13 +428,37 @@ export function chartDonut({
         })
     }
 
+    function clickArc(index: number) {
+        if (callbacks?.onClickArc) {
+            return callbacks?.onClickArc({
+                arc: arcs[index],
+                item: formattedDataset[index]
+            })
+        }
+    }
+
+    function hoverArc(index: number) {
+        if (callbacks?.onHoverArc) {
+            return callbacks?.onHoverArc({
+                arc: arcs[index],
+                item: formattedDataset[index]
+            })
+        }
+    }
+
     arcs.forEach((arc: { path: string; color: string }, i: number) => {
         const anArc = arc.path as unknown as SVGPathElement
 
         if (userOptions.interactive) {
             anArc.addEventListener("mouseenter", () => tooltip(i))
             anArc.addEventListener("mouseleave", () => killTooltip(i))
             anArc.addEventListener('mousemove', (e) => setTooltipCoordinates(e))
+            if (callbacks?.onClickArc) {
+                anArc.addEventListener('click', () => clickArc(i))
+            }
+            if (callbacks?.onHoverArc) {
+                anArc.addEventListener('mouseenter', () => hoverArc(i))
+            }
         }
 
         donutArcs.appendChild(anArc)
@@ -490,13 +521,31 @@ export function chartDonut({
             }
         });
 
+        function clickLegend(index: number) {
+            if (callbacks?.onClickLegend) {
+                return callbacks?.onClickLegend({
+                    arc: arcs[index],
+                    item: formattedDataset[index]
+                })
+            }
+        }
+
+        function hoverLegend(index: number) {
+            if (callbacks?.onHoverLegend) {
+                return callbacks?.onHoverLegend({
+                    arc: arcs[index],
+                    item: formattedDataset[index]
+                })
+            }
+        }
+
         legend.style.background = 'transparent';
 
         const legendWrapper = document.createElement('div');
         legendWrapper.classList.add('savyg-legend');
         legendWrapper.setAttribute('style', `display:flex;align-items:center;justify-content:center;flex-direction:row;column-gap:12px;width:100%;height:100%;font-family:inherit;font-size:${userOptions.legendFontSize}px;overflow:visible;flex-wrap:wrap`);
 
-        formattedDataset.forEach(ds => {
+        formattedDataset.forEach((ds, i) => {
             const legendItem = document.createElement('div');
             legendItem.setAttribute("style", `display:flex;flex-direction:row;gap:4px;font-size:inherit;width:fit-content;max-width:100%;align-items:center;justify-content:center;align-items:center;`);
 
@@ -530,6 +579,13 @@ export function chartDonut({
                 legendItem.appendChild(el);
             })
             legendWrapper.appendChild(legendItem)
+
+            if (callbacks?.onClickLegend) {
+                legendItem.addEventListener("click", () => clickLegend(i))
+            }
+            if (callbacks?.onHoverLegend) {
+                legendItem.addEventListener("mouseenter", () => hoverLegend(i))
+            }
         })
 
         legend.appendChild(legendWrapper);
@@ -555,7 +611,8 @@ export function chartDonut({
             const donut = chartDonut({
                 dataset,
                 options,
-                parent: rootNode
+                parent: rootNode,
+                callbacks
             });
             return donut
         }

savyg/src/utils_chart_xy.ts

@@ -66,11 +66,18 @@ export type ChartXyOptions = {
 export function chartXy({
     dataset,
     options,
-    parent
+    parent,
+    callbacks,
 }: {
     dataset: ChartXyDatasetItem[]
     options?: ChartXyOptions
     parent?: HTMLElement
+    callbacks?: {
+        onClickLegend?: (args?: any) => void
+        onHoverLegend?: (args?: any) => void
+        onClickPeriod?: (args?: any) => void
+        onHoverPeriod?: (args?: any) => void
+    }
 }) {
 
     const absoluteDataset = dataset.map((ds, i) => {
@@ -631,13 +638,29 @@ export function chartXy({
             }
         });
 
+        function clickLegend(index: number) {
+            if (callbacks?.onClickLegend) {
+                return callbacks?.onClickLegend({
+                    item: absoluteDataset[index]
+                })
+            }
+        }
+
+        function hoverLegend(index: number) {
+            if (callbacks?.onHoverLegend) {
+                return callbacks?.onHoverLegend({
+                    item: absoluteDataset[index]
+                })
+            }
+        }
+
         legend.style.background = 'transparent';
 
         const legendWrapper = document.createElement('div');
         legendWrapper.classList.add('savyg-legend');
         legendWrapper.setAttribute('style', `display:flex;align-items:center;justify-content:center;flex-direction:row;column-gap:12px;width:100%;height:100%;font-family:inherit;font-size:${userOptions.legendFontSize}px;overflow:visible`);
 
-        formattedDataset.forEach(ds => {
+        formattedDataset.forEach((ds, i) => {
             const legendItem = document.createElement('div');
             legendItem.setAttribute("style", `display:flex;flex-direction:row;gap:4px;font-size:inherit;width:100%;align-items:center;justify-content:center;align-items:center`);
 
@@ -671,6 +694,13 @@ export function chartXy({
                 legendItem.appendChild(el);
             })
             legendWrapper.appendChild(legendItem)
+
+            if (callbacks?.onClickLegend) {
+                legendItem.addEventListener("click", () => clickLegend(i))
+            }
+            if (callbacks?.onHoverLegend) {
+                legendItem.addEventListener("mouseenter", () => hoverLegend(i))
+            }
         })
 
         legend.appendChild(legendWrapper);
@@ -764,6 +794,19 @@ export function chartXy({
         parent: chart
     })
 
+    function hoverPeriod(index: number) {
+        if (callbacks?.onHoverPeriod) {
+            return callbacks?.onHoverPeriod({
+                item: absoluteDataset.map(el => {
+                    return {
+                        ...el,
+                        value: el.values[index] ?? null
+                    }
+                })
+            })
+        }
+    }
+
     function drawTraps() {
         if (userOptions.interactive) {
             tooltip_traps.innerHTML = ""
@@ -782,6 +825,7 @@ export function chartXy({
                 trap.setAttribute("id", `${globalUid}_${i}`)
                 trap.dataset.savygZoom = globalUid;
                 trap.style.cursor = "crosshair"
+                trap.addEventListener("mouseenter", () => hoverPeriod(i))
                 trap.addEventListener('mouseenter', () => !isZooming && tooltip(i))
                 trap.addEventListener('mouseleave', () => killTooltip(i))
                 trap.addEventListener('mousemove', (e) => setTooltipCoordinates(e, i))
@@ -795,6 +839,16 @@ export function chartXy({
         killTooltip(index)
         isZooming = true;
         zoom.start = index;
+        if (callbacks?.onClickPeriod) {
+            return callbacks?.onClickPeriod({
+                item: absoluteDataset.map((el) => {
+                    return {
+                        ...el,
+                        value: el.values[index] ?? null,
+                    }
+                })
+            })
+        }
     }
 
     function setZoomEnd(index: number) {
@@ -847,7 +901,8 @@ export function chartXy({
             const xy = chartXy({
                 dataset,
                 options,
-                parent: rootNode
+                parent: rootNode,
+                callbacks
             })
 
             return xy