Skip to content

Commit 8ef74d2

Browse files
graphierosgraphieros
committed
Dev environment - Update testing arenas
1 parent 9bd9f74 commit 8ef74d2

File tree

4 files changed

+139
-8
lines changed

4 files changed

+139
-8
lines changed

‎TestingArena/ArenaVueUiCandlestick.vue‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ onMounted(() => {
5050
dataset.value = undefined;
5151
setTimeout(() => {
5252
dataset.value = generateRandomCandlestickData({ count: 100 })
53-
}, 2000)
53+
}, 100)
5454
})
5555
5656
const alternateDataset = ref([
@@ -207,7 +207,7 @@ const model = ref([
207207
{ key: 'translations.open', def: 'Open', type: 'text'},
208208
{ key: 'translations.high', def: 'High', type: 'text'},
209209
{ key: 'translations.low', def: 'Low', type: 'text'},
210-
{ key: 'translations.last', def: 'Last', type: 'text'},
210+
{ key: 'translations.last', def: 'Close', type: 'text'},
211211
{ key: 'translations.volume', def: 'Volume', type: 'text'},
212212
213213
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800 },
@@ -326,6 +326,30 @@ function selectX({ datapoint, index, indexLabel}) {
326326
selectedX.value = index;
327327
}
328328
329+
function freestyle({ drawingArea, data }) {
330+
const maxVol = data.filter(d => !!d.isMaxVolume);
331+
const minVol = data.filter(d => !!d.isMinVolume);
332+
return `
333+
<path
334+
d="M${minVol[0]?.high?.x},${minVol[0]?.high?.y} ${maxVol[0]?.high?.x},${maxVol[0]?.high?.y}"
335+
stroke="black"
336+
/>
337+
<path
338+
d="M${minVol[0]?.low?.x},${minVol[0]?.low?.y} ${maxVol[0]?.low?.x},${maxVol[0]?.low?.y}"
339+
stroke="black"
340+
/>
341+
<polygon
342+
points="
343+
${minVol[0]?.high.x},${minVol[0]?.high?.y}
344+
${maxVol[0]?.high?.x},${maxVol[0]?.high?.y}
345+
${maxVol[0]?.low?.x},${maxVol[0]?.low?.y}
346+
${minVol[0]?.low?.x},${minVol[0]?.low?.y}
347+
"
348+
fill="#00000020"
349+
/>
350+
`
351+
}
352+
329353
</script>
330354
331355
<template>
@@ -349,6 +373,10 @@ function selectX({ datapoint, index, indexLabel}) {
349373
...config,
350374
responsive: true
351375
}">
376+
<template #svg="{ svg }">
377+
<g v-html="freestyle(svg)"/>
378+
</template>
379+
352380
<template #chart-background>
353381
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
354382
</template>

‎TestingArena/ArenaVueUiScatter.vue‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,20 @@ const scat1 = computed(() => {
1717
arr.push({
1818
x: Math.random() * (Math.random() > 0.5 ? i / 3 : -i / 3),
1919
y: Math.random() * (Math.random() > 0.5 ? i / 3 : -i / 3),
20-
name: `plot_${i}_cluster_1`
20+
name: `plot_${i}_cluster_1`,
2121
});
2222
}
2323
return arr;
2424
});
2525
2626
const scat2 = computed(() => {
2727
const arr = [];
28-
for (let i = -500; i < 500; i += 1) {
28+
for (let i = -20; i < 20; i += 1) {
2929
arr.push({
3030
x: Math.random() * (Math.random() > 0.5 ? i / 4 : -i / 4),
3131
y: Math.random() * (Math.random() > 0.5 ? i / 4 : -i / 4),
3232
name: `plot_${i}_cluster_2`,
33+
marked: i > 10 && i < 15
3334
});
3435
}
3536
return arr;
@@ -44,14 +45,15 @@ onMounted(() => {
4445
name: "Cluster 2",
4546
values: scat2.value,
4647
shape: "circle",
48+
marked: true
4749
},
4850
// {
4951
// name: "Cluster 1",
5052
// values: scat1.value,
5153
// shape: "star",
5254
// },
5355
]
54-
}, 2000)
56+
}, 0)
5557
})
5658
5759
const alternateDataset = ref([
@@ -347,7 +349,30 @@ onMounted(async () => {
347349
const img = await local.value.getImage()
348350
console.log(img)
349351
}
350-
})
352+
});
353+
354+
function freestyle({ drawingArea, data }) {
355+
const marked = (data || []).filter(d => !!d?.marked)
356+
const markedPlots = marked[0]?.plots.filter(p => !!p?.v?.marked);
357+
const circles = (markedPlots || []).map(p => {
358+
return `
359+
<g style="pointer-events: none;">
360+
<circle
361+
cx="${p?.x}"
362+
cy="${p?.y}"
363+
r="20"
364+
stroke="#FF0000"
365+
fill="none"
366+
/>
367+
<path
368+
d="M${p?.x - 20},${p?.y} ${p?.x - 5},${p?.y} M${p?.x},${p?.y - 20} ${p?.x},${p?.y - 5} M${p?.x + 20},${p?.y} ${p?.x + 5},${p?.y} M${p?.x},${p?.y + 20} ${p?.x},${p?.y + 5}"
369+
stroke="#FF0000"
370+
/>
371+
</g>
372+
`
373+
})
374+
return circles;
375+
}
351376
352377
</script>
353378
@@ -367,6 +392,10 @@ onMounted(async () => {
367392
responsive: true
368393
}">
369394
395+
<template #svg="{ svg }">
396+
<g v-html="freestyle(svg)" />
397+
</template>
398+
370399
<!-- <template #chart-background>
371400
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
372401
</template> -->

‎TestingArena/ArenaVueUiStackbar.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ const dataset = ref([
3232
{
3333
name: "Series 1",
3434
series: makeDs(100),
35+
marked: true
3536
},
3637
{
3738
name: "Series 2",
3839
series: makeDs(100),
40+
marked: true
3941
},
4042
{
4143
name: "Series 3",
@@ -390,6 +392,37 @@ const selectedX = ref(undefined);
390392
function selectX({ datapoint, index, indexLabel}) {
391393
selectedX.value = index;
392394
}
395+
396+
function freestyle({ drawingArea, data }) {
397+
const marked = data?.filter(d => !!d.marked);
398+
const paths = marked.map((m, i) => {
399+
const dp = m ?? {x: [], y: []};
400+
const minY = Math.min(...dp?.y);
401+
const minX = dp.x[dp.y.indexOf(minY)];
402+
const maxY = Math.max(...dp?.y);
403+
const maxX = dp.x[dp.y.indexOf(maxY)];
404+
return `
405+
<defs>
406+
<marker
407+
id="arrow_${i}"
408+
viewBox="0 0 10 10"
409+
refX="5"
410+
refY="5"
411+
markerWidth="6"
412+
markerHeight="6"
413+
orient="auto-start-reverse">
414+
<path d="M 0 0 L 10 5 L 0 10 z" />
415+
</marker>
416+
</defs>
417+
<path
418+
d="M${minX > maxX ? `${maxX},${maxY} ${minX},${minY}` : `${minX},${minY} ${maxX},${maxY}`}"
419+
stroke="#000000"
420+
marker-end="url(#arrow_${i})"
421+
/>
422+
`
423+
});
424+
return paths;
425+
}
393426
394427
</script>
395428
@@ -404,6 +437,10 @@ function selectX({ datapoint, index, indexLabel}) {
404437
<LocalVueUiStackbar @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="{...config,
405438
responsive: true,
406439
}" @selectTimeLabel="selectTimeLabel">
440+
<template #svg="{ svg }">
441+
<g v-html="freestyle(svg)"/>
442+
</template>
443+
407444
<template #chart-background>
408445
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
409446
</template>

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,10 @@ onMounted(() => {
402402
dataLabels: false,
403403
smooth: true,
404404
useArea: true,
405-
useProgression: true
405+
useProgression: true,
406+
// freestyle:
407+
marks: [10, 20],
408+
annotated: true
406409
},
407410
// {
408411
// name: "Serie A",
@@ -1239,10 +1242,36 @@ onMounted(async () => {
12391242
const data = await vduiLocal.value.getData()
12401243
console.log(data)
12411244
const img = await vduiLocal.value.getImage({ scale: 4 });
1242-
console.log(img)
12431245
}
12441246
})
12451247
1248+
// Basically any content can be jazzed onto the chart :)
1249+
function freestyle({ data, drawingArea }) {
1250+
const annotated = data.filter(d => !!d.annotated);
1251+
const points = (annotated[0]?.plots || []).filter((_, i) => annotated[0].marks.includes(i));
1252+
1253+
return `
1254+
<g>
1255+
<line
1256+
x1="${points[0]?.x}"
1257+
x2="${points[0]?.x}"
1258+
y1="${drawingArea.top}"
1259+
y2="${drawingArea.bottom}"
1260+
stroke="black"
1261+
stroke-width="3"
1262+
/>
1263+
<text
1264+
x="${points[0]?.x + 12}"
1265+
y="${drawingArea.top + 12}"
1266+
fill="red"
1267+
font-size="16"
1268+
>
1269+
This is awesome
1270+
</text>
1271+
</g>
1272+
`
1273+
}
1274+
12461275
</script>
12471276
12481277
<template>
@@ -1268,6 +1297,14 @@ onMounted(async () => {
12681297
responsive: true,
12691298
}" @selectTimeLabel="selectTimeLabel">
12701299
1300+
<template #svg="{ svg }">
1301+
<g>
1302+
<!-- <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
1303+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text> -->
1304+
<g v-html="freestyle(svg)"/>
1305+
</g>
1306+
</template>
1307+
12711308
<template #area-gradient="{ series, id }">
12721309
<linearGradient :id="id" x1="0" x2="0" y1="0" y2="1">
12731310
<stop offset="0%" :stop-color="series.color"/>

0 commit comments

Comments
 (0)