sea-chart 1.1.111 → 1.1.112-alpha.2

package/dist/utils/chart-utils/original-data-utils/card-calculator.js

@@ -28,9 +28,15 @@ async function calculator(chart, dtableValue, _ref) {
       numberList.push(cellValue);
     }
   });
+  let value;
   if (summary_type === CHART_SUMMARY_TYPE.COUNT) {
-    return statRows.length;
+    value = statRows.length;
+  } else {
+    value = BaseUtils.getSummaryResult(numberList, summary_method);
   }
-  return BaseUtils.getSummaryResult(numberList, summary_method);
+  return {
+    value,
+    rows: statRows
+  };
 }
 export default calculator;

package/dist/utils/chart-utils/original-data-utils/trend-calculator.js

@@ -24,6 +24,7 @@ async function calculator(chart, value, _ref) {
   const selectedView = selectedTable && getViewById(selectedTable.views, view_id);
   const selectedColumn = getTableColumnByKey(selectedTable, date_column_key);
   const resultMap = new Map();
+  const rowsMap = new Map(); // Store rows for each time period
   let formulaRows = {};
   const rows = await getViewRows(selectedView, selectedTable);
   const numericColumn = getTableColumnByKey(selectedTable, summary_column_key);
@@ -40,6 +41,10 @@ async function calculator(chart, value, _ref) {
     const dateValue = row[selectedColumn.key];
     const label = BaseUtils.getGroupLabel(dateValue, {}, selectedColumn, granularity, '', value);
     if (dateValue) {
+      // Store rows for each time period
+      const currentRows = rowsMap.get(label) || [];
+      currentRows.push(row);
+      rowsMap.set(label, currentRows);
       if (summary_type === CHART_SUMMARY_TYPE.COUNT) {
         const currentCount = resultMap.get(label) || 0;
         resultMap.set(label, currentCount + 1);
@@ -54,7 +59,7 @@ async function calculator(chart, value, _ref) {
       }
     }
   });
-  let currentValues, previousValues;
+  let currentValues, previousValues, currentPeriodRows;
   if (date_granularity === 'days_30' || date_granularity === 'days_7') {
     const {
       compareValue: value1,
@@ -62,6 +67,20 @@ async function calculator(chart, value, _ref) {
     } = summaryDurationResult(resultMap, date_granularity, summary_type, summary_method, false);
     currentValues = value1;
     previousValues = value2;
+    // Collect rows for the current period (last 7 or 30 days)
+    currentPeriodRows = [];
+    const currentTime = dayjs();
+    const days = date_granularity === 'days_30' ? 30 : 7;
+    const formattedEndDate = currentTime.format('YYYY-MM-DD');
+    const formattedMiddleDate = currentTime.subtract(days, 'days').format('YYYY-MM-DD');
+    const endDate = dayjs(formattedEndDate);
+    const middleDate = dayjs(formattedMiddleDate);
+    rowsMap.forEach((periodRows, label) => {
+      const key = dayjs(label);
+      if (key.isValid() && key >= middleDate && key < endDate) {
+        currentPeriodRows = currentPeriodRows.concat(periodRows);
+      }
+    });
   } else {
     const {
       compareDate,
@@ -69,6 +88,7 @@ async function calculator(chart, value, _ref) {
     } = getCompareDate(date_granularity);
     currentValues = resultMap.get(compareDate);
     previousValues = resultMap.get(comparedDate);
+    currentPeriodRows = rowsMap.get(compareDate) || [];
     if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
       if (currentValues) {
         currentValues = BaseUtils.getSummaryResult(currentValues, summary_method);
@@ -109,7 +129,8 @@ async function calculator(chart, value, _ref) {
     latest: currentValues,
     previous: previousValues,
     result,
-    type
+    type,
+    rows: currentPeriodRows
   };
 }
 export default calculator;

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

@@ -1806,7 +1806,7 @@ SQLStatisticsUtils.scatterSQLResult2JavaScript = async (chart, sqlRows, chartSQL
     summaryColumn
   } = columnMap;
   // format sql rows
-  const originalSqlRows = cloneDeep(sqlRows);
+  const originalSqlRows = deepCopy(sqlRows);
   const isScatter = true;
   await BaseUtils.updateTableViewList(sqlRows, groupbyColumn, groupbyColumn.key, 'color', isScatter, true);
   await BaseUtils.updateTableViewList(sqlRows, summaryColumn, summaryColumn.key, 'color', isScatter, true);

package/dist/utils/trend-utils.js

@@ -29,7 +29,7 @@ export function getCompareDate(dateGranularity) {
       {
         var _dayOfWeekMap$firstDa;
         const firstDayOfWeek = getFirstDayOfWeekForGroupby('app');
-        const startDayIndex = (_dayOfWeekMap$firstDa = dayOfWeekMap[firstDayOfWeek]) !== null && _dayOfWeekMap$firstDa !== void 0 ? _dayOfWeekMap$firstDa : 6; // default to Saturday
+        const startDayIndex = (_dayOfWeekMap$firstDa = dayOfWeekMap[firstDayOfWeek]) !== null && _dayOfWeekMap$firstDa !== void 0 ? _dayOfWeekMap$firstDa : 0; // default to Sunday
         const currentWeek = dayjs().day(startDayIndex);
         const compareDate = dayjs(currentWeek).subtract(1, 'weeks').format('YYYY-MM-DD');
         const comparedDate = dayjs(currentWeek).subtract(2, 'weeks').format('YYYY-MM-DD');

package/dist/view/wrapper/basic-number-card.js

@@ -24,6 +24,24 @@ class BasicNumericCard extends Component {
         });
       }
     };
+    this.handleClickNumber = () => {
+      const {
+        toggleRecords,
+        result
+      } = this.props;
+      if (!toggleRecords) return;
+      if (typeof result === 'object' && result !== null && result.rows) {
+        // isCalculateByView = true: use rows of base
+        toggleRecords({
+          rows: result.rows
+        });
+      } else {
+        // isCalculateByView = false: use rows of sql query
+        toggleRecords({
+          isQueryBySql: true
+        });
+      }
+    };
     this.formatData = data => {
       if (!data && data !== 0) return intl.get(EMPTY_NAME);
       const {
@@ -98,11 +116,12 @@ class BasicNumericCard extends Component {
       label_text_align,
       label_font_weight
     } = config;
+    const numericValue = typeof result === 'object' && result !== null ? result.value : result;
     let content = null;
     if (summary_method === 'Distinct_values') {
-      content = isNumber(result) ? result : 0;
+      content = isNumber(numericValue) ? numericValue : 0;
     } else {
-      content = this.formatData(result);
+      content = this.formatData(numericValue);
     }
     return /*#__PURE__*/React.createElement("div", {
       className: "sea-chart-container plugin-number-card"
@@ -114,6 +133,7 @@ class BasicNumericCard extends Component {
         position: 'relative'
       }
     }, /*#__PURE__*/React.createElement("p", {
+      onClick: this.handleClickNumber,
       style: {
         position: 'absolute',
         width: '100%',
@@ -123,7 +143,8 @@ class BasicNumericCard extends Component {
         margin: '-8px 0 2px 0',
         textAlign: `${text_align}`,
         fontWeight: `${font_weight}`,
-        color: `${font_color}`
+        color: `${font_color}`,
+        cursor: 'pointer'
       }
     }, content), /*#__PURE__*/React.createElement("p", {
       ref: ref => this.labelRef = ref,

package/dist/view/wrapper/trend.js

@@ -6,6 +6,24 @@ import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, C
 class Trend extends Component {
   constructor() {
     super(...arguments);
+    this.handleClickNumber = () => {
+      const {
+        toggleRecords,
+        result
+      } = this.props;
+      if (!toggleRecords) return;
+      if (typeof result === 'object' && result !== null && result.rows) {
+        // isCalculateByView = true: use rows of current period
+        toggleRecords({
+          rows: result.rows
+        });
+      } else {
+        // isCalculateByView = false: use rows of sql query
+        toggleRecords({
+          isQueryBySql: true
+        });
+      }
+    };
     this.formatData = data => {
       if (!data && data !== 0) return intl.get(EMPTY_NAME);
       const {
@@ -194,6 +212,7 @@ class Trend extends Component {
         position: 'relative'
       }
     }, /*#__PURE__*/React.createElement("p", {
+      onClick: this.handleClickNumber,
       style: {
         position: 'absolute',
         width: '100%',
@@ -203,7 +222,8 @@ class Trend extends Component {
         margin: '-8px 0 2px 0',
         textAlign: `${num_text_align}`,
         fontWeight: `${num_font_weight}`,
-        color: `${num_font_color}`
+        color: `${num_font_color}`,
+        cursor: 'pointer'
       }
     }, content), /*#__PURE__*/React.createElement("p", {
       className: "label-content",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.111",
+  "version": "1.1.112-alpha.2",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -101,6 +101,7 @@
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
     "dtable-store": "~6.0.11",
+    "dtable-ui-component": "6.0.102",
     "ejs": "3.1.10",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.2",