sea-chart 0.0.83 → 0.0.84-alpha.0

package/dist/model/chart.js

@@ -21,10 +21,14 @@ class ChartModel {
       font_weight: DEFAULT_CHART_FONT_WEIGHT,
       horizontal_align: HORIZONTAL_ALIGN.LEFT
     };
+    let tableList = tables;
+    if (!Array.isArray(tables)) {
+      tableList = [tables];
+    }
     if (options.view_id) {
-      const table = tables.find(table => table._id === table_id);
+      const table = tableList.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';
+      this.config.view_id = (currentView === null || currentView === void 0 ? void 0 : currentView._id) || '0000';
     }
   }
 }

package/dist/settings/widgets/chart-type/index.css

@@ -5,6 +5,7 @@
   padding-left: 8px;
   padding-right: 3px;
   justify-content: space-between;
+  background-color: #fff;
 }
 
 .sea-chart-settings .sea-chart-type-icon-container {

package/dist/utils/chart-utils/base-utils.js

@@ -308,6 +308,14 @@ BaseUtils.getSummaryValue = (_ref, currentValue, nextValue) => {
     if (currentValue === null && nextValue === null) return null;
     if (currentValue === null) return nextValue;
     if (nextValue === null) return currentValue;
+    if (currentValue && nextValue) {
+      if (summaryMethod === 'MAX') {
+        return Math.max(currentValue, nextValue);
+      }
+      if (summaryMethod === 'MIN') {
+        return Math.min(currentValue, nextValue);
+      }
+    }
   }
   return (currentValue - 0 || 0) + (nextValue - 0 || 0);
 };
@@ -1278,9 +1286,9 @@ BaseUtils.getMean = function (list) {
 BaseUtils.summaryDurationResult = (result, duration, summaryType, summaryMethod, useDataDb, dbDateKey, valueKey) => {
   const currentTime = dayjs();
   const days = duration === 'days_30' ? 30 : 7;
-  const endDate = currentTime.format('YYYY-MM-DD');
-  const middleDate = currentTime.subtract(days, 'days').format('YYYY-MM-DD');
-  const startDate = dayjs(middleDate).subtract(days, 'days').format('YYYY-MM-DD');
+  const endDate = currentTime;
+  const middleDate = currentTime.subtract(days, 'days');
+  const startDate = dayjs(middleDate).subtract(days, 'days');
   let compareValue = [];
   let comparedValue = [];
   if (useDataDb) {
@@ -1288,7 +1296,7 @@ BaseUtils.summaryDurationResult = (result, duration, summaryType, summaryMethod,
     const days2 = [];
     for (let index = 0; index < result.length; index++) {
       const item = result[index];
-      const key = item[dbDateKey];
+      const key = dayjs(item[dbDateKey]);
       if (key >= startDate && key < middleDate) {
         comparedValue.push(item[valueKey]);
         days1.push(key);
@@ -1316,7 +1324,6 @@ BaseUtils.summaryDurationResult = (result, duration, summaryType, summaryMethod,
   //     }
   //   }
   // }
-
   if (summaryType === CHART_SUMMARY_TYPE.ADVANCED) {
     comparedValue = _BaseUtils.getSummaryResult(comparedValue, summaryMethod);
     compareValue = _BaseUtils.getSummaryResult(compareValue, summaryMethod);

package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js

@@ -5,6 +5,8 @@ import { isArrayCellValue } from '../../cell-value-utils';
 import { getFormattedLabel, isValidRow } from '../../row-utils';
 import BaseUtils from '../base-utils';
 import { summaryMethodColumn2SqlColumn } from '../../sql/column-2-sql-column';
+
+// one
 async function calculateOneDimensionTable(chart, value, _ref) {
   let {
     getViewRows,
@@ -56,7 +58,7 @@ async function calculateOneDimensionTable(chart, value, _ref) {
       }
     }
   });
-  const summary_columns_option_keys = Array.isArray(summary_columns) ? summary_columns.map(option => option.key) : [];
+  const summary_columns_option_keys = Array.isArray(summary_columns) ? summary_columns.map(option => option.column_key) : [];
   const statisticColumnKeys = [summary_column_key, ...summary_columns_option_keys];
   const validStatisticColumnKeys = statisticColumnKeys;
   let statisticColumns = validStatisticColumnKeys.map(key => {
@@ -70,7 +72,7 @@ async function calculateOneDimensionTable(chart, value, _ref) {
   }
   Array.isArray(summary_columns) && summary_columns.forEach((option, index) => {
     if (statisticColumns[index + 1]) {
-      statisticColumns[index + 1].method = option.method;
+      statisticColumns[index + 1].method = option.summary_method;
     }
   });
   const {
@@ -205,6 +207,8 @@ function getOneDimensionTotal(columns, summary_type, formula_rows) {
     pivot_columns_total
   };
 }
+
+// two
 async function calculateTwoDimensionTable(chart, value, _ref2) {
   let {
     getViewRows,
@@ -239,34 +243,7 @@ async function calculateTwoDimensionTable(chart, value, _ref2) {
   const summaryColumn = getTableColumnByKey(table, summary_column_key);
   const statRows = await getViewRows(view, table);
   const formulaRows = await getTableFormulaResults(table, statRows);
-  const pivot_summary_multiple_columns = [];
-  Array.isArray(summary_columns) && summary_columns.forEach(item => {
-    const column = getTableColumnByKey(table, item.column_key);
-    if (column && isNumericColumn(column)) {
-      pivot_summary_multiple_columns.push({
-        key: item.column_key,
-        type: column.type,
-        data: column.data,
-        method: item.summary_method,
-        column_name: column.name
-      });
-    }
-  });
-
-  // [{key: null}, {key: cell_value}, {key: cell_value}, ...]
   let pivot_columns = [];
-
-  //  [
-  //    {
-  //      name: '',
-  //      cells: {
-  //        [key1]: {rows: [], total: ''},
-  //        [key2]: {rows: [], total: ''},
-  //        [key3]: {rows: [], total: ''},
-  //      }
-  //    },
-  //    ...
-  //  ]
   let pivot_rows = [];
   statRows.forEach(row => {
     const {
@@ -329,9 +306,10 @@ async function calculateTwoDimensionTable(chart, value, _ref2) {
     pivot_columns,
     pivot_columns_total: new_pivot_columns_total,
     pivot_table_total,
-    pivot_summary_multiple_columns,
     formulaRows,
-    dimensions: TABLE_DIMENSIONS.TWO
+    dimensions: TABLE_DIMENSIONS.TWO,
+    summary_columns: [summaryColumn, ...(summary_columns === null || summary_columns === void 0 ? void 0 : summary_columns.map(item => getTableColumnByKey(table, item.column_key)))],
+    isSingleNumericColumn: !summary_columns.length ? 'true' : 'false'
   };
 }
 function updateTwoDimensionColumns(value, pivot_columns, column, row, formulaRow, isIncludeEmpty, dateGranularity, geolocationGranularity, isRowGroupbyColumnDataAsAnArray) {
@@ -434,7 +412,7 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
               const nextValue = row[current === null || current === void 0 ? void 0 : current.column.key];
               const currentValue = Object.values(cells[key].total).find(item => item[2] === columnKey)[1];
               const computedValue = BaseUtils.getSummaryValue({
-                summaryMethod: current.summary_method,
+                summaryMethod: current.summary_method.toUpperCase(),
                 summaryColumn: current.column
               }, currentValue, nextValue);
               const columnName = current.column.name;
@@ -528,21 +506,6 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
     total
   });
 }
-function isSameName(prevName, currName) {
-  if (isNumber(prevName) && isNumber(currName)) {
-    return prevName === currName;
-  }
-  if (!prevName && !currName) {
-    return prevName === null && currName === null || prevName === undefined && currName === undefined || isNaN(prevName) && isNaN(currName);
-  }
-  return prevName === currName;
-}
-function isSameGroup(isColumnDataAsAnArray, source, target) {
-  if (isColumnDataAsAnArray) {
-    return (!source || source.length === 0) && !target || source && source.includes(target);
-  }
-  return source === null && target === null || source === undefined && target === undefined || source === target;
-}
 function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formula_rows) {
   let pivot_rows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
   let pivot_columns = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
@@ -619,6 +582,23 @@ function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formu
     pivot_table_total
   };
 }
+
+// utils
+function isSameName(prevName, currName) {
+  if (isNumber(prevName) && isNumber(currName)) {
+    return prevName === currName;
+  }
+  if (!prevName && !currName) {
+    return prevName === null && currName === null || prevName === undefined && currName === undefined || isNaN(prevName) && isNaN(currName);
+  }
+  return prevName === currName;
+}
+function isSameGroup(isColumnDataAsAnArray, source, target) {
+  if (isColumnDataAsAnArray) {
+    return (!source || source.length === 0) && !target || source && source.includes(target);
+  }
+  return source === null && target === null || source === undefined && target === undefined || source === target;
+}
 function getTotal(summary_column, summary_type, summary_method) {
   let rows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   let formula_rows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
@@ -654,6 +634,7 @@ function getTotal(summary_column, summary_type, summary_method) {
           total++;
         }
       });
+      total = getTotalByType(oldTotal, total);
       return total;
     }
     if (summary_column && isDateColumn(summary_column)) {
@@ -711,22 +692,10 @@ function getTotal(summary_column, summary_type, summary_method) {
               }
             });
             if (summary_method === 'Sum') {
-              if (Array.isArray(oldTotal)) {
-                const newTotal = JSON.parse(JSON.stringify(oldTotal));
-                newTotal[0][1] = Number.parseFloat(sum.toFixed(8));
-                total = newTotal;
-              } else {
-                total = Number.parseFloat(sum.toFixed(8));
-              }
+              total = getTotalByType(oldTotal, Number.parseFloat(sum.toFixed(8)));
             } else if (summary_method === 'Mean') {
-              if (Array.isArray(oldTotal)) {
-                const newTotal = JSON.parse(JSON.stringify(oldTotal));
-                const val = validNumbersCount === 0 ? 0 : Number.parseFloat((sum / validNumbersCount).toFixed(8));
-                newTotal[0][1] = val;
-                total = newTotal;
-              } else {
-                total = validNumbersCount === 0 ? 0 : Number.parseFloat((sum / validNumbersCount).toFixed(8));
-              }
+              const val = validNumbersCount === 0 ? 0 : Number.parseFloat((sum / validNumbersCount).toFixed(8));
+              total = getTotalByType(oldTotal, val);
             }
             break;
           }
@@ -759,15 +728,15 @@ function getTotal(summary_column, summary_type, summary_method) {
                 let formulaRow = formula_rows[result._id];
                 if (formulaRow) {
                   if (formulaRow[summary_column_key] && typeof formulaRow[summary_column_key] === 'object') {
-                    total = formulaRow[summary_column_key][0];
+                    total = getTotalByType(oldTotal, formulaRow[summary_column_key][0]);
                   } else {
-                    total = formulaRow[summary_column_key];
+                    getTotalByType(oldTotal, formulaRow[summary_column_key]);
                   }
                 } else {
-                  total = null;
+                  total = getTotalByType(oldTotal, null);
                 }
               } else {
-                total = result[summary_column_key];
+                total = getTotalByType(oldTotal, result[summary_column_key]);
               }
             }
             break;
@@ -781,7 +750,7 @@ function getTotal(summary_column, summary_type, summary_method) {
   }
   // formula_rows result can be '#VALUE!'
   if (total === '#VALUE!') {
-    total = 0;
+    total = getTotalByType(oldTotal, 0);
   }
   return total || 0;
 }
@@ -831,6 +800,18 @@ function getDateMaxOrMinTotal(dateArr, type) {
   dateIndex = list.indexOf(dateValue);
   return dateArr[dateIndex];
 }
+function getTotalByType(oldTotal, value) {
+  let newTotal = '';
+  if (Array.isArray(oldTotal)) {
+    newTotal = JSON.parse(JSON.stringify(oldTotal));
+    newTotal[0][1] = value;
+  } else {
+    newTotal = value;
+  }
+  return newTotal;
+}
+
+// index
 function calculator(chart, value, _ref3) {
   let {
     getViewRows,

package/dist/utils/column-utils.js

@@ -317,7 +317,7 @@ export const getSqlGroup = (column, groupBy) => {
   const type = (column === null || column === void 0 ? void 0 : column.type) || '';
   if (type === CellType.CTIME || type === CellType.MTIME || type === CellType.DATE) {
     const dateGranularity = (groupBy['date_granularity'] || '').toUpperCase();
-    if (dateGranularity === 'DAY') {
+    if (['DAY', 'DAYS_7', 'DAYS_30'].includes(dateGranularity)) {
       return "ISODATE(".concat(validColumnName, ")");
     }
     if (dateGranularity === 'WEEK') {

package/dist/utils/index.js

@@ -12,6 +12,30 @@ export { getDateColumnFormat, isCheckboxColumn, getColumnByKey, isStatisticMapCo
 export { generatorKey } from './key-generator';
 export { translateCalendar } from './date-translate';
 export { isFunction } from './common-utils';
+export function getMapCanvasStyle(container, ratio) {
+  let cWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+  let cHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 200;
+  let width, height;
+  let containerWidth, containerHeight;
+  if (!container) {
+    containerWidth = cWidth;
+    containerHeight = cHeight;
+  } else {
+    containerWidth = container.clientWidth;
+    containerHeight = container.clientHeight;
+  }
+  if (containerWidth / containerHeight >= ratio) {
+    width = containerHeight * ratio;
+    height = containerHeight;
+  } else {
+    width = containerWidth;
+    height = containerWidth / ratio;
+  }
+  return {
+    width,
+    height
+  };
+}
 export const getErrorMessage = err => {
   if (!err.response) {
     return intl.get('Network_error');

package/dist/utils/sql/column-2-sql-column.js

@@ -20,7 +20,7 @@ export const column2SqlColumn = function (column) {
     case CellType.CTIME:
       {
         const validDateGranularity = dateGranularity && dateGranularity.toUpperCase();
-        if (validDateGranularity === 'DAY') {
+        if (['DAY', 'DAYS_7', 'DAYS_30'].includes(validDateGranularity)) {
           const sqlColumnName = "ISODATE(".concat(validColumnName, ")");
           return {
             name: sqlColumnName,

package/dist/view/wrapper/map.js

@@ -8,6 +8,7 @@ import { Chart } from '../../utils/custom-g2';
 import fetchMapJson from '../../services/map-json';
 import { COLOR_OPTIONS } from '../../constants/color-rules';
 import context from '../../context';
+import { getMapCanvasStyle } from '../../utils';
 const CHART_STYLE_CONFIG = {
   'g2-tooltip': {
     borderRadius: '2px',
@@ -22,11 +23,15 @@ const getDefaultChartStyleByKey = key => {
   return CHART_STYLE_CONFIG[key] || {};
 };
 function createChart(container) {
+  // width / height = 1.5 for chinese map
+  const {
+    width,
+    height
+  } = getMapCanvasStyle(container, 1.5);
   let config = {
     container: container,
-    autoFit: true,
-    width: '100%',
-    height: '100%'
+    width,
+    height
   };
   return new Chart(config);
 }
@@ -258,6 +263,20 @@ export default function Map(props) {
     statisticView.render();
     return statisticView;
   }, [bubble_color, data_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
+  useEffect(() => {
+    const handleResize = () => {
+      const container = chartContainerRef.current;
+      const {
+        width,
+        height
+      } = getMapCanvasStyle(container, 1.5);
+      chartRef.current.changeSize(width, height);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   // used to fetch mapJson data
   useEffect(() => {
@@ -332,6 +351,11 @@ export default function Map(props) {
     className: 'statistic-chart-loading-container'
   }, /*#__PURE__*/React.createElement(_Loading, null)), /*#__PURE__*/React.createElement("div", {
     className: classnames('sea-chart-container '),
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
     ref: chartContainerRef
   }));
 }

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

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

package/dist/view/wrapper/trend.js

@@ -93,7 +93,7 @@ class Trend extends Component {
         }, resultText);
       }
       if (labelFontSize <= 12) {
-        if (!result) return '';
+        if (!result && result !== 0) return '';
         return /*#__PURE__*/React.createElement("span", {
           style: {
             fontSize: "".concat(labelFontSize, "px"),
@@ -116,7 +116,7 @@ class Trend extends Component {
           style: {
             color: "".concat(color)
           }
-        }, result ? Number.parseFloat(result * 100).toFixed(2) : '', "%"));
+        }, result || result === 0 ? Number.parseFloat(result * 100).toFixed(2) : '', "%"));
       }
       const resultContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         style: {
@@ -131,7 +131,7 @@ class Trend extends Component {
           whiteSpace: 'nowrap',
           marginRight: '16px'
         }
-      }, !result ? '' : /*#__PURE__*/React.createElement("i", {
+      }, !result && result !== 0 ? '' : /*#__PURE__*/React.createElement("i", {
         style: {
           flexShrink: '0',
           flexBasis: 'auto',
@@ -151,7 +151,7 @@ class Trend extends Component {
           color: color,
           marginRight: '0px'
         }
-      }, result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '')), /*#__PURE__*/React.createElement("span", {
+      }, result || result === 0 ? Number.parseFloat(result * 100).toFixed(2) + '%' : '')), /*#__PURE__*/React.createElement("span", {
         style: {
           color: labelFontColor,
           fontWeight: labelFontWeight,

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

@@ -3,9 +3,10 @@ import DataSet from '@antv/data-set/lib/index';
 import { getNumberDisplayString } from 'dtable-utils';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash-es';
+import { Chart } from '@antv/g2';
 import intl from '../../intl';
 import fetchMapJson from '../../services/map-json';
-import { BaseUtils } from '../../utils';
+import { BaseUtils, getMapCanvasStyle } from '../../utils';
 import { COLOR_OPTIONS } from '../../constants/color-rules';
 import { CHART_SUMMARY_TYPE, MAP_LEVEL, CHART_TYPE, TITLE_AMOUNT, DEFAULT_NUMBER_FORMAT_OBJECT } from '../../constants';
 import context from '../../context';
@@ -16,9 +17,12 @@ class WorldMap extends ChartComponent {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
+      const container = this.container;
+      const {
+        width,
+        height
+      } = getMapCanvasStyle(container, 2.1);
+      this.chart && this.chart.changeSize(width, height);
     };
     this.queryMapJson = async () => {
       const mediaUrl = context.getSetting('mediaUrl');
@@ -77,23 +81,20 @@ class WorldMap extends ChartComponent {
       }
       return statisticNewData;
     };
+    this.initChart = container => {
+      const {
+        width,
+        height
+      } = getMapCanvasStyle(container, 2.1);
+      let config = {
+        container: container,
+        width,
+        height
+      };
+      this.chart = new Chart(config);
+    };
     this.createChart = () => {
-      const containerWidth = this.container.clientWidth - 40; // 40: padding
-      const containerHeight = this.container.clientHeight - 40;
-      let h = containerHeight;
-      let w = h * (WIDTH / HEIGHT);
-      if (w > containerWidth) {
-        w = containerWidth;
-        h = w * (HEIGHT / WIDTH);
-      }
-      const horizontalPadding = (containerWidth - w) / 4;
-      const leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
-      const appendPadding = [0, horizontalPadding, 0, leftPadding];
-      this.initChart(this.container, {
-        appendPadding,
-        width: containerWidth,
-        height: containerHeight
-      });
+      this.initChart(this.container);
       this.chart.on('element:click', e => {
         const {
           result
@@ -325,6 +326,8 @@ class WorldMap extends ChartComponent {
   }
   componentDidMount() {
     this.queryMapJson();
+    this.debouncedHandleResize = debounce(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -332,8 +335,6 @@ class WorldMap extends ChartComponent {
       this.createChart();
       this.drawChart();
     }
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
@@ -341,7 +342,12 @@ class WorldMap extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container ",
+      className: "sea-chart-container",
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
       ref: ref => this.container = ref
     });
   }

package/package.json

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