sea-chart 0.0.1

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

@@ -0,0 +1,488 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { CellType, COLUMNS_ICON_CONFIG, DATE_COLUMN_OPTIONS, getTableById, getTableColumnByKey } from 'dtable-utils';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+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 NumericSummaryItem from '../widgets/numeric-summary-item';
+import { eventStopPropagation, StatisticsUtils } from '../../../utils';
+import { STATISTIC_SUMMARY_TYPE, STATISTIC_Y_GROUP_TYPE, STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var selectedTable = useMemo(function () {
+    var table_id = statistic.config.table_id;
+    return getTableById(tables, table_id);
+  }, [tables, statistic.config]);
+  var numericColumns = useMemo(function () {
+    if (!selectedTable) return [];
+    var columns = selectedTable.columns;
+    return columns.filter(function (column) {
+      return StatisticsUtils.isNumericSummaryColumn(column) || StatisticsUtils.isDateSummaryColumn(column);
+    });
+  }, [selectedTable]);
+  var numericColumnOptions = useMemo(function () {
+    return numericColumns.map(function (column) {
+      return {
+        value: column,
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: "header-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))
+      };
+    });
+  }, [numericColumns]);
+  var groupTypeOptions = useMemo(function () {
+    var column_groupby_column_key = statistic.config.column_groupby_column_key;
+    var options = [{
+      value: STATISTIC_Y_GROUP_TYPE.COUNT,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "select-module select-module-name ml-0"
+      }, intl.get(STATISTIC_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+        className: "summary-type-explanation"
+      }, intl.get('Count_the_number_of_records_in_each_group')))
+    }, {
+      value: STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "select-module select-module-name ml-0"
+      }, intl.get(STATISTIC_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
+        className: "summary-type-explanation"
+      }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
+    }];
+    if (!column_groupby_column_key) {
+      options.push({
+        value: STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+      });
+    }
+    return options;
+  }, [statistic.config]);
+  var onGroupByColumnChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_column_key = config.groupby_column_key;
+    var column = option.value;
+    var newColumnKey = column.key,
+      type = column.type;
+    var validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+    if (groupby_column_key === validValue) return;
+    var update = {
+      groupby_column_key: validValue
+    };
+    if (!validValue) {
+      update['groupby_date_granularity'] = null;
+      update['groupby_geolocation_granularity'] = null;
+    } else {
+      if (StatisticsUtils.isDateSummaryColumn(column)) {
+        update['groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['groupby_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['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+          update['groupby_geolocation_granularity'] = 'district';
+        } else {
+          update['groupby_geolocation_granularity'] = null;
+        }
+        update['groupby_date_granularity'] = null;
+      }
+    }
+    onChange && onChange(update);
+  }, [statistic, onChange]);
+  var onGroupbyDateGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_date_granularity = config.groupby_date_granularity;
+    var value = option.value;
+    if (value === groupby_date_granularity) return;
+    onChange && onChange({
+      groupby_date_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_geolocation_granularity = config.groupby_geolocation_granularity;
+    var value = option.value;
+    if (value === groupby_geolocation_granularity) return;
+    onChange && onChange({
+      groupby_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onColumnGroupByColumnChange = useCallback(function (option) {
+    var config = statistic.config;
+    var column_groupby_column_key = config.column_groupby_column_key;
+    var column = option.value;
+    var newColumnKey = column.key,
+      type = column.type;
+    var validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+    if (column_groupby_column_key === validValue) return;
+    var update = {
+      column_groupby_column_key: validValue,
+      summary_columns: []
+    };
+    if (!validValue) {
+      update['column_groupby_date_granularity'] = null;
+      update['column_groupby_geolocation_granularity'] = null;
+    } else {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['column_groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['column_groupby_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        var _ref3 = column.data || {},
+          geo_format = _ref3.geo_format;
+        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+          update['column_groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['column_groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+          update['column_groupby_geolocation_granularity'] = 'district';
+        } else {
+          update['column_groupby_geolocation_granularity'] = null;
+        }
+        update['column_groupby_date_granularity'] = null;
+      }
+    }
+    onChange && onChange(update);
+  }, [statistic, onChange]);
+  var onColumnGroupbyDateGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var column_groupby_date_granularity = config.column_groupby_date_granularity;
+    var value = option.value;
+    if (value === column_groupby_date_granularity) return;
+    onChange && onChange({
+      column_groupby_date_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onColumnGroupbyGeolocationGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity;
+    var value = option.value;
+    if (value === column_groupby_geolocation_granularity) return;
+    onChange && onChange({
+      column_groupby_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onIncludeEmptyChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var groupby_include_empty_cells = config.groupby_include_empty_cells;
+    onChange && onChange({
+      groupby_include_empty_cells: !groupby_include_empty_cells
+    });
+  }, [statistic, onChange]);
+  var onGroupTypeChange = useCallback(function (option) {
+    var value = option.value;
+    var config = statistic.config;
+    var column_groupby_column_key = config.column_groupby_column_key,
+      column_groupby_date_granularity = config.column_groupby_date_granularity,
+      column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
+      summary_columns = config.summary_columns,
+      summary_type = config.summary_type,
+      summary_method = config.summary_method,
+      summary_column_key = config.summary_column_key;
+    column_groupby_column_key = column_groupby_column_key || null;
+    column_groupby_date_granularity = column_groupby_date_granularity || null;
+    column_groupby_geolocation_granularity = column_groupby_geolocation_granularity || null;
+    if (value === STATISTIC_Y_GROUP_TYPE.COUNT) {
+      summary_type = STATISTIC_SUMMARY_TYPE.COUNT;
+      column_groupby_multiple_numeric_column = false;
+      summary_columns = [];
+      summary_column_key = null;
+      summary_method = '';
+    } else if (value === STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+      summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
+      column_groupby_multiple_numeric_column = false;
+      summary_columns = [];
+      summary_method = summary_method || STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      summary_column_key = null;
+      if (numericColumns && numericColumns[0]) {
+        summary_column_key = numericColumns[0].key;
+        summary_method = StatisticsUtils.isDateSummaryColumn(numericColumns[0]) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      }
+    } else if (value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+      summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
+      column_groupby_multiple_numeric_column = true;
+      summary_columns = [];
+      column_groupby_column_key = null;
+      column_groupby_date_granularity = null;
+      column_groupby_geolocation_granularity = null;
+      summary_method = summary_method || STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      summary_column_key = null;
+      if (numericColumns && numericColumns[0]) {
+        summary_column_key = numericColumns[0].key;
+        summary_method = StatisticsUtils.isDateSummaryColumn(numericColumns[0]) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      }
+    }
+    var update = {
+      column_groupby_column_key: column_groupby_column_key,
+      column_groupby_date_granularity: column_groupby_date_granularity,
+      column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
+      summary_columns: summary_columns,
+      summary_type: summary_type,
+      summary_method: summary_method,
+      summary_column_key: summary_column_key
+    };
+    onChange && onChange(update);
+  }, [statistic, numericColumns, onChange]);
+  var getSelectedGroupType = useCallback(function () {
+    var config = statistic.config;
+    var column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
+      summary_type = config.summary_type,
+      column_groupby_column_key = config.column_groupby_column_key;
+    if (summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
+      return groupTypeOptions[1];
+    }
+    if (column_groupby_multiple_numeric_column) {
+      return groupTypeOptions.find(function (item) {
+        return item.value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN;
+      });
+    }
+    if (summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
+      return groupTypeOptions[0];
+    }
+    if (summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED) {
+      return groupTypeOptions[1];
+    }
+  }, [statistic, groupTypeOptions]);
+  var onAddNumericColumn = useCallback(function (column) {
+    var config = statistic.config;
+    var summary_columns = config.summary_columns;
+    var columnKey = column.key;
+    var newSummaryColumns = [];
+    var summaryMethod = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+    if (Array.isArray(summary_columns)) {
+      newSummaryColumns = summary_columns.slice(0);
+      newSummaryColumns.push({
+        column_key: columnKey,
+        summary_method: summaryMethod
+      });
+    } else {
+      newSummaryColumns = [{
+        column_key: columnKey,
+        summary_method: summaryMethod
+      }];
+    }
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [statistic, onChange]);
+  var onDeleteNumericColumnItem = useCallback(function (index) {
+    var config = statistic.config;
+    var summary_columns = config.summary_columns;
+    summary_columns = summary_columns || [];
+    var newSummaryColumns = summary_columns.slice(0);
+    newSummaryColumns.splice(index - 1, 1);
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [statistic, onChange]);
+  var onGroupbyNumericColumnChange = useCallback(function (option, index) {
+    var column = option.value;
+    var config = statistic.config;
+    var summaryMethods = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+    if (index === 0) {
+      var _summary_method = config.summary_method;
+      var summaryMethod = summaryMethods.includes(_summary_method) ? _summary_method : summaryMethods[0];
+      onChange && onChange({
+        summary_column_key: column.key,
+        summary_method: summaryMethod
+      });
+      return;
+    }
+    var summary_columns = config.summary_columns;
+    summary_columns = summary_columns || [];
+    var newSummaryColumns = summary_columns.slice(0);
+    var selectedItem = summary_columns[index - 1];
+    var _selectedItem = selectedItem,
+      summary_method = _selectedItem.summary_method;
+    if (summaryMethods.includes(summary_method)) {
+      selectedItem = Object.assign({}, selectedItem, {
+        column_key: column.key
+      });
+    } else {
+      selectedItem = Object.assign({}, selectedItem, {
+        column_key: column.key,
+        summary_method: summaryMethods[0]
+      });
+    }
+    newSummaryColumns[index - 1] = selectedItem;
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [statistic, onChange]);
+  var onSummaryMethodChange = useCallback(function (option, index) {
+    var value = option.value;
+    var config = statistic.config;
+    if (index === 0) {
+      onChange && onChange({
+        summary_method: value
+      });
+      return;
+    }
+    var summary_columns = config.summary_columns;
+    summary_columns = summary_columns || [];
+    var newSummaryColumns = summary_columns.slice(0);
+    var selectedItem = summary_columns[index - 1];
+    selectedItem = Object.assign({}, selectedItem, {
+      summary_method: value
+    });
+    newSummaryColumns[index - 1] = selectedItem;
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [statistic, onChange]);
+  var renderGroupbyNumericColumns = useCallback(function () {
+    var config = statistic.config;
+    var summary_columns = config.summary_columns,
+      summary_column_key = config.summary_column_key;
+    if (!summary_columns || !Array.isArray(summary_columns)) return null;
+    var usedSummaryColumnKeys = summary_columns.map(function (item) {
+      return item.column_key;
+    });
+    usedSummaryColumnKeys.push(summary_column_key);
+    return summary_columns.map(function (item, index) {
+      var currentUsedSummaryColumnKeys = usedSummaryColumnKeys.filter(function (columnKey) {
+        return item.column_key !== columnKey;
+      });
+      return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        key: "number-column-".concat(index),
+        statistic: statistic,
+        numericColumnOptions: numericColumnOptions.filter(function (item) {
+          return !currentUsedSummaryColumnKeys.includes(item.value.key);
+        }),
+        index: index + 1,
+        value: item,
+        onDelete: onDeleteNumericColumnItem,
+        onColumnOptionChange: onGroupbyNumericColumnChange,
+        onSummaryMethodChange: onSummaryMethodChange
+      });
+    });
+  }, [statistic, numericColumnOptions, onDeleteNumericColumnItem, onGroupbyNumericColumnChange, onSummaryMethodChange]);
+  var renderAdvancedStatistic = useCallback(function () {
+    var config = statistic.config;
+    var table_id = config.table_id,
+      column_groupby_column_key = config.column_groupby_column_key,
+      summary_type = config.summary_type,
+      column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
+      summary_column_key = config.summary_column_key,
+      summary_method = config.summary_method,
+      summary_columns = config.summary_columns;
+    if (summary_type !== STATISTIC_SUMMARY_TYPE.ADVANCED) return null;
+    if (column_groupby_multiple_numeric_column) {
+      var columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+      var usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(function (item) {
+        return item.column_key;
+      }) : [];
+      var unUsedSummaryColumns = numericColumns.filter(function (column) {
+        return column.key !== summary_column_key && !usedSummaryColumnKeys.includes(column.key);
+      });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, !columnGroupbyColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        index: 0,
+        value: {
+          column_key: summary_column_key,
+          summary_method: summary_method
+        },
+        statistic: statistic,
+        numericColumnOptions: numericColumnOptions.filter(function (item) {
+          return !usedSummaryColumnKeys.includes(item.value.key);
+        }),
+        onColumnOptionChange: onGroupbyNumericColumnChange,
+        onSummaryMethodChange: onSummaryMethodChange
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number"
+      }, renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-columns d-flex align-items-center",
+        onClick: function onClick() {
+          return onAddNumericColumn(unUsedSummaryColumns[0]);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-add-table mr-2"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_field')))));
+    }
+    return /*#__PURE__*/React.createElement(BasicSummary, {
+      showSummaryTypes: false,
+      className: "selected-y-axis",
+      label: intl.get('Summary_field'),
+      statistic: statistic,
+      selectedTableId: table_id,
+      tables: tables,
+      summaryTypeKey: 'summary_type',
+      summaryMethodKey: 'summary_method',
+      summaryColumnKey: 'summary_column_key',
+      onChange: onChange
+    });
+  }, [statistic, tables, numericColumns, selectedTable, onChange, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
+  var config = statistic.config;
+  var table_id = config.table_id,
+    groupby_column_key = config.groupby_column_key,
+    groupby_date_granularity = config.groupby_date_granularity,
+    groupby_geolocation_granularity = config.groupby_geolocation_granularity,
+    groupby_include_empty_cells = config.groupby_include_empty_cells,
+    column_groupby_column_key = config.column_groupby_column_key,
+    column_groupby_date_granularity = config.column_groupby_date_granularity,
+    column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    onChange: onChange,
+    FilterSettings: FilterSettings
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get('Row_grouping_field'),
+    selectedTableId: table_id,
+    selectedColumnKey: groupby_column_key,
+    selectedDateGranularity: groupby_date_granularity,
+    selectedGeolocationGranularity: groupby_geolocation_granularity,
+    onGroupByChange: onGroupByColumnChange,
+    onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
+    onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
+  }), /*#__PURE__*/React.createElement(Switch, {
+    key: "groupby_include_empty_cells",
+    checked: groupby_include_empty_cells,
+    placeholder: intl.get('Include_empty'),
+    onChange: onIncludeEmptyChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get('Column_grouping_field'),
+    selectedTableId: table_id,
+    selectedColumnKey: column_groupby_column_key,
+    selectedDateGranularity: column_groupby_date_granularity,
+    selectedGeolocationGranularity: column_groupby_geolocation_granularity,
+    onGroupByChange: onColumnGroupByColumnChange,
+    onGroupbyDateGranularityChange: onColumnGroupbyDateGranularityChange,
+    onGroupbyGeolocationGranularityChange: onColumnGroupbyGeolocationGranularityChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+    classNamePrefix: "chart-summary-types",
+    value: getSelectedGroupType(),
+    onChange: onGroupTypeChange,
+    options: groupTypeOptions
+  })), renderAdvancedStatistic);
+};
+export default DataSettings;

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

@@ -0,0 +1,2 @@
+import TableDataSettings from './data-settings';
+export { TableDataSettings };

package/lib/components/settings/time-comparison-settings/data-settings.js

@@ -0,0 +1,157 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useCallback } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+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 TimePicker from '../widgets/time-picker';
+import { eventStopPropagation } from '../../../utils';
+import { STATISTIC_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    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 onDateChange = useCallback(function (key, value) {
+    var config = statistic.config;
+    var oldValue = config[key];
+    if (value === oldValue) return;
+    onChange && onChange(_defineProperty({}, key, value));
+  }, [statistic, onChange]);
+  var onDisplayIncreaseChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var display_increase = config.display_increase;
+    onChange && onChange({
+      display_increase: !display_increase
+    });
+  }, [statistic, onChange]);
+  var _statistic$config = statistic.config,
+    table_id = _statistic$config.table_id,
+    x_axis_column_key = _statistic$config.x_axis_column_key,
+    x_axis_date_granularity = _statistic$config.x_axis_date_granularity,
+    x_axis_geolocation_granularity = _statistic$config.x_axis_geolocation_granularity,
+    x_axis_date_range_start = _statistic$config.x_axis_date_range_start,
+    x_axis_date_range_end = _statistic$config.x_axis_date_range_end,
+    x_axis_compared_date_range_start = _statistic$config.x_axis_compared_date_range_start,
+    x_axis_compared_date_range_end = _statistic$config.x_axis_compared_date_range_end,
+    display_increase = _statistic$config.display_increase;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get('X_axis'),
+    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(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Date_range')), /*#__PURE__*/React.createElement("div", {
+    className: "time-input-container"
+  }, /*#__PURE__*/React.createElement(TimePicker, {
+    onChange: function onChange(value) {
+      return onDateChange('x_axis_date_range_start', value);
+    },
+    value: x_axis_date_range_start
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "concat"
+  }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+    onChange: function onChange(value) {
+      return onDateChange('x_axis_date_range_end', value);
+    },
+    value: x_axis_date_range_end
+  }))), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Compare_to_date_range')), /*#__PURE__*/React.createElement("div", {
+    className: "time-input-container"
+  }, /*#__PURE__*/React.createElement(TimePicker, {
+    onChange: function onChange(value) {
+      return onDateChange('x_axis_compared_date_range_start', value);
+    },
+    value: x_axis_compared_date_range_start
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "concat"
+  }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+    onChange: function onChange(value) {
+      return onDateChange('x_axis_compared_date_range_end', value);
+    },
+    value: x_axis_compared_date_range_end
+  }))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(BasicSummary, {
+    className: "selected-y-axis",
+    label: intl.get('Y_axis'),
+    statistic: statistic,
+    selectedTableId: table_id,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Switch, {
+    checked: display_increase || false,
+    placeholder: intl.get('Display_increase'),
+    onChange: onDisplayIncreaseChange
+  }));
+};
+export default DataSettings;

package/lib/components/settings/time-comparison-settings/index.js

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