sea-chart 0.0.1 → 0.0.3

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

@@ -0,0 +1,117 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, UncontrolledTooltip, Button } from 'reactstrap';
+import classnames from 'classnames';
+import { CHART_TYPES, CHART_TYPE_SHOW, ZH_CN_SUPPORT_CHARTS, CHART_TYPE_IMAGE } from '../../constants';
+import { eventStopPropagation } from '../../utils';
+import context from '../../context';
+import intl from '../../intl';
+import Icon from '../icon';
+import './index.css';
+const TypesDialog = _ref => {
+  let {
+    type,
+    onToggle: propsOnToggle,
+    onChange
+  } = _ref;
+  const [currentCatIndex, setCurrentCatIndex] = useState(0);
+  const [selectedType, setType] = useState(type);
+  const notSupportStatisticTypes = useMemo(() => {
+    const lang = context.getSetting('lang');
+    return lang !== 'zh-cn' ? ZH_CN_SUPPORT_CHARTS : [];
+  }, []);
+  const seaChartTypeContainerRef = useRef(null);
+  useEffect(() => {
+    const selectStatisticIndex = CHART_TYPES.findIndex(item => item.children.includes(type));
+    const currentCatIndex = selectStatisticIndex < 0 ? 0 : selectStatisticIndex;
+    if (currentCatIndex === 0) return;
+    if (!seaChartTypeContainerRef.current) return;
+    seaChartTypeContainerRef.current.scrollTop = document.getElementById("chart-type-".concat(currentCatIndex + 1)).offsetTop - 60;
+  }, [type]);
+  const onToggle = useCallback(() => {
+    propsOnToggle();
+  }, [propsOnToggle]);
+  const modifyCurrentCatIndex = useCallback((event, index) => {
+    eventStopPropagation(event);
+    setCurrentCatIndex(index);
+    if (!seaChartTypeContainerRef.current) return;
+    seaChartTypeContainerRef.current.scrollTop = document.getElementById("chart-type-".concat(index + 1)).offsetTop - 60;
+  }, [seaChartTypeContainerRef]);
+  const onTypeChange = useCallback((event, type, index) => {
+    eventStopPropagation(event);
+    if (type === selectedType) return;
+    setType(type);
+    setCurrentCatIndex(index);
+  }, [selectedType]);
+  const onSubmit = useCallback(() => {
+    onChange(selectedType);
+    onToggle();
+  }, [selectedType, onToggle, onChange]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    toggle: onToggle,
+    className: "sea-chart-types-dialog",
+    zIndex: 1048
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: onToggle
+  }, intl.get('Edit_type')), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "sea-chart-types-body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-types-container d-flex flex-column h-100"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "sea-chart-chart-categories-nav flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled"
+  }, CHART_TYPES.map((item, index) => {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      className: "px-4 py-2 sea-chart-chart-cat-nav-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "sea-chart-icon-".concat(item.icon, "-container"),
+      className: classnames('sea-chart-chart-cat-nav-item-container', {
+        'sea-chart-icon-highlight': currentCatIndex === index
+      }),
+      onClick: event => modifyCurrentCatIndex(event, index)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      symbol: item.icon,
+      className: "chart-icon w-100 h-100"
+    })), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+      placement: "bottom",
+      target: "sea-chart-icon-".concat(item.icon, "-container"),
+      delay: 0,
+      fade: false
+    }, intl.get(item.name)));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-fill o-auto sea-chart-type-container",
+    ref: seaChartTypeContainerRef
+  }, CHART_TYPES.map((item, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "sea-chart-type-".concat(index),
+      className: "mb-7"
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "sea-chart-type-title m-0",
+      id: "chart-type-".concat(index + 1)
+    }, intl.get(item.name)), /*#__PURE__*/React.createElement("div", {
+      className: "d-flex flex-wrap"
+    }, item.children.map(chartType => {
+      if (notSupportStatisticTypes.includes(chartType)) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        key: chartType,
+        onClick: event => onTypeChange(event, chartType, index),
+        className: "sea-chart-type-item ".concat(selectedType === chartType ? 'selected' : '')
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "sea-chart-type-description"
+      }, intl.get(CHART_TYPE_SHOW[chartType])), /*#__PURE__*/React.createElement("div", {
+        className: "sea-chart-type-image-container"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: CHART_TYPE_IMAGE[chartType],
+        alt: "",
+        className: "sea-chart-type-demo-image"
+      })));
+    })));
+  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: onToggle
+  }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    onClick: onSubmit
+  }, intl.get('Submit'))));
+};
+export default TypesDialog;

package/{lib → dist}/constants/geolocation.js

@@ -1,4 +1,4 @@
-export var GEOLOCATION_FORMAT_MAP = {
+export const GEOLOCATION_FORMAT_MAP = {
   LNG_LAT: 'lng_lat',
   MAP_SELECTION: 'map_selection',
   GEOLOCATION: 'geolocation',
@@ -7,5 +7,5 @@ export var GEOLOCATION_FORMAT_MAP = {
   PROVINCE_CITY: 'province_city',
   PROVINCE: 'province'
 };
-export var GEOLOCATION_FORMAT_CITY = 'city';
-export var GEOLOCATION_FORMAT_COUNTY = 'county';
+export const GEOLOCATION_FORMAT_CITY = 'city';
+export const GEOLOCATION_FORMAT_COUNTY = 'county';

package/dist/constants/index.js

@@ -0,0 +1,184 @@
+import { CellType, DEFAULT_NUMBER_FORMAT } from 'dtable-utils';
+import { GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from './geolocation';
+import { CHART_KEY, GENERIC_KEY, GENERIC_KEY_2_SIMILAR_KEYS } from './model';
+import { STYLE_COLORS, HORIZONTAL_ALIGN, HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN_SHOW } from './style';
+import { CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES } from './type';
+import { CHART_TYPE_IMAGE } from './type-image';
+export const ZH_CN_SUPPORT_CHARTS = [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE];
+export const SUPPORT_DATA_SORT_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.LINE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.AREA, CHART_TYPE.TREE_MAP];
+export const X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES = [CHART_TYPE.TABLE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.TREE_MAP];
+export const SUPPORT_TITLE_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.COMBINATION, CHART_TYPE.DASHBOARD, CHART_TYPE.TREE_MAP];
+export const CHART_CHART_MAP = {
+  [CHART_TYPE.BAR]: CHART_TYPE.BAR,
+  [CHART_TYPE.PIE]: CHART_TYPE.PIE,
+  [CHART_TYPE.LINE]: CHART_TYPE.LINE,
+  [CHART_TYPE.TABLE]: CHART_TYPE.TABLE
+};
+export const CHART_SUMMARY_TYPE = {
+  COUNT: 'count',
+  ADVANCED: 'advanced',
+  DAY: 'day',
+  WEEK: 'week',
+  QUARTER: 'quarter',
+  MONTH: 'month',
+  YEAR: 'year',
+  SUM: 'Sum',
+  MAX: 'Max',
+  MIN: 'Min',
+  MEAN: 'Mean',
+  PROVINCE: GEOLOCATION_FORMAT_MAP.PROVINCE,
+  CITY: GEOLOCATION_FORMAT_CITY,
+  DISTRICT: 'district',
+  DISTINCT_VALUES: 'distinct_values',
+  ROW_COUNT: 'Row_count'
+};
+export const CHART_SUMMARY_SHOW = {
+  'count': 'Counting',
+  'advanced': 'Summarize_a_field',
+  'day': 'By_day',
+  'week': 'By_week',
+  'month': 'By_month',
+  'quarter': 'By_quarter',
+  'year': 'By_year',
+  'Sum': 'Sum',
+  'Max': 'Max',
+  'Min': 'Min',
+  'Mean': 'Mean',
+  'Distinct_values': 'Number_of_distinct_values',
+  'province': 'By_province',
+  'city': 'By_city',
+  'district': 'By_district',
+  'Row_count': 'Row_count'
+};
+export const PIE_CHART_COLORS = ['#46A1FD', '#4ECCCB', '#59CB74', '#FBD44A', '#F4667C', '#9860E5', '#9F8CF1', '#DC82D2', '#EAA775', '#ADDF84', '#85E0BE', '#89D2EA'];
+export const CHART_SUMMARY_CALCULATION_METHOD = ['Sum', 'Max', 'Min', 'Mean', 'Distinct_values'];
+export const BASIC_NUMBER_CARD_CALCULATION_METHOD = 'Row_count';
+export const CHART_DATE_SUMMARY_CALCULATION_METHOD = ['Max', 'Min', 'Distinct_values'];
+export const CHART_SUPPORT_COLUMNS = [CellType.DATE, CellType.SINGLE_SELECT, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR, CellType.TEXT, CellType.NUMBER, CellType.FORMULA, CellType.LINK_FORMULA, CellType.GEOLOCATION, CellType.LINK, CellType.MTIME, CellType.CTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.CHECKBOX, CellType.RATE, CellType.DURATION];
+export const CHART_SUPPORT_SORT_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.SINGLE_SELECT, CellType.FORMULA, CellType.LINK_FORMULA, CellType.CTIME, CellType.MTIME, CellType.RATE, CellType.DURATION];
+export const LABEL_COLORS = ['#2a67d1', '#4ecccb', '#59cb74', '#fbd44a', '#f4667c', '#9860e5', '#9f8cf1', '#dc82d2', '#eaa775', '#addf84', '#85e0be', '#89d2ea'];
+export const DATE_GRANULATES = [CHART_SUMMARY_TYPE.DAY, CHART_SUMMARY_TYPE.WEEK, CHART_SUMMARY_TYPE.MONTH, CHART_SUMMARY_TYPE.QUARTER, CHART_SUMMARY_TYPE.YEAR];
+export const GEOLOCATION_GRANULATES = [CHART_SUMMARY_TYPE.PROVINCE, CHART_SUMMARY_TYPE.CITY, CHART_SUMMARY_TYPE.DISTRICT];
+export const CHART_SUMMARY_TYPES = [CHART_SUMMARY_TYPE.COUNT, CHART_SUMMARY_TYPE.ADVANCED];
+export const CHART_DATA_SORT_TYPE = {
+  NOT_SORTED: 'not_sorted',
+  ASCENDING: 'ascending',
+  DESCENDING: 'descending'
+};
+export const CHART_DATA_SORT_TYPES = [CHART_DATA_SORT_TYPE.NOT_SORTED, CHART_DATA_SORT_TYPE.ASCENDING, CHART_DATA_SORT_TYPE.DESCENDING];
+export const CHART_DATA_SORT_TYPE_SHOW = {
+  [CHART_DATA_SORT_TYPE.NOT_SORTED]: 'Not_sorted',
+  [CHART_DATA_SORT_TYPE.ASCENDING]: 'Ascending',
+  [CHART_DATA_SORT_TYPE.DESCENDING]: 'Descending'
+};
+export const LABEL_POSITION_TYPE = {
+  LEFT: 'left',
+  CENTER: 'center',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  TOP: 'top'
+};
+export const X_LABEL_POSITIONS = [LABEL_POSITION_TYPE.LEFT, LABEL_POSITION_TYPE.CENTER, LABEL_POSITION_TYPE.RIGHT];
+export const Y_LABEL_POSITIONS = [LABEL_POSITION_TYPE.BOTTOM, LABEL_POSITION_TYPE.CENTER, LABEL_POSITION_TYPE.TOP];
+export const LABEL_POSITION_TYPE_SHOW = {
+  [LABEL_POSITION_TYPE.LEFT]: 'Left',
+  [LABEL_POSITION_TYPE.CENTER]: 'Center',
+  [LABEL_POSITION_TYPE.RIGHT]: 'Right',
+  [LABEL_POSITION_TYPE.BOTTOM]: 'Bottom',
+  [LABEL_POSITION_TYPE.TOP]: 'Top'
+};
+export const CHART_STYLE_SETTING_KEYS = ['x_axis_show_label', 'x_axis_label_position', 'y_axis_show_label', 'y_axis_label_position', 'y_axis_auto_range', 'y_axis_min', 'y_axis_max', 'y_axis_label_color', 'y_axis_show_value', 'label_font_size', 'increase_display_color', 'display_increase', 'display_increase_percentage', 'show_legend', 'minimum_slice_percent', 'label_format', 'label_position', 'display_label', 'horizontal_axis_label_color', 'display_data', 'name', 'y_axis_left_label_position', 'y_axis_right_label_position', 'show_y_axis_left_label', 'show_y_axis_right_label', 'y_axis_auto_range_left', 'y_axis_min_left', 'y_axis_max_left', 'y_axis_auto_range_right', 'y_axis_min_right', 'y_axis_max_right'];
+export const DEFAULT_LABEL_FONT_SIZE = 12;
+export const CHART_Y_GROUP_TYPE = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+export const CHART_DATE_COLUMN_LIST = [CellType.CTIME, CellType.MTIME, CellType.DATE];
+
+// label formats for pie, ring charts
+export const CHART_LABEL_FORMAT = {
+  PERCENT: 'percent',
+  VALUE: 'value',
+  VALUE_PERCENT: 'value_percent'
+};
+export const CHART_LABEL_FORMATS = [CHART_LABEL_FORMAT.PERCENT, CHART_LABEL_FORMAT.VALUE, CHART_LABEL_FORMAT.VALUE_PERCENT];
+export const CHART_LABEL_FORMAT_SHOW = {
+  [CHART_LABEL_FORMAT.PERCENT]: 'Percent',
+  [CHART_LABEL_FORMAT.VALUE]: 'Numeric_value',
+  [CHART_LABEL_FORMAT.VALUE_PERCENT]: 'Numeric_value_and_percent'
+};
+
+// label positions for pie, ring charts
+export const CHART_LABEL_POSITION = {
+  INSIDE: 'inside',
+  OUTSIDE: 'outside'
+};
+export const CHART_LABEL_POSITIONS = [CHART_LABEL_POSITION.INSIDE, CHART_LABEL_POSITION.OUTSIDE];
+export const CHART_LABEL_POSITION_SHOW = {
+  [CHART_LABEL_POSITION.INSIDE]: 'Inside_the_chart',
+  [CHART_LABEL_POSITION.OUTSIDE]: 'Outside_the_chart'
+};
+export const BAR_MAP_TO_HORIZONTAL_MAP = {
+  x_axis_column_key: 'vertical_axis_column_key',
+  x_axis_date_granularity: 'vertical_axis_date_granularity',
+  x_axis_geolocation_granularity: 'vertical_axis_geolocation_granularity',
+  x_axis_include_empty_cells: 'vertical_axis_include_empty',
+  y_axis_summary_type: 'horizontal_axis_summary_type',
+  y_axis_summary_method: 'horizontal_axis_summary_method',
+  y_axis_summary_column_key: 'horizontal_axis_column_key',
+  x_axis_show_label: 'show_vertical_axis_label',
+  x_axis_label_position: 'vertical_axis_label_position',
+  y_axis_show_label: 'show_horizontal_axis_label',
+  y_axis_label_position: 'horizontal_axis_label_position',
+  y_axis_show_value: 'display_data',
+  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'
+};
+export const DEFAULT_NUMBER_FORMAT_OBJECT = {
+  format: DEFAULT_NUMBER_FORMAT
+};
+export const EMPTY_NAME = 'Empty';
+export const CHART_THEME_COLOR = {
+  dark: {
+    textColor: '#ffffff',
+    gridColor: '#4E4E56',
+    labelColor: '#ffffff',
+    legendPageNavigatorMarkerColor: '#ffffff',
+    cardColor: '#ffffff'
+  },
+  light: {
+    textColor: '#6e6e6e',
+    gridColor: '#bfbfbf',
+    labelColor: '#000000',
+    legendPageNavigatorMarkerColor: '#000000',
+    cardColor: '#545454'
+  }
+};
+export const DTABLE_DB_SUMMARY_METHOD = {
+  MEAN: 'AVG',
+  MAX: 'MAX',
+  SUM: 'SUM',
+  MIN: 'MIN',
+  COUNT: 'COUNT',
+  ROW_COUNT: 'COUNT',
+  DISTINCT_VALUES: 'DISTINCT_VALUES'
+};
+export const LEGEND_DIRECTION = {
+  VERTICAL: 'vertical'
+};
+export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIME, CellType.MTIME, CellType.DATE, CellType.COLLABORATOR, CellType.AUTO_NUMBER, CellType.FORMULA, CellType.GEOLOCATION, CellType.URL, CellType.SINGLE_SELECT, CellType.LINK, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.DURATION, CellType.EMAIL];
+export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
+export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
+export const DEFAULT_CHART_TITLE_FONT_SIZE = 24;
+export const CHART_SETTINGS_TYPE = {
+  DATA: 'data',
+  STYLE: 'style'
+};
+export const COMBINATION_POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export { GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, CHART_KEY, GENERIC_KEY, GENERIC_KEY_2_SIMILAR_KEYS, STYLE_COLORS, HORIZONTAL_ALIGN, HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN_SHOW, CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES, CHART_TYPE_IMAGE };

package/{lib → dist}/constants/model.js

@@ -1,6 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _GENERIC_KEY_2_SIMILA;
-export var CHART_KEY = {
+export const CHART_KEY = {
   // x_axis_column_key
   X_AXIS_COLUMN_KEY: 'x_axis_column_key',
   GROUPBY_COLUMN_KEY: 'groupby_column_key',
@@ -141,7 +139,7 @@ export var CHART_KEY = {
   LABEL_POSITION: 'label_position',
   LABEL_FORMAT: 'label_format'
 };
-export var GENERIC_KEY = {
+export const GENERIC_KEY = {
   X_AXIS_COLUMN_KEY: CHART_KEY.X_AXIS_COLUMN_KEY,
   X_AXIS_GEOLOCATION_GRANULARITY: CHART_KEY.X_AXIS_GEOLOCATION_GRANULARITY,
   X_AXIS_DATE_GRANULARITY: CHART_KEY.X_AXIS_DATE_GRANULARITY,
@@ -164,4 +162,26 @@ export var GENERIC_KEY = {
   COLUMN_GROUPBY_GEOLOCATION_GRANULARITY: CHART_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY,
   LABEL_FONT_SIZE: CHART_KEY.LABEL_FONT_SIZE
 };
-export var GENERIC_KEY_2_SIMILAR_KEYS = (_GENERIC_KEY_2_SIMILA = {}, _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_COLUMN_KEY, [CHART_KEY.X_AXIS_COLUMN_KEY, CHART_KEY.GROUPBY_COLUMN_KEY, CHART_KEY.NUMERIC_COLUMN_KEY, CHART_KEY.NAME_COLUMN_KEY, CHART_KEY.TIME_COLUMN_KEY, CHART_KEY.VERTICAL_AXIS_COLUMN_KEY, CHART_KEY.GEO_COLUMN_KEY, CHART_KEY.COLUMN_KEY, CHART_KEY.DATE_COLUMN_KEY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_GEOLOCATION_GRANULARITY, [CHART_KEY.X_AXIS_GEOLOCATION_GRANULARITY, CHART_KEY.GROUPBY_GEOLOCATION_GRANULARITY, CHART_KEY.VERTICAL_AXIS_GEOLOCATION_GRANULARITY, CHART_KEY.GEOLOCATION_GRANULARITY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_DATE_GRANULARITY, [CHART_KEY.X_AXIS_DATE_GRANULARITY, CHART_KEY.GROUPBY_DATE_GRANULARITY, CHART_KEY.VERTICAL_AXIS_DATE_GRANULARITY, CHART_KEY.DATE_GRANULARITY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_INCLUDE_EMPTY_CELLS, [CHART_KEY.X_AXIS_INCLUDE_EMPTY_CELLS, CHART_KEY.GROUPBY_INCLUDE_EMPTY_CELLS, CHART_KEY.VERTICAL_AXIS_INCLUDE_EMPTY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_SHOW_LABEL, [CHART_KEY.X_AXIS_SHOW_LABEL, CHART_KEY.SHOW_VERTICAL_AXIS_LABEL]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.X_AXIS_LABEL_POSITION, [CHART_KEY.X_AXIS_LABEL_POSITION, CHART_KEY.VERTICAL_AXIS_LABEL_POSITION]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_SUMMARY_COLUMN_KEY, [CHART_KEY.Y_AXIS_SUMMARY_COLUMN_KEY, CHART_KEY.SUMMARY_COLUMN_KEY, CHART_KEY.HORIZONTAL_AXIS_COLUMN_KEY, CHART_KEY.Y_AXIS_COLUMN_KEY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_SUMMARY_METHOD, [CHART_KEY.Y_AXIS_SUMMARY_METHOD, CHART_KEY.SUMMARY_METHOD, CHART_KEY.HORIZONTAL_AXIS_SUMMARY_METHOD]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_SUMMARY_TYPE, [CHART_KEY.Y_AXIS_SUMMARY_TYPE, CHART_KEY.SUMMARY_TYPE, CHART_KEY.HORIZONTAL_AXIS_SUMMARY_TYPE]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_LABEL_COLOR, [CHART_KEY.Y_AXIS_LABEL_COLOR, CHART_KEY.HORIZONTAL_AXIS_LABEL_COLOR]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_LABEL_COLOR_RULES, [CHART_KEY.Y_AXIS_LABEL_COLOR_RULES, CHART_KEY.HORIZONTAL_AXIS_LABEL_COLOR_RULES]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_SHOW_VALUE, [CHART_KEY.Y_AXIS_SHOW_VALUE, CHART_KEY.DISPLAY_DATA]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_SHOW_LABEL, [CHART_KEY.Y_AXIS_SHOW_LABEL, CHART_KEY.SHOW_HORIZONTAL_AXIS_LABEL]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_LABEL_POSITION, [CHART_KEY.Y_AXIS_LABEL_POSITION, CHART_KEY.HORIZONTAL_AXIS_LABEL_POSITION]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_AUTO_RANGE, [CHART_KEY.Y_AXIS_AUTO_RANGE, CHART_KEY.HORIZONTAL_AXIS_AUTO_RANGE]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_MIN, [CHART_KEY.Y_AXIS_MIN, CHART_KEY.HORIZONTAL_AXIS_MIN]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.Y_AXIS_MAX, [CHART_KEY.Y_AXIS_MAX, CHART_KEY.HORIZONTAL_AXIS_MAX]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.COLUMN_GROUPBY_COLUMN_KEY, [CHART_KEY.COLUMN_GROUPBY_COLUMN_KEY, CHART_KEY.GROUP_COLUMN_KEY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.COLUMN_GROUPBY_DATE_GRANULARITY, [CHART_KEY.COLUMN_GROUPBY_DATE_GRANULARITY, CHART_KEY.DATE_GRANULARITY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY, [CHART_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY, CHART_KEY.GEOLOCATION_GRANULARITY]), _defineProperty(_GENERIC_KEY_2_SIMILA, GENERIC_KEY.LABEL_FONT_SIZE, [CHART_KEY.LABEL_FONT_SIZE, CHART_KEY.ANNOTATION_FONT_SIZE]), _GENERIC_KEY_2_SIMILA);
+export const GENERIC_KEY_2_SIMILAR_KEYS = {
+  [GENERIC_KEY.X_AXIS_COLUMN_KEY]: [CHART_KEY.X_AXIS_COLUMN_KEY, CHART_KEY.GROUPBY_COLUMN_KEY, CHART_KEY.NUMERIC_COLUMN_KEY, CHART_KEY.NAME_COLUMN_KEY, CHART_KEY.TIME_COLUMN_KEY, CHART_KEY.VERTICAL_AXIS_COLUMN_KEY, CHART_KEY.GEO_COLUMN_KEY, CHART_KEY.COLUMN_KEY, CHART_KEY.DATE_COLUMN_KEY],
+  [GENERIC_KEY.X_AXIS_GEOLOCATION_GRANULARITY]: [CHART_KEY.X_AXIS_GEOLOCATION_GRANULARITY, CHART_KEY.GROUPBY_GEOLOCATION_GRANULARITY, CHART_KEY.VERTICAL_AXIS_GEOLOCATION_GRANULARITY, CHART_KEY.GEOLOCATION_GRANULARITY],
+  [GENERIC_KEY.X_AXIS_DATE_GRANULARITY]: [CHART_KEY.X_AXIS_DATE_GRANULARITY, CHART_KEY.GROUPBY_DATE_GRANULARITY, CHART_KEY.VERTICAL_AXIS_DATE_GRANULARITY, CHART_KEY.DATE_GRANULARITY],
+  [GENERIC_KEY.X_AXIS_INCLUDE_EMPTY_CELLS]: [CHART_KEY.X_AXIS_INCLUDE_EMPTY_CELLS, CHART_KEY.GROUPBY_INCLUDE_EMPTY_CELLS, CHART_KEY.VERTICAL_AXIS_INCLUDE_EMPTY],
+  [GENERIC_KEY.X_AXIS_SHOW_LABEL]: [CHART_KEY.X_AXIS_SHOW_LABEL, CHART_KEY.SHOW_VERTICAL_AXIS_LABEL],
+  [GENERIC_KEY.X_AXIS_LABEL_POSITION]: [CHART_KEY.X_AXIS_LABEL_POSITION, CHART_KEY.VERTICAL_AXIS_LABEL_POSITION],
+  [GENERIC_KEY.Y_AXIS_SUMMARY_COLUMN_KEY]: [CHART_KEY.Y_AXIS_SUMMARY_COLUMN_KEY, CHART_KEY.SUMMARY_COLUMN_KEY, CHART_KEY.HORIZONTAL_AXIS_COLUMN_KEY, CHART_KEY.Y_AXIS_COLUMN_KEY],
+  [GENERIC_KEY.Y_AXIS_SUMMARY_METHOD]: [CHART_KEY.Y_AXIS_SUMMARY_METHOD, CHART_KEY.SUMMARY_METHOD, CHART_KEY.HORIZONTAL_AXIS_SUMMARY_METHOD],
+  [GENERIC_KEY.Y_AXIS_SUMMARY_TYPE]: [CHART_KEY.Y_AXIS_SUMMARY_TYPE, CHART_KEY.SUMMARY_TYPE, CHART_KEY.HORIZONTAL_AXIS_SUMMARY_TYPE],
+  [GENERIC_KEY.Y_AXIS_LABEL_COLOR]: [CHART_KEY.Y_AXIS_LABEL_COLOR, CHART_KEY.HORIZONTAL_AXIS_LABEL_COLOR],
+  [GENERIC_KEY.Y_AXIS_LABEL_COLOR_RULES]: [CHART_KEY.Y_AXIS_LABEL_COLOR_RULES, CHART_KEY.HORIZONTAL_AXIS_LABEL_COLOR_RULES],
+  [GENERIC_KEY.Y_AXIS_SHOW_VALUE]: [CHART_KEY.Y_AXIS_SHOW_VALUE, CHART_KEY.DISPLAY_DATA],
+  [GENERIC_KEY.Y_AXIS_SHOW_LABEL]: [CHART_KEY.Y_AXIS_SHOW_LABEL, CHART_KEY.SHOW_HORIZONTAL_AXIS_LABEL],
+  [GENERIC_KEY.Y_AXIS_LABEL_POSITION]: [CHART_KEY.Y_AXIS_LABEL_POSITION, CHART_KEY.HORIZONTAL_AXIS_LABEL_POSITION],
+  [GENERIC_KEY.Y_AXIS_AUTO_RANGE]: [CHART_KEY.Y_AXIS_AUTO_RANGE, CHART_KEY.HORIZONTAL_AXIS_AUTO_RANGE],
+  [GENERIC_KEY.Y_AXIS_MIN]: [CHART_KEY.Y_AXIS_MIN, CHART_KEY.HORIZONTAL_AXIS_MIN],
+  [GENERIC_KEY.Y_AXIS_MAX]: [CHART_KEY.Y_AXIS_MAX, CHART_KEY.HORIZONTAL_AXIS_MAX],
+  [GENERIC_KEY.COLUMN_GROUPBY_COLUMN_KEY]: [CHART_KEY.COLUMN_GROUPBY_COLUMN_KEY, CHART_KEY.GROUP_COLUMN_KEY],
+  [GENERIC_KEY.COLUMN_GROUPBY_DATE_GRANULARITY]: [CHART_KEY.COLUMN_GROUPBY_DATE_GRANULARITY, CHART_KEY.DATE_GRANULARITY],
+  [GENERIC_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY]: [CHART_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY, CHART_KEY.GEOLOCATION_GRANULARITY],
+  [GENERIC_KEY.LABEL_FONT_SIZE]: [CHART_KEY.LABEL_FONT_SIZE, CHART_KEY.ANNOTATION_FONT_SIZE]
+};

package/dist/constants/style.js

@@ -0,0 +1,15 @@
+export const HORIZONTAL_ALIGN = {
+  LEFT: 'left',
+  CENTER: 'center',
+  RIGHT: 'right'
+};
+export const HORIZONTAL_ALIGNS = [HORIZONTAL_ALIGN.LEFT, HORIZONTAL_ALIGN.CENTER, HORIZONTAL_ALIGN.RIGHT];
+export const HORIZONTAL_ALIGN_SHOW = {
+  [HORIZONTAL_ALIGN.LEFT]: 'Left',
+  [HORIZONTAL_ALIGN.CENTER]: 'Center',
+  [HORIZONTAL_ALIGN.RIGHT]: 'Right'
+};
+export const STYLE_COLORS = [{
+  name: 'theme0',
+  colors: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3']
+}];

package/dist/constants/type-image.js

@@ -0,0 +1,59 @@
+import bar from '../assets/img/bar.png';
+import barGroup from '../assets/img/bar-group.png';
+import barStack from '../assets/img/bar-stack.png';
+import comparedChart from '../assets/img/compared-chart.png';
+import horizontalBar from '../assets/img/horizontal-bar.png';
+import horizontalGroupBar from '../assets/img/horizontal-group-bar.png';
+import stackedHorizontalBar from '../assets/img/stacked-horizontal-bar.png';
+import completenessChart from '../assets/img/combination-chart.png';
+import groupCompletenessChart from '../assets/img/group-completeness-chart.png';
+import line from '../assets/img/line.png';
+import groupLine from '../assets/img/group_line.png';
+import area from '../assets/img/area-chart.png';
+import areaGroupChat from '../assets/img/area-group-chart.png';
+import pie from '../assets/img/pie.png';
+import ring from '../assets/img/ring.png';
+import scatter from '../assets/img/scatter.png';
+import combinationChart from '../assets/img/combination-chart.png';
+import map from '../assets/img/map.png';
+import mapBubble from '../assets/img/map-bubble.png';
+import worldMap from '../assets/img/world-map.png';
+import worldMapBubble from '../assets/img/world-map-bubble.png';
+import heatMap from '../assets/img/heat-map.png';
+import mirror from '../assets/img/mirror.png';
+import numberCard from '../assets/img/number-card.png';
+import trendChart from '../assets/img/trend-chart.png';
+import dashboardChart from '../assets/img/dashboard-chart.png';
+import treemap from '../assets/img/treemap.png';
+import pivotTable from '../assets/img/pivot-table.png';
+import { CHART_TYPE } from './type';
+export const CHART_TYPE_IMAGE = {
+  [CHART_TYPE.BAR]: bar,
+  [CHART_TYPE.BAR_GROUP]: barGroup,
+  [CHART_TYPE.BAR_STACK]: barStack,
+  [CHART_TYPE.COMPARE_BAR]: comparedChart,
+  [CHART_TYPE.HORIZONTAL_BAR]: horizontalBar,
+  [CHART_TYPE.HORIZONTAL_GROUP_BAR]: horizontalGroupBar,
+  [CHART_TYPE.STACKED_HORIZONTAL_BAR]: stackedHorizontalBar,
+  [CHART_TYPE.COMPLETENESS]: completenessChart,
+  [CHART_TYPE.COMPLETENESS_GROUP]: groupCompletenessChart,
+  [CHART_TYPE.LINE]: line,
+  [CHART_TYPE.LINE_GROUP]: groupLine,
+  [CHART_TYPE.AREA]: area,
+  [CHART_TYPE.AREA_GROUP]: areaGroupChat,
+  [CHART_TYPE.PIE]: pie,
+  [CHART_TYPE.RING]: ring,
+  [CHART_TYPE.SCATTER]: scatter,
+  [CHART_TYPE.COMBINATION]: combinationChart,
+  [CHART_TYPE.MAP]: map,
+  [CHART_TYPE.MAP_BUBBLE]: mapBubble,
+  [CHART_TYPE.WORLD_MAP]: worldMap,
+  [CHART_TYPE.WORLD_MAP_BUBBLE]: worldMapBubble,
+  [CHART_TYPE.HEAT_MAP]: heatMap,
+  [CHART_TYPE.MIRROR]: mirror,
+  [CHART_TYPE.BASIC_NUMBER_CARD]: numberCard,
+  [CHART_TYPE.TREND]: trendChart,
+  [CHART_TYPE.DASHBOARD]: dashboardChart,
+  [CHART_TYPE.TREE_MAP]: treemap,
+  [CHART_TYPE.TABLE]: pivotTable
+};

package/dist/constants/type.js

@@ -0,0 +1,124 @@
+export const CHART_TYPE = {
+  BAR: 'bar',
+  BAR_GROUP: 'bar_group',
+  BAR_STACK: 'bar_stack',
+  COMPARE_BAR: 'compare_bar',
+  HORIZONTAL_BAR: 'horizontal_bar',
+  HORIZONTAL_GROUP_BAR: 'horizontal_group_bar',
+  STACKED_HORIZONTAL_BAR: 'stacked_horizontal_bar',
+  COMPLETENESS: 'completeness',
+  COMPLETENESS_GROUP: 'completeness_group',
+  LINE: 'line',
+  LINE_GROUP: 'line_group',
+  AREA: 'area',
+  AREA_GROUP: 'area_group',
+  PIE: 'pie',
+  RING: 'ring',
+  SCATTER: 'scatter',
+  COMBINATION: 'combination',
+  MAP: 'map',
+  MAP_BUBBLE: 'map_bubble',
+  WORLD_MAP: 'world_map',
+  WORLD_MAP_BUBBLE: 'world_map_bubble',
+  HEAT_MAP: 'heat_map',
+  MIRROR: 'mirror',
+  BASIC_NUMBER_CARD: 'basic_number_card',
+  TREND: 'trend',
+  DASHBOARD: 'dashboard',
+  TREE_MAP: 'tree_map',
+  TABLE: 'table'
+};
+export const CHART_TYPE_SHOW = {
+  [CHART_TYPE.BAR]: 'Basic_histogram',
+  [CHART_TYPE.BAR_GROUP]: 'Grouped_histogram',
+  [CHART_TYPE.BAR_STACK]: 'Stacked_histogram',
+  [CHART_TYPE.COMPARE_BAR]: 'Time_comparison_histogram',
+  [CHART_TYPE.HORIZONTAL_BAR]: 'Basic_bar_chart',
+  [CHART_TYPE.HORIZONTAL_GROUP_BAR]: 'Grouped_bar_chart',
+  [CHART_TYPE.STACKED_HORIZONTAL_BAR]: 'Stacked_bar_chart',
+  [CHART_TYPE.COMPLETENESS]: 'Completeness',
+  [CHART_TYPE.COMPLETENESS_GROUP]: 'Grouped_completeness',
+  [CHART_TYPE.LINE]: 'Basic_line_chart',
+  [CHART_TYPE.LINE_GROUP]: 'Grouped_line_chart',
+  [CHART_TYPE.AREA]: 'Area',
+  [CHART_TYPE.AREA_GROUP]: 'Grouped_area',
+  [CHART_TYPE.PIE]: 'Basic_pie_chart',
+  [CHART_TYPE.RING]: 'Ring_chart',
+  [CHART_TYPE.SCATTER]: 'Scatter_chart',
+  [CHART_TYPE.COMBINATION]: 'Combination',
+  [CHART_TYPE.MAP]: '中国地图',
+  [CHART_TYPE.MAP_BUBBLE]: '中国地图(气泡图)',
+  [CHART_TYPE.WORLD_MAP]: 'World_map',
+  [CHART_TYPE.WORLD_MAP_BUBBLE]: 'World_map_bubble',
+  [CHART_TYPE.HEAT_MAP]: 'Heat_map',
+  [CHART_TYPE.MIRROR]: 'Mirror_chart',
+  [CHART_TYPE.BASIC_NUMBER_CARD]: 'Basic_number_card',
+  [CHART_TYPE.TREND]: 'Trend',
+  [CHART_TYPE.DASHBOARD]: 'Gauge',
+  [CHART_TYPE.TREE_MAP]: 'Tree_map',
+  [CHART_TYPE.TABLE]: 'Pivot_table'
+};
+export const CHART_TYPES = [{
+  name: 'Histogram',
+  icon: 'histogram',
+  // children: [CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_STACK, CHART_TYPE.COMPARE_BAR]
+  children: [CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP]
+}, {
+  name: 'Bar_chart',
+  icon: 'bar-chart',
+  // children: [CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR,
+  //   CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP]
+  children: [CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR]
+}, {
+  name: 'Line_chart',
+  icon: 'line-chart',
+  children: [CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP]
+}, {
+  name: 'Area',
+  icon: 'area-chart',
+  // children: [CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP]
+  children: [CHART_TYPE.AREA]
+}, {
+  name: 'Pie_chart',
+  icon: 'pie-chart',
+  children: [CHART_TYPE.PIE, CHART_TYPE.RING]
+},
+// {
+//   name: 'Scatter_chart',
+//   icon: 'scatter-chart',
+//   children: [CHART_TYPE.SCATTER]
+// },
+{
+  name: 'Combination',
+  icon: 'combination-chart',
+  children: [CHART_TYPE.COMBINATION]
+}, {
+  //   name: 'Map',
+  //   icon: 'map',
+  //   children: [CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP, CHART_TYPE.WORLD_MAP_BUBBLE]
+  // }, {
+  //   name: 'Heat_map',
+  //   icon: 'heat-map',
+  //   children: [CHART_TYPE.HEAT_MAP]
+  // }, {
+  //   name: 'Facet_chart',
+  //   icon: 'facet-chart',
+  //   children: [CHART_TYPE.MIRROR]
+  // }, {
+  name: 'Card',
+  icon: 'card',
+  // children: [CHART_TYPE.BASIC_NUMBER_CARD, CHART_TYPE.TREND]
+  children: [CHART_TYPE.BASIC_NUMBER_CARD]
+}, {
+  name: 'Gauge',
+  icon: 'gauge',
+  children: [CHART_TYPE.DASHBOARD]
+}, {
+  name: 'Tree_map',
+  icon: 'rectangular-tree-diagram',
+  children: [CHART_TYPE.TREE_MAP]
+}, {
+  name: 'Pivot_table',
+  icon: 'dtable-logo',
+  children: [CHART_TYPE.TABLE]
+}];

package/dist/context.js

@@ -0,0 +1,83 @@
+import { getTableById } from 'dtable-utils';
+import CollaboratorManager from './utils/collaborator-manager';
+import { ChartDataSQL } from './utils';
+class Context {
+  constructor() {
+    this.queryResultFromDB = _ref => {
+      let {
+        chart,
+        tables,
+        onSuccess,
+        onFail
+      } = _ref;
+      const table = getTableById(tables, chart.config.table_id);
+      const chartDataSQL = new ChartDataSQL({
+        table,
+        chart
+      });
+      const {
+        sql,
+        error
+      } = chartDataSQL.to_sql();
+      if (error) return;
+      return this.api.sqlQuery(sql).then(res => {
+        onSuccess && onSuccess(res);
+      }).catch(error => {
+        onFail && onFail(error);
+      });
+    };
+    this.queryUser = (emails, callback) => {
+      this.userApi.queryUsers(emails, callback);
+    };
+    this.api = null;
+    this.settings = {};
+    this.hasInit = false;
+    this.collaborators = [];
+    this.collaboratorManager = null;
+  }
+  init(props) {
+    const {
+      config,
+      api,
+      usersAPI,
+      collaborators,
+      collaboratorManager
+    } = props;
+    if (this.hasInit) return;
+    if (!config) {
+      throw new Error('Props config is required');
+    }
+    if (!api) {
+      throw new Error('Props api is required');
+    }
+    if (!usersAPI) {
+      throw new Error('Props usersAPI is required');
+    }
+    this.api = api;
+    this.settings = config || {};
+    this.hasInit = true;
+    this.collaborators = collaborators || [];
+    this.collaboratorManager = collaboratorManager ? collaboratorManager : new CollaboratorManager(collaborators);
+  }
+  setSettings() {
+    let settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.settings = settings;
+  }
+  getSettings() {
+    return this.settings;
+  }
+  getSetting(key) {
+    return this.settings[key] || this.settings[key] === false ? this.settings[key] : '';
+  }
+  getCollaboratorFromCache(email) {
+    return this.collaboratorManager.getCollaboratorFromCache(email);
+  }
+  getCollaboratorsFromCache() {
+    return this.collaboratorManager.getCollaboratorsFromCache();
+  }
+  updateCollaboratorsCache(email, collaborator) {
+    this.collaboratorManager.updateCollaboratorsCache(email, collaborator);
+  }
+}
+const context = new Context();
+export default context;