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

graphieros (May 22, 2026, 6:32 PM +0200) 6846e0f3 3313cff2

+134 -37
+2 -2
manual-testing/backend/database.json
··· 1478 1478 "VueUiRadar": true, 1479 1479 "VueUiRating": true, 1480 1480 "VueUiRelationCircle": true, 1481 - "VueUiRidgeline": false, 1481 + "VueUiRidgeline": true, 1482 1482 "VueUiRings": false, 1483 1483 "VueUiScatter": false, 1484 1484 "VueUiSkeleton": false, ··· 1509 1509 "customCheckList": {}, 1510 1510 "id": "4b423dba-9fc5-45b8-9dca-20e1f2678b9e", 1511 1511 "createdAt": 1779169675598, 1512 - "updatedAt": 1779466522777 1512 + "updatedAt": 1779467504476 1513 1513 } 1514 1514 ] 1515 1515 }
+40 -2
ts-playground/src/components/charts/ts-vue-ui-ridgeline.vue
··· 7 7 VueUiRidgeline, 8 8 type VueUiRidgelineConfig, 9 9 type VueUiRidgelineDatasetItem, 10 + type VueUiRidgelineEmitCopyAlt, 11 + type VueUiRidgelineEmitSelectLegend, 12 + type VueUiRidgelineEmitSelectX, 13 + type VueUiRidgelineFormattedDatasetItem, 10 14 } from 'vue-data-ui/vue-ui-ridgeline'; 11 15 import { mergeConfigs } from 'vue-data-ui/utils'; 12 16 import 'vue-data-ui/style.css'; ··· 778 782 const config = computed<VueUiRidgelineConfig>(() => { 779 783 return mergeConfigs({ 780 784 defaultConfig: testPreconfig.value, 781 - userConfig: {}, 785 + userConfig: { 786 + userOptions: { 787 + buttons: { 788 + altCopy: true, 789 + }, 790 + callbacks: { 791 + altCopy: (args) => { 792 + console.log(args); 793 + }, 794 + }, 795 + }, 796 + }, 782 797 }); 783 798 }); 784 799 785 800 function log(n: unknown) { 786 801 console.log(n); 787 802 } 803 + 804 + function selectLegend(payload: VueUiRidgelineEmitSelectLegend) { 805 + console.log('@selectLegend', payload); 806 + } 807 + 808 + function selectDatapoint(payload: VueUiRidgelineFormattedDatasetItem) { 809 + console.log('@selectDatapoint', payload); 810 + } 811 + 812 + function selectX(payload: VueUiRidgelineEmitSelectX) { 813 + console.log('@selectX', payload); 814 + } 815 + 816 + function copyAlt(payload: VueUiRidgelineEmitCopyAlt) { 817 + console.log('@copyAlt', payload); 818 + } 788 819 </script> 789 820 790 821 <template> 791 822 <div> 792 - <VueUiRidgeline :dataset :config> 823 + <VueUiRidgeline 824 + :dataset 825 + :config 826 + @selectLegend="selectLegend" 827 + @selectDatapoint="selectDatapoint" 828 + @selectX="selectX" 829 + @copyAlt="copyAlt" 830 + > 793 831 <template #annotator-action-close> 794 832 <span style="color: chocolate">X</span> 795 833 </template>
+70 -32
types/vue-data-ui.d.ts
··· 14786 14786 }; 14787 14787 }; 14788 14788 14789 + export type VueUiRidgelineFormattedDatasetItem = { 14790 + datapoints: Array<{ 14791 + color: string; 14792 + id: string; 14793 + name: string; 14794 + pathLength: number; 14795 + plots: Array<{ 14796 + isMaxPoint: boolean; 14797 + value: number; 14798 + x: number; 14799 + y: number; 14800 + zero: number; 14801 + }>; 14802 + smoothPath: string; 14803 + smoothPathRidge: string; 14804 + straightPath: string; 14805 + straightPathRidge: string; 14806 + uid: string; 14807 + values: Array<number | null>; 14808 + zeroPath: string; 14809 + }>; 14810 + label: { 14811 + x: number; 14812 + y: number; 14813 + }; 14814 + labelLen: number; 14815 + name: string; 14816 + uid: string; 14817 + }; 14818 + 14789 14819 export type VueUiRidgelineExpose = { 14790 - getData(): Promise< 14791 - Array<{ 14792 - datapoints: Array<{ 14793 - color: string; 14794 - id: string; 14795 - name: string; 14796 - pathLength: number; 14797 - plots: Array<{ 14798 - isMaxPoint: boolean; 14799 - value: number; 14800 - x: number; 14801 - y: number; 14802 - zero: number; 14803 - }>; 14804 - smoothPath: string; 14805 - smoothPathRidge: string; 14806 - straightPath: string; 14807 - straightPathRidge: string; 14808 - uid: string; 14809 - values: Array<number | null>; 14810 - zeroPath: string; 14811 - }>; 14812 - label: { 14813 - x: number; 14814 - y: number; 14815 - }; 14816 - labelLen: number; 14817 - name: string; 14818 - uid: string; 14819 - }> 14820 - >; 14820 + getData(): Promise<VueUiRidgelineFormattedDatasetItem[]>; 14821 14821 getImage(options?: { scale?: number }): GetImagePromise; 14822 14822 generateCsv(): void; 14823 14823 generateImage(): void; ··· 14883 14883 dataset: VueUiRidgelineDatasetItem[]; 14884 14884 }; 14885 14885 14886 - const VueUiRidgelineBase: DefineComponent<VueUiRidgelineProps>; 14886 + export type VueUiRidgelineEmitSelectLegend = 14887 + VueUiRidgelineFormattedDatasetItem[]; 14888 + 14889 + export type VueUiRidgelineEmitSelectDatapoint = 14890 + VueUiRidgelineFormattedDatasetItem; 14891 + 14892 + export type VueUiRidgelineEmitSelectX = Array<{ 14893 + dp: { 14894 + color: string; 14895 + id: string; 14896 + name: string; 14897 + values: Array<number | null>; 14898 + }; 14899 + selected: number; 14900 + }>; 14901 + 14902 + export type VueUiRidgelineEmitCopyAlt = { 14903 + source: string; 14904 + config: VueUiRidgelineConfig; 14905 + dataset: VueUiRidgelineFormattedDatasetItem[]; 14906 + }; 14907 + 14908 + export type VueUiRidgelineEmits = { 14909 + selectLegend: (payload: VueUiRidgelineEmitSelectLegend) => void; 14910 + selectDatapoint: (payload: VueUiRidgelineEmitSelectDatapoint) => void; 14911 + selectX: (payload: VueUiRidgelineEmitSelectX) => void; 14912 + copyAlt: (payload: VueUiRidgelineEmitCopyAlt) => void; 14913 + }; 14914 + 14915 + const VueUiRidgelineBase: DefineComponent< 14916 + VueUiRidgelineProps, 14917 + {}, 14918 + {}, 14919 + {}, 14920 + {}, 14921 + {}, 14922 + {}, 14923 + VueUiRidgelineEmits 14924 + >; 14887 14925 14888 14926 export const VueUiRidgeline: typeof VueUiRidgelineBase & { 14889 14927 new (): VueUiRidgelineExpose & {
+22 -1
types/vue-ui-ridgeline.d.ts
··· 20 20 VueUiKeyboardNavigationHintSlotProps, 21 21 VueUiWatermarkSlotProps, 22 22 VueUiRidgelineLegendSlotProps, 23 + VueUiRidgelineEmits, 24 + VueUiRidgelineEmitSelectLegend, 25 + VueUiRidgelineEmitSelectDatapoint, 26 + VueUiRidgelineEmitSelectX, 27 + VueUiRidgelineEmitCopyAlt, 28 + VueUiRidgelineFormattedDatasetItem, 23 29 } from 'vue-data-ui'; 24 30 25 31 export type { ··· 42 48 VueUiKeyboardNavigationHintSlotProps, 43 49 VueUiWatermarkSlotProps, 44 50 VueUiRidgelineLegendSlotProps, 51 + VueUiRidgelineEmits, 52 + VueUiRidgelineEmitSelectLegend, 53 + VueUiRidgelineEmitSelectDatapoint, 54 + VueUiRidgelineEmitSelectX, 55 + VueUiRidgelineEmitCopyAlt, 56 + VueUiRidgelineFormattedDatasetItem, 45 57 }; 46 58 47 - declare const VueUiRidgelineBase: DefineComponent<VueUiRidgelineProps>; 59 + declare const VueUiRidgelineBase: DefineComponent< 60 + VueUiRidgelineProps, 61 + {}, 62 + {}, 63 + {}, 64 + {}, 65 + {}, 66 + {}, 67 + VueUiRidgelineEmits 68 + >; 48 69 49 70 export const VueUiRidgeline: typeof VueUiRidgelineBase & { 50 71 new (): VueUiRidgelineExpose & {