Skip to content

Commit 2f5bc77

Browse files
graphierosgraphieros
committed
VueUiXy add highlight area in canvas mode
1 parent cc5d531 commit 2f5bc77

File tree

4 files changed

+146
-45
lines changed

4 files changed

+146
-45
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: 2 additions & 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.9.10",
4+
"version": "1.9.11",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -55,6 +55,7 @@
5555
"dev": "vite",
5656
"clean": "node cleanup.cjs",
5757
"build": "npm run clean && vite build --mode production && node copy-types.cjs && npm i",
58+
"build:dev": "npm run build && npm run dev",
5859
"preview": "vite preview",
5960
"test": "vitest",
6061
"test:e2e": "npx cypress open"

‎src/App.vue‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,33 +46,45 @@ const dataset = ref([
4646
},
4747
]);
4848
const dataset2 = ref([
49-
{
50-
name: "Series 3",
51-
series: [
52-
-55,
53-
34,
54-
-21,
55-
13,
56-
-8,
57-
5,
58-
-3,
59-
2,
60-
-1,
61-
1,
62-
0,
63-
1,
64-
1,
65-
2,
66-
3,
67-
5,
68-
8,
69-
13,
70-
21,
71-
34,
72-
55,
73-
],
74-
type: "line",
75-
},
49+
{
50+
name: "Series 1",
51+
series: [ -55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
52+
type: "bar",
53+
color: "rgb(95,139,238)"
54+
},
55+
{
56+
name: "Series 2",
57+
series: [ 55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0, -1, -1, -2, -3, -5, -8, -13, -21, -34, -55],
58+
type: "line",
59+
color: "rgb(66,211,146)",
60+
useArea: true,
61+
useProgression: true,
62+
dataLabels: false,
63+
},
64+
{
65+
name: "Series 3",
66+
series: [ 64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
67+
type: "plot",
68+
color: "rgb(255,100,0)"
69+
},
70+
{
71+
name: "Series 4",
72+
series: [ 0, 1, -2, 3, -4, 5, -6, 7, -8, 9, -10, 11, -12, 13, -14, 15, -16, 17, -18, 19, -20],
73+
type: "line",
74+
smooth: true,
75+
useArea: false,
76+
dataLabels: false,
77+
color: "rgb(200,200,50)"
78+
},
79+
{
80+
name: "Target",
81+
series: [ 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
82+
type: "line",
83+
color: "#404040",
84+
dashed: true,
85+
useTag: "start",
86+
dataLabels: false,
87+
},
7688
]);
7789
7890
const config = ref({
@@ -3493,7 +3505,7 @@ const showLocalTest = ref(false);
34933505
<template #dev>
34943506
<XyTest
34953507
ref="xytest"
3496-
:config="{ ...config, useCanvas: false }"
3508+
:config="{ ...config, useCanvas: true }"
34973509
:dataset="dataset2"
34983510
@selectLegend="selectLegendXY"
34993511
@selectX="selectX"
@@ -3502,7 +3514,7 @@ const showLocalTest = ref(false);
35023514
<template #prod>
35033515
<VueUiXy
35043516
ref="xytest"
3505-
:config="{ ...config, useCanvas: false, useCssAnimation: false }"
3517+
:config="{ ...config, useCanvas: true, useCssAnimation: false }"
35063518
:dataset="dataset2"
35073519
@selectLegend="selectLegendXY"
35083520
@selectX="selectX"

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

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1203,18 +1203,100 @@ export default {
12031203
this.drawCanvasPlots();
12041204
}
12051205
1206+
if (this.chartConfig.chart.highlightArea.show) {
1207+
this.drawHighlightArea();
1208+
}
1209+
12061210
if (this.chartConfig.chart.title.show && this.mutableConfig.titleInside) {
12071211
this.drawCanvasTitle();
12081212
if (this.chartConfig.chart.title.subtitle.text) {
12091213
this.drawCanvasSubtitle();
12101214
}
12111215
}
1216+
1217+
if (this.chartConfig.chart.highlightArea.show) {
1218+
this.CTX.save();
1219+
this.CTX.beginPath();
1220+
this.CTX.fillStyle = this.chartConfig.chart.backgroundColor;
1221+
this.CTX.rect(
1222+
0,
1223+
this.drawingArea.top,
1224+
this.drawingArea.left - 1,
1225+
this.drawingArea.height
1226+
);
1227+
this.CTX.fill();
1228+
this.CTX.rect(
1229+
this.drawingArea.right + 1,
1230+
this.drawingArea.top,
1231+
this.chartConfig.chart.width - this.drawingArea.left - 1,
1232+
this.drawingArea.height
1233+
);
1234+
this.CTX.fill();
1235+
this.CTX.closePath();
1236+
this.CTX.fillStyle = this.chartConfig.chart.grid.labels.color;
1237+
this.CTX.restore()
1238+
this.drawCanvasAxisYLabel();
1239+
this.drawCanvasYLabels();
1240+
}
12121241
12131242
if (this.isInsideCanvas) {
12141243
this.drawCanvasTooltip();
12151244
this.drawCanvasSelector();
12161245
}
12171246
},
1247+
wrapText(text, x, y, maxWidth, lineHeight) {
1248+
let words = text.split(' ');
1249+
let line = '';
1250+
let testLine = '';
1251+
let lineArray = [];
1252+
1253+
for(let n = 0; n < words.length; n++) {
1254+
testLine += `${words[n]} `;
1255+
let metrics = this.CTX.measureText(testLine);
1256+
let testWidth = metrics.width;
1257+
if (testWidth > maxWidth && n > 0) {
1258+
lineArray.push([line, x, y]);
1259+
y += lineHeight
1260+
line = `${words[n]} `;
1261+
testLine = `${words[n]} `;
1262+
}
1263+
else {
1264+
line += `${words[n]} `;
1265+
}
1266+
if(n === words.length - 1) {
1267+
lineArray.push([line, x, y]);
1268+
}
1269+
}
1270+
return lineArray;
1271+
},
1272+
drawHighlightArea() {
1273+
this.CTX.fillStyle = `${this.chartConfig.chart.highlightArea.color}${opacity[this.chartConfig.chart.highlightArea.opacity]}`;
1274+
const x = this.drawingArea.left + (this.drawingArea.width / this.maxSeries) * (this.chartConfig.chart.highlightArea.from - (this.slicer.start));
1275+
const y = this.drawingArea.top;
1276+
const height = this.drawingArea.height;
1277+
const width = (this.drawingArea.width / this.maxSeries) * this.highlightAreaSpan;
1278+
this.CTX.rect(x, y, width, height);
1279+
this.CTX.fill();
1280+
1281+
this.CTX.font = `${this.chartConfig.chart.highlightArea.caption.bold ? 'bold' : ''} ${this.chartConfig.chart.highlightArea.caption.fontSize}px ${this.chartFont}`;
1282+
this.CTX.fillStyle = this.chartConfig.chart.highlightArea.caption.color;
1283+
this.CTX.textAlign = 'center';
1284+
1285+
const textWidth = this.chartConfig.chart.highlightArea.caption.width === 'auto' ? (this.drawingArea.width / this.maxSeries) * this.highlightAreaSpan : this.chartConfig.chart.highlightArea.caption.width;
1286+
1287+
const wrappedText = this.wrapText(
1288+
this.chartConfig.chart.highlightArea.caption.text,
1289+
x + width / 2,
1290+
this.drawingArea.top + this.chartConfig.chart.highlightArea.caption.offsetY + this.chartConfig.chart.highlightArea.caption.fontSize + this.chartConfig.chart.highlightArea.caption.padding,
1291+
textWidth - this.chartConfig.chart.highlightArea.caption.padding * 2,
1292+
this.chartConfig.chart.highlightArea.caption.fontSize * 1.3
1293+
);
1294+
1295+
1296+
wrappedText.forEach(line => {
1297+
this.CTX.fillText(line[0], line[1], line[2]);
1298+
});
1299+
},
12181300
drawCanvasSelector() {
12191301
this.CTX.save();
12201302
const zoneWidth = this.maxSlot;
@@ -1534,9 +1616,8 @@ export default {
15341616
}
15351617
this.CTX.restore();
15361618
},
1537-
drawCanvasAxisLabels() {
1538-
if (this.chartConfig.chart.grid.labels.axis.yLabel) {
1539-
const x = 0;
1619+
drawCanvasAxisYLabel() {
1620+
const x = 0;
15401621
const y = this.drawingArea.height / 2;
15411622
this.CTX.save();
15421623
this.CTX.translate(x,y);
@@ -1550,18 +1631,25 @@ export default {
15501631
15
15511632
)
15521633
this.CTX.restore();
1634+
},
1635+
drawCanvasAxisXLabel() {
1636+
this.CTX.save();
1637+
this.CTX.font = `${this.chartConfig.chart.grid.labels.axis.fontSize}px ${this.chartFont}`;
1638+
this.CTX.fillStyle = this.chartConfig.chart.grid.labels.color;
1639+
this.CTX.textAlign = "center";
1640+
this.CTX.fillText(
1641+
this.chartConfig.chart.grid.labels.axis.xLabel,
1642+
this.chartConfig.chart.width / 2,
1643+
this.drawingArea.bottom + this.chartConfig.chart.grid.labels.axis.fontSize + this.chartConfig.chart.grid.labels.xAxisLabels.fontSize * 1.3
1644+
)
1645+
this.CTX.restore();
1646+
},
1647+
drawCanvasAxisLabels() {
1648+
if (this.chartConfig.chart.grid.labels.axis.yLabel) {
1649+
this.drawCanvasAxisYLabel();
15531650
}
15541651
if (this.chartConfig.chart.grid.labels.axis.xLabel) {
1555-
this.CTX.save();
1556-
this.CTX.font = `${this.chartConfig.chart.grid.labels.axis.fontSize}px ${this.chartFont}`;
1557-
this.CTX.fillStyle = this.chartConfig.chart.grid.labels.color;
1558-
this.CTX.textAlign = "center";
1559-
this.CTX.fillText(
1560-
this.chartConfig.chart.grid.labels.axis.xLabel,
1561-
this.chartConfig.chart.width / 2,
1562-
this.drawingArea.bottom + this.chartConfig.chart.grid.labels.axis.fontSize + this.chartConfig.chart.grid.labels.xAxisLabels.fontSize * 1.3
1563-
)
1564-
this.CTX.restore();
1652+
this.drawCanvasAxisXLabel();
15651653
}
15661654
},
15671655
drawCanvasGrid() {

0 commit comments

Comments
 (0)