Skip to content

Commit d3b9a9d

Browse files
graphierosgraphieros
committed
Dev environment - Refactor manual testing hub
1 parent 148b115 commit d3b9a9d

File tree

1 file changed

+66
-225
lines changed

1 file changed

+66
-225
lines changed

‎src/App.vue‎

Lines changed: 66 additions & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref } from "vue";
2+
import { markRaw, ref, computed } from "vue";
33
import TestingArena from "./TestingArena.vue";
44
import ArenaVueUiXy from "../TestingArena/ArenaVueUiXy.vue";
55
import ArenaVueUiDonut from "../TestingArena/ArenaVueUiDonut.vue";
@@ -56,76 +56,81 @@ import ArenaVueUiCirclePack from "../TestingArena/ArenaVueUiCirclePack.vue";
5656
import ArenaVueUiWorld from "../TestingArena/ArenaVueUiWorld.vue";
5757
import ArenaVueUiTable from "../TestingArena/ArenaVueUiTable.vue";
5858
import ArenaVueUiRidgeline from "../TestingArena/ArenaVueUiRidgeline.vue";
59+
import ArenaVueUiChord from "../TestingArena/ArenaVueUiChord.vue"
5960
60-
const components = ref([ //------|
61-
/*____________________*/"VueUiXy", // 0
62-
/*_________________*/"VueUiDonut", // 1
63-
/*_______________*/"VueUiTreemap", // 2
64-
/*________________*/"VueUiWaffle", // 3
65-
/*_________________*/"VueUiRadar", // 4
66-
/*______________*/"VueUiQuadrant", // 5
67-
/*_________________*/"VueUiGauge", // 6
68-
/*_________________*/"VueUiWheel", // 7
69-
/*_____________*/"VueUiTiremarks", // 8
70-
/*______________*/"VueUiChestnut", // 9
71-
/*_________________*/"VueUiOnion", // 10
72-
/*___________*/"VueUiVerticalBar", // 11
73-
/*_______________*/"VueUiHeatmap", // 12
74-
/*_______________*/"VueUiScatter", // 13
75-
/*___________*/"VueUiCandlestick", // 14
76-
/*_____________*/"VueUiSparkline", // 15
77-
/*______________*/"VueUiSparkbar", // 16
78-
/*_________*/"VueUiSparkStackbar", // 17
79-
/*________*/"VueUiSparkHistogram", // 18
80-
/*____________*/"VueUiSparkgauge", // 19
81-
/*____________*/"VueUiSparkTrend", // 20
82-
/*____________*/"VueUiQuickChart", // 21
83-
/*____________*/"VueUiAgePyramid", // 22
84-
/*________*/"VueUiRelationCircle", // 23
85-
/*___________*/"VueUiThermometer", // 24
86-
/*_________________*/"VueUiRings", // 25
87-
/*________*/"VueUiDonutEvolution", // 26
88-
/*__________________*/"VueUiIcon", // 27
89-
/*_____________*/"VueUiMoodRadar", // 28
90-
/*______________*/"VueUiMolecule", // 29
91-
/*__________*/"VueUiNestedDonuts", // 30
92-
/*________________*/"VueUiGalaxy", // 31
93-
/*_____________*/"VueUiStripPlot", // 32
94-
/*______________*/"VueUiDumbbell", // 33
95-
/*_________________*/"VueUi3dBar", // 34
96-
/*________*/"VueUiTableSparkline", // 35
97-
/*__________*/"VueUiTableHeatmap", // 36
98-
/*____________ */"VueUiWordCloud", // 37
99-
/*______________*/"VueUiXyCanvas", // 38
100-
/*__________________*/"VueUiFlow", // 39
101-
/**/"VueUiParallelCoordinatePlot", // 40
102-
/*_________________*/"VueUiTimer", // 41
103-
/*_________*/"VueUiCarouselTable", // 42
104-
/*_________________*/"VueUiGizmo", // 43
105-
/*___________________*/"VueUiKpi", // 44
106-
/*______________*/"VueUiStackbar", // 45
107-
/*________________*/"VueUiRating", // 46
108-
/*________________*/"VueUiSmiley", // 47
109-
/*________________*/"VueUiBullet", // 48
110-
/*________________*/"VueUiFunnel", // 49
111-
/*___________*/"VueUiHistoryPlot", // 50
112-
/*____________*/"VueUiCirclePack", // 51
113-
/*_________________*/"VueUiWorld", // 52
114-
/*_________________*/"VueUiTable", // 53
115-
/*_____________*/"VueUiRidgeline", // 54
11661
11762
/**
11863
* TODO: migrate manual testing for the following:
11964
* - VueUiDashboard
12065
* - VueUiCursor
12166
*/
122-
]);
67+
68+
const mapping = ref({
69+
VueUiXy: markRaw(ArenaVueUiXy),
70+
VueUiDonut: markRaw(ArenaVueUiDonut),
71+
VueUiTreemap: markRaw(ArenaVueUiTreemap),
72+
VueUiWaffle: markRaw(ArenaVueUiWaffle),
73+
VueUiRadar: markRaw(ArenaVueUiRadar),
74+
VueUiQuadrant: markRaw(ArenaVueUiQuadrant),
75+
VueUiGauge: markRaw(ArenaVueUiGauge),
76+
VueUiWheel: markRaw(ArenaVueUiWheel),
77+
VueUiTiremarks: markRaw(ArenaVueUiTiremarks),
78+
VueUiChestnut: markRaw(ArenaVueUiChestnut),
79+
VueUiOnion: markRaw(ArenaVueUiOnion),
80+
VueUiVerticalBar: markRaw(ArenaVueUiVerticalBar),
81+
VueUiHeatmap: markRaw(ArenaVueUiHeatmap),
82+
VueUiScatter: markRaw(ArenaVueUiScatter),
83+
VueUiCandlestick: markRaw(ArenaVueUiCandlestick),
84+
VueUiSparkline: markRaw(ArenaVueUiSparkline),
85+
VueUiSparkbar: markRaw(ArenaVueUiSparkbar),
86+
VueUiSparkStackbar: markRaw(ArenaVueUiSparkStackbar),
87+
VueUiSparkHistogram: markRaw(ArenaVueUiSparkHistogram),
88+
VueUiSparkgauge: markRaw(ArenaVueUiSparkGauge),
89+
VueUiSparkTrend: markRaw(ArenaVueUiSparkTrend),
90+
VueUiQuickChart: markRaw(ArenaVueUiQuickChart),
91+
VueUiAgePyramid: markRaw(ArenaVueUiAgePyramid),
92+
VueUiRelationCircle: markRaw(ArenaVueUiRelationCircle),
93+
VueUiThermometer: markRaw(ArenaVueUiThermometer),
94+
VueUiRings: markRaw(ArenaVueUiRings),
95+
VueUiDonutEvolution: markRaw(ArenaVueUiDonutEvolution),
96+
VueUiIcon: markRaw(ArenaVueUiIcon),
97+
VueUiMoodRadar: markRaw(ArenaVueUiMoodRadar),
98+
VueUiMolecule: markRaw(ArenaVueUiMolecule),
99+
VueUiNestedDonuts: markRaw(ArenaVueUiNestedDonuts),
100+
VueUiGalaxy: markRaw(ArenaVueUiGalaxy),
101+
VueUiStripPlot: markRaw(ArenaVueUiStripPlot),
102+
VueUiDumbbell: markRaw(ArenaVueUiDumbbell),
103+
VueUi3dBar: markRaw(ArenaVueUi3dBar),
104+
VueUiTableSparkline: markRaw(ArenaVueUiTableSparkline),
105+
VueUiTableHeatmap: markRaw(ArenaVueUiTableHeatmap),
106+
VueUiWordCloud: markRaw(ArenaVueUiWordCloud),
107+
VueUiXyCanvas: markRaw(ArenaVueUiXyCanvas),
108+
VueUiFlow: markRaw(ArenaVueUiFlow),
109+
VueUiParallelCoordinatePlot: markRaw(ArenaVueUiParallelCoordinatePlot),
110+
VueUiTimer: markRaw(ArenaVueUiTimer),
111+
VueUiCarouselTable: markRaw(ArenaVueUiCarouselTable),
112+
VueUiGizmo: markRaw(ArenaVueUiGizmo),
113+
VueUiKpi: markRaw(ArenaVueUiKpi),
114+
VueUiStackbar: markRaw(ArenaVueUiStackbar),
115+
VueUiRating: markRaw(ArenaVueUiRating),
116+
VueUiSmiley: markRaw(ArenaVueUiSmiley),
117+
VueUiBullet: markRaw(ArenaVueUiBullet),
118+
VueUiFunnel: markRaw(ArenaVueUiFunnel),
119+
VueUiHistoryPlot: markRaw(ArenaVueUiHistoryPlot),
120+
VueUiCirclePack: markRaw(ArenaVueUiCirclePack),
121+
VueUiWorld: markRaw(ArenaVueUiWorld),
122+
VueUiTable: markRaw(ArenaVueUiTable),
123+
VueUiRidgeline: markRaw(ArenaVueUiRidgeline),
124+
VueUiChord: markRaw(ArenaVueUiChord)
125+
})
126+
127+
const options = computed(() => Object.keys(mapping.value));
123128
124129
/**
125130
* Modify the index to display a component
126131
* [0] = VueUiXy
127132
*/
128-
const selectedComponent = ref(components.value[39]);
133+
const selectedComponent = ref('VueUiChord');
129134
130135
/**
131136
* Legacy testing arena where some non chart components can be tested
@@ -137,178 +142,14 @@ const showOldArena = ref(false);
137142
<template>
138143
<div>
139144
<select v-model="selectedComponent">
140-
<option v-for="c in components">
145+
<option v-for="c in options">
141146
{{ c }}
142147
</option>
143148
</select>
144149
</div>
145150

146151
<TestingArena v-if="showOldArena"/>
147152

148-
<!-- 0 -->
149-
<ArenaVueUiXy v-if="selectedComponent === 'VueUiXy'"/>
150-
151-
<!-- 1 -->
152-
<ArenaVueUiDonut v-if="selectedComponent === 'VueUiDonut'"/>
153-
154-
<!-- 2 -->
155-
<ArenaVueUiTreemap v-if="selectedComponent === 'VueUiTreemap'" />
156-
157-
<!-- 3 -->
158-
<ArenaVueUiWaffle v-if="selectedComponent === 'VueUiWaffle'" />
159-
160-
<!-- 4 -->
161-
<ArenaVueUiRadar v-if="selectedComponent === 'VueUiRadar'" />
162-
163-
<!-- 5 -->
164-
<ArenaVueUiQuadrant v-if="selectedComponent === 'VueUiQuadrant'" />
165-
166-
<!-- 6 -->
167-
<ArenaVueUiGauge v-if="selectedComponent === 'VueUiGauge'" />
168-
169-
<!-- 7 -->
170-
<ArenaVueUiWheel v-if="selectedComponent === 'VueUiWheel'" />
171-
172-
<!-- 8 -->
173-
<ArenaVueUiTiremarks v-if="selectedComponent === 'VueUiTiremarks'" />
174-
175-
<!-- 9 -->
176-
<ArenaVueUiChestnut v-if="selectedComponent === 'VueUiChestnut'" />
177-
178-
<!-- 10 -->
179-
<ArenaVueUiOnion v-if="selectedComponent === 'VueUiOnion'" />
180-
181-
<!-- 11 -->
182-
<ArenaVueUiVerticalBar v-if="selectedComponent === 'VueUiVerticalBar'" />
183-
184-
<!-- 12 -->
185-
<ArenaVueUiHeatmap v-if="selectedComponent === 'VueUiHeatmap'" />
186-
187-
<!-- 13 -->
188-
<ArenaVueUiScatter v-if="selectedComponent === 'VueUiScatter'" />
189-
190-
<!-- 14 -->
191-
<ArenaVueUiCandlestick v-if="selectedComponent === 'VueUiCandlestick'" />
192-
193-
<!-- 15 -->
194-
<ArenaVueUiSparkline v-if="selectedComponent === 'VueUiSparkline'" />
195-
196-
<!-- 16 -->
197-
<ArenaVueUiSparkbar v-if="selectedComponent === 'VueUiSparkbar'" />
198-
199-
<!-- 17 -->
200-
<ArenaVueUiSparkStackbar v-if="selectedComponent === 'VueUiSparkStackbar'" />
201-
202-
<!-- 18 -->
203-
<ArenaVueUiSparkHistogram v-if="selectedComponent === 'VueUiSparkHistogram'" />
204-
205-
<!-- 19 -->
206-
<ArenaVueUiSparkGauge v-if="selectedComponent === 'VueUiSparkgauge'" />
207-
208-
<!-- 20 -->
209-
<ArenaVueUiSparkTrend v-if="selectedComponent === 'VueUiSparkTrend'" />
210-
211-
<!-- 21 -->
212-
<ArenaVueUiQuickChart v-if="selectedComponent === 'VueUiQuickChart'" />
213-
214-
<!-- 22 -->
215-
<ArenaVueUiAgePyramid v-if="selectedComponent === 'VueUiAgePyramid'" />
216-
217-
<!-- 23 -->
218-
<ArenaVueUiRelationCircle v-if="selectedComponent === 'VueUiRelationCircle'" />
219-
220-
<!-- 24 -->
221-
<ArenaVueUiThermometer v-if="selectedComponent === 'VueUiThermometer'" />
222-
223-
<!-- 25 -->
224-
<ArenaVueUiRings v-if="selectedComponent === 'VueUiRings'" />
225-
226-
<!-- 26 -->
227-
<ArenaVueUiDonutEvolution v-if="selectedComponent === 'VueUiDonutEvolution'" />
228-
229-
<!-- 27 -->
230-
<ArenaVueUiIcon v-if="selectedComponent === 'VueUiIcon'" />
231-
232-
<!-- 28 -->
233-
<ArenaVueUiMoodRadar v-if="selectedComponent === 'VueUiMoodRadar'" />
234-
235-
<!-- 29 -->
236-
<ArenaVueUiMolecule v-if="selectedComponent === 'VueUiMolecule'" />
237-
238-
<!-- 30 -->
239-
<ArenaVueUiNestedDonuts v-if="selectedComponent === 'VueUiNestedDonuts'" />
240-
241-
<!-- 31 -->
242-
<ArenaVueUiGalaxy v-if="selectedComponent === 'VueUiGalaxy'" />
243-
244-
<!-- 32 -->
245-
<ArenaVueUiStripPlot v-if="selectedComponent === 'VueUiStripPlot'" />
246-
247-
<!-- 33 -->
248-
<ArenaVueUiDumbbell v-if="selectedComponent === 'VueUiDumbbell'" />
249-
250-
<!-- 34 -->
251-
<ArenaVueUi3dBar v-if="selectedComponent === 'VueUi3dBar'" />
252-
253-
<!-- 35 -->
254-
<ArenaVueUiTableSparkline v-if="selectedComponent === 'VueUiTableSparkline'" />
255-
256-
<!-- 36 -->
257-
<ArenaVueUiTableHeatmap v-if="selectedComponent === 'VueUiTableHeatmap'" />
258-
259-
<!-- 37 -->
260-
<ArenaVueUiWordCloud v-if="selectedComponent === 'VueUiWordCloud'" />
261-
262-
<!-- 38 -->
263-
<ArenaVueUiXyCanvas v-if="selectedComponent === 'VueUiXyCanvas'" />
264-
265-
<!-- 39 -->
266-
<ArenaVueUiFlow v-if="selectedComponent === 'VueUiFlow'" />
267-
268-
<!-- 40 -->
269-
<ArenaVueUiParallelCoordinatePlot v-if="selectedComponent === 'VueUiParallelCoordinatePlot'" />
270-
271-
<!-- 41 -->
272-
<ArenaVueUiTimer v-if="selectedComponent === 'VueUiTimer'" />
273-
274-
<!-- 42 -->
275-
<ArenaVueUiCarouselTable v-if="selectedComponent === 'VueUiCarouselTable'" />
276-
277-
<!-- 43 -->
278-
<ArenaVueUiGizmo v-if="selectedComponent === 'VueUiGizmo'" />
279-
280-
<!-- 44 -->
281-
<ArenaVueUiKpi v-if="selectedComponent === 'VueUiKpi'" />
282-
283-
<!-- 45 -->
284-
<ArenaVueUiStackbar v-if="selectedComponent === 'VueUiStackbar'" />
285-
286-
<!-- 46 -->
287-
<ArenaVueUiRating v-if="selectedComponent === 'VueUiRating'" />
288-
289-
<!-- 47 -->
290-
<ArenaVueUiSmiley v-if="selectedComponent === 'VueUiSmiley'" />
291-
292-
<!-- 48 -->
293-
<ArenaVueUiBullet v-if="selectedComponent === 'VueUiBullet'" />
294-
295-
<!-- 49 -->
296-
<ArenaVueUiFunnel v-if="selectedComponent === 'VueUiFunnel'" />
297-
298-
<!-- 50 -->
299-
<ArenaVueUiHistoryPlot v-if="selectedComponent === 'VueUiHistoryPlot'" />
300-
301-
<!-- 51 -->
302-
<ArenaVueUiCirclePack v-if="selectedComponent === 'VueUiCirclePack'" />
303-
304-
<!-- 52 -->
305-
<ArenaVueUiWorld v-if="selectedComponent === 'VueUiWorld'" />
306-
307-
<!-- 53 -->
308-
<ArenaVueUiTable v-if="selectedComponent === 'VueUiTable'" />
309-
310-
<!-- 54 -->
311-
<ArenaVueUiRidgeline v-if="selectedComponent === 'VueUiRidgeline'" />
153+
<component :is="mapping[selectedComponent]"/>
312154

313-
<!-- Add testing arena for new components here -->
314155
</template>

0 commit comments

Comments
 (0)