sea-chart 0.0.1 → 0.0.2

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

@@ -1,167 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import React, { Fragment, useCallback, useMemo } from 'react';
-import { FormGroup } from 'reactstrap';
-import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import CommonDataSettings from '../widgets/common-data-settings';
-import { StatisticsUtils } from '../../../utils';
-import { STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../../constants';
-import intl from '../../../intl';
-var DataSettings = function DataSettings(_ref) {
-  var tables = _ref.tables,
-    statistic = _ref.statistic,
-    FilterSettings = _ref.FilterSettings,
-    onChange = _ref.onChange;
-  var summaryMethodsOptions = useMemo(function () {
-    var numberCardSummaryMethod = [BASIC_NUMBER_CARD_CALCULATION_METHOD].concat(_toConsumableArray(STATISTIC_SUMMARY_CALCULATION_METHOD));
-    return numberCardSummaryMethod.map(function (method) {
-      return {
-        label: /*#__PURE__*/React.createElement("span", {
-          className: "select-option-name"
-        }, intl.get(STATISTIC_SUMMARY_SHOW[method])),
-        value: method
-      };
-    });
-  }, []);
-  var selectedTable = useMemo(function () {
-    var selectedTableId = statistic.config.table_id;
-    return getTableById(tables, selectedTableId);
-  }, [statistic.config, tables]);
-  var validColumns = useMemo(function () {
-    var columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
-    if (!columns || !Array.isArray(columns)) return [];
-    return columns.filter(function (column) {
-      return STATISTIC_SUPPORT_COLUMNS.includes(column.type);
-    });
-  }, [selectedTable]);
-  var numericColumns = useMemo(function () {
-    return validColumns.filter(function (column) {
-      return StatisticsUtils.isNumericSummaryColumn(column);
-    });
-  }, [validColumns]);
-  var numericColumnOptions = useMemo(function () {
-    var options = 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))
-      };
-    });
-    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)'
-      }
-    }].concat(_toConsumableArray(options));
-  }, [numericColumns]);
-  var onSelectTargetValueColumn = useCallback(function (option) {
-    var config = statistic.config;
-    var target_value_column_key = config.target_value_column_key;
-    var newColumnKey = option.value.key;
-    if (target_value_column_key === newColumnKey) return;
-    onChange && onChange({
-      target_value_column_key: newColumnKey
-    });
-  }, [statistic, onChange]);
-  var onSelectTotalValueColumn = useCallback(function (option) {
-    var config = statistic.config;
-    var total_value_column_key = config.total_value_column_key;
-    var newColumnKey = option.value.key;
-    if (total_value_column_key === newColumnKey) return;
-    onChange && onChange({
-      total_value_column_key: newColumnKey
-    });
-  }, [statistic, onChange]);
-  var getSelectedMethodOption = useCallback(function (method, summaryMethodsOptions) {
-    return summaryMethodsOptions.find(function (m) {
-      return m.value === method;
-    }) || summaryMethodsOptions[0];
-  }, []);
-  var onSelectTargetValueColumnSummaryMethod = useCallback(function (option) {
-    var config = statistic.config;
-    var target_value_column_summary_method = config.target_value_column_summary_method;
-    var newSummaryMethod = option.value;
-    if (target_value_column_summary_method === newSummaryMethod) return;
-    onChange && onChange({
-      target_value_column_summary_method: newSummaryMethod
-    });
-  }, [statistic, onChange]);
-  var onSelectTotalValueColumnSummaryMethod = useCallback(function (option) {
-    var config = statistic.config;
-    var total_value_column_summary_method = config.total_value_column_summary_method;
-    var newSummaryMethod = option.value;
-    if (total_value_column_summary_method === newSummaryMethod) return;
-    onChange && onChange({
-      total_value_column_summary_method: newSummaryMethod
-    });
-  }, [statistic, onChange]);
-  var renderSummaryMethod = useCallback(function (option) {
-    var config = statistic.config;
-    var target_value_column_summary_method = config.target_value_column_summary_method,
-      total_value_column_summary_method = config.total_value_column_summary_method;
-    var summary_method, onSelectSummaryMethod;
-    if (option.targetColumn === 'target_value_column') {
-      summary_method = target_value_column_summary_method;
-      onSelectSummaryMethod = onSelectTargetValueColumnSummaryMethod;
-    } else {
-      summary_method = total_value_column_summary_method;
-      onSelectSummaryMethod = onSelectTotalValueColumnSummaryMethod;
-    }
-    var selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "dtable-plugin-stat-parameter-item"
-    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
-      value: selectedMethodOption,
-      onChange: onSelectSummaryMethod,
-      options: summaryMethodsOptions
-    }));
-  }, [statistic, summaryMethodsOptions, getSelectedMethodOption, onSelectTargetValueColumnSummaryMethod, onSelectTotalValueColumnSummaryMethod]);
-  var _statistic$config = statistic.config,
-    target_value_column_key = _statistic$config.target_value_column_key,
-    total_value_column_key = _statistic$config.total_value_column_key;
-  var selectedTargetValueColumnOption = numericColumnOptions.filter(function (option) {
-    return option.value.key === target_value_column_key;
-  })[0];
-  var selectedTotalValueColumnOption = numericColumnOptions.filter(function (option) {
-    return option.value.key === total_value_column_key;
-  })[0];
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
-    statistic: statistic,
-    tables: tables,
-    FilterSettings: FilterSettings,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
-    value: selectedTargetValueColumnOption,
-    options: numericColumnOptions,
-    placeholder: intl.get('Select_a_column'),
-    onChange: onSelectTargetValueColumn
-  })), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
-  }, renderSummaryMethod({
-    targetColumn: 'target_value_column'
-  })), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
-    value: selectedTotalValueColumnOption,
-    options: numericColumnOptions,
-    placeholder: intl.get('Select_a_column'),
-    onChange: onSelectTotalValueColumn
-  })), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
-  }, renderSummaryMethod({
-    targetColumn: 'total_value_column'
-  })));
-};
-export default DataSettings;

package/lib/components/settings/horizontal-bar-settings/data-settings.js

@@ -1,45 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
-import { BarDataSettings } from '../bar-settings';
-import { AdvanceBarDataSettings } from '../advance-bar-settings';
-import { StatisticsUtils } from '../../../utils';
-import { BAR_MAP_TO_HORIZONTAL_MAP, STATISTIC_TYPE } from '../../../constants/';
-var DataSettings = function DataSettings(_ref) {
-  var statistic = _ref.statistic,
-    tables = _ref.tables,
-    oldOnChange = _ref.onChange;
-  var onChange = useCallback(function (update) {
-    var oldConfig = statistic.config;
-    if (update.type && update.type !== oldConfig.type) {
-      oldOnChange && oldOnChange(update);
-      return;
-    }
-    var updateConfig = {};
-    var newConfig = _objectSpread(_objectSpread({}, oldConfig), update);
-    Object.keys(newConfig).forEach(function (key) {
-      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
-        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
-      } else {
-        updateConfig[key] = newConfig[key];
-      }
-    });
-    oldOnChange && oldOnChange(updateConfig);
-  }, [statistic, oldOnChange]);
-  var config = statistic.config,
-    id = statistic.id;
-  var newConfig = StatisticsUtils.convertStatisticConfig(config);
-  var newStatistic = {
-    id: id,
-    config: newConfig
-  };
-  var type = config.type;
-  var BarGroupComponent = type === STATISTIC_TYPE.HORIZONTAL_BAR ? BarDataSettings : AdvanceBarDataSettings;
-  return /*#__PURE__*/React.createElement(BarGroupComponent, {
-    xLabel: 'Vertical_axis',
-    yLabel: 'Horizontal_axis',
-    statistic: newStatistic,
-    tables: tables,
-    onChange: onChange
-  });
-};
-export default DataSettings;

package/lib/components/settings/horizontal-bar-settings/style-settings.js

@@ -1,38 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
-import { AdvanceBarStyleSettings } from '../advance-bar-settings';
-import { BarStyleSettings } from '../bar-settings';
-import { StatisticsUtils } from '../../../utils';
-import { BAR_MAP_TO_HORIZONTAL_MAP, STATISTIC_TYPE } from '../../../constants';
-var StyleSettings = function StyleSettings(_ref) {
-  var statistic = _ref.statistic,
-    oldOnChange = _ref.onChange;
-  var onChange = useCallback(function (update) {
-    var updateConfig = {};
-    var newConfig = _objectSpread(_objectSpread({}, statistic.config), update);
-    Object.keys(newConfig).forEach(function (key) {
-      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
-        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
-      } else {
-        updateConfig[key] = newConfig[key];
-      }
-    });
-    oldOnChange && oldOnChange(updateConfig);
-  }, [statistic, oldOnChange]);
-  var config = statistic.config,
-    id = statistic.id;
-  var newConfig = StatisticsUtils.convertStatisticConfig(config);
-  var newStatistic = {
-    id: id,
-    config: newConfig
-  };
-  var type = config.type;
-  var BarStyleComponent = type === STATISTIC_TYPE.HORIZONTAL_BAR ? BarStyleSettings : AdvanceBarStyleSettings;
-  return /*#__PURE__*/React.createElement(BarStyleComponent, {
-    xLabel: 'Vertical_axis',
-    yLabel: 'Horizontal_axis',
-    statistic: newStatistic,
-    onChange: onChange
-  });
-};
-export default StyleSettings;

package/lib/components/settings/index.css

@@ -1,73 +0,0 @@
-.seastatistic-settings {
-  height: 100%;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-}
-
-.seastatistic-settings .seastatistic-settings-type {
-  height: 49px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  border-bottom: 1px solid #e4e4e4;
-  background: #fff;
-  padding-left: 10px;
-}
-
-.seastatistic-settings .seastatistic-settings-type .seastatistic-settings-type-item {
-  text-align: center;
-  line-height: 48px;
-  height: 48px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.seastatistic-settings .seastatistic-settings-type .seastatistic-settings-type-item.selected {
-  color: #ff8000;
-  border-bottom: 2px solid #ff8000;
-}
-
-.seastatistic-settings .statistic-settings-container {
-  height: calc(100% - 37px);
-  overflow-y: scroll;
-  padding: 16px 16px 150px;
-}
-
-.seastatistic-settings .statistics-add-number-columns {
-  color: #bbb;
-  line-height: 1;
-  margin-bottom: 10px;
-}
-
-.seastatistic-settings .statistics-add-number-columns:hover {
-  cursor: pointer;
-  color: #212529;
-}
-
-.seastatistic-settings .statistics-add-number-columns .dtable-icon-add-table {
-  margin-right: 5px;
-  display: inline-block;
-  transform: scale(.8);
-}
-
-.seastatistic-settings .statistics-add-number-columns .add-number-column-description {
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.seastatistic-settings .delete-numeric-summary-item-content {
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  font-weight: 400;
-}
-
-.seastatistic-settings .delete-numeric-summary-item-content:hover {
-  cursor: pointer;
-}
-
-.seastatistic-settings .delete-numeric-summary-item-content .delete-icon {
-  font-size: 14px;
-}

package/lib/components/settings/index.js

@@ -1,74 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useState } from 'react';
-import classnames from 'classnames';
-import { eventStopPropagation } from '../../utils';
-import DataSettings from './data-settings';
-import StyleSettings from './style-settings';
-import { STATISTIC_SETTINGS_TYPE } from '../../constants';
-import intl from '../../intl';
-import './index.css';
-var Settings = function Settings(_ref) {
-  var statistic = _ref.statistic,
-    tables = _ref.tables,
-    onChange = _ref.onChange,
-    FilterSettings = _ref.FilterSettings,
-    CustomStyleSettings = _ref.CustomStyleSettings;
-  var _useState = useState(STATISTIC_SETTINGS_TYPE.DATA),
-    _useState2 = _slicedToArray(_useState, 2),
-    type = _useState2[0],
-    setType = _useState2[1];
-  var onChartSettingsTypeChange = useCallback(function (event) {
-    eventStopPropagation(event);
-    var newType = event.target.getAttribute('data');
-    if (type === newType) return;
-    setType(newType);
-  }, [type]);
-  var modifyStatistic = useCallback(function (update) {
-    var newStatistic = _objectSpread(_objectSpread({}, statistic), {}, {
-      config: _objectSpread(_objectSpread({}, statistic.config), update)
-    });
-    onChange && onChange(newStatistic, STATISTIC_SETTINGS_TYPE.DATA);
-  }, [statistic, onChange]);
-  var modifyStyle = useCallback(function (update) {
-    var newStatistic = _objectSpread(_objectSpread({}, statistic), update);
-    onChange && onChange(newStatistic, STATISTIC_SETTINGS_TYPE.STYLE);
-  }, [statistic, onChange]);
-  var renderStyleSettings = useCallback(function () {
-    if (CustomStyleSettings) return /*#__PURE__*/React.createElement(CustomStyleSettings, {
-      statistic: statistic,
-      onChange: modifyStyle
-    });
-    return /*#__PURE__*/React.createElement(StyleSettings, {
-      statistic: statistic,
-      onChange: modifyStyle
-    });
-  }, [CustomStyleSettings, statistic, modifyStyle]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "seastatistic-settings"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "seastatistic-settings-type",
-    onClick: onChartSettingsTypeChange
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classnames('seastatistic-settings-type-item', {
-      'selected': type === STATISTIC_SETTINGS_TYPE.DATA
-    }),
-    data: STATISTIC_SETTINGS_TYPE.DATA
-  }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
-    className: classnames('seastatistic-settings-type-item ml-4', {
-      'selected': type === STATISTIC_SETTINGS_TYPE.STYLE
-    }),
-    data: STATISTIC_SETTINGS_TYPE.STYLE
-  }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
-    className: "statistic-settings-container position-relative"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "statistic-settings-content"
-  }, type === STATISTIC_SETTINGS_TYPE.DATA && /*#__PURE__*/React.createElement(DataSettings, {
-    statistic: statistic,
-    tables: tables,
-    FilterSettings: FilterSettings,
-    onChange: modifyStatistic
-  }), type === STATISTIC_SETTINGS_TYPE.STYLE && renderStyleSettings())));
-};
-export default Settings;
-export { StyleSettings };

package/lib/components/settings/style-settings.js

@@ -1,100 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
-import { STATISTIC_TYPE, SUPPORT_TITLE_CHART_TYPES } from '../../constants';
-import { BarStyleSettings } from './bar-settings';
-import { AdvanceBarStyleSettings } from './advance-bar-settings';
-import { TimeComparisonStyleSettings } from './time-comparison-settings';
-import { PieStyleSettings } from './pie-settings';
-import Divider from './widgets/divider';
-import { HorizontalStyleSettings } from './horizontal-bar-settings';
-import { BasicNumberCardStyleSettings } from './basic-number-card';
-import { CombinationStyleSettings } from './combination-settings';
-import StatisticTitleSetting from './widgets/title-settings';
-var StyleSettings = function StyleSettings(_ref) {
-  var statistic = _ref.statistic,
-    onChange = _ref.onChange;
-  var modifyStatisticSettings = useCallback(function (update) {
-    var newUpdate = _objectSpread(_objectSpread({}, statistic.config), update);
-    onChange({
-      config: newUpdate
-    });
-  }, [statistic, onChange]);
-  var modifyCommonSettings = useCallback(function (update) {
-    var newUpdate = _objectSpread(_objectSpread({}, statistic.style_config), update);
-    onChange({
-      style_config: newUpdate
-    });
-  }, [statistic, onChange]);
-  var modifyTitle = useCallback(function (title) {
-    var style_config = statistic.style_config;
-    var update = style_config ? _objectSpread(_objectSpread({}, style_config), {}, {
-      title: title
-    }) : {
-      title: title
-    };
-    onChange({
-      style_config: update
-    });
-  }, [statistic, onChange]);
-  var renderTitleSettings = useCallback(function () {
-    var type = statistic.config.type;
-    var style_config = statistic.style_config;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, SUPPORT_TITLE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(StatisticTitleSetting, {
-      key: "title-setting-".concat(statistic.id),
-      title: style_config && style_config.title,
-      modifyTitle: modifyTitle
-    }), type !== STATISTIC_TYPE.TREE_MAP && type !== STATISTIC_TYPE.TABLE && /*#__PURE__*/React.createElement(Divider, null));
-  }, [statistic, modifyTitle]);
-  var renderStatisticStyleSettings = useCallback(function () {
-    var config = statistic.config;
-    var type = config.type;
-    var props = {
-      statistic: statistic,
-      onChange: modifyStatisticSettings
-    };
-    switch (type) {
-      case STATISTIC_TYPE.BAR:
-      case STATISTIC_TYPE.LINE:
-      case STATISTIC_TYPE.AREA:
-        {
-          return /*#__PURE__*/React.createElement(BarStyleSettings, props);
-        }
-      case STATISTIC_TYPE.HORIZONTAL_BAR:
-      case STATISTIC_TYPE.HORIZONTAL_GROUP_BAR:
-        {
-          return /*#__PURE__*/React.createElement(HorizontalStyleSettings, props);
-        }
-      case STATISTIC_TYPE.BAR_GROUP:
-      case STATISTIC_TYPE.BAR_STACK:
-      case STATISTIC_TYPE.LINE_GROUP:
-      case STATISTIC_TYPE.AREA_GROUP:
-        {
-          return /*#__PURE__*/React.createElement(AdvanceBarStyleSettings, props);
-        }
-      case STATISTIC_TYPE.COMPARE_BAR:
-        {
-          return /*#__PURE__*/React.createElement(TimeComparisonStyleSettings, props);
-        }
-      case STATISTIC_TYPE.COMBINATION:
-        {
-          return /*#__PURE__*/React.createElement(CombinationStyleSettings, props);
-        }
-      case STATISTIC_TYPE.PIE:
-      case STATISTIC_TYPE.RING:
-        {
-          return /*#__PURE__*/React.createElement(PieStyleSettings, props);
-        }
-      case STATISTIC_TYPE.BASIC_NUMBER_CARD:
-      case STATISTIC_TYPE.DASHBOARD:
-        {
-          return /*#__PURE__*/React.createElement(BasicNumberCardStyleSettings, props);
-        }
-      default:
-        {
-          return null;
-        }
-    }
-  }, [statistic, modifyStatisticSettings]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTitleSettings(), renderStatisticStyleSettings());
-};
-export default StyleSettings;