|
626 | 626 |
|
627 | 627 | <g v-if="serie.useArea && serie.plots.length > 1"> |
628 | 628 | <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> |
636 | 640 | </template> |
637 | 641 | <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> |
640 | 654 | </template> |
641 | 655 | </g> |
642 | 656 |
|
@@ -1588,6 +1602,12 @@ import { |
1588 | 1602 | objectIsEmpty, |
1589 | 1603 | themePalettes, |
1590 | 1604 | translateSize, |
| 1605 | + createSmoothPathWithCuts, |
| 1606 | + createStraightPathWithCuts, |
| 1607 | + createAreaWithCuts, |
| 1608 | + createIndividualAreaWithCuts, |
| 1609 | + createSmoothAreaSegments, |
| 1610 | + createIndividualArea |
1591 | 1611 | } from '../lib'; |
1592 | 1612 | import themes from "../themes.json"; |
1593 | 1613 | import DataTable from "../atoms/DataTable.vue"; |
@@ -2248,10 +2268,21 @@ export default { |
2248 | 2268 | } |
2249 | 2269 | }) |
2250 | 2270 |
|
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)); |
2255 | 2286 |
|
2256 | 2287 | const scaleYLabels = individualScale.ticks.map(t => { |
2257 | 2288 | return { |
@@ -2299,11 +2330,37 @@ export default { |
2299 | 2330 | zeroPosition: datapoint.autoScaling ? autoScaleZeroPosition : zeroPosition, |
2300 | 2331 | curve: datapoint.autoScaling ? autoScaleCurve : curve, |
2301 | 2332 | 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), |
2303 | 2360 | straight: datapoint.autoScaling ? autoScaleStraight : straight, |
2304 | 2361 | groupId: this.scaleGroups[datapoint.scaleLabel].groupId |
2305 | 2362 | } |
2306 | | - }) |
| 2363 | + }); |
2307 | 2364 | }, |
2308 | 2365 | plotSet() { |
2309 | 2366 | return this.activeSeriesWithStackRatios.filter(s => s.type === 'plot').map((datapoint) => { |
@@ -2784,6 +2841,12 @@ export default { |
2784 | 2841 | useNestedProp, |
2785 | 2842 | createUid, |
2786 | 2843 | placeXYTag, |
| 2844 | + createSmoothPathWithCuts, |
| 2845 | + createStraightPathWithCuts, |
| 2846 | + createAreaWithCuts, |
| 2847 | + createIndividualAreaWithCuts, |
| 2848 | + createSmoothAreaSegments, |
| 2849 | + createIndividualArea, |
2787 | 2850 | hideTags() { |
2788 | 2851 | const tags = document.querySelectorAll('.vue-ui-xy-tag') |
2789 | 2852 | if (tags.length) { |
@@ -3098,26 +3161,17 @@ export default { |
3098 | 3161 | } |
3099 | 3162 | } |
3100 | 3163 | }, |
3101 | | - createArea(plots) { |
| 3164 | + createArea(plots, yOffset) { |
| 3165 | + const zero = this.mutableConfig.isStacked ? this.drawingArea.bottom - yOffset : this.drawingArea.bottom; |
3102 | 3166 | 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 }; |
3105 | 3169 | const path = []; |
3106 | 3170 | plots.forEach(plot => { |
3107 | 3171 | path.push(`${plot.x},${plot.y} `); |
3108 | 3172 | }); |
3109 | 3173 | return [ start.x, start.y, ...path, end.x, end.y].toString(); |
3110 | 3174 | }, |
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 | | - }, |
3121 | 3175 | createStar, |
3122 | 3176 | createPolygonPath, |
3123 | 3177 | fillArray(len, source) { |
|
0 commit comments