sea-chart 0.0.1 → 0.0.2

package/dist/settings/index.js

@@ -0,0 +1,76 @@
+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 { CHART_SETTINGS_TYPE } from '../constants';
+import intl from '../intl';
+import './index.css';
+const Settings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange,
+    CustomStyleSettings
+  } = _ref;
+  const [type, setType] = useState(CHART_SETTINGS_TYPE.DATA);
+  const onChartSettingsTypeChange = useCallback(event => {
+    eventStopPropagation(event);
+    const newType = event.target.getAttribute('data');
+    if (type === newType) return;
+    setType(newType);
+  }, [type]);
+  const modifyStatistic = useCallback(update => {
+    const newChart = {
+      ...chart,
+      config: {
+        ...chart.config,
+        ...update
+      }
+    };
+    onChange && onChange(newChart, CHART_SETTINGS_TYPE.DATA);
+  }, [chart, onChange]);
+  const modifyStyle = useCallback(update => {
+    const newChart = {
+      ...chart,
+      ...update
+    };
+    onChange && onChange(newChart, CHART_SETTINGS_TYPE.STYLE);
+  }, [chart, onChange]);
+  const renderStyleSettings = useCallback(() => {
+    if (CustomStyleSettings) return /*#__PURE__*/React.createElement(CustomStyleSettings, {
+      chart: chart,
+      onChange: modifyStyle
+    });
+    return /*#__PURE__*/React.createElement(StyleSettings, {
+      chart: chart,
+      onChange: modifyStyle
+    });
+  }, [CustomStyleSettings, chart, modifyStyle]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-settings"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-settings-type",
+    onClick: onChartSettingsTypeChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('sea-chart-settings-type-item', {
+      'selected': type === CHART_SETTINGS_TYPE.DATA
+    }),
+    data: CHART_SETTINGS_TYPE.DATA
+  }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
+    className: classnames('sea-chart-settings-type-item ml-4', {
+      'selected': type === CHART_SETTINGS_TYPE.STYLE
+    }),
+    data: CHART_SETTINGS_TYPE.STYLE
+  }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
+    className: "chart-settings-container position-relative"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-settings-content"
+  }, type === CHART_SETTINGS_TYPE.DATA && /*#__PURE__*/React.createElement(DataSettings, {
+    chart: chart,
+    tables: tables,
+    onChange: modifyStatistic
+  }), type === CHART_SETTINGS_TYPE.STYLE && renderStyleSettings())));
+};
+export default Settings;
+export { StyleSettings };

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

@@ -6,23 +6,30 @@ 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;
+import { eventStopPropagation } from '../../utils';
+import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const onGroupByChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newColumnKey,
+      type
+    } = column;
+    const validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
     if (groupby_column_key === validValue) return;
-    var update = {
+    let update = {
       groupby_column_key: validValue
     };
     if (!validValue) {
@@ -30,11 +37,12 @@ var DataSettings = function DataSettings(_ref) {
       update['groupby_geolocation_granularity'] = null;
     } else {
       if (DATE_COLUMN_OPTIONS.includes(type)) {
-        update['groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['groupby_geolocation_granularity'] = null;
       } else if (type === CellType.GEOLOCATION) {
-        var _ref2 = column.data || {},
-          geo_format = _ref2.geo_format;
+        const {
+          geo_format
+        } = column.data || {};
         if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
           update['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
         } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
@@ -48,43 +56,58 @@ var DataSettings = function DataSettings(_ref) {
       }
     }
     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;
+  }, [chart, onChange]);
+  const onGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_date_granularity
+    } = config;
+    const 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;
+  }, [chart, onChange]);
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_geolocation_granularity
+    } = config;
+    const value = option.value;
     if (value === groupby_geolocation_granularity) return;
     onChange && onChange({
       groupby_geolocation_granularity: value
     });
-  }, [statistic, onChange]);
-  var onIncludeEmptyChange = useCallback(function (event) {
+  }, [chart, onChange]);
+  const onIncludeEmptyChange = useCallback(event => {
     eventStopPropagation(event);
-    var config = statistic.config;
-    var groupby_include_empty_cells = config.groupby_include_empty_cells;
+    const {
+      config
+    } = chart;
+    const {
+      groupby_include_empty_cells
+    } = config;
     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;
+  }, [chart, onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    groupby_column_key,
+    groupby_date_granularity,
+    groupby_geolocation_granularity,
+    groupby_include_empty_cells
+  } = config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
-    statistic: statistic,
+    chart: chart,
     tables: tables,
-    FilterSettings: FilterSettings,
     onChange: onChange
   }), /*#__PURE__*/React.createElement(GroupBy, {
     tables: tables,
@@ -107,7 +130,7 @@ var DataSettings = function DataSettings(_ref) {
   }), /*#__PURE__*/React.createElement(BasicSummary, {
     className: "selected-y-axis",
     label: intl.get('Summary_method'),
-    statistic: statistic,
+    chart: chart,
     selectedTableId: table_id,
     tables: tables,
     summaryTypeKey: 'summary_type',
@@ -116,7 +139,7 @@ var DataSettings = function DataSettings(_ref) {
     supportColumnTypes: [CellType.NUMBER],
     onChange: onChange
   }), /*#__PURE__*/React.createElement(DataSort, {
-    statistic: statistic,
+    chart: chart,
     onChange: onChange
   }));
 };

package/{lib/components → dist}/settings/pie-settings/style-settings.js

@@ -5,107 +5,125 @@ 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) {
+import { eventStopPropagation } from '../../utils';
+import { CHART_LABEL_POSITIONS, CHART_LABEL_POSITION_SHOW, CHART_LABEL_FORMATS, CHART_LABEL_FORMAT_SHOW } from '../../constants';
+import intl from '../../intl';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const labelPositionOptions = useMemo(() => {
+    return CHART_LABEL_POSITIONS.map(item => {
       return {
         value: item,
-        label: intl.get(STATISTIC_LABEL_POSITION_SHOW[item])
+        label: intl.get(CHART_LABEL_POSITION_SHOW[item])
       };
     });
   }, []);
-  var labelFormatOptions = useMemo(function () {
-    return STATISTIC_LABEL_FORMATS.map(function (item) {
+  const labelFormatOptions = useMemo(() => {
+    return CHART_LABEL_FORMATS.map(item => {
       return {
         value: item,
-        label: intl.get(STATISTIC_LABEL_FORMAT_SHOW[item])
+        label: intl.get(CHART_LABEL_FORMAT_SHOW[item])
       };
     });
   }, []);
-  var onDisplayLegendChange = useCallback(function (event) {
+  const onDisplayLegendChange = useCallback(event => {
     eventStopPropagation(event);
-    var config = statistic.config;
-    var show_legend = config.show_legend;
+    const {
+      config
+    } = chart;
+    const {
+      show_legend
+    } = config;
     onChange && onChange({
       show_legend: !show_legend
     });
-  }, [statistic, onChange]);
-  var onDisplayLabelChange = useCallback(function (event) {
+  }, [chart, onChange]);
+  const onDisplayLabelChange = useCallback(event => {
     eventStopPropagation(event);
-    var config = statistic.config;
-    var display_label = config.display_label;
+    const {
+      config
+    } = chart;
+    const {
+      display_label
+    } = config;
     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;
+  }, [chart, onChange]);
+  const onLabelPositionChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    const {
+      label_position
+    } = config;
     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;
+  }, [chart, onChange]);
+  const onLabelFormatChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    const {
+      label_format
+    } = config;
     if (label_format === value) return;
     onChange && onChange({
       label_format: value
     });
-  }, [statistic, onChange]);
-  var onLabelFontSizeChange = useCallback(function (updatedFontSize) {
+  }, [chart, onChange]);
+  const onLabelFontSizeChange = useCallback(updatedFontSize => {
     onChange && onChange({
       label_font_size: updatedFontSize
     });
   }, [onChange]);
-  var onMinimumSlicePercentChange = useCallback(function (value) {
+  const onMinimumSlicePercentChange = useCallback(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];
+  const {
+    config
+  } = chart;
+  const {
+    show_legend,
+    display_label,
+    label_position,
+    label_format,
+    label_font_size,
+    minimum_slice_percent
+  } = config;
+  const selectedLabelOption = labelPositionOptions.find(item => item.value === label_position);
+  const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-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"
+    className: "sea-chart-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"
+    className: "sea-chart-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"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
     value: selectedLabelFormat,
     onChange: onLabelFormatChange,

package/dist/settings/style-settings.js

@@ -0,0 +1,118 @@
+import React, { useCallback } from 'react';
+import { CHART_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';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const modifyStatisticSettings = useCallback(update => {
+    const newUpdate = {
+      ...chart.config,
+      ...update
+    };
+    onChange({
+      config: newUpdate
+    });
+  }, [chart, onChange]);
+  const modifyCommonSettings = useCallback(update => {
+    const newUpdate = {
+      ...chart.style_config,
+      ...update
+    };
+    onChange({
+      style_config: newUpdate
+    });
+  }, [chart, onChange]);
+  const modifyTitle = useCallback(title => {
+    const {
+      style_config
+    } = chart;
+    const update = style_config ? {
+      ...style_config,
+      title
+    } : {
+      title
+    };
+    onChange({
+      style_config: update
+    });
+  }, [chart, onChange]);
+  const renderTitleSettings = useCallback(() => {
+    const {
+      type
+    } = chart.config;
+    const {
+      style_config
+    } = chart;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, SUPPORT_TITLE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(StatisticTitleSetting, {
+      key: "title-setting-".concat(chart.id),
+      title: style_config && style_config.title,
+      modifyTitle: modifyTitle
+    }), type !== CHART_TYPE.TREE_MAP && type !== CHART_TYPE.TABLE && /*#__PURE__*/React.createElement(Divider, null));
+  }, [chart, modifyTitle]);
+  const renderStatisticStyleSettings = useCallback(() => {
+    const {
+      config
+    } = chart;
+    const {
+      type
+    } = config;
+    const props = {
+      chart,
+      onChange: modifyStatisticSettings
+    };
+    switch (type) {
+      case CHART_TYPE.BAR:
+      case CHART_TYPE.LINE:
+      case CHART_TYPE.AREA:
+        {
+          return /*#__PURE__*/React.createElement(BarStyleSettings, props);
+        }
+      case CHART_TYPE.HORIZONTAL_BAR:
+      case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+        {
+          return /*#__PURE__*/React.createElement(HorizontalStyleSettings, props);
+        }
+      case CHART_TYPE.BAR_GROUP:
+      case CHART_TYPE.BAR_STACK:
+      case CHART_TYPE.LINE_GROUP:
+      case CHART_TYPE.AREA_GROUP:
+        {
+          return /*#__PURE__*/React.createElement(AdvanceBarStyleSettings, props);
+        }
+      case CHART_TYPE.COMPARE_BAR:
+        {
+          return /*#__PURE__*/React.createElement(TimeComparisonStyleSettings, props);
+        }
+      case CHART_TYPE.COMBINATION:
+        {
+          return /*#__PURE__*/React.createElement(CombinationStyleSettings, props);
+        }
+      case CHART_TYPE.PIE:
+      case CHART_TYPE.RING:
+        {
+          return /*#__PURE__*/React.createElement(PieStyleSettings, props);
+        }
+      case CHART_TYPE.BASIC_NUMBER_CARD:
+      case CHART_TYPE.DASHBOARD:
+        {
+          return /*#__PURE__*/React.createElement(BasicNumberCardStyleSettings, props);
+        }
+      default:
+        {
+          return null;
+        }
+    }
+  }, [chart, modifyStatisticSettings]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTitleSettings(), renderStatisticStyleSettings());
+};
+export default StyleSettings;