Skip to content

Commit c7ddf17

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiRings testing arena
1 parent 05c07d5 commit c7ddf17

File tree

2 files changed

+239
-2
lines changed

2 files changed

+239
-2
lines changed

‎TestingArena/ArenaVueUiRings.vue‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiRings from '../src/components/vue-ui-rings.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: "Serie 1",
11+
values: [100]
12+
},
13+
{
14+
name: "Serie 2",
15+
values: [200]
16+
},
17+
{
18+
name: "Serie 3",
19+
values: [300, 1]
20+
},
21+
{
22+
name: "Serie 4",
23+
values: [50, 1]
24+
},
25+
{
26+
name: "Serie 5",
27+
values: [25, 1]
28+
}
29+
])
30+
31+
const model = ref([
32+
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
33+
{ key: 'useBlurOnHover', def: true, type: 'checkbox'},
34+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
35+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
36+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
37+
{ key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
38+
{ key: 'style.chart.layout.labels.dataLabels.suffix', def: '2', type: 'text'},
39+
{ key: 'style.chart.layout.rings.strokeWidth', def: 3, type: 'number', min: 0, max: 12},
40+
{ key: 'style.chart.layout.rings.stroke', def: '#FFFFFF', type: 'color'},
41+
{ key: 'style.chart.layout.rings.gradient.show', def: true, type: 'checkbox'},
42+
{ key: 'style.chart.layout.rings.gradient.intensity', def: 40, type: 'range', min: 0, max: 100},
43+
{ key: 'style.chart.layout.rings.gradient.underlayerColor', def: '#FFFFFF', type: 'color'},
44+
{ key: 'style.chart.layout.rings.useShadow', def: true, type: 'checkbox'},
45+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
46+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
47+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
48+
{ key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 48},
49+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
50+
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
51+
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
52+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
53+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
54+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48 },
55+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
56+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
57+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet'},
58+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
59+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
60+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
61+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
62+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
63+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48},
64+
{ key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'},
65+
{ key: 'style.chart.tooltip.showPercentage', def: true, type: 'checkbox'},
66+
{ key: 'style.chart.tooltip.roundingValue', def: 2, type: 'number', min: 0, max: 12},
67+
{ key: 'style.chart.tooltip.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
68+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
69+
{ key: 'table.show', def: false, type: 'checkbox'},
70+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
71+
{ key: 'table.columnNames.series', def: 'Series', type: 'text'},
72+
{ key: 'table.columnNames.value', def: 'Value', type: 'text'},
73+
{ key: 'table.columnNames.percentage', def: 'Percentage', type: 'text'},
74+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
75+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
76+
{ key: 'table.th.outline', def: 'none', type: 'text'},
77+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
78+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
79+
{ key: 'table.td.outline', def: 'none', type: 'text'},
80+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
81+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12}
82+
])
83+
84+
const testCustomTooltip = ref(false);
85+
86+
const config = computed(() => {
87+
const c = convertArrayToObject(model.value);
88+
89+
if (testCustomTooltip.value) {
90+
return {
91+
...c,
92+
style: {
93+
...c.style,
94+
chart: {
95+
...c.style.chart,
96+
tooltip: {
97+
...c.style.chart.tooltip,
98+
customFormat: ({ datapoint }) => {
99+
console.log({datapoint})
100+
return 'test'
101+
}
102+
}
103+
}
104+
}
105+
}
106+
} else {
107+
return c
108+
}
109+
})
110+
111+
function selectLegend(legend) {
112+
console.log({legend})
113+
}
114+
115+
const step = ref(0)
116+
117+
</script>
118+
119+
<template>
120+
<div style="margin: 12px 0">
121+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
122+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
123+
</div>
124+
<Box>
125+
<template #title>VueUiRings</template>
126+
127+
<template #local>
128+
<LocalVueUiRings :dataset="dataset" :config="config" :key="`local_${step}`" @selectLegend="selectLegend" >
129+
<template #svg="{ svg }">
130+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
131+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
132+
</template>
133+
<template #legend="{ legend }">
134+
#LEGEND
135+
<div style="font-size: 8px">
136+
{{ legend }}
137+
</div>
138+
</template>
139+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
140+
#BEFORE {{ series.name }}
141+
</template>
142+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
143+
#AFTER {{ series.name }}
144+
</template>
145+
</LocalVueUiRings>
146+
</template>
147+
148+
<template #VDUI-local>
149+
<LocalVueDataUi component="VueUiRings" :dataset="dataset" :config="config" :key="`vdui_local_${step}`" @selectLegend="selectLegend" >
150+
<template #svg="{ svg }">
151+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
152+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
153+
</template>
154+
<template #legend="{ legend }">
155+
#LEGEND
156+
<div style="font-size: 8px">
157+
{{ legend }}
158+
</div>
159+
</template>
160+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
161+
#BEFORE {{ series.name }}
162+
</template>
163+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
164+
#AFTER {{ series.name }}
165+
</template>
166+
</LocalVueDataUi>
167+
</template>
168+
169+
<template #build>
170+
<VueUiRings :dataset="dataset" :config="config" :key="`build_${step}`" @selectLegend="selectLegend" >
171+
<template #svg="{ svg }">
172+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
173+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
174+
</template>
175+
<template #legend="{ legend }">
176+
#LEGEND
177+
<div style="font-size: 8px">
178+
{{ legend }}
179+
</div>
180+
</template>
181+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
182+
#BEFORE {{ series.name }}
183+
</template>
184+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
185+
#AFTER {{ series.name }}
186+
</template>
187+
</VueUiRings>
188+
</template>
189+
190+
<template #VDUI-build>
191+
<VueDataUi component="VueUiRings" :dataset="dataset" :config="config" :key="`vdui_build_${step}`" @selectLegend="selectLegend" >
192+
<template #svg="{ svg }">
193+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
194+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
195+
</template>
196+
<template #legend="{ legend }">
197+
#LEGEND
198+
<div style="font-size: 8px">
199+
{{ legend }}
200+
</div>
201+
</template>
202+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
203+
#BEFORE {{ series.name }}
204+
</template>
205+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
206+
#AFTER {{ series.name }}
207+
</template>
208+
</VueDataUi>
209+
</template>
210+
211+
<template #knobs>
212+
<div
213+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
214+
<div v-for="knob in model">
215+
<label style="font-size: 10px">{{ knob.key }}</label>
216+
<div
217+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
218+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
219+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
220+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
221+
<option v-for="opt in knob.options">{{ opt }}</option>
222+
</select>
223+
</div>
224+
</div>
225+
</div>
226+
</template>
227+
228+
<template #config>
229+
{{ config }}
230+
</template>
231+
</Box>
232+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ArenaVueUiQuickChart from "../TestingArena/ArenaVueUiQuickChart.vue";
2626
import ArenaVueUiAgePyramid from "../TestingArena/ArenaVueUiAgePyramid.vue";
2727
import ArenaVueUiRelationCircle from "../TestingArena/ArenaVueUiRelationCircle.vue";
2828
import ArenaVueUiThermometer from "../TestingArena/ArenaVueUiThermometer.vue";
29+
import ArenaVueUiRings from "../TestingArena/ArenaVueUiRings.vue";
2930
3031
const showOldArena = ref(false);
3132
@@ -54,10 +55,11 @@ const components = ref([
5455
"VueUiQuickChart",
5556
"VueUiAgePyramid",
5657
"VueUiRelationCircle",
57-
"VueUiThermometer"
58+
"VueUiThermometer",
59+
"VueUiRings"
5860
]);
5961
60-
const selectedComponent = ref(components.value[24]);
62+
const selectedComponent = ref(components.value[25]);
6163
6264
</script>
6365

@@ -145,4 +147,7 @@ const selectedComponent = ref(components.value[24]);
145147

146148
<!-- 24 -->
147149
<ArenaVueUiThermometer v-if="selectedComponent === 'VueUiThermometer'" />
150+
151+
<!-- 25 -->
152+
<ArenaVueUiRings v-if="selectedComponent === 'VueUiRings'" />
148153
</template>

0 commit comments

Comments
 (0)