evui 2.1.0 → 2.1.3

package/src/components/chart/model/model.series.js

@@ -1,38 +1,67 @@
 import Line from '../element/element.line';
 import Scatter from '../element/element.scatter';
 import Bar from '../element/element.bar';
+import TimeBar from '../element/element.bar.time';
+import Pie from '../element/element.pie';
 
-const module = {
-  createSeriesSet(series, defaultType) {
+const modules = {
+  /**
+   * Takes series information to create series list.
+   * @param {object}  series          chart series info
+   * @param {string}  defaultType     default series type in options
+   * @param {boolean} isHorizontal    determines if a horizontal option's value
+   *
+   * @returns {undefined}
+   */
+  createSeriesSet(series, defaultType, isHorizontal) {
     Object.keys(series).forEach((key, index) => {
       const type = series[key].type || defaultType;
       this.seriesList[key] = this.addSeries({
         type,
-        sId: key,
-        sOpt: series[key],
-        sIdx: index,
+        id: key,
+        opt: series[key],
+        index,
+        isHorizontal,
       });
     });
   },
 
+  /**
+   * Takes series information to create series list.
+   * @param {object} param   series info
+   *
+   * @returns {object} object for proper series type
+   */
   addSeries(param) {
-    const type = param.type;
-    const id = param.sId;
-    const opt = param.sOpt;
-    const idx = param.sIdx;
+    const { type, id, opt, index, isHorizontal } = param;
 
     if (type === 'line') {
-      return new Line(id, opt, idx);
+      this.seriesInfo.charts.line.push(id);
+      return new Line(id, opt, index);
     } else if (type === 'scatter') {
-      return new Scatter(id, opt, idx);
+      this.seriesInfo.charts.scatter.push(id);
+      return new Scatter(id, opt, index);
     } else if (type === 'bar') {
-      this.showSeriesInfo.barSeriesIds.push(id);
-      return new Bar(id, opt, idx);
+      this.seriesInfo.charts.bar.push(id);
+
+      if (opt.timeMode) {
+        return new TimeBar(id, opt, index, isHorizontal);
+      }
+      return new Bar(id, opt, index, isHorizontal);
+    } else if (type === 'pie') {
+      this.seriesInfo.charts.pie.push(id);
+      return new Pie(id, opt, index);
     }
 
     return false;
   },
 
+  /**
+   * Set series group to create stack chart
+   * @param {object} groups   group info
+   *
+   * @returns {undefined}
+   */
   addGroupInfo(groups) {
     groups.forEach((group, gIdx) => {
       let interpolation = 0;
@@ -54,4 +83,4 @@ const module = {
   },
 };
 
-export default module;
+export default modules;

package/src/components/chart/model/model.store.js

@@ -1,65 +1,251 @@
-const module = {
+import { reverse } from 'lodash-es';
+
+const modules = {
+  /**
+   * Take chart data and labels to create normalized data and min/max info
+   * @param {object}  data    chart series info
+   * @param {object}  label   chart label
+   *
+   * @returns {undefined}
+   */
   createDataSet(data, label) {
-    Object.keys(this.seriesList).forEach((key) => {
-      const series = this.seriesList[key];
+    Object.keys(this.seriesInfo.charts).forEach((typeKey) => {
+      const type = this.seriesInfo.charts[typeKey];
+
+      if (type.length) {
+        if (typeKey === 'pie') {
+          if (this.options.sunburst) {
+            this.createSunburstDataSet(data);
+          } else {
+            this.createPieDataSet(data, type);
+          }
+        } else {
+          type.forEach((sId) => {
+            const series = this.seriesList[sId];
+
+            if (series && data[sId]) {
+              if (series.isExistGrp && series.stackIndex) {
+                const bs = this.seriesList[series.bsId];
+                series.data = this.addSeriesStackDS(data[sId], label, bs.data, series.stackIndex);
+              } else {
+                series.data = this.addSeriesDS(data[sId], label);
+              }
+              series.minMax = this.getSeriesMinMax(series.data);
+            }
+          });
+        }
+      }
+    });
+  },
+
+  /**
+   * Take chart data and to create normalized pie data
+   * @param {object}  data    chart series info
+   *
+   * @returns {undefined}
+   */
+  createSunburstDataSet(data) {
+    this.pieDataSet = [];
+    const ds = this.pieDataSet;
+    const sunburstQueue = [];
+
+    for (let ix = 0; ix < data.length; ix++) {
+      const slice = data[ix];
+      const series = this.seriesList[slice.id];
+      let showChildren = false;
+
+      if (!ds[0]) {
+        ds[0] = { ir: 0, or: 0, total: 0, data: [] };
+      }
+
+      if (series.show) {
+        ds[0].total += slice.value || 0;
+        ds[0].data.push({ parent: '$ev-root', id: slice.id, value: slice.value, sa: 0, ea: 0 });
+
+        if (slice.children) {
+          for (let jx = 0; jx < slice.children.length; jx++) {
+            const childSeries = this.seriesList[slice.children[jx].id];
+            if (childSeries.show) {
+              showChildren = true;
+            }
+            sunburstQueue.push({ parent: slice.id, data: slice.children[jx], depth: 1 });
+          }
+        } else {
+          const dummy = {
+            id: 'dummy',
+            value: slice.value,
+          };
+          sunburstQueue.push({ parent: slice.id, data: dummy, depth: 1 });
+        }
+
+        if (!showChildren) {
+          const dummy = {
+            id: 'dummy',
+            value: slice.value,
+          };
+          sunburstQueue.push({ parent: slice.id, data: dummy, depth: 1 });
+        }
+      }
+    }
+
+    ds[0].data.sort((a, b) => b.value - a.value);
+
+    while (sunburstQueue.length) {
+      const item = sunburstQueue.shift();
+      const parent = item.parent;
+      const slice = item.data;
+      const depth = item.depth;
+      let showChildren = false;
+
+      if (!ds[depth]) {
+        ds[depth] = { ir: 0, or: 0, total: {}, data: [] };
+      }
+
+      if (!ds[depth].total[parent]) {
+        ds[depth].total[parent] = 0;
+      }
+
+      const series = this.seriesList[slice.id];
+      if (slice.id === 'dummy') {
+        ds[depth].data.push({ parent, id: 'dummy', value: slice.value, sa: 0, ea: 0 });
+        ds[depth].total[parent] += slice.value;
+      } else if (series && series.show) {
+        ds[depth].data.push({ parent, id: slice.id, value: slice.value, sa: 0, ea: 0 });
+        ds[depth].total[parent] += slice.value;
 
-      if (data[key]) {
-        if (series.isExistGrp && series.stackIndex) {
-          const bs = this.seriesList[series.bsId];
-          series.data = this.addSeriesStackDS(data[key], label, bs.data, series.stackIndex);
+        if (slice.children) {
+          for (let ix = 0; ix < slice.children.length; ix++) {
+            if (this.seriesList[slice.children[ix].id].show) {
+              showChildren = true;
+            }
+            sunburstQueue.push({ parent: slice.id, data: slice.children[ix], depth: depth + 1 });
+          }
         } else {
-          series.data = this.addSeriesDS(data[key], label);
+          const dummy = {
+            id: 'dummy',
+            value: slice.value,
+          };
+          sunburstQueue.push({ parent: slice.id, data: dummy, depth: depth + 1 });
         }
 
-        series.minMax = this.getSeriesMinMax(series.data);
+        if (!showChildren) {
+          const dummy = {
+            id: 'dummy',
+            value: slice.value,
+          };
+          sunburstQueue.push({ parent: slice.id, data: dummy, depth: depth + 1 });
+        }
       }
+
+      ds[depth].data.sort((a, b) => b.value - a.value);
+    }
+  },
+
+  /**
+   * Take chart data and to create normalized pie data
+   * @param {object}  data    chart series info
+   *
+   * @returns {undefined}
+   */
+  createPieDataSet(data, pie) {
+    this.pieDataSet = [];
+    const ds = this.pieDataSet;
+
+    pie.forEach((sId) => {
+      data[sId].forEach((value, index) => {
+        if (!ds[index]) {
+          ds[index] = { data: [], ir: 0, or: 0, total: 0 };
+        }
+
+        if (this.seriesList[sId].show) {
+          ds[index].total += value || 0;
+          ds[index].data.push({ id: sId, value, sa: 0, ea: 0 });
+        }
+      });
+    });
+
+    ds.forEach((item) => {
+      item.data.sort((a, b) => b.value - a.value);
     });
   },
 
+  /**
+   * Take data and label to create stack data for each series
+   * @param {object}  data    chart series info
+   * @param {object}  label   chart label
+   * @param {array}   base    stacked base data
+   * @param {number}  sIdx    series ordered index
+   *
+   * @returns {array} data for each series
+   */
   addSeriesStackDS(data, label, base, sIdx = 0) {
     const isHorizontal = this.options.horizontal;
+    const sdata = [];
 
-    return data.map((curr, index) => {
+    data.forEach((curr, index) => {
       let bdata = base[index];
       let odata = curr;
       let ldata = label[index];
       let gdata = curr;
 
-      if (gdata && typeof gdata === 'object') {
-        odata = isHorizontal ? curr.x : curr.y;
-        ldata = isHorizontal ? curr.y : curr.x;
-        this.addIntegratedLabels(ldata);
-      }
+      if (bdata != null && ldata != null) {
+        if (gdata && typeof gdata === 'object') {
+          odata = isHorizontal ? curr.x : curr.y;
+          ldata = isHorizontal ? curr.y : curr.x;
+        }
 
-      if (sIdx > 0) {
-        bdata = isHorizontal ? bdata.x : bdata.y;
-        gdata = bdata + odata;
-      } else {
-        bdata = 0;
-        gdata = odata;
-      }
+        if (sIdx > 0) {
+          bdata = isHorizontal ? bdata.x : bdata.y;
+          gdata = bdata + odata;
+        } else {
+          bdata = 0;
+          gdata = odata;
+        }
 
-      return this.addData(gdata, ldata, odata, bdata);
+        sdata.push(this.addData(gdata, ldata, odata, bdata));
+      }
     });
+
+    return sdata;
   },
 
+  /**
+   * Take data and label to create data for each series
+   * @param {object}  data    chart series info
+   * @param {object}  label   chart label
+   *
+   * @returns {array} data for each series
+   */
   addSeriesDS(data, label) {
     const isHorizontal = this.options.horizontal;
+    const sdata = [];
 
-    return data.map((curr, index) => {
+    data.forEach((curr, index) => {
       let gdata = curr;
       let ldata = label[index];
 
       if (gdata && typeof gdata === 'object') {
         gdata = isHorizontal ? curr.x : curr.y;
         ldata = isHorizontal ? curr.y : curr.x;
-        this.addIntegratedLabels(ldata);
       }
 
-      return this.addData(gdata, ldata);
+      if (ldata !== null) {
+        sdata.push(this.addData(gdata, ldata));
+      }
     });
+
+    return sdata;
   },
 
+  /**
+   * Take data to create data object for graph
+   * @param {object}  gdata    graph data (y-axis value for vertical chart)
+   * @param {object}  ldata    label data (x-axis value for vertical chart)
+   * @param {object}  odata    original data (without stacked value)
+   * @param {object}  bdata    base data (stacked value)
+
+   * @returns {object} data for each graph point
+   */
   addData(gdata, ldata, odata = null, bdata = null) {
     let data;
 
@@ -72,38 +258,155 @@ const module = {
     return data;
   },
 
-  addIntegratedLabels(value) {
-    if (this.integratedLabels.indexOf(`${value}`) < 0) {
-      this.integratedLabels.push(`${value}`);
-    }
-  },
-
+  /**
+   * Take series data to create min/max info for each series
+   * @param {object}  data    series data
+   *
+   * @returns {object} min/max info for series
+   */
   getSeriesMinMax(data) {
-    const def = { minX: null, minY: null, maxX: null, maxY: null };
+    const def = { minX: null, minY: null, maxX: null, maxY: null, maxDomain: null };
+    const isHorizontal = this.options.horizontal;
 
     if (data.length) {
-      return data.reduce((acc, p) => {
+      return data.reduce((acc, p, index) => {
         const minmax = acc;
-        if (p.x < minmax.minX) {
+        if (p.x <= minmax.minX) {
           minmax.minX = (p.x === null) ? 0 : p.x;
         }
-        if (p.y < minmax.minY) {
+        if (p.y <= minmax.minY) {
           minmax.minY = (p.y === null) ? 0 : p.y;
         }
-        if (p.x > minmax.maxX) {
+        if (p.x >= minmax.maxX) {
           minmax.maxX = (p.x === null) ? 0 : p.x;
+
+          if (isHorizontal && p.x !== null) {
+            minmax.maxDomain = p.y;
+            minmax.maxDomainIndex = index;
+          }
         }
-        if (p.y > minmax.maxY) {
+        if (p.y >= minmax.maxY) {
           minmax.maxY = (p.y === null) ? 0 : p.y;
+
+          if (!isHorizontal && p.y !== null) {
+            minmax.maxDomain = p.x;
+            minmax.maxDomainIndex = index;
+          }
         }
 
         return minmax;
-      }, { minX: data[0].x, minY: data[0].y, maxX: data[0].x, maxY: data[0].y });
+      }, {
+        minX: data[0].x,
+        minY: data[0].y,
+        maxX: data[0].x,
+        maxY: data[0].y,
+        maxDomain: isHorizontal ? data[0].y : data[0].x,
+        maxDomainIndex: 0,
+      });
     }
 
     return def;
   },
 
+  /**
+   * Get graph item by label index
+   * @param {number} pos  label index position
+   *
+   * @returns {object} graph item
+   */
+  getItemByLabelIndex(pos) {
+    if (pos < 0) {
+      return false;
+    }
+
+    return this.getItem(pos);
+  },
+
+  /**
+   * Get graph item by label
+   * @param {any} label  label value for searching graph item
+   *
+   * @returns {object} graph item
+   */
+  getItemByLabel(label) {
+    if (label === null || label === undefined) {
+      return false;
+    }
+
+    const labels = this.data.labels;
+    const labelIndex = labels && labels.indexOf ? labels.indexOf(label) : -1;
+
+    return this.getItem(labelIndex);
+  },
+
+  /**
+   * Get graph items for each series by label index
+   * @param {number} labelIndex  label index
+   *
+   * @returns {object} graph item
+   */
+  getItem(labelIndex) {
+    const sIds = Object.keys(this.seriesList);
+    const isHorizontal = !!this.options.horizontal;
+
+    let maxl = null;
+    let maxp = null;
+    let maxg = null;
+    let maxSID = '';
+    let acc = 0;
+    let useStack = false;
+    let findInfo = false;
+
+    if (labelIndex > -1) {
+      for (let ix = 0; ix < sIds.length; ix++) {
+        const sId = sIds[ix];
+        const series = this.seriesList[sId];
+        const data = series.data[labelIndex];
+
+        if (data && series.show && series.showLegend) {
+          const ldata = isHorizontal ? data.y : data.x;
+          const lp = isHorizontal ? data.yp : data.xp;
+
+          if (ldata !== null && ldata !== undefined) {
+            const g = isHorizontal ? data.o || data.x : data.o || data.y;
+
+            if (series.stackIndex) {
+              acc += !isNaN(data.o) ? data.o : 0;
+              useStack = true;
+            } else {
+              acc += data.y;
+            }
+
+            if (maxg === null || maxg <= g) {
+              maxg = g;
+              maxSID = sId;
+              maxl = ldata;
+              maxp = lp;
+            }
+          }
+        }
+      }
+
+      findInfo = {
+        label: maxl,
+        pos: maxp,
+        value: maxg === null ? 0 : maxg,
+        sId: maxSID,
+        acc,
+        useStack,
+        maxIndex: labelIndex,
+      };
+    }
+
+    return findInfo;
+  },
+
+  /**
+   * Create min/max information for all of data
+   * @property seriesList
+   *
+   * @returns {object} min/max info for all of data
+   */
   getStoreMinMax() {
     const keys = Object.keys(this.seriesList);
     const isHorizontal = this.options.horizontal;
@@ -121,10 +424,10 @@ const module = {
         const axisY = series.yAxisIndex;
 
         if (!minmax.x[axisX]) {
-          minmax.x[axisX] = { min: null, max: null };
+          minmax.x[axisX] = { min: null, max: null, maxSID: null };
         }
         if (!minmax.y[axisY]) {
-          minmax.y[axisY] = { min: null, max: null };
+          minmax.y[axisY] = { min: null, max: null, maxSID: null };
         }
 
         if (smm && series.show) {
@@ -143,23 +446,114 @@ const module = {
               minmax.y[axisY].min = smm.minY;
             }
           }
-          if (smm.maxX > minmax.x[axisX].max) {
+          if (smm.maxX >= minmax.x[axisX].max) {
             minmax.x[axisX].max = smm.maxX;
+            minmax.x[axisX].maxSID = key;
           }
-          if (smm.maxY > minmax.y[axisY].max) {
+          if (smm.maxY >= minmax.y[axisY].max) {
             minmax.y[axisY].max = smm.maxY;
+            minmax.y[axisX].maxSID = key;
           }
         }
 
         return minmax;
       }, {
-        x: [{ min: null, max: null }],
-        y: [{ min: null, max: null }],
+        x: [{ min: null, max: null, maxSID: null }],
+        y: [{ min: null, max: null, maxSID: null }],
       });
     }
 
     return def;
   },
+
+  calculateAngle() {
+    const pieDataSet = this.pieDataSet;
+
+    let slice;
+    let value;
+    let parent;
+    let totalValue;
+
+    let sliceAngle;
+    let startAngle;
+    let endAngle;
+    let totalAngle;
+    let isDummy;
+
+    const dummyIndex = [];
+    const saStore = {
+      '$ev-root': 1.5 * Math.PI,
+    };
+
+    for (let ix = 0; ix < pieDataSet.length; ix++) {
+      const pie = pieDataSet[ix];
+      isDummy = true;
+
+      for (let jx = 0; jx < pie.data.length; jx++) {
+        slice = pie.data[jx];
+        value = slice.value;
+
+        if (isDummy) {
+          isDummy = slice.id === 'dummy';
+        }
+
+        if (!ix) {
+          startAngle = saStore['$ev-root'];
+          sliceAngle = 2 * Math.PI * (value / pie.total);
+          endAngle = startAngle + sliceAngle;
+
+          slice.sa = startAngle;
+          slice.ea = endAngle;
+          saStore['$ev-root'] += sliceAngle;
+        } else {
+          parent = this.getParentInfo(ix - 1, slice.parent);
+          if (!parent) {
+            break;
+          }
+
+          if (!saStore[slice.parent]) {
+            saStore[slice.parent] = parent.sa;
+          }
+
+          startAngle = saStore[slice.parent];
+          totalAngle = parent.ea - parent.sa;
+          totalValue = pie.total[slice.parent] || 0;
+          sliceAngle = totalAngle * (value / totalValue);
+          endAngle = startAngle + sliceAngle;
+
+          slice.sa = startAngle;
+          slice.ea = endAngle;
+
+          saStore[slice.parent] += sliceAngle;
+        }
+      }
+
+      if (isDummy) {
+        dummyIndex.push(ix);
+      }
+    }
+
+    for (let ix = 0; ix < dummyIndex.length; ix++) {
+      this.pieDataSet.splice(dummyIndex, 1);
+    }
+
+    if (this.options.reverse) {
+      this.pieDataSet = reverse(this.pieDataSet);
+    }
+  },
+
+  getParentInfo(depth, parentId) {
+    for (let ix = depth; ix >= 0; ix--) {
+      const pie = this.pieDataSet[ix];
+      for (let jx = 0; jx < pie.data.length; jx++) {
+        if (pie.data[jx].id === parentId) {
+          return pie.data[jx];
+        }
+      }
+    }
+
+    return null;
+  },
 };
 
-export default module;
+export default modules;