sea-chart 0.0.1-beta

package/dist/components/pixel-editor/index.css

@@ -0,0 +1,29 @@
+.sea-chart-pixel-editor-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.sea-chart-pixel-editor-wrapper .form-control {
+  position: relative;
+  flex: 1;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+.sea-chart-pixel-editor-wrapper .pixel-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.375rem;
+  width: 2.375rem;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-left: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  background-color: #fff;
+}
+
+.sea-chart-pixel-editor-wrapper .pixel-unit span {
+  margin-top: -2px;
+}

package/dist/components/pixel-editor/index.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { isNumber } from 'dtable-utils';
+import NumberInput from '../number-input';
+import './index.css';
+const PixelEditor = props => {
+  const {
+    pixel
+  } = props;
+  const [currPixel, setCurrPixel] = useState(isNumber(pixel) ? pixel : null);
+  const mountRef = useRef(false);
+  useEffect(() => {
+    if (!mountRef.current) {
+      mountRef.current = true;
+    } else {
+      setCurrPixel(isNumber(props.pixel) ? props.pixel : null);
+    }
+  }, [props.pixel]);
+  const onSavePixel = () => {
+    props.modifyPixel(currPixel);
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-pixel-editor-wrapper"
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    value: currPixel,
+    onChange: event => setCurrPixel(event.target.value),
+    onBlur: onSavePixel,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pixel-unit"
+  }, /*#__PURE__*/React.createElement("span", null, "px")));
+};
+export default PixelEditor;

package/dist/components/select-group/index.css

@@ -0,0 +1,67 @@
+.sea-chart-settings .select-group-container {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.sea-chart-settings .select-group {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sea-chart-settings .select-group-container .select-group-item {
+  height: 100%;
+  flex: 1;
+  text-align: center;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 36px;
+  cursor: pointer;
+}
+
+.sea-chart-settings .select-group-container .select-group-item.readOnly {
+  cursor: default;
+  opacity: .6;
+}
+
+.sea-chart-settings .select-group-container .select-group-item.active {
+  background-color: #FFF2E4;
+  color: #ff8000;
+  box-shadow: 0 0 0 1px #ff8000;
+}
+
+.sea-chart-settings .select-group-container .select-group-item:first-child.active {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.sea-chart-settings .select-group-container .select-group-item:last-child.active {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.sea-chart-settings .no-active-option .select-group-item:hover {
+  cursor: pointer;
+  background-color: #FFF2E4;
+  box-shadow: 0 0 0 1px #ff8000;
+}
+
+.sea-chart-settings .no-active-option .select-group-item:first-child:hover {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.sea-chart-settings .no-active-option .select-group-item:last-child:hover {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}

package/dist/components/select-group/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from '../../intl';
+import './index.css';
+class SelectGroup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectChanged = event => {
+      const {
+        option
+      } = event.target.dataset;
+      if (option === this.state.activeOption) return;
+      this.setState({
+        activeOption: option
+      });
+      this.props.onSelectChanged(option);
+    };
+    this.state = {
+      activeOption: props.activeOption
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.activeOption !== this.state.activeOption) {
+      this.setState({
+        activeOption: nextProps.activeOption
+      });
+    }
+  }
+  render() {
+    const {
+      options,
+      optionsDisplay
+    } = this.props;
+    const {
+      activeOption
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select-group-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "select-group"
+    }, options.map(option => {
+      const isActive = activeOption === option ? true : false;
+      const displayOption = optionsDisplay && optionsDisplay[option] ? intl.get(optionsDisplay[option]) : option;
+      return /*#__PURE__*/React.createElement("div", {
+        key: option,
+        className: "select-group-item ".concat(isActive ? 'active' : ''),
+        "data-option": option,
+        onClick: this.onSelectChanged
+      }, displayOption);
+    })));
+  }
+}
+export default SelectGroup;

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

@@ -0,0 +1,97 @@
+.sea-chart-types-dialog {
+  max-width: 1102px;
+  width: 1102px;
+  height: calc(100% - 56px);
+}
+
+.sea-chart-types-dialog .modal-content {
+  height: 100%;
+}
+
+.sea-chart-types-dialog .sea-chart-types-body {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav {
+  border-bottom: 1px solid #e9ecef;
+  background-color: #f9f9f9;
+  height: 50px;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item {
+  height: 40px;
+  width: 48px;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .sea-chart-chart-cat-nav-item-container.sea-chart-icon-highlight .chart-icon {
+  color: #ff8000;
+}
+
+.sea-chart-types-dialog .sea-chart-chart-categories-nav .chart-icon {
+  cursor: pointer;
+  color: #666;
+}
+
+.sea-chart-types-dialog .sea-chart-type-container {
+  padding: 0 16px 16px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-container:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 20px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-title {
+  font-weight: 600;
+  font-size: 18px;
+  color: #202428;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item {
+  height: 172px;
+  width: 250px;
+  
+  border: 1px solid #dcdade;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
+  margin: 20px 17px 0 0;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item:hover {
+  cursor: pointer;
+  border-color: #FFBF7F;
+}
+
+.sea-chart-types-dialog .sea-chart-type-item.selected {
+  border-color: #FF8000;
+}
+
+.sea-chart-types-dialog .sea-chart-type-description {
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 14px;
+  padding: 0 15px;
+  margin-bottom: 10px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-image-container {
+  padding: 0 12px;
+}
+
+.sea-chart-types-dialog .sea-chart-type-image-container .sea-chart-type-demo-image {
+  width: 100%;
+  height: 125px;
+}

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

@@ -0,0 +1,116 @@
+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 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 = window.seaChart.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/dist/constants/geolocation.js

@@ -0,0 +1,11 @@
+export const GEOLOCATION_FORMAT_MAP = {
+  LNG_LAT: 'lng_lat',
+  MAP_SELECTION: 'map_selection',
+  GEOLOCATION: 'geolocation',
+  PROVINCE_CITY_DISTRICT: 'province_city_district',
+  COUNTRY_REGION: 'country_region',
+  PROVINCE_CITY: 'province_city',
+  PROVINCE: 'province'
+};
+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 };