sea-chart 0.0.1

package/lib/components/settings/widgets/numeric-summary-item.js

@@ -0,0 +1,109 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { FormGroup, Label } from 'reactstrap';
+import shallowEqual from 'shallowequal';
+import { STATISTIC_TYPE, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUMMARY_SHOW, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD } from '../../../constants';
+import { StatisticsUtils } from '../../../utils';
+import intl from '../../../intl';
+var NumericSummaryItem = /*#__PURE__*/function (_Component) {
+  _inherits(NumericSummaryItem, _Component);
+  var _super = _createSuper(NumericSummaryItem);
+  function NumericSummaryItem(_props) {
+    var _this;
+    _classCallCheck(this, NumericSummaryItem);
+    _this = _super.call(this, _props);
+    _this.initSummaryMethodOptions = function (props) {
+      var value = props.value,
+        numericColumnOptions = props.numericColumnOptions;
+      var selectedOption = numericColumnOptions.find(function (item) {
+        return item.value.key === value.column_key;
+      });
+      var summaryMethodOptions = selectedOption && StatisticsUtils.isDateSummaryColumn(selectedOption.value) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+      _this.summaryMethodOptions = summaryMethodOptions.map(function (item) {
+        return {
+          value: item,
+          label: intl.get(STATISTIC_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    _this.onToggleExpand = function () {
+      _this.setState({
+        isExpand: !_this.state.isExpand
+      });
+    };
+    _this.state = {
+      isExpand: true
+    };
+    _this.initSummaryMethodOptions(_props);
+    return _this;
+  }
+  _createClass(NumericSummaryItem, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!shallowEqual(this.props.value, nextProps.value)) {
+        this.initSummaryMethodOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        index = _this$props.index,
+        statistic = _this$props.statistic,
+        value = _this$props.value,
+        numericColumnOptions = _this$props.numericColumnOptions;
+      var type = statistic.config.type;
+      var column_key = value.column_key,
+        summary_method = value.summary_method;
+      var selectedColumnOption = numericColumnOptions.find(function (option) {
+        return option.value.key === column_key;
+      });
+      var selectedSummaryMethodOption = this.summaryMethodOptions.find(function (option) {
+        return option.value === summary_method;
+      });
+      var isExpand = this.state.isExpand;
+      var isFirst = index === 0;
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, {
+        className: "numeric-summary-item d-flex align-items-center justify-content-between w-100"
+      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+        onClick: this.onToggleExpand,
+        className: "numeric-summary-item-icon dtable-font mr-2 ".concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
+      }), /*#__PURE__*/React.createElement("span", null, (type === STATISTIC_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')) + ' ' + (1 + index))), !isFirst && /*#__PURE__*/React.createElement("div", {
+        className: "delete-numeric-summary-item-content close d-flex align-items-center justify-content-center",
+        onClick: function onClick() {
+          return _this2.props.onDelete(index);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number delete-icon"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "pl-4 ".concat(isExpand ? 'expanded-numeric-summary-content' : 'collapsed-numeric-summary-content d-none')
+      }, /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item numeric-column"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        placeholder: intl.get('Select_a_column'),
+        onChange: function onChange(option) {
+          return _this2.props.onColumnOptionChange(option, index);
+        },
+        options: numericColumnOptions
+      })), /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item summary-method"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedSummaryMethodOption,
+        onChange: function onChange(option) {
+          return _this2.props.onSummaryMethodChange(option, index);
+        },
+        options: this.summaryMethodOptions
+      }))));
+    }
+  }]);
+  return NumericSummaryItem;
+}(Component);
+export default NumericSummaryItem;

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

@@ -0,0 +1,49 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import intl from '../../../../intl';
+var SelectTable = /*#__PURE__*/function (_React$Component) {
+  _inherits(SelectTable, _React$Component);
+  var _super = _createSuper(SelectTable);
+  function SelectTable(props) {
+    var _this;
+    _classCallCheck(this, SelectTable);
+    _this = _super.call(this, props);
+    _this.renderSelector = function () {
+      var selectedTableId = _this.props.selectedTableId;
+      var selectedOption = selectedTableId ? _this.tableOptions.find(function (option) {
+        return option.value === selectedTableId;
+      }) : null;
+      return /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: '#wrapper',
+        value: selectedOption,
+        options: _this.tableOptions,
+        onChange: _this.props.onSettingUpdate
+      });
+    };
+    var tables = props.tables;
+    _this.tableOptions = Array.isArray(tables) ? tables.map(function (table) {
+      var value = table._id;
+      var label = table['name'];
+      return {
+        value: value,
+        label: label
+      };
+    }) : [];
+    return _this;
+  }
+  _createClass(SelectTable, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-setting-item table-setting"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Table')), this.renderSelector());
+    }
+  }]);
+  return SelectTable;
+}(React.Component);
+export default SelectTable;

package/lib/components/settings/widgets/stack.js

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import Switch from './switch';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
+var Stack = /*#__PURE__*/function (_Component) {
+  _inherits(Stack, _Component);
+  var _super = _createSuper(Stack);
+  function Stack() {
+    var _this;
+    _classCallCheck(this, Stack);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.onUseStackChange = function (event) {
+      eventStopPropagation(event);
+      var statistic = _this.props.statistic;
+      var config = statistic.config;
+      var y_axis_use_stack = config.y_axis_use_stack;
+      _this.props.onChange({
+        y_axis_use_stack: !y_axis_use_stack
+      });
+    };
+    return _this;
+  }
+  _createClass(Stack, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        statistic = _this$props.statistic,
+        tables = _this$props.tables,
+        selectedTableId = _this$props.selectedTableId;
+      var _statistic$config = statistic.config,
+        y_axis_use_stack = _statistic$config.y_axis_use_stack,
+        column_groupby_column_key = _statistic$config.column_groupby_column_key;
+      if (!column_groupby_column_key) return null;
+      var selectedTable = getTableById(tables, selectedTableId);
+      if (!selectedTable) return null;
+      var columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+      if (!columnGroupbyColumn) return null;
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Display_mode')), /*#__PURE__*/React.createElement(Switch, {
+        checked: y_axis_use_stack || false,
+        placeholder: intl.get('Stack'),
+        onChange: this.onUseStackChange
+      }));
+    }
+  }]);
+  return Stack;
+}(Component);
+export default Stack;

package/lib/components/settings/widgets/statistic-type/index.css

@@ -0,0 +1,31 @@
+.seastatistic-settings  .seastatistic-selected-type-container {
+  height: 38px;
+  border: 1px solid hsl(0, 0%, 80%);
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 3px;
+  justify-content: space-between;
+}
+
+.seastatistic-settings .seastatistic-type-icon-container {
+  height: 24px;
+  width: 24px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.seastatistic-settings .seastatistic-type-icon-container:hover {
+  cursor: pointer;
+}
+
+.seastatistic-settings .seastatistic-type-icon-container .seastatistic-type-icon {
+  height: 14px;
+  width: 14px;
+  color: #ccc;
+}
+
+.seastatistic-settings .seastatistic-type-icon-container:hover .seastatistic-type-icon {
+  color: #999;
+}

package/lib/components/settings/widgets/statistic-type/index.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import TypesDialog from '../../../types-dialog';
+import { STATISTIC_TYPE_SHOW } from '../../../../constants';
+import { eventStopPropagation } from '../../../../utils';
+import intl from '../../../../intl';
+import Icon from '../../../icon';
+import './index.css';
+var StatisticType = function StatisticType(_ref) {
+  var statistic = _ref.statistic,
+    generateChartConfig = _ref.generateChartConfig,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDialogShow = _useState2[0],
+    setDialogShow = _useState2[1];
+  var openTypesDialog = useCallback(function (event) {
+    eventStopPropagation(event);
+    setDialogShow(true);
+  }, []);
+  var closeTypesDialog = useCallback(function () {
+    setDialogShow(false);
+  }, []);
+  var onTypeChange = useCallback(function (type) {
+    var config = statistic.config;
+    var oldType = config.type;
+    if (type === oldType) return;
+    var convertedChart = generateChartConfig(_objectSpread(_objectSpread({}, config), {}, {
+      type: type
+    }));
+    onChange && onChange(convertedChart);
+  }, [statistic, generateChartConfig, onChange]);
+  var config = statistic.config;
+  var type = config.type;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item",
+    id: "seastatistic-type-container"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Chart_type')), /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-selected-type-container d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("span", null, intl.get(STATISTIC_TYPE_SHOW[type])), /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-type-icon-container",
+    onClick: openTypesDialog
+  }, /*#__PURE__*/React.createElement(Icon, {
+    symbol: "type-change",
+    className: "seastatistic-type-icon"
+  })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+    type: type,
+    onToggle: closeTypesDialog,
+    onChange: onTypeChange
+  }));
+};
+export default StatisticType;

package/lib/components/settings/widgets/summary-method-setting.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { FormGroup, Label } from 'reactstrap';
+import shallowEqual from 'shallowequal';
+import { STATISTIC_TYPE, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUMMARY_SHOW, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD } from '../../../constants';
+import { StatisticsUtils } from '../../../utils';
+import intl from '../../../intl';
+var SummaryMethodSettings = /*#__PURE__*/function (_Component) {
+  _inherits(SummaryMethodSettings, _Component);
+  var _super = _createSuper(SummaryMethodSettings);
+  function SummaryMethodSettings(_props) {
+    var _this;
+    _classCallCheck(this, SummaryMethodSettings);
+    _this = _super.call(this, _props);
+    _this.initSummaryMethodOptions = function (props) {
+      var value = props.value,
+        numericColumnOptions = props.numericColumnOptions;
+      var selectedOption = numericColumnOptions.find(function (item) {
+        return item.value.key === value.column_key;
+      });
+      var summaryMethodOptions = selectedOption && StatisticsUtils.isDateSummaryColumn(selectedOption.value) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+      _this.summaryMethodOptions = summaryMethodOptions.map(function (item) {
+        return {
+          value: item,
+          label: intl.get(STATISTIC_SUMMARY_SHOW[item])
+        };
+      });
+    };
+    _this.state = {
+      isExpand: true
+    };
+    _this.initSummaryMethodOptions(_props);
+    return _this;
+  }
+  _createClass(SummaryMethodSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!shallowEqual(this.props.value, nextProps.value)) {
+        this.initSummaryMethodOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        statistic = _this$props.statistic,
+        value = _this$props.value,
+        numericColumnOptions = _this$props.numericColumnOptions;
+      var type = statistic.config.type;
+      var column_key = value.column_key,
+        summary_method = value.summary_method;
+      var selectedColumnOption = numericColumnOptions.find(function (option) {
+        return option.value.key === column_key;
+      });
+      var selectedSummaryMethodOption = this.summaryMethodOptions.find(function (option) {
+        return option.value === summary_method;
+      });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+        className: "statistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, null, type === STATISTIC_TYPE.TABLE ? intl.get('Summary_field') : intl.get('Numeric_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        placeholder: intl.get('Select_a_column'),
+        onChange: this.props.onColumnOptionChange,
+        options: numericColumnOptions
+      })), /*#__PURE__*/React.createElement(FormGroup, {
+        className: "statistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedSummaryMethodOption,
+        onChange: this.props.onSummaryMethodChange,
+        options: this.summaryMethodOptions
+      })));
+    }
+  }]);
+  return SummaryMethodSettings;
+}(Component);
+export default SummaryMethodSettings;