Skip to content

Commit 234d85e

Browse files
graphierosgraphieros
committed
Fix - VueUiFlow - Fix height overlow with very large datasets
1 parent 02faf28 commit 234d85e

File tree

3 files changed

+284
-105
lines changed

3 files changed

+284
-105
lines changed

‎TestingArena/ArenaVueUiFlow.vue‎

Lines changed: 276 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,129 @@ import { useArena } from "../src/useArena";
99
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
1010
1111
const dataset = ref([
12-
// Raw materials → Components
13-
['Mining', 'Copper', 40,],
14-
['Mining', 'Lithium', 30,],
15-
['Mining', 'Gold', 10,],
16-
['Mining', 'Rare Earths', 20],
17-
18-
// Components → Manufacturing
19-
['Copper', 'PCB Assembly', 40],
20-
['Lithium', 'Battery Production', 30],
21-
['Gold', 'Microchips', 10],
22-
['Rare Earths', 'Microchips', 20],
23-
24-
// Manufacturing → Assembly
25-
['PCB Assembly', 'Phone Assembly', 40],
26-
['Battery Production', 'Phone Assembly', 30],
27-
['Microchips', 'Phone Assembly', 30],
28-
29-
// Assembly → Distribution
30-
['Phone Assembly', 'Retail', 100],
31-
32-
// Distribution → Consumers
33-
['Retail', 'Consumer Use', 100],
34-
35-
// Consumers → End-of-life
36-
['Consumer Use', 'Recycling', 40],
37-
['Consumer Use', 'Landfill', 30],
38-
['Consumer Use', 'Resale', 30],
39-
40-
// End-of-life → Secondary flow
41-
['Recycling', 'Recovered Materials', 25],
42-
['Recycling', 'E-Waste', 15],
43-
['Resale', 'Second-hand Use', 30]
44-
]);
12+
// root
13+
['Config', 'theme', 1],
14+
['Config', 'customPalette', 1],
15+
['Config', 'userOptions', 1],
16+
['Config', 'nodeCategories', 1],
17+
['Config', 'nodeCategoryColors', 1],
18+
['Config', 'style', 1],
19+
['Config', 'table', 1],
20+
21+
// userOptions
22+
['userOptions', 'show', 1],
23+
['userOptions', 'showOnChartHover', 1],
24+
['userOptions', 'position', 1],
25+
['userOptions', 'buttons', 1],
26+
['buttons', 'pdf', 1],
27+
['buttons', 'csv', 1],
28+
['buttons', 'img', 1],
29+
['buttons', 'table', 1],
30+
['buttons', 'fullscreen', 1],
31+
['buttons', 'annotator', 1],
32+
['buttons', 'tooltip', 1],
33+
['userOptions', 'buttonTitles', 1],
34+
35+
// style
36+
['style', 'fontFamily', 1],
37+
['style', 'chart', 1],
38+
39+
// chart
40+
['chart', 'backgroundColor', 1],
41+
['chart', 'color', 1],
42+
['chart', 'padding', 1],
43+
['chart', 'title', 1],
44+
['chart', 'tooltip', 1],
45+
['chart', 'legend', 1],
46+
['chart', 'nodes', 1],
47+
['chart', 'links', 1],
48+
49+
// padding
50+
['padding', 'top', 1],
51+
['padding', 'right', 1],
52+
['padding', 'bottom', 1],
53+
['padding', 'left', 1],
54+
55+
// title
56+
['title', 'text', 1],
57+
['title', 'subtitle', 1],
58+
['subtitle', 'text', 1],
59+
['title', 'cy', 1],
60+
61+
// tooltip
62+
['tooltip', 'show', 1],
63+
['tooltip', 'fontSize', 1],
64+
['tooltip', 'backgroundColor', 1],
65+
['tooltip', 'color', 1],
66+
['tooltip', 'borderColor', 1],
67+
['tooltip', 'borderWidth', 1],
68+
['tooltip', 'borderRadius', 1],
69+
['tooltip', 'backgroundOpacity', 1],
70+
['tooltip', 'position', 1],
71+
['tooltip', 'offsetY', 1],
72+
['tooltip', 'showPercentage', 1],
73+
['tooltip', 'roundingPercentage', 1],
74+
['tooltip', 'translations', 1],
75+
['translations', 'from', 1],
76+
['translations', 'to', 1],
77+
['translations', 'percentOfTotal', 1],
78+
79+
// legend
80+
['legend', 'show', 1],
81+
['legend', 'backgroundColor', 1],
82+
['legend', 'color', 1],
83+
['legend', 'fontSize', 1],
84+
['legend', 'paddingBottom', 1],
85+
['legend', 'paddingTop', 1],
86+
['legend', 'bold', 1],
87+
['legend', 'cy', 1],
88+
89+
// nodes
90+
['nodes', 'gap', 1],
91+
['nodes', 'minHeight', 1],
92+
['nodes', 'width', 1],
93+
['nodes', 'labels', 1],
94+
['nodes', 'stroke', 1],
95+
['nodes', 'strokeWidth', 1],
96+
97+
// labels
98+
['labels', 'fontSize', 1],
99+
['labels', 'abbreviation', 1],
100+
['labels', 'prefix', 1],
101+
['labels', 'suffix', 1],
102+
['labels', 'rounding', 1],
103+
['labels', 'formatter', 1],
104+
105+
// abbreviation
106+
['abbreviation', 'use', 1],
107+
['abbreviation', 'length', 1],
108+
109+
// links
110+
['links', 'width', 1],
111+
['links', 'opacity', 1],
112+
['links', 'stroke', 1],
113+
['links', 'strokeWidth', 1],
114+
115+
// table
116+
['table', 'show', 1],
117+
['table', 'responsiveBreakpoint', 1],
118+
['table', 'columnNames', 1],
119+
['columnNames', 'source', 1],
120+
['columnNames', 'target', 1],
121+
['columnNames', 'value', 1],
122+
['table', 'th', 1],
123+
['table', 'td', 1],
124+
125+
// th
126+
['th', 'backgroundColor', 1],
127+
['th', 'color', 1],
128+
['th', 'outline', 1],
129+
130+
// td
131+
['td', 'backgroundColor', 1],
132+
['td', 'color', 1],
133+
['td', 'outline', 1],
134+
]);
45135
46136
const model = ref([
47137
{ key: 'userOptions.show', def: true, type: 'checkbox' },
@@ -107,49 +197,159 @@ const config = computed(() => {
107197
theme: currentTheme.value,
108198
...c,
109199
nodeCategories: {
110-
// Raw Materials
111-
'Mining': 'raw',
112-
113-
// Components
114-
'Copper': 'component',
115-
'Lithium': 'component',
116-
'Gold': 'component',
117-
'Rare Earths': 'component',
118-
119-
// Manufacturing
120-
'PCB Assembly': 'manufacturing',
121-
'Battery Production': 'manufacturing',
122-
'Microchips': 'manufacturing',
123-
124-
// Assembly
125-
'Phone Assembly': 'assembly',
126-
127-
// Distribution
128-
'Retail': 'distribution',
129-
130-
// Consumer Use
131-
'Consumer Use': 'consumer',
132-
133-
// End-of-life
134-
'Recycling': 'endOfLife',
135-
'Landfill': 'endOfLife',
136-
'Resale': 'endOfLife',
137-
138-
// Secondary flow
139-
'Recovered Materials': 'secondary',
140-
'E-Waste': 'secondary',
141-
'Second-hand Use': 'secondary'
142-
},
143-
nodeCategoryColors: {
144-
raw: '#8B4513', // Brown - for extraction
145-
component: '#1E90FF', // Blue - technical materials
146-
manufacturing: '#FFD700', // Gold - active production
147-
assembly: '#FF8C00', // Dark orange
148-
distribution: '#A020F0', // Purple - logistics
149-
consumer: '#228B22', // Green - use phase
150-
endOfLife: '#B22222', // Firebrick red
151-
secondary: '#20B2AA' // Light sea green - reuse/recover
152-
},
200+
// top‐level
201+
theme: 'config',
202+
customPalette: 'config',
203+
userOptions: 'config',
204+
nodeCategories: 'config',
205+
nodeCategoryColors: 'config',
206+
style: 'config',
207+
table: 'config',
208+
209+
// userOptions
210+
show: 'userOptions',
211+
showOnChartHover: 'userOptions',
212+
position: 'userOptions',
213+
buttons: 'userOptions',
214+
buttonTitles: 'userOptions',
215+
216+
// buttons
217+
pdf: 'userOptionsButtons',
218+
csv: 'userOptionsButtons',
219+
img: 'userOptionsButtons',
220+
table: 'userOptionsButtons',
221+
fullscreen: 'userOptionsButtons',
222+
annotator: 'userOptionsButtons',
223+
tooltip: 'userOptionsButtons',
224+
225+
// style
226+
fontFamily: 'style',
227+
chart: 'style',
228+
229+
// chart
230+
backgroundColor: 'chart',
231+
color: 'chart',
232+
padding: 'chart',
233+
title: 'chart',
234+
tooltip: 'chart',
235+
legend: 'chart',
236+
nodes: 'chart',
237+
links: 'chart',
238+
239+
// padding
240+
top: 'chartPadding',
241+
right: 'chartPadding',
242+
bottom: 'chartPadding',
243+
left: 'chartPadding',
244+
245+
// title
246+
text: 'chartTitle',
247+
subtitle: 'chartTitle',
248+
cy: 'chartTitle',
249+
// subtitle.text lives under the same category
250+
251+
// tooltip
252+
show: 'chartTooltip',
253+
fontSize: 'chartTooltip',
254+
backgroundColor: 'chartTooltip',
255+
color: 'chartTooltip',
256+
borderColor: 'chartTooltip',
257+
borderWidth: 'chartTooltip',
258+
borderRadius: 'chartTooltip',
259+
backgroundOpacity: 'chartTooltip',
260+
position: 'chartTooltip',
261+
offsetY: 'chartTooltip',
262+
showPercentage: 'chartTooltip',
263+
roundingPercentage: 'chartTooltip',
264+
translations: 'chartTooltip',
265+
from: 'chartTooltipTranslations',
266+
to: 'chartTooltipTranslations',
267+
percentOfTotal: 'chartTooltipTranslations',
268+
269+
// legend
270+
show: 'chartLegend',
271+
backgroundColor: 'chartLegend',
272+
color: 'chartLegend',
273+
fontSize: 'chartLegend',
274+
paddingBottom: 'chartLegend',
275+
paddingTop: 'chartLegend',
276+
bold: 'chartLegend',
277+
cy: 'chartLegend',
278+
279+
// nodes
280+
gap: 'chartNodes',
281+
minHeight: 'chartNodes',
282+
width: 'chartNodes',
283+
labels: 'chartNodes',
284+
stroke: 'chartNodes',
285+
strokeWidth: 'chartNodes',
286+
287+
// labels
288+
fontSize: 'chartLabels',
289+
abbreviation: 'chartLabels',
290+
prefix: 'chartLabels',
291+
suffix: 'chartLabels',
292+
rounding: 'chartLabels',
293+
formatter: 'chartLabels',
294+
295+
// abbreviation
296+
use: 'chartLabelsAbbreviation',
297+
length: 'chartLabelsAbbreviation',
298+
299+
// links
300+
width: 'chartLinks',
301+
opacity: 'chartLinks',
302+
stroke: 'chartLinks',
303+
strokeWidth: 'chartLinks',
304+
305+
// table
306+
show: 'table',
307+
responsiveBreakpoint: 'table',
308+
columnNames: 'table',
309+
th: 'table',
310+
td: 'table',
311+
312+
// columnNames
313+
source: 'tableColumnNames',
314+
target: 'tableColumnNames',
315+
value: 'tableColumnNames',
316+
317+
// th
318+
backgroundColor: 'tableTh',
319+
color: 'tableTh',
320+
outline: 'tableTh',
321+
322+
// td
323+
backgroundColor: 'tableTd',
324+
color: 'tableTd',
325+
outline: 'tableTd',
326+
},
327+
328+
nodeCategoryColors: {
329+
// top‐level
330+
config: '#1f77b4',
331+
userOptions: '#ff7f0e',
332+
userOptionsButtons: '#2ca02c',
333+
style: '#d62728',
334+
335+
// chart
336+
chart: '#9467bd',
337+
chartPadding: '#8c564b',
338+
chartTitle: '#e377c2',
339+
chartTooltip: '#bcbd22',
340+
chartTooltipTranslations:'#17becf',
341+
chartLegend: '#aec7e8',
342+
chartNodes: '#98df8a',
343+
chartLabels: '#ff9896',
344+
chartLabelsAbbreviation:'#c5b0d5',
345+
chartLinks: '#c49c94',
346+
347+
// table
348+
table: '#dbdb8d',
349+
tableColumnNames: '#9edae5',
350+
tableTh: '#393b79',
351+
tableTd: '#5254a3',
352+
},
153353
style: {
154354
...c.style,
155355
chart: {

‎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+
}

0 commit comments

Comments
 (0)