Dev environment - Update testing arena

graphieros · graphieros · commit 97a86abeee96 · 2025-10-28T16:48:52.000+01:00
diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue
@@ -28,15 +28,15 @@ onMounted(() => {
     setTimeout(() => {
         dataset.value = [
             {
-                name: 'A with a long name',
+                name: 'Series A',
                 values: [3]
             },
             {
-                name: 'A',
+                name: 'Series B',
                 values: [2]
             },
             {
-                name: 'A',
+                name: 'Series C',
                 values: [1]
             },
         ]
@@ -369,6 +369,13 @@ onMounted(async () => {
         const img = await localDonut.value.getImage()
         console.log(img)
         // localDonut.value.autoSize()
+        // setTimeout(() => {
+        //     localDonut.value.hideSeries('Series C')
+        // }, 4000)
+        // setTimeout(() => {
+        //     localDonut.value.hideSeries('Series A')
+        //     localDonut.value.showSeries('Series C')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue
@@ -232,7 +232,15 @@ const step = ref(0)
 onMounted(async() => {
     if (vduiLocal.value) {
         const img = await vduiLocal.value.getImage();
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     vduiLocal.value.hideSeries('Serie 1')
+        // }, 4000)
+        // setTimeout(() => {
+        //     vduiLocal.value.showSeries('Serie 1')
+        //     vduiLocal.value.hideSeries('Serie 2')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue
@@ -199,7 +199,15 @@ function selectDatapoint(datapoint) {
 onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Series 3');
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('Series 3');
+        //     local.value.hideSeries('Series 2');
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiHistoryPlot.vue b/TestingArena/ArenaVueUiHistoryPlot.vue
@@ -202,6 +202,15 @@ onMounted(async() => {
     if (local.value) {
         const img = await local.value.getImage()
         console.log(img)
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Series 1')
+        // }, 4000)
+
+        // setTimeout(() => {
+        //     local.value.showSeries('Series 1')
+        //     local.value.hideSeries('Series 2')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue
@@ -260,6 +260,13 @@ onMounted(async() => {
     if (local.value) {
         const img = await local.value.getImage()
         console.log(img)
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Serie 3')
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('Serie 3')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue
@@ -237,7 +237,15 @@ const step = ref(0)
 onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        setTimeout(() => {
+            local.value.hideSeries('Serie 1');
+        }, 4000);
+        setTimeout(() => {
+            local.value.showSeries('Serie 1');
+            local.value.hideSeries('Serie 2');
+        }, 5000);
     }
 })
 
diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
@@ -228,9 +228,17 @@ function selectDatapoint(dp) {
 }
 
 onMounted(async() => {
-    if (local.value) {
-        const p = await local.value.getImage()
+    if (vduiLocal.value) {
+        const p = await vduiLocal.value.getImage()
         console.log(p)
+
+        // setTimeout(() => {
+        //     vduiLocal.value.hideSeries('Series 1')
+        // }, 4000)
+        // setTimeout(() => {
+        //     vduiLocal.value.showSeries('Series 1')
+        //     vduiLocal.value.hideSeries('Series 2')
+        // }, 5000)
     }
 })
     
diff --git a/TestingArena/ArenaVueUiQuadrant.vue b/TestingArena/ArenaVueUiQuadrant.vue
@@ -317,7 +317,14 @@ function selectSide(side) {
 onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Serie 3')
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('Serie 3')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiRadar.vue b/TestingArena/ArenaVueUiRadar.vue
@@ -266,7 +266,15 @@ function selectLegend(legend) {
 onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Category 1')
+        // }, 4000);
+        // setTimeout(() => {
+        //     local.value.showSeries('Category 1')
+        //     local.value.hideSeries('Category 2')
+        // }, 5000);
     }
 })
 
diff --git a/TestingArena/ArenaVueUiRidgeline.vue b/TestingArena/ArenaVueUiRidgeline.vue
@@ -213,6 +213,9 @@ onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage();
         console.log(img)
+        setTimeout(() => {
+            local.value.hideSeries('Average Monthly Temperature (°C)')
+        }, 4000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue
@@ -234,6 +234,14 @@ onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage();
         console.log(img)
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Serie 3')
+        // }, 4000);
+        // setTimeout(() => {
+        //     local.value.showSeries('Serie 3')
+        //     local.value.hideSeries('Serie 2')
+        // }, 5000);
     }
 })
 
diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue
@@ -47,11 +47,11 @@ onMounted(() => {
                 shape: "circle",
                 marked: true
             },
-            // {
-            //     name: "Cluster 1",
-            //     values: scat1.value,
-            //     shape: "star",
-            // },
+            {
+                name: "Cluster 1",
+                values: scat1.value,
+                shape: "star",
+            },
         ]
     }, 0)
 })
@@ -347,7 +347,15 @@ function selectLegend(legend) {
 onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Cluster 2')
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('Cluster 2')
+        //     local.value.hideSeries('Cluster 1')
+        // }, 5000)
     }
 });
 
diff --git a/TestingArena/ArenaVueUiSparkStackbar.vue b/TestingArena/ArenaVueUiSparkStackbar.vue
@@ -160,6 +160,21 @@ const config = computed(() => {
 
 const step = ref(0)
 
+const local = ref(null);
+
+// onMounted(() => {
+//     if (local.value) {
+//         setTimeout(() => {
+//             local.value.hideSeries('Vue')
+//         }, 4000)
+//         setTimeout(() => {
+//             local.value.hideSeries('Javascript')
+//             local.value.showSeries('Vue')
+//         }, 5000)
+//     }
+// })
+
+
 </script>
 
 <template>
@@ -177,7 +192,7 @@ const step = ref(0)
         <template #title>VueUiSparkStackbar</template>
 
         <template #local>
-            <LocalVueUiSparkStackbar :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`">
+            <LocalVueUiSparkStackbar :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local">
                 <template #chart-background>
                     <div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
                 </template>
diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue
@@ -427,6 +427,20 @@ function freestyle({ drawingArea, data }) {
 function selectLegend(l) {
     console.log(l)
 }
+
+const resp = ref(null);
+
+// onMounted(() => {
+//     if (local.value) {
+//         local.value.hideSeries('Series 1');
+//         local.value.hideSeries('Series 2');
+//         setTimeout(() => {
+//             local.value.showSeries('Series 1');
+//             local.value.showSeries('Series 2');
+//             local.value.hideSeries('Series 3');
+//         }, 1000)
+//     }
+// })
     
 </script>
 
@@ -438,7 +452,7 @@ function selectLegend(l) {
         </select>
     </div>
 <div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
-    <LocalVueUiStackbar @selectLegend="selectLegend" @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="{...config,
+    <LocalVueUiStackbar ref="resp" @selectLegend="selectLegend" @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="{...config,
         responsive: true,
     }"  @selectTimeLabel="selectTimeLabel"> 
             <template #svg="{ svg }">
diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue
@@ -330,7 +330,15 @@ function selectDatapoint(datapoint) {
 onMounted(async() => {
     if (local.value) {
         const img = await local.value.getImage()
-        console.log(img)
+        console.log(img);
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('S2')
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('S2')
+        //     local.value.hideSeries('S3')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiVerticalBar.vue b/TestingArena/ArenaVueUiVerticalBar.vue
@@ -305,6 +305,14 @@ onMounted(async () => {
     if (local.value) {
         const img = await local.value.getImage();
         console.log(img)
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Serie 3')
+        // }, 4000)
+        // setTimeout(() => {
+        //     local.value.showSeries('Serie 3')
+        //     local.value.hideSeries('Serie 5')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiWaffle.vue b/TestingArena/ArenaVueUiWaffle.vue
@@ -17,15 +17,15 @@ onMounted(() => {
     setTimeout(() => {
         dataset.value = [
             {
-                name: 'A with a long name',
+                name: 'Series A',
                 values: [3]
             },
             {
-                name: 'A',
+                name: 'Series B',
                 values: [2]
             },
             {
-                name: 'A',
+                name: 'Series C',
                 values: [1]
             },
         ]
@@ -238,6 +238,15 @@ onMounted(async() => {
     if (local.value) {
         const img = await local.value.getImage()
         console.log(img)
+
+        // setTimeout(() => {
+        //     local.value.hideSeries('Series A')
+        // }, 4000)
+
+        // setTimeout(() => {
+        //     local.value.showSeries('Series A')
+        //     local.value.hideSeries('Series B')
+        // }, 5000)
     }
 })
 
diff --git a/TestingArena/ArenaVueUiXy.vue b/TestingArena/ArenaVueUiXy.vue
@@ -408,7 +408,7 @@ onMounted(() => {
         annotated: true
     },
     {
-        name: "Serie A",
+        name: "Serie B",
         series: createDs(35),
         type: "line",
         dataLabels: false,
@@ -1237,12 +1237,21 @@ function selectTimeLabel(data) {
     console.log(data)
 }
 
+const resp = ref(null);
+
 onMounted(async () => {
     if(vduiLocal.value) {
         const data = await vduiLocal.value.getData()
         console.log(data)
         const img = await vduiLocal.value.getImage({ scale: 4 });
     }
+    if (resp.value) {
+        resp.value.hideSeries('Serie A')
+        setTimeout(() => {
+            resp.value.showSeries('Serie A');
+            resp.value.hideSeries('Serie B');
+        }, 1000)
+    }
 })
 
 // Basically any content can be jazzed onto the chart :)
@@ -1292,7 +1301,7 @@ function freestyle({ data, drawingArea }) {
     </div>
 
     <div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
-        <LocalVueUiXy component="VueUiXy" :dataset="isPropsToggled ? alternateDataset : dataset" :config="{
+        <LocalVueUiXy ref="resp" :dataset="isPropsToggled ? alternateDataset : dataset" :config="{
             ...config,
             responsive: true,
         }" @selectTimeLabel="selectTimeLabel">
diff --git a/TestingArena/ArenaVueUiXyCanvas.vue b/TestingArena/ArenaVueUiXyCanvas.vue

Original file line number	Diff line number	Diff line change
`@@ -213,6 +213,9 @@ onMounted(async () => {`
`213`	`213`	`if (local.value) {`
`214`	`214`	`const img = await local.value.getImage();`
`215`	`215`	`console.log(img)`
	`216`	`+ setTimeout(() => {`
	`217`	`+ local.value.hideSeries('Average Monthly Temperature (°C)')`
	`218`	`+ }, 4000)`
`216`	`219`	`}`
`217`	`220`	`})`
`218`	`221`