sea-chart 0.0.48 → 0.0.49

package/dist/view/wrapper/trend.js

@@ -1,50 +1,11 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { Chart } from '../../utils/custom-g2';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
-import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE } from '../../constants';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../constants';
 class Trend extends Component {
   constructor() {
     super(...arguments);
-    this.componentDidMount = () => {
-      this.drawChart();
-    };
-    this.drawChart = () => {
-      const {
-        theme,
-        chart,
-        result
-      } = this.props;
-      this.chart = new Chart({
-        container: this.container,
-        autoFit: true,
-        width: '100%',
-        height: '100%'
-      });
-      const {
-        config
-      } = chart;
-      const {
-        summary_method,
-        num_font_size,
-        num_font_color,
-        num_font_weight,
-        num_text_align,
-        card_label_font_size: label_font_size,
-        label_font_color,
-        label_text_align,
-        label_font_weight
-      } = config;
-      const latest = result && result.latest;
-      const content = summary_method === CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
-      const labelContent = this.createLabelContent(result, label_text_align, label_font_size, label_font_color, label_font_weight);
-      this.chart.annotation().html({
-        container: this.container,
-        html: "\n        <div style=\"color:".concat(theme.cardColor, "; width: 100%; height: 100%; position: relative\">\n          <p class=\"text-content\" style=\" position:absolute; width: 100%; top: calc((100% - 22px)/2); transform: translateY(-50%); font-size: ").concat(num_font_size, "px; margin: -8px 0 2px 0; text-align: ").concat(num_text_align, "; font-weight:").concat(num_font_weight, "; color:").concat(num_font_color, "\">").concat(content, "</p>\n          <p class=\"label-content\" style=\"position:absolute; width: 100%; bottom: 0px; margin: 0;\">").concat(labelContent, "</p>\n        </div>\n      ")
-      });
-      this.chart.render();
-    };
     this.formatData = data => {
       if (!data && data !== 0) return intl.get(EMPTY_NAME);
       const {
@@ -115,38 +76,147 @@ class Trend extends Component {
         previous
       } = data || {};
       let color = '#fa5757',
-        icon = '&darr;';
+        icon = '\u2193';
       if (type === 'up') {
         color = '#34aa95';
-        icon = '&uarr;';
+        icon = '\u2191';
       }
       let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%&#8226;").concat(conjunctions).concat(previous);
       if (!previous) {
         resultText = intl.get('Can_not_compare_with_{var}').replace('{var}', intl.get(conjunctions));
       }
       if (!previous) {
-        return "<span style='font-size: ".concat(labelFontSize, "px'>").concat(resultText, "</span>");
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            fontSize: "".concat(labelFontSize, "px")
+          }
+        }, resultText);
       }
       if (labelFontSize <= 12) {
         if (!result) return '';
-        return "<span style='font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        <i \n        style='color: ").concat(color, "; \n        display: inline-block; \n        width: ").concat(1.5 * labelFontSize, "px; \n        height: ").concat(1.5 * labelFontSize, "px; \n        line-height: ").concat(1.5 * labelFontSize, "px;  \n        border-radius: 50%; \n        background-color: ").concat(color, "26;\n        text-align: center;\n        margin-right: 8px;\n        font-weight: bold;\n        '>\n          ").concat(icon, "\n        </i>\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) : '', "%</span>\n      </span>");
+        return /*#__PURE__*/React.createElement("span", {
+          style: {
+            fontSize: "".concat(labelFontSize, "px"),
+            width: '100%'
+          }
+        }, /*#__PURE__*/React.createElement("i", {
+          style: {
+            color: "".concat(color),
+            display: 'inline-block',
+            width: "".concat(1.5 * labelFontSize, "px"),
+            height: "".concat(1.5 * labelFontSize, "px"),
+            lineHeight: "".concat(1.5 * labelFontSize, "px"),
+            borderRadius: '50%',
+            backgroundColor: "".concat(color, "26"),
+            textAlign: 'center',
+            marginRight: '8px',
+            fontWeight: 'bold'
+          }
+        }, icon), /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: "".concat(color)
+          }
+        }, result ? Number.parseFloat(result * 100).toFixed(2) : '', "%"));
       }
-      const resultContent = "\n      <span style='display: flex; flex-wrap:wrap; justify-content:".concat(label_text_align, "; font-size: ").concat(labelFontSize, "px; width: 100%;'>\n        <span style=\"white-space:nowrap\"> ").concat(!result ? '' : "\n        <i \n        style='\n        flex-shrink:0;\n        flex-basis:auto;\n        color: ".concat(color, "; \n        display: inline-block; \n        width: ").concat(1.5 * labelFontSize, "px; \n        height: ").concat(1.5 * labelFontSize, "px; \n        line-height: ").concat(1.5 * labelFontSize, "px; \n        border-radius: 50%; \n        background-color: ").concat(color, "26;\n        text-align: center;\n        margin-right: 8px;\n        font-weight: bold;\n        '\n        >\n          ").concat(icon, "\n        </i>"), "<span style='color: ").concat(color, "; margin-right: 0px '>\n        ").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "\n        </span></span><span style=\"color:").concat(labelFontColor, "; font-weight:").concat(labelFontWeight, "; white-space:nowrap; margin-left: 16px \">\n        ").concat(conjunctions, " \n        ").concat(this.formatData(previous), "\n        </span>\n      </span>\n    ");
+      const resultContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: label_text_align,
+          fontSize: "".concat(labelFontSize, "px"),
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          whiteSpace: 'nowrap'
+        }
+      }, !result ? '' : /*#__PURE__*/React.createElement("i", {
+        style: {
+          flexShrink: '0',
+          flexBasis: 'auto',
+          color: color,
+          display: 'inline-block',
+          width: "".concat(1.5 * labelFontSize, "px"),
+          height: "".concat(1.5 * labelFontSize, "px"),
+          lineHeight: "".concat(1.5 * labelFontSize, "px"),
+          borderRadius: '50%',
+          backgroundColor: "".concat(color, "26"),
+          textAlign: 'center',
+          marginRight: '8px',
+          fontWeight: 'bold'
+        }
+      }, " ", icon, " "), /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: color,
+          marginRight: '0px'
+        }
+      }, result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '')), /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: labelFontColor,
+          fontWeight: labelFontWeight,
+          whiteSpace: 'nowrap',
+          marginLeft: '16px'
+        }
+      }, conjunctions, this.formatData(previous))));
       return resultContent;
     };
   }
-  componentDidUpdate(prevProps) {
-    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      this.chart && this.chart.destroy();
-      this.drawChart();
-    }
-  }
   render() {
-    // const { chart } = this.props;
+    const {
+      globalTheme,
+      chart,
+      result
+    } = this.props;
+    const theme = CHART_THEME_COLOR[globalTheme];
+    const {
+      config
+    } = chart;
+    const {
+      summary_method,
+      num_font_size,
+      num_font_color,
+      num_font_weight,
+      num_text_align,
+      card_label_font_size: label_font_size = 14,
+      label_font_color,
+      label_text_align,
+      label_font_weight
+    } = config;
+    const latest = result && result.latest;
+    const content = summary_method === CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
+    const labelContent = this.createLabelContent(result, label_text_align, label_font_size, label_font_color, label_font_weight);
     return /*#__PURE__*/React.createElement("div", {
-      ref: ref => this.container = ref,
+      id: this.id,
       className: classNames('sea-chart-container', 'plugin-number-card-trend')
-    });
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: theme.cardColor,
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "text-content",
+      style: {
+        position: 'absolute',
+        width: '100%',
+        top: 'calc((100% - 25px)/2)',
+        transform: 'translateY(-50%)',
+        fontSize: "".concat(num_font_size, "px"),
+        margin: '-8px 0 2px 0',
+        textAlign: "".concat(num_text_align),
+        fontWeight: "".concat(num_font_weight),
+        color: "".concat(num_font_color)
+      }
+    }, content), /*#__PURE__*/React.createElement("p", {
+      className: "label-content",
+      style: {
+        position: 'absolute',
+        width: '100%',
+        bottom: '0px',
+        margin: '0'
+      }
+    }, labelContent)));
   }
 }
 export default Trend;

package/package.json

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