sea-chart 2.0.15 → 2.0.17

package/dist/view/wrapper/pie.js

@@ -0,0 +1,275 @@
+"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 _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _colorRules = require("../../constants/color-rules");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Pie extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        show_legend
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        rightLegendSpace: show_legend ? 150 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.drawChart = () => {
+      const {
+        result: data,
+        customRender
+      } = this.props;
+      this.draw(data);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        tables,
+        globalTheme,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        show_legend,
+        display_label,
+        label_position,
+        label_font_size,
+        color_theme
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        rightLegendSpace
+      } = this.chartBoundingClientRect;
+      this.isInnerLabel = !label_position || label_position === _constants.CHART_LABEL_POSITIONS[0];
+      const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
+      const useSingleSelectColumnColor = color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const {
+        data: newData,
+        colorMap
+      } = _utils.BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
+      if (!Array.isArray(newData) || newData.length === 0) return;
+
+      // Color
+      const colorDomain = new Set(data.map(d => d.name));
+      const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
+      const color = d3.scaleOrdinal().domain(colorDomain).range(colorRange);
+
+      // Pie and Arc
+      const pie = d3.pie().sort(null).value(d => d.value);
+      const arcs = pie(data);
+      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7 * 0.03).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
+
+      // Draw Pie
+      this.chart.append('g').attr('stroke', 'white').attr('stroke-width', 2).selectAll().data(arcs).join('path').attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+        var _g$node$parentNode;
+        const {
+          width,
+          height
+        } = (_g$node$parentNode = g.node().parentNode) === null || _g$node$parentNode === void 0 ? void 0 : _g$node$parentNode.getBoundingClientRect();
+        const left = width / 2 + insertPadding;
+        const top = height / 2 + insertPadding;
+        const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
+        const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
+        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+
+        // Draw label
+        if (display_label) {
+          const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 0.7 : arc.outerRadius()() * 1.2;
+          const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+            const {
+              value,
+              percent
+            } = d.data;
+            return this.getLabel(value, percent);
+          }).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+
+          // Line
+          if (!this.isInnerLabel) {
+            const lineRadius = arc.outerRadius()() * 0.5;
+            const arcLine = d3.arc().innerRadius(lineRadius).outerRadius(lineRadius);
+            this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(arcs).join('line').attr('transform', d => "translate(".concat(arcLine.centroid(d), ")")).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+          }
+        }
+      }).on('click', (event, rowData) => {
+        this.props.toggleRecords(rowData.data);
+      }).on('mouseover', (event, rowData) => {
+        this.showTooltip(event, rowData.data, color);
+        this.handleAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      });
+      if (show_legend) {
+        this.setLegend({
+          legendName: 'name',
+          theme,
+          legendPosition: 'center-right',
+          data,
+          colorScale: color
+        });
+      }
+    };
+    this.showTooltip = (event, data, colorScale) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        value,
+        percent
+      } = data;
+      const newTooltipData = {
+        title: false,
+        items: [{
+          color: colorScale(data.name),
+          name: this.getTooltipName(data.name),
+          value: this.getLabel(value, percent)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = [event.currentTarget.parentNode];
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.getLabel = (val, percent) => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_method,
+        display_label,
+        label_format
+      } = chart.config;
+      const value = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, val, summary_method);
+      if (!display_label || !value || !percent) {
+        return '';
+      }
+      switch (label_format) {
+        case _constants.CHART_LABEL_FORMATS[0]:
+          return percent;
+        case _constants.CHART_LABEL_FORMATS[1]:
+          return value;
+        case _constants.CHART_LABEL_FORMATS[2]:
+          return "".concat(value, " (").concat(percent, ")");
+        default:
+          return percent;
+      }
+    };
+    this.getTooltipName = name => {
+      let title = name;
+      if (!name || name.trim() === 'undefined' || name.trim() === 'null') {
+        title = _intl.default.get('Empty');
+      } else if (name === '_Others') {
+        title = _intl.default.get('Others');
+      }
+      return title;
+    };
+    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.chart.node() && this.chart.node().remove();
+      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", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Pie.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _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 = Pie;

package/dist/view/wrapper/ring.js

@@ -0,0 +1,328 @@
+"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 _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _colorRules = require("../../constants/color-rules");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Ring extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        show_legend
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        rightLegendSpace: show_legend ? 150 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.drawChart = () => {
+      const {
+        result: data,
+        customRender
+      } = this.props;
+      this.draw(data);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        tables,
+        globalTheme,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        show_legend,
+        display_label,
+        label_position,
+        label_font_size,
+        color_theme
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        rightLegendSpace
+      } = this.chartBoundingClientRect;
+      this.isInnerLabel = !label_position || label_position === _constants.CHART_LABEL_POSITIONS[0];
+      const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
+      const useSingleSelectColumnColor = color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const {
+        data: newData,
+        colorMap,
+        total
+      } = _utils.BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
+      if (!Array.isArray(newData) || newData.length === 0) return;
+
+      // Color
+      const colorDomain = new Set(data.map(d => d.name));
+      const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
+      const color = d3.scaleOrdinal().domain(colorDomain).range(colorRange);
+
+      // Ring and Arc
+      const pie = d3.pie().sort(null).value(d => d.value);
+      const arcs = pie(data);
+      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5);
+
+      // Draw Ring
+      this.chart.append('g').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+        var _g$node$parentNode;
+        const {
+          width,
+          height
+        } = (_g$node$parentNode = g.node().parentNode) === null || _g$node$parentNode === void 0 ? void 0 : _g$node$parentNode.getBoundingClientRect();
+        const left = width / 2 + insertPadding;
+        const top = height / 2 + insertPadding;
+        const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
+        const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
+        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+
+        // Draw total
+        this.setAnnotationTotal(g.node().parentNode, {
+          value: total
+        });
+
+        // Draw label
+        if (display_label) {
+          const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
+          const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+            const {
+              value,
+              percent
+            } = d.data;
+            return this.getLabel(value, percent);
+          }).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+
+          // Line
+          if (!this.isInnerLabel) {
+            const lineRadius = arc.outerRadius()() * 0.7;
+            const arcLine = d3.arc().innerRadius(lineRadius).outerRadius(lineRadius);
+            this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(arcs).join('line').attr('transform', d => "translate(".concat(arcLine.centroid(d), ")")).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+          }
+        }
+      }).on('click', (event, rowData) => {
+        this.props.toggleRecords(rowData.data);
+      }).on('mouseenter', (event, rowData) => {
+        this.showTooltip(event, rowData.data, color);
+        this.handleAcitveAndInActiveState('inActive', event);
+        this.setAnnotationTotal(event.currentTarget.parentNode, {
+          name: this.getTooltipName(rowData.data.name),
+          value: this.getLabel(rowData.data.value, rowData.data.percent)
+        });
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', (event, data) => {
+        if (event.relatedTarget.getAttribute('class') === 'label') return;
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+        this.setAnnotationTotal(event.currentTarget.parentNode, {
+          value: total
+        });
+      });
+      if (show_legend) {
+        this.setLegend({
+          legendName: 'name',
+          theme,
+          legendPosition: 'center-right',
+          data,
+          colorScale: color
+        });
+      }
+    };
+    this.showTooltip = (event, data, colorScale) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        value,
+        percent
+      } = data;
+      const newTooltipData = {
+        title: false,
+        items: [{
+          color: colorScale(data.name),
+          name: this.getTooltipName(data.name),
+          value: this.getLabel(value, percent)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = [event.currentTarget.parentNode];
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.getLabel = (val, percent) => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_method,
+        display_label,
+        label_format
+      } = chart.config;
+      const value = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, val, summary_method);
+      if (!display_label || !value || !percent) {
+        return '';
+      }
+      switch (label_format) {
+        case _constants.CHART_LABEL_FORMATS[0]:
+          return percent;
+        case _constants.CHART_LABEL_FORMATS[1]:
+          return value;
+        case _constants.CHART_LABEL_FORMATS[2]:
+          return "".concat(value, " (").concat(percent, ")");
+        default:
+          return percent;
+      }
+    };
+    this.getTooltipName = name => {
+      let title = name;
+      if (!name || name.trim() === 'undefined' || name.trim() === 'null') {
+        title = _intl.default.get('Empty');
+      } else if (name === '_Others') {
+        title = _intl.default.get('Others');
+      }
+      return title;
+    };
+    this.setAnnotationTotal = (wrapper, _ref) => {
+      var _d3$select$select, _d3$select$select2;
+      let {
+        name,
+        value
+      } = _ref;
+      const {
+        chart,
+        globalTheme,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_method
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      // Clear old annotation
+      const oldTitle = (_d3$select$select = d3.select(wrapper).select('.title')) === null || _d3$select$select === void 0 ? void 0 : _d3$select$select.node();
+      const oldText = (_d3$select$select2 = d3.select(wrapper).select('.text')) === null || _d3$select$select2 === void 0 ? void 0 : _d3$select$select2.node();
+      oldTitle && oldTitle.remove();
+      oldText && oldText.remove();
+
+      // Title
+      d3.select(wrapper).append('text').attr('class', 'title').text(name ? name : _intl.default.get('Total')).attr('fill', theme.annotationTitleFontColor).attr('font-size', theme.annotationFontSize).attr('font-weight', 300).attr('pointer-events', 'none').call(g => {
+        var _g$node;
+        const {
+          width
+        } = (_g$node = g.node()) === null || _g$node === void 0 ? void 0 : _g$node.getBoundingClientRect();
+        g.attr('transform', "translate(".concat(-(width / 2), ", ").concat(-20, ")"));
+      });
+
+      // Text this.getLabel(value, percent)
+      d3.select(wrapper).append('text').attr('class', 'text').text(summaryColumn ? _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method) : value).attr('fill', theme.annotationValueFontColor).attr('font-size', theme.annotationFontSize).call(g => {
+        var _g$node2;
+        const {
+          width
+        } = (_g$node2 = g.node()) === null || _g$node2 === void 0 ? void 0 : _g$node2.getBoundingClientRect();
+        g.attr('transform', "translate(".concat(-(width / 2), ", ", 10, ")"));
+      });
+    };
+    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.chart.node() && this.chart.node().remove();
+      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", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Ring.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _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 = Ring;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",