sea-chart 0.0.82 → 0.0.83

package/dist/context.js

@@ -11,7 +11,7 @@ class Context {
         onSuccess,
         onFail
       } = _ref;
-      // used custom api to get chart result data
+      // use custom api to get chart result data
       if (this.api.queryChartResult) {
         return this.api.queryChartResult({
           chart,
@@ -20,12 +20,12 @@ class Context {
         });
       }
       const table = getTableById(tables, chart.config.table_id);
-
-      // use default view here
+      const currentView = table.views.find(view => view._id === chart.config.view_id);
+      // use default view
       const defaultView = table.views.find(view => view._id === '0000');
       const chartDataSQL = new ChartDataSQL({
         table,
-        view: defaultView,
+        view: currentView || defaultView,
         chart
       });
       const {

package/dist/model/chart.js

@@ -7,7 +7,8 @@ class ChartModel {
     const {
       id,
       _id,
-      style_config
+      style_config,
+      table_id
     } = options;
     this.id = id;
     this.type = 'statistic';
@@ -20,6 +21,11 @@ class ChartModel {
       font_weight: DEFAULT_CHART_FONT_WEIGHT,
       horizontal_align: HORIZONTAL_ALIGN.LEFT
     };
+    if (options.view_id) {
+      const table = tables.find(table => table._id === table_id);
+      const currentView = table === null || table === void 0 ? void 0 : table.views.find(view => view._id === options.view_id);
+      this.config.view_id = currentView._id || '0000';
+    }
   }
 }
 export default ChartModel;

package/dist/model/map.js

@@ -1,7 +1,7 @@
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isStatisticMapColumn } from '../utils';
 import { CHART_TYPE, MAP_LEVEL, regions } from '../constants';
+import BaseModel from './base-model';
 class Map extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/mirror.js

@@ -1,7 +1,7 @@
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isBoolean, isStatisticMirrorColumn } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Mirror extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/trend.js

@@ -1,15 +1,16 @@
-import { getTableColumnByKey, isDateColumn } from 'dtable-utils';
+import { getTableById, getTableColumnByKey, isDateColumn } from 'dtable-utils';
 import { CHART_TYPE, HORIZONTAL_ALIGN } from '../constants';
 import BaseModel from './base-model';
 class Trend extends BaseModel {
-  constructor(options, table) {
+  constructor(options, tables) {
     super({
       ...options,
       type: CHART_TYPE.TREND
     });
     this.date_column_key = options.x_axis_column_key;
     this.date_granularity = options.x_axis_date_granularity;
-    if (this.date_column_key) {
+    if (this.date_column_key && this.table_id) {
+      const table = getTableById(tables, this.table_id);
       const column = getTableColumnByKey(table, this.date_column_key);
       if (!column || !isDateColumn(column)) {
         this.date_column_key = null;

package/dist/model/world-map-bubble.js

@@ -1,7 +1,7 @@
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isStatisticWorldMapColumn } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class WorldMapBubble extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/world-map.js

@@ -1,7 +1,7 @@
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isStatisticWorldMapColumn } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class WorldMap extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/settings/scatter/data-settings.js

@@ -38,12 +38,12 @@ export default function ScatterDataSettings(_ref) {
     };
     return update;
   };
-  const onXAxisColumnChange = e => {
+  const onXAxisColumnChange = column => {
     const update = getNewUpdate(column, 'x_axis_column_key');
     if (!update) return;
     onChange && onChange(update);
   };
-  const onYAxisColumnChange = e => {
+  const onYAxisColumnChange = column => {
     const update = getNewUpdate(column, 'y_axis_column_key');
     if (!update) return;
     onChange && onChange(update);
@@ -53,14 +53,13 @@ export default function ScatterDataSettings(_ref) {
       x_axis_include_empty_cells: !x_axis_include_empty_cells
     });
   };
-  const onColumnGroupbyColumnChange = e => {
+  const onColumnGroupbyColumnChange = column => {
     const update = getNewUpdate(column, 'column_groupby_column_key');
     if (!update) return;
     if (!update['column_groupby_column_key']) {
       update['date_granularity'] = null;
       update['geolocation_granularity'] = null;
     } else {
-      const column = e.value;
       const type = column.type;
       if (DATE_COLUMN_OPTIONS.includes(type)) {
         update['date_granularity'] = CHART_SUMMARY_TYPE.MONTH;

package/dist/settings/widgets/basic-summary/index.js

@@ -31,7 +31,11 @@ const BasicSummary = _ref => {
     const {
       columns
     } = selectedTable;
-    return columns.filter(column => supportColumnTypes.includes(CellType.NUMBER) && BaseUtils.isNumericSummaryColumn(column) || supportColumnTypes.includes(CellType.DATE) && BaseUtils.isDateSummaryColumn(column));
+    return columns.filter(column => {
+      const supportNum = supportColumnTypes.includes(CellType.NUMBER) && BaseUtils.isNumericSummaryColumn(column) && column.type !== CellType.DURATION;
+      const supportDate = supportColumnTypes.includes(CellType.DATE) && BaseUtils.isDateSummaryColumn(column);
+      return supportNum || supportDate;
+    });
   }, [selectedTable, supportColumnTypes]);
   const numericColumnOptions = useMemo(() => {
     return numericColumns.map(column => {

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -1692,9 +1692,9 @@ SQLStatisticsUtils.scatterSQLResult2JavaScript = (chart, sqlRows, chartSQLMap, c
   if (sqlColumnGroupbyColumnKey) BaseUtils.updateTableViewList(sqlRows, columnGroupbyColumn, sqlColumnGroupbyColumnKey, 'color');
   const res = [];
   sqlRows.forEach(row => {
-    const xValue = row[sqlXColumnKey];
-    const yValue = row[sqlYColumnKey];
-    const groupby = row[sqlColumnGroupbyColumnKey];
+    const xValue = '' + row[sqlXColumnKey] || intl.get('Empty');
+    const yValue = '' + row[sqlYColumnKey] || intl.get('Empty');
+    const groupby = '' + row[sqlColumnGroupbyColumnKey] || intl.get('Empty');
     res.push({
       name: xValue,
       value: yValue,

package/dist/view/wrapper/bar-group.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { CellType } from 'dtable-ui-component/lib/constants';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
-import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR } from '../../constants';
+import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR, CHART_STYLE_COLORS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
 import ChartComponent from './chart-component';
@@ -167,7 +167,7 @@ class BarGroup extends ChartComponent {
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
       }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
-        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name];
+        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

package/dist/view/wrapper/horizontal-bar-group.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
 import { CellType } from 'dtable-ui-component/lib/constants';
-import { CHART_TYPE, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
+import { CHART_TYPE, EMPTY_NAME, CHART_THEME_COLOR, CHART_STYLE_COLORS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
 import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
@@ -118,7 +118,7 @@ class HorizontalBarGroup extends HorizontalComponent {
           lineWidth: 1
         }
       }).position('name*value').size(singleBarWidth).color('group_name*group_color', (group_name, group_color) => {
-        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name];
+        return useSingleSelectColumnColor ? group_color : this.colorMap[group_name] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

package/dist/view/wrapper/map.js

@@ -262,10 +262,15 @@ export default function Map(props) {
   // used to fetch mapJson data
   useEffect(() => {
     (async () => {
-      const mediaUrl = context.getSetting('mediaUrl');
-      const mapJson = await fetchMapJson(mapLevel, mapLocation, mediaUrl);
-      setMapData(mapJson);
-      setIsLoading(false);
+      try {
+        const mediaUrl = context.getSetting('mediaUrl');
+        const mapJson = await fetchMapJson(mapLevel, mapLocation, mediaUrl);
+        setMapData(mapJson);
+        setIsLoading(false);
+      } catch (error) {
+        console.error(error);
+        setIsLoading(false);
+      }
     })();
   }, [mapLevel, mapLocation]);
 

package/dist/view/wrapper/scatter.js

@@ -6,11 +6,20 @@ import intl from '../../intl';
 import { CHART_THEME_COLOR } from '../../constants';
 import ChartComponent from './chart-component';
 const chartComponent = new ChartComponent();
-export function Scatter(props) {
+export function Scatter(_ref) {
+  let {
+    toggleRecords,
+    result: data,
+    chart,
+    tables,
+    globalTheme,
+    chartColorTheme
+  } = _ref;
   const chartRef = useRef(chartComponent);
   const chartContainerRef = useRef(null);
   useEffect(() => {
     const currentChart = chartRef.current;
+    currentChart.isDestoryed = false;
 
     // avoid closure trap
     function createChart() {
@@ -19,29 +28,18 @@ export function Scatter(props) {
         appendPadding
       });
       currentChart.chart.on('element:click', e => {
-        props.toggleRecords(e.data.data);
+        toggleRecords(e.data.data);
       });
     }
     function drawChart() {
-      let {
-        result: data,
-        chart,
-        tables
-      } = props;
-      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
-      if (!Array.isArray(data)) return;
-      currentChart.loadData(data);
-      draw(data);
+      const newData = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
+      if (!Array.isArray(newData)) return;
+      currentChart.loadData(newData);
+      draw(newData);
       currentChart.chart.render();
       currentChart.renderAxisLabel(chart, tables);
     }
     function draw(data) {
-      const {
-        chart,
-        globalTheme,
-        chartColorTheme,
-        tables
-      } = props;
       const theme = CHART_THEME_COLOR[globalTheme];
       const {
         label_font_size,
@@ -117,12 +115,11 @@ export function Scatter(props) {
     createChart();
     drawChart();
     return () => {
+      if (currentChart.isDestoryed) return;
       currentChart.chart.destroy();
+      currentChart.isDestoryed = true;
     };
-  }, [props]);
-  const {
-    chart
-  } = props;
+  }, [chart, chartColorTheme, data, globalTheme, tables, toggleRecords]);
   const showXLabel = chartRef.current.isShowXAxisLabel(chart);
   const showYLabel = chartRef.current.isShowYAxisLabel(chart);
   return /*#__PURE__*/React.createElement("div", {

package/dist/view/wrapper/table/two-dimension-table.js

@@ -132,7 +132,7 @@ class TwoDimensionTable extends PureComponent {
     };
     this.renderEmpty = (summaryColumns, cellIdx) => {
       if (summaryColumns && (summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.length) !== 0) {
-        return summaryColumns.map(() => {
+        return summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.map(() => {
           return /*#__PURE__*/React.createElement("div", {
             key: "table-cell-".concat(cellIdx),
             className: classnames('pivot-cell', {

package/dist/view/wrapper/world-map.js

@@ -22,15 +22,20 @@ class WorldMap extends ChartComponent {
     };
     this.queryMapJson = async () => {
       const mediaUrl = context.getSetting('mediaUrl');
-      const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
-      this.geoData = mapJson;
-      this.geoData.features.forEach(item => {
-        this.countryMap.set(item.properties.name, item.properties.name_cn);
-        this.countryMap.set(item.properties.name_cn, item.properties.name);
-      });
-      this.mapFormattedData = this.fixData(this.props.result);
-      this.createChart();
-      this.drawChart();
+      try {
+        const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
+        this.geoData = mapJson;
+        this.geoData.features.forEach(item => {
+          this.countryMap.set(item.properties.name, item.properties.name_cn);
+          this.countryMap.set(item.properties.name_cn, item.properties.name);
+        });
+      } catch (error) {
+        console.error(error);
+      } finally {
+        this.mapFormattedData = this.fixData(this.props.result);
+        this.createChart();
+        this.drawChart();
+      }
     };
     this.fixData = statisticData => {
       if (!statisticData) return [];
@@ -128,6 +133,7 @@ class WorldMap extends ChartComponent {
       });
       this.chart.axis(false);
       this.dataSet = new DataSet();
+      if (!this.geoData) return;
 
       // transform map data
       const mapData = this.dataSet.createView('mapDataModel').source(this.geoData, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",