Skip to content

Commit fe813c9

Browse files
graphierosgraphieros
committed
Improvement - VueUiFlow - Add optional tooltip
1 parent c38e64a commit fe813c9

File tree

10 files changed

+398
-219
lines changed

10 files changed

+398
-219
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ From the dataset you pass into the props, this component will produce the most a
433433
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
434434
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
435435
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
436-
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
436+
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#watermark`, `#chart-background`, `#tooltip-before`, `#tooltip-after`, | ✅ | ✅ |
437437
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
438438
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
439439
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |

‎TestingArena/ArenaVueUiFlow.vue

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,46 @@ import { useArena } from "../src/useArena";
99
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
1010
1111
const dataset = ref([
12-
[ 'A1', 'B1', 10 ],
13-
[ 'A1', 'B2', 10 ],
14-
[ 'B1', 'C1', 5 ],
15-
[ 'B1', 'C2', 5 ],
16-
[ 'B1', 'C3', 5 ],
17-
[ 'B1', 'C4', 5 ],
18-
[ 'A2', 'B1', 10],
19-
[ 'B2', 'C5', 10],
20-
[ 'C3', 'D1', 2],
21-
[ 'C4', 'D1', 2],
22-
[ 'C5', 'D1', 2],
23-
[ 'C2', 'D2', 2],
24-
[ 'C3', 'D2', 1],
12+
// Sources
13+
['Households', 'Collection Centers', 40],
14+
['Restaurants', 'Collection Centers', 20],
15+
['Industries', 'Collection Centers', 30],
16+
['Littering', 'Environment', 10],
17+
18+
// Collection to Processing
19+
['Collection Centers', 'Recycling Plants', 50],
20+
['Collection Centers', 'Landfills', 25],
21+
['Collection Centers', 'Incineration', 15],
22+
23+
// Processing to Final Outcome
24+
['Recycling Plants', 'Recycled Products', 30],
25+
['Recycling Plants', 'Exported Waste', 20],
26+
['Landfills', 'Methane Emission', 10],
27+
['Landfills', 'Buried Waste', 15],
28+
['Incineration', 'Energy Recovery', 10],
29+
['Incineration', 'Air Pollution', 5],
30+
31+
// Direct Environment impact
32+
['Environment', 'Ocean Pollution', 6],
33+
['Environment', 'Soil Contamination', 4],
2534
]);
26-
35+
2736
const model = ref([
2837
{ key: 'userOptions.show', def: true, type: 'checkbox' },
2938
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox' },
3039
{ key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
3140
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
3241
{ key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
3342
{ key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
34-
{ key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
35-
{ key: 'userOptions.showOnChartHover', def: true, type: 'checkbox'},
36-
{ key: 'userOptions.keepStateOnChartLeave', def: true, type: 'checkbox'},
43+
{ key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right'] },
44+
{ key: 'userOptions.showOnChartHover', def: true, type: 'checkbox' },
45+
{ key: 'userOptions.keepStateOnChartLeave', def: true, type: 'checkbox' },
3746
38-
{ key: 'userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5},
39-
{ key: 'userOptions.print.allowTaint', def: true, type: 'checkbox'},
40-
{ key: 'userOptions.print.useCORS', def: true, type: 'checkbox'},
47+
{ key: 'userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5 },
48+
{ key: 'userOptions.print.allowTaint', def: true, type: 'checkbox' },
49+
{ key: 'userOptions.print.useCORS', def: true, type: 'checkbox' },
4150
{ key: 'userOptions.print.backgroundColor', def: '#FFFFFF' },
42-
51+
4352
{ key: 'style.fontFamily', def: 'inherit', type: 'text' },
4453
{ key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },
4554
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color' },
@@ -62,7 +71,7 @@ const model = ref([
6271
{ key: 'style.chart.nodes.labels.abbreviation.use', def: true, type: 'checkbox' },
6372
{ key: 'style.chart.nodes.labels.abbreviation.length', def: 3, type: 'number', min: 1, max: 12 },
6473
{ key: 'style.chart.nodes.stroke', def: '#FFFFFF', type: 'color' },
65-
{ key: 'style.chart.nodes.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
74+
{ key: 'style.chart.nodes.strokeWidth', def: 1, type: 'number', min: 0, max: 12 },
6675
{ key: 'style.chart.links.opacity', def: 0.8, type: 'number', min: 0, max: 1, step: 0.1 },
6776
{ key: 'style.chart.links.stroke', def: '#FFFFFF', type: 'color' },
6877
{ key: 'style.chart.links.strokeWidth', def: 1, type: 'number', min: 0, max: 12 },
@@ -95,7 +104,7 @@ const config = computed(() => {
95104
...c.style.chart.nodes,
96105
labels: {
97106
...c.style.chart.nodes.labels,
98-
formatter: ({value, config}) => {
107+
formatter: ({ value, config }) => {
99108
// console.log(config)
100109
return `f | ${value}`
101110
}
@@ -125,7 +134,7 @@ const step = ref(0);
125134
<template #local>
126135
<LocalVueUiFlow :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
127136
<template #chart-background>
128-
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
137+
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)" />
129138
</template>
130139

131140
<template #optionPdf>
@@ -139,22 +148,26 @@ const step = ref(0);
139148
</template>
140149
<template #source>
141150
<div style="width:100%;font-size:10px;text-align:left">
142-
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
151+
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae
152+
perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus
153+
aspernatur labore! Sapiente aspernatur corrupti quis ad.
143154
</div>
144-
</template>
155+
</template>
145156
</LocalVueUiFlow>
146157
</template>
147158

148159
<template #VDUI-local>
149-
<LocalVueDataUi component="VueUiFlow" :dataset="dataset" :config="config" :key="`VDUI_local_${step}`" ref="vduiLocal"></LocalVueDataUi>
160+
<LocalVueDataUi component="VueUiFlow" :dataset="dataset" :config="config" :key="`VDUI_local_${step}`"
161+
ref="vduiLocal"></LocalVueDataUi>
150162
</template>
151163

152164
<template #build>
153165
<VueUiFlow :dataset="dataset" :config="config" :key="`build_${step}`" ref="build"></VueUiFlow>
154166
</template>
155167

156168
<template #VDUI-build>
157-
<VueDataUi component="VueUiFlow" :dataset="dataset" :config="config" :key="`VDUI_build_${step}`" ref="vduiBuild"></VueDataUi>
169+
<VueDataUi component="VueUiFlow" :dataset="dataset" :config="config" :key="`VDUI_build_${step}`"
170+
ref="vduiBuild"></VueDataUi>
158171
</template>
159172

160173
<template #knobs>

‎documentation/installation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ From the dataset you pass into the props, this component will produce the most a
151151
| `VueUiDonutEvolution` | `VueUiDonutEvolutionDatasetItem[]` | `VueUiDonutEvolutionConfig` | `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#reset-action`, `#watermark`, `#chart-background` | ❌ | ✅ |
152152
| `VueUiDonut` | `VueUiDonutDatasetItem[]` | `VueUiDonutConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` | `#svg`, `#legend`, `#dataLabel`, `#tooltip-before`, `#tooltip-after`, `#plot-comment`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
153153
| `VueUiDumbbell` | `VueUiDumbbellDataset[]` | `VueUiDumbbellConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
154-
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
154+
| `VueUiFlow` | `VueUiFlowDatasetItem[]` | `VueUiFlowConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#watermark`, `#chart-background`, `#tooltip-before`, `#tooltip-after`, | ✅ | ✅ |
155155
| `VueUiFunnel` | `VueUiFunnelDatasetItem[]` | `VueUiFunnelConfig` | `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
156156
| `VueUiGalaxy` | `VueUiGalaxyDatasetItem[]` | `VueUiGalaxyConfig` | `@selectDatapoint`, `@selectLegend`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` | `#svg`, `#legend`,`#tooltip-before`, `#tooltip-after`, `#chart-background` | ✅ | ✅ |
157157
| `VueUiGauge` | `VueUiGaugeDataset` | `VueUiGaugeConfig` | `generatePdf`, `generateImage` | `#svg`, `#legend`, `#watermark`, `#chart-background`, `#pattern` | ❌ | ✅ |

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,4 +110,4 @@
110110
"vitest": "^3.1.1",
111111
"vue": "^3.5.14"
112112
}
113-
}
113+
}

‎src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const components = ref([ //------|
125125
* Modify the index to display a component
126126
* [0] = VueUiXy
127127
*/
128-
const selectedComponent = ref(components.value[30]);
128+
const selectedComponent = ref(components.value[39]);
129129
130130
/**
131131
* Legacy testing arena where some non chart components can be tested

0 commit comments

Comments
 (0)