Added @selectDatpoint emit event on all mini charts

Author: graphieros

package-lock.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": [

package.json

@@ -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>

src/App.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'}`">

src/components/vue-ui-sparkbar.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>
 

src/components/vue-ui-sparkhistogram.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>

src/components/vue-ui-sparkline.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>

src/components/vue-ui-sparkstackbar.vue

@@ -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 = {