From 2a288eb53b6028bdbcaf8cd09234fadb72fd1cc2 Mon Sep 17 00:00:00 2001 From: jinhee park Date: Tue, 19 Oct 2021 13:24:17 +0900 Subject: [PATCH] plot line test --- docs/views/lineChart/example/Default.vue | 34 ++++-- package-lock.json | 136 ++++++++++------------- src/components/chart/scale/scale.js | 41 +++++-- 3 files changed, 115 insertions(+), 96 deletions(-) diff --git a/docs/views/lineChart/example/Default.vue b/docs/views/lineChart/example/Default.vue index c6ad6dd2c..1f43eb095 100644 --- a/docs/views/lineChart/example/Default.vue +++ b/docs/views/lineChart/example/Default.vue @@ -21,17 +21,17 @@ setup() { const chartData = reactive({ series: { - series1: { name: 'series#1' }, - series2: { name: 'series#2' }, - series3: { name: 'series#3' }, - series4: { name: 'series#4' }, + series1: { name: 'series#1', point: false }, + // series2: { name: 'series#2' }, + // series3: { name: 'series#3' }, + // series4: { name: 'series#4' }, }, labels: [], data: { series1: [], - series2: [], - series3: [], - series4: [], + // series2: [], + // series3: [], + // series4: [], }, }); @@ -51,12 +51,32 @@ type: 'time', timeFormat: 'HH:mm:ss', interval: 'second', + plotLines: [{ + color: '#BC80BD', + lineWidth: 2, + value: 100.5, + lineStyle: 'dash', + }, { + color: '#FF00FF', + lineWidth: 2, + value: 340.5, + }], }], axesY: [{ type: 'linear', showGrid: true, startToZero: true, autoScaleRatio: 0.1, + plotLines: [{ + color: '#FF0000', + lineWidth: 2, + value: 60.5, + lineStyle: 'dash', + }, { + color: '#000000', + lineWidth: 2, + value: 50.5, + }], }], }; diff --git a/package-lock.json b/package-lock.json index 67969e1ef..bfb828f39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "evui", - "version": "3.1.13", + "version": "3.1.38", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2232,6 +2232,17 @@ "unique-filename": "^1.1.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -2274,6 +2285,18 @@ "supports-color": "^7.0.0" } }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "ssri": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz", @@ -2310,6 +2333,18 @@ "webpack-sources": "^1.4.3" } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.8.1", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz", + "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + } + }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -17473,6 +17508,11 @@ "@vue/shared": "3.0.4" } }, + "vue-class-component": { + "version": "7.2.6", + "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz", + "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==" + }, "vue-eslint-parser": { "version": "7.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz", @@ -17556,85 +17596,12 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.2.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz", - "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==", - "dev": true, - "optional": true, + "vue-property-decorator": { + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz", + "integrity": "sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==", "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - } + "vue-class-component": "^7.1.0" } }, "vue-resize-observer": { @@ -17681,6 +17648,17 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue3-observe-visibility": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/vue3-observe-visibility/-/vue3-observe-visibility-0.1.2.tgz", + "integrity": "sha512-Uh/PQin+E2aH2YsMxtTkFlI0gRxEP1pDJEKGKcvuxPDlqh+ZL0w0Xmu2a8+gQIdTmN15vRj8geHr/cU58tZVig==", + "requires": { + "core-js": "^3.6.5", + "vue": "^3.0.0-beta.1", + "vue-class-component": "^7.2.3", + "vue-property-decorator": "^8.4.2" + } + }, "vuex": { "version": "4.0.0-rc.2", "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0-rc.2.tgz", diff --git a/src/components/chart/scale/scale.js b/src/components/chart/scale/scale.js index 08eabdc82..0f7a37065 100644 --- a/src/components/chart/scale/scale.js +++ b/src/components/chart/scale/scale.js @@ -256,11 +256,6 @@ class Scale { }); } } - if (this.showIndicator) { - ctx.moveTo(linePosition, offsetPoint + 6); - ctx.lineTo(linePosition, offsetPoint); - } - if (ix !== 0 && this.showGrid) { ctx.moveTo(linePosition, offsetPoint); ctx.lineTo(linePosition, offsetCounterPoint); @@ -273,11 +268,6 @@ class Scale { linePosition += 1; } - if (this.showIndicator) { - ctx.moveTo(offsetPoint - 6, linePosition); - ctx.lineTo(offsetPoint, linePosition); - } - if (ix !== 0 && this.showGrid) { ctx.moveTo(offsetPoint, linePosition); ctx.lineTo(offsetCounterPoint, linePosition); @@ -287,6 +277,37 @@ class Scale { ctx.stroke(); ctx.closePath(); } + + // draw plot line + if (this.plotLines?.length) { + const padding = aliasPixel + 1; + + this.plotLines.forEach((plotLine) => { + const { color, lineWidth, lineStyle, value } = plotLine; + ctx.beginPath(); + ctx.save(); + ctx.lineWidth = lineWidth; + ctx.strokeStyle = color; + + if (lineStyle === 'dash') { + ctx.setLineDash([10, 5]); + } + + if (this.type === 'x') { + const dp = aPos.x1 + value; + ctx.moveTo(dp, aPos.y2 + padding); + ctx.lineTo(dp, aPos.y1 + padding); + } else { + const dp = aPos.y2 - value; + ctx.moveTo(aPos.x1 + padding, dp); + ctx.lineTo(aPos.x2 + padding, dp); + } + + ctx.stroke(); + ctx.restore(); + ctx.closePath(); + }); + } } }