sea-chart 2.0.36 → 2.0.38

package/dist/view/wrapper/bar.js

@@ -1,23 +1,15 @@
-"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 _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../constants");
-var _utils = require("../../utils");
-var _colorUtils = require("../../utils/color-utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Bar extends _chartComponent.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { debounce } from 'lodash-es';
+import * as d3 from 'd3';
+import classNames from 'classnames';
+import { TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
+import { BaseUtils, isFunction } from '../../utils';
+import { getLabelColor, getConvertedColorRules } from '../../utils/color-utils';
+import intl from '../../intl';
+import ToolTip from '../../components/tooltip';
+import ChartComponent from './chart-component';
+class Bar extends ChartComponent {
   constructor(props) {
     super(props);
     this.handleResize = () => {
@@ -50,11 +42,11 @@ class Bar extends _chartComponent.default {
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = BaseUtils.formatEmptyName(data, '', intl.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);
+      isFunction(customRender) && customRender(this.chart);
     };
     this.getFillColor = data => {
       const {
@@ -66,12 +58,12 @@ class Bar extends _chartComponent.default {
         color_option,
         y_axis_label_color_rules
       } = chart.config;
-      let chartBarColor = y_axis_label_color || _constants.CHART_STYLE_COLORS[0];
+      let chartBarColor = y_axis_label_color || CHART_STYLE_COLORS[0];
       if (chartColorTheme) {
-        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+        chartBarColor = 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)({
+      const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
+      const color = getLabelColor({
         chart: chart.config,
         colorRules,
         value: data.value
@@ -95,7 +87,7 @@ class Bar extends _chartComponent.default {
         items: [{
           color: this.getFillColor(data),
           name: data.name,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
+          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -137,7 +129,7 @@ class Bar extends _chartComponent.default {
         tables,
         summaryColumn
       } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         display_goal_line,
         goal_value,
@@ -165,11 +157,11 @@ class Bar extends _chartComponent.default {
       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 + marginTop]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
       const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${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);
@@ -188,7 +180,7 @@ class Bar extends _chartComponent.default {
               y: Number(path.dataset.y),
               theme,
               label_font_size,
-              text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(path.dataset.value), y_axis_summary_method)
+              text: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(path.dataset.value), y_axis_summary_method)
             });
           }
           // add rect borderRadius
@@ -222,12 +214,12 @@ class Bar extends _chartComponent.default {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    this.debouncedHandleResize = debounce(this.handleResize, 300);
     window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -245,13 +237,13 @@ class Bar extends _chartComponent.default {
       tooltipData,
       toolTipPosition
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: (0, _classnames.default)('sea-chart-container', {
+      className: classNames('sea-chart-container', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -259,16 +251,16 @@ class Bar extends _chartComponent.default {
   }
 }
 Bar.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
+  toggleRecords: PropTypes.func,
+  customRender: PropTypes.func
 };
-var _default = exports.default = Bar;
+export default Bar;

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

@@ -1,17 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants = require("../../constants");
-class BasicNumericCard extends _react.Component {
+import React, { Component } from 'react';
+import { isNumber } from 'dtable-utils';
+import { BaseUtils } from '../../utils';
+import intl from '../../intl';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
+class BasicNumericCard extends Component {
   constructor(props) {
     super(props);
     this.setCurrentLineHeight = () => {
@@ -25,7 +17,7 @@ class BasicNumericCard extends _react.Component {
       const currentLineHeight = parseFloat(computedStyle.lineHeight);
       const currentLabelHeight = parseFloat(computedStyle.height);
       if (prevLineHeight === currentLineHeight && prevLabelHeight === currentLabelHeight) return;
-      if ((0, _dtableUtils.isNumber)(currentLineHeight) && (0, _dtableUtils.isNumber)(currentLabelHeight)) {
+      if (isNumber(currentLineHeight) && isNumber(currentLabelHeight)) {
         this.setState({
           currentLineHeight,
           currentLabelHeight
@@ -51,7 +43,7 @@ class BasicNumericCard extends _react.Component {
       }
     };
     this.formatData = data => {
-      if (!data && data !== 0) return _intl.default.get(_constants.EMPTY_NAME);
+      if (!data && data !== 0) return intl.get(EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -61,8 +53,8 @@ class BasicNumericCard extends _react.Component {
         summary_method
       } = chart.config;
       // COUNT / SUMMARIZE_A_FIELD
-      if (summary_type !== _constants.BASIC_NUMBER_CARD_CALCULATION_METHOD) {
-        const formattedContent = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+      if (summary_type !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        const formattedContent = BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
         return formattedContent;
       }
       let string = data + '';
@@ -108,7 +100,7 @@ class BasicNumericCard extends _react.Component {
       chart,
       result
     } = this.props;
-    const theme = _constants.CHART_THEME_COLOR[globalTheme];
+    const theme = CHART_THEME_COLOR[globalTheme];
     const {
       config
     } = chart;
@@ -127,47 +119,47 @@ class BasicNumericCard extends _react.Component {
     const numericValue = typeof result === 'object' && result !== null ? result.value : result;
     let content = null;
     if (summary_method === 'Distinct_values') {
-      content = (0, _dtableUtils.isNumber)(numericValue) ? numericValue : 0;
+      content = isNumber(numericValue) ? numericValue : 0;
     } else {
       content = this.formatData(numericValue);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "sea-chart-container plugin-number-card"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         color: theme.cardColor,
         width: '100%',
         height: '100%',
         position: 'relative'
       }
-    }, /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/React.createElement("p", {
       style: {
         position: 'absolute',
         width: '100%',
         top: 'calc((100% - 25px)/2)',
         transform: 'translateY(-50%)',
-        fontSize: "".concat(font_size, "px"),
+        fontSize: `${font_size}px`,
         margin: '-8px 0 2px 0',
-        textAlign: "".concat(text_align),
-        fontWeight: "".concat(font_weight),
-        color: "".concat(font_color)
+        textAlign: `${text_align}`,
+        fontWeight: `${font_weight}`,
+        color: `${font_color}`
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       onClick: this.handleClickNumber,
       style: {
         cursor: 'pointer'
       }
-    }, content)), /*#__PURE__*/_react.default.createElement("p", {
+    }, content)), /*#__PURE__*/React.createElement("p", {
       ref: ref => this.labelRef = ref,
       style: {
         position: 'absolute',
         width: '100%',
         bottom: '0px',
         margin: '0',
-        transform: currentLineHeight ? "translateY(".concat(currentLabelHeight - currentLineHeight, "px)") : '',
-        fontSize: "".concat(card_label_font_size, "px"),
-        fontWeight: "".concat(label_font_weight),
-        textAlign: "".concat(label_text_align),
+        transform: currentLineHeight ? `translateY(${currentLabelHeight - currentLineHeight}px)` : '',
+        fontSize: `${card_label_font_size}px`,
+        fontWeight: `${label_font_weight}`,
+        textAlign: `${label_text_align}`,
         color: label_font_color,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -178,4 +170,4 @@ class BasicNumericCard extends _react.Component {
     }, name)));
   }
 }
-var _default = exports.default = BasicNumericCard;
+export default BasicNumericCard;