From 64d62fedcd9f8dc777ac5fc5e512293c017ac699 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 8 Mar 2024 07:12:25 +0100
Subject: [PATCH] Added @selectDatpoint emit event on all mini charts

---
 package-lock.json                        |  4 ++--
 package.json                             |  2 +-
 src/App.vue                              | 25 ++++++++++++++++++++++++
 src/components/vue-ui-sparkbar.vue       |  8 +++++++-
 src/components/vue-ui-sparkhistogram.vue |  7 +++++++
 src/components/vue-ui-sparkline.vue      |  6 +++++-
 src/components/vue-ui-sparkstackbar.vue  |  9 ++++++++-
 types/vue-data-ui.d.ts                   | 25 ++++++++++++++++++++++++
 8 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cfcc4f32..5e6bacad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.0.8",
+      "version": "2.0.9",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 180b6f32..82caefad 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.9",
+  "version": "2.0.10",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index d65f85ae..630da730 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2453,6 +2453,22 @@ const moleculeConfig = ref({
   }
 })
 
+function selectSparklineDatapoint({ datapoint, index }) {
+  console.log({datapoint, index })
+}
+
+function selectSparkbarDatapoint({ datapoint, index }) {
+  console.log({ datapoint, index })
+}
+
+function selectStackbarDatapoint({ datapoint, index }) {
+  console.log({ datapoint, index })
+}
+
+function selectHistoDatapoint({ datapoint, index }) {
+  console.log({ datapoint, index })
+}
+
 </script>
 
 <template>
@@ -2923,8 +2939,10 @@ const moleculeConfig = ref({
         </template>
         <template #dev>
           <SparklineTest
+             ref="sparkline"
             :config="sparklineConfig"
             :dataset="sparklineDataset"
+            @selectDatapoint="selectSparklineDatapoint"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -2935,6 +2953,7 @@ const moleculeConfig = ref({
           <VueUiSparkline
             :config="sparklineConfig"
             :dataset="sparklineDataset"
+            @selectDatapoint="selectSparklineDatapoint"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -2999,12 +3018,14 @@ const moleculeConfig = ref({
           <HistoTest 
             :dataset="histoDataset" 
             :config="histoConfig"
+            @selectDatapoint="selectHistoDatapoint"
           />
         </template>
         <template #prod>
           <VueUiSparkHistogram
              :dataset="histoDataset" 
              :config="histoConfig"
+             @selectDatapoint="selectHistoDatapoint"
           />
         </template>
         <template #config>
@@ -3316,11 +3337,13 @@ const moleculeConfig = ref({
         <template #dev>
           <StackTest 
             :dataset="stackDataset"
+            @selectDatapoint="selectStackbarDatapoint"
           />
         </template>
         <template #prod>
           <VueUiSparkStackbar  
             :dataset="stackDataset"
+            @selectDatapoint="selectStackbarDatapoint"
           />
         </template>
         <template #config>
@@ -3641,12 +3664,14 @@ const moleculeConfig = ref({
           <SparkbarTest
             :config="sparkbarConfig"
             :dataset="sparkbarDataset"
+            @selectDatapoint="selectSparkbarDatapoint"
           />
         </template>
         <template #prod>
           <VueUiSparkbar
             :config="sparkbarConfig"
             :dataset="sparkbarDataset"
+            @selectDatapoint="selectSparkbarDatapoint"
           />
         </template>
         <template #config>
diff --git a/src/components/vue-ui-sparkbar.vue b/src/components/vue-ui-sparkbar.vue
index 70ba9d1c..d23da2c4 100644
--- a/src/components/vue-ui-sparkbar.vue
+++ b/src/components/vue-ui-sparkbar.vue
@@ -65,12 +65,18 @@ function ratioTo(val) {
     }
 }
 
+const emits = defineEmits(['selectDatapoint'])
+
+function selectDatapoint(datapoint, index) {
+    emits("selectDatapoint", { datapoint, index })
+}
+
 </script>
 
 <template>
     <div :style="`width:100%; font-family:${sparkbarConfig.style.fontFamily};background:${sparkbarConfig.style.backgroundColor}`">
         <template v-for="(bar, i) in drawableDataset">
-            <div :style="`display:flex !important;${['left', 'right'].includes(sparkbarConfig.style.labels.name.position) ? 'flex-direction:row !important' : 'flex-direction:column !important'};gap:${sparkbarConfig.style.gap}px !important;${sparkbarConfig.style.labels.name.position === 'right' ? 'row-reverse !important' : ''};align-items:center;${dataset.length > 0 && i !== dataset.length - 1 ? 'margin-bottom:6px' : ''}`">
+            <div :style="`display:flex !important;${['left', 'right'].includes(sparkbarConfig.style.labels.name.position) ? 'flex-direction:row !important' : 'flex-direction:column !important'};gap:${sparkbarConfig.style.gap}px !important;${sparkbarConfig.style.labels.name.position === 'right' ? 'row-reverse !important' : ''};align-items:center;${dataset.length > 0 && i !== dataset.length - 1 ? 'margin-bottom:6px' : ''}`" @click="() => selectDatapoint(bar, i)">
                 <div :style="`width:${sparkbarConfig.style.labels.name.width};${['right','top'].includes(sparkbarConfig.style.labels.name.position) ? 'text-align:left' : 'text-align:right'};color:${sparkbarConfig.style.labels.name.color};font-size:${sparkbarConfig.style.labels.fontSize}px;font-weight:${sparkbarConfig.style.labels.name.bold ? 'bold' : 'normal'}`">
                     <span :data-cy="`sparkbar-name-${i}`">{{ bar.name }}</span>
                     <span :data-cy="`sparkbar-value-${i}`" v-if="sparkbarConfig.style.labels.value.show" :style="`font-weight:${sparkbarConfig.style.labels.value.bold ? 'bold' : 'normal'}`">
diff --git a/src/components/vue-ui-sparkhistogram.vue b/src/components/vue-ui-sparkhistogram.vue
index 86de6f57..839fea4c 100644
--- a/src/components/vue-ui-sparkhistogram.vue
+++ b/src/components/vue-ui-sparkhistogram.vue
@@ -96,6 +96,12 @@ const computedDataset = computed(() => {
 
 const selectedIndex = ref(null);
 
+const emits = defineEmits(['selectDatapoint'])
+
+function selectDatapoint(datapoint, index) {
+    emits('selectDatapoint', { datapoint, index })
+}
+
 </script>
 
 <template>
@@ -200,6 +206,7 @@ const selectedIndex = ref(null);
                     :stroke-width="selectedIndex !== null && selectedIndex === i ? histoConfig.style.selector.strokeWidth : 0"
                     :rx="histoConfig.style.selector.borderRadius"
                     :stroke-dasharray="histoConfig.style.selector.strokeDasharray"
+                    @click="() => selectDatapoint(rect, i)"
                 />
             </g>
 
diff --git a/src/components/vue-ui-sparkline.vue b/src/components/vue-ui-sparkline.vue
index 5c784d3e..6c21105c 100644
--- a/src/components/vue-ui-sparkline.vue
+++ b/src/components/vue-ui-sparkline.vue
@@ -48,7 +48,7 @@ const svg = ref({
     width: 500,
 });
 
-const emits = defineEmits(['hoverIndex'])
+const emits = defineEmits(['hoverIndex', 'selectDatapoint'])
 
 const drawingArea = computed(() => {
     const topPadding = 12;
@@ -147,6 +147,9 @@ const isBar = computed(() => {
     return sparklineConfig.value.type && sparklineConfig.value.type === 'bar';
 });
 
+function selectDatapoint(datapoint, index) {
+    emits('selectDatapoint', { datapoint, index })
+}
 </script>
 
 <template>
@@ -286,6 +289,7 @@ const isBar = computed(() => {
                 fill="transparent"
                 @mouseenter="selectPlot(plot, i)"
                 @mouseleave="unselectPlot"
+                @click="() => selectDatapoint(plot, i)"
             />
             <slot name="svg" :svg="svg"/>
         </svg>
diff --git a/src/components/vue-ui-sparkstackbar.vue b/src/components/vue-ui-sparkstackbar.vue
index da29dde7..9023685c 100644
--- a/src/components/vue-ui-sparkstackbar.vue
+++ b/src/components/vue-ui-sparkstackbar.vue
@@ -63,6 +63,12 @@ const drawableDataset = computed(() => {
     return datapoints;
 })
 
+const emits = defineEmits(['selectDatapoint'])
+
+function selectDatapoint(datapoint, index) {
+    emits('selectDatapoint', { datapoint, index })
+}
+
 </script>
 
 <template>
@@ -101,6 +107,7 @@ const drawableDataset = computed(() => {
                 <rect :x="0" :y="0" :height="svg.height" :width="svg.width" :fill="stackConfig.style.bar.gradient.underlayerColor"/>
                 <rect 
                     v-for="(rect, i) in drawableDataset" :key="`stack_${i}`"
+                    @click="() => selectDatapoint(rect, i)"
                     :x="rect.start"
                     :y="0"
                     :width="rect.width"
@@ -113,7 +120,7 @@ const drawableDataset = computed(() => {
         </svg>
         <div v-if="stackConfig.style.legend.show" data-cy="sparkstackbar-legend" :style="`background:${stackConfig.style.backgroundColor};display:flex;flex-wrap:wrap;column-gap:12px;width:calc(100% - 12px);margin:0 auto;margin:${stackConfig.style.legend.margin}; padding: 0 6px;justify-content:${stackConfig.style.legend.textAlign === 'left' ? 'flex-start' : stackConfig.style.legend.textAlign === 'right' ? 'flex-end' : 'center'}`">
             <div v-for=" (rect, i) in drawableDataset" :style="`font-size:${stackConfig.style.legend.fontSize}px`">
-                <div style="display:flex;flex-direction:row;align-items:center;gap:4px;justify-content:center">
+                <div style="display:flex;flex-direction:row;align-items:center;gap:4px;justify-content:center" >
                     <svg :height="`${stackConfig.style.legend.fontSize}px`" :width="`${stackConfig.style.legend.fontSize}px`" viewBox="0 0 10 10">
                         <circle :cx="5" :cy="5" :r="5" :fill="rect.color"/>
                     </svg>
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index daf466c6..604c43af 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -850,6 +850,19 @@ declare module 'vue-data-ui' {
         valueLabel?: string;
         timeLabel?: string;
         intensity?: number & { 0: 0; 1: 1 };
+        gradient?: string;
+        height?: number;
+        proportion?: number;
+        stroke?: string;
+        textAnchor?: number;
+        timeLabel?: string;
+        trapX?: number;
+        unitWidth?: number;
+        value?: number;
+        valueLabel?: string;
+        width?: number;
+        x?: number;
+        y?: number;
     }
 
     export const VueUiSparkHistogram: DefineComponent<{
@@ -913,6 +926,11 @@ declare module 'vue-data-ui' {
         name: string;
         value: number;
         color?: string;
+        proportion?: number;
+        proportionLabel?: string;
+        start?: number;
+        value?: number;
+        width?: number;
     }
 
     export const VueUiSparkstackbar: DefineComponent<{
@@ -3333,6 +3351,13 @@ declare module 'vue-data-ui' {
     export type VueUiSparklineDatasetItem = {
         period: string;
         value: number;
+        absoluteValue?: number;
+        id?: string;
+        plotValue?: number;
+        toMax?: number;
+        width?: number;
+        x?: number;
+        y?: number;
     };
 
     export type VueUiSparklineConfig = {