sea-chart 0.0.1 → 0.0.2

package/{lib/components → dist}/settings/widgets/title-settings/index.js

@@ -1,21 +1,23 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useMemo } from 'react';
 import TitleText from './title-text';
 import { FontSizeSettings, FontWeightSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
-import { DEFAULT_STATISTIC_FONT_WEIGHT, DEFAULT_STATISTIC_TITLE_FONT_SIZE, STATISTIC_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN } from '../../../../constants';
-var TitleSetting = function TitleSetting(props) {
-  var initialTitle = useMemo(function () {
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN } from '../../../constants';
+const TitleSetting = props => {
+  const initialTitle = useMemo(() => {
     return props.title || {};
   }, [props.title]);
-  var modifyTitle = function modifyTitle(updated) {
+  const modifyTitle = updated => {
     if (!props.title) {
       props.modifyTitle(updated);
       return;
     }
-    props.modifyTitle(_objectSpread(_objectSpread({}, props.title), updated));
+    props.modifyTitle({
+      ...props.title,
+      ...updated
+    });
   };
-  var modifyText = function modifyText(updatedText) {
+  const modifyText = updatedText => {
     if (!updatedText && !initialTitle.text || updatedText === initialTitle.text) {
       return;
     }
@@ -23,17 +25,17 @@ var TitleSetting = function TitleSetting(props) {
       text: updatedText
     });
   };
-  var modifyFontSize = function modifyFontSize(updatedFontSize) {
+  const modifyFontSize = updatedFontSize => {
     modifyTitle({
       font_size: updatedFontSize
     });
   };
-  var modifyHorizontalAlign = function modifyHorizontalAlign(horizontalAlign) {
+  const modifyHorizontalAlign = horizontalAlign => {
     modifyTitle({
       horizontal_align: horizontalAlign
     });
   };
-  var modifyFontWeight = function modifyFontWeight(updatedFontWeight) {
+  const modifyFontWeight = updatedFontWeight => {
     modifyTitle({
       font_weight: updatedFontWeight
     });
@@ -43,11 +45,11 @@ var TitleSetting = function TitleSetting(props) {
     modifyText: modifyText
   }), /*#__PURE__*/React.createElement(FontSizeSettings, {
     fontSize: initialTitle.font_size,
-    defaultFontSize: DEFAULT_STATISTIC_TITLE_FONT_SIZE,
+    defaultFontSize: DEFAULT_CHART_TITLE_FONT_SIZE,
     modifyFontSize: modifyFontSize
   }), /*#__PURE__*/React.createElement(FontWeightSettings, {
-    fontWeight: initialTitle.font_weight || DEFAULT_STATISTIC_FONT_WEIGHT,
-    supportFontWeights: STATISTIC_SUPPORT_FONT_WEIGHTS,
+    fontWeight: initialTitle.font_weight || DEFAULT_CHART_FONT_WEIGHT,
+    supportFontWeights: CHART_SUPPORT_FONT_WEIGHTS,
     modifyFontWeight: modifyFontWeight
   }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
     value: initialTitle.horizontal_align,

package/dist/settings/widgets/title-settings/title-text.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { FormGroup, Input, Label } from 'reactstrap';
+import intl from '../../../intl';
+const TitleText = props => {
+  const [currText, setCurrText] = useState(props.text || '');
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
+  const onSaveText = () => {
+    props.modifyText(currText);
+  };
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "-title-text"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Title')), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    value: currText,
+    onBlur: onSaveText,
+    onChange: event => setCurrText(event.target.value),
+    onKeyDown: onKeyDown
+  }));
+};
+export default TitleText;

package/dist/settings/widgets/y-axis-group-settings.js

@@ -0,0 +1,438 @@
+import React, { Component } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
+import NumericSummaryItem from './numeric-summary-item';
+import SummaryMethodSettings from './summary-method-setting';
+import Groupby from './group-by';
+import { CHART_Y_GROUP_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_TYPE, DATE_GRANULATES, GEOLOCATION_GRANULATES, CHART_DATE_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS } from '../../constants';
+import { ChartUtils } from '../../utils';
+import intl from '../../intl';
+class YAxisGroupSettings extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initTable = props => {
+      const {
+        chart,
+        tables
+      } = props;
+      const {
+        table_id
+      } = chart.config;
+      this.selectedTable = getTableById(tables, table_id);
+    };
+    this.initGroupTypeOptions = () => {
+      this.groupTypeOptions = [{
+        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')))
+      }, {
+        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')))
+      }];
+    };
+    this.initColumns = () => {
+      if (!this.selectedTable) {
+        this.numericColumns = [];
+        this.numericColumnOptions = [];
+        this.columnGroupbyColumnsOptions = [];
+        return;
+      }
+      const columns = Array.isArray(this.selectedTable.columns) ? this.selectedTable.columns : [];
+      this.columns = this.getAvailableColumns(columns);
+      this.columnGroupbyColumnsOptions = this.getColumnOptions(this.columns);
+      this.numericColumns = this.columns.filter(column => ChartUtils.isNumericSummaryColumn(column));
+      this.numericColumnOptions = this.getColumnOptions(this.numericColumns);
+    };
+    this.getAvailableColumns = columns => {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
+    };
+    this.getColumnOptions = columns => {
+      const options = 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))
+        };
+      });
+      return [{
+        value: {
+          key: 'Groupby_null'
+        },
+        label: /*#__PURE__*/React.createElement("span", {
+          className: 'select-module select-module-name null-option-name ml-0'
+        }, intl.get('Select_a_column')),
+        style: {
+          color: 'rgba(0, 0, 0, .25)'
+        }
+      }, ...options];
+    };
+    this.onGroupTypeChange = option => {
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const value = option.value;
+      let update = {};
+      if (value === CHART_Y_GROUP_TYPE.COUNT) {
+        update.column_groupby_multiple_numeric_column = false;
+        update.summary_columns = [];
+        update.y_axis_summary_type = CHART_SUMMARY_TYPE.COUNT;
+        update.y_axis_summary_column_key = null;
+        update.y_axis_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+        update.column_groupby_column_key = config.column_groupby_column_key || null;
+        update.column_groupby_date_granularity = config.column_groupby_date_granularity || null;
+        update.column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity || null;
+      } else if (value === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+        update.column_groupby_multiple_numeric_column = false;
+        update.summary_columns = [];
+        update.y_axis_summary_type = CHART_SUMMARY_TYPE.ADVANCED;
+        update.y_axis_summary_column_key = this.numericColumns[0] ? this.numericColumns[0].key : null;
+        update.y_axis_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+        update.column_groupby_column_key = config.column_groupby_column_key || null;
+        update.column_groupby_date_granularity = config.column_groupby_date_granularity || null;
+        update.column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity || null;
+      } else if (value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+        update.column_groupby_multiple_numeric_column = true;
+        update.summary_columns = [];
+        update.y_axis_summary_type = CHART_SUMMARY_TYPE.ADVANCED;
+        update.y_axis_summary_column_key = this.numericColumns[0] ? this.numericColumns[0].key : null;
+        update.y_axis_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+        update.column_groupby_date_granularity = null;
+        update.column_groupby_geolocation_granularity = null;
+        update.column_groupby_geolocation_granularity = null;
+      }
+      this.props.onChange(update);
+    };
+    this.getSelectedGroupType = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        column_groupby_multiple_numeric_column,
+        y_axis_summary_type
+      } = config;
+      if (column_groupby_multiple_numeric_column) {
+        return this.groupTypeOptions.find(item => item.value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
+      }
+      if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+        return this.groupTypeOptions[0];
+      }
+      if (y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
+        return this.groupTypeOptions[1];
+      }
+      return this.groupTypeOptions[0];
+    };
+    this.onDeleteNumericColumnItem = index => {
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      let {
+        summary_columns
+      } = config;
+      summary_columns = summary_columns || [];
+      summary_columns = [...summary_columns];
+      summary_columns.splice(index - 1, 1);
+      this.props.onChange({
+        summary_columns: [...summary_columns]
+      });
+    };
+    this.onGroupbyNumericColumnChange = (option, index) => {
+      const column = option.value;
+      const {
+        key: newXAxisColumnKey
+      } = column;
+      const validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const summaryMethods = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      if (index === 0) {
+        let {
+          y_axis_summary_method
+        } = config;
+        if (!summaryMethods.includes(y_axis_summary_method)) {
+          y_axis_summary_method = summaryMethods[0];
+        }
+        this.props.onChange({
+          y_axis_summary_column_key: validValue,
+          y_axis_summary_method
+        });
+        return;
+      }
+      let {
+        summary_columns
+      } = config;
+      summary_columns = summary_columns || [];
+      summary_columns = [...summary_columns];
+      let selectedItem = summary_columns[index - 1];
+      const {
+        summary_method
+      } = selectedItem;
+      if (summaryMethods.includes(summary_method)) {
+        selectedItem = Object.assign({}, selectedItem, {
+          column_key: validValue
+        });
+      } else {
+        selectedItem = Object.assign({}, selectedItem, {
+          column_key: validValue,
+          summary_method: summaryMethods[0]
+        });
+      }
+      summary_columns[index - 1] = selectedItem;
+      this.props.onChange({
+        summary_columns
+      });
+    };
+    this.onSummaryMethodChange = (option, index) => {
+      const value = option.value;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      if (index === 0) {
+        this.props.onChange({
+          y_axis_summary_method: value
+        });
+        return;
+      }
+      let {
+        summary_columns
+      } = config;
+      summary_columns = summary_columns || [];
+      summary_columns = [...summary_columns];
+      let selectedItem = summary_columns[index - 1];
+      selectedItem = Object.assign({}, selectedItem, {
+        summary_method: value
+      });
+      summary_columns[index - 1] = selectedItem;
+      this.props.onChange({
+        summary_columns
+      });
+    };
+    this.onAddNumericColumn = column => {
+      if (!column) return;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      let {
+        summary_columns
+      } = config;
+      const newNumericColumnKey = column.key;
+      const summaryMethods = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      if (Array.isArray(summary_columns)) {
+        summary_columns = [...summary_columns];
+        summary_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: summaryMethods[0]
+        });
+      } else {
+        summary_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: summaryMethods[0]
+        }];
+      }
+      this.props.onChange({
+        summary_columns: [...summary_columns]
+      });
+    };
+    this.onGroupByChange = option => {
+      const column = option.value;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        column_groupby_column_key
+      } = config;
+      if (column_groupby_column_key === column.key) return;
+      this.props.onChange({
+        column_groupby_column_key: column.key,
+        column_groupby_date_granularity: DATE_GRANULATES[0],
+        column_groupby_geolocation_granularity: GEOLOCATION_GRANULATES[0]
+      });
+    };
+    this.onGroupbyDateGranularityChange = option => {
+      const value = option.value;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        column_groupby_date_granularity
+      } = config;
+      if (column_groupby_date_granularity === value) return;
+      this.props.onChange({
+        column_groupby_date_granularity: value
+      });
+    };
+    this.onGroupbyGeolocationGranularityChange = option => {
+      const value = option.value;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        column_groupby_geolocation_granularity
+      } = config;
+      if (column_groupby_geolocation_granularity === value) return;
+      this.props.onChange({
+        column_groupby_geolocation_granularity: value
+      });
+    };
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        summary_columns
+      } = config;
+      if (!summary_columns || !Array.isArray(summary_columns)) return null;
+      return summary_columns.map((item, index) => {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          key: "number-column-".concat(index),
+          index: index + 1,
+          value: item,
+          chart: chart,
+          numericColumnOptions: this.numericColumnOptions,
+          onDelete: this.onDeleteNumericColumnItem,
+          onColumnOptionChange: this.onGroupbyNumericColumnChange,
+          onSummaryMethodChange: this.onSummaryMethodChange
+        });
+      });
+    };
+    this.renderColumnGroupbyMultipleNumericColumn = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        column_groupby_multiple_numeric_column,
+        y_axis_summary_column_key,
+        summary_columns
+      } = chart.config;
+      if (!column_groupby_multiple_numeric_column) return null;
+      const usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(item => item.column_key) : [];
+      const unUsedSummaryColumns = this.numericColumns.filter(column => column.key !== y_axis_summary_column_key && !usedSummaryColumnKeys.includes(column.key));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-add-number"
+      }, this.renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistic-add-number-columns d-flex align-items-center",
+        onClick: () => this.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'))));
+    };
+    this.initGroupTypeOptions();
+    this.initTable(_props);
+    this.initColumns();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.chart.config.table_id !== this.props.chart.config.table_id) {
+      this.initTable(nextProps);
+      this.initColumns();
+    }
+  }
+  render() {
+    const {
+      label,
+      chart,
+      tables
+    } = this.props;
+    const selectedTypeOption = this.getSelectedGroupType();
+    const {
+      y_axis_summary_type,
+      column_groupby_multiple_numeric_column,
+      y_axis_summary_column_key,
+      y_axis_summary_method,
+      table_id,
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity
+    } = chart.config;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+      classNamePrefix: "chart-summary-types",
+      value: selectedTypeOption,
+      onChange: this.onGroupTypeChange,
+      options: this.groupTypeOptions
+    })), y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
+      index: 0,
+      value: {
+        column_key: y_axis_summary_column_key,
+        summary_method: y_axis_summary_method
+      },
+      chart: chart,
+      numericColumnOptions: this.numericColumnOptions,
+      onColumnOptionChange: this.onGroupbyNumericColumnChange,
+      onSummaryMethodChange: this.onSummaryMethodChange
+    }) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
+      value: {
+        column_key: y_axis_summary_column_key,
+        summary_method: y_axis_summary_method
+      },
+      chart: chart,
+      numericColumnOptions: this.numericColumnOptions,
+      onColumnOptionChange: option => this.onGroupbyNumericColumnChange(option, 0),
+      onSummaryMethodChange: option => this.onSummaryMethodChange(option, 0)
+    })), this.renderColumnGroupbyMultipleNumericColumn(), (!column_groupby_multiple_numeric_column && y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED || y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(Groupby, {
+      label: intl.get('Group_by'),
+      tables: tables,
+      selectedTableId: table_id,
+      selectedColumnKey: column_groupby_column_key,
+      selectedDateGranularity: column_groupby_date_granularity,
+      selectedGeolocationGranularity: column_groupby_geolocation_granularity,
+      onGroupByChange: this.onGroupByChange,
+      onGroupbyDateGranularityChange: this.onGroupbyDateGranularityChange,
+      onGroupbyGeolocationGranularityChange: this.onGroupbyGeolocationGranularityChange
+    }));
+  }
+}
+export default YAxisGroupSettings;

package/dist/utils/cell-format-utils.js

@@ -0,0 +1,42 @@
+import { COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getCollaboratorsName, getFormulaDisplayString } from 'dtable-utils';
+import ObjectUtils from './object-utils';
+export const getClientFormulaDisplayString = function (value, columnData) {
+  let {
+    collaborators = []
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!columnData || !value && value !== 0) return '';
+  const {
+    result_type,
+    array_type
+  } = columnData;
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+    if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+      if (!value) {
+        return null;
+      }
+      const collaboratorList = Array.isArray(value) ? value : [value];
+      return getCollaboratorsName(collaborators, collaboratorList);
+    }
+  }
+  return getFormulaDisplayString(value, columnData, {
+    collaborators
+  });
+};
+export const getClientLinkDisplayString = (links, columnData, _ref) => {
+  let {
+    collaborators = []
+  } = _ref;
+  if (!columnData || !Array.isArray(links) || links.length === 0) {
+    return null;
+  }
+
+  // eslint-disable-next-line
+  const formulaData = ObjectUtils.hasOwnProperty(columnData, 'result_type') ? columnData : {
+    ...columnData,
+    result_type: FORMULA_RESULT_TYPE.ARRAY
+  };
+  const displayValue = links.map(link => link.display_value);
+  return getClientFormulaDisplayString(displayValue, formulaData, {
+    collaborators
+  });
+};