sea-chart 0.0.47-alpha.0 → 0.0.47-alpha.2

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

@@ -1,8 +1,8 @@
 var _SQLStatisticsUtils;
 import dayjs from 'dayjs';
-import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber } from 'dtable-utils';
+import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, DateUtils } from 'dtable-utils';
 import { isObject } from 'lodash';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
 import context from '../../context';
@@ -14,7 +14,7 @@ import BaseUtils from './base-utils';
 class SQLStatisticsUtils {}
 _SQLStatisticsUtils = SQLStatisticsUtils;
 SQLStatisticsUtils.dataSources = 'sql_statistics';
-SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables) => {
+SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables, dateGranularity) => {
   const collaborators = context.getCollaboratorsFromCache();
   const {
     type,
@@ -22,11 +22,21 @@ SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables) => {
   } = column;
   switch (type) {
     case CellType.TEXT:
+      {
+        return cellValue || null;
+      }
     case CellType.DATE:
     case CellType.CTIME:
     case CellType.MTIME:
       {
-        return cellValue || null;
+        if (!dateGranularity) {
+          return cellValue || null;
+        }
+        if (dateGranularity.toUpperCase() === 'QUARTER') {
+          // TODO: fix the unknown word 'QUARTAR'
+          return DateUtils.getDateByGranularity(cellValue, 'QUARTAR');
+        }
+        return DateUtils.getDateByGranularity(cellValue, dateGranularity);
       }
     case CellType.NUMBER:
       {
@@ -830,7 +840,8 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
     x_axis_compared_date_range_end,
     y_axis_summary_type,
     y_axis_summary_method,
-    display_increase
+    display_increase,
+    x_axis_date_granularity
   } = config;
   const groupName1 = "".concat(x_axis_date_range_start, " - ").concat(x_axis_date_range_end);
   const groupName2 = "".concat(x_axis_compared_date_range_start, " - ").concat(x_axis_compared_date_range_end);
@@ -839,7 +850,7 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
   const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
   sqlRows.forEach(item => {
     const name = item[sqlGroupbyColumnKey];
-    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, tables);
+    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, tables, x_axis_date_granularity);
     const value = item[sqlSummaryColumnKey];
     if (name >= x_axis_date_range_start && name <= x_axis_date_range_end) {
       const currentValue = dateRangeResult.get(label);

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

@@ -1,4 +1,5 @@
 import { CellType, filter2SqlCondition, isNumericColumn, isDateColumn } from 'dtable-utils';
+import dayjs from 'dayjs';
 import { getSqlGroup } from '../column-utils';
 import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE } from '../../constants';
 import { fixGeoGranularity } from '../map';
@@ -311,11 +312,14 @@ class ChartDataSQL {
     this._compare_chart_statistic_2_sql = () => {
       const {
         x_axis_column_key,
-        x_axis_date_granularity,
         x_axis_geolocation_granularity,
         y_axis_summary_type,
         y_axis_summary_column_key,
-        y_axis_summary_method
+        y_axis_summary_method,
+        x_axis_date_range_start,
+        x_axis_date_range_end,
+        x_axis_compared_date_range_start,
+        x_axis_compared_date_range_end
       } = this.chart;
       const groupby_column = this._get_column_by_key(x_axis_column_key);
       if (!groupby_column) {
@@ -324,7 +328,7 @@ class ChartDataSQL {
       }
       this._update_filter_sql(true, groupby_column);
       const groupby_column_name = this._chart_column_name_to_sql(groupby_column, {
-        'date_granularity': x_axis_date_granularity,
+        'date_granularity': 'day',
         'geolocation_granularity': x_axis_geolocation_granularity
       });
       let summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
@@ -336,7 +340,16 @@ class ChartDataSQL {
         }
         summary_column_name = this._summary_column_2_sql(y_axis_summary_method.toUpperCase(), summary_column);
       }
-      return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
+
+      // filter
+      let filter_sql = this.filter_sql;
+      if (x_axis_date_range_start && x_axis_date_range_end && x_axis_compared_date_range_start && x_axis_compared_date_range_end) {
+        filter_sql = this.filter_sql.length === 0 ? 'where ' : this.filter_sql + ' AND';
+        const formattedXAxisDateRangeEnd = dayjs(x_axis_date_range_end).add(1, 'days').format('YYYY-MM-DD');
+        const formattedXAxisComparedDateRangeEnd = dayjs(x_axis_compared_date_range_end).add(1, 'days').format('YYYY-MM-DD');
+        filter_sql = filter_sql + " ((".concat(groupby_column.name, " >= '").concat(x_axis_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisDateRangeEnd, "') Or (").concat(groupby_column.name, " >= '").concat(x_axis_compared_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisComparedDateRangeEnd, "'))");
+      }
+      return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
     };
     this._combination_chart_statistic_2_sql = () => {
       const x_axis_column_key = this.chart['x_axis_column_key'] || '';

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

@@ -281,16 +281,22 @@ const pieChartStatisticColumn2sqlColumn = (chart, table) => {
   };
 };
 const basicChartStatisticColumn2sqlColumn = (chart, table) => {
+  let {
+    x_axis_date_granularity
+  } = chart;
   const {
+    type,
     x_axis_column_key,
     y_axis_summary_type,
     y_axis_summary_method,
     y_axis_summary_column_key,
-    x_axis_date_granularity,
     x_axis_geolocation_granularity
   } = chart;
   const groupbyColumn = getTableColumnByKey(table, x_axis_column_key);
   if (!groupbyColumn) return {};
+  if (type === CHART_TYPE.COMPARE_BAR) {
+    x_axis_date_granularity = 'DAY';
+  }
   const {
     key: sqlGroupbyColumnKey
   } = column2SqlColumn(groupbyColumn, {

package/dist/view/wrapper/chart-component.js

@@ -548,7 +548,7 @@ export default class ChartComponent extends Component {
         showMarkers: true,
         marker: {
           strokeOpacity: 0,
-          r: 6
+          r: 5
         },
         crosshairs: {
           line: {

package/dist/view/wrapper/combination.js

@@ -262,7 +262,7 @@ class Combination extends ChartComponent {
           duration: 1000,
           easing: 'easeLinear'
         }
-      }).shape('circle').size(4).style({
+      }).shape('circle').size(3).style({
         stroke: 0,
         fillOpacity: 1
       }).label(display_data ? 'value_right' : false, {
@@ -371,9 +371,9 @@ class Combination extends ChartComponent {
         //   fillOpacity: 0.3,
         // });
         point.style('name', name => {
-          let r = 4;
+          let r = 3;
           if (name === e.data.data.name) {
-            r = 8;
+            r = 5;
           }
           return {
             r,
@@ -391,7 +391,7 @@ class Combination extends ChartComponent {
         //   fillOpacity: 1,
         // });
         point.style('name', name => {
-          let r = 4;
+          let r = 3;
           return {
             r,
             stroke: 0,

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

@@ -106,7 +106,7 @@ class LineGroup extends ChartComponent {
             duration: 1000,
             easing: 'easeLinear'
           }
-        }).shape('circle').size(4).style({
+        }).shape('circle').size(3).style({
           stroke: 0,
           fillOpacity: 1
         });

package/dist/view/wrapper/line.js

@@ -100,7 +100,7 @@ class Line extends ChartComponent {
             duration: 1000,
             easing: 'easeLinear'
           }
-        }).shape('circle').size(4).style({
+        }).shape('circle').size(3).style({
           stroke: 0,
           fillOpacity: 1
         });

package/package.json

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