Skip to content

Commit a99db28

Browse files
graphierosgraphieros
committed
Improvement - VueUiScatter - Add performance mode for huge datasets
1 parent dc71957 commit a99db28

File tree

7 files changed

+345
-60
lines changed

7 files changed

+345
-60
lines changed

‎TestingArena/ArenaVueUiScatter.vue‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
1010
1111
const scat1 = computed(() => {
1212
const arr = [];
13-
for (let i = -100; i < 100; i += 1) {
13+
for (let i = -5000; i < 5000; i += 1) {
1414
arr.push({
15-
x: Math.random() * (Math.random() > 0.3 ? i / 3 : -i / 5),
16-
y: Math.random() * i / 20,
15+
x: Math.random() * (Math.random() > 0.5 ? i / 3 : -i / 3),
16+
y: Math.random() * (Math.random() > 0.5 ? i / 3 : -i / 3),
1717
name: `plot_${i}_cluster_1`
1818
});
1919
}
@@ -22,10 +22,10 @@ const scat1 = computed(() => {
2222
2323
const scat2 = computed(() => {
2424
const arr = [];
25-
for (let i = -100; i < 100; i += 1) {
25+
for (let i = -500; i < 500; i += 1) {
2626
arr.push({
27-
x: Math.random() * (Math.random() > 0.1 ? i / 10 : -i / 10),
28-
y: Math.random() * i / 10,
27+
x: Math.random() * (Math.random() > 0.5 ? i / 4 : -i / 4),
28+
y: Math.random() * (Math.random() > 0.5 ? i / 4 : -i / 4),
2929
name: `plot_${i}_cluster_2`,
3030
});
3131
}
@@ -37,17 +37,16 @@ const dataset = ref(undefined);
3737
onMounted(() => {
3838
setTimeout(() => {
3939
dataset.value = [
40-
{
41-
name: "Cluster 1",
42-
values: scat1.value,
43-
shape: "star",
44-
},
4540
{
4641
name: "Cluster 2",
4742
values: scat2.value,
48-
shape: "triangle",
49-
color: 'orange'
50-
}
43+
shape: "circle",
44+
},
45+
// {
46+
// name: "Cluster 1",
47+
// values: scat1.value,
48+
// shape: "star",
49+
// },
5150
]
5251
}, 2000)
5352
})
@@ -103,6 +102,7 @@ function alterDataset() {
103102
const model = ref([
104103
{ key: 'debug', def: true, type: 'checkbox'},
105104
{ key: 'loading', def: false, type: 'checkbox'},
105+
{ key: 'usePerformanceMode', def: true, type: 'checkbox'},
106106
{ key: 'responsive', def: false, type: 'checkbox'},
107107
{ key: 'userOptions.show', def: true, type: 'checkbox'},
108108
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
@@ -162,7 +162,7 @@ const model = ref([
162162
{ key: 'style.layout.plots.significance.opacity', def: 0.3, type: 'number', min: 0, max: 1, step: 0.01},
163163
{ key: 'style.layout.plots.deviation.translation', def: 'deviation', type: 'text'},
164164
{ key: 'style.layout.plots.deviation.roundingValue', def: 1, type: 'number', min: 0, max: 12},
165-
{ key: 'style.layout.plots.giftWrap.show', def: true, type: 'checkbox'},
165+
{ key: 'style.layout.plots.giftWrap.show', def: false, type: 'checkbox'},
166166
{ key: 'style.layout.plots.giftWrap.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
167167
{ key: 'style.layout.plots.giftWrap.strokeDasharray', def: 0, type: 'number', min: 0, max: 100},
168168
{ key: 'style.layout.plots.giftWrap.fillOpacity', def: 0.2, type: 'number', min: 0, max: 1, step: 0.01},
@@ -175,13 +175,13 @@ const model = ref([
175175
{ key: 'style.layout.plots.selectors.labels.rounding', def: 2, type: 'number', min: 0, max: 12},
176176
{ key: 'style.layout.plots.selectors.labels.bold', def: false, type: 'checkbox'},
177177
{ key: 'style.layout.plots.selectors.labels.showName', def: true, type: "checkbox"},
178-
{ key: 'style.layout.plots.selectors.labels.prefix', def: 'P', type: 'text'},
179-
{ key: 'style.layout.plots.selectors.labels.suffix', def: 'S', type: 'text'},
178+
{ key: 'style.layout.plots.selectors.labels.prefix', def: '', type: 'text'},
179+
{ key: 'style.layout.plots.selectors.labels.suffix', def: '', type: 'text'},
180180
{ key: 'style.layout.plots.selectors.markers.radius', def: 1.5, type: 'number', min: 0, max: 12, step: 0.5},
181181
{ key: 'style.layout.plots.selectors.markers.stroke', def: '#FFFFFF', type: 'color'},
182182
{ key: 'style.layout.plots.selectors.markers.strokeWidth', def: 0.5, type: 'number', min: 0, max: 12, step: 0.5},
183183
{ key: 'style.layout.plots.selectors.markers.fill', def: '#1A1A1A', type: 'color'},
184-
{ key: 'style.layout.correlation.show', def: true, type: 'checkbox'},
184+
{ key: 'style.layout.correlation.show', def: false, type: 'checkbox'},
185185
{ key: 'style.layout.correlation.strokeDasharray', def: 2, type: 'number', min: 0, max: 100},
186186
{ key: 'style.layout.correlation.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
187187
{ key: 'style.layout.correlation.label.show', def: true, type: 'checkbox'},
@@ -308,18 +308,18 @@ const config = computed(() => {
308308
...c.style.layout.plots.selectors,
309309
labels: {
310310
...c.style.layout.plots.selectors.labels,
311-
x: {
312-
formatter: ({value, config}) => {
313-
// console.log(config)
314-
return `X | ${value}`
315-
}
316-
},
317-
y: {
318-
formatter: ({value, config}) => {
319-
// console.log(config)
320-
return `Y | ${value}`
321-
}
322-
}
311+
// x: {
312+
// formatter: ({value, config}) => {
313+
// // console.log(config)
314+
// return `X | ${value}`
315+
// }
316+
// },
317+
// y: {
318+
// formatter: ({value, config}) => {
319+
// // console.log(config)
320+
// return `Y | ${value}`
321+
// }
322+
// }
323323
}
324324
}
325325
}

‎src/atoms/Legend.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function handleClick(legend, i) {
4242
>
4343
<slot name="legendTitle" :titleSet="legendSet"></slot>
4444
<div v-for="(legend, i) in legendSet" :key="`legend_${i}`" :class="{ 'vue-data-ui-legend-item': true, 'active': clickable }">
45-
<svg @click="handleClick(legend, i)" v-if="legend.shape" :height="config.fontSize" :width="config.fontSize" viewBox="0 0 60 60" :style="`overflow: visible;opacity:${legend.opacity}`">
45+
<svg @click="handleClick(legend, i)" v-if="legend.shape" :height="config.fontSize" :width="config.fontSize" viewBox="-8 -8 76 76" :style="`overflow: visible;opacity:${legend.opacity}`">
4646
<Shape
4747
:shape="legend.shape"
4848
:radius="30"

‎src/components/vue-ui-scatter.cy.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,36 @@ describe('<VueUiScatter />', () => {
5353
cy.get('[data-cy="correlation-label"]').should('exist').and('be.visible').and('have.length', dataset.length).and('contain', 1);
5454
});
5555
});
56+
57+
it('uses performance mode', () => {
58+
cy.mount(VueUiScatter, {
59+
props: {
60+
dataset,
61+
config: {
62+
...config,
63+
usePerformanceMode: true
64+
}
65+
}
66+
}).then(() => {
67+
cy.get('[data-cy="performance-path"]')
68+
.should('exist')
69+
.and('be.visible')
70+
.and('have.length', 2);
71+
72+
testCommonFeatures({
73+
userOptions: true,
74+
title: true,
75+
subtitle: true,
76+
dataTable: true,
77+
legend: true,
78+
tooltipCallback: () => {
79+
cy.get('[data-cy="performance-trap"]')
80+
.trigger('mousemove', { force: true, x: 38, y: 9 });
81+
}
82+
});
83+
cy.get('[data-cy="performance-selected-plot"]')
84+
.should('exist')
85+
.and('be.visible');
86+
})
87+
})
5688
});

0 commit comments

Comments
 (0)