Skip to content

Commit 8a2f6fe

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiGalaxy testing arena
1 parent b1f1951 commit 8a2f6fe

File tree

2 files changed

+236
-2
lines changed

2 files changed

+236
-2
lines changed

‎TestingArena/ArenaVueUiGalaxy.vue‎

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

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import ArenaVueUiIcon from "../TestingArena/ArenaVueUiIcon.vue";
3232
import ArenaVueUiMoodRadar from "../TestingArena/ArenaVueUiMoodRadar.vue";
3333
import ArenaVueUiMolecule from "../TestingArena/ArenaVueUiMolecule.vue";
3434
import ArenaVueUiNestedDonuts from "../TestingArena/ArenaVueUiNestedDonuts.vue";
35+
import ArenaVueUiGalaxy from "../TestingArena/ArenaVueUiGalaxy.vue";
3536
3637
const showOldArena = ref(false);
3738
@@ -66,10 +67,11 @@ const components = ref([
6667
"VueUiIcon",
6768
"VueUiMoodRadar",
6869
"VueUiMolecule",
69-
"VueUiNestedDonuts"
70+
"VueUiNestedDonuts",
71+
"VueUiGalaxy"
7072
]);
7173
72-
const selectedComponent = ref(components.value[30]);
74+
const selectedComponent = ref(components.value[31]);
7375
7476
</script>
7577

@@ -175,4 +177,7 @@ const selectedComponent = ref(components.value[30]);
175177

176178
<!-- 30 -->
177179
<ArenaVueUiNestedDonuts v-if="selectedComponent === 'VueUiNestedDonuts'" />
180+
181+
<!-- 31 -->
182+
<ArenaVueUiGalaxy v-if="selectedComponent === 'VueUiGalaxy'" />
178183
</template>

0 commit comments

Comments
 (0)