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(VueUiHistoryPlot): add type defs for emits

graphieros (May 22, 2026, 7:17 AM +0200) 73e46b2d 93c20dce

+70 -14
+2 -2
manual-testing/backend/database.json
··· 1464 1464 "VueUiGeo": true, 1465 1465 "VueUiGizmo": true, 1466 1466 "VueUiHeatmap": true, 1467 - "VueUiHistoryPlot": false, 1467 + "VueUiHistoryPlot": true, 1468 1468 "VueUiHorizontalBar": false, 1469 1469 "VueUiKpi": false, 1470 1470 "VueUiMiniLoader": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779425029778 1512 + "updatedAt": 1779426961194 1513 1513 } 1514 1514 ] 1515 1515 }
+2 -9
src/components/vue-ui-history-plot.vue
··· 758 758 } else { 759 759 segregated.value.push(index); 760 760 } 761 + emit('selectLegend', drawableDataset.value); 761 762 } 762 763 763 764 function validSeriesToToggle(name) { ··· 824 825 }); 825 826 } 826 827 emit('selectDatapoint', datapoint); 827 - } 828 - 829 - function selectLegend(_legend) { 830 - emit('selectLegend', drawableDataset.value); 831 828 } 832 829 833 830 function toggleFullscreen(state) { ··· 2302 2299 @clickMarker=" 2303 2300 ({ legend }) => { 2304 2301 segregate(legend.seriesIndex); 2305 - selectLegend(legend); 2306 2302 } 2307 2303 " 2308 2304 > 2309 2305 <template #item="{ legend, index }"> 2310 2306 <div 2311 2307 :data-cy="`legend-item-${index}`" 2312 - @click=" 2313 - legend.segregate(); 2314 - selectLegend(legend); 2315 - " 2308 + @click="legend.segregate()" 2316 2309 :style="`opacity:${segregated.includes(legend.seriesIndex) ? 0.5 : 1}`" 2317 2310 > 2318 2311 {{ legend.name }}
+22 -1
ts-playground/src/components/charts/ts-vue-ui-history-plot.vue
··· 7 7 VueUiHistoryPlot, 8 8 type VueUiHistoryPlotConfig, 9 9 type VueUiHistoryPlotDatasetItem, 10 + type VueUiHistoryPlotEmitCopyAlt, 11 + type VueUiHistoryPlotEmitSelectDatapoint, 12 + type VueUiHistoryPlotEmitSelectLegend, 10 13 } from 'vue-data-ui/vue-ui-history-plot'; 11 14 import { mergeConfigs } from 'vue-data-ui/utils'; 12 15 ··· 352 355 function log(n: unknown) { 353 356 console.log(n); 354 357 } 358 + 359 + function selectLegend(payload: VueUiHistoryPlotEmitSelectLegend) { 360 + console.log('@selectLegend', payload); 361 + } 362 + 363 + function selectDatapoint(payload: VueUiHistoryPlotEmitSelectDatapoint) { 364 + console.log('@selectDatapoint', payload); 365 + } 366 + 367 + function copyAlt(payload: VueUiHistoryPlotEmitCopyAlt) { 368 + console.log('@copyAlt', payload); 369 + } 355 370 </script> 356 371 357 372 <template> 358 373 <div> 359 - <VueUiHistoryPlot :dataset :config> 374 + <VueUiHistoryPlot 375 + :dataset 376 + :config 377 + @selectLegend="selectLegend" 378 + @selectDatapoint="selectDatapoint" 379 + @copyAlt="copyAlt" 380 + > 360 381 <template #annotator-action-close> 361 382 <span style="color: chocolate">X</span> 362 383 </template>
+26 -1
types/vue-data-ui.d.ts
··· 13761 13761 dataset: VueUiHistoryPlotDatasetItem[]; 13762 13762 }; 13763 13763 13764 - const VueUiHistoryPlotBase: DefineComponent<VueUiHistoryPlotProps>; 13764 + export type VueUiHistoryPlotEmitSelectLegend = 13765 + VueUiHistoryPlotFormattedDatapoint[]; 13766 + 13767 + export type VueUiHistoryPlotEmitSelectDatapoint = VueUiHistoryPlotDatapoint; 13768 + 13769 + export type VueUiHistoryPlotEmitCopyAlt = { 13770 + config: VueUiHistoryPlotConfig; 13771 + dataset: VueUiHistoryPlotFormattedDatapoint[]; 13772 + }; 13773 + 13774 + export type VueUiHistoryPlotEmits = { 13775 + selectLegend: (payload: VueUiHistoryPlotEmitSelectLegend) => void; 13776 + selectDatapoint: (payload: VueUiHistoryPlotEmitSelectDatapoint) => void; 13777 + copyAlt: (payload: VueUiHistoryPlotEmitCopyAlt) => void; 13778 + }; 13779 + 13780 + const VueUiHistoryPlotBase: DefineComponent< 13781 + VueUiHistoryPlotProps, 13782 + {}, 13783 + {}, 13784 + {}, 13785 + {}, 13786 + {}, 13787 + {}, 13788 + VueUiHistoryPlotEmits 13789 + >; 13765 13790 13766 13791 export const VueUiHistoryPlot: typeof VueUiHistoryPlotBase & { 13767 13792 new (): VueUiHistoryPlotExpose & {
+18 -1
types/vue-ui-history-plot.d.ts
··· 25 25 VueUiHistoryPlotLegendSlotProps, 26 26 VueUiHistoryPlotTooltipSlotProps, 27 27 CommonAnnotatorSlots, 28 + VueUiHistoryPlotEmits, 29 + VueUiHistoryPlotEmitSelectLegend, 30 + VueUiHistoryPlotEmitSelectDatapoint, 31 + VueUiHistoryPlotEmitCopyAlt, 28 32 } from 'vue-data-ui'; 29 33 30 34 export type { ··· 52 56 VueUiHistoryPlotLegendSlotProps, 53 57 VueUiHistoryPlotTooltipSlotProps, 54 58 CommonAnnotatorSlots, 59 + VueUiHistoryPlotEmits, 60 + VueUiHistoryPlotEmitSelectLegend, 61 + VueUiHistoryPlotEmitSelectDatapoint, 62 + VueUiHistoryPlotEmitCopyAlt, 55 63 }; 56 64 57 - declare const VueUiHistoryPlotBase: DefineComponent<VueUiHistoryPlotProps>; 65 + declare const VueUiHistoryPlotBase: DefineComponent< 66 + VueUiHistoryPlotProps, 67 + {}, 68 + {}, 69 + {}, 70 + {}, 71 + {}, 72 + {}, 73 + VueUiHistoryPlotEmits 74 + >; 58 75 59 76 export const VueUiHistoryPlot: typeof VueUiHistoryPlotBase & { 60 77 new (): VueUiHistoryPlotExpose & {