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

graphieros (May 23, 2026, 8:18 AM +0200) ae5db176 511d6e27

+108 -9
+2 -2
manual-testing/backend/database.json
··· 1490 1490 "VueUiSparkStackbar": true, 1491 1491 "VueUiSparkTrend": true, 1492 1492 "VueUiStackbar": true, 1493 - "VueUiStackline": false, 1493 + "VueUiStackline": true, 1494 1494 "VueUiStripPlot": false, 1495 1495 "VueUiTable": false, 1496 1496 "VueUiTableSparkline": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779516091826 1512 + "updatedAt": 1779517106709 1513 1513 } 1514 1514 ] 1515 1515 }
+4 -4
src/components/vue-ui-stackline.vue
··· 333 333 tooltipTriggerMode.value = 'pointer'; 334 334 isTooltip.value = false; 335 335 selectedSerieIndex.value = null; 336 - emit('selectX', { seriesIndex: null, datapoint: null }); 336 + emit('selectX', { index: null, indexLabel: null, dataset: null }); 337 337 } 338 338 339 339 function prepareConfig() { ··· 2285 2285 } else { 2286 2286 activeTooltipIndex.value = null; 2287 2287 selectedSerieIndex.value = null; 2288 - emit('selectX', { seriesIndex: null, dataset: null, indexLabel: null }); 2288 + emit('selectX', { index: null, indexLabel: null, dataset: null }); 2289 2289 if (FINAL_CONFIG.value.events.datapointLeave) { 2290 2290 FINAL_CONFIG.value.events.datapointLeave({ 2291 2291 datapoint, ··· 3132 3132 tooltipTriggerMode.value = 'pointer'; 3133 3133 isTooltip.value = false; 3134 3134 selectedSerieIndex.value = null; 3135 - emit('selectX', { seriesIndex: null, datapoint: null }); 3135 + emit('selectX', { index: null, indexLabel: null, dataset: null }); 3136 3136 isFocus.value = false; 3137 3137 } 3138 3138 ··· 3158 3158 tooltipTriggerMode.value = 'pointer'; 3159 3159 isTooltip.value = false; 3160 3160 selectedSerieIndex.value = null; 3161 - emit('selectX', { seriesIndex: null, datapoint: null }); 3161 + emit('selectX', { index: null, indexLabel: null, dataset: null }); 3162 3162 return; 3163 3163 } 3164 3164
+34 -1
ts-playground/src/components/charts/ts-vue-ui-stackline.vue
··· 7 7 VueUiStackline, 8 8 type VueUiStacklineConfig, 9 9 type VueUiStacklineDatasetItem, 10 + type VueUiStacklineEmitCopyAlt, 11 + type VueUiStacklineEmitSelectDatapoint, 12 + type VueUiStacklineEmitSelectLegend, 13 + type VueUiStacklineEmitSelectTimeLabel, 14 + type VueUiStacklineEmitSelectX, 10 15 } from 'vue-data-ui/vue-ui-stackline'; 11 16 import { mergeConfigs } from 'vue-data-ui/utils'; 12 17 import 'vue-data-ui/style.css'; ··· 434 439 function log(n: unknown) { 435 440 console.log(n); 436 441 } 442 + 443 + function selectLegend(payload: VueUiStacklineEmitSelectLegend) { 444 + console.log('@selectLegend', payload); 445 + } 446 + 447 + function selectDatapoint(payload: VueUiStacklineEmitSelectDatapoint) { 448 + console.log('@selectDatapoint', payload); 449 + } 450 + 451 + function selectTimeLabel(payload: VueUiStacklineEmitSelectTimeLabel) { 452 + console.log('@selectTimeLabel', payload); 453 + } 454 + 455 + function selectX(payload: VueUiStacklineEmitSelectX) { 456 + console.log('@selectX', payload); 457 + } 458 + 459 + function copyAlt(payload: VueUiStacklineEmitCopyAlt) { 460 + console.log('@copyAlt', payload); 461 + } 437 462 </script> 438 463 439 464 <template> 440 465 <div> 441 - <VueUiStackline :dataset :config> 466 + <VueUiStackline 467 + :dataset 468 + :config 469 + @selectLegend="selectLegend" 470 + @selectDatapoint="selectDatapoint" 471 + @selectTimeLabel="selectTimeLabel" 472 + @selectX="selectX" 473 + @copyAlt="copyAlt" 474 + > 442 475 <template #annotator-action-close> 443 476 <span style="color: chocolate">X</span> 444 477 </template>
+46 -1
types/vue-data-ui.d.ts
··· 13554 13554 selectedXIndex?: number | null; 13555 13555 }; 13556 13556 13557 - const VueUiStacklineBase: DefineComponent<VueUiStacklineProps>; 13557 + export type VueUiStacklineEmitSelectLegend = 13558 + VueUiStacklineFormattedDatasetItem[]; 13559 + 13560 + export type VueUiStacklineEmitSelectDatapoint = { 13561 + datapoint: VueUiStacklineDatasetItem[]; 13562 + period: { 13563 + absoluteIndex: number; 13564 + text: string; 13565 + }; 13566 + }; 13567 + 13568 + export type VueUiStacklineEmitSelectTimeLabel = { 13569 + datapoint: VueUiStacklineDatapointItem[]; 13570 + absoluteIndex: number; 13571 + label: string; 13572 + }; 13573 + 13574 + export type VueUiStacklineEmitSelectX = { 13575 + dataset: VueUiStacklineTooltipDatapoint[] | null; 13576 + index: number | null; 13577 + indexLabel: number | null | undefined; 13578 + }; 13579 + 13580 + export type VueUiStacklineEmitCopyAlt = { 13581 + config: VueUiStacklineConfig; 13582 + dataset: VueUiStacklineFormattedDatasetItem[]; 13583 + }; 13584 + 13585 + export type VueUiStacklineEmits = { 13586 + selectLegend: (payload: VueUiStacklineEmitSelectLegend) => void; 13587 + selectDatapoint: (payload: VueUiStacklineEmitSelectDatapoint) => void; 13588 + selectTimeLabel: (payload: VueUiStacklineEmitSelectTimeLabel) => void; 13589 + selectX: (payload: VueUiStacklineEmitSelectX) => void; 13590 + copyAlt: (payload: VueUiStacklineEmitCopyAlt) => void; 13591 + }; 13592 + 13593 + const VueUiStacklineBase: DefineComponent< 13594 + VueUiStacklineProps, 13595 + {}, 13596 + {}, 13597 + {}, 13598 + {}, 13599 + {}, 13600 + {}, 13601 + VueUiStacklineEmits 13602 + >; 13558 13603 13559 13604 export const VueUiStackline: typeof VueUiStacklineBase & { 13560 13605 new (): VueUiStacklineExpose & {
+22 -1
types/vue-ui-stackline.d.ts
··· 20 20 VueUiStacklineLegendSlotProps, 21 21 VueUiResetActionSlotProps, 22 22 VueUiStacklineTooltipSlotProps, 23 + VueUiStacklineEmits, 24 + VueUiStacklineEmitSelectLegend, 25 + VueUiStacklineEmitSelectDatapoint, 26 + VueUiStacklineEmitSelectTimeLabel, 27 + VueUiStacklineEmitSelectX, 28 + VueUiStacklineEmitCopyAlt, 23 29 } from 'vue-data-ui'; 24 30 25 31 export type { ··· 42 48 VueUiStacklineLegendSlotProps, 43 49 VueUiResetActionSlotProps, 44 50 VueUiStacklineTooltipSlotProps, 51 + VueUiStacklineEmits, 52 + VueUiStacklineEmitSelectLegend, 53 + VueUiStacklineEmitSelectDatapoint, 54 + VueUiStacklineEmitSelectTimeLabel, 55 + VueUiStacklineEmitSelectX, 56 + VueUiStacklineEmitCopyAlt, 45 57 }; 46 58 47 - declare const VueUiStacklineBase: DefineComponent<VueUiStacklineProps>; 59 + declare const VueUiStacklineBase: DefineComponent< 60 + VueUiStacklineProps, 61 + {}, 62 + {}, 63 + {}, 64 + {}, 65 + {}, 66 + {}, 67 + VueUiStacklineEmits 68 + >; 48 69 49 70 export const VueUiStackline: typeof VueUiStacklineBase & { 50 71 new (): VueUiStacklineExpose & {