Skip to content

Commit 04dc0a3

Browse files
graphierosgraphieros
authored
Merge pull request #104 from graphieros/ft-reactivity
Ft reactivity
2 parents 8ce502e + b2a1e24 commit 04dc0a3

File tree

75 files changed

+2750
-636
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+2750
-636
lines changed

‎TestingArena/ArenaVueUi3dBar.vue

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed } from "vue";
2+
import { ref, computed, onMounted } from "vue";
33
import LocalVueUi3dBar from '../src/components/vue-ui-3d-bar.vue';
44
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
@@ -56,6 +56,29 @@ const datasets = ref({
5656
}
5757
})
5858
59+
onMounted(() => {
60+
setTimeout(() => {
61+
datasets.value.stacked.series.push({
62+
name: 'ALT',
63+
value: 500,
64+
breakdown: [
65+
{
66+
name: 'ALT 1',
67+
value: 200
68+
},
69+
{
70+
name: 'ALT 2',
71+
value: 200
72+
},
73+
{
74+
name: 'ALT 3',
75+
value: 100
76+
}
77+
]
78+
})
79+
}, 3000)
80+
})
81+
5982
const model = ref([
6083
{ key: 'responsive', def: false, type: 'checkbox'},
6184
{ key: 'userOptions.show', def: true, type: 'checkbox'},

‎TestingArena/ArenaVueUiAgePyramid.vue

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,35 @@ const dataset = ref([
1414
['2022', 0, 330929, 345538]
1515
]);
1616
17+
const alternateDataset = ref([
18+
['2017', 5, 10, 9],
19+
['2018', 4, 11, 10],
20+
['2019', 3, 12, 11],
21+
])
22+
23+
const alternateConfig = ref({
24+
style: {
25+
backgroundColor: '#CCCCCC',
26+
title: {
27+
text: 'Alternate'
28+
}
29+
}
30+
})
31+
32+
const isPropsToggled = ref(false);
33+
function toggleProps() {
34+
isPropsToggled.value = !isPropsToggled.value;
35+
}
36+
37+
function alterDataset() {
38+
dataset.value.push([
39+
'ALT',
40+
1,
41+
Math.round(Math.random() * 300000) + 100000,
42+
Math.round(Math.random() * 300000) + 100000
43+
])
44+
}
45+
1746
const model = ref([
1847
{ key: 'responsive', def: false, type: 'checkbox'},
1948
{ key: 'userOptions.show', def: true, type: 'checkbox'},
@@ -118,7 +147,7 @@ const config = computed(() => {
118147
tooltip: {
119148
...c.style.tooltip,
120149
customFormat: ({ datapoint }) => {
121-
console.log({datapoint})
150+
// console.log({datapoint})
122151
return 'test'
123152
}
124153
}
@@ -136,7 +165,7 @@ const config = computed(() => {
136165
xAxis: {
137166
...c.style.layout.dataLabels.xAxis,
138167
formatter: ({value, config}) => {
139-
console.log(config)
168+
// console.log(config)
140169
return `X | ${value}`
141170
}
142171
},
@@ -178,6 +207,8 @@ function toggleTable() {
178207
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
179208
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
180209
</div>
210+
<button @click="toggleProps">TOGGLE PROPS: {{ isPropsToggled }}</button>
211+
<button @click="alterDataset">ALTER DATASET</button>
181212

182213
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
183214
<LocalVueUiAgePyramid :key="`responsive_${step}`" :dataset="dataset" :config="{
@@ -196,7 +227,7 @@ function toggleTable() {
196227
<template #title>VueUiAgePyramid</template>
197228

198229
<template #local>
199-
<LocalVueUiAgePyramid :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
230+
<LocalVueUiAgePyramid :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local">
200231
<template #optionPdf>
201232
PRINT PDF
202233
</template>
@@ -220,7 +251,7 @@ function toggleTable() {
220251
</template>
221252

222253
<template #VDUI-local>
223-
<LocalVueDataUi component="VueUiAgePyramid" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" ref="build">
254+
<LocalVueDataUi component="VueUiAgePyramid" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" ref="build">
224255
<template #svg="{ svg }">
225256
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
226257
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -241,7 +272,7 @@ function toggleTable() {
241272
</template>
242273

243274
<template #build>
244-
<VueUiAgePyramid :dataset="dataset" :config="config" :key="`build_${step}`">
275+
<VueUiAgePyramid :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`">
245276
<template #svg="{ svg }">
246277
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
247278
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -262,7 +293,7 @@ function toggleTable() {
262293
</template>
263294

264295
<template #VDUI-build>
265-
<VueDataUi component="VueUiAgePyramid" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
296+
<VueDataUi component="VueUiAgePyramid" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`">
266297
<template #svg="{ svg }">
267298
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
268299
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

‎TestingArena/ArenaVueUiCandlestick.vue

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,39 @@ const dataset = ref([
2525
["2024-15-01", 30, 120, 10, 105, 2881],
2626
]);
2727
28+
const alternateDataset = ref([
29+
["2024-11-01", 125, 130, 45, 92, 1972],
30+
["2024-12-01", 92, 120, 35, 75, 3599],
31+
["2024-13-01", 75, 80, 26, 45, 5881],
32+
["2024-14-01", 45, 60, 20, 30, 2881],
33+
["2024-15-01", 30, 120, 10, 105, 2881],
34+
])
35+
36+
const alternateConfig = ref({
37+
table: {
38+
th: {
39+
backgroundColor: '#00FF00'
40+
}
41+
},
42+
style: {
43+
backgroundColor: '#FF0000',
44+
title: {
45+
text: 'Alternate'
46+
}
47+
}
48+
})
49+
50+
const isPropsToggled = ref(false);
51+
function toggleProps() {
52+
isPropsToggled.value = !isPropsToggled.value;
53+
}
54+
55+
function alterDataset() {
56+
dataset.value.push(
57+
['ALT', Math.random()*80, Math.random() * 100 + 80, Math.random() * 40, Math.random()* 40 + 20, Math.random() * 3000]
58+
)
59+
}
60+
2861
const model = ref([
2962
{ key: 'responsive', def: false, type: 'checkbox'},
3063
{ key: 'userOptions.show', def: true, type: 'checkbox'},
@@ -167,6 +200,9 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
167200

168201
<template>
169202
<button @click="toggleTable">TOGGLE TABLE</button>
203+
<button @click="toggleProps">TOGGLE PROPS: {{ isPropsToggled }}</button>
204+
<button @click="alterDataset">ALTER DATASET</button>
205+
170206
<div style="margin: 12px 0; color: white">
171207
Theme:
172208
<select v-model="currentTheme" @change="step += 1">
@@ -195,7 +231,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
195231
<template #title>VueUiCandlestick</template>
196232

197233
<template #local>
198-
<LocalVueUiCandlestick :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
234+
<LocalVueUiCandlestick :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" ref="local">
199235
<template #optionPdf>
200236
PRINT PDF
201237
</template>
@@ -222,7 +258,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
222258
</template>
223259

224260
<template #VDUI-local>
225-
<LocalVueDataUi component="VueUiCandlestick" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
261+
<LocalVueDataUi component="VueUiCandlestick" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
226262
<template #svg="{ svg }">
227263
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
228264
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -246,7 +282,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
246282
</template>
247283

248284
<template #build>
249-
<VueUiCandlestick :dataset="dataset" :config="config" :key="`build_${step}`" ref="build">
285+
<VueUiCandlestick :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" ref="build">
250286
<template #svg="{ svg }">
251287
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
252288
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -270,7 +306,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
270306
</template>
271307

272308
<template #VDUI-build>
273-
<VueDataUi component="VueUiCandlestick" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`" ref="vduiBuild">
309+
<VueDataUi component="VueUiCandlestick" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`" ref="vduiBuild">
274310
<template #svg="{ svg }">
275311
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
276312
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

‎TestingArena/ArenaVueUiChestnut.vue

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,91 @@ const dataset = ref([
189189
},
190190
]);
191191
192+
const alternateDataset = ref([
193+
{
194+
name: "Root1",
195+
branches: [
196+
{
197+
name: "branch 1.1",
198+
value: 200,
199+
breakdown: [
200+
{
201+
name: "break 1.1.1",
202+
value: 50,
203+
},
204+
{
205+
name: "break 1.1.2",
206+
value: 25,
207+
},
208+
{
209+
name: "break 1.1.3",
210+
value: 25,
211+
},
212+
]
213+
},
214+
{
215+
name: "branch 1.2",
216+
value: 100,
217+
breakdown: [
218+
{
219+
name: "break 1.2.1",
220+
value: 10,
221+
},
222+
{
223+
name: "break 1.2.2",
224+
value: 20,
225+
},
226+
{
227+
name: "break 1.2.3",
228+
value: 70,
229+
},
230+
]
231+
},
232+
{
233+
name: "branch 1.3",
234+
value: 175,
235+
breakdown: [
236+
{
237+
name: "break 1.3.1",
238+
value: 90,
239+
},
240+
{
241+
name: "break 1.3.2",
242+
value: 10,
243+
},
244+
{
245+
name: "break 1.3.3",
246+
value: 75,
247+
},
248+
]
249+
},
250+
251+
]
252+
},
253+
])
254+
255+
const alternateConfig = ref({
256+
style: {
257+
chart: {
258+
backgroundColor: '#FF0000',
259+
layout: {
260+
title: {
261+
text: 'Alternate'
262+
}
263+
}
264+
}
265+
}
266+
})
267+
268+
const isPropsToggled = ref(false);
269+
function toggleProps() {
270+
isPropsToggled.value = !isPropsToggled.value;
271+
}
272+
273+
function alterDataset() {
274+
dataset.value[0].branches[0].value = 500;
275+
}
276+
192277
const model = ref([
193278
{ key: 'responsive', def: true, type: 'checkbox'},
194279
{ key: 'userOptions.show', def: true, type: 'checkbox'},
@@ -400,6 +485,8 @@ function selectNut(nut) {
400485

401486
<template>
402487
<button @click="toggleTable">TOGGLE TABLE</button>
488+
<button @click="toggleProps">TOGGLE PROPS: {{ isPropsToggled }}</button>
489+
<button @click="alterDataset">ALTER DATASET</button>
403490

404491
<div style="margin: 12px 0; color: white">
405492
Theme:
@@ -425,7 +512,7 @@ function selectNut(nut) {
425512
<template #title>VueUiChestnut</template>
426513

427514
<template #local>
428-
<LocalVueUiChestnut :dataset="dataset" :config="config" :key="`local_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="local">
515+
<LocalVueUiChestnut :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="local">
429516
<template #optionPdf>
430517
PRINT PDF
431518
</template>
@@ -443,7 +530,7 @@ function selectNut(nut) {
443530
</template>
444531

445532
<template #VDUI-local>
446-
<LocalVueDataUi component="VueUiChestnut" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="vduiLocal">
533+
<LocalVueDataUi component="VueUiChestnut" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-lodal_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="vduiLocal">
447534
<template #svg="{ svg }">
448535
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
449536
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -458,7 +545,7 @@ function selectNut(nut) {
458545
</template>
459546

460547
<template #build>
461-
<VueUiChestnut :dataset="dataset" :config="config" :key="`build_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="build">
548+
<VueUiChestnut :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="build">
462549
<template #svg="{ svg }">
463550
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
464551
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
@@ -473,7 +560,7 @@ function selectNut(nut) {
473560
</template>
474561

475562
<template #VDUI-build>
476-
<VueDataUi component="VueUiChestnut" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="vduiBuild">
563+
<VueDataUi component="VueUiChestnut" :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`VDUI-build_${step}`" @selectRoot="selectRoot" @selectBranch="selectBranch" @selectNut="selectNut" ref="vduiBuild">
477564
<template #svg="{ svg }">
478565
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
479566
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

0 commit comments

Comments
 (0)