sea-chart 0.0.1 → 0.0.2

package/dist/utils/column-utils.js

@@ -0,0 +1,208 @@
+import { CellType, DEFAULT_DATE_FORMAT, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE } from 'dtable-utils';
+import { MIRROR_COLUMN_LIST } from '../constants';
+export const getDateColumnFormat = column => {
+  const format = column && column.data && column.data.format ? column.data.format : DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  return format;
+};
+export const isCheckboxColumn = column => {
+  let {
+    type,
+    data
+  } = column;
+  if (FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      result_type,
+      array_type
+    } = data || {};
+    if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+      return array_type === CellType.CHECKBOX;
+    }
+    return false;
+  }
+  return type === CellType.CHECKBOX;
+};
+export const getColumnByKey = (columnKey, columns) => {
+  if (!columnKey || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.key === columnKey);
+};
+export const getColumnByName = (columnName, columns) => {
+  if (!columnName || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.name === columnName);
+};
+export const getColumnByType = (columnType, columns) => {
+  if (!columnType || !Array.isArray(columns)) {
+    return null;
+  }
+  return columns.find(column => column.type === columnType);
+};
+export const getColumnByIndex = (index, columns) => {
+  if (Array.isArray(columns)) {
+    return columns[index];
+  }
+  if (typeof Immutable !== 'undefined') {
+    return columns.get(index);
+  }
+  return null;
+};
+export const isNameColumn = column => {
+  return column.key === '0000';
+};
+export const isUrlColumn = column => {
+  let {
+    type,
+    data
+  } = column;
+  if (FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      result_type,
+      array_type
+    } = data || {};
+    if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+      return array_type === CellType.URL;
+    }
+    return false;
+  }
+  return type === CellType.URL;
+};
+export const getLinkColumns = columns => {
+  if (!columns) {
+    return [];
+  }
+  return columns.filter(column => column.type === CellType.LINK && column.data);
+};
+export const calculateFormulaRows = (rows, columns) => {
+  const COMPUTED_COLUMN_TYPES = [CellType.FORMULA, CellType.LINK_FORMULA, CellType.LINK];
+  const formulaColumns = columns.filter(column => COMPUTED_COLUMN_TYPES.includes(column.type));
+  let formula_rows = {};
+  if (formulaColumns.length > 0) {
+    rows.forEach(row => {
+      let formulaRow = {};
+      formulaColumns.forEach(column => formulaRow[column.key] = row[column.key]);
+      formula_rows[row._id] = formulaRow;
+    });
+  }
+  return formula_rows;
+};
+export const handleCascadeColumn = function (optionValue, columnKey, columns, row) {
+  let updated = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  let processedColumns = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new Set();
+  // This column has already been processed, avoid circular dependency.
+  if (!Array.isArray(columns) || processedColumns.has(columnKey)) {
+    return updated;
+  }
+  processedColumns.add(columnKey);
+  const singleSelectColumns = columns.filter(column => column.type === CellType.SINGLE_SELECT);
+  for (let i = 0; i < singleSelectColumns.length; i++) {
+    const singleSelectColumn = singleSelectColumns[i];
+    const {
+      data: {
+        cascade_column_key,
+        cascade_settings
+      }
+    } = singleSelectColumn;
+    if (cascade_column_key === columnKey) {
+      const {
+        key: childColumnKey
+      } = singleSelectColumn;
+      const childColumnOptions = cascade_settings[optionValue];
+      const childColumnCellValue = row[childColumnKey];
+      const cellValueInOptions = childColumnOptions && childColumnOptions.includes(childColumnCellValue);
+      if (!cellValueInOptions) {
+        updated[childColumnKey] = '';
+        handleCascadeColumn('', childColumnKey, columns, row, updated, processedColumns);
+      }
+    }
+  }
+  return updated;
+};
+export const isFrozen = column => {
+  if (!column) return false;
+  return column.frozen === true;
+};
+export const findLastFrozenColumnIndex = columns => {
+  for (let i = 0; i < columns.length; i++) {
+    if (isFrozen(columns[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+export const isStatisticMapColumn = column => {
+  if (!column) return false;
+  const {
+    type,
+    data
+  } = column;
+  if (type === CellType.GEOLOCATION) {
+    const {
+      geo_format
+    } = data || {};
+    if (geo_format === 'lng_lat' || geo_format === 'country_region') {
+      return false;
+    }
+    return true;
+  }
+  if (FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      result_type,
+      array_type,
+      array_data
+    } = data || {};
+    if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
+      return false;
+    }
+    const {
+      geo_format
+    } = array_data || {};
+    if (geo_format === 'lng_lat' || geo_format === 'country_region') {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};
+export const isStatisticWorldMapColumn = column => {
+  if (!column) return false;
+  const {
+    type,
+    data
+  } = column;
+  if (type === CellType.TEXT) return true;
+  if (type === CellType.GEOLOCATION) {
+    const {
+      geo_format
+    } = data || {};
+    if (geo_format === 'country_region') {
+      return true;
+    }
+  }
+  if (FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      data
+    } = column;
+    const {
+      result_type,
+      array_type,
+      array_data
+    } = data || {};
+    if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
+      return false;
+    }
+    const {
+      geo_format
+    } = array_data || {};
+    if (geo_format === 'country_region') {
+      return true;
+    }
+  }
+  return false;
+};
+export const isStatisticMirrorColumn = column => {
+  if (!column) return false;
+  return MIRROR_COLUMN_LIST.includes(column.type);
+};

package/{lib → dist}/utils/custom-g2.js

@@ -347,7 +347,7 @@ registerInteraction('element-range-highlight', {
   }],
   start: [{
     trigger: 'plot:mousedown',
-    isEnable: function isEnable(context) {
+    isEnable: function (context) {
       return !context.isInShape('mask');
     },
     action: ['rect-mask:start', 'rect-mask:show']
@@ -373,7 +373,7 @@ registerInteraction('element-range-highlight', {
     action: ['rect-mask:moveEnd']
   }, {
     trigger: 'document:mouseup',
-    isEnable: function isEnable(context) {
+    isEnable: function (context) {
       return !context.isInPlot();
     },
     action: ['element-range-highlight:clear', 'rect-mask:end', 'rect-mask:hide']
@@ -577,13 +577,13 @@ function isWheelDown(event) {
 registerInteraction('view-zoom', {
   start: [{
     trigger: 'plot:mousewheel',
-    isEnable: function isEnable(context) {
+    isEnable: function (context) {
       return isWheelDown(context.event);
     },
     action: 'scale-zoom:zoomOut'
   }, {
     trigger: 'plot:mousewheel',
-    isEnable: function isEnable(context) {
+    isEnable: function (context) {
       return !isWheelDown(context.event);
     },
     action: 'scale-zoom:zoomIn'
@@ -602,11 +602,11 @@ registerInteraction('sibling-tooltip', {
 export * from '@antv/g2/esm/core';
 
 // 一些工具方法导出
-export var Util = {
-  translate: translate,
-  rotate: rotate,
-  zoom: zoom,
-  transform: transform,
-  getAngle: getAngle,
-  polarToCartesian: polarToCartesian
+export const Util = {
+  translate,
+  rotate,
+  zoom,
+  transform,
+  getAngle,
+  polarToCartesian
 };

package/{lib → dist}/utils/date-translate.js

@@ -1,16 +1,16 @@
 import intl from '../intl';
-var zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
-var zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
-var enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
-var frFR = require('@seafile/seafile-calendar/lib/locale/fr_FR');
-var deDE = require('@seafile/seafile-calendar/lib/locale/de_DE');
-var esES = require('@seafile/seafile-calendar/lib/locale/es_ES');
-var plPL = require('@seafile/seafile-calendar/lib/locale/pl_PL');
-var csCZ = require('@seafile/seafile-calendar/lib/locale/cs_CZ');
-var ruRU = require('@seafile/seafile-calendar/lib/locale/ru_RU');
+const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
+const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
+const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
+const frFR = require('@seafile/seafile-calendar/lib/locale/fr_FR');
+const deDE = require('@seafile/seafile-calendar/lib/locale/de_DE');
+const esES = require('@seafile/seafile-calendar/lib/locale/es_ES');
+const plPL = require('@seafile/seafile-calendar/lib/locale/pl_PL');
+const csCZ = require('@seafile/seafile-calendar/lib/locale/cs_CZ');
+const ruRU = require('@seafile/seafile-calendar/lib/locale/ru_RU');
 function translateCalendar(lang) {
-  var locale = lang ? lang : 'en';
-  var language;
+  const locale = lang ? lang : 'en';
+  let language;
   switch (locale) {
     case 'zh-cn':
       language = zhCN;

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/{lib → dist}/utils/options-utils.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
-var generatorCommonOption = function generatorCommonOption() {
-  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var selectValue = arguments.length > 2 ? arguments[2] : undefined;
-  var type = Object.prototype.toString.call(option);
-  var validOption = option,
+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;
@@ -16,12 +16,13 @@ var generatorCommonOption = function generatorCommonOption() {
   } else {
     isSelectOption = option.name === selectValue;
   }
-  var _validOption = validOption,
-    name = _validOption.name,
-    displayName = _validOption.displayName,
-    disabled = _validOption.disabled,
-    optionType = _validOption.type,
-    isDuplicate = _validOption.isDuplicate;
+  const {
+    name,
+    displayName,
+    disabled,
+    type: optionType,
+    isDuplicate
+  } = validOption;
   if (optionType === 'divide') {
     return {
       value: validOption,
@@ -38,8 +39,8 @@ var generatorCommonOption = function generatorCommonOption() {
     value: validOption,
     key: "".concat(name, "-").concat(index),
     type: optionType,
-    name: name,
-    isDuplicate: isDuplicate,
+    name,
+    isDuplicate,
     label: /*#__PURE__*/React.createElement("div", {
       className: classnames('common-select-option', {
         'disabled': disabled
@@ -53,9 +54,7 @@ var generatorCommonOption = function generatorCommonOption() {
     }, displayName || name))
   };
 };
-export var generatorCommonOptions = function generatorCommonOptions(options, selectValue) {
+export const generatorCommonOptions = (options, selectValue) => {
   if (!Array.isArray(options)) return [];
-  return options.map(function (option, index) {
-    return generatorCommonOption(option, index, selectValue);
-  });
+  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,169 @@
+import React from 'react';
+import classnames from 'classnames';
+import shallowEqual from 'shallowequal';
+import context from '../context';
+import intl from '../intl';
+import { Loading } from '../components';
+import { ChartUtils } from '../utils';
+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,
+        isStatisticalData
+      } = _this.props;
+      const {
+        data
+      } = _this.state;
+      if (!isNeedRequestData) {
+        ChartUtils.calculateStaticChart(tables, chart, data, _this.callback);
+        return;
+      }
+      ChartUtils.calculateChart(chart, tables, _this.callback, isStatisticalData);
+    };
+    this.state = {
+      isCalculated: false,
+      data: null,
+      errorMessage: '',
+      tipMessage: ''
+    };
+    console.log(props);
+    context.init(props);
+  }
+  componentDidMount() {
+    const lang = context.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/{lib/layout → dist/view}/title/index.css

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