sea-chart 2.0.43 → 2.0.44

package/dist/view/wrapper/bar.js

@@ -1,30 +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 * as d3 from 'd3';
+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 = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -37,8 +22,8 @@ class Bar extends _chartComponent.default {
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
-        marginLeft: y_axis_show_label ? 20 : 0,
-        marginBottom: x_axis_show_label ? 20 : 0,
+        marginLeft: y_axis_show_label ? this.getAxisTitleHeight(chart.config.y_axis_label_font_size) : 0,
+        marginBottom: x_axis_show_label ? this.getAxisTitleHeight(chart.config.x_axis_label_font_size) : 0,
         marginTop: y_axis_show_value ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
@@ -50,11 +35,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 +51,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 +80,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 +122,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,7 +150,7 @@ 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(${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
@@ -177,7 +162,7 @@ class Bar extends _chartComponent.default {
         this.checkTickOverlap(g);
       });
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).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('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
+      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).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('data-groupName', d => d.name).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
@@ -188,14 +173,12 @@ 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
           this.addClipPath({
-            rect: path,
-            parentNode: path.parentNode,
-            rectId: path.getAttribute('data-slugid')
+            rect: path
           });
         });
       }).on('click', (event, data) => {
@@ -208,6 +191,9 @@ class Bar extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip(event);
         this.handleAcitveAndInActiveState('active', event);
+      }).call(g => {
+        this.animateRectGrowInY(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       if (display_goal_line && goal_label && goal_value) {
         this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
@@ -222,12 +208,11 @@ class Bar extends _chartComponent.default {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -235,23 +220,17 @@ class Bar extends _chartComponent.default {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       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', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      className: "sea-chart-container"
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -259,16 +238,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, isEmpty } 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 (isEmpty(data)) return intl.get(EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -61,11 +53,15 @@ 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 + '';
+      const isNegative = string.startsWith('-');
+      if (isNegative) {
+        string = string.slice(1);
+      }
       const isFloat = string.indexOf('.') > 0;
       if (isFloat) {
         string = string.slice(0, string.indexOf('.'));
@@ -84,6 +80,9 @@ class BasicNumericCard extends _react.Component {
       if (content[0] === ',') {
         content = content.slice(1);
       }
+      if (isNegative) {
+        content = '-' + content;
+      }
       if (isFloat) {
         const initString = data + '';
         content = content + initString.slice(initString.indexOf('.'));
@@ -108,7 +107,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,20 +126,20 @@ 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%',
@@ -152,12 +151,12 @@ class BasicNumericCard extends _react.Component {
         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',
@@ -178,4 +177,4 @@ class BasicNumericCard extends _react.Component {
     }, name)));
   }
 }
-var _default = exports.default = BasicNumericCard;
+export default BasicNumericCard;