[#1011][3.0] Chart > Scatter Chart 데이터 구조 변경

###################################### - Chart Data > label, group 옵션 제거 - Chart Option > Indicator 옵션 제거 - Chart Option > Tooltip 기능 추가 및 기본값 false - data를 { x: Number, y: Number, color: String} 형태로 받도록 구조 변경 - 관련 문서 수정 - Sample Docs 코드 수정 - EVUI 버전 업데이트 (3.1.56 -> 3.2.0)
ex-em · Jan 11, 2022 · f96ad94 · f96ad94
1 parent 5a082c0
commit f96ad94
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 75 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.1.56",
+  "version": "3.2.0",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = {