sea-chart 2.0.15 → 2.0.17

package/dist/view/wrapper/chart-component.js

@@ -258,11 +258,11 @@ class ChartComponent extends _react.Component {
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -605,6 +605,7 @@ class ChartComponent extends _react.Component {
         legendItemMargin: 20,
         legendRecTextGap: 8,
         legendPageNavWrapperWidth: 100,
+        legendPageNavWrapperHeight: 18,
         legendPosition,
         legendName,
         theme
@@ -616,7 +617,8 @@ class ChartComponent extends _react.Component {
       }
       const {
         width: chartWidth,
-        insertPadding
+        insertPadding,
+        rightLegendSpace
       } = this.chartBoundingClientRect;
       const groupsData = this.getLegendDataGroups(legendData);
       const legendWrapper = this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
@@ -632,7 +634,8 @@ class ChartComponent extends _react.Component {
       // Render Page navigator
       if (groupsData.length > 1) {
         const {
-          legendPageNavWrapperWidth
+          legendPageNavWrapperWidth,
+          legendItemMargin
         } = this.legendConfig;
         let curCount = 0;
         const pageNavigator = legendWrapper.append('g').attr('class', 'legend-flip-page');
@@ -671,6 +674,7 @@ class ChartComponent extends _react.Component {
         // update pageNavigator transform
         pageNavigator.call(g => {
           let groupTranslateX = 0;
+          let groupTranslateY = 0;
           if (legendPosition === 'top-right') {
             groupTranslateX = insertPadding;
           } else if (legendPosition === 'top-left') {
@@ -680,8 +684,14 @@ class ChartComponent extends _react.Component {
             } = g.node().getBoundingClientRect();
             const offset = legendPageNavWrapperWidth - width;
             groupTranslateX = groupTranslateX + offset;
+          } else if (legendPosition === 'center-right') {
+            groupTranslateX = chartWidth - insertPadding - rightLegendSpace;
+            const {
+              height
+            } = g.node().parentNode.getBoundingClientRect();
+            groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          g.attr('transform', "translate(".concat(groupTranslateX, ", 0)"));
+          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
         });
       }
     };
@@ -733,35 +743,53 @@ class ChartComponent extends _react.Component {
           const parentNode = rect.parentNode;
           d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).attr('dominant-baseline', 'hanging');
         });
-        // update g translateX
         const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
         const {
           start,
-          end
+          end,
+          top,
+          bottom
         } = this.getLegendBoundary(legendPosition);
-        legendItems.forEach((item, index) => {
-          let translateX = start;
-          const prevItem = legendItems[index - 1];
-          if (index > 0) {
-            const {
-              width
-            } = prevItem.getBoundingClientRect();
-            const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
-            translateX = prevTranslateX + width + legendItemMargin;
-          }
-          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
+        if (top && bottom) {
+          // update g translateY
+          legendItems.forEach((item, index) => {
+            let translateY = top;
+            const prevItem = legendItems[index - 1];
+            if (index > 0) {
+              const {
+                height
+              } = prevItem.getBoundingClientRect();
+              const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
+              translateY = prevTranslateY + height + legendItemMargin;
+            }
+            d3.select(item).attr('transform', "translate(".concat(start, ",").concat(translateY, ")")).attr('data-translateY', translateY);
+          });
+        } else {
+          // update g translateX
+          legendItems.forEach((item, index) => {
+            let translateX = start;
+            const prevItem = legendItems[index - 1];
+            if (index > 0) {
+              const {
+                width
+              } = prevItem.getBoundingClientRect();
+              const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
+              translateX = prevTranslateX + width + legendItemMargin;
+            }
+            d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
 
-          // legend items add offset 
-          if (legendPosition === 'top-right') {
-            d3.select(item).attr('opacity', 0);
-            // Execute only once
-            if (index === legendItems.length - 1) {
-              queueMicrotask(() => {
-                this.setLegendItemOffset(legendItems, end);
-              });
+            // legend items add offset 
+            if (legendPosition === 'top-right') {
+              d3.select(item).attr('opacity', 0);
+              // Execute only once
+              if (index === legendItems.length - 1) {
+                queueMicrotask(() => {
+                  this.setLegendItemOffset(legendItems, end);
+                });
+              }
             }
-          }
-        });
+          });
+        }
       });
     };
     this.getLegendDataGroups = legendData => {
@@ -780,43 +808,77 @@ class ChartComponent extends _react.Component {
       } = this.legendConfig;
       const {
         start,
-        end
+        end,
+        top,
+        bottom
       } = this.getLegendBoundary(legendPosition);
-      let allWidth = start;
-      const groupsData = [];
-      const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
-      let lastIndex = 0;
-      legendData.forEach((item, index) => {
-        const virtualLegend = this.chart.append('g').attr('opacity', 0);
-        virtualLegend.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r);
-        virtualLegend.append('text').attr('x', legendRectWidth + legendRecTextGap).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(item[0]));
-        const {
-          width
-        } = virtualLegend.node().getBoundingClientRect();
-        const itemWidth = index === legendData.length - 1 ? width : width + legendItemMargin; // last item no used margin
-        allWidth = allWidth + itemWidth;
-        if (allWidth > end) {
-          groupsData.push(newLegendData.slice(0, index - lastIndex));
-          newLegendData.splice(0, index - lastIndex);
-          lastIndex = index;
-          allWidth = start + itemWidth;
-        }
-        virtualLegend.remove();
-      });
-      const restLegendItems = newLegendData.slice(0);
-      restLegendItems.length !== 0 && groupsData.push(restLegendItems);
-      return groupsData;
+      if (top && bottom) {
+        let allHeight = top;
+        const groupsData = [];
+        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+        let lastIndex = 0;
+        legendData.forEach((item, index) => {
+          const virtualLegend = this.chart.append('g').attr('opacity', 0);
+          virtualLegend.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r);
+          virtualLegend.append('text').attr('x', legendRectWidth + legendRecTextGap).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(item[0]));
+          const {
+            height
+          } = virtualLegend.node().getBoundingClientRect();
+          const itemHeight = index === legendData.length - 1 ? height : height + legendItemMargin; // last item no used margin
+          allHeight = allHeight + itemHeight;
+          if (allHeight > bottom) {
+            groupsData.push(newLegendData.slice(0, index - lastIndex));
+            newLegendData.splice(0, index - lastIndex);
+            lastIndex = index;
+            allHeight = top + itemHeight;
+          }
+          virtualLegend.remove();
+        });
+        const restLegendItems = newLegendData.slice(0);
+        restLegendItems.length !== 0 && groupsData.push(restLegendItems);
+        return groupsData;
+      } else {
+        let allWidth = start;
+        const groupsData = [];
+        const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+        let lastIndex = 0;
+        legendData.forEach((item, index) => {
+          const virtualLegend = this.chart.append('g').attr('opacity', 0);
+          virtualLegend.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r);
+          virtualLegend.append('text').attr('x', legendRectWidth + legendRecTextGap).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(item[0]));
+          const {
+            width
+          } = virtualLegend.node().getBoundingClientRect();
+          const itemWidth = index === legendData.length - 1 ? width : width + legendItemMargin; // last item no used margin
+          allWidth = allWidth + itemWidth;
+          if (allWidth > end) {
+            groupsData.push(newLegendData.slice(0, index - lastIndex));
+            newLegendData.splice(0, index - lastIndex);
+            lastIndex = index;
+            allWidth = start + itemWidth;
+          }
+          virtualLegend.remove();
+        });
+        const restLegendItems = newLegendData.slice(0);
+        restLegendItems.length !== 0 && groupsData.push(restLegendItems);
+        return groupsData;
+      }
     };
     this.getLegendBoundary = legendPosition => {
       const {
-        legendPageNavWrapperWidth
+        legendPageNavWrapperWidth,
+        legendPageNavWrapperHeight
       } = this.legendConfig;
       const {
         width: chartWidth,
-        insertPadding
+        height: chartHeight,
+        insertPadding,
+        rightLegendSpace
       } = this.chartBoundingClientRect;
       let start = 0;
       let end = 0;
+      let top = 0;
+      let bottom = 0;
       if (legendPosition === 'top-left') {
         start = insertPadding;
         end = chartWidth - insertPadding - legendPageNavWrapperWidth;
@@ -825,9 +887,17 @@ class ChartComponent extends _react.Component {
         start = insertPadding + legendPageNavWrapperWidth;
         end = chartWidth - insertPadding;
       }
+      if (legendPosition === 'center-right') {
+        start = chartWidth - insertPadding - rightLegendSpace;
+        end = chartWidth - insertPadding;
+        top = insertPadding;
+        bottom = chartHeight - insertPadding - legendPageNavWrapperHeight;
+      }
       return {
         start,
-        end
+        end,
+        top,
+        bottom
       };
     };
     this.handleNavigatorOpacity = (navigator, text) => {
@@ -1073,7 +1143,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref6;
-      d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width
         } = g.node().getBoundingClientRect();
@@ -1091,7 +1161,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref7;
-      d3.select(container).append('text').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
           const {
@@ -1113,7 +1183,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref8;
-      d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width,
           height

package/dist/view/wrapper/completeness-group.js

@@ -73,8 +73,8 @@ class Completeness extends _chartComponent.default {
       const newSeries = this.getGroupSeries(data);
 
       // Y axis
-      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

package/dist/view/wrapper/completeness.js

@@ -76,7 +76,7 @@ class Completeness extends _chartComponent.default {
       const newSeries = this.handleSeries(series, data);
 
       // Y axis
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -91,8 +91,8 @@ class HorizontalBarGroup extends _chartComponent.default {
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -94,7 +94,7 @@ class HorizontalBarStack extends _chartComponent.default {
         return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
       })(d3.index(data, d => d.name, d => d.group_name));
       const newSeries = this.handleSeries(series, data);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      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 => {

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

@@ -88,7 +88,7 @@ class HorizontalBar extends _chartComponent.default {
       const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
       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.1).paddingOuter(0.1);
+      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 => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

package/dist/view/wrapper/index.js

@@ -23,6 +23,10 @@ var _completeness = _interopRequireDefault(require("./completeness"));
 var _completenessGroup = _interopRequireDefault(require("./completeness-group"));
 var _line = _interopRequireDefault(require("./line"));
 var _lineGroup = _interopRequireDefault(require("./line-group"));
+var _area = _interopRequireDefault(require("./area"));
+var _areaGroup = _interopRequireDefault(require("./area-group"));
+var _pie = _interopRequireDefault(require("./pie"));
+var _ring = _interopRequireDefault(require("./ring"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -209,6 +213,30 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.AREA:
+        {
+          return /*#__PURE__*/_react.default.createElement(_area.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.AREA_GROUP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_areaGroup.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.PIE:
+        {
+          return /*#__PURE__*/_react.default.createElement(_pie.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.RING:
+        {
+          return /*#__PURE__*/_react.default.createElement(_ring.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/line-group.js

@@ -209,7 +209,7 @@ class LineGroup extends _chartComponent.default {
               // circle label
               if (y_axis_show_value) {
                 const curCircleEl = g.node();
-                rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+                rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
                   const {
                     width
                   } = g.node().getBoundingClientRect();

package/dist/view/wrapper/line.js

@@ -62,7 +62,7 @@ class Line extends _chartComponent.default {
       const newTooltipData = {
         title: title,
         items: [{
-          color: this.getChartBarColor(),
+          color: this.getLineColor(),
           name: data.name,
           value: data.value
         }]
@@ -85,7 +85,7 @@ class Line extends _chartComponent.default {
       const newTooltipData = {
         title: title,
         items: [{
-          color: this.getChartBarColor(),
+          color: this.getLineColor(),
           name: data.name,
           value: data.value
         }]
@@ -135,7 +135,7 @@ class Line extends _chartComponent.default {
         insertPadding,
         marginTop
       } = this.chartBoundingClientRect;
-      const chartBarColor = this.getChartBarColor();
+      const chartBarColor = this.getLineColor();
       const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
 
       // Y axis
@@ -177,7 +177,7 @@ class Line extends _chartComponent.default {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();
@@ -293,7 +293,7 @@ class Line extends _chartComponent.default {
         this.hiddenTooltip();
       }
     };
-    this.getChartBarColor = () => {
+    this.getLineColor = () => {
       const {
         chart,
         chartColorTheme