From f96ad9484dc1e1ad9910a6facbc08af7c40df26d Mon Sep 17 00:00:00 2001 From: jinhee park Date: Tue, 11 Jan 2022 15:07:42 +0900 Subject: [PATCH] =?UTF-8?q?[#1011][3.0]=20Chart=20>=20Scatter=20Chart=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20######################################=20-=20Chart?= =?UTF-8?q?=20Data=20>=20label,=20group=20=EC=98=B5=EC=85=98=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20-=20Chart=20Option=20>=20Indicator=20=EC=98=B5?= =?UTF-8?q?=EC=85=98=20=EC=A0=9C=EA=B1=B0=20-=20Chart=20Option=20>=20Toolt?= =?UTF-8?q?ip=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EA=B0=92=20false=20-=20data=EB=A5=BC=20{=20x?= =?UTF-8?q?:=20Number,=20y:=20Number,=20color:=20String}=20=ED=98=95?= =?UTF-8?q?=ED=83=9C=EB=A1=9C=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20-=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=88=98=EC=A0=95=20-=20Sample=20Docs=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20-=20EVUI=20=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20(3.1.56=20->?= =?UTF-8?q?=203.2.0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/views/scatterChart/api/scatterChart.md | 13 ++----- docs/views/scatterChart/example/Default.vue | 36 ++++++++++--------- docs/views/scatterChart/example/Event.vue | 26 +++++++------- docs/views/scatterChart/example/PlotLine.vue | 26 +++++++------- package.json | 2 +- src/components/chart/element/element.line.js | 1 - .../chart/element/element.scatter.js | 21 ++++++----- src/components/chart/model/model.store.js | 22 ++++++------ .../chart/plugins/plugins.interaction.js | 2 +- src/components/chart/uses.js | 8 ++++- 10 files changed, 82 insertions(+), 75 deletions(-) diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md index 1fbd3b034..1dc7611a3 100644 --- a/docs/views/scatterChart/api/scatterChart.md +++ b/docs/views/scatterChart/api/scatterChart.md @@ -16,7 +16,6 @@ |------------ |-----------|---------|-------------------------|---------------------------------------------------| | series | Object | {} | 특정 데이터에 대한 시리즈 옵션 | | | data | Object | {} | 차트에 표시할 시리즈 별 데이터 | | - | labels | Array | [] | 축의 각 눈금에 해당하는 명칭, line Chart 에서는 time만 인정 | | #### series | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | @@ -37,8 +36,8 @@ const chartData = series2: { name: 'series2', pointSize: 6, pointStyle: 'rect' }, }, data: { - series1: [[dayjs(time), 1], [dayjs(time).add(1, 'day'), 2], [dayjs(time).add(2, 'day'), 3]], - series2: [[dayjs(time), 4], [dayjs(time).add(1, 'day'), 5]], + series1: [{ x: dayjs(time), y: 1 }, { x: dayjs(time).add(1, 'day'), y: 2 }, { x: dayjs(time).add(2, 'day'), y: 3 }], + series2: [{ x: dayjs(time), y: 4 }, { x: dayjs(time).add(1, 'day'), y: 5, color: '#FF0000' }], }, }; ``` @@ -53,7 +52,6 @@ const chartData = | axesY | Object | 없음 | Y축에 대한 속성 | [상세](#axesx-axesy) | | title | Object | ([상세](#title)) | 차트 상단에 위치할 차트 제목 표시 여부 및 속성 | | | legend | Object | ([상세](#legend)) | 차트의 범례 표시 여부 및 속성 | | - | indicator | Object | ([상세](#indicator)) | 지표선 | | | dragSelection | Object | ([상세](#dragselection)) | drag-select의 사용 여부 | | | padding | Object | { top: 20, right: 2, left: 2, bottom: 4 } | 차트 내부 padding 값 | | tooltip | Object | ([상세](#tooltip)) | 차트에 마우스를 올릴 경우 툴팁 표시 여부 및 속성 | | @@ -150,13 +148,6 @@ const chartData = | width | Number | 140 | Legend의 넓이 *('left', 'right'의 경우 조절)* | | | height | Number | 24 | Legend의 높이 *('top', 'bottom'의 경우 조절)* | | | padding | Object | { top: 0, right: 0, left: 0, bottom: 0 } | Legend 내부 padding 값 | | - -#### indicator -| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | -| --- | ---- | ----- | --- | ----------| -| use | Boolean | true | indicator 사용 여부 | | -| color | Hex, RGB, RGBA Code(String) | '#EE7F44' | 색상 | | - #### dragSelection | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) | diff --git a/docs/views/scatterChart/example/Default.vue b/docs/views/scatterChart/example/Default.vue index af1f50475..e9fc2bc64 100644 --- a/docs/views/scatterChart/example/Default.vue +++ b/docs/views/scatterChart/example/Default.vue @@ -77,20 +77,28 @@ }, data: { series1: [ - [134, 51], [67, 59], [19, 49], [15, 63], [55, 53], - [161, 51], [167, 59], [159, 49], [157, 63], [155, 53], - [170, 59], [159, 47], [166, 69], [176, 66], [160, 75], - [172, 55], [170, 54], [172, 62], [153, 42], [160, 50], - [147, 49], [168, 49], [175, 73], [157, 47], [167, 68], - [159, 50], [175, 82], [166, 57], [176, 87], [170, 72], + { x: 134, y: 51 }, { x: 67, y: 59 }, { x: 19, y: 49 }, + { x: 15, y: 63 }, { x: 55, y: 53 }, { x: 161, y: 51 }, + { x: 167, y: 59 }, { x: 159, y: 49 }, { x: 157, y: 63 }, + { x: 155, y: 53 }, { x: 170, y: 59 }, { x: 159, y: 47 }, + { x: 166, y: 69 }, { x: 176, y: 66 }, { x: 160, y: 75 }, + { x: 172, y: 55 }, { x: 170, y: 54 }, { x: 172, y: 62 }, + { x: 153, y: 42 }, { x: 160, y: 50 }, { x: 147, y: 49 }, + { x: 168, y: 49 }, { x: 175, y: 73 }, { x: 157, y: 47 }, + { x: 167, y: 68 }, { x: 159, y: 50 }, { x: 175, y: 82 }, + { x: 166, y: 57 }, { x: 176, y: 87 }, { x: 170, y: 72 }, ], series2: [ - [9, 51], [72, 59], [0, 49], [57, 63], [15, 53], - [174, 65], [175, 71], [200, 80], [186, 72], [187, 78], - [181, 74], [184, 86], [184, 78], [175, 62], [184, 81], - [180, 76], [177, 83], [192, 90], [176, 74], [174, 71], - [184, 79], [192, 93], [171, 70], [173, 72], [176, 85], - [176, 78], [180, 77], [172, 66], [176, 86], [173, 81], + { x: 9, y: 51 }, { x: 72, y: 59 }, { x: 0, y: 49 }, + { x: 57, y: 63 }, { x: 15, y: 53 }, { x: 174, y: 65 }, + { x: 175, y: 71 }, { x: 200, y: 80, color: '#FF0000' }, { x: 186, y: 72 }, + { x: 187, y: 78 }, { x: 181, y: 74 }, { x: 184, y: 86 }, + { x: 184, y: 78 }, { x: 175, y: 62 }, { x: 184, y: 81 }, + { x: 180, y: 76 }, { x: 177, y: 83 }, { x: 192, y: 90, color: '#FF0000' }, + { x: 176, y: 74 }, { x: 174, y: 71 }, { x: 184, y: 79 }, + { x: 192, y: 93, color: '#FF0000' }, { x: 171, y: 70 }, { x: 173, y: 72 }, + { x: 176, y: 85 }, { x: 176, y: 78 }, { x: 180, y: 77 }, + { x: 172, y: 66 }, { x: 176, y: 86 }, { x: 173, y: 81 }, ], }, }); @@ -155,10 +163,6 @@ height: 24, padding: { top: 0, right: 0, bottom: 0, left: 0 }, }, - indicator: { - use: true, - color: '#EE7F44', - }, tooltip: { use: true, backgroundColor: '#4C4C4C', diff --git a/docs/views/scatterChart/example/Event.vue b/docs/views/scatterChart/example/Event.vue index 55532d3cc..6dea42bdc 100644 --- a/docs/views/scatterChart/example/Event.vue +++ b/docs/views/scatterChart/example/Event.vue @@ -54,23 +54,23 @@ }, data: { series1: [ - [currentTime, 1], - [currentTime.add(1, 'second'), 20], - [currentTime.add(1, 'second'), 30], - [currentTime.add(2, 'second'), 10], + { x: currentTime, y: 1 }, + { x: currentTime.add(1, 'second'), y: 20 }, + { x: currentTime.add(1, 'second'), y: 30 }, + { x: currentTime.add(2, 'second'), y: 10 }, ], series2: [ - [currentTime, 20], - [currentTime.add(2, 'second'), 20], - [currentTime.add(3, 'second'), 13], - [currentTime.add(4, 'second'), 1], + { x: currentTime, y: 20 }, + { x: currentTime.add(2, 'second'), y: 20 }, + { x: currentTime.add(3, 'second'), y: 13 }, + { x: currentTime.add(4, 'second'), y: 1 }, ], series3: [ - [currentTime, 30], - [currentTime.add(2, 'second'), 5], - [currentTime.add(3, 'second'), 23], - [currentTime.add(4, 'second'), 40], - [currentTime.add(4, 'second'), 20], + { x: currentTime, y: 30 }, + { x: currentTime.add(2, 'second'), y: 5 }, + { x: currentTime.add(3, 'second'), y: 23 }, + { x: currentTime.add(4, 'second'), y: 40 }, + { x: currentTime.add(4, 'second'), y: 20 }, ], }, }; diff --git a/docs/views/scatterChart/example/PlotLine.vue b/docs/views/scatterChart/example/PlotLine.vue index c0819fd53..43b53e7df 100644 --- a/docs/views/scatterChart/example/PlotLine.vue +++ b/docs/views/scatterChart/example/PlotLine.vue @@ -20,23 +20,23 @@ }, data: { series1: [ - [currentTime, 1], - [currentTime.subtract(1, 'second'), 20], - [currentTime.subtract(1, 'second'), 30], - [currentTime.subtract(2, 'second'), 10], + { x: currentTime, y: 1 }, + { x: currentTime.subtract(1, 'second'), y: 20 }, + { x: currentTime.subtract(1, 'second'), y: 30 }, + { x: currentTime.subtract(2, 'second'), y: 10 }, ], series2: [ - [currentTime, 20], - [currentTime.subtract(2, 'second'), 20], - [currentTime.subtract(3, 'second'), 13], - [currentTime.subtract(4, 'second'), 1], + { x: currentTime, y: 20 }, + { x: currentTime.subtract(2, 'second'), y: 20 }, + { x: currentTime.subtract(3, 'second'), y: 13 }, + { x: currentTime.subtract(4, 'second'), y: 1 }, ], series3: [ - [currentTime, 30], - [currentTime.subtract(2, 'second'), 5], - [currentTime.subtract(3, 'second'), 23], - [currentTime.subtract(5, 'second'), 40], - [currentTime.subtract(6, 'second'), 20], + { x: currentTime, y: 30 }, + { x: currentTime.subtract(2, 'second'), y: 5 }, + { x: currentTime.subtract(3, 'second'), y: 23 }, + { x: currentTime.subtract(5, 'second'), y: 40 }, + { x: currentTime.subtract(6, 'second'), y: 20 }, ], }, }; diff --git a/package.json b/package.json index f54552a74..6f2b9d26c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "evui", - "version": "3.1.56", + "version": "3.2.0", "description": "A EXEM Library project", "author": "exem ", "license": "MIT", diff --git a/src/components/chart/element/element.line.js b/src/components/chart/element/element.line.js index 4ecf00548..f60b7ef28 100644 --- a/src/components/chart/element/element.line.js +++ b/src/components/chart/element/element.line.js @@ -311,7 +311,6 @@ class Line { * @returns {array} */ findItems({ xsp, width }) { - console.log(this.data); const xep = xsp + width; return this.data.filter(seriesData => (xsp - 1 <= seriesData.xp) && (seriesData.xp <= xep + 1)); diff --git a/src/components/chart/element/element.scatter.js b/src/components/chart/element/element.scatter.js index 5232abc90..f08606dca 100644 --- a/src/components/chart/element/element.scatter.js +++ b/src/components/chart/element/element.scatter.js @@ -69,18 +69,19 @@ class Scatter { return item; }, this.data[0]); - const color = this.color; - const pointFillColor = this.pointFill; const getOpacity = (colorStr) => { const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1; return this.state === 'downplay' ? 0.1 : noneDownplayOpacity; }; - ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor)); - ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color)); - this.data.forEach((curr) => { if (curr.xp !== null && curr.yp !== null) { + const color = curr.dataColor || this.color; + ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color)); + + const pointFillColor = curr.dataColor || this.pointFill; + ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor)); + Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp); } }); @@ -120,11 +121,15 @@ class Scatter { ctx.save(); if (x !== null && y !== null) { - ctx.strokeStyle = Util.colorStringToRgba(this.color, 0); - ctx.fillStyle = Util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity); + const color = gdata.dataColor || this.color; + const pointFillColor = gdata.dataColor || this.pointFill; + + ctx.strokeStyle = Util.colorStringToRgba(color, 0); + + ctx.fillStyle = Util.colorStringToRgba(pointFillColor, this.highlight.maxShadowOpacity); Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, x, y); - ctx.fillStyle = this.color; + ctx.fillStyle = color; Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxSize, x, y); ctx.fillStyle = '#fff'; diff --git a/src/components/chart/model/model.store.js b/src/components/chart/model/model.store.js index b774e0a82..c00013efa 100644 --- a/src/components/chart/model/model.store.js +++ b/src/components/chart/model/model.store.js @@ -25,7 +25,7 @@ const modules = { const sData = data[sId]; if (series && sData) { - series.data = this.addSereisDSforScatter(sData); + series.data = this.addSeriesDSforScatter(sData); series.minMax = this.getSeriesMinMax(series.data); } }); @@ -272,18 +272,20 @@ const modules = { }, /** - * - * @param data + * Take data to create data for each series + * @param {array} data data array for each series + * @returns {array} data info added position and etc */ - addSereisDSforScatter(data) { - const sdata = []; + addSeriesDSforScatter(data) { + return data.map((item) => { + const ldata = item.x; + const gdata = { + value: item.y, + color: item?.color || null, + }; - data.forEach((curr) => { - const [ldata, gdata] = curr; - sdata.push(this.addData(gdata, ldata, gdata)); + return this.addData(gdata, ldata, gdata); }); - - return sdata; }, /** diff --git a/src/components/chart/plugins/plugins.interaction.js b/src/components/chart/plugins/plugins.interaction.js index 8d2fec657..66d3f7e33 100644 --- a/src/components/chart/plugins/plugins.interaction.js +++ b/src/components/chart/plugins/plugins.interaction.js @@ -62,7 +62,7 @@ const modules = { this.drawSelectionArea(this.dragInfoBackup); } - if (indicator.use && type !== 'pie') { + if (indicator.use && type !== 'pie' && type !== 'scatter') { this.drawIndicator(offset, indicator.color); } }; diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js index bc47d4896..078784ee2 100644 --- a/src/components/chart/uses.js +++ b/src/components/chart/uses.js @@ -98,7 +98,13 @@ const DEFAULT_DATA = { export const useModel = () => { const { emit } = getCurrentInstance(); - const getNormalizedOptions = options => defaultsDeep({}, options, DEFAULT_OPTIONS); + const getNormalizedOptions = (options) => { + if (options.type === 'scatter') { + DEFAULT_OPTIONS.tooltip.use = false; + } + + return defaultsDeep({}, options, DEFAULT_OPTIONS); + }; const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA); const eventListeners = {