sea-chart 2.0.21 → 2.0.23

package/dist/view/wrapper/horizontal-bar-group.js

@@ -70,13 +70,15 @@ class HorizontalBarGroup extends _chartComponent.default {
         globalTheme,
         chartColorTheme,
         tables,
-        columnGroupbyColumn
+        columnGroupbyColumn,
+        summaryColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         display_data,
         label_font_size,
         column_groupby_column_key,
+        horizontal_axis_summary_method,
         table_id,
         color_theme,
         horizontal_axis_auto_range,
@@ -95,7 +97,9 @@ class HorizontalBarGroup extends _chartComponent.default {
       const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
       const y = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
-      const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+
+      // Y axis
+      const yAxis = this.chart.append('g').attr('class', 'y-axis-wrapper').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(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);
@@ -109,7 +113,9 @@ class HorizontalBarGroup extends _chartComponent.default {
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
-      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+
+      // X axis
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -118,8 +124,8 @@ class HorizontalBarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      rectsWrapper.selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      contentWrapper.selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
         const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
         return "translate(0, ".concat(fy(name) + offset, ")");
@@ -128,7 +134,7 @@ class HorizontalBarGroup extends _chartComponent.default {
       .selectAll().data(_ref2 => {
         let [_, d] = _ref2;
         return d;
-      }).join('rect').attr('x', 0).attr('y', (d, index) => index * y.bandwidth()).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
+      }).join('rect').attr('opacity', 1).attr('x', 0).attr('y', (d, index) => index * y.bandwidth()).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
         return this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0];
       }).attr('value', d => d.value).attr('data-slugid', d => d.slugId).attr('data-groupName', d => d.name).call(g => {
         // add rect borderRadius
@@ -152,7 +158,7 @@ class HorizontalBarGroup extends _chartComponent.default {
               y: Number(rect.getAttribute('y')),
               theme,
               label_font_size,
-              text: Number(rect.getAttribute('value'))
+              text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('value')), horizontal_axis_summary_method)
             });
           }
         });
@@ -182,6 +188,13 @@ class HorizontalBarGroup extends _chartComponent.default {
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
     this.showTooltip = event => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        horizontal_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -195,7 +208,7 @@ class HorizontalBarGroup extends _chartComponent.default {
           return {
             color: this.colorMap[data.group_name] || _constants.CHART_STYLE_COLORS[0],
             name: data.group_name,
-            value: data.value
+            value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), horizontal_axis_summary_method)
           };
         })
       };

package/dist/view/wrapper/horizontal-bar-stack.js

@@ -68,7 +68,9 @@ class HorizontalBarStack extends _chartComponent.default {
         globalTheme,
         chartColorTheme,
         tables,
-        columnGroupbyColumn
+        columnGroupbyColumn,
+        summaryColumn,
+        horizontal_axis_summary_method
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -99,7 +101,7 @@ class HorizontalBarStack extends _chartComponent.default {
       const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // Y axis
-      const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+      const yAxis = this.chart.append('g').attr('class', 'y-axis-wrapper').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(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);
@@ -115,7 +117,7 @@ class HorizontalBarStack extends _chartComponent.default {
       // X axis
       const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding]);
-      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -124,20 +126,20 @@ class HorizontalBarStack extends _chartComponent.default {
       });
 
       // Rect group
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      rectsWrapper.selectAll().data(newSeries).join('g')
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      contentWrapper.selectAll().data(newSeries).join('g')
       // rect item
       .selectAll().data(_ref2 => {
         let [groupKey, d] = _ref2;
         d.forEach(item => item['groupKey'] = groupKey);
         return d;
-      }).join('rect').attr('x', (d, index) => {
+      }).join('rect').attr('opacity', 1).attr('x', (d, index) => {
         return x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'));
       }).attr('y', (d, index) => y(d.groupKey)).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
         return this.colorMap[d.data.group_name] || _constants.CHART_STYLE_COLORS[0];
       }).attr('data-value', d => d.data.value).attr('data-slugid', d => d.data.slugId).attr('data-groupName', d => d.data.name).attr('data-stackKey', d => d.key).call(g => {
         // add rect borderRadius
-        const allGroup = this.getAllGroup(rectsWrapper);
+        const allGroup = this.getAllGroup(contentWrapper);
         allGroup.forEach(group => {
           const firstEl = group[0];
           firstEl && this.addMaskRect(firstEl === null || firstEl === void 0 ? void 0 : firstEl.parentNode, firstEl, yAxis);
@@ -145,7 +147,7 @@ class HorizontalBarStack extends _chartComponent.default {
 
         // Add label
         if (display_data) {
-          const newAllGroup = this.getAllGroup(rectsWrapper);
+          const newAllGroup = this.getAllGroup(contentWrapper);
           newAllGroup.forEach(group => {
             group.forEach(rect => {
               this.addLabelToRectCenter({
@@ -156,7 +158,7 @@ class HorizontalBarStack extends _chartComponent.default {
                 yheight: Number(rect.getAttribute('height')),
                 theme,
                 label_font_size,
-                text: rect.getAttribute('data-value')
+                text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('data-value')), horizontal_axis_summary_method)
               });
             });
           });
@@ -187,6 +189,13 @@ class HorizontalBarStack extends _chartComponent.default {
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
     this.showTooltip = (event, isDiv) => {
+      const {
+        summaryColumn,
+        chart
+      } = this.props;
+      const {
+        horizontal_axis_summary_method
+      } = chart.config;
       let {
         offsetX,
         offsetY
@@ -205,7 +214,7 @@ class HorizontalBarStack extends _chartComponent.default {
         items: [{
           color: this.colorMap[stackName] || _constants.CHART_STYLE_COLORS[0],
           name: stackName,
-          value: stackValue
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(stackValue), horizontal_axis_summary_method)
         }]
       };
       this.setState({
@@ -266,9 +275,9 @@ class HorizontalBarStack extends _chartComponent.default {
       });
       return newSeries;
     };
-    this.getAllGroup = rectsWrapper => {
+    this.getAllGroup = contentWrapper => {
       const allGroup = [];
-      Array.from(rectsWrapper.node().children).forEach(item => {
+      Array.from(contentWrapper.node().children).forEach(item => {
         const group = [];
         Array.from(item.children).forEach(child => {
           if (Number(child.getAttribute('width')) !== 0) {
@@ -286,7 +295,7 @@ class HorizontalBarStack extends _chartComponent.default {
         borderRadius
       } = this.chartBoundingClientRect;
       // Add mask rect
-      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', rect.getAttribute('width')).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).attr('data-stackKey', rect.getAttribute('data-stackKey')).attr('data-x', () => {
+      d3.select(topG).append('foreignObject').attr('opacity', rect.getAttribute('opacity')).attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', rect.getAttribute('width')).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).attr('data-stackKey', rect.getAttribute('data-stackKey')).attr('data-x', () => {
         const x = Number(rect.getAttribute('x'));
         return x + Number(yAxis.node().getAttribute('data-axisWidth'));
       }).on('click', (event, data) => {

package/dist/view/wrapper/horizontal-bar.js

@@ -59,13 +59,15 @@ class HorizontalBar extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        summaryColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         table_id,
         horizontal_axis_summary_type,
         horizontal_axis_column_key,
+        horizontal_axis_summary_method,
         color_option,
         horizontal_axis_label_color_rules,
         horizontal_axis_label_color,
@@ -89,7 +91,9 @@ class HorizontalBar extends _chartComponent.default {
       const tooltipTitle = this.getTitle(tables, table_id, horizontal_axis_summary_type, horizontal_axis_column_key);
       data.reverse();
       const y = d3.scaleBand().domain(data.map(item => item.name)).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+
+      // Y axis
+      const yAxis = this.chart.append('g').attr('class', 'y-axis-wrapper').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(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);
@@ -103,15 +107,17 @@ class HorizontalBar extends _chartComponent.default {
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
-      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
+
+      // X axis
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
       });
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      rectsWrapper.selectAll().data(data).join('rect').attr('x', 0).attr('y', d => y(d.name)).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).attr('x', 0).attr('y', d => y(d.name)).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
         const color = (0, _colorUtils.getLabelColor)({
           chart: chart.config,
           colorRules,
@@ -140,7 +146,7 @@ class HorizontalBar extends _chartComponent.default {
               y: Number(rect.getAttribute('y')),
               theme,
               label_font_size,
-              text: Number(rect.getAttribute('value'))
+              text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('value')), horizontal_axis_summary_method)
             });
           }
         });
@@ -163,8 +169,12 @@ class HorizontalBar extends _chartComponent.default {
     };
     this.showTooltip = (event, data, title, colorRules, chartBarColor) => {
       const {
+        summaryColumn,
         chart
       } = this.props;
+      const {
+        horizontal_axis_summary_method
+      } = chart.config;
       const {
         offsetX,
         offsetY
@@ -178,7 +188,7 @@ class HorizontalBar extends _chartComponent.default {
             value: data.value
           }) || chartBarColor,
           name: data.name,
-          value: data.value
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), horizontal_axis_summary_method)
         }]
       };
       this.setState({

package/dist/view/wrapper/index.js

@@ -29,6 +29,7 @@ var _pie = _interopRequireDefault(require("./pie"));
 var _ring = _interopRequireDefault(require("./ring"));
 var _scatter = _interopRequireDefault(require("./scatter"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
+var _combination = _interopRequireDefault(require("./combination"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
 const Wrapper = _ref => {
@@ -244,6 +245,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.COMBINATION:
+        {
+          return /*#__PURE__*/_react.default.createElement(_combination.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/scatter.js

@@ -268,7 +268,7 @@ class Scatter extends _chartComponent.default {
       this.setLegend({
         legendName: 'groupby',
         theme,
-        legendPosition: 'top-right',
+        legendPosition: 'top-left',
         data,
         groupColumn: this.props.columnGroupbyColumn,
         chart,

package/package.json

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