Skip to content

Commit 2fe3400

Browse files
graphierosgraphieros
committed
Improvement - VueUiXy - Add config option to cut out null values from lines and areas
1 parent a363ab0 commit 2fe3400

File tree

8 files changed

+1171
-38
lines changed

8 files changed

+1171
-38
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels, toggleSta
1111
function createDs(n,m=100) {
1212
const arr = [];
1313
for(let i = 0; i < n; i += 1) {
14-
arr.push(Math.random()*m)
14+
if ([7,8,9].includes(i)) {
15+
arr.push(null)
16+
} else {
17+
arr.push(Math.random()*m * (i % 2 === 0 ? -1 : 1))
18+
}
1519
}
1620
return arr
1721
}
@@ -45,16 +49,16 @@ function createDs(n,m=100) {
4549
const dataset = ref([
4650
{
4751
name: "Curved",
48-
series: createDs(120),
49-
type: "plot",
50-
smooth: false,
52+
series: createDs(12),
53+
type: "line",
54+
smooth: true,
5155
useArea: true,
5256
useTag: 'start',
5357
dataLabels: false,
5458
},
5559
{
5660
name: "Curved",
57-
series: createDs(120),
61+
series: createDs(12),
5862
type: "line",
5963
smooth: false,
6064
useArea: true,
@@ -407,6 +411,8 @@ const model = ref([
407411
{ key: 'line.radius', def: 6, type: 'number', min: 0, max: 20, label: 'radius', category: 'line' },
408412
{ key: 'line.useGradient', def: false, type: 'checkbox', label: 'useGradient', category: 'line' },
409413
{ key: 'line.strokeWidth', def: 2, type: 'number', min: 1, max: 20, label: 'thickness', category: 'line' },
414+
{ key: 'line.cutNullValues', def: true, type: 'checkbox'},
415+
410416
{ key: 'line.labels.show', def: true, type: 'checkbox', label: 'showDataLabels', category: 'line' },
411417
{ key: 'line.labels.offsetY', def: -8, type: 'number', min: -100, max: 100, label: 'offsetYDataLabels', category: 'line' },
412418
{ key: 'line.labels.rounding', def: 0, type: 'number', min: 0, max: 6, label: 'rounding', category: 'line' },
@@ -525,7 +531,7 @@ const config = computed(() => {
525531
tag: {
526532
formatter: ({ value, config }) => {
527533
const { datapoint, seriesIndex, serieName } = config;
528-
console.log(datapoint, seriesIndex, serieName)
534+
// console.log(datapoint, seriesIndex, serieName)
529535
return `<div>${serieName}: <b>${value.toFixed(2)}</b></div>`
530536
}
531537
}
@@ -849,7 +855,7 @@ function selectTimeLabel(data) {
849855
</LocalVueDataUi>
850856
</template>
851857

852-
<template #build>
858+
<!-- <template #build>
853859
<VueUiXy :dataset="isPropsToggled ? alternateDataset : dataset" :config="isPropsToggled ? alternateConfig : config" :key="`build_${step}`" @selectLegend="selectLegend"
854860
@selectX="selectX" ref="build">
855861
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
@@ -951,7 +957,7 @@ function selectTimeLabel(data) {
951957
</div>
952958
</template>
953959
</VueDataUi>
954-
</template>
960+
</template> -->
955961

956962
<template #knobs>
957963
<div

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,4 @@
105105
"vitest": "^3.1.1",
106106
"vue": "^3.5.14"
107107
}
108-
}
108+
}

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const components = ref([ //------|
119119
* Modify the index to display a component
120120
* [0] = VueUiXy
121121
*/
122-
const selectedComponent = ref(components.value[34]);
122+
const selectedComponent = ref(components.value[0]);
123123
124124
/**
125125
* Legacy testing arena where some non chart components can be tested

‎src/components/vue-ui-xy.vue‎

Lines changed: 82 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -626,17 +626,31 @@
626626

627627
<g v-if="serie.useArea && serie.plots.length > 1">
628628
<template v-if="serie.smooth">
629-
<path
630-
:d="`M ${serie.plots[0] ? serie.plots[0].x : Math.min(...serie.plots.filter(p => !!p).map(p => p.x))},${mutableConfig.isStacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} ${serie.curve} L ${serie.plots.at(-1) ? serie.plots.at(-1).x : (drawingArea.left + (slot.line * i) + slot.line / 2)},${mutableConfig.isStacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} Z`" :fill="FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : setOpacity(serie.color, FINAL_CONFIG.line.area.opacity)"
631-
/>
632-
<path
633-
v-if="$slots.pattern"
634-
:d="`M ${serie.plots[0] ? serie.plots[0].x : Math.min(...serie.plots.filter(p => !!p).map(p => p.x))},${mutableConfig.isStacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} ${serie.curve} L ${serie.plots.at(-1) ? serie.plots.at(-1).x : (drawingArea.left + (slot.line * i) + slot.line / 2)},${mutableConfig.isStacked ? drawingArea.bottom - serie.yOffset : drawingArea.bottom} Z`" :fill="`url(#pattern_${uniqueId}_${serie.slotAbsoluteIndex})`"
635-
/>
629+
<template v-for="(d, segIndex) in serie.curveAreas" :key="segIndex">
630+
<path
631+
:d="d"
632+
:fill="FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : setOpacity(serie.color, FINAL_CONFIG.line.area.opacity)"
633+
/>
634+
<path
635+
v-if="$slots.pattern"
636+
:d="d"
637+
:fill="`url(#pattern_${uniqueId}_${serie.slotAbsoluteIndex})`"
638+
/>
639+
</template>
636640
</template>
637641
<template v-else>
638-
<path data-cy="datapoint-line-area-straight" :d="`M${serie.area}Z`" :fill="FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : setOpacity(serie.color, FINAL_CONFIG.line.area.opacity)"/>
639-
<path v-if="$slots.pattern" :d="`M${serie.area}Z`" :fill="`url(#pattern_${uniqueId}_${serie.slotAbsoluteIndex})`"/>
642+
<template v-for="(d, segIndex) in serie.area.split(';')" :key="segIndex">
643+
<path
644+
data-cy="datapoint-line-area-straight"
645+
:d="`M${d}Z`"
646+
:fill="FINAL_CONFIG.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : setOpacity(serie.color, FINAL_CONFIG.line.area.opacity)"
647+
/>
648+
<path
649+
v-if="$slots.pattern"
650+
:d="`M${d}Z`"
651+
:fill="`url(#pattern_${uniqueId}_${serie.slotAbsoluteIndex})`"
652+
/>
653+
</template>
640654
</template>
641655
</g>
642656

@@ -1588,6 +1602,12 @@ import {
15881602
objectIsEmpty,
15891603
themePalettes,
15901604
translateSize,
1605+
createSmoothPathWithCuts,
1606+
createStraightPathWithCuts,
1607+
createAreaWithCuts,
1608+
createIndividualAreaWithCuts,
1609+
createSmoothAreaSegments,
1610+
createIndividualArea
15911611
} from '../lib';
15921612
import themes from "../themes.json";
15931613
import DataTable from "../atoms/DataTable.vue";
@@ -2248,10 +2268,21 @@ export default {
22482268
}
22492269
})
22502270
2251-
const curve = this.createSmoothPath(plots.filter(p => p.value !== null));
2252-
const autoScaleCurve = this.createSmoothPath(autoScalePlots.filter(p => p.value !== null));
2253-
const straight = this.createStraightPath(plots.filter(p => p.value !== null));
2254-
const autoScaleStraight = this.createStraightPath(autoScalePlots.filter(p => p.value !== null));
2271+
const curve = this.FINAL_CONFIG.line.cutNullValues
2272+
? this.createSmoothPathWithCuts(plots)
2273+
: this.createSmoothPath(plots.filter(p => p.value !== null));
2274+
2275+
const autoScaleCurve = this.FINAL_CONFIG.line.cutNullValues
2276+
? this.createSmoothPathWithCuts(autoScalePlots)
2277+
: this.createSmoothPath(autoScalePlots.filter(p => p.value !== null));
2278+
2279+
const straight = this.FINAL_CONFIG.line.cutNullValues
2280+
? this.createStraightPathWithCuts(plots)
2281+
: this.createStraightPath(plots.filter(p => p.value !== null));
2282+
2283+
const autoScaleStraight = this.FINAL_CONFIG.line.cutNullValues
2284+
? this.createStraightPathWithCuts(autoScalePlots)
2285+
: this.createStraightPath(autoScalePlots.filter(p => p.value !== null));
22552286
22562287
const scaleYLabels = individualScale.ticks.map(t => {
22572288
return {
@@ -2299,11 +2330,37 @@ export default {
22992330
zeroPosition: datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition,
23002331
curve: datapoint.autoScaling ? autoScaleCurve : curve,
23012332
plots: datapoint.autoScaling ? autoScalePlots : plots,
2302-
area: !datapoint.useArea ? '' : this.mutableConfig.useIndividualScale ? this.createIndividualArea(datapoint.autoScaling ? autoScalePlots: plots, datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition) : this.createArea(plots),
2333+
area: !datapoint.useArea
2334+
? ''
2335+
: this.mutableConfig.useIndividualScale
2336+
? this.FINAL_CONFIG.line.cutNullValues
2337+
? this.createIndividualAreaWithCuts(datapoint.autoScaling
2338+
? autoScalePlots
2339+
: plots,
2340+
datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition,
2341+
)
2342+
: this.createIndividualArea(datapoint.autoScaling
2343+
? autoScalePlots.filter(p => p.value !== null)
2344+
: plots.filter(p => p.value !== null),
2345+
datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition,)
2346+
: this.createArea(plots.filter(p => p.value !== null), yOffset),
2347+
2348+
curveAreas: !datapoint.useArea
2349+
? []
2350+
:createSmoothAreaSegments(
2351+
datapoint.autoScaling
2352+
? this.FINAL_CONFIG.line.cutNullValues
2353+
? autoScalePlots
2354+
: autoScalePlots.filter(p => p.value !== null)
2355+
: this.FINAL_CONFIG.line.cutNullValues
2356+
? plots
2357+
: plots.filter(p => p.value !== null),
2358+
this.mutableConfig.useIndividualScale ? datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition : this.zero,
2359+
this.FINAL_CONFIG.line.cutNullValues),
23032360
straight: datapoint.autoScaling ? autoScaleStraight : straight,
23042361
groupId: this.scaleGroups[datapoint.scaleLabel].groupId
23052362
}
2306-
})
2363+
});
23072364
},
23082365
plotSet() {
23092366
return this.activeSeriesWithStackRatios.filter(s => s.type === 'plot').map((datapoint) => {
@@ -2784,6 +2841,12 @@ export default {
27842841
useNestedProp,
27852842
createUid,
27862843
placeXYTag,
2844+
createSmoothPathWithCuts,
2845+
createStraightPathWithCuts,
2846+
createAreaWithCuts,
2847+
createIndividualAreaWithCuts,
2848+
createSmoothAreaSegments,
2849+
createIndividualArea,
27872850
hideTags() {
27882851
const tags = document.querySelectorAll('.vue-ui-xy-tag')
27892852
if (tags.length) {
@@ -3098,26 +3161,17 @@ export default {
30983161
}
30993162
}
31003163
},
3101-
createArea(plots) {
3164+
createArea(plots, yOffset) {
3165+
const zero = this.mutableConfig.isStacked ? this.drawingArea.bottom - yOffset : this.drawingArea.bottom;
31023166
if(!plots[0]) return [-10,-10, '', -10, -10];
3103-
const start = { x: plots[0].x, y: this.zero };
3104-
const end = { x: plots.at(-1).x, y: this.zero };
3167+
const start = { x: plots[0].x, y: zero };
3168+
const end = { x: plots.at(-1).x, y: zero };
31053169
const path = [];
31063170
plots.forEach(plot => {
31073171
path.push(`${plot.x},${plot.y} `);
31083172
});
31093173
return [ start.x, start.y, ...path, end.x, end.y].toString();
31103174
},
3111-
createIndividualArea(plots, zero) {
3112-
if(!plots[0]) return [-10,-10, '', -10, -10];
3113-
const start = { x: plots[0] ? plots[0].x : Math.min(...plots.filter(p => !!p).map(p => p.x)), y: zero };
3114-
const end = { x: plots.at(-1) ? plots.at(-1).x : Math.min(...plots.filter(p => !!p).map(p => p.x)), y: zero };
3115-
const path = [];
3116-
plots.filter(p => !!p).forEach(plot => {
3117-
path.push(`${plot.x},${plot.y} `);
3118-
});
3119-
return [ start.x, start.y, ...path, end.x, end.y].toString();
3120-
},
31213175
createStar,
31223176
createPolygonPath,
31233177
fillArray(len, source) {

0 commit comments

Comments
 (0)