@dataloop-ai/components 0.19.219 → 0.19.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.219",
+  "version": "0.19.221",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChart.vue

@@ -98,6 +98,11 @@ import { TDoughnutWithOriginalColor } from './types/TDoughnutWithOriginalColor'
 import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
 import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 
+type SetupParams = {
+    attrs: { onItemClick?: (index: number) => void }
+    listeners?: { itemClick?: (index: number) => void }
+}
+
 export default defineComponent({
     name: 'DlDoughnutChart',
     components: {
@@ -132,7 +137,7 @@ export default defineComponent({
             default: () => doughnutChartEmptyStateProps
         }
     },
-    setup(props) {
+    setup(props, params: SetupParams) {
         /** Data */
         const doughnutChartRef = ref(null)
         const dlDoughnutChartWidgetRef = ref(null)
@@ -304,6 +309,23 @@ export default defineComponent({
                                 }
                             }
                         }
+                    },
+                    onClick: (e: Event & { chart: ChartJS }) => {
+                        const itemClick =
+                            params.attrs.onItemClick ??
+                            params.listeners?.itemClick
+                        if (itemClick) {
+                            const intersects =
+                                e.chart.getElementsAtEventForMode(
+                                    e,
+                                    'nearest',
+                                    { intersect: true },
+                                    false
+                                )
+                            if (intersects.length > 0) {
+                                itemClick(intersects[0].index)
+                            }
+                        }
                     }
                 },
                 defaultOptions

package/src/demos/DlChartDoughnutDemo.vue

@@ -5,6 +5,7 @@
                 <DlDoughnutChart
                     :data="doughnutLessData"
                     :animation="doughnutAnimation"
+                    @itemClick="handleItemClick"
                 >
                     <template #default="{ item, index }">
                         <span style="color: tomato">
@@ -230,7 +231,12 @@ export default defineComponent({
         return {
             doughnutData,
             doughnutLessData,
-            doughnutAnimation
+            doughnutAnimation,
+            handleItemClick: (index: number) => {
+                alert(
+                    `You clicked ${doughnutLessData.datasets[0].data[index]} 🍅`
+                )
+            }
         }
     }
 })