sea-chart 0.0.1-beta

package/dist/view/wrapper/treemap.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import { each, pick } from '@antv/util';
+import { getEllipsisText } from '@antv/g2/esm/util/text';
+import { CHART_SUMMARY_TYPE, EMPTY_NAME } from '../../constants';
+import { ChartUtils } from '../../utils';
+import { registerGeometryLabelLayout } from '../../utils/custom-g2';
+import ChartComponent from './chart-component';
+import intl from '../../intl';
+class Treemap extends ChartComponent {
+  constructor(props) {
+    super(props);
+    // customize label layout: show ellipsis for long labels
+    this.limitInShape = (items, labels, shapes, region) => {
+      each(labels, (label, index) => {
+        const labelBBox = label.getCanvasBBox();
+        const shapeBBox = shapes[index].getBBox();
+        if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
+          const translateX = labelBBox.width - shapeBBox.width + 20;
+          const textShapes = label.findAll(shape => shape.get('type') === 'text');
+          textShapes.forEach(textShape => {
+            const style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            const textBox = textShape.getCanvasBBox();
+            const text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            textShape.attr('text', text);
+          });
+        }
+      });
+    };
+    this.createChart = () => {
+      const {
+        canvasStyle
+      } = this.props;
+      this.initChart(this.container, canvasStyle, 0);
+    };
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data,
+        chart,
+        tables,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_type,
+        summary_method
+      } = chart.config;
+      const {
+        data: newData,
+        colorSet
+      } = ChartUtils.formatPieChartData(data, chart, tables);
+      if (!Array.isArray(newData)) return;
+      const {
+        DataView
+      } = DataSet;
+      const dv = new DataView();
+      const fullData = {
+        name: 'root',
+        children: newData.map(item => {
+          let name = item.name;
+          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
+          if (name === '_Others') {
+            item.name = intl.get('Others');
+          }
+          return item;
+        })
+      };
+      dv.source(fullData, {
+        type: 'hierarchy'
+      }).transform({
+        field: 'value',
+        type: 'hierarchy.treemap',
+        tile: 'treemapResquarify',
+        as: ['x', 'y']
+      });
+      const nodes = [];
+      for (const node of dv.getAllNodes()) {
+        if (node.data.name === 'root') {
+          continue;
+        }
+        const eachNode = {
+          name: node.data.name,
+          x: node.x,
+          y: node.y,
+          value: node.data.value,
+          percent: node.data.percent,
+          original_name: node.data.original_name,
+          rows: node.data.rows || null
+        };
+        nodes.push(eachNode);
+      }
+      this.chart.data(nodes);
+      this.chart.scale({
+        x: {
+          nice: true
+        },
+        y: {
+          nice: true
+        }
+      });
+      this.chart.axis(false);
+      this.chart.legend(false);
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      this.chart.polygon().position('x*y').color('name', colorSet).tooltip('name*value*percent', (name, value, percent) => {
+        const displayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          name,
+          info: summary_type === CHART_SUMMARY_TYPE.COUNT ? "".concat(value) : "".concat(summaryColumn.name, ": ").concat(displayValue, " (").concat(percent, ")")
+        };
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).label('name', {
+        offset: 0,
+        style: {
+          textBaseline: 'middle'
+        },
+        content: obj => {
+          if (obj.name !== 'root') {
+            return obj.name;
+          }
+        },
+        layout: {
+          type: 'custom-limit-in-shape'
+        }
+      });
+      this.chart.interaction('chart-active');
+      this.chart.render();
+    };
+    this.chart = null;
+    registerGeometryLabelLayout('custom-limit-in-shape', this.limitInShape);
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.destroyChart();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-container w-100",
+      ref: ref => this.container = ref
+    });
+  }
+}
+Treemap.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object
+};
+export default Treemap;

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "sea-chart",
+  "version": "0.0.1-beta",
+  "main": "./lib/index.js",
+  "dependencies": {
+    "@antv/data-set": "0.11.8",
+    "@antv/g2": "4.1.46",
+    "@seafile/seafile-calendar": "^0.0.24",
+    "classnames": "^2.3.2",
+    "dayjs": "1.10.7",
+    "is-hotkey": "0.2.0",
+    "react-select": "5.7.0",
+    "react-sweet-progress": "^1.1.2",
+    "reactstrap": "8.9.0",
+    "shallowequal": "^1.1.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo-loader": "^3.0.0"
+  },
+  "peerDependencies": {
+    "@antv/scale": "0.3.14",
+    "babel-plugin-on-demand-loading": "^0.0.9",
+    "dtable-ui-component": "~4.4.0",
+    "dtable-utils": "~4.3.*",
+    "prop-types": "15.8.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist && mkdir dist",
+    "start.bak": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "pub:dist": "export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir dist --copy-files",
+    "eslint": "eslint --ext .jsx,.js src --max-warnings=0",
+    "lint": "lint-staged",
+    "pub:optimized": "rm dist/config.js",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run clean && npm run pub:dist",
+    "release": "release-it",
+    "start": "export NODE_ENV=development LOG_ENV=rc && node dev-server.js"
+  },
+  "lint-staged": {
+    "src/**/*.js": [
+      "eslint --ext .tsx,.ts,.js ./src",
+      "git add"
+    ]
+  },
+  "files": [
+    "assets",
+    "dist",
+    "lib",
+    "es",
+    "index.js",
+    "packagge.json"
+  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "7.22.10",
+    "@babel/core": "7.22.11",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "7.22.14",
+    "@babel/runtime": "^7.10.2",
+    "@gatsbyjs/reach-router": "^1.3.9",
+    "@svgr/webpack": "6.5.1",
+    "@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",
+    "babel-plugin-import": "^1.13.8",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
+    "browserslist": "^4.8.0",
+    "camelcase": "^5.2.0",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "clean-webpack-plugin": "4.0.0",
+    "core-js": "^3.35.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "5.0.1",
+    "dotenv": "6.2.0",
+    "dotenv-expand": "5.1.0",
+    "ejs": "3.1.8",
+    "eslint": "^6.8.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-loader": "4.0.2",
+    "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",
+    "file-loader": "6.2.0",
+    "fs-extra": "^10.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "8.0.3",
+    "identity-obj-proxy": "3.0.0",
+    "is-wsl": "^1.1.0",
+    "jest": "26.6.3",
+    "koa": "2.13.4",
+    "koa-router": "7.3.0",
+    "koa-send": "5.0.1",
+    "koa2-cors": "2.0.6",
+    "lint-staged": "14.0.0",
+    "mini-css-extract-plugin": "^1.3.5",
+    "object-assign": "4.1.1",
+    "pnp-webpack-plugin": "1.5.0",
+    "postcss": "8.4.31",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "postcss-safe-parser": "^6.0.0",
+    "prettier": "3.1.0",
+    "raf": "3.4.0",
+    "react": "17.0.0",
+    "react-app-polyfill": "^1.0.4",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "17.0.0",
+    "react-hot-loader": "4.13.1",
+    "react-mentions": "4.4.7",
+    "regenerator-runtime": "^0.14.1",
+    "release-it": "16.2.1",
+    "resolve": "1.12.0",
+    "resolve-url-loader": "5.0.0",
+    "sass-loader": "13.3.2",
+    "style-loader": "^1.0.1",
+    "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-manifest-plugin": "5.0.0",
+    "webpack-merge": "5.8.0",
+    "workbox-webpack-plugin": "7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}