sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/bar.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodashEs = require("lodash-es");
-var _classnames = _interopRequireDefault(require("classnames"));
+var d3 = _interopRequireWildcard(require("d3"));
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorUtils = require("../../utils/color-utils");
@@ -18,124 +19,202 @@ class Bar extends _chartComponent.default {
   constructor(props) {
     super(props);
     this.handleResize = () => {
-      this.chart && this.chart.destroy();
+      this.chart.node() && this.chart.node().remove();
       this.createChart();
       this.drawChart();
     };
     this.createChart = () => {
+      this.initChart(this.container);
+    };
+    this.drawChart = () => {
       const {
-        chart
+        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_show_value
+        y_axis_label_color,
+        color_option,
+        y_axis_label_color_rules
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
-      this.initChart(this.container, {
-        appendPadding
+      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.chart.on('interval:click', e => {
-        this.props.toggleRecords(e.data.data);
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
       });
     };
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
     };
-    this.drawChart = () => {
-      let {
-        result: data
+    this.setActiveAndInActiveState = (state, data) => {
+      const {
+        chart
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.loadData(data);
-      this.draw(data);
-      requestAnimationFrame(() => {
-        this.chart.render();
-        this.renderAxisLabel(this.props.chart, this.props.tables);
+      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,
-        summaryColumn,
         globalTheme,
-        customRender,
-        chartColorTheme,
         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_summary_method,
-        y_axis_label_color,
         y_axis_show_value,
         label_font_size,
-        color_option,
-        y_axis_label_color_rules,
-        table_id
+        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 {
-        display_goal_line,
-        goal_value,
-        goal_label
-      } = chart.style_config || {};
-      // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
-      const singleBarWidth = Math.round(chartWidth / (2 * data.length));
-      const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      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 title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
-      this.drawLabels(data);
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-      this.chart.interval().label(y_axis_show_value ? 'value' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          ...this.labelStroke
+        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 '';
         }
-      }).position('name*value').size(singleBarWidth).color('value', value => {
-        const color = (0, _colorUtils.getLabelColor)({
-          chart: chart.config,
-          colorRules,
-          value
-        });
-        return color || chartBarColor;
-      }).tooltip('name*value', (name, value) => {
-        return {
-          title,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name
-        };
-      }).state({
-        active: {
-          style: {
-            stroke: null
+        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);
+            });
           }
-        }
-      }).style('value', value => {
-        return {
-          radius: [singleBarRadius, singleBarRadius, 0, 0]
-        };
+        });
+      }).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 && goal_label && goal_value) {
-        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      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.legend(false);
-      this.setToolTip();
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      this.chart.interaction('element-highlight');
     };
     this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
   }
   componentDidMount() {
     this.createChart();
@@ -153,22 +232,18 @@ class Bar extends _chartComponent.default {
     }
   }
   componentWillUnmount() {
-    var _this$chart2;
-    // chart doesn't have autoPadding before they were rendered
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
+    this.chart.node() && this.chart.node().remove();
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {
     const {
-      chart
-    } = this.props;
+      tooltipData,
+      toolTipPosition
+    } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
+      className: "sea-chart-container",
       ref: ref => this.container = ref
-    });
+    }, this.getToolTipContainer(tooltipData, toolTipPosition));
   }
 }
 Bar.propTypes = {

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

@@ -127,11 +127,11 @@ class BasicNumericCard extends _react.Component {
         width: '100%',
         top: 'calc((100% - 25px)/2)',
         transform: 'translateY(-50%)',
-        fontSize: `${font_size}px`,
+        fontSize: "".concat(font_size, "px"),
         margin: '-8px 0 2px 0',
-        textAlign: `${text_align}`,
-        fontWeight: `${font_weight}`,
-        color: `${font_color}`
+        textAlign: "".concat(text_align),
+        fontWeight: "".concat(font_weight),
+        color: "".concat(font_color)
       }
     }, content), /*#__PURE__*/_react.default.createElement("p", {
       ref: ref => this.labelRef = ref,
@@ -140,10 +140,10 @@ class BasicNumericCard extends _react.Component {
         width: '100%',
         bottom: '0px',
         margin: '0',
-        transform: currentLineHeight ? `translateY(${currentLabelHeight - currentLineHeight}px)` : '',
-        fontSize: `${card_label_font_size}px`,
-        fontWeight: `${label_font_weight}`,
-        textAlign: `${label_text_align}`,
+        transform: currentLineHeight ? "translateY(".concat(currentLabelHeight - currentLineHeight, "px)") : '',
+        fontSize: "".concat(card_label_font_size, "px"),
+        fontWeight: "".concat(label_font_weight),
+        textAlign: "".concat(label_text_align),
         color: label_font_color,
         overflow: 'hidden',
         textOverflow: 'ellipsis',

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

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
 var d3 = _interopRequireWildcard(require("d3"));
 var _lodashEs = require("lodash-es");
-var _customG = require("../../utils/custom-g2");
+var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
@@ -49,25 +48,7 @@ class ChartComponent extends _react.Component {
       const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
-    this.initChart = (container, _ref) => {
-      let {
-        appendPadding,
-        autoFit = true,
-        height = '100%',
-        width = '100%'
-      } = _ref;
-      let config = {
-        container: container,
-        autoFit: autoFit,
-        width,
-        height
-      };
-      if (appendPadding) {
-        config.appendPadding = appendPadding;
-      }
-      this.chart = new _customG.Chart(config);
-    };
-    this.initD3Chart = container => {
+    this.initChart = container => {
       const {
         width,
         height
@@ -76,14 +57,6 @@ class ChartComponent extends _react.Component {
       this.container.appendChild(this.chart.node());
       this.chartBoundingClientRect = this.chart.node().getBoundingClientRect();
     };
-    this.loadData = data => {
-      this.chart.data(data, {
-        'name': {
-          type: 'cat',
-          nice: false
-        }
-      });
-    };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
       let labels = [];
       let labelCount = Math.floor(containerWidth / minItemWidth);
@@ -252,26 +225,26 @@ class ChartComponent extends _react.Component {
       };
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
-      const xAxisID = `chart-x-axis-label_${chart.id}`;
+      const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const chartContainer = container || this.chart.getCanvas().get('container');
-      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector(`#${xAxisID}`);
+      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
-        div.innerHTML = `${column ? column.name : ''}`;
-        div.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
-      const yAxisID = `chart-y-axis-label_${chart.id}`;
-      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
+      const yAxisID = "chart-y-axis-label_".concat(chart.id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
@@ -289,7 +262,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
@@ -297,7 +270,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
@@ -406,7 +379,7 @@ class ChartComponent extends _react.Component {
     this.labelFormatter = name => {
       let label = name;
       if (name.length > 10) {
-        label = `${name.slice(0, 10)}...`;
+        label = "".concat(name.slice(0, 10), "...");
       }
       if (name === '' || name === 'undefined') {
         label = _intl.default.get(_constants.EMPTY_NAME);
@@ -542,15 +515,8 @@ class ChartComponent extends _react.Component {
     this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
       const obj = {
         showMarkers: false,
-        containerTpl: `<div class="g2-tooltip">
-        <div class="g2-tooltip-title">{title}</div>
-        <ul class="g2-tooltip-list"></ul>
-      </div>`,
-        itemTpl: `<li class="g2-tooltip-list-item">
-         <span class="g2-tooltip-marker" style="background-color:{color};display:inline-block;"></span>
-         <span class="g2-tooltip-name">{name}</span>
-         <span class="g2-tooltip-value">{value}</span>
-      </li>`,
+        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
+        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
         domStyles: {
           'g2-tooltip': {
             boxSizing: 'border-box',
@@ -638,7 +604,7 @@ class ChartComponent extends _react.Component {
       const dom = /*#__PURE__*/_react.default.createElement("div", {
         className: "sea-chart-d3-tooltip-container",
         style: {
-          transform: `translate(${offsetX + 50}px, ${offsetY}px)`
+          transform: "translate(".concat(offsetX + 50, "px, ").concat(offsetY, "px)")
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "sea-chart-d3-tooltip-title"
@@ -709,9 +675,7 @@ class ChartComponent extends _react.Component {
     this.setToolTipForTheta = () => {
       const settings = this.getToolTipSettings();
       settings.showTitle = false;
-      settings.containerTpl = `<div class="g2-tooltip">
-      <ul class="g2-tooltip-list"></ul>
-    </div>`;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
       this.chart.tooltip(settings);
     };
     this.isShowXAxisLabel = chart => {