sea-chart 0.0.1 → 0.0.2

package/dist/settings/widgets/group-by.js

@@ -0,0 +1,160 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { CellType, COLUMNS_ICON_CONFIG, DATE_COLUMN_OPTIONS, getTableById, getTableColumnByKey } from 'dtable-utils';
+import { CHART_SUPPORT_COLUMNS, DATE_GRANULATES, GEOLOCATION_GRANULATES, CHART_SUMMARY_SHOW, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+class GroupBy extends Component {
+  constructor(_props) {
+    super(_props);
+    this.generatorGranulatesOptions = granulates => {
+      return granulates.map(item => {
+        return {
+          value: item,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-module select-module-name ml-0"
+          }, intl.get(CHART_SUMMARY_SHOW[item]))
+        };
+      });
+    };
+    this.initOptions = props => {
+      const {
+        tables,
+        selectedTableId
+      } = props;
+      this.selectedTable = getTableById(tables, selectedTableId);
+      const columns = this.selectedTable && Array.isArray(this.selectedTable.columns) ? this.selectedTable.columns : [];
+      this.validColumns = this.getAvailableColumns(columns);
+      this.columnOptions = this.getColumnOptions(this.validColumns);
+    };
+    this.initGeolocationOptions = props => {
+      const {
+        selectedColumnKey
+      } = props;
+      if (!selectedColumnKey) {
+        this.geolocationGranulatesOptions = [];
+        return;
+      }
+      const groupbyColumn = getTableColumnByKey(this.selectedTable, selectedColumnKey);
+      if (!groupbyColumn) {
+        this.geolocationGranulatesOptions = [];
+        return;
+      }
+      const {
+        geo_format
+      } = groupbyColumn.data || {};
+      if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+        this.geolocationGranulatesOptions = this.generatorGranulatesOptions(GEOLOCATION_GRANULATES.filter(item => item === GEOLOCATION_FORMAT_MAP.PROVINCE));
+        return;
+      }
+      if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+        this.geolocationGranulatesOptions = this.generatorGranulatesOptions(GEOLOCATION_GRANULATES.filter(item => item === 'district'));
+        return;
+      }
+      if (geo_format === GEOLOCATION_FORMAT_MAP.COUNTRY_REGION || geo_format === GEOLOCATION_FORMAT_MAP.LNG_LAT) {
+        this.geolocationGranulatesOptions = [];
+        return;
+      }
+      this.geolocationGranulatesOptions = this.generatorGranulatesOptions(GEOLOCATION_GRANULATES);
+    };
+    this.getAvailableColumns = columns => {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
+    };
+    this.getColumnOptions = columns => {
+      return columns.map(column => {
+        return {
+          value: column,
+          label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "sea-chart-column-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: COLUMNS_ICON_CONFIG[column.type]
+          })), /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name ml-0'
+          }, column.name))
+        };
+      });
+    };
+    this.renderSelector = () => {
+      const {
+        selectedColumnKey
+      } = this.props;
+      const selectedOption = selectedColumnKey ? this.columnOptions.find(option => option.value.key === selectedColumnKey) : null;
+      return /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        classNamePrefix: "select-column",
+        options: this.columnOptions,
+        onChange: this.props.onGroupByChange,
+        noOptionsMessage: () => {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_column'));
+        }
+      });
+    };
+    this.renderGroupbyDateGranulates = () => {
+      const {
+        selectedDateGranularity
+      } = this.props;
+      const selectedOption = this.dateGranulatesOptions.find(option => option.value === selectedDateGranularity);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sea-chart-parameter-item mt-4"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        options: this.dateGranulatesOptions,
+        onChange: this.props.onGroupbyDateGranularityChange
+      }));
+    };
+    this.renderGroupbyGeolocationGranulates = () => {
+      const {
+        selectedGeolocationGranularity
+      } = this.props;
+      const selectedOption = this.geolocationGranulatesOptions.find(option => option.value === selectedGeolocationGranularity);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sea-chart-parameter-item mt-4"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        options: this.geolocationGranulatesOptions,
+        onChange: this.props.onGroupbyGeolocationGranularityChange
+      }));
+    };
+    this.renderGroupBy = () => {
+      const {
+        selectedColumnKey
+      } = this.props;
+      if (!selectedColumnKey) return null;
+      const groupbyColumn = getTableColumnByKey(this.selectedTable, selectedColumnKey);
+      if (!groupbyColumn) return null;
+      const {
+        type: groupbyColumnType
+      } = groupbyColumn;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && this.renderGroupbyDateGranulates(), groupbyColumnType === CellType.GEOLOCATION && this.geolocationGranulatesOptions.length > 0 && this.renderGroupbyGeolocationGranulates());
+    };
+    this.dateGranulatesOptions = this.generatorGranulatesOptions(DATE_GRANULATES);
+    this.initOptions(_props);
+    this.initGeolocationOptions(_props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      selectedTableId,
+      selectedColumnKey
+    } = nextProps;
+    if (selectedTableId !== this.props.selectedTableId) {
+      this.initOptions(nextProps);
+    }
+    if (selectedColumnKey !== this.props.selectedColumnKey) {
+      this.initGeolocationOptions(nextProps);
+    }
+  }
+  render() {
+    const {
+      label,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: classnames('sea-chart-setting-item table-setting', {
+        [className]: className
+      })
+    }, /*#__PURE__*/React.createElement(Label, null, label), this.renderSelector(), this.renderGroupBy());
+  }
+}
+export default GroupBy;

package/{lib/components → dist}/settings/widgets/label-color.js

@@ -1,29 +1,29 @@
 import React from 'react';
 import { FormGroup, Label } from 'reactstrap';
-import { LABEL_COLORS } from '../../../constants';
-import intl from '../../../intl';
+import { LABEL_COLORS } from '../../constants';
+import intl from '../../intl';
 function LabelColor(props) {
-  var labelColor = props.labelColor;
+  const {
+    labelColor
+  } = props;
   return /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-center justify-content-between"
-  }, LABEL_COLORS.map(function (item, index) {
+  }, LABEL_COLORS.map((item, index) => {
     return /*#__PURE__*/React.createElement("div", {
       key: "y-axis-label-color-".concat(index)
     }, /*#__PURE__*/React.createElement("div", {
       className: "colorinput"
     }, /*#__PURE__*/React.createElement("span", {
-      className: "colorinput-color statistic-colorinput d-flex justify-content-center align-items-center",
-      onClick: function onClick(event) {
-        return props.onChange(event, item);
-      },
+      className: "colorinput-color -colorinput d-flex justify-content-center align-items-center",
+      onClick: event => props.onChange(event, item),
       style: {
         backgroundColor: item,
         borderColor: item
       }
     }, item === (labelColor || LABEL_COLORS[0]) && /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-check-mark statistic-check-mark"
+      className: "dtable-font dtable-icon-check-mark -check-mark"
     }))));
   })));
 }

package/dist/settings/widgets/min-max-setting.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { FormGroup, Label, Input } from 'reactstrap';
+import intl from '../../intl';
+class MinMaxSetting extends Component {
+  constructor(props) {
+    super(props);
+    this.onMinChange = e => {
+      const min = e.target.value;
+      this.setState({
+        min
+      }, () => {
+        this.props.onMinChange(min);
+      });
+    };
+    this.onMaxChange = e => {
+      const max = e.target.value;
+      this.setState({
+        max
+      }, () => {
+        this.props.onMaxChange(max);
+      });
+    };
+    this.state = {
+      min: props.min,
+      max: props.max
+    };
+  }
+  render() {
+    const {
+      min,
+      max
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+      className: "mb-2"
+    }, /*#__PURE__*/React.createElement(Label, {
+      for: "min"
+    }, intl.get('Min')), /*#__PURE__*/React.createElement(Input, {
+      id: "min",
+      type: "number",
+      value: min,
+      onChange: this.onMinChange
+    })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+      for: "max"
+    }, intl.get('Max')), /*#__PURE__*/React.createElement(Input, {
+      id: "max",
+      type: "number",
+      value: max,
+      onChange: this.onMaxChange
+    })));
+  }
+}
+export default MinMaxSetting;

package/dist/settings/widgets/mininum-slice-percent.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { NumberInput } from '../../components/';
+import intl from '../../intl';
+class MiniNumSlicePercent extends Component {
+  constructor(props) {
+    super(props);
+    this.replaceNumberNotAllowInput = value => {
+      if (!value) {
+        return '';
+      }
+      value = value.replace(/。/g, '.');
+      value = value.replace(/-/g, '');
+      return value.replace(/[^.-\d,]/g, '');
+    };
+    this.onKeyDown = event => {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        event.target.blur();
+      }
+    };
+    this.onPercentChange = event => {
+      const value = this.replaceNumberNotAllowInput(event.target.value);
+      if (value === this.state.value) return;
+      this.setState({
+        value
+      }, () => {
+        this.onCommit();
+      });
+    };
+    this.onBlur = () => {
+      this.onCommit();
+    };
+    this.onCommit = () => {
+      const {
+        value
+      } = this.state;
+      if (value === this.props.value) return;
+      const validValue = value || value === 0 ? Number(value) : 1.5;
+      this.props.onChange(validValue);
+    };
+    this.state = {
+      value: props.value
+    };
+  }
+  render() {
+    const {
+      value
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Minimum_slice_percent')), /*#__PURE__*/React.createElement(NumberInput, {
+      value: value,
+      onChange: this.onPercentChange,
+      step: 0.1,
+      min: 0,
+      max: 100,
+      onBlur: this.onBlur,
+      onKeyDown: this.onKeyDown
+    }));
+  }
+}
+export default MiniNumSlicePercent;

package/dist/settings/widgets/numeric-summary-item.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { FormGroup, Label } from 'reactstrap';
+import shallowEqual from 'shallowequal';
+import { CHART_TYPE, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_SHOW, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
+import { ChartUtils } from '../../utils';
+import intl from '../../intl';
+class NumericSummaryItem extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initSummaryMethodOptions = props => {
+      const {
+        value,
+        numericColumnOptions
+      } = props;
+      const selectedOption = numericColumnOptions.find(item => item.value.key === value.column_key);
+      const summaryMethodOptions = selectedOption && ChartUtils.isDateSummaryColumn(selectedOption.value) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      this.summaryMethodOptions = summaryMethodOptions.map(item => {
+        return {
+          value: item,
+          label: intl.get(CHART_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    this.onToggleExpand = () => {
+      this.setState({
+        isExpand: !this.state.isExpand
+      });
+    };
+    this.state = {
+      isExpand: true
+    };
+    this.initSummaryMethodOptions(_props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!shallowEqual(this.props.value, nextProps.value)) {
+      this.initSummaryMethodOptions(nextProps);
+    }
+  }
+  render() {
+    const {
+      index,
+      chart,
+      value,
+      numericColumnOptions
+    } = this.props;
+    const {
+      type
+    } = chart.config;
+    const {
+      column_key,
+      summary_method
+    } = value;
+    const selectedColumnOption = numericColumnOptions.find(option => option.value.key === column_key);
+    const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
+    const {
+      isExpand
+    } = this.state;
+    const isFirst = index === 0;
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, {
+      className: "numeric-summary-item d-flex align-items-center justify-content-between w-100"
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+      onClick: this.onToggleExpand,
+      className: "numeric-summary-item-icon dtable-font mr-2 ".concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
+    }), /*#__PURE__*/React.createElement("span", null, (type === CHART_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')) + ' ' + (1 + index))), !isFirst && /*#__PURE__*/React.createElement("div", {
+      className: "delete-numeric-summary-item-content close d-flex align-items-center justify-content-center",
+      onClick: () => this.props.onDelete(index)
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number delete-icon"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "pl-4 ".concat(isExpand ? 'expanded-numeric-summary-content' : 'collapsed-numeric-summary-content d-none')
+    }, /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item numeric-column"
+    }, /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedColumnOption,
+      placeholder: intl.get('Select_a_column'),
+      onChange: option => this.props.onColumnOptionChange(option, index),
+      options: numericColumnOptions
+    })), /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item summary-method"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedSummaryMethodOption,
+      onChange: option => this.props.onSummaryMethodChange(option, index),
+      options: this.summaryMethodOptions
+    }))));
+  }
+}
+export default NumericSummaryItem;

package/dist/settings/widgets/select-table/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import intl from '../../../intl';
+class SelectTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.renderSelector = () => {
+      const {
+        selectedTableId
+      } = this.props;
+      const selectedOption = selectedTableId ? this.tableOptions.find(option => option.value === selectedTableId) : null;
+      return /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: '#wrapper',
+        value: selectedOption,
+        options: this.tableOptions,
+        onChange: this.props.onSettingUpdate
+      });
+    };
+    const {
+      tables
+    } = props;
+    this.tableOptions = Array.isArray(tables) ? tables.map(table => {
+      const value = table._id;
+      const label = table['name'];
+      return {
+        value,
+        label
+      };
+    }) : [];
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-setting-item table-setting"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Table')), this.renderSelector());
+  }
+}
+export default SelectTable;

package/dist/settings/widgets/stack.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import Switch from './switch';
+import { eventStopPropagation } from '../../utils';
+import intl from '../../intl';
+class Stack extends Component {
+  constructor() {
+    super(...arguments);
+    this.onUseStackChange = event => {
+      eventStopPropagation(event);
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        y_axis_use_stack
+      } = config;
+      this.props.onChange({
+        y_axis_use_stack: !y_axis_use_stack
+      });
+    };
+  }
+  render() {
+    const {
+      chart,
+      tables,
+      selectedTableId
+    } = this.props;
+    const {
+      y_axis_use_stack,
+      column_groupby_column_key
+    } = chart.config;
+    if (!column_groupby_column_key) return null;
+    const selectedTable = getTableById(tables, selectedTableId);
+    if (!selectedTable) return null;
+    const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+    if (!columnGroupbyColumn) return null;
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Display_mode')), /*#__PURE__*/React.createElement(Switch, {
+      checked: y_axis_use_stack || false,
+      placeholder: intl.get('Stack'),
+      onChange: this.onUseStackChange
+    }));
+  }
+}
+export default Stack;

package/dist/settings/widgets/summary-method-setting.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { FormGroup, Label } from 'reactstrap';
+import shallowEqual from 'shallowequal';
+import { CHART_TYPE, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_SHOW, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
+import { ChartUtils } from '../../utils';
+import intl from '../../intl';
+class SummaryMethodSettings extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initSummaryMethodOptions = props => {
+      const {
+        value,
+        numericColumnOptions
+      } = props;
+      const selectedOption = numericColumnOptions.find(item => item.value.key === value.column_key);
+      const summaryMethodOptions = selectedOption && ChartUtils.isDateSummaryColumn(selectedOption.value) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      this.summaryMethodOptions = summaryMethodOptions.map(item => {
+        return {
+          value: item,
+          label: intl.get(CHART_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    this.state = {
+      isExpand: true
+    };
+    this.initSummaryMethodOptions(_props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!shallowEqual(this.props.value, nextProps.value)) {
+      this.initSummaryMethodOptions(nextProps);
+    }
+  }
+  render() {
+    const {
+      chart,
+      value,
+      numericColumnOptions
+    } = this.props;
+    const {
+      type
+    } = chart.config;
+    const {
+      column_key,
+      summary_method
+    } = value;
+    const selectedColumnOption = numericColumnOptions.find(option => option.value.key === column_key);
+    const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+      className: "chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, type === CHART_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedColumnOption,
+      placeholder: intl.get('Select_a_column'),
+      onChange: this.props.onColumnOptionChange,
+      options: numericColumnOptions
+    })), /*#__PURE__*/React.createElement(FormGroup, {
+      className: "chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedSummaryMethodOption,
+      onChange: this.props.onSummaryMethodChange,
+      options: this.summaryMethodOptions
+    })));
+  }
+}
+export default SummaryMethodSettings;