sea-chart 2.0.33 → 2.0.35

package/dist/components/types-dialog/index.js

@@ -23,8 +23,7 @@ const TypesDialog = _ref => {
     lang,
     onToggle: propsOnToggle,
     onChange,
-    dataSources,
-    hideTypeToggle
+    dataSources
   } = _ref;
   const [currentCatIndex, setCurrentCatIndex] = (0, _react.useState)(0);
   const [selectedType, setType] = (0, _react.useState)(type);
@@ -67,13 +66,6 @@ const TypesDialog = _ref => {
     onChange(selectedType);
     onToggle();
   }, [onChange, selectedType, onToggle]);
-  const handleFilterTypes = (0, _react.useCallback)(() => {
-    if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart', 'Gauge', 'Tree_map'].includes(item.name));
-      return newChartTypes;
-    }
-    return _constants.CHART_TYPES;
-  }, [hideTypeToggle]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     isOpen: true,
     toggle: onToggle,
@@ -86,7 +78,7 @@ const TypesDialog = _ref => {
     className: "sea-chart-types-container d-flex flex-column h-100"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "sea-chart-chart-categories-nav flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled"
-  }, handleFilterTypes().map((item, index) => {
+  }, _constants.CHART_TYPES.map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "px-4 py-2 sea-chart-chart-cat-nav-item"
@@ -108,7 +100,7 @@ const TypesDialog = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-fill o-auto sea-chart-type-container",
     ref: seaChartTypeContainerRef
-  }, handleFilterTypes().map((item, index) => {
+  }, _constants.CHART_TYPES.map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "sea-chart-type-".concat(index),
       className: "mb-7"

package/dist/settings/index.js

@@ -41,8 +41,7 @@ const Settings = _ref => {
     children,
     departments,
     globalTheme,
-    lang,
-    hideTypeToggle
+    lang
   } = _ref;
   const [type, setType] = (0, _react.useState)(_constants.CHART_SETTINGS_TYPE.DATA);
   const [labelColorConfigs, setLabelColorConfigs] = (0, _react.useState)([]);
@@ -98,8 +97,7 @@ const Settings = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement(_contexts.settingsContext.Provider, {
     value: {
-      hideTitleStyleSetting,
-      hideTypeToggle
+      hideTitleStyleSetting
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-settings"
@@ -144,7 +142,6 @@ const settingsPropTypes = exports.settingsPropTypes = {
   title: _propTypes.default.object,
   hideTitleStyleSetting: _propTypes.default.bool,
   children: _propTypes.default.any,
-  onChange: _propTypes.default.func.isRequired,
-  hideTypeToggle: _propTypes.default.bool
+  onChange: _propTypes.default.func.isRequired
 };
 var _default = exports.default = Settings;

package/dist/settings/widgets/chart-type/index.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _constants = require("../../../constants");
 var _utils = require("../../../utils");
-var _contexts = require("../../../utils/contexts");
 var _intl = _interopRequireDefault(require("../../../intl"));
 var _components = require("../../../components");
 require("./index.css");
@@ -21,9 +20,6 @@ const ChartType = _ref => {
     onChange,
     dataSources
   } = _ref;
-  const {
-    hideTypeToggle
-  } = (0, _react.useContext)(_contexts.settingsContext);
   const [isDialogShow, setDialogShow] = (0, _react.useState)(false);
   const openTypesDialog = (0, _react.useCallback)(event => {
     (0, _utils.eventStopPropagation)(event);
@@ -74,8 +70,7 @@ const ChartType = _ref => {
     dataSources: dataSources,
     type: type,
     onToggle: closeTypesDialog,
-    onChange: onTypeChange,
-    hideTypeToggle: hideTypeToggle
+    onChange: onTypeChange
   }));
 };
 var _default = exports.default = ChartType;

package/dist/view/wrapper/funnel.js

@@ -0,0 +1,305 @@
+"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 _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Funnel extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        chart,
+        result: data
+      } = this.props;
+      const {
+        x_axis_option_list,
+        funnel_accumulate_values
+      } = chart.config;
+      if (!x_axis_option_list.length) return;
+      const sortedData = (0, _utils.getSortedDataByGivenOrder)(data, x_axis_option_list);
+      const formatSortedData = this.formatSortedData(sortedData, funnel_accumulate_values);
+      this.draw(formatSortedData);
+    };
+    this.showTooltip = (event, data, title, colorScale) => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: colorScale(data === null || data === void 0 ? void 0 : data.name),
+          name: data === null || data === void 0 ? void 0 : data.name,
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data === null || data === void 0 ? void 0 : data.value), y_axis_summary_method)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = () => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = data => {
+      const {
+        chart,
+        tables,
+        globalTheme
+      } = this.props;
+      const {
+        table_id,
+        y_axis_summary_type,
+        y_axis_column_key,
+        y_axis_summary_column_key,
+        funnel_show_legend,
+        funnel_label_position,
+        funnel_label_font_size,
+        funnel_label_format,
+        funnel_show_labels,
+        funnel_show_overall_rate
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const isInside = funnel_label_position === _constants.FUNNEL_LABEL_POSITIONS.INSIDE;
+      const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+      const nameDomain = new Set(data.map(item => item.name));
+
+      // Color scale
+      const colorScale = d3.scaleOrdinal().domain(nameDomain).range(['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);
+
+      // Y scale
+      const y = d3.scaleBand().domain(nameDomain).range([insertPadding, chartHeight - insertPadding]).paddingInner(0).paddingOuter(0);
+
+      // X scale
+      const x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([insertPadding, chartWidth - insertPadding]);
+
+      // Content
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      const allWidth = chartWidth - insertPadding * 2;
+      data.forEach((_ref, index) => {
+        let {
+          name: curName,
+          value: curValue
+        } = _ref;
+        const curOffsetX = (allWidth - (x(curValue) - x(0))) / 2;
+        let points3X = x(curValue) + curOffsetX;
+        let points3Y = y(curName) + y.bandwidth();
+        let points4X = x(0) + curOffsetX;
+        let points4Y = y(curName) + +y.bandwidth();
+        const nextD = data[index + 1];
+        if (nextD) {
+          const {
+            name: nextName,
+            value: nextValue
+          } = nextD;
+          const nextOffsetX = (allWidth - (x(nextValue) - x(0))) / 2;
+          points3X = x(nextValue) + nextOffsetX;
+          points3Y = y(nextName);
+          points4X = x(0) + nextOffsetX;
+          points4Y = y(nextName);
+        }
+        contentWrapper.append('polygon').attr('opacity', 1).attr('fill', colorScale(curName)).attr('points', "\n          ".concat(x(0) + curOffsetX, ",").concat(y(curName), "\n          ").concat(x(curValue) + curOffsetX, ",").concat(y(curName), "\n          ").concat(points3X, ",").concat(points3Y, "\n          ").concat(points4X, ",").concat(points4Y, "\n        ")).attr('data-left', "".concat(Math.min(x(0) + curOffsetX, points4X))).attr('data-top', "".concat(y(curName))).attr('data-name', curName).call(g => {
+          Array.from(g.node().parentNode.children).forEach((g, index) => {
+            // Add label
+            if (funnel_show_labels) {
+              const left = Number(g.getAttribute('data-left'));
+              const top = Number(g.getAttribute('data-top'));
+              const name = g.getAttribute('data-name');
+              const {
+                width: gWidth,
+                height: gHeight
+              } = g.getBoundingClientRect();
+
+              // name
+              contentWrapper.append('text').attr('class', 'label-name').attr('stroke', '#fff').attr('stroke-width', 0.5).attr('paint-order', 'stroke').attr('fill', isInside ? '#fff' : theme.labelColor).attr('font-size', funnel_label_font_size).text(name).call(g => {
+                const {
+                  width,
+                  height
+                } = g.node().getBoundingClientRect();
+                const x = isInside ? left + gWidth / 2 - width / 2 : left - width - 5; // add offsetX is 5
+                const y = isInside ? top + height + 10 : top + gHeight / 2 + height / 2; // add offsetY is 10
+                g.attr('x', x);
+                g.attr('y', y);
+              });
+
+              // content
+              const obj = data.find(item => item.name === name);
+              contentWrapper.append('text').attr('class', 'label-content').attr('stroke', '#fff').attr('stroke-width', 0.5).attr('paint-order', 'stroke').attr('fill', '#fff').attr('font-size', funnel_label_font_size).text(this.contentFormatterMap[funnel_label_format](obj)).call(g => {
+                const {
+                  width,
+                  height
+                } = g.node().getBoundingClientRect();
+                g.attr('x', left + gWidth / 2 - width / 2);
+                g.attr('y', top + gHeight / 2 + height / 2);
+              });
+
+              // total
+              if (funnel_show_overall_rate && index === 0) {
+                var _data;
+                contentWrapper.append('text').attr('class', 'label-total').attr('fill', theme.labelColor).attr('font-size', funnel_label_font_size).text((((_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.percent) || 0) + '%').call(g => {
+                  const {
+                    width
+                  } = g.node().getBoundingClientRect();
+                  g.attr('x', left + gWidth / 2 - width / 2);
+                  g.attr('y', top - 5); // add offsetY is 5
+                });
+              }
+            }
+          });
+        }).on('click', () => {
+          this.props.toggleRecords(data[index]);
+        }).on('mouseover', event => {
+          this.showTooltip(event, data[index], title, colorScale);
+        }).on('mousemove', event => {
+          this.moveTooltip(event);
+        }).on('mouseleave', event => {
+          this.hiddenTooltip(event);
+        });
+      });
+      if (funnel_show_legend) {
+        this.setLegend({
+          legendName: 'name',
+          theme,
+          legendPosition: 'top-right',
+          data,
+          chart,
+          colorScale
+        });
+      }
+    };
+    this.formatSortedData = (sortedData, funnel_accumulate_values) => {
+      sortedData.total = 0;
+      sortedData.forEach(item => {
+        sortedData.total += item.value;
+      });
+      if (funnel_accumulate_values) {
+        for (let i = sortedData.length - 2; i >= 0; i--) {
+          sortedData[i].value += sortedData[i + 1].value;
+        }
+      }
+      sortedData.forEach(item => {
+        item.percent = sortedData.total === 0 ? 0 : (item.value / sortedData.total * 100).toFixed(2);
+      });
+      return sortedData;
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+    this.contentFormatterMap = {
+      [_constants.FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
+      [_constants.FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
+      [_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => "".concat(obj === null || obj === void 0 ? void 0 : obj.value, " (").concat((obj === null || obj === void 0 ? void 0 : obj.percent) || 0, "%)")
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.destroyChart();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.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, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Funnel.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
+};
+var _default = exports.default = Funnel;

package/dist/view/wrapper/index.js

@@ -38,6 +38,7 @@ var _heatMap = _interopRequireDefault(require("./heat-map"));
 var _mirror = _interopRequireDefault(require("./mirror"));
 var _dashboard = _interopRequireDefault(require("./dashboard"));
 var _treemap = _interopRequireDefault(require("./treemap"));
+var _funnel = _interopRequireDefault(require("./funnel"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
 const Wrapper = _ref => {
@@ -309,6 +310,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.FUNNEL:
+        {
+          return /*#__PURE__*/_react.default.createElement(_funnel.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/dist/view/wrapper/treemap.js

@@ -135,8 +135,8 @@ class Treemap extends _chartComponent.default {
             t.attr('y', height / 2 - tHeight / 2);
           });
         });
-      }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
+      }).on('click', (event, d) => {
+        this.props.toggleRecords(d.data);
       }).on('mouseover', (event, data) => {
         this.showTooltip(event, data);
       }).on('mousemove', event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.33",
+  "version": "2.0.35",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",