Dev environment - Update testing arena

Author: graphieros

TestingArena/ArenaVueUiCandlestick.vue

@@ -113,13 +113,16 @@ const model = ref([
     { key: 'style.layout.candle.gradient.intensity', def: 40, type: 'range', min: 0, max: 100}, // not applied ?
     { key: 'style.layout.candle.gradient.underlayer', def: '#FFFFFF', type: 'color'},
     { key: 'style.layout.candle.widthRatio', def: 0.5, type: 'number', min: 0.1, max: 1, step: 0.1},
+    
     { key: 'style.zoom.show', def: true, type: 'checkbox'},
     { key: 'style.zoom.color', def: '#CCCCCC', type: 'color'},
     { 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.zoom.enableRangeHandles', def: true, type: 'chexkbox'},
+    { key: 'style.zoom.enableSelectionDrag', def: true, type: 'chexkbox'},
 
     { 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'},

TestingArena/ArenaVueUiDonutEvolution.vue

@@ -111,6 +111,8 @@ const model = ref([
     { 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},
+    { key: 'style.chart.zoom.enableRangeHandles', def: true, type: 'checkbox'},
+    { key: 'style.chart.zoom.enableSelectionDrag', def: true, type: 'checkbox'},
 ]);
 
 const themeOptions = ref([

TestingArena/ArenaVueUiQuickChart.vue

@@ -198,7 +198,8 @@ const model = ref([
     { 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},
-    
+    { key: 'zoomEnableRangeHandles', def: true, type: 'chexkbox'},
+    { key: 'zoomEnableSelectionDrag', def: true, type: 'chexkbox'},
 ]);
 
 const themeOptions = ref([

TestingArena/ArenaVueUiStackbar.vue

@@ -17,29 +17,47 @@ import { useArena } from "../src/useArena";
 //     },
 // ]);
 
-const dataset = ref([
+const dataset = computed(() => {
+  return [
     {
-        name: "Serie 1",
-        series: [0, 0, 30],
-        color: "rgba(255,0,0,0.5)"
+      name: "Series 1",
+      series: [
+        10, 20, 30, 10, 20, 4, 4, 5, 99, 34, 8, 43, 2, 8, 0, 52, 5, 3, 6, 23, 9,
+        18, 3, 5, 87, 5, 3, 5, 25, 12,
+      ],
+      color: "#5f8aee",
     },
     {
-        name: "Serie 2",
-        series: [0, -20, -30],
+      name: "Series 2",
+      series: [20, 40, 60, 20, 10],
+      color: "#42d392",
     },
-    {
-        name: "Serie 3",
-        series: [0, 5, -5, -10],
-    },
-    {
-        name: "Serie 4",
-        series: [0, 5, -5],
-    },
-    {
-        name: "Serie 4",
-        series: [0, -5, 5],
-    },
-]);
+  ];
+});
+
+// const dataset = ref([
+//     {
+//         name: "Serie 1",
+//         series: [0, 0, 30],
+//         color: "rgba(255,0,0,0.5)"
+//     },
+//     {
+//         name: "Serie 2",
+//         series: [0, -20, -30],
+//     },
+//     {
+//         name: "Serie 3",
+//         series: [0, 5, -5, -10],
+//     },
+//     {
+//         name: "Serie 4",
+//         series: [0, 5, -5],
+//     },
+//     {
+//         name: "Serie 4",
+//         series: [0, -5, 5],
+//     },
+// ]);
 
 // onMounted(() => {
 //     setTimeout(() => {
@@ -88,6 +106,8 @@ const model = ref([
     { 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.zoom.enableRangeHandles', def: true, type: 'chexkbox'},
+    { key: 'style.chart.zoom.enableSelectionDrag', def: true, type: 'chexkbox'},
 
     { key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
     { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},

TestingArena/ArenaVueUiXy.vue

@@ -221,6 +221,8 @@ const model = ref([
     { key: 'chart.zoom.highlightColor', def: '#4A4A4A', type: 'color' },
     { key: 'chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
     { key: 'chart.zoom.useResetSlot', def: false, type: 'checkbox'},
+    { key: 'chart.zoom.enableRangeHandles', def: true, type: 'chexkbox'},
+    { key: 'chart.zoom.enableSelectionDrag', def: true, type: 'checkbox'},
 
     { key: 'chart.zoom.minimap.show', def: true, type: 'checkbox'},
     { key: 'chart.zoom.minimap.smooth', def: true, type: 'checkbox'},

TestingArena/ArenaVueUiXyCanvas.vue

@@ -130,6 +130,8 @@ const model = ref([
     { 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.zoom.enableRangeHandles', def: true, type: 'checkbox'},
+    { key: 'style.chart.zoom.enableSelectionDrag', def: true, type: 'checkbox'},
 
     { key: 'style.chart.selector.show', def: true, type: 'checkbox' },
     { key: 'style.chart.selector.color', def: '#1A1A1A', type: 'color' },