sea-chart 2.0.25-alpha.2 → 2.0.25-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -649,6 +649,7 @@ class ChartComponent extends _react.Component {
|
|
|
649
649
|
this.setContinuousLegend = _ref => {
|
|
650
650
|
var _this$chart$node2;
|
|
651
651
|
let {
|
|
652
|
+
previewType,
|
|
652
653
|
theme,
|
|
653
654
|
colorRange = [],
|
|
654
655
|
legendDirection,
|
|
@@ -669,7 +670,7 @@ class ChartComponent extends _react.Component {
|
|
|
669
670
|
if (type !== _constants.CHART_TYPE.MAP_BUBBLE) {
|
|
670
671
|
var _this$chart$node;
|
|
671
672
|
// add linearGradient
|
|
672
|
-
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%');
|
|
673
|
+
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%');
|
|
673
674
|
gradient.append('stop').attr('offset', '0%').attr('stop-color', "".concat(colorRange[0]));
|
|
674
675
|
gradient.append('stop').attr('offset', '50%').attr('stop-color', "".concat(colorRange[4]));
|
|
675
676
|
gradient.append('stop').attr('offset', '100%').attr('stop-color', "".concat(colorRange[8]));
|
|
@@ -677,7 +678,7 @@ class ChartComponent extends _react.Component {
|
|
|
677
678
|
|
|
678
679
|
// add legend
|
|
679
680
|
const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', "translate(".concat(insertPadding, ", ").concat(chartHeight - legendRectHeight - legendTextHeightSpace, ")"));
|
|
680
|
-
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 => {
|
|
681
|
+
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 => {
|
|
681
682
|
if (type === _constants.CHART_TYPE.MAP_BUBBLE) {
|
|
682
683
|
continuousLegendWrapper.append('polygon').attr('points', "0,0 ".concat(legendRectWidth, ",0 0,").concat(legendRectHeight)).attr('fill', '#fff').attr('stroke', '#fff');
|
|
683
684
|
}
|
|
@@ -97,12 +97,12 @@ class MapBubble extends _chartComponent.default {
|
|
|
97
97
|
this.draw = (data, mapJson) => {
|
|
98
98
|
const {
|
|
99
99
|
chart,
|
|
100
|
-
globalTheme
|
|
100
|
+
globalTheme,
|
|
101
|
+
canvasStyle
|
|
101
102
|
} = this.props;
|
|
102
103
|
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
103
104
|
const {
|
|
104
105
|
map_level = _constants.MAP_LEVEL.COUNTRY,
|
|
105
|
-
data_color,
|
|
106
106
|
legend_size,
|
|
107
107
|
legend_direction,
|
|
108
108
|
summary_method,
|
|
@@ -132,8 +132,8 @@ class MapBubble extends _chartComponent.default {
|
|
|
132
132
|
|
|
133
133
|
// draw legend
|
|
134
134
|
const columnData = this.getColumnData();
|
|
135
|
-
console.log('data_color', data_color);
|
|
136
135
|
this.setContinuousLegend({
|
|
136
|
+
previewType: canvasStyle.previewType,
|
|
137
137
|
theme,
|
|
138
138
|
legendDirection: legend_direction,
|
|
139
139
|
legendSize: legend_size,
|
package/dist/view/wrapper/map.js
CHANGED
|
@@ -98,7 +98,8 @@ class Map extends _chartComponent.default {
|
|
|
98
98
|
this.draw = (data, mapJson) => {
|
|
99
99
|
const {
|
|
100
100
|
chart,
|
|
101
|
-
globalTheme
|
|
101
|
+
globalTheme,
|
|
102
|
+
canvasStyle
|
|
102
103
|
} = this.props;
|
|
103
104
|
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
104
105
|
const {
|
|
@@ -174,6 +175,7 @@ class Map extends _chartComponent.default {
|
|
|
174
175
|
});
|
|
175
176
|
const columnData = this.getColumnData();
|
|
176
177
|
this.setContinuousLegend({
|
|
178
|
+
previewType: canvasStyle.previewType,
|
|
177
179
|
theme,
|
|
178
180
|
colorRange: exampleColors,
|
|
179
181
|
legendDirection: legend_direction,
|