sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/compare.js

@@ -1,383 +0,0 @@
-"use strict";
-
-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 _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
-var _lodashEs = require("lodash-es");
-var _constants = require("../../constants");
-var _chartUtils = require("../../utils/chart-utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Compare extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        display_data,
-        display_increase_percentage
-      } = chart.config;
-      const appendPadding = [display_data || display_increase_percentage ? 17 : 0, 0, 0, 0];
-      this.initChart(this.container, {
-        appendPadding
-      });
-      this.chart.on('interval:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-    };
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
-    };
-    this.drawChart = () => {
-      let {
-        result: data
-      } = this.props;
-      data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.loadData(data);
-      this.draw(data);
-      requestAnimationFrame(() => {
-        this.chart.render();
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        globalTheme,
-        chartColorTheme
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        table_id,
-        y_axis_summary_type,
-        y_axis_column_key,
-        y_axis_summary_method,
-        summaryColumn,
-        display_data,
-        label_font_size,
-        display_increase
-      } = chart.config;
-      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-        const table = (0, _dtableUtils.getTableById)(table_id);
-        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
-        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-      }
-
-      // x axis
-      const {
-        width
-      } = this.chart.coordinateBBox;
-      const chartData = this.getChartGroupData(data);
-      this.labelCount = chartData.length;
-      const ticks = this.getChartDisplayLabels(width, 20, chartData);
-      if (ticks.length > 0) {
-        this.chart.scale('name', {
-          ticks
-        });
-      }
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.handleAutoRange(chart, summaryColumnData);
-      this.chart.scale({
-        group_name: {
-          type: 'cat'
-        }
-      });
-
-      // set the single bar width and radius
-      let singleBarWidth, singleBarRadius;
-      // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
-      const maxCountGroup = (0, _lodashEs.maxBy)(chartData, 'currentGroupCount');
-      singleBarWidth = Math.round(chartWidth / (2 * chartData.length * maxCountGroup.currentGroupCount));
-      singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      const interval = this.chart.interval().label(display_data ? 'formatted_value' : false, {
-        style: {
-          fontSize: _chartUtils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor,
-          ...this.labelStroke
-        }
-      }).position('name*value').color('group_name', _chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
-        const nameContent = !raw_name && typeof raw_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : raw_name;
-        const titleContent = y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]);
-        return {
-          value,
-          title: titleContent,
-          name: nameContent
-        };
-      }).adjust({
-        type: 'dodge',
-        marginRatio: 0
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style({
-        radius: [singleBarRadius, singleBarRadius, 0, 0]
-      });
-      if (display_increase) {
-        this.drawIncreaseLine({
-          theme
-        });
-      }
-      this.chart.on('interval:mouseenter', e => {
-        if (this.isInsideInterval) return;
-        this.isInsideInterval = true;
-        this.setToolTipForInterval();
-        interval.style('name*value', (name, value) => {
-          const isHovered = name === e.data.data.name;
-          return {
-            fillOpacity: isHovered ? 1 : 0.3,
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        });
-        interval.tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
-          const nameContent = !raw_name && typeof raw_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : raw_name;
-          const titleContent = y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]);
-          return {
-            value,
-            title: titleContent,
-            name: nameContent
-          };
-        });
-        this.point && this.point.tooltip(false);
-        this.chart.render(true);
-      });
-      this.chart.on('interval:mouseleave', e => {
-        if (!this.isInsideInterval) return;
-        this.isInsideInterval = false;
-        this.setToolTipForLine();
-        interval.style('name*value', () => {
-          return {
-            fillOpacity: 1,
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        });
-        this.point && this.point.tooltip('name*increase_value', (name, value) => {
-          return {
-            title: _intl.default.get(_constants.TITLE_INCREASE),
-            value: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
-              format: 'percent'
-            }),
-            name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-          };
-        });
-        interval.tooltip(false);
-        this.chart.render(true);
-      });
-      this.setColorMap(data, chartColorTheme);
-      this.formatDataByName(data);
-      this.setToolTip(true, summaryColumn, y_axis_summary_method);
-      this.setLegend('group_name', theme, 'top-right');
-
-      // x and y
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-    };
-    this.setToolTipForInterval = () => {
-      const {
-        chart,
-        summaryColumn
-      } = this.props;
-      const {
-        y_axis_summary_method
-      } = chart.config;
-      this.setToolTip(true, summaryColumn, y_axis_summary_method);
-    };
-    this.setToolTipForLine = () => {
-      const {
-        chart,
-        summaryColumn
-      } = this.props;
-      const {
-        y_axis_summary_method
-      } = chart.config;
-      const settings = this.getToolTipSettings(false, summaryColumn, y_axis_summary_method);
-      this.chart.tooltip(settings);
-    };
-    this.drawIncreaseLine = _ref => {
-      let {
-        theme
-      } = _ref;
-      const {
-        chart
-      } = this.props;
-      const {
-        increase_line_color,
-        display_increase_percentage,
-        label_font_size
-      } = chart.config;
-      this.chart.line().position('name*increase_value').color(increase_line_color || '#fbd44a').shape('smooth').style({
-        lineWidth: 2,
-        opacity: 1
-      }).tooltip(false);
-      const point = this.chart.point().label(display_increase_percentage ? 'increase_value' : false, value => {
-        return {
-          content: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
-            format: 'percent'
-          }),
-          style: {
-            fontSize: _chartUtils.BaseUtils.getLabelFontSize(label_font_size),
-            fill: theme.labelColor,
-            ...this.labelStroke
-          }
-        };
-      }).color(increase_line_color || '#fbd44a').animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).position('name*increase_value').shape('circle').size(3).style({
-        stroke: 0,
-        fillOpacity: 1
-      }).tooltip('name*increase_value', (name, value) => {
-        return {
-          title: _intl.default.get(_constants.TITLE_INCREASE),
-          value: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
-            format: 'percent'
-          }),
-          name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
-        };
-      });
-      this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
-        if (this.isInsidePoint) return;
-        this.isInsidePoint = true;
-        point.style('name', name => {
-          let r = 3;
-          if (name === e.data.data.name) {
-            r = 5;
-          }
-          return {
-            r,
-            stroke: 0,
-            fillOpacity: 1
-          };
-        });
-        this.chart.render(true);
-      }, 100));
-      this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
-        if (!this.isInsidePoint) return;
-        this.isInsidePoint = false;
-        point.style('name', name => {
-          let r = 3;
-          return {
-            r,
-            stroke: 0,
-            fillOpacity: 1
-          };
-        });
-        this.chart.render(true);
-      }, 100));
-      this.point = point;
-      this.chart.axis('increase_value', {
-        label: null,
-        grid: null
-      });
-    };
-    this.handleAutoRange = (data, summaryColumnData) => {
-      const {
-        chart
-      } = this.props;
-      const {
-        y_axis_summary_method,
-        y_axis_auto_range,
-        y_axis_min,
-        y_axis_max
-      } = chart.config;
-      let valueScaleOptions = {
-        formatter: value => {
-          if (y_axis_summary_method === _constants.CHART_SUMMARY_TYPE.DISTINCT_VALUES) {
-            return value;
-          }
-          return (0, _dtableUtils.getNumberDisplayString)(value, summaryColumnData);
-        }
-      };
-
-      // eslint-disable-next-line
-      if (y_axis_auto_range === undefined || y_axis_auto_range === null || y_axis_auto_range) {
-        valueScaleOptions = Object.assign(valueScaleOptions, {
-          nice: true
-        });
-      } else {
-        valueScaleOptions = Object.assign(valueScaleOptions, {
-          min: y_axis_min,
-          max: y_axis_max
-        });
-
-        // set the filter rule
-        this.chart.filter('value', value => {
-          return value >= y_axis_min;
-        });
-
-        // filter the data
-        this.chart.filterData(data);
-      }
-      this.chart.scale({
-        // Set the type of the name column so that g2 can draw correctly
-        name: {
-          type: 'cat'
-        },
-        value: valueScaleOptions
-      });
-    };
-    this.chart = null;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.renderAxisLabel(this.props.chart, this.props.tables);
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_chartUtils.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();
-      this.renderAxisLabel(this.props.chart, this.props.tables);
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-  }
-  render() {
-    const {
-      chart
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container ', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
-      ref: ref => this.container = ref
-    });
-  }
-}
-Compare.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 = Compare;

package/dist/view/wrapper/completeness.js

@@ -1,174 +0,0 @@
-"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 = Completeness;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
-var _lodashEs = require("lodash-es");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants = require("../../constants");
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-function Completeness(_ref) {
-  var _chartRef$current, _chartRef$current2;
-  let {
-    chart,
-    toggleRecords,
-    result: data,
-    tables,
-    summaryColumn,
-    globalTheme,
-    chartColorTheme
-  } = _ref;
-  const chartRef = (0, _react.useRef)(null);
-  const chartContainerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!chartRef.current) {
-      const chartComponent = new _chartComponent.default({});
-      chartRef.current = chartComponent;
-    }
-    const currentChart = chartRef.current;
-    currentChart.initLabelStroke(globalTheme);
-    let chartPaddingTop;
-    // avoid closure trap
-    function createChart() {
-      var _style_config$title;
-      let {
-        style_config,
-        config
-      } = chart;
-      chartPaddingTop = (_style_config$title = style_config.title) !== null && _style_config$title !== void 0 && _style_config$title.text ? 17 : 0;
-      const chartPaddingRight = config !== null && config !== void 0 && config.show_percentage ? 45 : 0;
-      const appendPadding = [chartPaddingTop, chartPaddingRight, 0, 0];
-      currentChart.initChart(chartContainerRef.current, {
-        appendPadding
-      });
-      currentChart.chart.on('interval:click', e => {
-        toggleRecords(e.data.data);
-      });
-    }
-    function drawChart() {
-      const currentData = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(currentData)) return;
-      currentChart.loadData(currentData);
-      draw(currentData);
-      requestAnimationFrame(() => {
-        currentChart.chart.render();
-        currentChart.renderAxisLabel(chart, tables);
-      });
-    }
-    function draw(data) {
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        label_font_size,
-        column_groupby_column_key,
-        type
-      } = chart.config;
-      const isGroup = type === _constants.CHART_TYPE.COMPLETENESS_GROUP ? true : false;
-      let currentIdx = 0;
-      const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
-      const colorMap = data.reduce((acc, cur) => {
-        if (cur.groupby && !acc[cur.groupby]) {
-          acc[cur.groupby] = colors[currentIdx++ % colors.length];
-        }
-        return acc;
-      }, {});
-      const cb1 = group_name => {
-        return group_name === 'rest' ? '#bdbdbd' : colors[0];
-      };
-      const cb2 = (groupby, group_name) => {
-        if (group_name === 'rest') {
-          return '#bdbdbd';
-        }
-        if (isGroup && column_groupby_column_key) {
-          return colorMap[groupby];
-        }
-        return colors[0];
-      };
-      const colorField = isGroup ? 'groupby*group_name' : 'group_name';
-      const colorFieldCb = isGroup ? cb2 : cb1;
-      const adjustType = isGroup ? [{
-        type: 'dodge',
-        dodgeBy: 'groupby',
-        marginRatio: 0.33
-      }, {
-        type: 'stack'
-      }] : {
-        type: 'stack'
-      };
-      const newData = currentChart.getChartGroupData(data, true);
-      let singleBarRadius, singleBarWidth;
-      const chartHeight = currentChart.chart.height - 6 - 10 - chartPaddingTop - 30;
-      if (!isGroup) {
-        singleBarWidth = Math.round(chartHeight / (2 * newData.length));
-      } else {
-        const maxGroupCount = (0, _lodashEs.maxBy)(newData, 'currentGroupCount');
-        singleBarWidth = Math.round(chartHeight / (2 * newData.length * maxGroupCount.currentGroupCount));
-      }
-      singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      isGroup ? currentChart.markLastForCompleteness(data) : currentChart.markFirstOrLast(data, 'last');
-      let {
-        show_percentage
-      } = chart.config;
-      show_percentage = (0, _utils.isBoolean)(show_percentage) ? show_percentage : true;
-      currentChart.drawLabels(newData);
-
-      // set Coord type
-      currentChart.chart.coordinate('rect').transpose();
-      currentChart.autoAdjustDataOptions(chart, data, summaryColumn);
-      currentChart.chart.interval().label(show_percentage ? 'value' : false, {
-        position: 'right',
-        offset: 6,
-        content: v => {
-          if (v.group_name === 'rest' && v.completedRate !== 'empty') return v.completedRate + '%';
-          return '';
-        },
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          ...currentChart.labelStroke
-        }
-      }).position('name*value').size(singleBarWidth).color(colorField, colorFieldCb).adjust(adjustType).tooltip('name*group_name*value', (name, group_name, value) => {
-        return {
-          title: name,
-          name: _intl.default.get(group_name),
-          value: value
-        };
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style('isLast', isLast => {
-        if (isLast) {
-          return {
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        }
-      });
-      currentChart.setToolTip();
-      currentChart.setNameLabelAndTooltip(theme, currentChart.labelCount);
-      currentChart.setValueLabel(theme);
-      currentChart.chart.interaction('element-highlight');
-      currentChart.setLegend(isGroup ? 'groupby' : 'group_name', theme, 'top-right');
-    }
-    createChart();
-    drawChart();
-    return () => {
-      currentChart.chart.destroy();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chart, chartColorTheme, data, globalTheme, summaryColumn, tables]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('sea-chart-completeness-chart sea-chart-container', {
-      'show-x-axis-label': (_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 ? void 0 : _chartRef$current.isShowXAxisLabel(chart),
-      'show-y-axis-label': (_chartRef$current2 = chartRef.current) === null || _chartRef$current2 === void 0 ? void 0 : _chartRef$current2.isShowYAxisLabel(chart)
-    }),
-    ref: chartContainerRef
-  });
-}