sea-chart 2.0.1 → 2.0.2

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

@@ -1,175 +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 _constants = require("../../constants");
-var _utils = require("../../utils");
-var _colorUtils = require("../../utils/color-utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _horizontalComponent = _interopRequireDefault(require("./horizontal-component"));
-class HorizontalBar extends _horizontalComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        display_data
-      } = chart.config;
-      const appendPadding = [0, display_data ? 17 : 0, 0, 0]; // used to display value on the right
-      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,
-        customRender
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.loadData(data);
-      this.draw(data);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      requestAnimationFrame(() => {
-        this.chart.render();
-        this.renderHorizontalLabel(this.props.chart, this.props.tables);
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        summaryColumn,
-        globalTheme,
-        chartColorTheme,
-        tables
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        table_id,
-        horizontal_axis_summary_type,
-        horizontal_axis_summary_method,
-        y_axis_summary_type,
-        y_axis_column_key,
-        y_axis_summary_column_key,
-        color_option,
-        horizontal_axis_label_color_rules,
-        horizontal_axis_label_color,
-        display_data,
-        label_font_size
-      } = chart.config;
-
-      // y-axis label width：6 + 8
-      const chartHeight = this.chart.height - 6 - 10;
-      const singleBarWidth = Math.round(chartHeight / (2 * data.length));
-      const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      let chartBarColor = horizontal_axis_label_color || _constants.CHART_STYLE_COLORS[0];
-      if (chartColorTheme) {
-        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
-      }
-      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
-      const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
-      data.reverse();
-      this.drawLabels(data);
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-      this.chart.interval().label(display_data ? 'value' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          ...this.labelStroke
-        }
-      }).position('name*value').color('value', value => {
-        const color = (0, _colorUtils.getLabelColor)({
-          chart: chart.config,
-          colorRules,
-          value
-        });
-        return color || chartBarColor;
-      }).size(singleBarWidth).tooltip('name*value', (name, value) => {
-        return {
-          title,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
-          name
-        };
-      }).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style('value', value => {
-        return {
-          radius: [singleBarRadius, singleBarRadius, 0, 0]
-        };
-      });
-      this.chart.legend(false);
-      this.setToolTip();
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      this.chart.coordinate().transpose();
-      this.chart.interaction('element-highlight');
-    };
-    this.chart = null;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    super.componentDidMount();
-  }
-  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();
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-    super.componentWillUnmount();
-  }
-  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
-    });
-  }
-}
-HorizontalBar.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 = HorizontalBar;

package/dist/view/wrapper/horizontal-component.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _dtableUtils = require("dtable-utils");
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class HorizontalComponent extends _chartComponent.default {
-  constructor() {
-    super(...arguments);
-    this.renderHorizontalLabel = (chart, tables) => {
-      var _this$chart;
-      if (!this.chart || !chart) return;
-      let {
-        table_id,
-        x_axis_column_key,
-        y_axis_summary_column_key,
-        vertical_axis_label_position,
-        horizontal_axis_label_position,
-        y_axis_summary_type,
-        show_vertical_axis_label,
-        show_horizontal_axis_label
-      } = chart.config;
-      const table = (0, _dtableUtils.getTableById)(tables, table_id);
-      const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || {
-        bottom: 0
-      };
-      const textColor = '#999999';
-      const xAxisID = `chart-x-axis-label_${chart.id}`;
-      const chartContainer = this.chart.getCanvas().get('container');
-      const xLabel = chartContainer.querySelector(`#${xAxisID}`);
-      if (!xLabel && show_horizontal_axis_label) {
-        const div = document.createElement('div');
-        div.id = xAxisID;
-        div.className = 'chart-axis-label';
-        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _intl.default.get('Amount');
-        } else {
-          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_summary_column_key);
-          div.innerHTML = `${column ? column.name : ''}`;
-        }
-        div.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${horizontal_axis_label_position}; bottom: -20px; position: absolute`);
-        chartContainer.appendChild(div);
-      }
-      if (xLabel && show_horizontal_axis_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${horizontal_axis_label_position}; bottom: -20px; position: absolute`);
-      }
-      if (xLabel && !show_horizontal_axis_label) {
-        xLabel.parentNode.removeChild(xLabel);
-      }
-      const yAxisID = `chart-y-axis-label_${chart.id}`;
-      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
-      if (!yLabel && show_vertical_axis_label) {
-        const div = document.createElement('div');
-        div.id = yAxisID;
-        div.className = 'chart-axis-label';
-        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key) || {};
-        div.innerHTML = column.name || '';
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2}px) rotate(-90deg)`);
-        chartContainer.appendChild(div);
-      }
-      if (yLabel && show_horizontal_axis_label) {
-        const containerHeight = chartContainer.offsetHeight;
-        let textAlign = 'center';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
-        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
-      }
-      if (yLabel && !show_horizontal_axis_label) {
-        yLabel.parentNode.removeChild(yLabel);
-      }
-    };
-    this.isShowVerticalAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_vertical_axis_label);
-    };
-    this.isShowHorizontalAxisLabel = chart => {
-      return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
-    };
-  }
-}
-exports.default = HorizontalComponent;

package/dist/view/wrapper/line-group.js

@@ -1,219 +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 _constants = require("dtable-ui-component/lib/constants");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants2 = require("../../constants");
-var _colorRules = require("../../constants/color-rules");
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class LineGroup extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        y_axis_show_value
-      } = chart.config;
-      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
-      this.initChart(this.container, {
-        appendPadding
-      });
-      this.chart.on('point:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-    };
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
-    };
-    this.drawChart = () => {
-      let {
-        result: data,
-        customRender
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.chart.scale(this.groupName, {
-        type: 'cat'
-      });
-      this.loadData(data);
-      this.draw(data);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      requestAnimationFrame(() => {
-        this.chart.render();
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        summaryColumn,
-        columnGroupbyColumn,
-        globalTheme,
-        chartColorTheme
-      } = this.props;
-      const theme = _constants2.CHART_THEME_COLOR[globalTheme];
-      const {
-        y_axis_show_value,
-        label_font_size,
-        line_type,
-        y_axis_summary_method,
-        color_theme
-      } = chart.config;
-      const chartBarColor = this.groupName;
-      const newData = this.getChartGroupData(data);
-      this.drawLabels(newData);
-      const {
-        display_goal_line,
-        goal_label,
-        goal_value
-      } = chart.style_config || {};
-      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
-
-      const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === _constants.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      const isSmooth = line_type === _constants2.CHART_LINE_TYPES[1];
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-      this.chart.scale({
-        group_name: {
-          type: 'cat'
-        }
-      });
-      this.chart.line().label(y_axis_show_value ? 'value' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          stroke: '#fff',
-          lineWidth: 1
-        }
-      }).animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).position('name*value').color(chartBarColor, group_name => {
-        return this.colorMap[group_name];
-      }).shape(isSmooth ? 'smooth' : 'line').style({
-        lineWidth: 2,
-        opacity: 1
-      }).tooltip('group_name*name*value', (group_name, name, value) => {
-        return {
-          title: !name && typeof name !== 'number' ? _intl.default.get(_constants2.EMPTY_NAME) : name,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name: !group_name && typeof group_name !== 'number' ? _intl.default.get(_constants2.EMPTY_NAME) : group_name
-        };
-      });
-      let point;
-      point = this.chart.point().position('name*value').color(chartBarColor, group_name => {
-        return this.colorMap[group_name];
-      }).animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).shape('circle').size(3).style({
-        stroke: 0,
-        fillOpacity: 1,
-        opacity: y_axis_show_value ? 1 : 0
-      }).tooltip(false);
-
-      // this.chart.on('tooltip:show', () => {
-      //   if (line.styleOption.cfg.opacity === 0.3) return;
-      //   line.style({
-      //     opacity: 0.3,
-      //     lineWidth: 3,
-      //   });
-      //   if (point) point.style({
-      //     fillOpacity: 0.3,
-      //     stroke: 0,
-      //   });
-      //   this.chart.render();
-      // });
-
-      // this.chart.on('tooltip:hide', () => {
-      //   if (line.styleOption.cfg.opacity === 1) return;
-      //   line.style({
-      //     opacity: 1,
-      //     lineWidth: 3,
-      //   });
-      //   if (point) point.style({
-      //     fillOpacity: 1,
-      //     stroke: 0,
-      //   });
-      //   this.chart.render();
-      // });
-
-      if (display_goal_line && goal_label && goal_value) {
-        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
-      }
-      this.setToolTipForLine();
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      this.setLegend(this.groupName, theme, 'top-right');
-    };
-    this.chart = null;
-    this.groupName = 'group_name';
-    this.needRenderAxisLabel = true;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.renderAxisLabel(this.props.chart, this.props.tables);
-    super.componentDidMount();
-  }
-  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();
-      this.renderAxisLabel(prevProps.chart, prevProps.tables);
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-    super.componentWillUnmount();
-  }
-  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
-    });
-  }
-}
-LineGroup.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 = LineGroup;