Skip to content

Commit 4c35bc9

Browse files
graphierosgraphieros
committed
Dev environment - Update testing arena
1 parent 86ec5ed commit 4c35bc9

File tree

2 files changed

+252
-20
lines changed

2 files changed

+252
-20
lines changed

‎TestingArena/ArenaVueUiStackbar.vue‎

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ const model = ref([
103103
{ key: 'style.chart.tooltip.showPercentage', def: true, type: 'checkbox'},
104104
{ key: 'style.chart.tooltip.roundingValue', def: 0, type: 'number', min: 0, max: 6},
105105
{ key: 'style.chart.tooltip.roundingPercentage', def: 0, type: 'number', min: 0, max: 6},
106+
{ key: 'style.chart.tooltip.showTimeLabel', def: true, type: 'checkbox'},
106107
107108
{ key: 'style.chart.highlighter.color', def: '#1A1A1A', type: 'color'},
108109
{ key: 'style.chart.highlighter.opacity', def: 5, type: 'range', min: 0, max: 30},
@@ -196,7 +197,7 @@ const config = computed(() => {
196197
...c.style.chart.grid.x,
197198
timeLabels: {
198199
...c.style.chart.grid.x.timeLabels,
199-
values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
200+
// values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
200201
}
201202
}
202203
}
@@ -207,6 +208,9 @@ const config = computed(() => {
207208
208209
const step = ref(0);
209210
211+
function selectTimeLabel(data) {
212+
console.log(data)
213+
}
210214
211215
</script>
212216

@@ -215,12 +219,34 @@ const step = ref(0);
215219
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
216220
<LocalVueUiStackbar :dataset="dataset" :config="{...config,
217221
responsive: true,
218-
}" :key="`local_resp_${step}`">
222+
}" :key="`local_resp_${step}`" @selectTimeLabel="selectTimeLabel">
219223
<template #source>
220224
<div style="width:100%;font-size:10px;text-align:left">
221225
SOURCE: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur, molestiae perspiciatis nam quae libero, deserunt in aperiam unde officia sint saepe laboriosam ducimus aspernatur labore! Sapiente aspernatur corrupti quis ad.
222226
</div>
223227
</template>
228+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
229+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
230+
<text
231+
:x="x"
232+
:y="y"
233+
:font-size="fontSize"
234+
:text-anchor="textAnchor"
235+
:fill="fill"
236+
>
237+
{{ content }}
238+
</text>
239+
<text
240+
:x="x"
241+
:y="y + fontSize"
242+
:font-size="fontSize * 0.8"
243+
:text-anchor="textAnchor"
244+
fill="grey"
245+
>
246+
{{ content }}
247+
</text>
248+
</g>
249+
</template>
224250
</LocalVueUiStackbar>
225251
</div>
226252

@@ -234,21 +260,109 @@ const step = ref(0);
234260

235261
<template #local>
236262
<LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
263+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
264+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
265+
<text
266+
:x="x"
267+
:y="y"
268+
:font-size="fontSize"
269+
:text-anchor="textAnchor"
270+
:fill="fill"
271+
>
272+
{{ content }}
273+
</text>
274+
<text
275+
:x="x"
276+
:y="y + fontSize"
277+
:font-size="fontSize * 0.8"
278+
:text-anchor="textAnchor"
279+
fill="grey"
280+
>
281+
{{ content }}
282+
</text>
283+
</g>
284+
</template>
237285
</LocalVueUiStackbar>
238286
</template>
239287

240288
<template #VDUI-local>
241289
<LocalVueDataUi component="VueUiStackbar" :dataset="dataset" :config="config" :key="`local_vdui_${step}`">
290+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
291+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
292+
<text
293+
:x="x"
294+
:y="y"
295+
:font-size="fontSize"
296+
:text-anchor="textAnchor"
297+
:fill="fill"
298+
>
299+
{{ content }}
300+
</text>
301+
<text
302+
:x="x"
303+
:y="y + fontSize"
304+
:font-size="fontSize * 0.8"
305+
:text-anchor="textAnchor"
306+
fill="grey"
307+
>
308+
{{ content }}
309+
</text>
310+
</g>
311+
</template>
242312
</LocalVueDataUi>
243313
</template>
244314

245315
<template #build>
246316
<VueUiStackbar :dataset="dataset" :config="config" :key="`build_${step}`">
317+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
318+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
319+
<text
320+
:x="x"
321+
:y="y"
322+
:font-size="fontSize"
323+
:text-anchor="textAnchor"
324+
:fill="fill"
325+
>
326+
{{ content }}
327+
</text>
328+
<text
329+
:x="x"
330+
:y="y + fontSize"
331+
:font-size="fontSize * 0.8"
332+
:text-anchor="textAnchor"
333+
fill="grey"
334+
>
335+
{{ content }}
336+
</text>
337+
</g>
338+
</template>
247339
</VueUiStackbar>
248340
</template>
249341

250342
<template #VDUI-build>
251343
<VueDataUi component="VueUiStackbar" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
344+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
345+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
346+
<text
347+
:x="x"
348+
:y="y"
349+
:font-size="fontSize"
350+
:text-anchor="textAnchor"
351+
:fill="fill"
352+
>
353+
{{ content }}
354+
</text>
355+
<text
356+
:x="x"
357+
:y="y + fontSize"
358+
:font-size="fontSize * 0.8"
359+
:text-anchor="textAnchor"
360+
fill="grey"
361+
>
362+
{{ content }}
363+
</text>
364+
</g>
365+
</template>
252366
</VueDataUi>
253367
</template>
254368

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 136 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ const model = ref([
328328
{ key: 'chart.tooltip.backgroundOpacity', def: 20, type: 'range', min: 0, max: 100 },
329329
{ key: 'chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']},
330330
{ key: 'chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 48},
331+
{ key: 'chart.tooltip.showTimeLabel', def: true, type: 'checkbox'},
331332
332333
{ key: 'bar.borderRadius', def: 2, type: 'number', min: 0, max: 120, label: 'borderRadius', category: 'bar' },
333334
{ key: 'bar.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'bar' },
@@ -511,23 +512,23 @@ const config = computed(() => {
511512
},
512513
xAxisLabels: {
513514
...c.chart.grid.labels.xAxisLabels,
514-
values: [
515-
"JANUARY IS KIND OF LONG",
516-
"FEBRUARY IS KIND OF LONG TOO",
517-
"MARCH",
518-
"APRIL",
519-
"MAY",
520-
"JUNE",
521-
"JULY",
522-
"AUGUST",
523-
"SEPTEMBER",
524-
"OCTOBER",
525-
"NOVEMBER IS KIND OF LONG TOO",
526-
"DECEMBER",
527-
"JANUARY+",
528-
"FEBRUARY+",
529-
"MARCH+"
530-
]
515+
// values: [
516+
// "JANUARY IS KIND OF LONG",
517+
// "FEBRUARY IS KIND OF LONG TOO",
518+
// "MARCH",
519+
// "APRIL",
520+
// "MAY",
521+
// "JUNE",
522+
// "JULY",
523+
// "AUGUST",
524+
// "SEPTEMBER",
525+
// "OCTOBER",
526+
// "NOVEMBER IS KIND OF LONG TOO",
527+
// "DECEMBER",
528+
// "JANUARY+",
529+
// "FEBRUARY+",
530+
// "MARCH+"
531+
// ]
531532
}
532533
}
533534
}
@@ -563,6 +564,10 @@ function selectX(selectedX) {
563564
// resizeObserver.observe(resizable.value)
564565
// })
565566
567+
function selectTimeLabel(data) {
568+
console.log(data)
569+
}
570+
566571
</script>
567572

568573
<template>
@@ -586,7 +591,31 @@ function selectX(selectedX) {
586591
<LocalVueUiXy component="VueUiXy" :dataset="isPropsToggled ? alternateDataset : dataset" :config="{
587592
...config,
588593
responsive: true,
589-
}">
594+
}" @selectTimeLabel="selectTimeLabel">
595+
596+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
597+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
598+
<text
599+
:x="x"
600+
:y="y"
601+
:font-size="fontSize"
602+
:text-anchor="textAnchor"
603+
:fill="fill"
604+
>
605+
{{ content }}
606+
</text>
607+
<text
608+
:x="x"
609+
:y="y + fontSize"
610+
:font-size="fontSize * 0.8"
611+
:text-anchor="textAnchor"
612+
fill="grey"
613+
>
614+
{{ content }}
615+
</text>
616+
</g>
617+
</template>
618+
590619
<template #plot-comment="{ plot }">
591620
<div :style="`font-size: 12px; color:${plot.color}; text-align:center`">
592621
{{ plot.comment }}
@@ -616,6 +645,28 @@ function selectX(selectedX) {
616645
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
617646
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
618647
</template> -->
648+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
649+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
650+
<text
651+
:x="x"
652+
:y="y"
653+
:font-size="fontSize"
654+
:text-anchor="textAnchor"
655+
:fill="fill"
656+
>
657+
{{ content }}
658+
</text>
659+
<text
660+
:x="x"
661+
:y="y + fontSize"
662+
:font-size="fontSize * 0.8"
663+
:text-anchor="textAnchor"
664+
fill="grey"
665+
>
666+
{{ content }}
667+
</text>
668+
</g>
669+
</template>
619670
<template #optionPdf>
620671
PRINT PDF
621672
</template>
@@ -648,6 +699,29 @@ function selectX(selectedX) {
648699
<template #VDUI-local>
649700
<LocalVueDataUi component="VueUiXy" :dataset="isPropsToggled ? alternateDataset: dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`"
650701
@selectLegend="selectLegend" @selectX="selectX" ref="vduiLocal">
702+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
703+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
704+
<text
705+
:x="x"
706+
:y="y"
707+
:font-size="fontSize"
708+
:text-anchor="textAnchor"
709+
:fill="fill"
710+
>
711+
{{ content }}
712+
</text>
713+
<text
714+
:x="x"
715+
:y="y + fontSize"
716+
:font-size="fontSize * 0.8"
717+
:text-anchor="textAnchor"
718+
fill="grey"
719+
>
720+
{{ content }}
721+
</text>
722+
</g>
723+
</template>
724+
651725
<template #svg="{ svg }">
652726
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
653727
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -678,6 +752,28 @@ function selectX(selectedX) {
678752
<template #build>
679753
<VueUiXy :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" @selectLegend="selectLegend"
680754
@selectX="selectX" ref="build">
755+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
756+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
757+
<text
758+
:x="x"
759+
:y="y"
760+
:font-size="fontSize"
761+
:text-anchor="textAnchor"
762+
:fill="fill"
763+
>
764+
{{ content }}
765+
</text>
766+
<text
767+
:x="x"
768+
:y="y + fontSize"
769+
:font-size="fontSize * 0.8"
770+
:text-anchor="textAnchor"
771+
fill="grey"
772+
>
773+
{{ content }}
774+
</text>
775+
</g>
776+
</template>
681777
<template #svg="{ svg }">
682778
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
683779
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -708,6 +804,28 @@ function selectX(selectedX) {
708804
<template #VDUI-build>
709805
<VueDataUi component="VueUiXy" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`"
710806
@selectLegend="selectLegend" @selectX="selectX" ref="vduiBuild">
807+
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
808+
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
809+
<text
810+
:x="x"
811+
:y="y"
812+
:font-size="fontSize"
813+
:text-anchor="textAnchor"
814+
:fill="fill"
815+
>
816+
{{ content }}
817+
</text>
818+
<text
819+
:x="x"
820+
:y="y + fontSize"
821+
:font-size="fontSize * 0.8"
822+
:text-anchor="textAnchor"
823+
fill="grey"
824+
>
825+
{{ content }}
826+
</text>
827+
</g>
828+
</template>
711829
<template #svg="{ svg }">
712830
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
713831
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

0 commit comments

Comments
 (0)