Dev environment - Update testing arena

Author: graphieros

TestingArena/ArenaVueUiCandlestick.vue

@@ -116,6 +116,9 @@ const model = ref([
     { key: 'style.zoom.highlightColor', def: '#4A4A4A', type: 'color' },
     { key: 'style.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
     { key: 'style.zoom.useResetSlot', def: false, type: 'checkbox'},
+    { key: 'style.zoom.startIndex', def: 2, type: 'number', min: 0, max: 1000},
+    { key: 'style.zoom.endIndex', def: 6, type: 'number', min: 0, max: 1000},
+
     { key: 'style.title.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
     { key: 'style.title.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.title.fontSize', def: 20, type: 'number', min: 8, max: 48},

TestingArena/ArenaVueUiDonutEvolution.vue

@@ -106,7 +106,9 @@ const model = ref([
     { key: 'style.chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 48},
     { key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'},
     { key: 'style.chart.zoom.highlightColor', def: "#1A1A1A", type: 'color' },
-    { key: 'style.chart.zoom.useResetSlot', def: false, type: 'checkbox'}
+    { key: 'style.chart.zoom.useResetSlot', def: false, type: 'checkbox'},
+    { key: 'style.chart.zoom.startIndex', def: 2, type: 'number', min: 0, max: 100},
+    { key: 'style.chart.zoom.endIndex', def: 6, type: 'number', min: 0, max: 100},
 ]);
 
 const themeOptions = ref([

TestingArena/ArenaVueUiQuickChart.vue

@@ -194,6 +194,8 @@ const model = ref([
     { key: 'zoomMinimap.lineColor', def: '#1A1A1A', type: 'color'},
     { key: 'zoomMinimap.selectionRadius', def: 2, type: 'range', min: 0, max: 24},
     { key: 'zoomMinimap.indicatorColor', def: '#1A1A1A', type: 'color'},
+    { key: 'zoomStartIndex', def: 1, type: 'number', min: 0, max: 100},
+    { key: 'zoomEndIndex', def: 3, type: 'number', min: 0, max: 100},
     
 ]);
 

TestingArena/ArenaVueUiStackbar.vue

@@ -41,14 +41,14 @@ const dataset = ref([
     },
 ]);
 
-onMounted(() => {
-    setTimeout(() => {
-        dataset.value.push({
-            name: 'ALT',
-            series: [100, 100, 100, 100, 100, 100, 100, 100, 100]
-        })
-    }, 3000)
-})
+// onMounted(() => {
+//     setTimeout(() => {
+//         dataset.value.push({
+//             name: 'ALT',
+//             series: [100, 100, 100, 100, 100, 100, 100, 100, 100]
+//         })
+//     }, 3000)
+// })
 
 const model = ref([
     { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
@@ -86,6 +86,8 @@ const model = ref([
     { key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'},
     { key: 'style.chart.zoom.highlightColor', def: '#5A5A5A', type: 'color'},
     { key: 'style.chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
+    { key: 'style.chart.zoom.startIndex', def:1, type: 'number', min: 0, max: 100},
+    { key: 'style.chart.zoom.endIndex', def: 2, type: 'number', min: 0, max: 100},
 
     { key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
     { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
@@ -222,6 +224,11 @@ const step = ref(0);
     </LocalVueUiStackbar>
 </div>
 
+<!-- <div style="width: 200px; position: fixed; top: 64px; left: 400px; transform-origin: right top; transform: translateY(0px)">
+    <LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
+    </LocalVueUiStackbar>
+</div> -->
+
 <Box>
     <template #title>VueUiStackbar</template>
 

TestingArena/ArenaVueUiXy.vue

@@ -227,6 +227,8 @@ const model = ref([
     { key: 'chart.zoom.minimap.lineColor', def: '#1A1A1A', type: 'color'},
     { key: 'chart.zoom.minimap.selectionRadius', def: 2, type: 'number', min: 0, max: 24},
     { key: 'chart.zoom.minimap.indicatorColor', def: '#1A1A1A', type: 'color'},
+    { key: 'chart.zoom.startIndex', def: 2, type: 'number', min: 0, max: 100},
+    { key: 'chart.zoom.endIndex', def: 6, type: 'number', min: 0, max: 100},
 
     { key: 'chart.padding.top', def: 36, type: 'number', min: 0, max: 100, label: "top", category: 'padding' },
     { key: 'chart.padding.right', def: 36, type: 'number', min: 0, max: 100, label: 'right', category: 'padding' },

TestingArena/ArenaVueUiXyCanvas.vue

@@ -126,6 +126,9 @@ const model = ref([
     { key: 'style.chart.zoom.highlightColor', def: '#4A4A4A', type: 'color' },
     { key: 'style.chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42 },
     { key: 'style.chart.zoom.useResetSlot', def: false, type: 'checkbox' },
+    { key: 'style.chart.zoom.startIndex', def: 100, type: 'number', min: 0, max: 1000},
+    { key: 'style.chart.zoom.endIndex', def: 400, type: 'number', min: 0, max: 1000},
+
     { key: 'style.chart.selector.show', def: true, type: 'checkbox' },
     { key: 'style.chart.selector.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.selector.dashed', def: false, type: 'checkbox' },