sea-chart 2.0.7 → 2.0.9

package/dist/view/wrapper/bar-stack.js

@@ -0,0 +1,334 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dtableUtils = require("dtable-utils");
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _intl = _interopRequireDefault(require("../../intl"));
+var _columnUtils = require("../../utils/column-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _colorRules = require("../../constants/color-rules");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class BarStack extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      const {
+        chart
+      } = this.props;
+      const {
+        sort_type,
+        type
+      } = chart.config;
+      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
+        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
+      }
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme,
+        tables
+      } = this.props;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        y_axis_show_value,
+        display_each_block_data,
+        table_id,
+        column_groupby_column_key,
+        color_theme,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
+      const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
+        var _group$get;
+        let [_, group] = _ref;
+        return (_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value;
+      })(d3.index(data, d => d.name, d => d.group_name));
+      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const niceEnd = d3.nice(0, d3.max(series, d => d3.max(d, d => d[1])), 5)[1];
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Rect group
+      this.rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      this.rectsWrapper.selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
+        const data = D.map(d => {
+          d.key = D.key;
+          return d;
+        });
+        return data;
+      }).join('rect').attr('x', d => x(d.data[0])).attr('y', d => y(d[1])).attr('height', d => {
+        const height = y(d[0]) - y(d[1]);
+        return (0, _lodashEs.isNaN)(height) ? 0 : height;
+      }).attr('width', x.bandwidth()).attr('fill', d => this.colorMap[d.key] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => {
+        const {
+          data,
+          key
+        } = d;
+        const rowData = data[1].get(key);
+        return rowData ? rowData.value : 0;
+      }).attr('data-groupName', d => {
+        const {
+          data
+        } = d;
+        return data[0];
+      }).call(g => {
+        const [topG] = g._parents.slice(-1);
+        Array.from(topG.children).forEach(rect => {
+          // Add label (get the total value of each stack)
+          if (display_each_block_data) {
+            this.addLabelByEachStack(data, topG, rect, x);
+          }
+          // Add mask rect
+          this.addMaskRect(topG, rect, x.bandwidth());
+        });
+        // Add label
+        if (y_axis_show_value) {
+          this.handleLabelToRectCenter(g, x.bandwidth());
+        }
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event);
+        this.handleAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+      this.setLegend('group_name', theme, 'top-right', data);
+    };
+    this.showTooltip = event => {
+      const offsetX = d3.pointer(event)[0];
+      const offsetY = d3.pointer(event)[1];
+      const curRect = event.currentTarget;
+      const curGroup = curRect.parentNode;
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      const newTooltipData = {
+        title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
+        items: [{
+          color: this.colorMap[curGroup.getAttribute('data-key')],
+          name: curGroup.getAttribute('data-key'),
+          value: curRect.getAttribute('data-value')
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const offsetX = d3.pointer(event)[0];
+      const offsetY = d3.pointer(event)[1];
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = Array.from(this.rectsWrapper.node().children);
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.addMaskRect = (topG, rect, xWidth) => {
+      const {
+        borderRadius
+      } = this.chartBoundingClientRect;
+      // Add mask rect
+      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event);
+        this.handleAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(borderRadius, "px ").concat(borderRadius, "px 0px 0px"));
+
+      // Remove old rect
+      d3.select(rect).remove();
+    };
+    this.addLabelByEachStack = (data, topG, rect, x) => {
+      const {
+        globalTheme,
+        chart
+      } = this.props;
+      const {
+        label_font_size
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const groupData = d3.group(data, d => d.name);
+      const group_name = rect.getAttribute('data-groupName');
+      const stackSum = groupData.get(group_name).reduce((p, n) => p.value + n.value);
+      this.addLabelToRectTop({
+        container: topG,
+        xWidth: Number(x.bandwidth()),
+        x: Number(rect.getAttribute('x')),
+        y: Number(rect.getAttribute('y')),
+        theme,
+        label_font_size,
+        text: stackSum
+      });
+    };
+    this.handleLabelToRectCenter = (g, xWidth) => {
+      const {
+        globalTheme,
+        chart
+      } = this.props;
+      const {
+        label_font_size
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      g._parents.forEach(group => {
+        Array.from(group.children).forEach(rect => {
+          this.addLabelToRectCenter({
+            container: group,
+            x: Number(rect.getAttribute('x')),
+            y: Number(rect.getAttribute('y')),
+            xWidth,
+            yheight: Number(rect.getAttribute('height')),
+            theme,
+            label_font_size,
+            text: rect.getAttribute('data-value')
+          });
+        });
+      });
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+BarStack.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = BarStack;

package/dist/view/wrapper/bar.js

@@ -14,6 +14,7 @@ var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorUtils = require("../../utils/color-utils");
 var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _chartComponent = _interopRequireDefault(require("./chart-component"));
 class Bar extends _chartComponent.default {
   constructor(props) {
@@ -24,7 +25,14 @@ class Bar extends _chartComponent.default {
       this.drawChart();
     };
     this.createChart = () => {
-      this.initChart(this.container);
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
     this.drawChart = () => {
       const {
@@ -101,22 +109,10 @@ class Bar extends _chartComponent.default {
         toolTipPosition: null
       });
     };
-    this.setActiveAndInActiveState = (state, data) => {
-      const {
-        chart
-      } = this.props;
-      const paths = d3.selectAll(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id, " path"));
-      if (state === 'active') {
-        paths.nodes().forEach(path => {
-          d3.select(path).attr('opacity', 1);
-        });
-        return;
-      }
-      paths.nodes().forEach(path => {
-        if (path.id !== data.slugId) {
-          d3.select(path).attr('opacity', 0.3);
-        }
-      });
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = [event.currentTarget.parentNode];
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
     this.draw = data => {
       const {
@@ -144,10 +140,10 @@ class Bar extends _chartComponent.default {
       const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
       const {
         width: chartWidth,
-        height: chartHeight
+        height: chartHeight,
+        insertPadding,
+        borderRadius
       } = this.chartBoundingClientRect;
-      const insertPadding = 30;
-      const borderRadius = 10;
       const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
       this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -163,7 +159,8 @@ class Bar extends _chartComponent.default {
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
       });
-      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('id', (d, index) => d.slugId).attr('d', d => {
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      rectsWrapper.selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('id', (d, index) => d.slugId).attr('d', d => {
         // Do not draw if the range is smaller than the minimum
         if (!y_axis_auto_range && d.value <= y_axis_min) {
           return '';
@@ -180,15 +177,17 @@ class Bar extends _chartComponent.default {
         path.closePath();
         return path.toString();
       }).call(g => {
-        const parentNode = d3.select('.rects-wrapper');
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
-            parentNode.append('text').attr('y', Number(path.dataset.y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(path.dataset.value).call(g => {
-              const {
-                width
-              } = g.node().getBoundingClientRect();
-              g.attr('x', Number(path.dataset.x) + Number(path.dataset.width) / 2 - width);
+            this.addLabelToRectTop({
+              container: rectsWrapper.node(),
+              xWidth: Number(path.dataset.width),
+              x: Number(path.dataset.x),
+              y: Number(path.dataset.y),
+              theme,
+              label_font_size,
+              text: path.dataset.value
             });
           }
         });
@@ -196,18 +195,15 @@ class Bar extends _chartComponent.default {
         this.props.toggleRecords(data);
       }).on('mouseover', (event, data) => {
         this.showTooltip(event, data, tooltipTitle);
-        this.setActiveAndInActiveState('inActive', data);
+        this.handleAcitveAndInActiveState('inActive', event);
       }).on('mousemove', event => {
         this.moveTooltip(event);
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
-        this.setActiveAndInActiveState('active', data);
+        this.handleAcitveAndInActiveState('active', event);
       });
-      if (display_goal_line) {
-        this.chart.append('g').attr('class', 'annotation-wrapper').append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', y(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', y(goal_value)).call(g => {
-          const parentNode = d3.select('.annotation-wrapper');
-          parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', y(goal_value) - 10).attr('fill', '#666').text(goal_label);
-        });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
       }
     };
     this.chart = null;
@@ -225,8 +221,6 @@ class Bar extends _chartComponent.default {
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
     if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
     }
@@ -243,7 +237,11 @@ class Bar extends _chartComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container",
       ref: ref => this.container = ref
-    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
   }
 }
 Bar.propTypes = {