dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/dashboard.js

@@ -15,6 +15,8 @@ var _chartService = _interopRequireDefault(require("./service/chart-service"));
 var _mapJson = require("./service/map-json");
 var _desktopDashboard = _interopRequireDefault(require("./desktop-dashboard"));
 var _mobileDashboard = _interopRequireDefault(require("./mobile-dashboard"));
+var _threadManager = _interopRequireDefault(require("./calculator/thread-manager"));
+var _calculator = _interopRequireDefault(require("./calculator"));
 var _utils = require("./utils");
 var _commonUtils = require("./utils/common-utils");
 var _constants = require("./constants");
@@ -37,7 +39,6 @@ class DashBoard extends _react.Component {
       }
     };
     this.onLocalDTableChanged = value => {
-      console.log('onLocalDTableChanged');
       if (this.updatingLocalStatistics) {
         // it's unnecessary to notify data changed during update statistics
         this.value = value;
@@ -49,7 +50,6 @@ class DashBoard extends _react.Component {
       });
     };
     this.onServerDTableChanged = value => {
-      console.log('onServerDTableChanged', value);
       this.onDTableChanged({
         value
       });
@@ -75,10 +75,23 @@ class DashBoard extends _react.Component {
       });
     };
     this.initDashboard = () => {
+      const {
+        username,
+        userId,
+        userDepartmentIdsMap
+      } = window.dtable;
       const value = this.value;
+      this.chartCalculator = new _calculator.default({
+        username,
+        userId,
+        userDepartmentIdsMap,
+        value,
+        statisticThreadManager: this.statisticThreadManager
+      });
       this.dashboardService = new _dashboardService.default({
         value,
         defaultDashboardName: this.defaultDashboardName,
+        chartCalculator: this.chartCalculator,
         chartService: this.chartService,
         updateStatistics: this.props.updateStatistics,
         deletePluginSettings: this.props.deletePluginSettings
@@ -111,6 +124,10 @@ class DashBoard extends _react.Component {
         border_color: customColor.BORDER_COLOR
       }))];
     };
+    this.clearCalculations = () => {
+      this.statisticThreadManager.clearQueue();
+      this.statisticThreadManager.terminateWorkers();
+    };
     this.getSelectedDashboardIdxFromLocal = key => {
       const {
         dtableUuid
@@ -163,6 +180,7 @@ class DashBoard extends _react.Component {
     this.selectDashboard = selectedDashboardIdx => {
       this.disabledUpdateLayout = true;
       this.setSelectedDashboardIdx(selectedDashboardIdx);
+      this.clearCalculations();
       this.setState({
         selectedDashboardIdx
       });
@@ -193,6 +211,7 @@ class DashBoard extends _react.Component {
           dashboard
         }
       });
+      this.clearCalculations();
       const selectedDashboardIdx = updatedStatistics.length - 1;
       this.setSelectedDashboardIdx(selectedDashboardIdx);
       this.updateStatistics({
@@ -233,6 +252,7 @@ class DashBoard extends _react.Component {
         }
       });
       this.setSelectedDashboardIdx(nextSelectedDashboardIdx);
+      this.clearCalculations();
       this.updateStatistics({
         statistics: updatedStatistics,
         selectedDashboardIdx: nextSelectedDashboardIdx
@@ -281,7 +301,7 @@ class DashBoard extends _react.Component {
         selectedDashboardIdx
       } = this.state;
       const dashboard = statistics[selectedDashboardIdx];
-      const fromChart = dashboard && dashboard.stat_items.find(chart => chart.config._id === chartId);
+      const fromChart = dashboard && dashboard.stat_items.find(chart => chart._id === chartId);
       if (!fromChart) return;
       const newChart = this.chartService.getCopiedChart({
         dashboard,
@@ -317,6 +337,9 @@ class DashBoard extends _react.Component {
       });
     };
     this.addChart = chart => {
+      if (!this.chartCalculator.isValidChart(chart)) {
+        return;
+      }
       this.disabledUpdateLayout = true;
       const updatedStatistics = this.dashboardService.update({
         action: _constants.DASHBOARD_ACTION_TYPE.ADD_CHART,
@@ -328,9 +351,8 @@ class DashBoard extends _react.Component {
       this.updateStatistics({
         statistics: updatedStatistics
       }, () => {
-        var _document$getElementB;
         // make the copied stat item display in the view
-        (_document$getElementB = document.getElementById(chart.config._id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(true);
+        document.getElementById(chart._id).scrollIntoView(true);
       });
     };
     this.modifyChart = chart => {
@@ -402,6 +424,7 @@ class DashBoard extends _react.Component {
     this.chartService = new _chartService.default({
       defaultChartTitle
     });
+    this.statisticThreadManager = new _threadManager.default((navigator.hardwareConcurrency || 4) - 1);
     this.mapJsonService = new _mapJson.MapJsonService({
       mediaUrl
     });
@@ -431,6 +454,7 @@ class DashBoard extends _react.Component {
     this.unsubscribeLocalDtableChanged();
     this.unsubscribeRemoteDtableChange();
     this.unsubscribeRefreshCharts();
+    this.clearCalculations();
   }
   render() {
     const {
@@ -450,11 +474,10 @@ class DashBoard extends _react.Component {
       dtableChangedTime: dtableChangedTime,
       statistics: statistics,
       selectedDashboardIdx: selectedDashboardIdx,
+      chartCalculator: this.chartCalculator,
       labelColorConfigs: this.labelColorConfigs,
       eventBus: eventBus,
       onCloseDashboard: this.props.onCloseStatistic,
-      getViewRows: this.props.getViewRows,
-      getTableFormulaResults: this.props.getTableFormulaResults,
       selectDashboard: this.selectDashboard,
       addDashboard: this.addDashboard,
       renameDashboard: this.renameDashboard,
@@ -468,13 +491,12 @@ class DashBoard extends _react.Component {
       statistics: statistics,
       editingChart: editingChart,
       selectedDashboardIdx: selectedDashboardIdx,
+      chartCalculator: this.chartCalculator,
       labelColorConfigs: this.labelColorConfigs,
       eventBus: eventBus,
       getActiveTable: this.getActiveTable,
       getActiveView: this.getActiveView,
       onCloseDashboard: this.props.onCloseStatistic,
-      getViewRows: this.props.getViewRows,
-      getTableFormulaResults: this.props.getTableFormulaResults,
       selectDashboard: this.selectDashboard,
       modifyColorTheme: this.modifyColorTheme,
       addDashboard: this.addDashboard,

package/es/desktop-dashboard.js

@@ -10,13 +10,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _seaChart = require("sea-chart");
 var _tabs = _interopRequireDefault(require("./tabs"));
 var _statList = _interopRequireDefault(require("./stat-list"));
 var _colorThemeDialog = _interopRequireDefault(require("./components/dialog/color-theme-dialog"));
-var _chartEditDialog = _interopRequireDefault(require("./components/dialog/chart-edit-dialog"));
+var _chartAdditionEditDialog = _interopRequireDefault(require("./components/dialog/chart-addition-edit-dialog"));
 var _statisticRecordDialog = _interopRequireDefault(require("./components/dialog/statistic-record-dialog"));
-var _dtableDbApi = _interopRequireDefault(require("./api/dtable-db-api"));
 var _chartService = _interopRequireDefault(require("./service/chart-service"));
 var _constants = require("./constants");
 var _icon = _interopRequireDefault(require("./assets/images/icon.png"));
@@ -36,24 +34,10 @@ class DesktopDashboard extends _react.Component {
         isFullScreen: !this.state.isFullScreen
       });
     };
-    this.onToggleAddChart = () => {
+    this.onToggleChartAddition = () => {
       this.setState({
-        isShowChartAddDialog: !this.state.isShowChartAddDialog
-      });
-    };
-    this.onToggleEditChart = chartId => {
-      let editingChart = null;
-      if (chartId) {
-        const {
-          statistics,
-          selectedDashboardIdx
-        } = this.props;
-        const statistic = statistics[selectedDashboardIdx];
-        editingChart = statistic && statistic.stat_items.find(chart => chart.config._id === chartId);
-      }
-      this.setState({
-        isShowChartEditDialog: !this.state.isShowChartEditDialog,
-        editingChart
+        isShowChartAdditionDialog: !this.state.isShowChartAdditionDialog,
+        editingChart: null
       });
     };
     this.toggleThemeMode = () => {
@@ -64,11 +48,16 @@ class DesktopDashboard extends _react.Component {
         this.saveThemeMode2LocalStorage(theme);
       });
     };
-    this.onTypeChange = newType => {
-      const convertedChart = this.generateChart(newType);
+    this.onToggleEditChart = chartId => {
+      const {
+        statistics,
+        selectedDashboardIdx
+      } = this.props;
+      const statistic = statistics[selectedDashboardIdx];
+      const editingChart = statistic && statistic.stat_items.find(chart => chart._id === chartId);
       this.setState({
-        isShowChartEditDialog: true,
-        editingChart: convertedChart
+        isShowChartAdditionDialog: true,
+        editingChart
       });
     };
     this.onCloseDashboard = () => {
@@ -147,21 +136,11 @@ class DesktopDashboard extends _react.Component {
     this.state = {
       theme: this.getThemeModeFromLocalStorage() || '',
       isFullScreen: false,
-      isShowChartEditDialog: false,
-      isShowChartAddDialog: false,
+      isShowChartAdditionDialog: false,
       isShowColorThemeDialog: false,
       editingChart: null,
       chartRecordsParams: null
     };
-    this.api = {
-      sqlQuery: this.sqlQuery,
-      getViewRows: this.props.getViewRows,
-      getTableFormulaResults: this.props.getTableFormulaResults,
-      queryUsers: window.app.queryUsers || (() => {})
-    };
-  }
-  async sqlQuery(sql) {
-    return _dtableDbApi.default.sqlQuery(sql);
   }
   render() {
     const {
@@ -172,14 +151,15 @@ class DesktopDashboard extends _react.Component {
       colorThemeName,
       statistics,
       selectedDashboardIdx,
+      chartCalculator,
+      labelColorConfigs,
       eventBus
     } = this.props;
     const {
       theme,
       isFullScreen,
       editingChart,
-      chartRecordsParams,
-      isShowChartAddDialog
+      chartRecordsParams
     } = this.state;
     const darkMode = theme === _constants.THEME_NAME_MAP.DARK;
     const statistic = statistics[selectedDashboardIdx];
@@ -215,7 +195,7 @@ class DesktopDashboard extends _react.Component {
       className: "statistic-header-operators d-flex align-items-center"
     }, !isTableReadOnly && /*#__PURE__*/_react.default.createElement("button", {
       className: "btn btn-secondary op-item add-stat",
-      onClick: this.onToggleAddChart
+      onClick: this.onToggleChartAddition
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "op-item-icon add-chart-icon dtable-font dtable-icon-add-table"
     }), /*#__PURE__*/_react.default.createElement("span", {
@@ -264,12 +244,12 @@ class DesktopDashboard extends _react.Component {
       theme: theme,
       colorThemeName: colorThemeName,
       statItems: statItems,
+      chartCalculator: chartCalculator,
       eventBus: eventBus,
-      api: this.api,
-      getValue: getValue,
       getOtherStatistics: this.getOtherStatistics,
       getTableById: this.props.getTableById,
       getTables: this.props.getTables,
+      queryMapJson: this.props.queryMapJson,
       copyChart: this.props.copyChart,
       moveChartToView: this.props.moveChartToView,
       deleteChart: this.props.deleteChart,
@@ -277,22 +257,23 @@ class DesktopDashboard extends _react.Component {
       onToggleEditChart: this.onToggleEditChart,
       onCloseDashboard: this.props.onCloseDashboard,
       toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
-    })), this.state.isShowChartEditDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
-      theme: theme,
+    })), this.state.isShowChartAdditionDialog && /*#__PURE__*/_react.default.createElement(_chartAdditionEditDialog.default, {
+      dtableChangedTime: dtableChangedTime,
       colorThemeName: colorThemeName,
       editingChart: editingChart,
-      api: this.api,
-      getValue: getValue,
-      statistics: statistics,
-      selectedDashboardIdx: selectedDashboardIdx,
+      labelColorConfigs: labelColorConfigs,
+      chartCalculator: chartCalculator,
+      eventBus: eventBus,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: this.props.getTableById,
+      queryMapJson: this.props.queryMapJson,
+      generateChart: this.generateChart,
+      hideChartAdditionDialog: this.onToggleChartAddition,
+      getConvertedChart: this.props.getConvertedChart,
       addChart: this.props.addChart,
       modifyChart: this.props.modifyChart,
-      onToggleEditChart: this.onToggleEditChart,
       toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
-    }), isShowChartAddDialog && /*#__PURE__*/_react.default.createElement(_seaChart.TypesDialog, {
-      type: "",
-      onToggle: this.onToggleAddChart,
-      onChange: this.onTypeChange
     }), this.state.isShowColorThemeDialog && /*#__PURE__*/_react.default.createElement(_colorThemeDialog.default, {
       colorThemeName: colorThemeName,
       onToggleColorThemeDialog: this.onToggleColorThemeDialog,

package/es/mobile-dashboard.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _tabs = _interopRequireDefault(require("./tabs"));
 var _statView = _interopRequireDefault(require("./stat-view"));
-var _seaChart = require("sea-chart");
 var _constants = require("./constants");
 var _icon = _interopRequireDefault(require("./assets/images/icon.png"));
 var _mobileDashboardModule = _interopRequireDefault(require("./assets/css/mobile-dashboard.module.css"));
@@ -26,9 +25,13 @@ class MobileDashboard extends _react.Component {
   render() {
     const {
       getTableById,
+      dtableChangedTime,
       colorThemeName,
       statistics,
-      selectedDashboardIdx
+      selectedDashboardIdx,
+      chartCalculator,
+      labelColorConfigs,
+      eventBus
     } = this.props;
     const statistic = statistics[selectedDashboardIdx];
     const {
@@ -67,12 +70,10 @@ class MobileDashboard extends _react.Component {
     }, statItems.map(statItem => {
       const {
         _id,
-        type
-      } = statItem.config;
-      const {
+        type,
         name
-      } = statItem.style_config.title.text;
-      const showStatName = !(type === _seaChart.CHART_TYPE.BASIC_NUMBER_CARD || type === _seaChart.CHART_TYPE.DASHBOARD);
+      } = statItem;
+      const showStatName = !(type === _constants.STAT_TYPE.BASIC_NUMBER_CARD || type === _constants.STAT_TYPE.DASHBOARD);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: "mobile-statistic-chart-".concat(_id),
         className: _mobileDashboardModule.default['mobile-statistic-chart-wrapper']
@@ -81,10 +82,17 @@ class MobileDashboard extends _react.Component {
       }, showStatName && name), /*#__PURE__*/_react.default.createElement("div", {
         className: _mobileDashboardModule.default['mobile-statistic-chart-container']
       }, /*#__PURE__*/_react.default.createElement(_statView.default, {
+        isPreview: true,
+        isEnlarge: false,
+        dtableChangedTime: dtableChangedTime,
         theme: _constants.THEME_NAME_MAP.LIGHT,
         colorThemeName: colorThemeName,
         statItem: statItem,
-        getTableById: getTableById
+        chartCalculator: chartCalculator,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        queryMapJson: this.props.queryMapJson
       })));
     })));
   }

package/es/model/bar-group.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+class BarGroup extends _baseModel.default {
+  constructor(object) {
+    super(object);
+
+    // x data
+    this.x_axis_column_key = object.x_axis_column_key;
+    this.x_axis_date_granularity = object.x_axis_date_granularity;
+    this.x_axis_geolocation_granularity = object.x_axis_geolocation_granularity;
+    this.x_axis_include_empty = object.x_axis_include_empty;
+
+    // x style
+    this.show_x_axis_label = (0, _commonUtils.isBoolean)(object.show_x_axis_label) ? object.show_x_axis_label : false;
+    this.x_axis_label_position = object.x_axis_label_position;
+
+    // y data
+    this.y_axis_summary_type = object.y_axis_summary_type || _constants.SUMMARY_TYPE.COUNT;
+    this.y_axis_column_key = object.y_axis_column_key;
+    this.y_axis_summary_method = object.y_axis_summary_method;
+    if (this.y_axis_summary_method === _constants.SUMMARY_METHOD_MAP.Row_count) {
+      this.y_axis_summary_method = _constants.SUMMARY_METHOD_MAP.Max;
+    }
+
+    // y style
+    this.y_axis_label_position = (0, _commonUtils.isBoolean)(object.y_axis_label_position) ? object.y_axis_label_position : false;
+    this.show_y_axis_label = object.show_y_axis_label;
+    this.y_axis_label_color = object.y_axis_label_color;
+    this.y_axis_use_stack = object.y_axis_use_stack;
+    if (this.type === _constants.STAT_TYPE.BAR_STACK) {
+      this.y_axis_use_stack = true;
+    }
+    this.y_axis_auto_range = object.y_axis_auto_range;
+    this.y_axis_max = object.y_axis_max;
+    this.y_axis_min = object.y_axis_min;
+
+    // group
+    this.column_groupby_column_key = object.column_groupby_column_key;
+    this.column_groupby_date_granularity = object.column_groupby_date_granularity;
+    this.column_groupby_geolocation_granularity = object.column_groupby_geolocation_granularity;
+    this.column_groupby_multiple_numeric_column = object.column_groupby_multiple_numeric_column;
+    this.column_groupby_numeric_columns = object.column_groupby_numeric_columns;
+    this.display_each_block_data = object.display_each_block_data;
+    this.title_name = object.title_name;
+    this.label_font_size = object.label_font_size;
+    this.display_data = object.display_data;
+    this.sort_type = object.sort_type;
+  }
+}
+exports.default = BarGroup;

package/es/model/bar.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+class Bar extends _baseModel.default {
+  constructor(object) {
+    super(object);
+
+    // x data
+    this.x_axis_column_key = object.x_axis_column_key;
+    this.x_axis_date_granularity = object.x_axis_date_granularity;
+    this.x_axis_geolocation_granularity = object.x_axis_geolocation_granularity;
+    this.x_axis_include_empty = object.x_axis_include_empty;
+
+    // x style
+    this.show_x_axis_label = (0, _commonUtils.isBoolean)(object.show_x_axis_label) ? object.show_x_axis_label : false;
+    this.x_axis_label_position = object.x_axis_label_position;
+
+    // y data
+    this.y_axis_summary_type = object.y_axis_summary_type || _constants.SUMMARY_TYPE.COUNT;
+    this.y_axis_column_key = object.y_axis_column_key;
+    this.y_axis_summary_method = object.y_axis_summary_method;
+    if (this.y_axis_summary_method === _constants.SUMMARY_METHOD_MAP.Row_count) {
+      this.y_axis_summary_method = _constants.SUMMARY_METHOD_MAP.Max;
+    }
+
+    // y style
+    this.color_option = object.color_option;
+    this.y_axis_label_color = object.y_axis_label_color;
+    this.y_axis_label_color_rules = object.y_axis_label_color_rules;
+    this.show_y_axis_label = (0, _commonUtils.isBoolean)(object.show_y_axis_label) ? object.show_y_axis_label : false;
+    this.y_axis_label_position = object.y_axis_label_position;
+    this.y_axis_auto_range = object.y_axis_auto_range;
+    this.y_axis_min = object.y_axis_min;
+    this.y_axis_max = object.y_axis_max;
+    this.sort_type = object.sort_type;
+    this.label_font_size = object.label_font_size;
+    this.display_data = object.display_data;
+  }
+}
+exports.default = Bar;

package/es/model/base-model.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class BaseModel {
+  constructor(object) {
+    this._id = object._id || null;
+    this.name = object.name || null;
+    this.type = object.type || null;
+    this.table_id = object.table_id || null;
+    this.view_id = object.view_id || null;
+    this.layout = object.layout;
+    this.chart_color_theme = object.chart_color_theme || 'theme0';
+  }
+}
+exports.default = BaseModel;

package/es/model/basic-number-card.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dtableUtils = require("dtable-utils");
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _constants = require("../constants");
+class BasicNumberCard extends _baseModel.default {
+  constructor(object, table) {
+    super(object);
+    this.name = null;
+    this.numeric_column = object.x_axis_column_key;
+    if (this.numeric_column) {
+      const column = (0, _dtableUtils.getTableColumnByKey)(table, this.numeric_column);
+      if (!(0, _dtableUtils.isNumericColumn)(column)) {
+        this.numeric_column = null;
+      }
+    }
+    this.summary_method = object.y_axis_summary_method || _constants.SUMMARY_METHOD_MAP.Row_count;
+  }
+}
+exports.default = BasicNumberCard;

package/es/model/combination.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+class Combination extends _baseModel.default {
+  constructor(object) {
+    super(object);
+
+    // x data
+    this.x_axis_column_key = object.x_axis_column_key;
+    this.x_axis_geolocation_granularity = object.x_axis_geolocation_granularity;
+    this.x_axis_date_granularity = object.x_axis_date_granularity;
+    this.x_axis_include_empty = object.x_axis_include_empty;
+
+    // y left/right data/style
+    this.y_axis_left_summary_type = object.y_axis_left_summary_type || _constants.STATISTICS_COUNT_TYPE.COUNT;
+    this.y_axis_right_summary_type = object.y_axis_right_summary_type || _constants.STATISTICS_COUNT_TYPE.COUNT;
+    this.y_axis_left_summary_method = object.y_axis_left_summary_method;
+    this.y_axis_right_summary_method = object.y_axis_right_summary_method;
+    this.y_axis_left_summary_column = object.y_axis_left__summary_column;
+    this.y_axis_right_summary_column = object.y_axis_right_summary_column;
+    this.y_axis_left_group_by_multiple_numeric_column = (0, _commonUtils.isBoolean)(object.y_axis_left_group_by_multiple_numeric_column) ? object.y_axis_left_group_by_multiple_numeric_column : false;
+    this.y_axis_left_group_by_numeric_columns = object.y_axis_left_group_by_numeric_columns;
+    this.y_axis_left_color = object.y_axis_left_color || _constants.LABEL_COLORS[0];
+    this.y_axis_right_color = object.y_axis_right_color || _constants.LABEL_COLORS[1];
+    this.show_x_axis_label = object.show_x_axis_label;
+    this.x_axis_label_position = object.x_axis_label_position;
+    this.show_y_axis_left_label = (0, _commonUtils.isBoolean)(object.show_y_axis_left_label) ? object.show_y_axis_left_label : false;
+    this.show_y_axis_right_label = (0, _commonUtils.isBoolean)(object.show_y_axis_right_label) ? object.show_y_axis_right_label : false;
+    this.y_axis_left_label_position = object.y_axis_left_label_position;
+    this.y_axis_right_label_position = object.y_axis_right_label_position;
+    this.y_axis_auto_range_left = object.y_axis_auto_range_left;
+    this.y_axis_min_left = object.y_axis_min_left;
+    this.y_axis_max_left = object.y_axis_max_left;
+    this.y_axis_auto_range_right = object.y_axis_auto_range_right;
+    this.y_axis_min_right = object.y_axis_min_right;
+    this.y_axis_max_right = object.y_axis_max_right;
+    this.display_data = object.display_data;
+    this.label_font_size = object.label_font_size;
+  }
+}
+exports.default = Combination;

package/es/model/compare-bar.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dtableUtils = require("dtable-utils");
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _commonUtils = require("../utils/common-utils");
+var _columnUtils = require("../utils/column-utils");
+var _constants = require("../constants");
+class CompareBar extends _baseModel.default {
+  constructor(object, table) {
+    super(object);
+
+    // x data
+    this.x_axis_column_key = object.x_axis_column_key;
+    if (this.x_axis_column_key) {
+      const column = (0, _dtableUtils.getTableColumnByKey)(table, this.x_axis_column_key);
+      if (!(0, _columnUtils.isStatisticDateColumn)(column)) {
+        this.x_axis_column_key = null;
+      }
+    }
+    this.x_axis_date_granularity = object.x_axis_date_granularity || _constants.DATE_GRANULARITY.MONTH;
+    this.x_axis_date_range_start = object.x_axis_date_range_start;
+    this.x_axis_date_range_end = object.x_axis_date_range_end;
+    this.x_axis_compared_date_range_start = object.x_axis_compared_date_range_start;
+    this.x_axis_compared_date_range_end = object.x_axis_compared_date_range_end;
+
+    // x style
+    this.show_x_axis_label = (0, _commonUtils.isBoolean)(object.show_x_axis_label) ? object.show_x_axis_label : false;
+    this.x_axis_label_position = object.x_axis_label_position;
+
+    // y data
+    this.y_axis_summary_type = object.y_axis_summary_type || _constants.SUMMARY_TYPE.COUNT;
+    this.y_axis_column_key = object.y_axis_column_key;
+    this.y_axis_summary_method = object.y_axis_summary_method;
+    if (this.y_axis_summary_method === _constants.SUMMARY_METHOD_MAP.Row_count) {
+      this.y_axis_summary_method = _constants.SUMMARY_METHOD_MAP.Max;
+    }
+
+    // y style
+    this.show_y_axis_label = object.show_y_axis_label;
+    this.y_axis_label_position = object.y_axis_label_position;
+    this.y_axis_compare_label_color = object.y_axis_compare_label_color;
+    this.y_axis_compared_label_color = object.y_axis_compared_label_color;
+    this.display_increase = (0, _commonUtils.isBoolean)(object.display_increase) ? object.display_increase : false;
+    this.display_increase_percentage = (0, _commonUtils.isBoolean)(object.display_increase_percentage) ? object.display_increase_percentage : false;
+    this.increase_display_color = object.increase_display_color;
+    this.label_font_size = object.label_font_size;
+    this.display_data = object.display_data;
+    this.increase_line_color = object.increase_line_color || '#fbd44a';
+  }
+}
+exports.default = CompareBar;

package/es/model/completeness-group.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _baseModel = _interopRequireDefault(require("./base-model"));
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+class CompletenessGroup extends _baseModel.default {
+  constructor(object) {
+    super(object);
+    this.name_column = object.x_axis_column_key;
+    this.target_value_column = object.target_value_column;
+    this.target_value_column_summary_method = object.target_value_column_summary_method || _constants.SUMMARY_METHOD_MAP.Row_count;
+    this.total_value_column = object.total_value_column;
+    this.total_value_column_summary_method = object.total_value_column_summary_method || _constants.SUMMARY_METHOD_MAP.Row_count;
+    this.completed_column = object.completed_column;
+    this.target_column = object.target_column;
+    this.display_percentage = (0, _commonUtils.isBoolean)(object.display_percentage) ? object.display_percentage : true;
+    this.group_column = object.column_groupby_column_key;
+    this.date_granularity = object.column_groupby_date_granularity;
+    this.geolocation_granularity = object.column_groupby_geolocation_granularity;
+    this.label_font_size = object.label_font_size;
+    this.y_axis_auto_range = object.y_axis_auto_range;
+    this.y_axis_max = object.y_axis_max;
+    this.y_axis_min = object.y_axis_min;
+  }
+}
+exports.default = CompletenessGroup;