graphieros.npmx.social / vue-data-ui
[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling vue-data-ui.graphieros.com/
charts components-library dashboard data-storytelling data-visualization donut gauge heatmap quadrant radar rating-stars scatter screenshot skeleton-loader sparkline table vue-data-ui vue3 vuejs vuejs3
3
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

chore(VueUiSparkline): add type defs for emits

graphieros (May 23, 2026, 7:15 AM +0200) 962d97ee 2f9684eb

+58 -5
+2 -2
manual-testing/backend/database.json
··· 1486 1486 "VueUiSparkbar": true, 1487 1487 "VueUiSparkgauge": true, 1488 1488 "VueUiSparkHistogram": true, 1489 - "VueUiSparkline": false, 1489 + "VueUiSparkline": true, 1490 1490 "VueUiSparkStackbar": false, 1491 1491 "VueUiSparkTrend": false, 1492 1492 "VueUiStackbar": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779512794653 1512 + "updatedAt": 1779513310883 1513 1513 } 1514 1514 ] 1515 1515 }
+16 -1
ts-playground/src/components/charts/ts-vue-ui-sparkline.vue
··· 7 7 VueUiSparkline, 8 8 type VueUiSparklineConfig, 9 9 type VueUiSparklineDatasetItem, 10 + type VueUiSparklineEmitHoverIndex, 11 + type VueUiSparklineEmitSelectDatapoint, 10 12 } from 'vue-data-ui/vue-ui-sparkline'; 11 13 12 14 import 'vue-data-ui/style.css'; ··· 242 244 }; 243 245 }); 244 246 247 + function hoverIndex(payload: VueUiSparklineEmitHoverIndex) { 248 + console.log('@hoverIndex', payload); 249 + } 250 + 251 + function selectDatapoint(payload: VueUiSparklineEmitSelectDatapoint) { 252 + console.log('@selectDatapoint', payload); 253 + } 254 + 245 255 function log(n: unknown) { 246 256 console.log(n); 247 257 } ··· 249 259 250 260 <template> 251 261 <div> 252 - <VueUiSparkline :dataset :config> 262 + <VueUiSparkline 263 + :dataset 264 + :config 265 + @hoverIndex="hoverIndex" 266 + @selectDatapoint="selectDatapoint" 267 + > 253 268 <template 254 269 #before="{ average, median, latest, selected, sum, trend }" 255 270 >
+24 -1
types/vue-data-ui.d.ts
··· 9309 9309 dataset: VueUiSparklineDatasetItem[]; 9310 9310 }; 9311 9311 9312 - const VueUiSparklineBase: DefineComponent<VueUiSparklineProps>; 9312 + export type VueUiSparklineEmitHoverIndex = { 9313 + index: number | undefined; 9314 + }; 9315 + 9316 + export type VueUiSparklineEmitSelectDatapoint = { 9317 + datapoint: VueUiSparklineFormattedDatapoint; 9318 + index: number; 9319 + }; 9320 + 9321 + export type VueUiSparklineEmits = { 9322 + hoverIndex: (payload: VueUiSparklineEmitHoverIndex) => void; 9323 + selectDatapoint: (payload: VueUiSparklineEmitSelectDatapoint) => void; 9324 + }; 9325 + 9326 + const VueUiSparklineBase: DefineComponent< 9327 + VueUiSparklineProps, 9328 + {}, 9329 + {}, 9330 + {}, 9331 + {}, 9332 + {}, 9333 + {}, 9334 + VueUiSparklineEmits 9335 + >; 9313 9336 9314 9337 export const VueUiSparkline: typeof VueUiSparklineBase & { 9315 9338 new (): {
+16 -1
types/vue-ui-sparkline.d.ts
··· 10 10 VueUiKeyboardNavigationHintSlotProps, 11 11 VueUiSparklineFormattedDatapoint, 12 12 VueUiSparklineTooltipSlotProps, 13 + VueUiSparklineEmits, 14 + VueUiSparklineEmitHoverIndex, 15 + VueUiSparklineEmitSelectDatapoint, 13 16 } from 'vue-data-ui'; 14 17 15 18 export type { ··· 22 25 VueUiKeyboardNavigationHintSlotProps, 23 26 VueUiSparklineFormattedDatapoint, 24 27 VueUiSparklineTooltipSlotProps, 28 + VueUiSparklineEmits, 29 + VueUiSparklineEmitHoverIndex, 30 + VueUiSparklineEmitSelectDatapoint, 25 31 }; 26 32 27 - declare const VueUiSparklineBase: DefineComponent<VueUiSparklineProps>; 33 + declare const VueUiSparklineBase: DefineComponent< 34 + VueUiSparklineProps, 35 + {}, 36 + {}, 37 + {}, 38 + {}, 39 + {}, 40 + {}, 41 + VueUiSparklineEmits 42 + >; 28 43 29 44 export const VueUiSparkline: typeof VueUiSparklineBase & { 30 45 new (): {