Skip to content

Commit b41f595

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiStripPlot testing arena
1 parent 277bef8 commit b41f595

File tree

2 files changed

+293
-2
lines changed

2 files changed

+293
-2
lines changed

‎TestingArena/ArenaVueUiStripPlot.vue‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiStripPlot from '../src/components/vue-ui-strip-plot.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
8+
const dataset = ref([
9+
{
10+
name: "Asia",
11+
plots: [
12+
{ name: "Shanghai", value: 24.9 },
13+
{ name: "Beijing", value: 21.9 },
14+
{ name: "Delhi", value: 16.8 },
15+
{ name: "Guangzhou", value: 16.1 },
16+
{ name: "Istanbul", value: 15.6 },
17+
{ name: "Chengdu", value: 15.4 },
18+
{ name: "Mumbai", value: 15.4 },
19+
{ name: "Karachi", value: 14.9 },
20+
{ name: "Shenzen", value: 14.7 },
21+
{ name: "Tokyo", value: 14 },
22+
]
23+
},
24+
{
25+
name: "Africa",
26+
plots: [
27+
{ name: "Kinshasa", value: 17.1 },
28+
{ name: "Lagos", value: 14.9 },
29+
{ name: "Cairo", value: 9.3 },
30+
{ name: "Johannesburg", value: 5.6 },
31+
{ name: "Giza", value: 5.6 },
32+
{ name: "Khartoum", value: 5.3 },
33+
{ name: "Abidjan", value: 5 },
34+
{ name: "Alexandria", value: 4.9 },
35+
{ name: "Dar es Salaam", value: 4.7 },
36+
{ name: "Nairobi", value: 4.4 },
37+
]
38+
},
39+
{
40+
name: "Europe",
41+
plots: [
42+
{ name: "Moscow", value: 13 },
43+
{ name: "London", value: 9 },
44+
{ name: "Saint Petersburg", value: 5.4 },
45+
{ name: "Berlin", value: 3.8 },
46+
{ name: "Madrid", value: 3.3 },
47+
{ name: "Kyiv", value: 3 },
48+
{ name: "Rome", value: 2.7 },
49+
{ name: "Paris", value: 2.1 },
50+
{ name: "Minsk", value: 2 },
51+
{ name: "Vienna", value: 1.9 }
52+
]
53+
},
54+
{
55+
name: "America",
56+
plots: [
57+
{ name: "Sao Paulo", value: 12.2 },
58+
{ name: "Lima", value: 9.7 },
59+
{ name: "Mexico City", value: 9.2 },
60+
{ name: "New York", value: 8.4 },
61+
{ name: "Bogota", value: 8 },
62+
{ name: "Rio de Janeiro", value: 6.7 },
63+
{ name: "Santiago", value: 6.2 },
64+
{ name: "Los Angeles", value: 4 },
65+
{ name: "Buenos Aires", value: 3 },
66+
{ name: "Brasilia", value: 2.9 }
67+
]
68+
},
69+
{
70+
name: "Australia & Oceania",
71+
plots: [
72+
{ name: "Sydney", value: 5.4 },
73+
{ name: "Melbourne", value: 5.1 },
74+
{ name: "Brisbane", value: 2.6 },
75+
{ name: "Perth", value: 2.1 },
76+
{ name: "Auckland", value: 1.7 },
77+
{ name: "Adelaide", value: 1.4 },
78+
{ name: "Honolulu", value: 1 },
79+
{ name: "Gold Coast", value: 0.7 },
80+
{ name: "Newcastle-Maitland", value: 0.5 },
81+
{ name: "Canberra", value: 0.46 },
82+
]
83+
},
84+
]
85+
)
86+
87+
const model = ref([
88+
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
89+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
90+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
91+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
92+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
93+
{ key: 'style.chart.height', def: 600, type: 'number', min: 200, max: 1000},
94+
{ key: 'style.chart.stripWidth', def: 120, type: 'number', min: 48, max: 300},
95+
{ key: 'style.chart.padding.top', def: 24, type: 'number', min: 0, max: 100},
96+
{ key: 'style.chart.padding.left', def: 64, type: 'number', min: 0, max: 100},
97+
{ key: 'style.chart.padding.right', def: 24, type: 'number', min: 0, max: 100},
98+
{ key: 'style.chart.padding.bottom', def: 64, type: 'number', min: 0, max: 100},
99+
{ key: 'style.chart.grid.show', def: true, type: 'checkbox'},
100+
{ key: 'style.chart.grid.stroke', def: '#e1e5e8', type: 'color'},
101+
{ key: 'style.chart.grid.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
102+
{ key: 'style.chart.grid.scaleSteps', def: 10, type: 'number', min: 2, max: 20},
103+
{ key: 'style.chart.grid.horizontalGrid.show', def: true, type: 'checkbox'},
104+
{ key: 'style.chart.grid.horizontalGrid.strokeWidth', def: 0.5, type: 'number', min: 0, max: 12, step: 0.5},
105+
{ key: 'style.chart.grid.horizontalGrid.stroke', def: '#CCCCCC', type: 'color'},
106+
{ key: 'style.chart.grid.horizontalGrid.strokeDasharray', def: 4, type: 'number', min: 0, max: 100},
107+
{ key: 'style.chart.grid.verticalGrid.show', def: true, type: 'checkbox'},
108+
{ key: 'style.chart.grid.verticalGrid.stroke', def: '#CCCCCC', type: 'color'},
109+
{ key: 'style.chart.grid.verticalGrid.strokeWidth', def: 0.5, type: 'number', min: 0, max: 12, step: 0.5},
110+
{ key: 'style.chart.grid.verticalGrid.strokeDasharray', def: 4, type: 'number', min: 0, max: 100},
111+
{ key: 'style.chart.plots.opacity', def: 0.5, type: 'number', min: 0, max: 1, step: 0.01},
112+
{ key: 'style.chart.plots.radius', def: 20, type: 'number', min: 1, max: 100},
113+
{ key: 'style.chart.plots.stroke', def: '#FFFFFF', type: 'color'},
114+
{ key: 'style.chart.plots.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
115+
{ key: 'style.chart.plots.shape', def: 'circle', type: 'select', options: ['circle', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star']},
116+
{ key: 'style.chart.plots.gradient.show', def: true, type: 'checkbox'},
117+
{ key: 'style.chart.plots.gradient.intensity', def: 40, type: 'range', min: 0, max: 100},
118+
{ key: 'style.chart.labels.prefix', def: 'P', type: 'text'},
119+
{ key: 'style.chart.labels.suffix', def: 'S', type: 'text'},
120+
{ key: 'style.chart.labels.bestPlotLabel.show', def: true, type: 'checkbox'},
121+
{ key: 'style.chart.labels.bestPlotLabel.showValue', def: true, type: 'checkbox'},
122+
{ key: 'style.chart.labels.bestPlotLabel.fontSize', def: 14, type: 'number', min: 8, max: 48},
123+
{ key: 'style.chart.labels.bestPlotLabel.color', def: '#1A1A1A', type: 'color'},
124+
{ key: 'style.chart.labels.bestPlotLabel.rounding', def: 2, type: 'number', min: 0, max: 12},
125+
{ key: 'style.chart.labels.bestPlotLabel.offsetY', def: 0, type: 'number', min: -100, max: 100},
126+
{ key: 'style.chart.labels.axis.xLabel', def: 'Lorem ipsum X Label', type: 'text'},
127+
{ key: 'style.chart.labels.axis.xLabelOffsetY', def: 0, type: 'number', min: -100, max: 100},
128+
{ key: 'style.chart.labels.axis.yLabel', def: 'Lorem ipsum Y label', type: 'text'},
129+
{ key: 'style.chart.labels.axis.yLabelOffsetX', def: 0, type: 'number', min: -100, max: 100},
130+
{ key: 'style.chart.labels.axis.color', def: '#1A1A1A', type: 'color'},
131+
{ key: 'style.chart.labels.xAxisLabels.show', def: true, type: 'checkbox'},
132+
{ key: 'style.chart.labels.xAxisLabels.color', def: '#1A1A1A', type: 'color'},
133+
{ key: 'style.chart.labels.xAxisLabels.fontSize', def: 14, type: 'number', min: 8, max: 48},
134+
{ key: 'style.chart.labels.xAxisLabels.offsetY', def: 0, type: 'number', min: -100, max: 100},
135+
{ key: 'style.chart.labels.yAxisLabels.show', def: true, type: 'checkbox'},
136+
{ key: 'style.chart.labels.yAxisLabels.color', def: '#1A1A1A', type: 'color'},
137+
{ key: 'style.chart.labels.yAxisLabels.fontSize', def: 14, type: 'number', min: 8, max: 48},
138+
{ key: 'style.chart.labels.yAxisLabels.rounding', def: 2, type: 'number', min: 0, max: 12},
139+
{ key: 'style.chart.labels.yAxisLabels.offsetX', def: 0, type: 'number', min: -100, max: 100},
140+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
141+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
142+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
143+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
144+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
145+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
146+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
147+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
148+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
149+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
150+
{ key: 'style.chart.tooltip.backgroundColor', def:'#FFFFFF', type: 'color'},
151+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48},
152+
{ key: 'style.chart.tooltip.roundingValue', def: 2, type: 'number', min: 0, max: 12},
153+
{ key: 'table.show', def: false, type: 'checkbox'},
154+
{ key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
155+
{ key: 'table.columnNames.series', def: 'Series', def: 'text'},
156+
{ key: 'table.columnNames.value', def: 'Value', def: 'text'},
157+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
158+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
159+
{ key: 'table.th.outline', def: 'none', type: 'text'},
160+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
161+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
162+
{ key: 'table.td.outline', def: 'none', type: 'text'},
163+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12}
164+
])
165+
166+
const testCustomTooltip = ref(false);
167+
168+
const config = computed(() => {
169+
const c = convertArrayToObject(model.value)
170+
171+
if(testCustomTooltip.value) {
172+
return {
173+
...c,
174+
style: {
175+
...c.style,
176+
chart: {
177+
...c.style.chart,
178+
tooltip: {
179+
...c.style.chart.tooltip,
180+
customFormat: (data) => {
181+
console.log('STRIP PLOT CUSTOM TOOLTIP', data)
182+
return 'CUSTOM TOOLTIP'
183+
}
184+
}
185+
}
186+
}
187+
}
188+
} else {
189+
return c
190+
}
191+
})
192+
193+
const step = ref(0)
194+
195+
</script>
196+
197+
<template>
198+
<div style="margin: 12px 0">
199+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip"/>
200+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
201+
</div>
202+
<Box>
203+
<template #title>VueUiStripPlot</template>
204+
205+
<template #local>
206+
<LocalVueUiStripPlot :dataset="dataset" :config="config" :key="`local_${step}`">
207+
<template #svg="{ svg }">
208+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
209+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
210+
</template>
211+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
212+
#BEFORE {{ series.name }}
213+
</template>
214+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
215+
#AFTER {{ series.name }}
216+
</template>
217+
</LocalVueUiStripPlot>
218+
</template>
219+
220+
<template #VDUI-local>
221+
<LocalVueDataUi component="VueUiStripPlot" :dataset="dataset" :config="config" :key="`vdui_local_${step}`" >
222+
<template #svg="{ svg }">
223+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
224+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
225+
</template>
226+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
227+
#BEFORE {{ series.name }}
228+
</template>
229+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
230+
#AFTER {{ series.name }}
231+
</template>
232+
</LocalVueDataUi>
233+
</template>
234+
235+
<template #build>
236+
<VueUiStripPlot :dataset="dataset" :config="config" :key="`build_${step}`">
237+
<template #svg="{ svg }">
238+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
239+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
240+
</template>
241+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
242+
#BEFORE {{ series.name }}
243+
</template>
244+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
245+
#AFTER {{ series.name }}
246+
</template>
247+
</VueUiStripPlot>
248+
</template>
249+
250+
<template #VDUI-build>
251+
<VueDataUi component="VueUiStripPlot" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
252+
<template #svg="{ svg }">
253+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
254+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
255+
</template>
256+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
257+
#BEFORE {{ series.name }}
258+
</template>
259+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
260+
#AFTER {{ series.name }}
261+
</template>
262+
</VueDataUi>
263+
</template>
264+
265+
<template #knobs>
266+
<div
267+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
268+
<div v-for="knob in model">
269+
<label style="font-size: 10px">{{ knob.key }}</label>
270+
<div
271+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
272+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
273+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
274+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
275+
<option v-for="opt in knob.options">{{ opt }}</option>
276+
</select>
277+
</div>
278+
</div>
279+
</div>
280+
</template>
281+
282+
<template #config>
283+
{{ config }}
284+
</template>
285+
</Box>
286+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import ArenaVueUiMoodRadar from "../TestingArena/ArenaVueUiMoodRadar.vue";
3333
import ArenaVueUiMolecule from "../TestingArena/ArenaVueUiMolecule.vue";
3434
import ArenaVueUiNestedDonuts from "../TestingArena/ArenaVueUiNestedDonuts.vue";
3535
import ArenaVueUiGalaxy from "../TestingArena/ArenaVueUiGalaxy.vue";
36+
import ArenaVueUiStripPlot from "../TestingArena/ArenaVueUiStripPlot.vue";
3637
3738
const showOldArena = ref(false);
3839
@@ -68,10 +69,11 @@ const components = ref([
6869
"VueUiMoodRadar",
6970
"VueUiMolecule",
7071
"VueUiNestedDonuts",
71-
"VueUiGalaxy"
72+
"VueUiGalaxy",
73+
"VueUiStripPlot"
7274
]);
7375
74-
const selectedComponent = ref(components.value[31]);
76+
const selectedComponent = ref(components.value[32]);
7577
7678
</script>
7779

@@ -180,4 +182,7 @@ const selectedComponent = ref(components.value[31]);
180182

181183
<!-- 31 -->
182184
<ArenaVueUiGalaxy v-if="selectedComponent === 'VueUiGalaxy'" />
185+
186+
<!-- 32 -->
187+
<ArenaVueUiStripPlot v-if="selectedComponent === 'VueUiStripPlot'" />
183188
</template>

0 commit comments

Comments
 (0)