sea-chart 0.0.1

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

@@ -0,0 +1,123 @@
+import React, { useCallback } from 'react';
+import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
+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 DataSort from '../widgets/data-sort';
+import { eventStopPropagation } from '../../../utils';
+import { STATISTIC_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var onGroupByChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_column_key = config.groupby_column_key;
+    var column = option.value;
+    var newColumnKey = column.key,
+      type = column.type;
+    var validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+    if (groupby_column_key === validValue) return;
+    var update = {
+      groupby_column_key: validValue
+    };
+    if (!validValue) {
+      update['groupby_date_granularity'] = null;
+      update['groupby_geolocation_granularity'] = null;
+    } else {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['groupby_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        var _ref2 = column.data || {},
+          geo_format = _ref2.geo_format;
+        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);
+  }, [statistic, onChange]);
+  var onGroupbyDateGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_date_granularity = config.groupby_date_granularity;
+    var value = option.value;
+    if (value === groupby_date_granularity) return;
+    onChange && onChange({
+      groupby_date_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
+    var config = statistic.config;
+    var groupby_geolocation_granularity = config.groupby_geolocation_granularity;
+    var value = option.value;
+    if (value === groupby_geolocation_granularity) return;
+    onChange && onChange({
+      groupby_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onIncludeEmptyChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var groupby_include_empty_cells = config.groupby_include_empty_cells;
+    onChange && onChange({
+      groupby_include_empty_cells: !groupby_include_empty_cells
+    });
+  }, [statistic, onChange]);
+  var config = statistic.config;
+  var table_id = config.table_id,
+    groupby_column_key = config.groupby_column_key,
+    groupby_date_granularity = config.groupby_date_granularity,
+    groupby_geolocation_granularity = config.groupby_geolocation_granularity,
+    groupby_include_empty_cells = config.groupby_include_empty_cells;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get('Group_by'),
+    selectedTableId: table_id,
+    selectedColumnKey: groupby_column_key,
+    selectedDateGranularity: groupby_date_granularity,
+    selectedGeolocationGranularity: groupby_geolocation_granularity,
+    onGroupByChange: onGroupByChange,
+    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(BasicSummary, {
+    className: "selected-y-axis",
+    label: intl.get('Summary_method'),
+    statistic: statistic,
+    selectedTableId: table_id,
+    tables: tables,
+    summaryTypeKey: 'summary_type',
+    summaryMethodKey: 'summary_method',
+    summaryColumnKey: 'summary_column_key',
+    supportColumnTypes: [CellType.NUMBER],
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(DataSort, {
+    statistic: statistic,
+    onChange: onChange
+  }));
+};
+export default DataSettings;

package/lib/components/settings/pie-settings/index.js

@@ -0,0 +1,3 @@
+import PieDataSettings from './data-settings';
+import PieStyleSettings from './style-settings';
+export { PieDataSettings, PieStyleSettings };

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

@@ -0,0 +1,123 @@
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import Switch from '../widgets/switch';
+import Divider from '../widgets/divider';
+import MiniNumSlicePercent from '../widgets/mininum-slice-percent';
+import { FontSizeSettings } from '../widgets/font-settings';
+import { eventStopPropagation } from '../../../utils';
+import { STATISTIC_LABEL_POSITIONS, STATISTIC_LABEL_POSITION_SHOW, STATISTIC_LABEL_FORMATS, STATISTIC_LABEL_FORMAT_SHOW } from '../../../constants';
+import intl from '../../../intl';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange;
+  var labelPositionOptions = useMemo(function () {
+    return STATISTIC_LABEL_POSITIONS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(STATISTIC_LABEL_POSITION_SHOW[item])
+      };
+    });
+  }, []);
+  var labelFormatOptions = useMemo(function () {
+    return STATISTIC_LABEL_FORMATS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(STATISTIC_LABEL_FORMAT_SHOW[item])
+      };
+    });
+  }, []);
+  var onDisplayLegendChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var show_legend = config.show_legend;
+    onChange && onChange({
+      show_legend: !show_legend
+    });
+  }, [statistic, onChange]);
+  var onDisplayLabelChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var display_label = config.display_label;
+    onChange && onChange({
+      display_label: !display_label
+    });
+  }, [statistic, onChange]);
+  var onLabelPositionChange = useCallback(function (option) {
+    var value = option.value;
+    var config = statistic.config;
+    var label_position = config.label_position;
+    if (label_position === value) return;
+    onChange && onChange({
+      label_position: value
+    });
+  }, [statistic, onChange]);
+  var onLabelFormatChange = useCallback(function (option) {
+    var value = option.value;
+    var config = statistic.config;
+    var label_format = config.label_format;
+    if (label_format === value) return;
+    onChange && onChange({
+      label_format: value
+    });
+  }, [statistic, onChange]);
+  var onLabelFontSizeChange = useCallback(function (updatedFontSize) {
+    onChange && onChange({
+      label_font_size: updatedFontSize
+    });
+  }, [onChange]);
+  var onMinimumSlicePercentChange = useCallback(function (value) {
+    onChange && onChange({
+      minimum_slice_percent: value
+    });
+  }, [onChange]);
+  var config = statistic.config;
+  var show_legend = config.show_legend,
+    display_label = config.display_label,
+    label_position = config.label_position,
+    label_format = config.label_format,
+    label_font_size = config.label_font_size,
+    minimum_slice_percent = config.minimum_slice_percent;
+  var selectedLabelOption = labelPositionOptions.find(function (item) {
+    return item.value === label_position;
+  });
+  var selectedLabelFormat = labelFormatOptions.find(function (item) {
+    return item.value === label_format;
+  }) || labelFormatOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    key: "show_legend",
+    checked: show_legend || false,
+    placeholder: intl.get('Display_legend'),
+    onChange: onDisplayLegendChange
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    key: "display_label",
+    checked: display_label || false,
+    placeholder: intl.get('Display_label'),
+    onChange: onDisplayLabelChange
+  })), display_label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedLabelOption,
+    onChange: onLabelPositionChange,
+    options: labelPositionOptions
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedLabelFormat,
+    onChange: onLabelFormatChange,
+    options: labelFormatOptions
+  })), /*#__PURE__*/React.createElement(MiniNumSlicePercent, {
+    value: minimum_slice_percent,
+    onChange: onMinimumSlicePercentChange
+  }), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    title: intl.get('Label_font_size'),
+    fontSize: label_font_size,
+    defaultFontSize: 12,
+    modifyFontSize: onLabelFontSizeChange
+  })));
+};
+export default StyleSettings;

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

@@ -0,0 +1,100 @@
+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;