sea-chart 0.0.16 → 0.0.18

package/dist/api/index.js

@@ -97,5 +97,16 @@ class SeaChartAPI {
     this.dtableSocket = dtable_socket.replace(/\/+$/, '') + '/';
     this.dtableDB = dtable_db.replace(/\/+$/, '') + '/';
   }
+
+  // queryUsers(userIdList) {
+  //   const { dtableServer, accessToken } = this;
+  //   const url =  dtableServer + 'api/v2.1/user-list';
+  //   let operation = { user_id_list: userIdList };
+  //   const headers = {
+  //     'Content-type': 'application/json',
+  //     'Authorization': 'Token ' +  accessToken
+  //   };
+  //   return axios.post(url, operation, { headers });
+  // }
 }
 export default SeaChartAPI;

package/dist/assets/css/color-picker.css

@@ -0,0 +1,53 @@
+/* color-picker */
+.statistic-chart-color-picker-container {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  background-clip: padding-box;
+  color: #495057;
+  background-color: #fff;
+  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;
+}
+
+.statistic-chart-color-picker-container .picker-control {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control {
+    width: 24px;
+    height: 24px;
+    margin-left: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+.statistic-chart-color-picker-container .picker-control.readOnly,
+.statistic-chart-color-picker-container .picker-control.readOnly .text-control {
+  background-color: #f7f7f7;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control {
+  cursor: default;
+}
+
+.statistic-chart-color-picker-container .picker-control .color-control.white-color {
+  border: 3px #eee solid;
+}
+
+.statistic-chart-color-picker-container .picker-control .text-control {
+  height: 100%;
+  border: none;
+  outline: none;
+  padding-left: 10px;
+  font-size: 14px;
+}
+
+.statistic-chart-color-picker-container .picker-control.readOnly .text-control {
+  cursor: default;
+}

package/dist/assets/css/slider.css

@@ -0,0 +1,77 @@
+.sea-chart-settings .rc-slider {
+  position: relative;
+  height: 14px;
+  padding: 5px 0;
+  width: 100%;
+  border-radius: 6px;
+  touch-action: none;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.sea-chart-settings .rc-slider * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.sea-chart-settings .rc-slider-rail {
+  position: absolute;
+  width: 100%;
+  background-color: #e9e9e9;
+  height: 4px;
+  border-radius: 6px;
+}
+
+.sea-chart-settings .rc-slider-track {
+  position: absolute;
+  left: 0;
+  height: 4px;
+  border-radius: 6px;
+  background-color: rgb(255, 128, 0);;
+}
+
+.sea-chart-settings .rc-slider-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  cursor: -webkit-grab;
+  margin-top: -5px;
+  cursor: grab;
+  border-radius: 50%;
+  border: solid 2px rgb(255, 128, 0);
+  background-color: #fff;
+  touch-action: pan-x;
+}
+
+.sea-chart-settings .rc-slider-handle-dragging{
+  border-color: rgb(255, 128, 0);
+  box-shadow: 0 0 0 5px rgb(255, 128, 0);
+}
+
+.sea-chart-settings .rc-slider-handle:focus {
+  outline: none;
+}
+
+.sea-chart-settings .rc-slider-handle-click-focused:focus {
+  border-color: rgb(255, 128, 0);
+  box-shadow: unset;
+}
+
+.sea-chart-settings .rc-slider-handle:hover {
+  border-color: rgb(255, 128, 0);
+}
+
+.sea-chart-settings .rc-slider-handle:active {
+  border-color: rgb(255, 128, 0);
+  box-shadow: 0 0 5px rgb(255, 128, 0);
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+.sea-chart-settings .rc-slider-step {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+}

package/dist/components/color-setting/color-group-selector.js

@@ -0,0 +1,48 @@
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import React, { Component } from 'react';
+import { FormGroup } from 'reactstrap';
+import { COLOR_OPTIONS } from '../../constants/color-rules';
+import intl from '../../intl';
+class ColorGroupSelector extends Component {
+  constructor(props) {
+    super(props);
+    this.getColorOptions = () => {
+      return COLOR_OPTIONS.map(colorOption => {
+        return {
+          value: colorOption.name,
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "statistic-color-option d-flex"
+          }, colorOption.exampleColors.map((color, index) => {
+            return /*#__PURE__*/React.createElement("span", {
+              className: "statistic-color-block",
+              key: index,
+              style: {
+                background: "".concat(color)
+              }
+            });
+          }))
+        };
+      });
+    };
+    this.changeColor = option => {
+      const selected = option.value;
+      this.props.onChangeColor(selected);
+    };
+    this.colorOptions = this.getColorOptions();
+  }
+  render() {
+    const {
+      currentColor
+    } = this.props;
+    const currentOption = this.colorOptions.filter(item => item.value === currentColor)[0] || this.colorOptions[0];
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+      classNamePrefix: 'chart-color',
+      value: currentOption,
+      onChange: this.changeColor,
+      options: this.colorOptions
+    }));
+  }
+}
+export default ColorGroupSelector;

package/dist/components/color-setting/color-picker.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { ChromePicker } from 'react-color';
+import '../../assets/css/color-picker.css';
+const COVER = {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+class ColorPicker extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onInputChanged = event => {
+      const value = event.target.value;
+      if (value === this.state.activeColor) return;
+
+      // todo valid color
+      this.updateColor(value);
+      this.setState({
+        activeColor: value
+      });
+    };
+    this.onPickColorToggle = () => {
+      const {
+        readOnly
+      } = this.props;
+      if (readOnly) return;
+      this.setState({
+        isShowColorPicker: !this.state.isShowColorPicker
+      });
+    };
+    this.onPickChanged = color => {
+      if (color.hex === this.state.activeColor) return;
+      this.updateColor(color);
+      this.setState({
+        activeColor: color.hex
+      });
+    };
+    this.updateColor = color => {
+      const {
+        isPickAllColor
+      } = this.props;
+      const colorValue = isPickAllColor ? color : color.hex;
+      this.props.onColorChanged(colorValue);
+    };
+    this.getPopoverStyle = () => {
+      if (!this.colorPickerContainerRef) return {};
+      const {
+        top,
+        height
+      } = this.colorPickerContainerRef.getBoundingClientRect();
+      const {
+        clientHeight
+      } = document.body;
+      const selectTop = top + height;
+      if (clientHeight - selectTop < 247) {
+        // 247: ChromePicker's height
+        return {
+          position: 'absolute',
+          left: 0,
+          bottom: '2.375rem',
+          zIndex: '2'
+        };
+      }
+      return {
+        position: 'absolute',
+        left: 0,
+        zIndex: '2'
+      };
+    };
+    this.state = {
+      isShowColorPicker: false,
+      activeColor: props.activeColor
+    };
+    this.colorPickerContainerRef = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      activeColor: nextProps.activeColor
+    });
+  }
+  render() {
+    const {
+      activeColor
+    } = this.state;
+    const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
+    const {
+      readOnly
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-color-picker-container",
+      ref: ref => this.colorPickerContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "picker-control ".concat(readOnly ? 'readOnly' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "color-control ".concat(isWhiteColor ? 'white-color' : '', " ").concat(readOnly ? 'readOnly' : ''),
+      onClick: this.onPickColorToggle,
+      style: {
+        background: activeColor
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      className: "text-control",
+      type: "text",
+      value: activeColor,
+      onChange: this.onInputChanged,
+      readOnly: readOnly
+    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
+      style: this.getPopoverStyle()
+    }, /*#__PURE__*/React.createElement("div", {
+      style: COVER,
+      onClick: this.onPickColorToggle
+    }), /*#__PURE__*/React.createElement(ChromePicker, {
+      disableAlpha: true,
+      color: activeColor,
+      onChange: this.onPickChanged
+    })));
+  }
+}
+ColorPicker.defaultProps = {
+  activeColor: '#000000'
+};
+export default ColorPicker;

package/dist/components/dtable-popover/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Popover } from 'reactstrap';
-import { getEventClassName } from '../../utils/common-utils';
-import { CommonEventTypes } from '../../constants/common-constants.js';
+import { CommonEventTypes } from '../../constants/common-constants';
 import KeyCodes from '../../constants/key-codes.js';
+import { getEventClassName } from '../../utils/common-utils';
 class DTablePopover extends React.Component {
   constructor() {
     super(...arguments);

package/dist/components/number-input/index.js

@@ -9,12 +9,15 @@ function NumberInput(props) {
     max,
     readOnly,
     className,
+    useEmpty,
     ...otherProps
   } = props;
+  // useempty is used to control whether to use empty string or '0'
+  const number = value ? value : useEmpty ? '' : '0';
   return /*#__PURE__*/React.createElement(Input, Object.assign({
     type: "number",
     className: className,
-    value: value || '0',
+    value: number,
     min: min,
     step: step,
     max: max,

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

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
 import { isNumber } from 'dtable-utils';
+import React, { useEffect, useRef, useState } from 'react';
+import { isBoolean } from '../../utils';
 import NumberInput from '../number-input';
 import './index.css';
 const PixelEditor = props => {
@@ -24,14 +25,16 @@ const PixelEditor = props => {
       event.target.blur();
     }
   };
+  const showPx = isBoolean(props.showPx) ? props.showPx : true;
   return /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-pixel-editor-wrapper"
   }, /*#__PURE__*/React.createElement(NumberInput, {
     value: currPixel,
+    useEmpty: props.useEmpty,
     onChange: event => setCurrPixel(event.target.value),
     onBlur: onSavePixel,
     onKeyDown: onKeyDown
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showPx && /*#__PURE__*/React.createElement("div", {
     className: "pixel-unit"
   }, /*#__PURE__*/React.createElement("span", null, "px")));
 };

package/dist/constants/color-rules.js

@@ -8,4 +8,35 @@ export const DISPLAY_COLOR_RULE_FILTER_TYPE = {
 export const FILTER_TYPE_2_CELL_TYPE = {
   [COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE]: CellType.NUMBER
 };
-export const EMPTY_PREDICATE = [FILTER_PREDICATE_TYPE.EMPTY, FILTER_PREDICATE_TYPE.NOT_EMPTY];
+export const EMPTY_PREDICATE = [FILTER_PREDICATE_TYPE.EMPTY, FILTER_PREDICATE_TYPE.NOT_EMPTY];
+export const COLOR_OPTIONS = [{
+  name: 'blue',
+  exampleColors: ['#CAE9FF', '#9AC5FF', '#7DAAFF', '#5C90F9', '#3C77DD', '#075FBF', '#0047A5', '#053791', '#001E79'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'green',
+  exampleColors: ['#AAF7D2', '#74E6B6', '#42C090', '#17A675', '#008A5C', '#016F44', '#00572F', '#02421C', '#003300'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'purple',
+  exampleColors: ['#EBE2F1', '#D4C4E2', '#BFA8D4', '#A989C5', '#956DB8', '#7B4CA4', '#663095', '#55148E', '#410475'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'red',
+  exampleColors: ['#FBE2E1', '#F7C6C6', '#F3A9A9', '#F17F7E', '#ED5655', '#D73635', '#BD1615', '#920404', '#680303'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'yellow',
+  exampleColors: ['#FFF2D4', '#FFE9B8', '#FFDD95', '#FFD470', '#FFC741', '#EDB408', '#D09C10', '#A37B17', '#775816'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'orange',
+  exampleColors: ['#FEE6CE', '#FDD1A2', '#FDAD6B', '#FD8D3D', '#F06813', '#E64F04', '#C14308', '#943D04', '#6D2E02'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}];

package/dist/constants/geolocation.js

@@ -21,4 +21,15 @@ export const MAP_LEVEL = {
   PROVINCE: 'province',
   CITY: 'city'
 };
-export const MUNICIPALITIES = ['北京市', '天津市', '上海市', '重庆市'];
+export const MUNICIPALITIES = ['北京市', '天津市', '上海市', '重庆市'];
+export const MAP_LEVELS = [{
+  key: MAP_LEVEL.COUNTRY,
+  name: '国家'
+}, {
+  key: MAP_LEVEL.PROVINCE,
+  name: '省级'
+}, {
+  key: MAP_LEVEL.CITY,
+  name: '市级'
+}];
+export const LABEL_COLORS = ['#2a67d1', '#4ecccb', '#59cb74', '#fbd44a', '#f4667c', '#9860e5', '#9f8cf1', '#dc82d2', '#eaa775', '#addf84', '#85e0be', '#89d2ea'];

package/dist/constants/index.js

@@ -6,11 +6,15 @@ import { CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES } from './type';
 import { CHART_TYPE_IMAGE } from './type-image';
 import { regions } from './regions';
 import { TABLE_DIMENSIONS } from './table';
+export const CHART_STYLE_COLORS = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'];
+export const ONLY_NEED_NUMBER_OPTIONS_CHART_TYPE = [CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.SCATTER];
+export const COMPLETENESS_GROUPBY_SUPPORTED_COLUMN_TYPE = [CellType.COLLABORATOR, CellType.TEXT, CellType.SINGLE_SELECT];
+export const NUMBERIC_COLUMN_TYPE = [CellType.RATE, CellType.NUMBER];
 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.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.PIE, CHART_TYPE.RING, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.AREA, CHART_TYPE.TREE_MAP];
 export const SUPPORT_STACK_VALUE_CHART_TYPES = [CHART_TYPE.BAR_STACK, CHART_TYPE.BAR_CUSTOM];
 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, CHART_TYPE.TABLE];
+export const SUPPORT_TITLE_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR, CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP, 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, CHART_TYPE.TABLE, CHART_TYPE.BAR_CUSTOM];
 export const CHART_CHART_MAP = {
   [CHART_TYPE.BAR]: CHART_TYPE.BAR,
   [CHART_TYPE.PIE]: CHART_TYPE.PIE,
@@ -155,17 +159,21 @@ export const THEME_NAME_MAP = {
 export const CHART_THEME_COLOR = {
   dark: {
     textColor: '#ffffff',
+    fontSize: 13,
     gridColor: '#4E4E56',
     labelColor: '#ffffff',
     legendPageNavigatorMarkerColor: '#ffffff',
     cardColor: '#ffffff'
   },
   light: {
-    textColor: '#6e6e6e',
-    gridColor: '#bfbfbf',
-    labelColor: '#000000',
-    legendPageNavigatorMarkerColor: '#000000',
-    cardColor: '#545454'
+    textColor: '#666666',
+    fontSize: 13,
+    gridColor: '#e2e2e2',
+    labelColor: '#999999',
+    cardColor: '#545454',
+    legendTextColor: '#333333',
+    legendFontSize: 14,
+    legendPageNavigatorMarkerColor: '#999999'
   }
 };
 export const DTABLE_DB_SUMMARY_METHOD = {
@@ -217,4 +225,22 @@ export const TYPE_DISPLAY_COLOR_USING = {
   [TYPE_COLOR_USING.USE_SPECIFIC_COLORS]: 'Use_specific_colors',
   [TYPE_COLOR_USING.USE_RULES]: 'Use_rules'
 };
+
+// default grid size, grid distance for heat map chart
+export const DEFAULT_GRID_SIZE = 12;
+export const DEFAULT_GRID_DISTANCE = 4;
+export const MONTH_MIRROR = {
+  '0': 'Jan',
+  '1': 'Feb',
+  '2': 'Mar',
+  '3': 'Apr',
+  '4': 'May',
+  '5': 'Jun',
+  '6': 'Jul',
+  '7': 'Aug',
+  '8': 'Sep',
+  '9': 'Oct',
+  '10': 'Nov',
+  '11': 'Dec'
+};
 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, GEOLOCATION_GRANULARITY, GEOLOCATION_GRANULARITY_LIST, MAP_LEVEL, MUNICIPALITIES, regions, TABLE_DIMENSIONS };

package/dist/constants/model.js

@@ -60,6 +60,8 @@ export const CHART_KEY = {
   // y_axis_auto_range
   Y_AXIS_AUTO_RANGE: 'y_axis_auto_range',
   HORIZONTAL_AXIS_AUTO_RANGE: 'horizontal_axis_auto_range',
+  // y_axises
+  Y_AXISES: 'y_axises',
   // y_axis_min
   Y_AXIS_MIN: 'y_axis_min',
   HORIZONTAL_AXIS_MIN: 'horizontal_axis_min',
@@ -155,6 +157,7 @@ export const GENERIC_KEY = {
   Y_AXIS_SHOW_LABEL: CHART_KEY.Y_AXIS_SHOW_LABEL,
   Y_AXIS_LABEL_POSITION: CHART_KEY.Y_AXIS_LABEL_POSITION,
   Y_AXIS_AUTO_RANGE: CHART_KEY.Y_AXIS_AUTO_RANGE,
+  Y_AXISES: CHART_KEY.Y_AXISES,
   Y_AXIS_MIN: CHART_KEY.Y_AXIS_MIN,
   Y_AXIS_MAX: CHART_KEY.Y_AXIS_MAX,
   COLUMN_GROUPBY_COLUMN_KEY: CHART_KEY.COLUMN_GROUPBY_COLUMN_KEY,

package/dist/constants/style.js

@@ -30,4 +30,93 @@ export const STYLE_COLORS = [{
 }, {
   name: 'theme6',
   colors: ['#F76856', '#FFAF53', '#6CCDFF', '#C4C4CC', '#D48C82', '#E3C19A', '#A47CFF', '#FFD637', '#96DCFF', '#FFB6B6']
+}];
+export const FILL_BORDER_COLOR_MAP = {
+  '#EBEDFO': '#E1E3E6',
+  '#9AC5FF': '#8BBBFB',
+  '#5C90F9': '#5284EA',
+  '#075FBF': '#0453A9',
+  '#053791': '#022A72',
+  '#CAE9FF': '#BDE1F7',
+  '#7DAAFF': '#6F9FF8',
+  '#3C77DD': '#356DCF',
+  '#0047A5': '#013C8A',
+  '#001E79': '#031859',
+  '#AAF7D2': '#94E7BF',
+  '#74E6B6': '#67D1A4',
+  '#42C090': '#36A97D',
+  '#17A675': '#139166',
+  '#008A5C': '#00734C',
+  '#016F44': '#005D39',
+  '#00572F': '#004224',
+  '#02421C': '#002E13',
+  '#003300': '#001E00',
+  '#EBE2F1': '#DDD2E4',
+  '#D4C4E2': '#C5B1D6',
+  '#BFA8D4': '#AE96C4',
+  '#A989C5': '#9176A9',
+  '#956DB8': '#8460A4',
+  '#7B4CA4': '#69408D',
+  '#663095': '#522479',
+  '#55148E': '#3E0D69',
+  '#410475': '#29014C',
+  '#FBE2E1': '#EECBC9',
+  '#F7C6C6': '#E9B0B0',
+  '#F3A9A9': '#E19696',
+  '#F17F7E': '#DB6B6A',
+  '#ED5655': '#D44746',
+  '#D73635': '#BA2C2B',
+  '#BD1615': '#9C0C0B',
+  '#920404': '#730101',
+  '#680303': '#480000',
+  '#FFF2D4': '#F4E5C5',
+  '#FFE9B8': '#F3DBA5',
+  '#FFDD95': '#EFCD84',
+  '#FFD470': '#F0C665',
+  '#FFC741': '#EDB737',
+  '#EDB408': '#D9A405',
+  '#D09C10': '#BB8A07',
+  '#A37B17': '#8C6911',
+  '#775816': '#65480C',
+  '#FEE6CE': '#F2D4B5',
+  '#FDD1A2': '#EFBF8B',
+  '#FDAD6B': '#EF9A54',
+  '#FD8D3D': '#EF7C2B',
+  '#F06813': '#D75706',
+  '#E64F04': '#C44100',
+  '#C14308': '#9D3302',
+  '#943D04': '#773001',
+  '#6D2E02': '#542301',
+  '#EBEDF0': '#E1E3E6'
+};
+export const COLOR_OPTIONS = [{
+  name: 'blue',
+  exampleColors: ['#CAE9FF', '#9AC5FF', '#7DAAFF', '#5C90F9', '#3C77DD', '#075FBF', '#0047A5', '#053791', '#001E79'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'green',
+  exampleColors: ['#AAF7D2', '#74E6B6', '#42C090', '#17A675', '#008A5C', '#016F44', '#00572F', '#02421C', '#003300'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'purple',
+  exampleColors: ['#EBE2F1', '#D4C4E2', '#BFA8D4', '#A989C5', '#956DB8', '#7B4CA4', '#663095', '#55148E', '#410475'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'red',
+  exampleColors: ['#FBE2E1', '#F7C6C6', '#F3A9A9', '#F17F7E', '#ED5655', '#D73635', '#BD1615', '#920404', '#680303'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'yellow',
+  exampleColors: ['#FFF2D4', '#FFE9B8', '#FFDD95', '#FFD470', '#FFC741', '#EDB408', '#D09C10', '#A37B17', '#775816'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
+}, {
+  name: 'orange',
+  exampleColors: ['#FEE6CE', '#FDD1A2', '#FDAD6B', '#FD8D3D', '#F06813', '#E64F04', '#C14308', '#943D04', '#6D2E02'],
+  borderColor: '#5F7190',
+  highlightedBorderColor: '#30343A'
 }];

package/dist/constants/type-image.js

@@ -4,6 +4,7 @@ export const CHART_TYPE_IMAGE = {
   [CHART_TYPE.BAR_GROUP]: 'bar-group.png',
   [CHART_TYPE.BAR_STACK]: 'bar-stack.png',
   [CHART_TYPE.COMPARE_BAR]: 'compared-chart.png',
+  [CHART_TYPE.BAR_CUSTOM]: 'custom-bar.png',
   [CHART_TYPE.HORIZONTAL_BAR]: 'horizontal-bar.png',
   [CHART_TYPE.HORIZONTAL_GROUP_BAR]: 'horizontal-group-bar.png',
   [CHART_TYPE.STACKED_HORIZONTAL_BAR]: 'stacked-horizontal-bar.png',