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

graphieros (May 22, 2026, 6:19 AM +0200) 1d990ba3 1e0fa6a3

+118 -16
+3 -3
manual-testing/backend/database.json
··· 1458 1458 "VueUiDonutEvolution": true, 1459 1459 "VueUiDumbbell": true, 1460 1460 "VueUiFlow": true, 1461 - "VueUiFunnel": false, 1462 - "VueUiGalaxy": false, 1461 + "VueUiFunnel": true, 1462 + "VueUiGalaxy": true, 1463 1463 "VueUiGauge": false, 1464 1464 "VueUiGeo": false, 1465 1465 "VueUiGizmo": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779422106714 1512 + "updatedAt": 1779423503970 1513 1513 } 1514 1514 ] 1515 1515 }
+6 -1
ts-playground/src/components/charts/ts-vue-ui-funnel.vue
··· 7 7 VueUiFunnel, 8 8 type VueUiFunnelConfig, 9 9 type VueUiFunnelDatasetItem, 10 + type VueUiFunnelEmitCopyAlt, 10 11 } from 'vue-data-ui/vue-ui-funnel'; 11 12 import { mergeConfigs } from 'vue-data-ui/utils'; 12 13 ··· 238 239 function log(n: unknown) { 239 240 console.log(n); 240 241 } 242 + 243 + function copyAlt(payload: VueUiFunnelEmitCopyAlt) { 244 + console.log('@copyAlt', payload); 245 + } 241 246 </script> 242 247 243 248 <template> 244 249 <div> 245 - <VueUiFunnel :dataset :config> 250 + <VueUiFunnel :dataset :config @copyAlt="copyAlt"> 246 251 <template #annotator-action-close> 247 252 <span style="color: chocolate">X</span> 248 253 </template>
+22 -1
ts-playground/src/components/charts/ts-vue-ui-galaxy.vue
··· 7 7 VueUiGalaxy, 8 8 type VueUiGalaxyConfig, 9 9 type VueUiGalaxyDatasetItem, 10 + type VueUiGalaxyEmitCopyAlt, 11 + type VueUiGalaxyEmitSelectDatapoint, 12 + type VueUiGalaxyEmitSelectLegend, 10 13 } from 'vue-data-ui/vue-ui-galaxy'; 11 14 import { mergeConfigs } from 'vue-data-ui/utils'; 12 15 ··· 262 265 function log(n: unknown) { 263 266 console.log(n); 264 267 } 268 + 269 + function selectLegend(payload: VueUiGalaxyEmitSelectLegend) { 270 + console.log('@selectLegend', payload); 271 + } 272 + 273 + function selectDatapoint(payload: VueUiGalaxyEmitSelectDatapoint) { 274 + console.log('@selectDatapoint', payload); 275 + } 276 + 277 + function copyAlt(payload: VueUiGalaxyEmitCopyAlt) { 278 + console.log('@copyAlt', payload); 279 + } 265 280 </script> 266 281 267 282 <template> 268 283 <div> 269 - <VueUiGalaxy :dataset :config> 284 + <VueUiGalaxy 285 + :dataset 286 + :config 287 + @selectLegend="selectLegend" 288 + @selectDatapoint="selectDatapoint" 289 + @copyAlt="copyAlt" 290 + > 270 291 <template #annotator-action-close> 271 292 <span style="color: chocolate">X</span> 272 293 </template>
+55 -9
types/vue-data-ui.d.ts
··· 1136 1136 dataset: VueUiGalaxyDatasetItem[]; 1137 1137 }; 1138 1138 1139 - const VueUiGalaxyBase: DefineComponent<VueUiGalaxyProps>; 1139 + export type VueUiGalaxyEmitSelectLegend = Array<{ 1140 + name: string; 1141 + color: string; 1142 + value: number; 1143 + }>; 1144 + 1145 + export type VueUiGalaxyEmitSelectDatapoint = 1146 + VueUiGalaxyFormattedDatapoint & { 1147 + path: string; 1148 + points: number; 1149 + proportion: number; 1150 + seriesIndex: number; 1151 + }; 1152 + 1153 + export type VueUiGalaxyEmitCopyAlt = { 1154 + config: VueUiGalaxyConfig; 1155 + dataset: VueUiGalaxyFormattedDatapoint[]; 1156 + }; 1157 + 1158 + export type VueUiGalaxyEmits = { 1159 + selectLegend: (payload: VueUiGalaxyEmitSelectLegend) => void; 1160 + selectDatapoint: (payload: VueUiGalaxyEmitSelectDatapoint) => void; 1161 + copyAlt: (payload: VueUiGalaxyEmitCopyAlt) => void; 1162 + }; 1163 + 1164 + const VueUiGalaxyBase: DefineComponent< 1165 + VueUiGalaxyProps, 1166 + {}, 1167 + {}, 1168 + {}, 1169 + {}, 1170 + {}, 1171 + {}, 1172 + VueUiGalaxyEmits 1173 + >; 1140 1174 1141 1175 export const VueUiGalaxy: typeof VueUiGalaxyBase & { 1142 1176 new (): VueUiGalaxyExpose & { ··· 13345 13379 }; 13346 13380 13347 13381 export type VueUiFunnelExpose = { 13348 - getData(): Promise< 13349 - Array<{ 13350 - color: string; 13351 - name: string; 13352 - value: string; 13353 - }> 13354 - >; 13382 + getData(): Promise<VueUiFunnelDatasetItem[]>; 13355 13383 getImage(options?: { scale?: number }): GetImagePromise; 13356 13384 generateCsv(): void; 13357 13385 generateImage(): void; ··· 13376 13404 config?: VueUiFunnelConfig; 13377 13405 }; 13378 13406 13379 - const VueUiFunnelBase: DefineComponent<VueUiFunnelProps>; 13407 + export type VueUiFunnelEmitCopyAlt = { 13408 + config: VueUiFunnelConfig; 13409 + dataset: VueUiFunnelDatasetItem[]; 13410 + }; 13411 + 13412 + export type VueUiFunnelEmits = { 13413 + copyAlt: (payload: VueUiFunnelEmitCopyAlt) => void; 13414 + }; 13415 + 13416 + const VueUiFunnelBase: DefineComponent< 13417 + VueUiFunnelProps, 13418 + {}, 13419 + {}, 13420 + {}, 13421 + {}, 13422 + {}, 13423 + {}, 13424 + VueUiFunnelEmits 13425 + >; 13380 13426 13381 13427 export const VueUiFunnel: typeof VueUiFunnelBase & { 13382 13428 new (): VueUiFunnelExpose & {
+14 -1
types/vue-ui-funnel.d.ts
··· 15 15 VueUiFunnelSvgSlotProps, 16 16 VueUiWatermarkSlotProps, 17 17 CommonAnnotatorSlots, 18 + VueUiFunnelEmits, 19 + VueUiFunnelEmitCopyAlt, 18 20 } from 'vue-data-ui'; 19 21 20 22 export type { ··· 32 34 VueUiFunnelSvgSlotProps, 33 35 VueUiWatermarkSlotProps, 34 36 CommonAnnotatorSlots, 37 + VueUiFunnelEmits, 38 + VueUiFunnelEmitCopyAlt, 35 39 }; 36 40 37 - declare const VueUiFunnelBase: DefineComponent<VueUiFunnelProps>; 41 + declare const VueUiFunnelBase: DefineComponent< 42 + VueUiFunnelProps, 43 + {}, 44 + {}, 45 + {}, 46 + {}, 47 + {}, 48 + {}, 49 + VueUiFunnelEmits 50 + >; 38 51 39 52 export const VueUiFunnel: typeof VueUiFunnelBase & { 40 53 new (): VueUiFunnelExpose & {
+18 -1
types/vue-ui-galaxy.d.ts
··· 25 25 VueUiGalaxyDatapointTooltip, 26 26 VueUiGalaxyTooltipSlotProps, 27 27 CommonAnnotatorSlots, 28 + VueUiGalaxyEmits, 29 + VueUiGalaxyEmitSelectLegend, 30 + VueUiGalaxyEmitSelectDatapoint, 31 + VueUiGalaxyEmitCopyAlt, 28 32 } from 'vue-data-ui'; 29 33 30 34 export type { ··· 52 56 VueUiGalaxyDatapointTooltip, 53 57 VueUiGalaxyTooltipSlotProps, 54 58 CommonAnnotatorSlots, 59 + VueUiGalaxyEmits, 60 + VueUiGalaxyEmitSelectLegend, 61 + VueUiGalaxyEmitSelectDatapoint, 62 + VueUiGalaxyEmitCopyAlt, 55 63 }; 56 64 57 - declare const VueUiGalaxyBase: DefineComponent<VueUiGalaxyProps>; 65 + declare const VueUiGalaxyBase: DefineComponent< 66 + VueUiGalaxyProps, 67 + {}, 68 + {}, 69 + {}, 70 + {}, 71 + {}, 72 + {}, 73 + VueUiGalaxyEmits 74 + >; 58 75 59 76 export const VueUiGalaxy: typeof VueUiGalaxyBase & { 60 77 new (): VueUiGalaxyExpose & {