sea-chart 0.0.1 → 0.0.2

package/dist/settings/widgets/chart-type/index.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { CHART_TYPE_SHOW } from '../../../constants';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
+import { Icon, TypesDialog } from '../../../components';
+import './index.css';
+const ChartType = _ref => {
+  let {
+    chart,
+    generateChartConfig,
+    onChange
+  } = _ref;
+  const [isDialogShow, setDialogShow] = useState(false);
+  const openTypesDialog = useCallback(event => {
+    eventStopPropagation(event);
+    setDialogShow(true);
+  }, []);
+  const closeTypesDialog = useCallback(() => {
+    setDialogShow(false);
+  }, []);
+  const onTypeChange = useCallback(type => {
+    const {
+      config
+    } = chart;
+    const {
+      type: oldType
+    } = config;
+    if (type === oldType) return;
+    const convertedChart = generateChartConfig({
+      ...config,
+      type
+    });
+    onChange && onChange(convertedChart);
+  }, [chart, generateChartConfig, onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item",
+    id: "sea-chart-type-container"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Chart_type')), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-selected-type-container d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("span", null, intl.get(CHART_TYPE_SHOW[type])), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-type-icon-container",
+    onClick: openTypesDialog
+  }, /*#__PURE__*/React.createElement(Icon, {
+    symbol: "type-change",
+    className: "sea-chart-type-icon"
+  })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+    type: type,
+    onToggle: closeTypesDialog,
+    onChange: onTypeChange
+  }));
+};
+export default ChartType;

package/{lib/components → dist}/settings/widgets/common-data-settings.js

@@ -1,31 +1,38 @@
 import React, { useCallback } from 'react';
-import StatisticType from './statistic-type';
+import StatisticType from './chart-type';
 import SelectTable from './select-table';
 import DataFilter from './data-filter';
 import Divider from './divider';
-import { generateChartConfig } from '../../../utils';
-var CommonDataSettings = function CommonDataSettings(_ref) {
-  var statistic = _ref.statistic,
-    tables = _ref.tables,
-    FilterSettings = _ref.FilterSettings,
-    onChange = _ref.onChange;
-  var onTableChange = useCallback(function (option) {
-    var config = statistic.config;
-    var table_id = config.table_id;
-    var selectedTableId = option.value;
+import { generateChartConfig } from '../../utils';
+const CommonDataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const onTableChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      table_id
+    } = config;
+    const selectedTableId = option.value;
     if (selectedTableId === table_id) return;
     onChange && onChange({
       table_id: selectedTableId,
       filters: [],
       filter_conjunction: 'And'
     });
-  }, [statistic, onChange]);
-  var generateConfig = useCallback(function (config) {
+  }, [chart, onChange]);
+  const generateConfig = useCallback(config => {
     return generateChartConfig(config, tables);
   }, [tables]);
-  var table_id = statistic.config.table_id;
+  const {
+    table_id
+  } = chart.config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticType, {
-    statistic: statistic,
+    chart: chart,
     generateChartConfig: generateConfig,
     onChange: onChange
   }), /*#__PURE__*/React.createElement(SelectTable, {
@@ -34,9 +41,8 @@ var CommonDataSettings = function CommonDataSettings(_ref) {
     onSettingUpdate: onTableChange
   }), /*#__PURE__*/React.createElement(DataFilter, {
     tables: tables,
-    statistic: statistic,
-    onChange: onChange,
-    FilterSettings: FilterSettings
+    chart: chart,
+    onChange: onChange
   }), /*#__PURE__*/React.createElement(Divider, null));
 };
 export default CommonDataSettings;

package/dist/settings/widgets/data-filter/index.css

@@ -0,0 +1,17 @@
+.sea-chart-settings .sea-chart-data-filter {
+  width: 100%;
+  padding: 3px 4px;
+  border-radius: 4px;
+  line-height: 22px;
+}
+
+.sea-chart-settings .sea-chart-data-filter:hover {
+  cursor: pointer;
+  background-color: #efefef;
+}
+
+.sea-chart-settings .sea-chart-data-filter .dtable-icon-filter {
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+}

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

@@ -1,64 +1,78 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useMemo, useState } from 'react';
 import { Label, FormGroup } from 'reactstrap';
 import { getTableById } from 'dtable-utils';
-import { eventStopPropagation, generatorKey } from '../../../../utils';
-import intl from '../../../../intl';
+import DTableFiltersPopover from "dtable-ui-component/lib/DTableFiltersPopover";
+import { eventStopPropagation, generatorKey } from '../../../utils';
+import intl from '../../../intl';
+import context from '../../../context';
 import './index.css';
-var DataFilter = function DataFilter(_ref) {
-  var statistic = _ref.statistic,
-    tables = _ref.tables,
-    FilterSettings = _ref.FilterSettings,
-    onChange = _ref.onChange;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFilterSetterShow = _useState2[0],
-    setIsFilterSetterShow = _useState2[1];
-  var toggleFilterPopover = useCallback(function (event) {
+const DataFilter = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const [isFilterSetterShow, setIsFilterSetterShow] = useState(false);
+  const toggleFilterPopover = useCallback(event => {
     eventStopPropagation(event);
     setIsFilterSetterShow(!isFilterSetterShow);
   }, [isFilterSetterShow]);
-  var updateFilters = useCallback(function (update) {
+  const updateFilters = useCallback(update => {
     onChange && onChange(update);
   }, [onChange]);
-  var id = useMemo(function () {
-    return 'seastatistic-data-filter-' + generatorKey();
+  const id = useMemo(() => {
+    return 'sea-chart-data-filter-' + generatorKey();
   }, []);
-  var table = useMemo(function () {
-    var config = statistic.config;
-    var table_id = config.table_id;
+  const table = useMemo(() => {
+    const {
+      config
+    } = chart;
+    const {
+      table_id
+    } = config;
     return getTableById(tables, table_id);
-  }, [tables, statistic]);
-  var filterMessage = useMemo(function () {
-    var config = statistic.config;
-    var filters = config.filters;
-    var filterMessage = intl.get('Filter');
+  }, [tables, chart]);
+  const filterMessage = useMemo(() => {
+    const {
+      config
+    } = chart;
+    const {
+      filters
+    } = config;
+    let filterMessage = intl.get('Filter');
     if (filters.length === 1) {
       filterMessage = intl.get('1 Filter');
     } else if (filters.length > 1) {
       filterMessage = filters.length + ' ' + intl.get('Filters');
     }
     return filterMessage;
-  }, [statistic]);
-  var filterConjunction = useMemo(function () {
-    var config = statistic.config;
-    var filter_conjunction = config.filter_conjunction;
+  }, [chart]);
+  const filterConjunction = useMemo(() => {
+    const {
+      config
+    } = chart;
+    const {
+      filter_conjunction
+    } = config;
     return filter_conjunction || 'And';
-  }, [statistic]);
-  var collaborators = window.seaStatistic.context.getCollaboratorsFromCache();
-  var config = statistic.config;
-  var filters = config.filters;
+  }, [chart]);
+  const collaborators = context.getCollaboratorsFromCache();
+  const {
+    config
+  } = chart;
+  const {
+    filters
+  } = config;
   return /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Data_settings')), table ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: "seastatistic-data-filter",
+    className: "sea-chart-data-filter",
     onClick: toggleFilterPopover
   }, /*#__PURE__*/React.createElement("i", {
     className: "dtable-font dtable-icon-filter"
-  }), /*#__PURE__*/React.createElement("span", null, filterMessage)), isFilterSetterShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSettings, {
+  }), /*#__PURE__*/React.createElement("span", null, filterMessage)), isFilterSetterShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DTableFiltersPopover, {
     isNeedSubmit: true,
-    isPre: true,
     target: id,
     filters: filters,
     filterConjunction: filterConjunction,
@@ -68,7 +82,7 @@ var DataFilter = function DataFilter(_ref) {
     update: updateFilters
   }))) : /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: "seastatistic-data-filter disabled"
+    className: "sea-chart-data-filter disabled"
   }, /*#__PURE__*/React.createElement("i", {
     className: "dtable-font dtable-icon-filter"
   }), /*#__PURE__*/React.createElement("span", null, filterMessage)));

package/dist/settings/widgets/data-sort.js

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableRadio from "dtable-ui-component/lib/DTableRadio";
+import { eventStopPropagation } from '../../utils/';
+import { CHART_DATA_SORT_TYPE, CHART_DATA_SORT_TYPES, CHART_DATA_SORT_TYPE_SHOW } from '../../constants';
+import intl from '../../intl';
+const DataSort = _ref => {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const onChangeSortType = useCallback((event, sortType) => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      sort_type
+    } = config;
+    const validSortType = sortType === CHART_DATA_SORT_TYPE.NOT_SORTED ? '' : sortType;
+    if (sort_type === validSortType) return;
+    onChange && onChange({
+      sort_type: validSortType
+    });
+  }, [chart, onChange]);
+  const {
+    sort_type: sortType
+  } = chart.config;
+  const selectedSortType = sortType || CHART_DATA_SORT_TYPE.NOT_SORTED;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Data_sort')), CHART_DATA_SORT_TYPES.map((sortType, index) => {
+    const isChecked = sortType === selectedSortType;
+    return /*#__PURE__*/React.createElement("div", {
+      key: 'chart-group-item-' + index,
+      className: "chart-group-item"
+    }, /*#__PURE__*/React.createElement(DTableRadio, {
+      isChecked: isChecked,
+      onCheckedChange: event => onChangeSortType(event, sortType),
+      label: intl.get(CHART_DATA_SORT_TYPE_SHOW[sortType])
+    }));
+  }));
+};
+export default DataSort;

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

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { getTableById } from 'dtable-utils';
+import { CHART_TYPE, CHART_DATE_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_SHOW, CHART_DATE_COLUMN_LIST } from '../../constants';
+import intl from '../../intl';
+class DateSummaryItem extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initSummaryMethodOptions = () => {
+      this.summaryMethodOptions = CHART_DATE_SUMMARY_CALCULATION_METHOD.map(item => {
+        return {
+          value: item,
+          label: intl.get(CHART_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    this.initDateColumnOptions = props => {
+      const {
+        tables,
+        chart
+      } = props;
+      const {
+        table_id
+      } = chart.config;
+      const selectedTable = getTableById(tables, table_id);
+      if (!selectedTable) {
+        this.dateColumnOptions = [];
+        return;
+      }
+      const columns = selectedTable.columns;
+      this.dateColumnOptions = columns.filter(column => CHART_DATE_COLUMN_LIST.includes(column.type)).map(column => {
+        return {
+          value: column.key,
+          label: column.name
+        };
+      });
+    };
+    this.onToggleExpand = () => {
+      this.setState({
+        isExpand: !this.state.isExpand
+      });
+    };
+    this.state = {
+      isExpand: true
+    };
+    this.initDateColumnOptions(_props);
+    this.initSummaryMethodOptions();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      chart
+    } = nextProps;
+    if (chart.config.table_id !== this.props.chart.config.table_id) {
+      this.initDateColumnOptions(nextProps);
+    }
+  }
+  render() {
+    const {
+      index,
+      chart,
+      value
+    } = this.props;
+    const {
+      type
+    } = chart.config;
+    const {
+      column_key,
+      summary_method
+    } = value;
+    const selectedColumnOption = this.dateColumnOptions.find(option => option.value === column_key);
+    const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
+    const {
+      isExpand
+    } = this.state;
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      style: {
+        paddingBottom: isExpand ? '14px' : '7px'
+      },
+      className: "sea-chart-parameter-item container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "numeric-summary-item"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "title-item title-left"
+    }, /*#__PURE__*/React.createElement("i", {
+      onClick: this.onToggleExpand,
+      className: "icon dtable-font ".concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
+    }), /*#__PURE__*/React.createElement("label", null, (type === CHART_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')) + (1 + index))), /*#__PURE__*/React.createElement("span", {
+      className: "title-item title-right"
+    }, index !== 0 && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number close-icon",
+      onClick: () => this.props.onDelete(index)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(isExpand ? 'expanded-numeric-summary-content' : 'collapsed-numeric-summary-content')
+    }, /*#__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: this.dateColumnOptions
+    })), /*#__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 DateSummaryItem;

package/dist/settings/widgets/display-values-settings/index.css

@@ -0,0 +1,13 @@
+.sea-chart-settings .display-value-settings {
+  margin-bottom: 12px;
+}
+
+.sea-chart-settings .display-value-settings .custom-switch {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.sea-chart-settings .display-value-settings .custom-switch .custom-switch-description {
+  flex: 1;
+  white-space: unset !important;
+}

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

@@ -1,26 +1,31 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { useCallback } from 'react';
 import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import { FormGroup } from 'reactstrap';
 import { FontSizeSettings } from '../font-settings';
-import { eventStopPropagation } from '../../../../utils';
-import intl from '../../../../intl';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
 import './index.css';
-var DisplayValuesSettings = function DisplayValuesSettings(_ref) {
-  var isShowValueKey = _ref.isShowValueKey,
-    isShowValue = _ref.isShowValue,
-    fontSizeKey = _ref.fontSizeKey,
-    fontSize = _ref.fontSize,
-    onChange = _ref.onChange;
-  var onDisplayValueChange = useCallback(function (event) {
+const DisplayValuesSettings = _ref => {
+  let {
+    isShowValueKey,
+    isShowValue,
+    fontSizeKey,
+    fontSize,
+    onChange
+  } = _ref;
+  const onDisplayValueChange = useCallback(event => {
     eventStopPropagation(event);
-    onChange && onChange(_defineProperty({}, isShowValueKey, !isShowValue));
+    onChange && onChange({
+      [isShowValueKey]: !isShowValue
+    });
   }, [isShowValueKey, isShowValue, onChange]);
-  var onFontSizeChange = useCallback(function (value) {
-    onChange && onChange(_defineProperty({}, fontSizeKey, value));
+  const onFontSizeChange = useCallback(value => {
+    onChange && onChange({
+      [fontSizeKey]: value
+    });
   }, [fontSizeKey, onChange]);
   return /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: isShowValue,

package/{lib/components → dist}/settings/widgets/divider/index.css

@@ -1,4 +1,4 @@
-.seastatistic-settings .seastatistic-divider {
+.sea-chart-settings .sea-chart-divider {
   border-bottom: 1px solid #e4e4e4;
   margin-bottom: 14px;
 }

package/dist/settings/widgets/divider/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classnames from 'classnames';
+import './index.css';
+const Divider = _ref => {
+  let {
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sea-chart-divider', className)
+  });
+};
+export default Divider;

package/{lib/components → dist}/settings/widgets/font-settings/font-size-settings.js

@@ -2,26 +2,28 @@ import React, { useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { FormGroup, Label } from 'reactstrap';
 import { isNumber } from 'dtable-utils';
-import PixelEditor from '../../../pixel-editor';
-import intl from '../../../../intl';
-var FontSizeSettings = function FontSizeSettings(_ref) {
-  var fontSize = _ref.fontSize,
-    defaultFontSize = _ref.defaultFontSize,
-    modifyFontSize = _ref.modifyFontSize,
-    className = _ref.className,
-    title = _ref.title;
-  var initialFontSize = useMemo(function () {
+import { PixelEditor } from '../../../components';
+import intl from '../../../intl';
+const FontSizeSettings = _ref => {
+  let {
+    fontSize,
+    defaultFontSize,
+    modifyFontSize,
+    className,
+    title
+  } = _ref;
+  const initialFontSize = useMemo(() => {
     if (isNumber(fontSize)) return fontSize;
     if (isNumber(defaultFontSize)) return defaultFontSize;
     return null;
   }, [fontSize, defaultFontSize]);
-  var onChange = useCallback(function (currFontSize) {
-    var parsedFontSize = parseInt(currFontSize);
+  const onChange = useCallback(currFontSize => {
+    const parsedFontSize = parseInt(currFontSize);
     if (!fontSize && !parsedFontSize || parsedFontSize === fontSize) return;
     modifyFontSize(parsedFontSize);
   }, [fontSize, modifyFontSize]);
   return /*#__PURE__*/React.createElement(FormGroup, {
-    className: classnames('seastatistic-setting-item font-size-setting', className)
+    className: classnames('sea-chart-setting-item font-size-setting', className)
   }, /*#__PURE__*/React.createElement(Label, null, title || intl.get('Font_size')), /*#__PURE__*/React.createElement(PixelEditor, {
     pixel: initialFontSize,
     defaultPixel: defaultFontSize,

package/{lib/components → dist}/settings/widgets/font-settings/font-weight-settings.js

@@ -1,43 +1,41 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { FormGroup, Label } from 'reactstrap';
 import DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
-import { generatorCommonOptions } from '../../../../utils';
-import intl from '../../../../intl';
-var FontWeightSettings = function FontWeightSettings(props) {
-  var _useState = useState(props.fontWeight),
-    _useState2 = _slicedToArray(_useState, 2),
-    fontWeight = _useState2[0],
-    setFontWeight = _useState2[1];
-  var mountRef = useRef(false);
-  useEffect(function () {
+import { generatorCommonOptions } from '../../../utils';
+import intl from '../../../intl';
+const FontWeightSettings = props => {
+  const [fontWeight, setFontWeight] = useState(props.fontWeight);
+  const mountRef = useRef(false);
+  useEffect(() => {
     if (!mountRef.current) {
       mountRef.current = true;
     } else {
       setFontWeight(props.fontWeight);
     }
   }, [props.fontWeight]);
-  var fontWeightOptions = useMemo(function () {
+  const fontWeightOptions = useMemo(() => {
     return generatorCommonOptions(props.supportFontWeights, fontWeight);
   }, [props.supportFontWeights, fontWeight]);
-  var selectedFontWeightOption = useMemo(function () {
+  const selectedFontWeightOption = useMemo(() => {
     return {
       label: /*#__PURE__*/React.createElement("span", {
         className: "common-selected-font"
       }, fontWeight)
     };
   }, [fontWeight]);
-  var modifyFontWeight = function modifyFontWeight(fontWeightOption) {
-    var nextFontWeight = fontWeightOption.value;
+  const modifyFontWeight = fontWeightOption => {
+    const {
+      value: nextFontWeight
+    } = fontWeightOption;
     if (nextFontWeight === fontWeight) return;
     setFontWeight(nextFontWeight);
     props.modifyFontWeight(nextFontWeight);
   };
   return /*#__PURE__*/React.createElement(FormGroup, {
-    className: classnames('setting-item seastatistic-font-weight-setting')
+    className: classnames('setting-item sea-chart-font-weight-setting')
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Font_weight')), /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
-    className: "seastatistic-font-weight",
+    className: "sea-chart-font-weight",
     value: selectedFontWeightOption,
     options: fontWeightOptions,
     onSelectOption: modifyFontWeight