Skip to content

Commit dd79571

Browse files
graphierosgraphieros
committed
VueUiXy add option to display line types as areas
1 parent bddde60 commit dd79571

File tree

6 files changed

+88
-27
lines changed

6 files changed

+88
-27
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.8.6",
4+
"version": "1.8.7",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const dataset2 = ref([
116116
34,
117117
55,
118118
],
119+
useArea: true,
119120
type: "line",
120121
dashed: false,
121122
dataLabels: true,
@@ -155,6 +156,7 @@ const dataset2 = ref([
155156
30,
156157
30,
157158
],
159+
useArea: false,
158160
type: "line",
159161
dashed: true,
160162
color: "rgb(100,100,100)",
@@ -3376,6 +3378,25 @@ const showLocalTest = ref(false);
33763378
<button @click="printRelation">PRINT RELATION CIRCLE</button>
33773379
<button @click="printThermo">PRINT THERMO</button>
33783380

3381+
<div style="max-width: 1000px; margin: 0 auto">
3382+
<VueUiXy
3383+
ref="xytest"
3384+
:config="{ ...config, useCanvas: false }"
3385+
:dataset="dataset2"
3386+
v-if="!showLocalTest"
3387+
@selectLegend="selectLegendXY"
3388+
@selectX="selectX"
3389+
/>
3390+
<XyTest
3391+
ref="xytest"
3392+
:config="{ ...config, useCanvas: false }"
3393+
:dataset="dataset2"
3394+
v-if="showLocalTest"
3395+
@selectLegend="selectLegendXY"
3396+
@selectX="selectX"
3397+
/>
3398+
</div>
3399+
33793400
<div style="maw-width:300px;margin: 0 auto; margin-top: 24px; margin-bottom: 24px;">
33803401
<StackTest v-if="showLocalTest" :config="stackConfig" :dataset="stackDataset"/>
33813402
<VueUiSparkStackbar v-if="!showLocalTest" :config="stackConfig" :dataset="stackDataset"/>
@@ -3395,24 +3416,6 @@ const showLocalTest = ref(false);
33953416
/>
33963417
<VueUiRelationCircle ref="relation" v-if="!showLocalTest" :dataset="relationDataset" :config="relationConfig"/>
33973418
</div>
3398-
<div style="max-width: 1000px; margin: 0 auto">
3399-
<VueUiXy
3400-
ref="xytest"
3401-
:config="{ ...config, useCanvas: true }"
3402-
:dataset="dataset2"
3403-
v-if="!showLocalTest"
3404-
@selectLegend="selectLegendXY"
3405-
@selectX="selectX"
3406-
/>
3407-
<XyTest
3408-
ref="xytest"
3409-
:config="{ ...config, useCanvas: true }"
3410-
:dataset="dataset2"
3411-
v-if="showLocalTest"
3412-
@selectLegend="selectLegendXY"
3413-
@selectX="selectX"
3414-
/>
3415-
</div>
34163419
<div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
34173420
<VueUiSkeleton
34183421
v-if="!showLocalTest"

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

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@
123123
<stop offset="0%" :stop-color="`${shiftHue(serie.color, 0.05)}`"/>
124124
<stop offset="100%" :stop-color="serie.color" />
125125
</radialGradient>
126+
<linearGradient :id="`areaGradient_${i}_${uniqueId}`" x1="0%" x2="100%" y1="0%" y2="0%">
127+
<stop offset="0%" :stop-color="`${shiftHue(serie.color, 0.03)}${opacity[chartConfig.line.area.opacity]}`"/>
128+
<stop offset="100%" :stop-color="`${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
129+
</linearGradient>
126130
</defs>
127131
</template>
128132

@@ -222,7 +226,10 @@
222226
</g>
223227

224228
<!-- LINES -->
225-
<g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`">
229+
<g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`">
230+
<g v-if="serie.useArea">
231+
<path :d="`M${serie.area}Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
232+
</g>
226233
<g v-for="(plot, j) in serie.plots" :key="`line_${i}_${j}`">
227234
<line
228235
v-if="j < serie.plots.length - 1 && canShowValue(plot.value) && canShowValue(serie.plots[j+1].value)"
@@ -743,15 +750,17 @@ export default {
743750
},
744751
lineSet() {
745752
return this.absoluteDataset.filter(s => s.type === 'line').filter(s => !this.segregatedSeries.includes(s.id)).map((datapoint) => {
746-
return {
747-
...datapoint,
748-
plots: datapoint.series.map((plot, j) => {
753+
const plots = datapoint.series.map((plot, j) => {
749754
return {
750755
x: (this.drawingArea.left + (this.slot.line/2)) + (this.slot.line * j),
751756
y: this.drawingArea.bottom - (this.drawingArea.height * this.ratioToMax(plot)),
752757
value: datapoint.absoluteValues[j],
753758
}
754-
})
759+
});
760+
return {
761+
...datapoint,
762+
plots,
763+
area: !datapoint.useArea ? '' : this.createArea(plots)
755764
}
756765
})
757766
},
@@ -1058,7 +1067,29 @@ export default {
10581067
adaptColorToBackground,
10591068
calcLinearProgression,
10601069
useMouse,
1070+
createArea(plots) {
1071+
const start = { x: plots[0].x, y: this.zero };
1072+
const end = { x: plots.at(-1).x, y: this.zero };
1073+
const path = [];
1074+
plots.forEach(plot => {
1075+
path.push(`${plot.x},${plot.y} `);
1076+
});
1077+
return [ start.x, start.y, ...path, end.x, end.y].toString();
1078+
},
10611079
/////////////////////////////// CANVAS /////////////////////////////////
1080+
createCanvasArea(plots) {
1081+
const start = { x: plots[0].x, y: this.zero };
1082+
const end = { x: plots.at(-1).x, y: this.zero };
1083+
const path = [];
1084+
plots.forEach(plot => {
1085+
path.push({
1086+
x: plot.x,
1087+
y: plot.y,
1088+
value: plot.value
1089+
})
1090+
});
1091+
return [ start, ...path, end];
1092+
},
10621093
drawCanvas() {
10631094
this.CANVAS = this.$refs.vueUiXyCanvas;
10641095
this.CTX = this.CANVAS.getContext("2d");
@@ -1226,6 +1257,25 @@ export default {
12261257
this.CTX.save();
12271258
for (let i = 0; i < this.lineSet.length; i += 1) {
12281259
const serie = this.lineSet[i];
1260+
if (serie.useArea) {
1261+
this.CTX.save();
1262+
const area = this.createCanvasArea(serie.plots);
1263+
if (area.length > 1) {
1264+
const areaGradient = this.CTX.createLinearGradient(area[0].x, 0, area.at(-1).x, 0);
1265+
areaGradient.addColorStop(0, `${this.shiftHue(serie.color, 0.03)}${this.opacity[this.chartConfig.line.area.opacity]}`);
1266+
areaGradient.addColorStop(1, `${serie.color}${this.opacity[this.chartConfig.line.area.opacity]}`);
1267+
this.CTX.beginPath();
1268+
this.CTX.moveTo(area[0].x, area[0].y);
1269+
for(let k = 1; k < area.length; k += 1) {
1270+
this.CTX.lineTo(area[k].x, area[k].y);
1271+
}
1272+
this.CTX.fillStyle = this.chartConfig.line.area.useGradient ? areaGradient : `${serie.color}${this.opacity[this.chartConfig.line.area.opacity]}`;
1273+
this.CTX.fill();
1274+
this.CTX.closePath();
1275+
this.CTX.restore();
1276+
}
1277+
}
1278+
12291279
for (let k = 0; k < serie.plots.length; k += 1) {
12301280
const plot = serie.plots[k];
12311281
if (k < serie.plots.length - 1 && this.canShowValue(plot.value) && this.canShowValue(serie.plots[k + 1].value)) {

‎src/default_configs.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,8 +269,11 @@
269269
"offsetY": -6,
270270
"rounding": 0,
271271
"color": "#2D353C"
272+
},
273+
"area": {
274+
"useGradient": true,
275+
"opacity": 30
272276
}
273-
274277
},
275278
"plot": {
276279
"radius": 3,

‎types/vue-data-ui.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,10 @@ declare module 'vue-data-ui' {
10041004
rounding?: number;
10051005
color?: string;
10061006
};
1007+
area?: {
1008+
useGradient?: boolean;
1009+
opacity?: number;
1010+
}
10071011
};
10081012
plot?: {
10091013
radius?: number;
@@ -1038,6 +1042,7 @@ declare module 'vue-data-ui' {
10381042
color?: string;
10391043
dashed?: boolean;
10401044
useTag?: "start" | "end";
1045+
useArea?: boolean;
10411046
dataLabels?: boolean;
10421047
useProgression?: boolean;
10431048
};

0 commit comments

Comments
 (0)