sea-chart 0.0.19 → 0.0.21

package/dist/view/wrapper/bar-custom.js

@@ -21,7 +21,7 @@ class BarCustom extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0]; // used to display value on the top
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
       this.initChart(this.container, {
         appendPadding
       });
@@ -192,7 +192,7 @@ class BarCustom extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/bar-group.js

@@ -24,7 +24,7 @@ class BarGroup extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -209,7 +209,7 @@ class BarGroup extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/bar.js

@@ -21,7 +21,7 @@ class Bar extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0]; // used to display value on the top
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
       this.initChart(this.container, {
         appendPadding
       });
@@ -132,7 +132,7 @@ class Bar extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

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

@@ -28,7 +28,11 @@ class BasicNumericCard extends Component {
       } = chart;
       const {
         summary_method,
-        name
+        name,
+        font_size,
+        font_color,
+        label_font_size,
+        label_font_color
       } = config;
       let content = null;
       if (summary_method === 'Distinct_values') {
@@ -36,17 +40,9 @@ class BasicNumericCard extends Component {
       } else {
         content = this.formatData(result);
       }
-      const fontSize = this.getFontSize(content);
-      let labelFontSize = fontSize - 35;
-      if (labelFontSize > 20) {
-        labelFontSize = 20;
-      }
-      if (labelFontSize < 12) {
-        labelFontSize = 12;
-      }
       this.chart.annotation().html({
         position: ['50%', '50%'],
-        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
+        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(font_size, "px; color: ").concat(font_color, "; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(label_font_size, "px; color: ").concat(label_font_color, "; margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
       });
       isFunction(customRender) && customRender(this.chart);
       this.chart.render();
@@ -89,29 +85,6 @@ class BasicNumericCard extends Component {
       }
       return content;
     };
-    this.getFontSize = content => {
-      let canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const {
-        width
-      } = this.chart;
-      let font = context.font;
-      let initFontSize = 50;
-      const fontStyle = font.slice(font.indexOf('px'));
-      font = initFontSize + fontStyle;
-      context.font = font;
-      context.fontSize = initFontSize;
-      while (context.measureText(content).width >= width - 40) {
-        initFontSize -= 1;
-        context.font = initFontSize + fontStyle;
-        context.fontSize = initFontSize;
-      }
-      canvas = null;
-      if (initFontSize < 16) {
-        initFontSize = 16;
-      }
-      return initFontSize;
-    };
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {

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

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils } from '../../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE, CHART_THEME_COLOR, EMPTY_NAME, THEME_NAME_MAP } from '../../constants';
@@ -10,6 +10,15 @@ export default class ChartComponent extends Component {
     var _this;
     super(...arguments);
     _this = this;
+    this.handleResize = debounce(() => {
+      if (!this.createChart || !this.drawChart) return;
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+      if (this.needRenderAxisLabel) {
+        this.renderAxisLabel(this.props.chart, this.props.tables);
+      }
+    }, 300);
     this.initChart = (container, _ref) => {
       let {
         appendPadding,
@@ -389,12 +398,17 @@ export default class ChartComponent extends Component {
             // Draw the bottom line back to the right edge of the left semi-circle
             ['A', r, r, 0, 0, 1, x - rectWidth / 2 - 3, y - r - 1] // Draw the left semi-circle
             ];
+          },
+          style: style => {
+            // fill legend with stroke color
+            style.fill = style.stroke;
+            return style;
           }
         }
       });
     };
-    this.setToolTip = () => {
-      this.chart.tooltip({
+    this.getToolSettings = () => {
+      return {
         showMarkers: false,
         domStyles: {
           'g2-tooltip': {
@@ -431,6 +445,32 @@ export default class ChartComponent extends Component {
             fontSize: '12px'
           }
         }
+      };
+    };
+    this.setToolTip = () => {
+      const settings = this.getToolSettings();
+      this.chart.tooltip(settings);
+    };
+    this.setToolTipForLine = () => {
+      const settings = this.getToolSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 6
+        },
+        crosshairs: {
+          line: {
+            fill: '#e2e2e2'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
       });
     };
     this.isShowXAxisLabel = chart => {
@@ -449,4 +489,10 @@ export default class ChartComponent extends Component {
       return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
     };
   }
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
 }

package/dist/view/wrapper/combination.js

@@ -389,7 +389,7 @@ class Combination extends React.Component {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
         'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)

package/dist/view/wrapper/compare.js

@@ -250,7 +250,7 @@ class Compare extends ChartComponent {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),

package/dist/view/wrapper/completeness.js

@@ -29,7 +29,7 @@ export default function Completeness(props) {
           style_config
         }
       } = props;
-      chartPaddingTop = ((_style_config$title = style_config.title) === null || _style_config$title === void 0 ? void 0 : _style_config$title.text) ? 47 : 30;
+      chartPaddingTop = ((_style_config$title = style_config.title) === null || _style_config$title === void 0 ? void 0 : _style_config$title.text) ? 17 : 0;
       const appendPadding = [chartPaddingTop, 30, 0, 0];
       currentChart.initChart(chartContainerRef.current, {
         appendPadding
@@ -157,7 +157,7 @@ export default function Completeness(props) {
     };
   }, [props]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-completeness-chart sea-chart-container w-100'),
+    className: classnames('sea-chart-completeness-chart sea-chart-container '),
     ref: chartContainerRef
   });
 }

package/dist/view/wrapper/dashboard.js

@@ -159,7 +159,7 @@ class Dashboard extends Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: "sea-chart-container w-100"
+      className: "sea-chart-container "
     });
   }
 }

package/dist/view/wrapper/horizontal-bar-group.js

@@ -21,7 +21,7 @@ class HorizontalBarGroup extends HorizontalComponent {
       const {
         display_data
       } = chart.config;
-      this.chartTopPadding = display_data ? 47 : 30;
+      this.chartTopPadding = display_data ? 17 : 0;
       const appendPadding = [this.chartTopPadding, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
@@ -154,7 +154,7 @@ class HorizontalBarGroup extends HorizontalComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/horizontal-bar.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { debounce } from 'lodash-es';
 import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -9,11 +8,6 @@ import HorizontalComponent from './horizontal-component';
 class HorizontalBar extends HorizontalComponent {
   constructor(props) {
     super(props);
-    this.handleResize = debounce(() => {
-      this.chart && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-    }, 300);
     this.createChart = () => {
       const {
         chart
@@ -21,7 +15,7 @@ class HorizontalBar extends HorizontalComponent {
       const {
         display_data
       } = chart.config;
-      const appendPadding = [0, display_data ? 47 : 30, 0, 0]; // used to display value on the right
+      const appendPadding = [0, display_data ? 17 : 0, 0, 0]; // used to display value on the right
       this.initChart(this.container, {
         appendPadding
       });
@@ -117,7 +111,7 @@ class HorizontalBar extends HorizontalComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    window.addEventListener('resize', this.handleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -128,11 +122,11 @@ class HorizontalBar extends HorizontalComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
-    window.removeEventListener('resize', this.handleResize);
+    super.componentWillUnmount();
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100'),
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/line-group.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
 import ChartComponent from './chart-component';
 class LineGroup extends ChartComponent {
   constructor(props) {
@@ -14,7 +15,7 @@ class LineGroup extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -49,11 +50,15 @@ class LineGroup extends ChartComponent {
       } = this.props;
       const {
         y_axis_show_value,
-        label_font_size
+        label_font_size,
+        line_type,
+        y_axis_summary_type,
+        y_axis_summary_method
       } = chart.config;
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       this.drawLabels(newData);
+      const isSmooth = line_type === CHART_LINE_TYPES[1];
 
       // set Coord type
       this.chart.coordinate('rect');
@@ -63,68 +68,78 @@ class LineGroup extends ChartComponent {
           type: 'cat'
         }
       });
-      this.chart.line().label(y_axis_show_value ? 'value' : false, {
+      const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.textColor
         }
-      }).position('name*value').color(chartBarColor);
-      this.chart.point().position('name*value').color(chartBarColor).shape('circle').size(3).style({
-        lineWidth: 1,
-        stroke: '#fff'
+      }).animate({
+        appear: {
+          animation: 'fadeIn',
+          duration: 1000,
+          easing: 'easeLinear'
+        }
+      }).position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
+        lineWidth: 3,
+        opacity: 1
+      }).tooltip('group_name*name*value', (group_name, name, value) => {
+        return {
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          name: group_name
+        };
       });
-      this.chart.tooltip({
-        showCrosshairs: true,
-        showTitle: true,
-        containerTpl: '<div class="g2-tooltip"> <div class="g2-tooltip-title"></div> <div class="g2-tooltip-list"></div></div>',
-        itemTpl: '<li class="tooltip-item"> <span>{value}</span> <span class="tooltip-item-left"><span class="tooltip-item-rect" style="background-color:{color}"></span> <span>{name}</span></span> </li>',
-        domStyles: {
-          'g2-tooltip': {
-            borderRadius: '3px',
-            backgroundColor: '#fff',
-            padding: '16px',
-            width: '180px',
-            border: '1px solid #E2E2E2'
-          },
-          'g2-tooltip-title': {
-            color: '#333333',
-            fontSize: '14px',
-            marginTop: '-1px'
-          },
-          'tooltip-item': {
-            display: 'flex',
-            width: '100%',
-            justifyContent: 'space-between',
-            marginTop: '8px',
-            color: '#333333',
-            fontSize: '12px'
-          },
-          'tooltip-item-left': {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItem: 'center'
-          },
-          'tooltip-item-rect': {
-            display: 'inline-block',
-            width: '12px',
-            height: '12px',
-            borderRadius: '2px',
-            marginRight: '8px'
+      let point;
+      if (y_axis_show_value) {
+        point = this.chart.point().position('name*value').color(chartBarColor).animate({
+          appear: {
+            animation: 'fadeIn',
+            duration: 1000,
+            easing: 'easeLinear'
           }
-        },
-        shared: true
+        }).shape('circle').size(4).style({
+          stroke: 0,
+          fillOpacity: 1
+        });
+      }
+      this.chart.on('tooltip:show', () => {
+        if (line.styleOption.cfg.opacity === 0.3) return;
+        line.style({
+          opacity: 0.3,
+          lineWidth: 3
+        });
+        if (point) point.style({
+          fillOpacity: 0.3,
+          stroke: 0
+        });
+        this.chart.render();
+      });
+      this.chart.on('tooltip:hide', () => {
+        if (line.styleOption.cfg.opacity === 1) return;
+        line.style({
+          opacity: 1,
+          lineWidth: 3
+        });
+        if (point) point.style({
+          fillOpacity: 1,
+          stroke: 0
+        });
+        this.chart.render();
       });
+      this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
-      this.setLegend(this.groupName, theme, 'bottom');
+      this.setLegend(this.groupName, theme, 'top-right');
     };
     this.chart = null;
     this.groupName = 'group_name';
+    this.needRenderAxisLabel = true;
   }
   componentDidMount() {
     this.createChart();
     this.drawChart();
     this.renderAxisLabel(this.props.chart, this.props.tables);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
@@ -136,13 +151,14 @@ class LineGroup extends ChartComponent {
   }
   componentWillUnmount() {
     this.chart && this.chart.destroy();
+    super.componentWillUnmount();
   }
   render() {
     const {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),