sea-chart 0.0.19 → 0.0.21

package/dist/view/wrapper/line.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
+import ChartComponent from './chart-component';
 class Line extends ChartComponent {
   constructor(props) {
     super(props);
@@ -14,7 +16,7 @@ class Line 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
       });
@@ -45,95 +47,97 @@ class Line extends ChartComponent {
       const {
         chart,
         theme,
-        themeName
+        themeName,
+        summaryColumn
       } = this.props;
       const {
         y_axis_label_color,
         y_axis_show_value,
-        label_font_size
+        label_font_size,
+        line_type,
+        y_axis_column_key,
+        y_axis_summary_type,
+        y_axis_summary_method
       } = chart.config;
       let chartBarColor = y_axis_label_color || '#5B8FF9';
       if (themeName) {
         chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
       }
       this.drawLabels(data);
+      const isSmooth = line_type === CHART_LINE_TYPES[1];
 
       // set Coord type
       this.chart.coordinate('rect');
-      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
+          fill: theme.labelColor
         }
-      }).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('name*value', (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
+        };
       });
-      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>{title}</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.chart.theme({
-        geometries: {
-          point: {
-            circle: {
-              active: {
-                style: {
-                  stroke: 'rgba(0, 0, 0, 0)',
-                  r: 4
-                }
-              }
-            }
-          }
-        }
-      });
     };
     this.chart = null;
+    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)) {
@@ -145,13 +149,14 @@ class Line 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)
       }),

package/dist/view/wrapper/map.js

@@ -316,7 +316,7 @@ export default function Map(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
     className: 'statistic-chart-loading-container'
   }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-container w-100'),
+    className: classnames('sea-chart-container '),
     ref: chartContainerRef
   }));
 }

package/dist/view/wrapper/pie.js

@@ -169,7 +169,7 @@ class Pie 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/ring.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import ChartComponent from './chart-component';
 class Ring extends ChartComponent {
   constructor(props) {
     var _this;
@@ -248,7 +248,7 @@ class Ring 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/scatter.js

@@ -121,7 +121,7 @@ export function Scatter(props) {
   const showXLabel = chartRef.current.isShowXAxisLabel(chart);
   const showYLabel = chartRef.current.isShowYAxisLabel(chart);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-container w-100', {
+    className: classnames('sea-chart-container ', {
       'show-x-axis-label': showXLabel,
       'show-y-axis-label': showYLabel
     }),

package/dist/view/wrapper/treemap.js

@@ -171,7 +171,7 @@ class Treemap 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/world-map.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",