sea-chart 0.0.1-beta

package/dist/settings/table-settings/data-settings.js

@@ -0,0 +1,549 @@
+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, ChartUtils } from '../../utils';
+import { CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_DATE_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const selectedTable = useMemo(() => {
+    const {
+      table_id
+    } = chart.config;
+    return getTableById(tables, table_id);
+  }, [tables, chart.config]);
+  const numericColumns = useMemo(() => {
+    if (!selectedTable) return [];
+    const {
+      columns
+    } = selectedTable;
+    return columns.filter(column => ChartUtils.isNumericSummaryColumn(column) || ChartUtils.isDateSummaryColumn(column));
+  }, [selectedTable]);
+  const numericColumnOptions = useMemo(() => {
+    return numericColumns.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))
+      };
+    });
+  }, [numericColumns]);
+  const groupTypeOptions = useMemo(() => {
+    const {
+      column_groupby_column_key
+    } = chart.config;
+    let options = [{
+      value: CHART_Y_GROUP_TYPE.COUNT,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "select-module select-module-name ml-0"
+      }, intl.get(CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+        className: "summary-type-explanation"
+      }, intl.get('Count_the_number_of_records_in_each_group')))
+    }, {
+      value: CHART_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(CHART_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: CHART_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;
+  }, [chart.config]);
+  const onGroupByColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newColumnKey,
+      type
+    } = column;
+    const validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+    if (groupby_column_key === validValue) return;
+    let update = {
+      groupby_column_key: validValue
+    };
+    if (!validValue) {
+      update['groupby_date_granularity'] = null;
+      update['groupby_geolocation_granularity'] = null;
+    } else {
+      if (ChartUtils.isDateSummaryColumn(column)) {
+        update['groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
+        update['groupby_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        const {
+          geo_format
+        } = column.data || {};
+        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);
+  }, [chart, onChange]);
+  const onGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_date_granularity
+    } = config;
+    const value = option.value;
+    if (value === groupby_date_granularity) return;
+    onChange && onChange({
+      groupby_date_granularity: value
+    });
+  }, [chart, onChange]);
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_geolocation_granularity
+    } = config;
+    const value = option.value;
+    if (value === groupby_geolocation_granularity) return;
+    onChange && onChange({
+      groupby_geolocation_granularity: value
+    });
+  }, [chart, onChange]);
+  const onColumnGroupByColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newColumnKey,
+      type
+    } = column;
+    const validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+    if (column_groupby_column_key === validValue) return;
+    let 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'] = CHART_SUMMARY_TYPE.MONTH;
+        update['column_groupby_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        const {
+          geo_format
+        } = column.data || {};
+        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);
+  }, [chart, onChange]);
+  const onColumnGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_date_granularity
+    } = config;
+    const value = option.value;
+    if (value === column_groupby_date_granularity) return;
+    onChange && onChange({
+      column_groupby_date_granularity: value
+    });
+  }, [chart, onChange]);
+  const onColumnGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_geolocation_granularity
+    } = config;
+    const value = option.value;
+    if (value === column_groupby_geolocation_granularity) return;
+    onChange && onChange({
+      column_groupby_geolocation_granularity: value
+    });
+  }, [chart, onChange]);
+  const onIncludeEmptyChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      groupby_include_empty_cells
+    } = config;
+    onChange && onChange({
+      groupby_include_empty_cells: !groupby_include_empty_cells
+    });
+  }, [chart, onChange]);
+  const onGroupTypeChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    let {
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      summary_columns,
+      summary_type,
+      summary_method,
+      summary_column_key
+    } = config;
+    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 === CHART_Y_GROUP_TYPE.COUNT) {
+      summary_type = CHART_SUMMARY_TYPE.COUNT;
+      column_groupby_multiple_numeric_column = false;
+      summary_columns = [];
+      summary_column_key = null;
+      summary_method = '';
+    } else if (value === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+      summary_type = CHART_SUMMARY_TYPE.ADVANCED;
+      column_groupby_multiple_numeric_column = false;
+      summary_columns = [];
+      summary_method = summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
+      summary_column_key = null;
+      if (numericColumns && numericColumns[0]) {
+        summary_column_key = numericColumns[0].key;
+        summary_method = ChartUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
+      }
+    } else if (value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+      summary_type = CHART_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 || CHART_SUMMARY_CALCULATION_METHOD[0];
+      summary_column_key = null;
+      if (numericColumns && numericColumns[0]) {
+        summary_column_key = numericColumns[0].key;
+        summary_method = ChartUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
+      }
+    }
+    const update = {
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      summary_columns,
+      summary_type,
+      summary_method,
+      summary_column_key
+    };
+    onChange && onChange(update);
+  }, [chart, numericColumns, onChange]);
+  const getSelectedGroupType = useCallback(() => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_multiple_numeric_column,
+      summary_type,
+      column_groupby_column_key
+    } = config;
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
+      return groupTypeOptions[1];
+    }
+    if (column_groupby_multiple_numeric_column) {
+      return groupTypeOptions.find(item => item.value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
+    }
+    if (summary_type === CHART_SUMMARY_TYPE.COUNT) {
+      return groupTypeOptions[0];
+    }
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+      return groupTypeOptions[1];
+    }
+  }, [chart, groupTypeOptions]);
+  const onAddNumericColumn = useCallback(column => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns
+    } = config;
+    const columnKey = column.key;
+    let newSummaryColumns = [];
+    const summaryMethod = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_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
+    });
+  }, [chart, onChange]);
+  const onDeleteNumericColumnItem = useCallback(index => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns
+    } = config;
+    summary_columns = summary_columns || [];
+    let newSummaryColumns = summary_columns.slice(0);
+    newSummaryColumns.splice(index - 1, 1);
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [chart, onChange]);
+  const onGroupbyNumericColumnChange = useCallback((option, index) => {
+    const column = option.value;
+    const {
+      config
+    } = chart;
+    const summaryMethods = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+    if (index === 0) {
+      const {
+        summary_method
+      } = config;
+      const summaryMethod = summaryMethods.includes(summary_method) ? summary_method : summaryMethods[0];
+      onChange && onChange({
+        summary_column_key: column.key,
+        summary_method: summaryMethod
+      });
+      return;
+    }
+    let {
+      summary_columns
+    } = config;
+    summary_columns = summary_columns || [];
+    let newSummaryColumns = summary_columns.slice(0);
+    let selectedItem = summary_columns[index - 1];
+    const {
+      summary_method
+    } = selectedItem;
+    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
+    });
+  }, [chart, onChange]);
+  const onSummaryMethodChange = useCallback((option, index) => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    if (index === 0) {
+      onChange && onChange({
+        summary_method: value
+      });
+      return;
+    }
+    let {
+      summary_columns
+    } = config;
+    summary_columns = summary_columns || [];
+    let newSummaryColumns = summary_columns.slice(0);
+    let selectedItem = summary_columns[index - 1];
+    selectedItem = Object.assign({}, selectedItem, {
+      summary_method: value
+    });
+    newSummaryColumns[index - 1] = selectedItem;
+    onChange && onChange({
+      summary_columns: newSummaryColumns
+    });
+  }, [chart, onChange]);
+  const renderGroupbyNumericColumns = useCallback(() => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns,
+      summary_column_key
+    } = config;
+    if (!summary_columns || !Array.isArray(summary_columns)) return null;
+    let usedSummaryColumnKeys = summary_columns.map(item => item.column_key);
+    usedSummaryColumnKeys.push(summary_column_key);
+    return summary_columns.map((item, index) => {
+      const currentUsedSummaryColumnKeys = usedSummaryColumnKeys.filter(columnKey => item.column_key !== columnKey);
+      return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        key: "number-column-".concat(index),
+        chart: chart,
+        numericColumnOptions: numericColumnOptions.filter(item => !currentUsedSummaryColumnKeys.includes(item.value.key)),
+        index: index + 1,
+        value: item,
+        onDelete: onDeleteNumericColumnItem,
+        onColumnOptionChange: onGroupbyNumericColumnChange,
+        onSummaryMethodChange: onSummaryMethodChange
+      });
+    });
+  }, [chart, numericColumnOptions, onDeleteNumericColumnItem, onGroupbyNumericColumnChange, onSummaryMethodChange]);
+  const renderAdvancedStatistic = useCallback(() => {
+    const {
+      config
+    } = chart;
+    const {
+      table_id,
+      column_groupby_column_key,
+      summary_type,
+      column_groupby_multiple_numeric_column,
+      summary_column_key,
+      summary_method,
+      summary_columns
+    } = config;
+    if (summary_type !== CHART_SUMMARY_TYPE.ADVANCED) return null;
+    if (column_groupby_multiple_numeric_column) {
+      const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+      const usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(item => item.column_key) : [];
+      const unUsedSummaryColumns = numericColumns.filter(column => 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
+        },
+        chart: chart,
+        numericColumnOptions: numericColumnOptions.filter(item => !usedSummaryColumnKeys.includes(item.value.key)),
+        onColumnOptionChange: onGroupbyNumericColumnChange,
+        onSummaryMethodChange: onSummaryMethodChange
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-add-number"
+      }, renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistic-add-number-columns d-flex align-items-center",
+        onClick: () => 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'),
+      chart: chart,
+      selectedTableId: table_id,
+      tables: tables,
+      summaryTypeKey: 'summary_type',
+      summaryMethodKey: 'summary_method',
+      summaryColumnKey: 'summary_column_key',
+      onChange: onChange
+    });
+  }, [chart, tables, numericColumns, selectedTable, onChange, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    groupby_column_key,
+    groupby_date_granularity,
+    groupby_geolocation_granularity,
+    groupby_include_empty_cells,
+    column_groupby_column_key,
+    column_groupby_date_granularity,
+    column_groupby_geolocation_granularity
+  } = config;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__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: "sea-chart-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/dist/settings/table-settings/index.js

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