sea-chart 2.0.25-alpha.1 → 2.0.25-alpha.3

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

@@ -649,10 +649,11 @@ class ChartComponent extends _react.Component {
     this.setContinuousLegend = _ref => {
       var _this$chart$node2;
       let {
+        previewType,
+        theme,
         colorRange = [],
         legendDirection,
         legendSize,
-        legendTextColor,
         legendTextRange,
         bubbleColor,
         type
@@ -669,7 +670,7 @@ class ChartComponent extends _react.Component {
       if (type !== _constants.CHART_TYPE.MAP_BUBBLE) {
         var _this$chart$node;
         // add linearGradient
-        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", "gradient-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr("x1", '0%').attr("y1", '0%').attr("x2", legendDirection === 'vertical' ? '0%' : '100%').attr("y2", legendDirection === 'vertical' ? '100%' : '0%');
+        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", "gradient-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id, "-").concat(previewType)).attr("x1", '0%').attr("y1", '0%').attr("x2", legendDirection === 'vertical' ? '0%' : '100%').attr("y2", legendDirection === 'vertical' ? '100%' : '0%');
         gradient.append('stop').attr('offset', '0%').attr('stop-color', "".concat(colorRange[0]));
         gradient.append('stop').attr('offset', '50%').attr('stop-color', "".concat(colorRange[4]));
         gradient.append('stop').attr('offset', '100%').attr('stop-color', "".concat(colorRange[8]));
@@ -677,19 +678,19 @@ class ChartComponent extends _react.Component {
 
       // add legend
       const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', "translate(".concat(insertPadding, ", ").concat(chartHeight - legendRectHeight - legendTextHeightSpace, ")"));
-      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', type === _constants.CHART_TYPE.MAP_BUBBLE ? bubbleColor : "url(#gradient-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id, ")")).call(g => {
+      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', type === _constants.CHART_TYPE.MAP_BUBBLE ? bubbleColor : "url(#gradient-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id, ")-").concat(previewType)).call(g => {
         if (type === _constants.CHART_TYPE.MAP_BUBBLE) {
           continuousLegendWrapper.append('polygon').attr('points', "0,0  ".concat(legendRectWidth, ",0  0,").concat(legendRectHeight)).attr('fill', '#fff').attr('stroke', '#fff');
         }
       });
-      continuousLegendWrapper.append('text').attr('class', 'range-start').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', legendTextColor).text(legendTextRange[0]).call(g => {
+      continuousLegendWrapper.append('text').attr('class', 'range-start').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[0]).call(g => {
         const {
           height
         } = g.node().getBoundingClientRect();
         g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendTextOffset);
         g.attr('y', legendDirection === 'vertical' ? height : height + legendRectHeight);
       });
-      continuousLegendWrapper.append('text').attr('class', 'range-end').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', legendTextColor).text(legendTextRange[1]).call(g => {
+      continuousLegendWrapper.append('text').attr('class', 'range-end').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[1]).call(g => {
         const {
           width,
           height

package/dist/view/wrapper/map-bubble.js

@@ -96,16 +96,18 @@ class MapBubble extends _chartComponent.default {
     };
     this.draw = (data, mapJson) => {
       const {
-        chart
+        chart,
+        globalTheme,
+        canvasStyle
       } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         map_level = _constants.MAP_LEVEL.COUNTRY,
-        data_color,
         legend_size,
         legend_direction,
         summary_method,
         type,
-        bubble_color
+        bubble_color = '#2a67d1'
       } = chart.config;
       const {
         width: chartWidth,
@@ -131,9 +133,10 @@ class MapBubble extends _chartComponent.default {
       // draw legend
       const columnData = this.getColumnData();
       this.setContinuousLegend({
+        previewType: canvasStyle.previewType,
+        theme,
         legendDirection: legend_direction,
         legendSize: legend_size,
-        legendTextColor: data_color,
         legendTextRange: [_utils.BaseUtils.getSummaryValueDisplayString(columnData, d3.min(data, d => d.value), summary_method), _utils.BaseUtils.getSummaryValueDisplayString(columnData, d3.max(data, d => d.value), summary_method)],
         type,
         bubbleColor: bubble_color
@@ -168,7 +171,7 @@ class MapBubble extends _chartComponent.default {
         chart
       } = this.props;
       const {
-        bubble_color
+        bubble_color = '#2a67d1'
       } = chart.config;
       const circleData = [];
       mapData.features.forEach(item => {
@@ -195,7 +198,7 @@ class MapBubble extends _chartComponent.default {
             const percent = value / data.sum;
             let size = percent * 100;
             return size;
-          }).attr('fill', bubble_color || '#2a67d1').attr('fill-opacity', 0.6).attr('stroke', bubble_color || '#2a67d1').attr('stroke-opacity', 0.9).attr('data-value', value).attr('data-name', name).on('click', event => {
+          }).attr('fill', bubble_color).attr('fill-opacity', 0.6).attr('stroke', bubble_color).attr('stroke-opacity', 0.9).attr('data-value', value).attr('data-name', name).on('click', event => {
             const name = event.target.getAttribute('data-name');
             const newData = data.find(item => item.name.includes(name));
             newData && this.props.toggleRecords(newData);

package/dist/view/wrapper/map.js

@@ -97,8 +97,11 @@ class Map extends _chartComponent.default {
     };
     this.draw = (data, mapJson) => {
       const {
-        chart
+        chart,
+        globalTheme,
+        canvasStyle
       } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         map_level = _constants.MAP_LEVEL.COUNTRY,
         data_color,
@@ -172,10 +175,11 @@ class Map extends _chartComponent.default {
       });
       const columnData = this.getColumnData();
       this.setContinuousLegend({
+        previewType: canvasStyle.previewType,
+        theme,
         colorRange: exampleColors,
         legendDirection: legend_direction,
         legendSize: legend_size,
-        legendTextColor: data_color,
         legendTextRange: [_utils.BaseUtils.getSummaryValueDisplayString(columnData, minVal, summary_method), _utils.BaseUtils.getSummaryValueDisplayString(columnData, maxVal, summary_method)]
       });
     };

package/package.json

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