sea-chart 1.1.64 → 2.0.0

package/dist/view/wrapper/wrappers-d3/bar.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _constants = require("../../../constants");
+var _utils = require("../../../utils");
+var _colorUtils = require("../../../utils/color-utils");
+var _intl = _interopRequireDefault(require("../../../intl"));
+var _chartComponent = _interopRequireDefault(require("../chart-component"));
+class Bar extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      this.initD3Chart(this.container);
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.getFillColor = data => {
+      const {
+        chart,
+        chartColorTheme
+      } = this.props;
+      const {
+        y_axis_label_color,
+        color_option,
+        y_axis_label_color_rules
+      } = chart.config;
+      let chartBarColor = y_axis_label_color || _constants.CHART_STYLE_COLORS[0];
+      if (chartColorTheme) {
+        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+      }
+      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(y_axis_label_color_rules);
+      const color = (0, _colorUtils.getLabelColor)({
+        chart: chart.config,
+        colorRules,
+        value: data.value
+      });
+      return color || chartBarColor;
+    };
+    this.showTooltip = (event, data, title) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: this.getFillColor(data),
+          name: data.name,
+          value: data.value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.setActiveAndInActiveState = (state, data) => {
+      const {
+        chart
+      } = this.props;
+      const paths = d3.selectAll(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id, " path"));
+      if (state === 'active') {
+        paths.nodes().forEach(path => {
+          d3.select(path).attr('opacity', 1);
+        });
+        return;
+      }
+      paths.nodes().forEach(path => {
+        if (path.id !== data.slugId) {
+          d3.select(path).attr('opacity', 0.3);
+        }
+      });
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        tables
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        y_axis_summary_type,
+        y_axis_summary_column_key,
+        y_axis_column_key,
+        y_axis_show_value,
+        label_font_size,
+        table_id,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range
+      } = chart.config;
+      const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+      const {
+        width: chartWidth,
+        height: chartHeight
+      } = this.chartBoundingClientRect;
+      const insertPadding = 30;
+      const borderRadius = 10;
+      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('id', (d, index) => d.slugId).attr('d', d => {
+        // Do not draw if the range is smaller than the minimum
+        if (!y_axis_auto_range && d.value <= y_axis_min) {
+          return '';
+        }
+        const path = d3.path();
+        const startX = x(d.name);
+        const startY = y(d.value);
+        path.moveTo(startX, startY + borderRadius);
+        path.quadraticCurveTo(startX, startY, startX + borderRadius, startY);
+        path.lineTo(startX + x.bandwidth() - borderRadius, startY);
+        path.quadraticCurveTo(startX + x.bandwidth(), startY, startX + x.bandwidth(), startY + borderRadius);
+        path.lineTo(startX + x.bandwidth(), y_axis_auto_range ? y(0) : y(y_axis_min));
+        path.lineTo(startX, y_axis_auto_range ? y(0) : y(y_axis_min));
+        path.closePath();
+        return path.toString();
+      }).call(g => {
+        const parentNode = d3.select('.rects-wrapper');
+        g.nodes().forEach(path => {
+          // Add label
+          if (y_axis_show_value) {
+            parentNode.append('text').attr('y', Number(path.dataset.y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(path.dataset.value).call(g => {
+              const {
+                width
+              } = g.node().getBoundingClientRect();
+              g.attr('x', Number(path.dataset.x) + Number(path.dataset.width) / 2 - width);
+            });
+          }
+        });
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', (event, data) => {
+        this.showTooltip(event, data, tooltipTitle);
+        this.setActiveAndInActiveState('inActive', data);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.setActiveAndInActiveState('active', data);
+      });
+      if (display_goal_line) {
+        this.chart.append('g').attr('class', 'annotation-wrapper').append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', y(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', y(goal_value)).call(g => {
+          const parentNode = d3.select('.annotation-wrapper');
+          parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', y(goal_value) - 10).attr('fill', '#666').text(goal_label);
+        });
+      }
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      var _this$chart;
+      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+  }
+}
+Bar.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = Bar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.64",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -12,26 +12,27 @@
     "@seafile/seafile-calendar": "^0.0.24",
     "@seafile/seafile-editor": "^1.0.133",
     "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",
-    "react-color": "^2.19.3",
     "react-i18next": "^14.1.2",
-    "react-select": "5.7.0",
-    "react-sweet-progress": "^1.1.2",
-    "reactstrap": "8.9.0",
+    "react-select": "~5.10.0",
+    "react-sweet-progress": "~1.1.2",
+    "reactstrap": "~9.2.3",
     "shallowequal": "^1.1.0",
+    "slugid": "~5.0.1",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^3.0.0"
   },
   "peerDependencies": {
     "@antv/scale": "0.3.14",
-    "dtable-ui-component": "^5.3.0",
+    "dtable-ui-component": "6.0.2",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "scripts": {
     "clean": "rimraf dist && mkdirp dist",
@@ -93,7 +94,7 @@
     "babel-loader": "8.0.6",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-named-asset-import": "^0.3.4",
-    "babel-preset-react-app": "^9.0.2",
+    "babel-preset-react-app": "~10.0.1",
     "browserslist": "^4.8.0",
     "camelcase": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
@@ -112,8 +113,7 @@
     "eslint-plugin-flowtype": "3.13.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint-plugin-react": "~7.37.4",
     "file-loader": "6.2.0",
     "fs-extra": "^10.1.0",
     "html-webpack-plugin": "^5.6.0",
@@ -138,14 +138,12 @@
     "postcss-preset-env": "^7.0.1",
     "postcss-safe-parser": "^6.0.0",
     "raf": "3.4.0",
-    "react": "17.0.0",
-    "react-app-polyfill": "^1.0.4",
-    "react-color": "2.19.3",
+    "react": "~18.3.1",
+    "react-app-polyfill": "~3.0.0",
+    "react-color": "~2.19.3",
     "react-cookies": "0.1.1",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "17.0.0",
-    "react-hot-loader": "4.13.1",
-    "react-mentions": "4.4.7",
+    "react-dom": "~18.3.1",
     "regenerator-runtime": "^0.14.1",
     "release-it": "16.2.1",
     "resolve": "1.12.0",