sea-chart 2.0.8 → 2.0.10

package/dist/components/tooltip/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+const ToolTip = _ref => {
+  let {
+    tooltipData,
+    toolTipPosition,
+    chart
+  } = _ref;
+  const tooltipRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    offsetX: -9999,
+    offsetY: -9999
+  });
+  const {
+    title,
+    items
+  } = tooltipData || {
+    title: '',
+    items: []
+  };
+  (0, _react.useEffect)(() => {
+    if (!toolTipPosition) {
+      setPosition({
+        offsetX: -9999,
+        offsetY: -9999
+      });
+      return;
+    }
+    if (chart && toolTipPosition) {
+      const width = Number(chart.node().getAttribute('width'));
+      const height = Number(chart.node().getAttribute('height'));
+      const {
+        height: tooltipHeight,
+        width: tooltipWidth
+      } = tooltipRef.current.getBoundingClientRect();
+      const {
+        offsetX,
+        offsetY
+      } = toolTipPosition;
+      const distance = 30;
+      const insertPadding = 30;
+      let translateX = offsetX + distance;
+      let translateY = offsetY;
+      const endOffsetX = offsetX + distance + tooltipWidth + insertPadding;
+      const endOffsetY = offsetY + tooltipHeight + insertPadding;
+      // Right overflow
+      if (endOffsetX > width) {
+        translateX = offsetX - distance - tooltipWidth - insertPadding;
+      }
+      // Bottom overflow
+      if (endOffsetY > height) {
+        translateY = offsetY - (endOffsetY - height);
+      }
+      setPosition({
+        offsetX: translateX,
+        offsetY: translateY
+      });
+    }
+  }, [chart, toolTipPosition, tooltipRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tooltipRef,
+    className: "sea-chart-d3-tooltip-container",
+    style: {
+      transform: "translate(".concat(position.offsetX, "px, ").concat(position.offsetY, "px)")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-chart-d3-tooltip-title"
+  }, title), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "sea-chart-d3-tooltip-list"
+  }, items.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "sea-chart-d3-tooltip-list-item",
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-marker",
+      style: {
+        backgroundColor: item.color
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-name"
+    }, item.name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-value"
+    }, item.value));
+  })));
+};
+var _default = exports.default = ToolTip;

package/dist/components/types-dialog/index.js

@@ -69,10 +69,8 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram'].includes(item.name));
-      newChartTypes.forEach(item => {
-        item.children = item.children.slice(0, 3);
-      });
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart'].includes(item.name));
+      newChartTypes[1].children = newChartTypes[1].children.slice(0, 2);
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

package/dist/constants/index.js

@@ -306,7 +306,7 @@ const BAR_MAP_TO_HORIZONTAL_MAP = exports.BAR_MAP_TO_HORIZONTAL_MAP = {
   y_axis_label_color: 'horizontal_axis_label_color',
   y_axis_auto_range: 'horizontal_axis_auto_range',
   y_axis_max: 'horizontal_axis_max',
-  y_axis_mix: 'horizontal_axis_min'
+  y_axis_min: 'horizontal_axis_min'
 };
 const DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_NUMBER_FORMAT_OBJECT = {
   format: _dtableUtils.DEFAULT_NUMBER_FORMAT

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

@@ -0,0 +1,345 @@
+"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 d3 = _interopRequireWildcard(require("d3"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _chartUtils = require("../../utils/chart-utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class BarCompare extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 0.2,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_increase,
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      data = data.sort((a, b) => d3.ascending(a.name, b.name));
+      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
+      const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]);
+      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]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).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.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(() => d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+        let [name, dum] = _ref;
+        // Each group is horizontally centered
+        const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
+        return "translate(".concat(fx(name) + offset, ",0)");
+      })
+      // rect item
+      .selectAll().data(_ref2 => {
+        let [a, d] = _ref2;
+        return d;
+      }).join('rect').attr('x', (d, index) => index * x.bandwidth()).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value) === 0 ? 0 : y(0) - y(d.value)).attr('fill', d => color(d.group_name)).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
+        g.nodes().forEach(rect => {
+          const parentNode = rect.parentNode;
+          // add rect borderRadius
+          this.addClipPath({
+            rect,
+            parentNode,
+            rectId: rect.getAttribute('data-slugid')
+          });
+        });
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event, color);
+        this.handleAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event, color);
+      }).on('mouseleave', event => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      });
+      if (display_increase) {
+        const increaseData = this.getIncreaseData(data);
+        this.drawIncreaseLine(increaseData);
+      }
+      this.setColorMap(data, chartColorTheme);
+      this.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data
+      });
+    };
+    this.showTooltip = (event, colorScale, isCircle) => {
+      const {
+        y_axis_summary_type,
+        y_axis_summary_method,
+        increase_line_color
+      } = this.props.chart.config;
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      let newTooltipData = {};
+      if (isCircle) {
+        const circleEl = event.target;
+        newTooltipData = {
+          title: _intl.default.get(_constants.TITLE_INCREASE),
+          items: [{
+            color: increase_line_color || '#fbd44a',
+            name: circleEl.getAttribute('data-name'),
+            value: circleEl.getAttribute('data-text')
+          }]
+        };
+      } else {
+        const curGroup = event.target.parentNode;
+        const [, data] = curGroup.__data__;
+        newTooltipData = {
+          title: y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          items: data.map(item => {
+            return {
+              color: colorScale(item.group_name),
+              name: item.group_name,
+              value: item.value
+            };
+          })
+        };
+      }
+      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.drawIncreaseLine = increaseData => {
+      const {
+        chart,
+        globalTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        label_font_size,
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max,
+        increase_line_color,
+        display_increase_percentage
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const circleData = increaseData.map(() => ({}));
+      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const lineY = d3.scaleLinear().domain(y_axis_auto_range ? [d3.min(increaseData, d => d.value), d3.max(increaseData, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+      const line = d3.line().x((d, index) => {
+        const x = lineX(d.name) + lineX.bandwidth() / 2;
+        circleData[index]['x'] = x;
+        circleData[index]['name'] = d.name;
+        return x;
+      }).y((d, index) => {
+        const y = lineY(d.value);
+        circleData[index]['y'] = y;
+        circleData[index]['value'] = d.formatValue;
+        return y;
+      }).curve(d3.curveBumpX);
+      const wrapper = this.chart.append('g').attr('class', "increase-line-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+
+      // line
+      wrapper.append('path').attr('fill', 'none').attr('stroke', increase_line_color || '#fbd44a').attr('stroke-width', 2).attr('d', () => line(increaseData));
+
+      // circle
+      circleData.forEach(item => {
+        wrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', increase_line_color || '#fbd44a').attr('data-text', item.value).attr('data-name', item.name).call(g => {
+          // circle label
+          if (display_increase_percentage) {
+            const curCircleEl = g.node();
+            wrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+              const {
+                width
+              } = g.node().getBoundingClientRect();
+              const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
+              const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
+              g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+            });
+          }
+        }).on('mouseover', event => {
+          this.updateCircleStyle(event, 'zoomIn');
+          this.showTooltip(event, '', true);
+        }).on('mousemove', event => {
+          this.moveTooltip(event);
+        }).on('mouseleave', event => {
+          this.hiddenTooltip();
+          this.updateCircleStyle(event, 'zoomOut');
+        });
+      });
+    };
+    this.getIncreaseData = data => {
+      const increaseData = [];
+      d3.group(data, d => d.name).forEach((value, key) => {
+        var _increaseValue$, _increaseValue$2;
+        const increaseValue = value.filter(d => (d === null || d === void 0 ? void 0 : d.increase_value) !== undefined) || [{
+          increaseValue: 0
+        }];
+        const formatValue = (0, _dtableUtils.getNumberDisplayString)((_increaseValue$ = increaseValue[0]) === null || _increaseValue$ === void 0 ? void 0 : _increaseValue$.increase_value, {
+          format: 'percent'
+        });
+        const data = {
+          name: key,
+          value: ((_increaseValue$2 = increaseValue[0]) === null || _increaseValue$2 === void 0 ? void 0 : _increaseValue$2.increase_value) || 0,
+          formatValue: formatValue || '0%',
+          rowData: value
+        };
+        increaseData.push(data);
+      });
+      return increaseData;
+    };
+    this.updateCircleStyle = (event, state) => {
+      if (state === 'zoomIn') {
+        d3.select(event.currentTarget).attr('r', 5);
+        return;
+      }
+      const circles = d3.select(event.currentTarget.parentNode).selectAll('circle').nodes();
+      circles.forEach(circle => d3.select(circle).attr('r', 3));
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const curGroup = event.target.parentNode;
+      const allGroup = Array.from(curGroup.parentNode.children);
+      const [curGroupName] = curGroup.__data__;
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+BarCompare.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
+};
+var _default = exports.default = BarCompare;