sea-chart 0.0.1 → 0.0.2

package/dist/model/generic-model.js

@@ -0,0 +1,224 @@
+import { isNumber } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isBoolean, getChartConfigValueByKey } from '../utils';
+import { DATE_GRANULATES, DEFAULT_LABEL_FONT_SIZE, GEOLOCATION_GRANULATES, LABEL_POSITION_TYPE, CHART_SUMMARY_TYPE, GENERIC_KEY, CHART_KEY, LEGEND_DIRECTION } from '../constants';
+export default class GenericModel extends BaseModel {
+  constructor(object) {
+    const options = object || {};
+    super(options);
+
+    // x data
+    this.x_axis_column_key = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_COLUMN_KEY, options);
+    this.x_axis_include_empty_cells = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_INCLUDE_EMPTY_CELLS, options);
+    this.x_axis_date_granularity = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_DATE_GRANULARITY, options);
+    this.x_axis_geolocation_granularity = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_GEOLOCATION_GRANULARITY, options);
+
+    // set default value
+    if (!isBoolean(this.x_axis_include_empty_cells)) {
+      this.x_axis_include_empty_cells = false;
+    }
+    if (this.x_axis_date_granularity && !DATE_GRANULATES.includes(this.x_axis_date_granularity)) {
+      this.x_axis_date_granularity = CHART_SUMMARY_TYPE.MONTH;
+    }
+    if (this.x_axis_geolocation_granularity && !GEOLOCATION_GRANULATES.includes(this.x_axis_geolocation_granularity)) {
+      this.x_axis_geolocation_granularity = CHART_SUMMARY_TYPE.DISTRICT;
+    }
+    this.x_axis_date_range_start = getChartConfigValueByKey(CHART_KEY.X_AXIS_DATE_RANGE_START, options);
+    this.x_axis_date_range_end = getChartConfigValueByKey(CHART_KEY.X_AXIS_DATE_RANGE_END, options);
+    this.x_axis_compared_date_range_start = getChartConfigValueByKey(CHART_KEY.X_AXIS_COMPARED_DATE_RANGE_START, options);
+    this.x_axis_compared_date_range_end = getChartConfigValueByKey(CHART_KEY.X_AXIS_COMPARED_DATE_RANGE_END, options);
+
+    // x style
+    this.x_axis_show_label = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_SHOW_LABEL, options);
+    this.x_axis_label_position = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_LABEL_POSITION, options) || LABEL_POSITION_TYPE.CENTER;
+    if (!isBoolean(this.x_axis_show_label)) {
+      this.x_axis_show_label = null;
+    }
+
+    // y data
+    this.y_axis_summary_column_key = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_SUMMARY_COLUMN_KEY, options);
+    this.y_axis_summary_type = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_SUMMARY_TYPE, options);
+    this.y_axis_summary_method = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_SUMMARY_METHOD, options);
+    if (this.y_axis_summary_method === CHART_SUMMARY_TYPE.ROW_COUNT) {
+      this.y_axis_summary_method = CHART_SUMMARY_TYPE.MAX;
+    }
+
+    // y style
+    this.color_option = getChartConfigValueByKey(CHART_KEY.COLOR_OPTION, options);
+    this.y_axis_label_color = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_LABEL_COLOR, options);
+    this.y_axis_label_color_rules = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_LABEL_COLOR_RULES, options);
+    this.y_axis_show_value = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_SHOW_VALUE, options);
+    this.y_axis_show_label = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_SHOW_LABEL, options);
+    if (!isBoolean(this.y_axis_show_value)) {
+      this.y_axis_show_value = null;
+    }
+    if (!isBoolean(this.y_axis_show_label)) {
+      this.y_axis_show_label = null;
+    }
+    this.y_axis_label_position = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_LABEL_POSITION, options) || LABEL_POSITION_TYPE.CENTER;
+    this.y_axis_auto_range = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_AUTO_RANGE, options);
+    this.y_axis_min = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_MIN, options);
+    this.y_axis_max = getChartConfigValueByKey(GENERIC_KEY.Y_AXIS_MAX, options);
+    if (!isBoolean(this.y_axis_auto_range)) {
+      this.y_axis_auto_range = true;
+    }
+    if (!isNumber(this.y_axis_min)) {
+      this.y_axis_min = null;
+    }
+    if (!isNumber(this.y_axis_max)) {
+      this.y_axis_max = null;
+    }
+    this.y_axis_use_stack = getChartConfigValueByKey(CHART_KEY.Y_AXIS_USE_STACK, options);
+    if (!isBoolean(this.y_axis_use_stack)) {
+      this.y_axis_use_stack = null;
+    }
+    this.y_axis_compare_label_color = getChartConfigValueByKey(CHART_KEY.Y_AXIS_COMPARE_LABEL_COLOR, options);
+    this.y_axis_compared_label_color = getChartConfigValueByKey(CHART_KEY.Y_AXIS_COMPARED_LABEL_COLOR, options);
+
+    // column-group
+    this.column_groupby_column_key = getChartConfigValueByKey(GENERIC_KEY.COLUMN_GROUPBY_COLUMN_KEY, options);
+    this.column_groupby_date_granularity = getChartConfigValueByKey(GENERIC_KEY.COLUMN_GROUPBY_DATE_GRANULARITY, options);
+    this.column_groupby_geolocation_granularity = getChartConfigValueByKey(GENERIC_KEY.COLUMN_GROUPBY_GEOLOCATION_GRANULARITY, options);
+    if (this.column_groupby_date_granularity && !DATE_GRANULATES.includes(this.column_groupby_date_granularity)) {
+      this.column_groupby_date_granularity = CHART_SUMMARY_TYPE.MONTH;
+    }
+    if (this.column_groupby_geolocation_granularity && !GEOLOCATION_GRANULATES.includes(this.column_groupby_geolocation_granularity)) {
+      this.column_groupby_geolocation_granularity = CHART_SUMMARY_TYPE.DISTRICT;
+    }
+    this.column_groupby_multiple_numeric_column = getChartConfigValueByKey(CHART_KEY.COLUMN_GROUPBY_MULTIPLE_NUMERIC_COLUMN, options);
+    if (!isBoolean(this.column_groupby_multiple_numeric_column)) {
+      this.column_groupby_multiple_numeric_column = null;
+    }
+    this.column_groupby_numeric_columns = getChartConfigValueByKey(CHART_KEY.COLUMN_GROUPBY_NUMERIC_COLUMNS, options);
+    this.summary_columns = getChartConfigValueByKey(CHART_KEY.SUMMARY_COLUMNS, options);
+    if (!Array.isArray(this.summary_columns)) {
+      this.summary_columns = [];
+    }
+
+    // other
+    this.sort_type = getChartConfigValueByKey(CHART_KEY.SORT_TYPE, options);
+    this.display_each_block_data = getChartConfigValueByKey(CHART_KEY.DISPLAY_EACH_BLOCK_DATA, options);
+    if (!isBoolean(this.display_each_block_data)) {
+      this.display_each_block_data = null;
+    }
+    this.title_name = getChartConfigValueByKey(CHART_KEY.TITLE_NAME, options);
+    this.label_font_size = getChartConfigValueByKey(GENERIC_KEY.LABEL_FONT_SIZE, options);
+    if (!isNumber(this.label_font_size)) {
+      this.label_font_size = DEFAULT_LABEL_FONT_SIZE;
+    }
+    this.y_axis_left_summary_type = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_SUMMARY_TYPE, options);
+    this.y_axis_right_summary_type = getChartConfigValueByKey(CHART_KEY.Y_AXIS_RIGHT_SUMMARY_TYPE, options);
+    this.y_axis_left_summary_method = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_SUMMARY_METHOD, options);
+    this.y_axis_right_summary_method = getChartConfigValueByKey(CHART_KEY.Y_AXIS_RIGHT_SUMMARY_METHOD, options);
+    this.y_axis_left_summary_column = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_SUMMARY_COLUMN, options);
+    this.y_axis_right_summary_column = getChartConfigValueByKey(CHART_KEY.Y_AXIS_RIGHT_SUMMARY_COLUMN, options);
+    this.y_axis_left_group_by_multiple_numeric_column = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_GROUP_BY_MULTIPLE_NUMERIC_COLUMN, options);
+    this.y_axis_left_group_by_numeric_columns = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_GROUP_BY_NUMERIC_COLUMNS, options);
+    if (!isBoolean(this.y_axis_left_group_by_multiple_numeric_column)) {
+      this.y_axis_left_group_by_multiple_numeric_column = null;
+    }
+    if (!Array.isArray(this.y_axis_left_group_by_numeric_columns)) {
+      this.y_axis_left_group_by_numeric_columns = [];
+    }
+    this.y_axis_left_color = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_COLOR, options);
+    this.y_axis_right_color = getChartConfigValueByKey(CHART_KEY.Y_AXIS_RIGHT_COLOR, options);
+    this.show_y_axis_left_label = getChartConfigValueByKey(CHART_KEY.SHOW_Y_AXIS_LEFT_LABEL, options);
+    this.show_y_axis_right_label = getChartConfigValueByKey(CHART_KEY.SHOW_Y_AXIS_RIGHT_LABEL, options);
+    this.y_axis_left_label_position = getChartConfigValueByKey(CHART_KEY.Y_AXIS_LEFT_LABEL_POSITION, options) || LABEL_POSITION_TYPE.CENTER;
+    this.y_axis_right_label_position = getChartConfigValueByKey(CHART_KEY.Y_AXIS_RIGHT_LABEL_POSITION, options) || LABEL_POSITION_TYPE.CENTER;
+    this.y_axis_auto_range_left = getChartConfigValueByKey(CHART_KEY.Y_AXIS_AUTO_RANGE_LEFT, options);
+    this.y_axis_min_left = getChartConfigValueByKey(CHART_KEY.Y_AXIS_MIN_LEFT, options);
+    this.y_axis_max_left = getChartConfigValueByKey(CHART_KEY.Y_AXIS_MAX_LEFT, options);
+    if (!isBoolean(this.y_axis_auto_range_left)) {
+      this.y_axis_auto_range_left = true;
+    }
+    if (!isNumber(this.y_axis_min_left)) {
+      this.y_axis_min_left = null;
+    }
+    if (!isNumber(this.y_axis_max_left)) {
+      this.y_axis_max_left = null;
+    }
+    this.y_axis_auto_range_right = getChartConfigValueByKey(CHART_KEY.Y_AXIS_AUTO_RANGE_RIGHT, options);
+    this.y_axis_min_right = getChartConfigValueByKey(CHART_KEY.Y_AXIS_MIN_RIGHT, options);
+    this.y_axis_max_right = getChartConfigValueByKey(CHART_KEY.Y_AXIS_MAX_RIGHT, options);
+    if (!isBoolean(this.y_axis_auto_range_right)) {
+      this.y_axis_auto_range_right = true;
+    }
+    if (!isNumber(this.y_axis_min_right)) {
+      this.y_axis_min_right = null;
+    }
+    if (!isNumber(this.y_axis_max_right)) {
+      this.y_axis_max_right = null;
+    }
+    this.display_increase = getChartConfigValueByKey(CHART_KEY.DISPLAY_INCREASE, options);
+    this.display_increase_percentage = getChartConfigValueByKey(CHART_KEY.DISPLAY_INCREASE_PERCENTAGE, options);
+    if (!isBoolean(this.display_increase)) {
+      this.display_increase = null;
+    }
+    if (!isBoolean(this.display_increase_percentage)) {
+      this.display_increase_percentage = null;
+    }
+    this.increase_display_color = getChartConfigValueByKey(CHART_KEY.INCREASE_DISPLAY_COLOR, options);
+    if (!isBoolean(this.increase_display_color)) {
+      this.increase_display_color = null;
+    }
+    this.completed_column_key = getChartConfigValueByKey(CHART_KEY.COMPLETED_COLUMN_KEY, options);
+    this.target_column_key = getChartConfigValueByKey(CHART_KEY.TARGET_COLUMN_KEY, options);
+    this.target_value_column_summary_method = getChartConfigValueByKey(CHART_KEY.TARGET_VALUE_COLUMN_SUMMARY_METHOD, options);
+    this.total_value_column_key = getChartConfigValueByKey(CHART_KEY.TOTAL_VALUE_COLUMN_KEY, options);
+    this.total_value_column_summary_method = getChartConfigValueByKey(CHART_KEY.TOTAL_VALUE_COLUMN_SUMMARY_METHOD, options);
+    this.completed_color = getChartConfigValueByKey(CHART_KEY.COMPLETED_COLOR, options);
+    this.display_percentage = getChartConfigValueByKey(CHART_KEY.DISPLAY_PERCENTAGE, options);
+    if (!isBoolean(this.display_percentage)) {
+      this.display_percentage = null;
+    }
+    this.target_value_column_key = getChartConfigValueByKey(CHART_KEY.TARGET_VALUE_COLUMN_KEY, options);
+    this.legend_direction = getChartConfigValueByKey(CHART_KEY.LEGEND_DIRECTION, options) || LEGEND_DIRECTION.VERTICAL;
+    this.legend_size = getChartConfigValueByKey(CHART_KEY.LEGEND_SIZE, options);
+    if (!isNumber(this.legend_size)) {
+      this.legend_size = 1;
+    }
+    this.is_transpose = getChartConfigValueByKey(CHART_KEY.IS_TRANSPOSE, options);
+    if (!isBoolean(this.is_transpose)) {
+      this.is_transpose = null;
+    }
+    this.show_legend = getChartConfigValueByKey(CHART_KEY.SHOW_LEGEND, options);
+    if (!isBoolean(this.show_legend)) {
+      this.show_legend = null;
+    }
+    this.display_label = getChartConfigValueByKey(CHART_KEY.DISPLAY_LABEL, options);
+    if (!isBoolean(this.display_label)) {
+      this.display_label = null;
+    }
+    this.show_percent = getChartConfigValueByKey(CHART_KEY.SHOW_PERCENT, options);
+    if (!isBoolean(this.show_percent)) {
+      this.show_percent = null;
+    }
+    this.minimum_slice_percent = getChartConfigValueByKey(CHART_KEY.MINIMUM_SLICE_PERCENT, options);
+    if (!isNumber(this.minimum_slice_percent)) {
+      this.minimum_slice_percent = 1.5;
+    }
+    this.display_annotation = getChartConfigValueByKey(CHART_KEY.DISPLAY_ANNOTATION, options);
+    if (!isBoolean(this.display_annotation)) {
+      this.display_annotation = null;
+    }
+    this.display_total = getChartConfigValueByKey(CHART_KEY.DISPLAY_TOTAL, options);
+    if (!isBoolean(this.display_total)) {
+      this.display_total = null;
+    }
+    this.summary_columns_option = getChartConfigValueByKey(CHART_KEY.SUMMARY_COLUMNS_OPTION, options);
+    this.increase_line_color = getChartConfigValueByKey(CHART_KEY.INCREASE_LINE_COLOR, options);
+    this.data_color = getChartConfigValueByKey(CHART_KEY.DATA_COLOR, options);
+    this.grid_distance = getChartConfigValueByKey(CHART_KEY.GRID_DISTANCE, options);
+    this.grid_size = getChartConfigValueByKey(CHART_KEY.GRID_SIZE, options);
+    if (!isNumber(this.grid_distance)) {
+      this.grid_distance = null;
+    }
+    if (!isNumber(this.grid_size)) {
+      this.grid_size = null;
+    }
+    this.bubble_color = getChartConfigValueByKey(CHART_KEY.BUBBLE_COLOR, options);
+    this.label_position = getChartConfigValueByKey(CHART_KEY.LABEL_POSITION, options);
+    this.label_format = getChartConfigValueByKey(CHART_KEY.LABEL_FORMAT, options);
+  }
+}

package/dist/model/heat-map.js

@@ -0,0 +1,23 @@
+import { isDateColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { CHART_TYPE } from '../constants';
+class HeatMap extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.HEAT_MAP
+    });
+    this.time_column_key = options.x_axis_column_key;
+    if (this.time_column_key && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.time_column_key);
+      if (!column || !isDateColumn(column)) {
+        this.time_column_key = null;
+      }
+    }
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_method = options.y_axis_summary_method;
+  }
+}
+export default HeatMap;

package/dist/model/horizontal-bar.js

@@ -0,0 +1,38 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+class HorizontalBar extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.HORIZONTAL_BAR
+    });
+
+    // vertical axis data
+    this.vertical_axis_column_key = options.x_axis_column_key;
+    this.vertical_axis_date_granularity = options.x_axis_date_granularity;
+    this.vertical_axis_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.vertical_axis_include_empty = options.x_axis_include_empty_cells;
+
+    // vertical axis style
+    this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.vertical_axis_label_position = options.x_axis_label_position;
+
+    // horizontal axis data
+    this.horizontal_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.horizontal_axis_column_key = options.y_axis_summary_column_key;
+    this.horizontal_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+
+    // horizontal axis style
+    this.horizontal_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
+    this.horizontal_axis_auto_range = options.y_axis_auto_range;
+    this.horizontal_axis_min = options.y_axis_min;
+    this.horizontal_axis_max = options.y_axis_max;
+    this.sort_type = options.sort_type;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default HorizontalBar;

package/dist/model/horizontal-group-bar.js

@@ -0,0 +1,43 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE, LABEL_COLORS, CHART_SUMMARY_TYPE } from '../constants';
+class HorizontalGroupBar extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.HORIZONTAL_GROUP_BAR
+    });
+
+    // vertical axis data
+    this.vertical_axis_column_key = options.x_axis_column_key;
+    this.vertical_axis_date_granularity = options.x_axis_date_granularity;
+    this.vertical_axis_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.vertical_axis_include_empty = options.x_axis_include_empty_cells;
+
+    // vertical axis style
+    this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.vertical_axis_label_position = options.x_axis_label_position;
+
+    // horizontal axis data
+    this.horizontal_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.horizontal_axis_column_key = options.y_axis_summary_column_key;
+    this.horizontal_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+
+    // horizontal axis style
+    this.horizontal_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.horizontal_axis_auto_range = options.y_axis_auto_range;
+    this.horizontal_axis_min = options.y_axis_min;
+    this.horizontal_axis_max = options.y_axis_max;
+
+    // column-group
+    this.column_groupby_column_key = options.column_groupby_column_key;
+    this.column_groupby_date_granularity = options.column_groupby_date_granularity;
+    this.column_groupby_geolocation_granularity = options.column_groupby_geolocation_granularity;
+    this.column_groupby_multiple_numeric_column = options.column_groupby_multiple_numeric_column;
+    this.summary_columns = options.summary_columns;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default HorizontalGroupBar;

package/dist/model/index.js

@@ -0,0 +1,63 @@
+import ChartModel from './chart';
+import { CHART_TYPE } from '../constants';
+import GenericModel from './generic-model';
+import Map from './map';
+import MapBubble from './map-bubble';
+import WorldMap from './world-map';
+import WorldMapBubble from './world-map-bubble';
+import HeatMap from './heat-map';
+import Mirror from './mirror';
+import Bar from './bar';
+import Line from './line';
+import BarGroup from './bar-group';
+import BarStack from './bar-stack';
+import LineGroup from './line-group';
+import AreaGroup from './area-group';
+import Pie from './pie';
+import Ring from './ring';
+import TreeMap from './tree-map';
+import Scatter from './scatter';
+import BasicNumberCard from './basic-number-card';
+import HorizontalBar from './horizontal-bar';
+import HorizontalGroupBar from './horizontal-group-bar';
+import StackedHorizontalBar from './stacked-horizontal-bar';
+import Combination from './combination';
+import CompareBar from './compare-bar';
+import Trend from './trend';
+import Completeness from './completeness';
+import CompletenessGroup from './completeness-group';
+import Dashboard from './dashboard';
+import Table from './table';
+import Area from './area';
+import User from './user';
+const CHART_MAP = {
+  [CHART_TYPE.BAR]: Bar,
+  [CHART_TYPE.BAR_GROUP]: BarGroup,
+  [CHART_TYPE.BAR_STACK]: BarStack,
+  [CHART_TYPE.COMPARE_BAR]: CompareBar,
+  [CHART_TYPE.HORIZONTAL_BAR]: HorizontalBar,
+  [CHART_TYPE.HORIZONTAL_GROUP_BAR]: HorizontalGroupBar,
+  [CHART_TYPE.STACKED_HORIZONTAL_BAR]: StackedHorizontalBar,
+  [CHART_TYPE.COMPLETENESS]: Completeness,
+  [CHART_TYPE.COMPLETENESS_GROUP]: CompletenessGroup,
+  [CHART_TYPE.LINE]: Line,
+  [CHART_TYPE.LINE_GROUP]: LineGroup,
+  [CHART_TYPE.AREA]: Area,
+  [CHART_TYPE.AREA_GROUP]: AreaGroup,
+  [CHART_TYPE.PIE]: Pie,
+  [CHART_TYPE.RING]: Ring,
+  [CHART_TYPE.SCATTER]: Scatter,
+  [CHART_TYPE.COMBINATION]: Combination,
+  [CHART_TYPE.MAP]: Map,
+  [CHART_TYPE.MAP_BUBBLE]: MapBubble,
+  [CHART_TYPE.WORLD_MAP]: WorldMap,
+  [CHART_TYPE.WORLD_MAP_BUBBLE]: WorldMapBubble,
+  [CHART_TYPE.HEAT_MAP]: HeatMap,
+  [CHART_TYPE.MIRROR]: Mirror,
+  [CHART_TYPE.BASIC_NUMBER_CARD]: BasicNumberCard,
+  [CHART_TYPE.TREND]: Trend,
+  [CHART_TYPE.DASHBOARD]: Dashboard,
+  [CHART_TYPE.TREE_MAP]: TreeMap,
+  [CHART_TYPE.TABLE]: Table
+};
+export { ChartModel, GenericModel, CHART_MAP, User };

package/dist/model/line-group.js

@@ -0,0 +1,44 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+class LineGroup extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.LINE_GROUP
+    });
+
+    // x axis data
+    this.x_axis_column_key = options.x_axis_column_key;
+    this.x_axis_include_empty_cells = options.x_axis_include_empty_cells;
+    this.x_axis_date_granularity = options.x_axis_date_granularity;
+    this.x_axis_geolocation_granularity = options.x_axis_geolocation_granularity;
+
+    // x axis style
+    this.x_axis_show_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.x_axis_label_position = options.x_axis_label_position;
+
+    // y axis data
+    this.y_axis_summary_column_key = options.y_axis_summary_column_key;
+    this.y_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.y_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+
+    // y axis style
+    this.y_axis_show_value = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
+    this.y_axis_show_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.y_axis_label_position = options.y_axis_label_position;
+    this.y_axis_auto_range = options.y_axis_auto_range;
+    this.y_axis_min = options.y_axis_min;
+    this.y_axis_max = options.y_axis_max;
+    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+
+    // column group
+    this.column_groupby_column_key = options.column_groupby_column_key;
+    this.column_groupby_date_granularity = options.column_groupby_date_granularity;
+    this.column_groupby_geolocation_granularity = options.column_groupby_geolocation_granularity;
+    this.column_groupby_multiple_numeric_column = isBoolean(options.column_groupby_multiple_numeric_column) ? options.column_groupby_multiple_numeric_column : false;
+    this.summary_columns = options.summary_columns;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default LineGroup;

package/dist/model/line.js

@@ -0,0 +1,38 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { LABEL_COLORS, CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+class Line extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.LINE
+    });
+
+    // x axis data
+    this.x_axis_column_key = options.x_axis_column_key;
+    this.x_axis_include_empty_cells = options.x_axis_include_empty_cells;
+    this.x_axis_date_granularity = options.x_axis_date_granularity;
+    this.x_axis_geolocation_granularity = options.x_axis_geolocation_granularity;
+
+    // x axis style
+    this.x_axis_show_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.x_axis_label_position = options.x_axis_label_position;
+
+    // y axis data
+    this.y_axis_summary_column_key = options.y_axis_summary_column_key;
+    this.y_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.y_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+
+    // y axis style
+    this.y_axis_show_value = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
+    this.y_axis_show_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.y_axis_label_position = options.y_axis_label_position;
+    this.y_axis_auto_range = options.y_axis_auto_range;
+    this.y_axis_min = options.y_axis_min;
+    this.y_axis_max = options.y_axis_max;
+    this.y_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
+    this.sort_type = options.sort_type;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default Line;

package/dist/model/map-bubble.js

@@ -0,0 +1,27 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isStatisticMapColumn } from '../utils';
+import { CHART_TYPE } from '../constants';
+class MapBubble extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.MAP_BUBBLE
+    });
+    this.geo_column_key = options.x_axis_column_key;
+    if (this.geo_column_key && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.geo_column_key);
+      if (!isStatisticMapColumn(column)) {
+        this.geo_column_key = null;
+      }
+    }
+    this.geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_method = options.y_axis_summary_method;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.legend_direction = options.legend_direction;
+    this.legend_size = options.legend_size;
+  }
+}
+export default MapBubble;

package/dist/model/map.js

@@ -0,0 +1,27 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isStatisticMapColumn } from '../utils';
+import { CHART_TYPE } from '../constants';
+class Map extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.MAP
+    });
+    this.geo_column_key = options.x_axis_column_key;
+    if (this.geo_column_key && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.geo_column_key);
+      if (!isStatisticMapColumn(column)) {
+        this.geo_column_key = null;
+      }
+    }
+    this.geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_method = options.y_axis_summary_method;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.legend_direction = options.legend_direction;
+    this.legend_size = options.legend_size;
+  }
+}
+export default Map;

package/dist/model/mirror.js

@@ -0,0 +1,26 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isBoolean, isStatisticMirrorColumn } from '../utils';
+import { CHART_TYPE } from '../constants';
+class Mirror extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.MIRROR
+    });
+    this.column_key = options.x_axis_column_key;
+    if (this.column && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.column_key);
+      if (!isStatisticMirrorColumn(column)) {
+        this.column_key = null;
+      }
+    }
+    this.is_transpose = isBoolean(options.is_transpose) ? options.is_transpose : false;
+    this.group_column_key = options.column_groupby_column_key;
+    this.summary_method = options.y_axis_summary_method;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_type = options.y_axis_summary_type;
+  }
+}
+export default Mirror;

package/dist/model/pie.js

@@ -0,0 +1,26 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE, CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_SUMMARY_TYPE } from '../constants';
+class Pie extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.PIE
+    });
+    this.groupby_column_key = options.x_axis_column_key;
+    this.groupby_date_granularity = options.x_axis_date_granularity;
+    this.groupby_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.groupby_include_empty_cells = options.x_axis_include_empty_cells;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+    this.show_legend = isBoolean(options.show_legend) ? options.show_legend : true;
+    this.display_label = isBoolean(options.display_label) ? options.display_label : true;
+    this.label_position = options.label_position || CHART_LABEL_POSITIONS[0];
+    this.label_format = options.label_format || CHART_LABEL_FORMATS[0];
+    this.minimum_slice_percent = options.minimum_slice_percent;
+    this.sort_type = options.sort_type;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default Pie;

package/dist/model/ring.js

@@ -0,0 +1,26 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE, CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_SUMMARY_TYPE } from '../constants';
+class Ring extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.RING
+    });
+    this.groupby_column_key = options.x_axis_column_key;
+    this.groupby_date_granularity = options.x_axis_date_granularity;
+    this.groupby_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.groupby_include_empty_cells = options.x_axis_include_empty_cells;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+    this.show_legend = isBoolean(options.show_legend) ? options.show_legend : true;
+    this.display_label = isBoolean(options.display_label) ? options.display_label : true;
+    this.label_position = options.label_position || CHART_LABEL_POSITIONS[0];
+    this.label_format = options.label_format || CHART_LABEL_FORMATS[0];
+    this.minimum_slice_percent = options.minimum_slice_percent;
+    this.sort_type = options.sort_type;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default Ring;

package/dist/model/scatter.js

@@ -0,0 +1,19 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE } from '../constants';
+class Scatter extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.SCATTER
+    });
+    this.x_axis_column_key = options.x_axis_column_key;
+    this.y_axis_summary_column_key = options.y_axis_summary_column_key;
+    this.group_column = options.column_groupby_column_key;
+    this.x_axis_show_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.x_axis_label_position = options.x_axis_label_position;
+    this.y_axis_show_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.y_axis_label_position = options.y_axis_label_position;
+  }
+}
+export default Scatter;