dtable-statistic 4.0.2-test-2

package/es/service/dashboard-service.js

@@ -0,0 +1,415 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import StatisticDashBoard from '../model/statistic-dashboard';
+import StatItem from '../model/stat-item';
+import { hasOwnProperty } from '../utils';
+import { generatorUniqueId } from '../utils/common-utils';
+import { DASHBOARD_ACTION_TYPE, STAT_TYPE, SUMMARY_TYPE } from '../constants';
+var ADVANCED_STATISTICS_NAME = 'advanced-statistics';
+var DashBoardService = /*#__PURE__*/function () {
+  function DashBoardService(_ref) {
+    var value = _ref.value,
+      defaultDashboardName = _ref.defaultDashboardName,
+      chartCalculator = _ref.chartCalculator,
+      updateStatistics = _ref.updateStatistics,
+      deletePluginSettings = _ref.deletePluginSettings;
+    _classCallCheck(this, DashBoardService);
+    this.defaultDashboardName = defaultDashboardName;
+    this.chartCalculator = chartCalculator;
+    this.initStatistics(value, updateStatistics, deletePluginSettings);
+  }
+  _createClass(DashBoardService, [{
+    key: "initStatistics",
+    value: function initStatistics(value, updateStatistics, deletePluginSettings) {
+      this.statistics = value && value.statistics || [];
+      if (this.statistics.length === 0) {
+        this.statistics = [new StatisticDashBoard({
+          _id: generatorUniqueId([]),
+          stat_items: [],
+          name: this.defaultDashboardName
+        })];
+        return;
+      }
+      this.needSave = false;
+
+      // convert to advance-statistic
+      if (!hasOwnProperty(this.statistics[0], 'stat_items')) {
+        this.needSave = true;
+        this.convert2AdvanceStatistic();
+      }
+      this.mergeAdvancedStatistics(value, deletePluginSettings);
+      this.filterInvalidCharts();
+      if (this.needSave) {
+        this.needSave = false;
+        updateStatistics(this.statistics);
+      }
+    }
+  }, {
+    key: "convert2AdvanceStatistic",
+    value: function convert2AdvanceStatistic() {
+      var _this = this;
+      var statItems = this.statistics.map(function (chart) {
+        var type = chart.type;
+        switch (type) {
+          case STAT_TYPE.PIVOT_TABLE:
+            {
+              return _this.convertPivotTable(chart);
+            }
+          case STAT_TYPE.BAR:
+            {
+              return _this.convertChartBar(chart);
+            }
+          case STAT_TYPE.LINE:
+            {
+              return _this.convertChartLine(chart);
+            }
+          case STAT_TYPE.PIE:
+            {
+              return new StatItem(_objectSpread(_objectSpread({}, chart), {}, {
+                type: STAT_TYPE.RING
+              }));
+            }
+          default:
+            {
+              return null;
+            }
+        }
+      }).filter(Boolean);
+      this.statistics = [new StatisticDashBoard({
+        _id: generatorUniqueId([]),
+        stat_items: statItems,
+        name: this.defaultDashboardName
+      })];
+    }
+  }, {
+    key: "convertPivotTable",
+    value: function convertPivotTable(chart) {
+      var summary_type = chart.summary_type,
+        summary_columns_option = chart.summary_columns_option;
+      var convertedChart = _objectSpread({}, chart);
+      if (summary_type === SUMMARY_TYPE.ADVANCED && summary_columns_option && summary_columns_option.length > 0) {
+        convertedChart.column_groupby_multiple_numeric_column = true;
+      }
+      return new StatItem(convertedChart);
+    }
+  }, {
+    key: "convertChartBar",
+    value: function convertChartBar(chart) {
+      var column_groupby_column_key = chart.column_groupby_column_key,
+        y_axis_use_stack = chart.y_axis_use_stack,
+        y_axis_summary_method = chart.y_axis_summary_method,
+        column_groupby_multiple_numeric_column = chart.column_groupby_multiple_numeric_column,
+        column_groupby_numeric_column_keys = chart.column_groupby_numeric_column_keys;
+      var convertedChart = _objectSpread({}, chart);
+      var isGroupbyMultipleNumericColumns = column_groupby_multiple_numeric_column && column_groupby_numeric_column_keys && column_groupby_numeric_column_keys.length > 0;
+      if (column_groupby_column_key || isGroupbyMultipleNumericColumns) {
+        convertedChart.type = STAT_TYPE.BAR_GROUP;
+        if (y_axis_use_stack) {
+          convertedChart.type = STAT_TYPE.BAR_STACK;
+        }
+        if (isGroupbyMultipleNumericColumns) {
+          convertedChart.column_groupby_multiple_numeric_column = column_groupby_multiple_numeric_column;
+          convertedChart.column_groupby_numeric_columns = column_groupby_numeric_column_keys.map(function (key) {
+            if (!key) return null;
+            return {
+              column_key: key,
+              summary_method: y_axis_summary_method
+            };
+          }).filter(Boolean);
+        }
+      }
+      return new StatItem(convertedChart);
+    }
+  }, {
+    key: "convertChartLine",
+    value: function convertChartLine(chart) {
+      var column_groupby_column_key = chart.column_groupby_column_key,
+        column_groupby_multiple_numeric_column = chart.column_groupby_multiple_numeric_column,
+        column_groupby_numeric_column_keys = chart.column_groupby_numeric_column_keys,
+        y_axis_summary_method = chart.y_axis_summary_method;
+      var isGroupbyMultipleNumericColumns = column_groupby_multiple_numeric_column && column_groupby_numeric_column_keys && column_groupby_numeric_column_keys.length > 0;
+      var convertedChart = _objectSpread({}, chart);
+      if (column_groupby_column_key) {
+        convertedChart.type = STAT_TYPE.GROUP_LINE;
+        if (isGroupbyMultipleNumericColumns) {
+          convertedChart.column_groupby_multiple_numeric_column = column_groupby_multiple_numeric_column;
+          convertedChart.column_groupby_numeric_columns = column_groupby_numeric_column_keys.map(function (key) {
+            if (!key) return null;
+            return {
+              column_key: key,
+              summary_method: y_axis_summary_method
+            };
+          }).filter(Boolean);
+        }
+      }
+      return new StatItem(convertedChart);
+    }
+  }, {
+    key: "mergeAdvancedStatistics",
+    value: function mergeAdvancedStatistics(value, deletePluginSettings) {
+      if (!value || !hasOwnProperty(value, 'plugin_settings') || !hasOwnProperty(value.plugin_settings, ADVANCED_STATISTICS_NAME)) {
+        return;
+      }
+      var advancedStatistics = value.plugin_settings[ADVANCED_STATISTICS_NAME];
+      if (!Array.isArray(advancedStatistics) || advancedStatistics.length === 0 || this.statistics.some(function (dashboard) {
+        return dashboard.from_advanced;
+      }) // already merged from advanced
+      ) {
+        return;
+      }
+      var mergedStatistics = _toConsumableArray(this.statistics);
+      advancedStatistics.forEach(function (dashboard) {
+        var convertedDashboard = _objectSpread(_objectSpread({}, dashboard), {}, {
+          _id: generatorUniqueId(mergedStatistics),
+          from_advanced: true
+        });
+        var convertedCharts = Array.isArray(dashboard.stat_items) ? dashboard.stat_items.map(function (chart) {
+          if (!chart) return null;
+          var convertedChart = _objectSpread({}, chart);
+
+          // fix code spell from advanced
+          if (hasOwnProperty(chart, 'column_groupby_mutiple_numeric_column')) {
+            convertedChart.column_groupby_multiple_numeric_column = chart.column_groupby_mutiple_numeric_column;
+          }
+          if (hasOwnProperty(chart, 'y_axis_left_group_by_mutiple_numeric_column')) {
+            convertedChart.y_axis_left_group_by_multiple_numeric_column = chart.y_axis_left_group_by_mutiple_numeric_column;
+          }
+          return convertedChart;
+        }).filter(Boolean) : [];
+        convertedDashboard.stat_items = convertedCharts;
+        mergedStatistics.push(convertedDashboard);
+      });
+      this.needSave = true;
+      this.statistics = mergedStatistics;
+      deletePluginSettings(ADVANCED_STATISTICS_NAME);
+    }
+  }, {
+    key: "filterInvalidCharts",
+    value: function filterInvalidCharts() {
+      var _this2 = this;
+      this.statistics = this.statistics.map(function (dashboard) {
+        var charts = dashboard.stat_items || dashboard.statItems;
+        if (!Array.isArray(charts) || charts.length === 0) {
+          return dashboard;
+        }
+        charts = charts.filter(function (chart) {
+          return _this2.chartCalculator.isValidChart(chart);
+        });
+        charts = charts.map(function (chart, index) {
+          if (!chart.layout) {
+            return _objectSpread(_objectSpread({}, chart), {}, {
+              layout: {
+                i: chart._id,
+                x: index % 2 * 2,
+                y: Infinity,
+                w: 2,
+                h: 7
+              }
+            });
+          }
+          return chart;
+        });
+        return _objectSpread(_objectSpread({}, dashboard), {}, {
+          stat_items: charts
+        });
+      });
+    }
+  }, {
+    key: "getStatistics",
+    value: function getStatistics() {
+      return this.statistics;
+    }
+  }, {
+    key: "getStatisticById",
+    value: function getStatisticById(id) {
+      return this.statistics.find(function (statistic) {
+        return statistic._id === id;
+      });
+    }
+  }, {
+    key: "getColorThemeName",
+    value: function getColorThemeName() {
+      return this.statistics[0].chart_color_theme || 'theme0';
+    }
+  }, {
+    key: "update",
+    value: function update(_ref2) {
+      var action = _ref2.action,
+        payload = _ref2.payload;
+      switch (action) {
+        case DASHBOARD_ACTION_TYPE.MODIFY_COLOR_THEME:
+          {
+            var colorThemeName = payload.colorThemeName;
+            this.statistics = this.statistics.map(function (statistic) {
+              return _objectSpread(_objectSpread({}, statistic), {}, {
+                chart_color_theme: colorThemeName
+              });
+            });
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.ADD_DASHBOARD:
+          {
+            var dashboard = payload.dashboard;
+            this.statistics = [].concat(_toConsumableArray(this.statistics), [dashboard]);
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.RENAME_DASHBOARD:
+          {
+            var index = payload.index,
+              name = payload.name;
+            if (!this.statistics[index]) {
+              break;
+            }
+            var updatedStatistics = _toConsumableArray(this.statistics);
+            updatedStatistics[index].name = name;
+            this.statistics = updatedStatistics;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.DELETE_DASHBOARD:
+          {
+            var _index = payload.index;
+            if (!this.statistics[_index]) {
+              break;
+            }
+            var _updatedStatistics = _toConsumableArray(this.statistics);
+            _updatedStatistics.splice(_index, 1);
+            this.statistics = _updatedStatistics;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.MOVE_DASHBOARD:
+          {
+            var draggedDashboardId = payload.draggedDashboardId,
+              targetBoardId = payload.targetBoardId,
+              relativePosition = payload.relativePosition;
+            var draggedDashboard = this.getStatisticById(draggedDashboardId);
+            var targetDashboard = this.getStatisticById(targetBoardId);
+            var draggedDashboardIndex = this.statistics.indexOf(draggedDashboard);
+            var targetDashboardIndex = this.statistics.indexOf(targetDashboard);
+            targetDashboardIndex += relativePosition == 'before' ? 0 : 1;
+            var _updatedStatistics2 = _toConsumableArray(this.statistics);
+            if (draggedDashboardIndex < targetDashboardIndex) {
+              if (targetDashboardIndex < _updatedStatistics2.length) {
+                _updatedStatistics2.splice(targetDashboardIndex, 0, draggedDashboard);
+              } else {
+                // drag it to the end
+                _updatedStatistics2.push(draggedDashboard);
+              }
+              _updatedStatistics2.splice(draggedDashboardIndex, 1);
+            } else {
+              _updatedStatistics2.splice(draggedDashboardIndex, 1);
+              _updatedStatistics2.splice(targetDashboardIndex, 0, draggedDashboard);
+            }
+            this.statistics = _updatedStatistics2;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.MODIFY_DASHBOARD_LAYOUT:
+          {
+            var _index2 = payload.index,
+              layout = payload.layout;
+            var idChartLayoutMap = {};
+            layout && layout.forEach(function (chartLayout) {
+              idChartLayoutMap[chartLayout.i] = chartLayout;
+            });
+            var _updatedStatistics3 = _toConsumableArray(this.statistics);
+            var updatedDashboard = _updatedStatistics3[_index2];
+            if (!updatedDashboard) {
+              break;
+            }
+            var stat_items = updatedDashboard.stat_items;
+            updatedDashboard.stat_items = stat_items.map(function (chart) {
+              var chartLayout = idChartLayoutMap[chart._id];
+              if (!chartLayout) return chart;
+              var x = chartLayout.x,
+                y = chartLayout.y,
+                w = chartLayout.w,
+                h = chartLayout.h,
+                i = chartLayout.i;
+              return Object.assign({}, chart, {
+                layout: {
+                  x: x,
+                  y: y,
+                  w: w,
+                  h: h,
+                  i: i
+                }
+              });
+            });
+            _updatedStatistics3[_index2] = updatedDashboard;
+            this.statistics = _updatedStatistics3;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.ADD_CHART:
+          {
+            var _index3 = payload.index,
+              chart = payload.chart;
+            var _updatedStatistics4 = _toConsumableArray(this.statistics);
+            var _updatedDashboard = _updatedStatistics4[_index3];
+            if (!_updatedDashboard) {
+              break;
+            }
+            var statItemsLen = _updatedDashboard.stat_items.length;
+            if (!chart.layout) {
+              chart.layout = {
+                i: chart._id,
+                x: statItemsLen % 2 * 2,
+                y: Infinity,
+                w: 2,
+                h: 7
+              };
+            }
+            _updatedDashboard.stat_items.push(chart);
+            this.statistics = _updatedStatistics4;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.DELETE_CHART:
+          {
+            var _index4 = payload.index,
+              chart_id = payload.chart_id;
+            var _updatedStatistics5 = _toConsumableArray(this.statistics);
+            var _updatedDashboard2 = _updatedStatistics5[_index4];
+            if (!_updatedDashboard2) {
+              break;
+            }
+            var deleteIndex = _updatedDashboard2.stat_items.findIndex(function (chart) {
+              return chart._id === chart_id;
+            });
+            if (deleteIndex < 0) {
+              break;
+            }
+            _updatedDashboard2.stat_items.splice(deleteIndex, 1);
+            this.statistics = _updatedStatistics5;
+            break;
+          }
+        case DASHBOARD_ACTION_TYPE.MODIFY_CHART:
+          {
+            var _index5 = payload.index,
+              _chart = payload.chart;
+            var charId = _chart._id;
+            var _updatedStatistics6 = _toConsumableArray(this.statistics);
+            var _updatedDashboard3 = _updatedStatistics6[_index5];
+            if (!_updatedDashboard3) {
+              break;
+            }
+            var updateIndex = _updatedDashboard3.stat_items.findIndex(function (chart) {
+              return chart._id === charId;
+            });
+            if (updateIndex < 0) {
+              break;
+            }
+            _updatedDashboard3.stat_items[updateIndex] = _chart;
+            this.statistics = _updatedStatistics6;
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+      return this.getStatistics();
+    }
+  }]);
+  return DashBoardService;
+}();
+export default DashBoardService;

package/es/stat-editor/chart-name-editor.js

@@ -0,0 +1,75 @@
+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, Fragment } from 'react';
+import { Input } from 'reactstrap';
+var ChartNameEditor = /*#__PURE__*/function (_Component) {
+  _inherits(ChartNameEditor, _Component);
+  var _super = _createSuper(ChartNameEditor);
+  function ChartNameEditor(props) {
+    var _this;
+    _classCallCheck(this, ChartNameEditor);
+    _this = _super.call(this, props);
+    _this.onRenameToggle = function () {
+      _this.setState({
+        editable: !_this.state.editable
+      });
+    };
+    _this.onChange = function (evt) {
+      _this.setState({
+        name: evt.target.value
+      });
+    };
+    _this.updateStatName = function (evt) {
+      _this.onRenameToggle();
+      var newName = evt.target.value.trim();
+      if (newName === _this.props.name) return;
+      _this.props.updateStatName(newName);
+    };
+    _this.onKeyDown = function (evt) {
+      if (evt.keyCode === 13) {
+        _this.updateStatName(evt);
+      }
+    };
+    _this.state = {
+      name: props.name || '',
+      editable: false
+    };
+    return _this;
+  }
+  _createClass(ChartNameEditor, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.name !== this.props.name) {
+        this.setState({
+          name: this.props.name
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        name = _this$state.name,
+        editable = _this$state.editable;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-editing-name"
+      }, editable ? /*#__PURE__*/React.createElement(Input, {
+        defaultValue: name,
+        className: "statistic-rename",
+        onBlur: this.updateStatName,
+        autoFocus: true,
+        onChange: this.onChange,
+        onKeyDown: this.onKeyDown
+      }) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "statistic-table-title-name"
+      }, name), /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-rename",
+        onClick: this.onRenameToggle
+      })));
+    }
+  }]);
+  return ChartNameEditor;
+}(Component);
+export default ChartNameEditor;

package/es/stat-editor/index.js

@@ -0,0 +1,74 @@
+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 ChartNameEditor from './chart-name-editor';
+import StatView from '../stat-view';
+import BasicChartSettings from './stat-settings/basic-chart-settings';
+import AdvancedChartSettings from './stat-settings/advance-chart-settings';
+import { BASIC_STAT_TYPES, STAT_TYPE } from '../constants';
+var StatEditor = /*#__PURE__*/function (_Component) {
+  _inherits(StatEditor, _Component);
+  var _super = _createSuper(StatEditor);
+  function StatEditor() {
+    _classCallCheck(this, StatEditor);
+    return _super.apply(this, arguments);
+  }
+  _createClass(StatEditor, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        getTableById = _this$props.getTableById,
+        colorThemeName = _this$props.colorThemeName,
+        statItem = _this$props.statItem,
+        labelColorConfigs = _this$props.labelColorConfigs,
+        chartCalculator = _this$props.chartCalculator,
+        eventBus = _this$props.eventBus;
+      var type = statItem.type;
+      var showStatName = !(type === STAT_TYPE.BASIC_NUMBER_CARD || type === STAT_TYPE.DASHBOARD);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-edit-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-stat-wrapper"
+      }, showStatName && /*#__PURE__*/React.createElement(ChartNameEditor, {
+        name: statItem.name,
+        updateStatName: this.props.modifyChartName
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-view-container"
+      }, /*#__PURE__*/React.createElement(StatView, {
+        isEdit: true,
+        isPreview: false,
+        isEnlarge: false,
+        colorThemeName: colorThemeName,
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        chartCalculator: chartCalculator,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        updateStatItem: this.props.modifyChart,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+      }))), BASIC_STAT_TYPES.includes(statItem.type) ? /*#__PURE__*/React.createElement(BasicChartSettings, {
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: getTableById,
+        updateStatItem: this.props.modifyChart
+      }) : /*#__PURE__*/React.createElement(AdvancedChartSettings, {
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: getTableById,
+        updateStatItem: this.props.modifyChart
+      }));
+    }
+  }]);
+  return StatEditor;
+}(Component);
+export default StatEditor;