sea-chart 0.0.1

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

@@ -0,0 +1,67 @@
+.seastatistic-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;
+}
+
+.seastatistic-settings .select-group {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.seastatistic-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;
+}
+
+.seastatistic-settings .select-group-container .select-group-item.readOnly {
+  cursor: default;
+  opacity: .6;
+}
+
+.seastatistic-settings .select-group-container .select-group-item.active {
+  background-color: #FFF2E4;
+  color: #ff8000;
+  box-shadow: 0 0 0 1px #ff8000;
+}
+
+.seastatistic-settings .select-group-container .select-group-item:first-child.active {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.seastatistic-settings .select-group-container .select-group-item:last-child.active {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.seastatistic-settings .no-active-option .select-group-item:hover {
+  cursor: pointer;
+  background-color: #FFF2E4;
+  box-shadow: 0 0 0 1px #ff8000;
+}
+
+.seastatistic-settings .no-active-option .select-group-item:first-child:hover {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.seastatistic-settings .no-active-option .select-group-item:last-child:hover {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}

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

@@ -0,0 +1,63 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import intl from '../../intl';
+import './index.css';
+var SelectGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(SelectGroup, _React$Component);
+  var _super = _createSuper(SelectGroup);
+  function SelectGroup(props) {
+    var _this;
+    _classCallCheck(this, SelectGroup);
+    _this = _super.call(this, props);
+    _this.onSelectChanged = function (event) {
+      var option = event.target.dataset.option;
+      if (option === _this.state.activeOption) return;
+      _this.setState({
+        activeOption: option
+      });
+      _this.props.onSelectChanged(option);
+    };
+    _this.state = {
+      activeOption: props.activeOption
+    };
+    return _this;
+  }
+  _createClass(SelectGroup, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.activeOption !== this.state.activeOption) {
+        this.setState({
+          activeOption: nextProps.activeOption
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        options = _this$props.options,
+        optionsDisplay = _this$props.optionsDisplay;
+      var activeOption = this.state.activeOption;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "select-group-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "select-group"
+      }, options.map(function (option) {
+        var isActive = activeOption === option ? true : false;
+        var 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: _this2.onSelectChanged
+        }, displayOption);
+      })));
+    }
+  }]);
+  return SelectGroup;
+}(React.Component);
+export default SelectGroup;

package/lib/components/settings/advance-bar-settings/data-settings.js

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+import GroupBy from '../widgets/group-by';
+import Switch from '../widgets/switch';
+import YAxisGroupSettings from '../widgets/y-axis-group-settings';
+import { STATISTIC_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange,
+    tables = _ref.tables,
+    xLabel = _ref.xLabel,
+    yLabel = _ref.yLabel,
+    FilterSettings = _ref.FilterSettings;
+  var onXAxisColumnChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_column_key = config.x_axis_column_key;
+    var column = option.value;
+    var newXAxisColumnKey = column.key,
+      type = column.type;
+    var validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+    if (x_axis_column_key === validValue) return;
+    var update = {
+      x_axis_column_key: validValue
+    };
+    if (!validValue) {
+      update['x_axis_date_granularity'] = null;
+      update['x_axis_geolocation_granularity'] = null;
+    } else {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['x_axis_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['x_axis_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        var _ref2 = column.data || {},
+          geo_format = _ref2.geo_format;
+        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+          update['x_axis_geolocation_granularity'] = 'district';
+        } else {
+          update['x_axis_geolocation_granularity'] = null;
+        }
+        update['x_axis_date_granularity'] = null;
+      }
+    }
+    onChange && onChange(update);
+  }, [statistic, onChange]);
+  var onGroupbyDateGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_date_granularity = config.x_axis_date_granularity;
+    var value = option.value;
+    if (value === x_axis_date_granularity) return;
+    onChange && onChange({
+      x_axis_date_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_geolocation_granularity = config.x_axis_geolocation_granularity;
+    var value = option.value;
+    if (value === x_axis_geolocation_granularity) return;
+    onChange && onChange({
+      x_axis_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onIncludeEmptyChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var x_axis_include_empty_cells = config.x_axis_include_empty_cells;
+    onChange && onChange({
+      x_axis_include_empty_cells: !x_axis_include_empty_cells
+    });
+  }, [statistic, onChange]);
+  var config = statistic.config;
+  var table_id = config.table_id,
+    x_axis_column_key = config.x_axis_column_key,
+    x_axis_date_granularity = config.x_axis_date_granularity,
+    x_axis_geolocation_granularity = config.x_axis_geolocation_granularity,
+    x_axis_include_empty_cells = config.x_axis_include_empty_cells;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get(xLabel),
+    selectedTableId: table_id,
+    selectedColumnKey: x_axis_column_key,
+    selectedDateGranularity: x_axis_date_granularity,
+    selectedGeolocationGranularity: x_axis_geolocation_granularity,
+    onGroupByChange: onXAxisColumnChange,
+    onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
+    onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
+  }), /*#__PURE__*/React.createElement(Switch, {
+    key: "x_axis_include_empty_cells",
+    checked: x_axis_include_empty_cells,
+    placeholder: intl.get('Include_empty'),
+    onChange: onIncludeEmptyChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(YAxisGroupSettings, {
+    className: "selected-y-axis",
+    label: intl.get(yLabel),
+    statistic: statistic,
+    tables: tables,
+    onChange: onChange
+  }));
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default DataSettings;

package/lib/components/settings/advance-bar-settings/index.js

@@ -0,0 +1,3 @@
+import AdvanceBarDataSettings from './data-settings';
+import AdvanceBarStyleSettings from './style-settings';
+export { AdvanceBarDataSettings, AdvanceBarStyleSettings };

package/lib/components/settings/advance-bar-settings/style-settings.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import Switch from '../widgets/switch';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import DisplayValuesSettings from '../widgets/display-values-settings';
+import { eventStopPropagation } from '../../../utils';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../../constants';
+import intl from '../../../intl';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    xLabel = _ref.xLabel,
+    yLabel = _ref.yLabel,
+    onChange = _ref.onChange;
+  var xAxisLabelOptions = useMemo(function () {
+    return X_LABEL_POSITIONS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  var yAxisLabelOptions = useMemo(function () {
+    return Y_LABEL_POSITIONS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  var onAxisLabelShowChange = useCallback(function (event, labelKey) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var value = config[labelKey];
+    onChange && onChange(_defineProperty({}, labelKey, !value));
+  }, [statistic, onChange]);
+  var onAxisLabelPositionChange = useCallback(function (option, positionKey) {
+    var position = option.value;
+    var config = statistic.config;
+    var oldValue = config[positionKey];
+    if (position === oldValue) return;
+    onChange && onChange(_defineProperty({}, positionKey, position));
+  }, [statistic, onChange]);
+  var onYAxisAutoRangeChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var y_axis_auto_range = config.y_axis_auto_range;
+    onChange && onChange({
+      y_axis_auto_range: !y_axis_auto_range
+    });
+  }, [statistic, onChange]);
+  var onYAxisMinChange = useCallback(function (min) {
+    var newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    var config = statistic.config;
+    var y_axis_min = config.y_axis_min;
+    if (y_axis_min === newMin) return;
+    onChange && onChange({
+      y_axis_min: newMin
+    });
+  }, [statistic, onChange]);
+  var onYAxisMaxChange = useCallback(function (max) {
+    var newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    var config = statistic.config;
+    var y_axis_max = config.y_axis_max;
+    if (y_axis_max === newMax) return;
+    onChange && onChange({
+      y_axis_max: newMax
+    });
+  }, [statistic, onChange]);
+  var onDisplayValueChange = useCallback(function (update) {
+    onChange(update);
+  }, [onChange]);
+  var config = statistic.config;
+  var x_axis_show_label = config.x_axis_show_label,
+    x_axis_label_position = config.x_axis_label_position,
+    y_axis_show_label = config.y_axis_show_label,
+    y_axis_label_position = config.y_axis_label_position,
+    _config$y_axis_auto_r = config.y_axis_auto_range,
+    y_axis_auto_range = _config$y_axis_auto_r === void 0 ? true : _config$y_axis_auto_r,
+    y_axis_min = config.y_axis_min,
+    y_axis_max = config.y_axis_max,
+    y_axis_show_value = config.y_axis_show_value,
+    label_font_size = config.label_font_size;
+  var xAxisLabelPosition = xAxisLabelOptions.find(function (option) {
+    return option.value === x_axis_label_position;
+  }) || xAxisLabelOptions[0];
+  var yAxisLabelPosition = yAxisLabelOptions.find(function (option) {
+    return option.value === y_axis_label_position;
+  }) || yAxisLabelOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get(xLabel)), /*#__PURE__*/React.createElement(Switch, {
+    key: "x_axis_show_label",
+    checked: x_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'x_axis_show_label');
+    }
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    value: xAxisLabelPosition,
+    options: xAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'x_axis_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get(yLabel)), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_show_label",
+    checked: y_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'y_axis_show_label');
+    }
+  }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'y_axis_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range",
+    checked: y_axis_auto_range,
+    placeholder: intl.get('Auto_range'),
+    onChange: onYAxisAutoRangeChange
+  }), !y_axis_auto_range && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min,
+    max: y_axis_max,
+    onMinChange: onYAxisMinChange,
+    onMaxChange: onYAxisMaxChange
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+    isShowValueKey: "y_axis_show_value",
+    isShowValue: y_axis_show_value,
+    fontSizeKey: "label_font_size",
+    fontSize: label_font_size,
+    onChange: onDisplayValueChange
+  }));
+};
+StyleSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default StyleSettings;

package/lib/components/settings/bar-settings/data-settings.js

@@ -0,0 +1,137 @@
+import React, { useCallback } from 'react';
+import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+import GroupBy from '../widgets/group-by';
+import Switch from '../widgets/switch';
+import BasicSummary from '../widgets/basic-summary';
+import DataSort from '../widgets/data-sort';
+import { eventStopPropagation } from '../../../utils';
+import { STATISTIC_SUMMARY_TYPE, SUPPORT_DATA_SORT_STATISTIC_TYPES, STATISTIC_SUMMARY_TYPES, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    xLabel = _ref.xLabel,
+    yLabel = _ref.yLabel,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var onXAxisColumnChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_column_key = config.x_axis_column_key;
+    var column = option.value;
+    var newXAxisColumnKey = column.key,
+      type = column.type;
+    var validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+    if (x_axis_column_key === validValue) return;
+    var update = {
+      x_axis_column_key: validValue
+    };
+    if (!validValue) {
+      update['x_axis_date_granularity'] = null;
+      update['x_axis_geolocation_granularity'] = null;
+    } else {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['x_axis_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['x_axis_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        var _ref2 = column.data || {},
+          geo_format = _ref2.geo_format;
+        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+          update['x_axis_geolocation_granularity'] = 'district';
+        } else {
+          update['x_axis_geolocation_granularity'] = null;
+        }
+        update['x_axis_date_granularity'] = null;
+      }
+    }
+    onChange && onChange(update);
+  }, [statistic, onChange]);
+  var onGroupbyDateGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_date_granularity = config.x_axis_date_granularity;
+    var value = option.value;
+    if (value === x_axis_date_granularity) return;
+    onChange && onChange({
+      x_axis_date_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var x_axis_geolocation_granularity = config.x_axis_geolocation_granularity;
+    var value = option.value;
+    if (value === x_axis_geolocation_granularity) return;
+    onChange && onChange({
+      x_axis_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onIncludeEmptyChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var x_axis_include_empty_cells = config.x_axis_include_empty_cells;
+    onChange && onChange({
+      x_axis_include_empty_cells: !x_axis_include_empty_cells
+    });
+  }, [statistic, onChange]);
+  var renderDataSort = useCallback(function () {
+    var config = statistic.config;
+    if (!SUPPORT_DATA_SORT_STATISTIC_TYPES.includes(config.type)) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+      className: "mt-4"
+    }), /*#__PURE__*/React.createElement(DataSort, {
+      statistic: statistic,
+      onChange: onChange
+    }));
+  }, [statistic, onChange]);
+  var config = statistic.config;
+  var table_id = config.table_id,
+    x_axis_column_key = config.x_axis_column_key,
+    x_axis_date_granularity = config.x_axis_date_granularity,
+    x_axis_geolocation_granularity = config.x_axis_geolocation_granularity,
+    x_axis_include_empty_cells = config.x_axis_include_empty_cells;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get(xLabel),
+    selectedTableId: table_id,
+    selectedColumnKey: x_axis_column_key,
+    selectedDateGranularity: x_axis_date_granularity,
+    selectedGeolocationGranularity: x_axis_geolocation_granularity,
+    onGroupByChange: onXAxisColumnChange,
+    onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
+    onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
+  }), /*#__PURE__*/React.createElement(Switch, {
+    key: "x_axis_include_empty_cells",
+    checked: x_axis_include_empty_cells,
+    placeholder: intl.get('Include_empty'),
+    onChange: onIncludeEmptyChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(BasicSummary, {
+    className: "selected-y-axis",
+    label: intl.get(yLabel),
+    summaryTypeKey: 'y_axis_summary_type',
+    summaryMethodKey: 'y_axis_summary_method',
+    summaryColumnKey: 'y_axis_summary_column_key',
+    statistic: statistic,
+    selectedTableId: table_id,
+    tables: tables,
+    supportColumnTypes: [CellType.NUMBER],
+    summaryTypeOptions: STATISTIC_SUMMARY_TYPES,
+    onChange: onChange
+  }), renderDataSort());
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default DataSettings;

package/lib/components/settings/bar-settings/index.js

@@ -0,0 +1,3 @@
+import BarDataSettings from './data-settings';
+import BarStyleSettings from './style-settings';
+export { BarDataSettings, BarStyleSettings };