sea-chart 2.0.31 → 2.0.32

package/dist/components/types-dialog/index.js

@@ -69,7 +69,7 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart', 'Gauge'].includes(item.name));
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

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

@@ -1106,6 +1106,7 @@ class ChartComponent extends _react.Component {
       });
     };
     this.getLegendR = chart => {
+      if (!chart) return 3;
       const {
         config
       } = chart;

package/dist/view/wrapper/dashboard.js

@@ -0,0 +1,223 @@
+"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 _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Dashboard extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        result: data,
+        customRender
+      } = this.props;
+      this.draw(data);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.draw = data => {
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const value = Number(data) * 100;
+      const formatValue = value >= 100 ? 100 : value.toFixed(1);
+      const innerRadius = Math.min(chartWidth, chartHeight) / 2 * 0.7;
+      const outerRadius = Math.min(chartWidth, chartHeight) / 2 * 0.75;
+      const startAngle = -(Math.PI / 2 + 0.5);
+      const endAngle = Math.PI / 2 + 0.5;
+
+      // Ring and Arc
+      const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle);
+      const xScale = d3.scaleLinear().domain([0, 100]).range([startAngle, endAngle]);
+
+      // Draw Ring
+      this.chart.append('g').attr('class', 'content-wrapper').append('path').attr('class', 'completed-path').attr('opacity', 1).attr('fill', '#1890FF').attr('d', () => arc()).call(g => {
+        var _g$node$parentNode;
+        const {
+          width,
+          height
+        } = (_g$node$parentNode = g.node().parentNode) === null || _g$node$parentNode === void 0 ? void 0 : _g$node$parentNode.getBoundingClientRect();
+        const left = width / 2 + insertPadding;
+        const top = height / 2 + insertPadding;
+        const offsetX = (chartWidth - insertPadding - insertPadding - width) / 2;
+        const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
+        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+
+        // Draw uncompleted path
+        if (formatValue < 100) {
+          const unCompletedStartAngle = xScale(formatValue);
+          this.drawUncompletedPath(g.node().parentNode, innerRadius, outerRadius, unCompletedStartAngle, endAngle);
+        }
+
+        // Draw ticks
+        this.drawTicks(left, offsetX, top, offsetY, startAngle, endAngle, arc);
+
+        // Draw pointer
+        this.drawPointer(g.node().parentNode, xScale, formatValue);
+
+        // Draw total
+        this.drawTotal(g.node().parentNode, formatValue);
+      });
+    };
+    this.drawTicks = (left, offsetX, top, offsetY, startAngle, endAngle, arc) => {
+      const {
+        globalTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const ticks = Array.from({
+        length: 51
+      }, (_, i) => i);
+      const lineInnerRadius = arc.innerRadius()();
+      const x = d3.scaleBand().domain(ticks).range([startAngle, endAngle]).paddingInner(1).paddingOuter(0);
+      this.chart.append('g').attr('class', 'ticks-line-wrapper').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(x.domain()).join('g').attr('transform', (d, index) => {
+        return "\n        rotate(".concat(x(d) * 180 / Math.PI - 90, ")\n        translate(").concat(lineInnerRadius, ",0)\n      ");
+      }).attr('data-value', d => d).call(g => {
+        g.nodes().forEach(group => {
+          const value = Number(group.getAttribute('data-value'));
+          // line
+          d3.select(group).append('line').attr('x2', () => value % 5 === 0 ? -15 : -10).attr('stroke', () => value % 5 === 0 ? '#CBCBCB' : '#545454');
+
+          // text
+          if (value % 5 === 0) {
+            const text = value / 5;
+            const rotateVal = ((x(value) + x.bandwidth() / 2) * 180 / Math.PI - 90) * -1; // -1 is Rotate the text
+            d3.select(group).append('text').attr('transform', () => {
+              if (x(value) <= -(Math.PI / 4)) {
+                return "translate(-25,-5) rotate(".concat(rotateVal, ")");
+              }
+              if (x(value) <= 0) {
+                return "translate(-30,-5) rotate(".concat(rotateVal, ")");
+              }
+              if (x(value) <= Math.PI / 4) {
+                return "translate(-30,-2) rotate(".concat(rotateVal, ")");
+              }
+              if (x(value) <= Math.PI) {
+                return "translate(-30,3) rotate(".concat(rotateVal, ")");
+              }
+            }).text(text).attr('fill', theme.textColor);
+          }
+        });
+      });
+    };
+    this.drawPointer = (wrapper, xScale, formatValue) => {
+      const rotate = xScale(formatValue) * 180 / Math.PI;
+
+      // Circle
+      d3.select(wrapper).append('g').attr('class', 'pointer-circle-wrapper').append('circle').attr('cx', 0).attr('cy', 0).attr('r', 10).attr('fill', 'white').attr('stroke', '#1890FF').attr('stroke-width', 5);
+
+      // Pointer
+      d3.select(wrapper).append('g').attr('class', 'pointer-wrapper').append('rect').attr('x', -2).attr('y', -78).attr('width', 6).attr('height', 70).attr('fill', '#1890FF').attr('rx', 3).attr('transform', () => {
+        return "rotate(".concat(rotate, ")");
+      });
+    };
+    this.drawUncompletedPath = (wrapper, innerRadius, outerRadius, startAngle, endAngle) => {
+      const uncompletedArc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle);
+      d3.select(wrapper).append('path').attr('class', 'uncompleted-path').attr('opacity', 1).attr('d', () => uncompletedArc()).attr('fill', '#CBCBCB');
+    };
+    this.drawTotal = (wrapper, formatValue) => {
+      const {
+        chart,
+        globalTheme
+      } = this.props;
+      const {
+        name
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        height: chartHeight
+      } = this.chartBoundingClientRect;
+      const totalWrapper = d3.select(wrapper).append('g').attr('class', 'total-wrapper');
+      // title
+      totalWrapper.append('text').attr('fill', '#545454').attr('font-size', chartHeight > 240 ? 20 : 12).text(name).attr('dy', 50).call(g => {
+        const {
+          width
+        } = g.node().getBoundingClientRect();
+        g.attr('dx', "".concat(-(width / 2)));
+      });
+
+      // total
+      totalWrapper.append('text').attr('fill', theme.textColor).attr('font-size', chartHeight > 240 ? 36 : 16).text("".concat(formatValue, "%")).attr('dx', -10).attr('dy', 90).call(g => {
+        const {
+          width
+        } = g.node().getBoundingClientRect();
+        g.attr('dx', "".concat(-(width / 2)));
+      });
+    };
+    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)) {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.destroyChart();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Dashboard.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.number,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = Dashboard;

package/dist/view/wrapper/index.js

@@ -36,6 +36,7 @@ var _mapWorld = _interopRequireDefault(require("./map-world"));
 var _mapWorldBubble = _interopRequireDefault(require("./map-world-bubble"));
 var _heatMap = _interopRequireDefault(require("./heat-map"));
 var _mirror = _interopRequireDefault(require("./mirror"));
+var _dashboard = _interopRequireDefault(require("./dashboard"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
 const Wrapper = _ref => {
@@ -295,6 +296,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.DASHBOARD:
+        {
+          return /*#__PURE__*/_react.default.createElement(_dashboard.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",