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

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

@@ -649,10 +649,10 @@ class ChartComponent extends _react.Component {
     this.setContinuousLegend = _ref => {
       var _this$chart$node2;
       let {
+        theme,
         colorRange = [],
         legendDirection,
         legendSize,
-        legendTextColor,
         legendTextRange,
         bubbleColor,
         type
@@ -682,14 +682,14 @@ class ChartComponent extends _react.Component {
           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,8 +96,10 @@ class MapBubble extends _chartComponent.default {
     };
     this.draw = (data, mapJson) => {
       const {
-        chart
+        chart,
+        globalTheme
       } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         map_level = _constants.MAP_LEVEL.COUNTRY,
         data_color,
@@ -105,7 +107,7 @@ class MapBubble extends _chartComponent.default {
         legend_direction,
         summary_method,
         type,
-        bubble_color
+        bubble_color = '#2a67d1'
       } = chart.config;
       const {
         width: chartWidth,
@@ -130,10 +132,11 @@ class MapBubble extends _chartComponent.default {
 
       // draw legend
       const columnData = this.getColumnData();
+      console.log('data_color', data_color);
       this.setContinuousLegend({
+        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,10 @@ class Map extends _chartComponent.default {
     };
     this.draw = (data, mapJson) => {
       const {
-        chart
+        chart,
+        globalTheme
       } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         map_level = _constants.MAP_LEVEL.COUNTRY,
         data_color,
@@ -172,10 +174,10 @@ class Map extends _chartComponent.default {
       });
       const columnData = this.getColumnData();
       this.setContinuousLegend({
+        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.2",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",