sea-chart 0.0.1-beta

package/dist/utils/index.js

@@ -0,0 +1,48 @@
+import ObjectUtils from './object-utils';
+import chartColumn2SqlColumn, { summaryMethodColumn2SqlColumn } from './column-2-sql-column';
+import ChartUtils from './chart-utils';
+import { GENERIC_KEY_2_SIMILAR_KEYS } from '../constants';
+import ChartDataSQL from './chart-data-sql';
+export { generatorCommonOptions } from './options-utils';
+export { getColumnOptions } from 'dtable-utils';
+export { getClientFormulaDisplayString, getClientLinkDisplayString } from './cell-format-utils';
+export { generateChartConfig } from './chart';
+export { getKnownCollaboratorByEmail, getKnownCollaboratorsByEmails, generateDefaultUser } from './collaborator-utils';
+export { getDateColumnFormat, isCheckboxColumn, getColumnByKey, getColumnByName, getColumnByType, getColumnByIndex, isNameColumn, isUrlColumn, getLinkColumns, calculateFormulaRows, handleCascadeColumn, isFrozen, findLastFrozenColumnIndex, isStatisticMapColumn, isStatisticWorldMapColumn, isStatisticMirrorColumn } from './column-utils';
+export { generatorKey } from './key-generator';
+export { translateCalendar } from './date-translate';
+export const isBoolean = val => {
+  return typeof val === 'boolean';
+};
+export const getSimilarKeys = genericKey => {
+  const similarKeys = GENERIC_KEY_2_SIMILAR_KEYS[genericKey];
+  return similarKeys || [];
+};
+export const getChartConfigValueFromKeys = (keys, object) => {
+  // eslint-disable-next-line
+  const existKey = keys.find(key => ObjectUtils.hasOwnProperty(object, key));
+  return existKey ? object[existKey] : null;
+};
+export const getChartConfigValueByKey = (key, object) => {
+  const similarKeys = getSimilarKeys(key);
+  if (!Array.isArray(similarKeys) || similarKeys.length === 0) {
+    // get value by the given 'genericKey' directly when has no similar keys.
+    // eslint-disable-next-line
+    return ObjectUtils.hasOwnProperty(object, key) ? object[key] : null;
+  }
+
+  // try to get value from the similar keys
+  return getChartConfigValueFromKeys(similarKeys, object);
+};
+export const eventStopPropagation = event => {
+  if (!event) return;
+  event.stopPropagation();
+  event.preventDefault && event.preventDefault();
+  event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+};
+export const getEventClassName = e => {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
+};
+export { ObjectUtils, chartColumn2SqlColumn, summaryMethodColumn2SqlColumn, ChartUtils, ChartDataSQL };

package/dist/utils/key-generator.js

@@ -0,0 +1,13 @@
+const generatorBase64Code = function () {
+  let keyLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+  let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz0123456789';
+  let key = '';
+  for (let i = 0; i < keyLength; i++) {
+    key += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return key;
+};
+export const generatorKey = function () {
+  let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+  return generatorBase64Code(length);
+};

package/dist/utils/object-utils.js

@@ -0,0 +1,45 @@
+class ObjectUtils {
+  static getDataType(data) {
+    let type = typeof data;
+    if (type !== 'object') {
+      return type;
+    }
+    return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, '$1');
+  }
+  static iterable(data) {
+    return ['Object', 'Array'].includes(this.getDataType(data));
+  }
+  static isObjectChanged(source, comparison) {
+    if (!this.iterable(source)) {
+      throw new Error("source should be a Object or Array , but got ".concat(this.getDataType(source)));
+    }
+    if (this.getDataType(source) !== this.getDataType(comparison)) {
+      return true;
+    }
+    const sourceKeys = Object.keys(source);
+    const comparisonKeys = Object.keys({
+      ...source,
+      ...comparison
+    });
+    if (sourceKeys.length !== comparisonKeys.length) {
+      return true;
+    }
+    return comparisonKeys.some(key => {
+      if (this.iterable(source[key])) {
+        return this.isObjectChanged(source[key], comparison[key]);
+      } else {
+        return source[key] !== comparison[key];
+      }
+    });
+  }
+  static isSameObject(source, comparison) {
+    if (!source || !comparison) return false;
+    return !this.isObjectChanged(source, comparison);
+  }
+  static hasOwnProperty(obj, propertyKey) {
+    if (!obj || !propertyKey) return false;
+    // eslint-disable-next-line
+    return Object.prototype.hasOwnProperty.call(obj, propertyKey);
+  }
+}
+export default ObjectUtils;

package/dist/utils/options-utils.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import classnames from 'classnames';
+const generatorCommonOption = function () {
+  let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let selectValue = arguments.length > 2 ? arguments[2] : undefined;
+  let type = Object.prototype.toString.call(option);
+  let validOption = option,
+    isSelectOption;
+  if (type !== '[object Object]') {
+    isSelectOption = option === selectValue;
+    validOption = {
+      name: String(option),
+      value: option
+    };
+  } else {
+    isSelectOption = option.name === selectValue;
+  }
+  const {
+    name,
+    displayName,
+    disabled,
+    type: optionType,
+    isDuplicate
+  } = validOption;
+  if (optionType === 'divide') {
+    return {
+      value: validOption,
+      key: "divide-".concat(index),
+      type: optionType,
+      name: '',
+      isDuplicate: false,
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "select-option-divide"
+      })
+    };
+  }
+  return {
+    value: validOption,
+    key: "".concat(name, "-").concat(index),
+    type: optionType,
+    name,
+    isDuplicate,
+    label: /*#__PURE__*/React.createElement("div", {
+      className: classnames('common-select-option', {
+        'disabled': disabled
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "common-select-option-icon"
+    }, isSelectOption && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-check-mark"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "common-select-option-name"
+    }, displayName || name))
+  };
+};
+export const generatorCommonOptions = (options, selectValue) => {
+  if (!Array.isArray(options)) return [];
+  return options.map((option, index) => generatorCommonOption(option, index, selectValue));
+};

package/dist/view/index.css

@@ -0,0 +1,53 @@
+.sea-chart-formatter {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sea-chart-formatter-tip {
+  background-color: #F5F5F5;
+  border-radius: 4px;
+}
+
+.sea-chart-formatter.error {
+  color: red;
+}
+
+.sea-chart-formatter .sea-chart-formatter-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sea-chart-formatter .sea-chart-table-formatter-container {
+  overflow: scroll;
+}
+
+.sea-chart-formatter .sea-chart-container {
+  flex: 1;
+  font-size: 12px;
+}
+
+.sea-chart-formatter .sea-chart-container.show-x-axis-label,
+.sea-chart-formatter .sea-chart-container.show-horizontal-axis-label {
+  padding-bottom: 20px;
+}
+
+.sea-chart-formatter .sea-chart-container.show-y-axis-label,
+.sea-chart-formatter .sea-chart-container.show-y-axis-left-label,
+.sea-chart-formatter .sea-chart-container.show-vertical-axis-label {
+  padding-left: 20px;
+}
+
+.sea-chart-formatter .sea-chart-container.show-y-axis-right-label {
+  padding-right: 20px;
+}
+
+.sea-chart-formatter .g2-html-annotation {
+  transform: translate(-50%, -50%);
+  width: fit-content;
+}

package/dist/view/index.js

@@ -0,0 +1,189 @@
+import React from 'react';
+import classnames from 'classnames';
+import shallowEqual from 'shallowequal';
+import intl from '../intl';
+import { Loading } from '../components';
+import { ChartUtils } from '../utils';
+import Context from '../context';
+import Title from './title';
+import Wrapper from './wrapper';
+import './index.css';
+class View extends React.PureComponent {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.callback = (errorMessage, tipMessage, data) => {
+      if (errorMessage) {
+        this.setState({
+          errorMessage,
+          tipMessage: '',
+          data: null,
+          isCalculated: true
+        });
+        return;
+      }
+      if (tipMessage) {
+        this.setState({
+          errorMessage: '',
+          tipMessage,
+          data: null,
+          isCalculated: true
+        });
+        return;
+      }
+      if (!data) {
+        this.setState({
+          errorMessage: '',
+          tipMessage: 'There_are_no_statistic_results_yet',
+          data: null,
+          isCalculated: true
+        });
+        return;
+      }
+      this.setState({
+        errorMessage: '',
+        tipMessage: '',
+        data,
+        isCalculated: true
+      });
+    };
+    this.calculateStatistic = function () {
+      let isNeedRequestData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      const {
+        tables,
+        chart,
+        dataAPI,
+        isStatisticalData
+      } = _this.props;
+      const {
+        data
+      } = _this.state;
+      if (!isNeedRequestData) {
+        ChartUtils.calculateStaticChart(tables, chart, data, _this.callback);
+        return;
+      }
+      ChartUtils.calculateChart(chart, dataAPI, tables, _this.callback, isStatisticalData);
+    };
+    this.state = {
+      isCalculated: false,
+      data: null,
+      errorMessage: '',
+      tipMessage: ''
+    };
+  }
+  componentDidMount() {
+    var _window$seaChart, _window$seaChart2;
+    const {
+      usersAPI,
+      context,
+      config,
+      eventBus,
+      collaborators
+    } = this.props;
+    if (!window.seaChart) {
+      window.seaChart = {};
+    }
+    if (!((_window$seaChart = window.seaChart) === null || _window$seaChart === void 0 ? void 0 : _window$seaChart.queryUsers)) {
+      window.seaChart.queryUsers = usersAPI;
+    }
+    if (!((_window$seaChart2 = window.seaChart) === null || _window$seaChart2 === void 0 ? void 0 : _window$seaChart2.context)) {
+      const validContext = context || new Context(eventBus, config);
+      Array.isArray(collaborators) && collaborators.forEach(collaborator => {
+        validContext.onlyUpdateCollaboratorsCache && validContext.onlyUpdateCollaboratorsCache(collaborator.email, collaborator);
+      });
+      window.seaChart.context = validContext;
+      const lang = validContext.getSetting('lang') || 'zh-cn';
+      intl.setLang(lang);
+    }
+    this.calculateStatistic();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      chart: oldChart
+    } = this.props;
+    const {
+      chart
+    } = nextProps;
+    if (shallowEqual(chart, oldChart)) return;
+    this.setState({
+      isCalculated: false
+    }, () => {
+      if (ChartUtils.isChartTypeChange(chart, oldChart)) {
+        this.calculateStatistic();
+        return;
+      }
+      if (ChartUtils.isChartStyleChange(chart, oldChart)) {
+        this.setState({
+          isCalculated: true
+        });
+        return;
+      }
+      if (ChartUtils.isChartSortChange(chart, oldChart)) {
+        this.calculateStatistic(false);
+        return;
+      }
+      this.calculateStatistic();
+    });
+  }
+  render() {
+    var _chart$config;
+    const {
+      chart,
+      className,
+      tables,
+      canvasStyle
+    } = this.props;
+    const {
+      data,
+      isCalculated,
+      errorMessage,
+      tipMessage
+    } = this.state;
+    const validClassName = classnames('sea-chart-formatter', className);
+    const tipBackgroundColorClassName = 'sea-chart-formatter-tip';
+    if (!isCalculated) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('loading', validClassName)
+      }, /*#__PURE__*/React.createElement(Loading, null));
+    }
+    if (errorMessage) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('error', validClassName, tipBackgroundColorClassName)
+      }, intl.get(errorMessage));
+    }
+    if (tipMessage) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('error', validClassName, tipBackgroundColorClassName)
+      }, intl.get(tipMessage));
+    }
+    if (ChartUtils.imEmptyChartResult(data)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('error', validClassName, tipBackgroundColorClassName)
+      }, intl.get('There_are_no_statistic_results_yet'));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: validClassName
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type, "-formatter-container"))
+    }, /*#__PURE__*/React.createElement(Title, {
+      chart: chart
+    }), /*#__PURE__*/React.createElement(Wrapper, {
+      chart: chart,
+      data: data,
+      tables: tables,
+      canvasStyle: canvasStyle
+    })));
+  }
+}
+View.defaultProps = {
+  isStatisticalData: true,
+  canvasStyle: {},
+  tables: [],
+  chart: {
+    id: '',
+    config: {},
+    style_config: {}
+  }
+};
+export default View;

package/dist/view/title/index.css

@@ -0,0 +1,3 @@
+.sea-chart-title {
+  margin-bottom: 14px;
+}

package/dist/view/title/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { isNumber } from 'dtable-utils';
+import classnames from 'classnames';
+import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, SUPPORT_TITLE_CHART_TYPES } from '../../constants';
+import './index.css';
+const Title = _ref => {
+  let {
+    chart,
+    className
+  } = _ref;
+  const getTitleStyle = useCallback(() => {
+    let style = {
+      fontSize: "".concat(DEFAULT_CHART_TITLE_FONT_SIZE, "px"),
+      fontWeight: DEFAULT_CHART_FONT_WEIGHT
+    };
+    if (!chart || !chart.style_config || !chart.style_config.title) {
+      return style;
+    }
+    const {
+      font_size,
+      font_weight,
+      horizontal_align
+    } = chart.style_config.title;
+    if (isNumber(font_size)) {
+      style.fontSize = font_size < 0 ? 0 : "".concat(font_size, "px");
+    }
+    if (CHART_SUPPORT_FONT_WEIGHTS.includes(font_weight)) {
+      style.fontWeight = font_weight;
+    }
+    style.textAlign = horizontal_align && HORIZONTAL_ALIGNS.includes(horizontal_align) ? horizontal_align : HORIZONTAL_ALIGN.LEFT;
+    return style;
+  }, [chart]);
+  if (!chart) return null;
+  const {
+    type: chartType
+  } = chart.config;
+  const title = chart.style_config && chart.style_config.title;
+  const text = title && title.text;
+  if (!SUPPORT_TITLE_CHART_TYPES.includes(chartType) || !text) return null;
+  const style = getTitleStyle();
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sea-chart-title', className),
+    style: style
+  }, text);
+};
+export default Title;

package/dist/view/wrapper/area.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
+import intl from '../../intl';
+import { ChartUtils } from '../../utils';
+import ChartComponent from './chart-component';
+class Area extends ChartComponent {
+  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('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.formatEmptyName(data, '', intl.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.loadData(data);
+      this.draw(data);
+      this.chart.render();
+    };
+    this.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        theme
+      } = this.props;
+      const {
+        y_axis_summary_type,
+        y_axis_summary_method,
+        y_axis_label_color,
+        y_axis_show_value,
+        label_font_size
+      } = chart.config;
+      const chartBarColor = y_axis_label_color || '#2a67d1';
+      this.drawLabels(data);
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      this.chart.line().position('name*value').color(chartBarColor);
+      this.chart.point().label(y_axis_show_value ? 'value' : false, {
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: '#6e6e6e'
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          name
+        };
+      }).shape('circle').style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      this.chart.area().position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          name,
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method])
+        };
+      });
+      this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      this.setNameLabelAndTooltip(theme, this.labelCount);
+      this.setValueLabel(theme);
+      this.chart.interaction('active-region');
+    };
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.renderAxisLabel(this.props.chart, this.props.tables);
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+      this.renderAxisLabel(prevProps.chart, prevProps.tables);
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.chart.destroy();
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('sea-chart-container w-100', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+Area.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object,
+  toggleRecords: PropTypes.func
+};
+export default Area;