sea-chart 2.0.37 → 2.0.38

package/dist/view/wrapper/trend.js

@@ -1,21 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants = require("../../constants");
-class Trend extends _react.Component {
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { BaseUtils } from '../../utils';
+import intl from '../../intl';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, TREND_TYPES } from '../../constants';
+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.default.get(_constants.EMPTY_NAME);
+      if (!data && data !== 0) return intl.get(EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -23,8 +33,8 @@ class Trend extends _react.Component {
       const {
         summary_method
       } = chart.config;
-      if (summary_method !== _constants.BASIC_NUMBER_CARD_CALCULATION_METHOD) {
-        const formattedContent = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+      if (summary_method !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        const formattedContent = BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
         return formattedContent;
       }
       let string = data + '';
@@ -63,20 +73,20 @@ class Trend extends _react.Component {
         date_granularity
       } = config;
       let conjunctions = '';
-      if (date_granularity === _constants.CHART_SUMMARY_TYPE.YEAR) {
-        conjunctions = _intl.default.get('The_year_before_last');
-      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.QUARTER) {
-        conjunctions = _intl.default.get('The_quarter_before_last');
-      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.MONTH) {
-        conjunctions = _intl.default.get('The_month_before_last');
-      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.WEEK) {
-        conjunctions = _intl.default.get('The_week_before_last');
+      if (date_granularity === CHART_SUMMARY_TYPE.YEAR) {
+        conjunctions = intl.get('The_year_before_last');
+      } else if (date_granularity === CHART_SUMMARY_TYPE.QUARTER) {
+        conjunctions = intl.get('The_quarter_before_last');
+      } else if (date_granularity === CHART_SUMMARY_TYPE.MONTH) {
+        conjunctions = intl.get('The_month_before_last');
+      } else if (date_granularity === CHART_SUMMARY_TYPE.WEEK) {
+        conjunctions = intl.get('The_week_before_last');
       } else if (date_granularity === 'days_7') {
-        conjunctions = _intl.default.get('Previous_7_days');
+        conjunctions = intl.get('Previous_7_days');
       } else if (date_granularity === 'days_30') {
-        conjunctions = _intl.default.get('Previous_30_days');
+        conjunctions = intl.get('Previous_30_days');
       } else {
-        conjunctions = _intl.default.get('The_day_before_yesterday');
+        conjunctions = intl.get('The_day_before_yesterday');
       }
       const {
         result,
@@ -84,81 +94,81 @@ class Trend extends _react.Component {
         previous
       } = data || {};
       let color, icon;
-      if (type === _constants.TREND_TYPES.UP) {
+      if (type === TREND_TYPES.UP) {
         color = '#34aa95';
         icon = 'dtable-icon-up1';
       }
-      if (type === _constants.TREND_TYPES.DOWN) {
+      if (type === TREND_TYPES.DOWN) {
         color = '#fa5757';
         icon = 'dtable-icon-down1';
       }
-      if (type === _constants.TREND_TYPES.EQUAL) {
+      if (type === TREND_TYPES.EQUAL) {
         color = '#666666';
         icon = 'dtable-icon-narrow';
       }
       if (labelFontSize <= 12) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return /*#__PURE__*/React.createElement("span", {
           style: {
-            fontSize: "".concat(labelFontSize, "px"),
+            fontSize: `${labelFontSize}px`,
             width: '100%'
           }
-        }, /*#__PURE__*/_react.default.createElement("i", {
+        }, /*#__PURE__*/React.createElement("i", {
           style: {
-            color: "".concat(color),
+            color: `${color}`,
             display: 'inline-block',
-            width: "".concat(1.5 * labelFontSize, "px"),
-            height: "".concat(1.5 * labelFontSize, "px"),
-            lineHeight: "".concat(1.5 * labelFontSize, "px"),
+            width: `${1.5 * labelFontSize}px`,
+            height: `${1.5 * labelFontSize}px`,
+            lineHeight: `${1.5 * labelFontSize}px`,
             borderRadius: '50%',
-            backgroundColor: "".concat(color, "26"),
+            backgroundColor: `${color}26`,
             textAlign: 'center',
             marginRight: '8px',
             fontWeight: 'bold',
             fontSize: '10px'
           },
-          className: "dtable-font ".concat(icon)
-        }), /*#__PURE__*/_react.default.createElement("span", {
+          className: `dtable-font ${icon}`
+        }), /*#__PURE__*/React.createElement("span", {
           style: {
-            color: "".concat(color)
+            color: `${color}`
           }
         }, result));
       }
-      const resultContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      const resultContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         style: {
           display: 'flex',
           flexWrap: 'wrap',
           justifyContent: label_text_align,
-          fontSize: "".concat(labelFontSize, "px"),
+          fontSize: `${labelFontSize}px`,
           width: '100%'
         }
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         style: {
           whiteSpace: 'nowrap',
           marginRight: '16px'
         }
-      }, /*#__PURE__*/_react.default.createElement("i", {
+      }, /*#__PURE__*/React.createElement("i", {
         style: {
           flexShrink: '0',
           flexBasis: 'auto',
           color: color,
           display: 'inline-block',
-          width: "".concat(1.5 * labelFontSize, "px"),
-          height: "".concat(1.5 * labelFontSize, "px"),
-          lineHeight: "".concat(1.5 * labelFontSize, "px"),
+          width: `${1.5 * labelFontSize}px`,
+          height: `${1.5 * labelFontSize}px`,
+          lineHeight: `${1.5 * labelFontSize}px`,
           borderRadius: '50%',
-          backgroundColor: "".concat(color, "26"),
+          backgroundColor: `${color}26`,
           textAlign: 'center',
           marginRight: '8px',
           fontWeight: 'bold',
           fontSize: '11px'
         },
-        className: "dtable-font ".concat(icon)
-      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: `dtable-font ${icon}`
+      }), /*#__PURE__*/React.createElement("span", {
         style: {
           color: color,
           marginRight: '0px'
         }
-      }, result)), /*#__PURE__*/_react.default.createElement("span", {
+      }, result)), /*#__PURE__*/React.createElement("span", {
         style: {
           color: labelFontColor,
           fontWeight: labelFontWeight,
@@ -174,7 +184,7 @@ class Trend extends _react.Component {
       chart,
       result
     } = this.props;
-    const theme = _constants.CHART_THEME_COLOR[globalTheme];
+    const theme = CHART_THEME_COLOR[globalTheme];
     const {
       config
     } = chart;
@@ -190,30 +200,35 @@ class Trend extends _react.Component {
       label_font_weight
     } = config;
     const latest = result && result.latest;
-    const content = summary_method === _constants.CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
+    const content = summary_method === CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
     const labelContent = this.createLabelContent(result, label_text_align, label_font_size, label_font_color, label_font_weight);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container', 'plugin-number-card-trend')
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('sea-chart-container', 'plugin-number-card-trend')
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         color: theme.cardColor,
         width: '100%',
         height: '100%',
         position: 'relative'
       }
-    }, /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/React.createElement("p", {
       style: {
         position: 'absolute',
         width: '100%',
         top: 'calc((100% - 25px)/2)',
         transform: 'translateY(-50%)',
-        fontSize: "".concat(num_font_size, "px"),
+        fontSize: `${num_font_size}px`,
         margin: '-8px 0 2px 0',
-        textAlign: "".concat(num_text_align),
-        fontWeight: "".concat(num_font_weight),
-        color: "".concat(num_font_color)
+        textAlign: `${num_text_align}`,
+        fontWeight: `${num_font_weight}`,
+        color: `${num_font_color}`
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: this.handleClickNumber,
+      style: {
+        cursor: 'pointer'
       }
-    }, content), /*#__PURE__*/_react.default.createElement("p", {
+    }, content)), /*#__PURE__*/React.createElement("p", {
       className: "label-content",
       style: {
         position: 'absolute',
@@ -224,4 +239,4 @@ class Trend extends _react.Component {
     }, labelContent)));
   }
 }
-var _default = exports.default = Trend;
+export default Trend;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.37",
+  "version": "2.0.38",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -9,23 +9,27 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@seafile/seafile-calendar": "^1.0.8",
     "@seafile/seafile-editor": "^3.0.26",
+    "axios": "~1.15.*",
     "classnames": "^2.3.2",
     "d3": "~7.9.0",
     "dayjs": "1.10.7",
     "is-hotkey": "0.2.0",
     "lodash-es": "^4.17.21",
     "rc-slider": "^10.5.0",
-    "reactstrap": "~9.2.3",
+    "react-i18next": "^14.1.2",
+    "reactstrap": "9.2.3",
     "shallowequal": "^1.1.0",
     "slugid": "~5.0.1",
     "topojson": "^3.0.2"
   },
   "peerDependencies": {
-    "dtable-ui-component": "~6.0.110",
+    "@antv/scale": "0.3.14",
+    "d3-composite-projections": "~1.4.*",
+    "dtable-ui-component": "~6.0.*",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "scripts": {
     "clean": "rimraf dist && mkdirp dist",
@@ -81,7 +85,6 @@
     "@types/jest": "29.0.0",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
     "@typescript-eslint/parser": "^2.2.0",
-    "axios": "^1.6.0",
     "babel-eslint": "10.0.3",
     "babel-jest": "26.6.3",
     "babel-loader": "8.0.6",
@@ -98,7 +101,8 @@
     "css-minimizer-webpack-plugin": "5.0.1",
     "dotenv": "6.2.0",
     "dotenv-expand": "5.1.0",
-    "dtable-store": "~4.3.18",
+    "dtable-store": "~6.0.11",
+    "dtable-ui-component": "6.0.110",
     "ejs": "3.1.10",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.2",
@@ -114,7 +118,7 @@
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
     "jest": "26.6.3",
-    "koa": "2.16.0",
+    "koa": "2.16.1",
     "koa-router": "7.3.0",
     "koa-send": "5.0.1",
     "koa2-cors": "2.0.6",
@@ -144,13 +148,12 @@
     "rimraf": "^5.0.7",
     "sass-loader": "13.3.2",
     "style-loader": "^1.0.1",
-    "svg-sprite-loader": "~6.0.11",
-    "svgo-loader": "~3.0.0",
+    "svgo-loader": "^3.0.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.1.4",
     "url-loader": "4.1.1",
     "webpack": "5.88.2",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.2.0",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-merge": "5.8.0",
     "workbox-webpack-plugin": "7.0.0"
@@ -158,4 +161,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}