@publishfx/publish-chart 1.4.6 → 1.5.0
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.
- package/dist/components/composite/GroupBar.js +2 -1
- package/dist/components/composite/GroupCompare.js +2 -1
- package/dist/components/composite/GroupLine.js +2 -1
- package/dist/components/composite/GroupLineCompare.js +2 -1
- package/dist/components/composite/MultipleCompareLine.js +29 -2
- package/dist/components/composite/MultipleLine.js +2 -1
- package/dist/components/shared/XAxisBackground.d.ts +1 -0
- package/dist/components/shared/XAxisBackground.js +7 -1
- package/package.json +1 -1
|
@@ -227,7 +227,8 @@ const GroupBar = ({ height, data, x = 'groupName', y = '', legend = 'groupType',
|
|
|
227
227
|
filterFn: filterFn,
|
|
228
228
|
dataLength: transformData.length,
|
|
229
229
|
mainBarSize: mainBarSize,
|
|
230
|
-
isHorizontal: isHorizontal
|
|
230
|
+
isHorizontal: isHorizontal,
|
|
231
|
+
finalXAxisValues: finalXAxisValues
|
|
231
232
|
}),
|
|
232
233
|
/*#__PURE__*/ jsx(Coordinate, {
|
|
233
234
|
transpose: isHorizontal
|
|
@@ -282,7 +282,8 @@ const GroupCompare = ({ height = 300, data, x = "", y = "", indicatorMap, onChar
|
|
|
282
282
|
dataLength: transformData.length,
|
|
283
283
|
mainBarSize: mainBarSize,
|
|
284
284
|
backgroundHeight: backgroundHeight,
|
|
285
|
-
isHorizontal: isHorizontal
|
|
285
|
+
isHorizontal: isHorizontal,
|
|
286
|
+
finalXAxisValues: finalXAxisValues
|
|
286
287
|
}),
|
|
287
288
|
100 === chartType ? /*#__PURE__*/ jsx(Interval, {
|
|
288
289
|
position: `${x}*${yAxis}`,
|
|
@@ -152,7 +152,8 @@ const GroupLine = ({ height, data, x = 'groupName', y = '', legend = 'groupType'
|
|
|
152
152
|
isHighlight: isHighlight,
|
|
153
153
|
filterFn: filterFn,
|
|
154
154
|
dataLength: transformData.length,
|
|
155
|
-
mainBarSize: mainBarSize
|
|
155
|
+
mainBarSize: mainBarSize,
|
|
156
|
+
finalXAxisValues: finalXAxisValues
|
|
156
157
|
}),
|
|
157
158
|
/*#__PURE__*/ jsx(Line, {
|
|
158
159
|
position: `${x}*${yAxis}`,
|
|
@@ -256,7 +256,8 @@ const GroupLineCompare = ({ height, data, x = 'groupName', y = '', legend = 'gro
|
|
|
256
256
|
isHighlight: isHighlight,
|
|
257
257
|
filterFn: filterFn,
|
|
258
258
|
dataLength: transformData.length,
|
|
259
|
-
mainBarSize: mainBarSize
|
|
259
|
+
mainBarSize: mainBarSize,
|
|
260
|
+
finalXAxisValues: finalXAxisValues
|
|
260
261
|
}),
|
|
261
262
|
/*#__PURE__*/ jsx(Line, {
|
|
262
263
|
position: `${x}*${yAxis}`,
|
|
@@ -102,6 +102,26 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
|
|
|
102
102
|
const axisHorPadding = useMemo(()=>getAxisHorPaddingByText(maxY, indicatorMap, '') - 22, [
|
|
103
103
|
maxY
|
|
104
104
|
]);
|
|
105
|
+
const colorMap = useMemo(()=>{
|
|
106
|
+
const themeColors = defaultChartConfig.theme.colors;
|
|
107
|
+
const indicatorSet = new Set();
|
|
108
|
+
transformData.forEach((item)=>{
|
|
109
|
+
const name = item[legend];
|
|
110
|
+
if (name) {
|
|
111
|
+
const baseName = name.split('_')[0];
|
|
112
|
+
indicatorSet.add(baseName);
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
const map = {};
|
|
116
|
+
Array.from(indicatorSet).forEach((indicator, index)=>{
|
|
117
|
+
const color = themeColors[index % themeColors.length];
|
|
118
|
+
map[indicator] = color;
|
|
119
|
+
});
|
|
120
|
+
return map;
|
|
121
|
+
}, [
|
|
122
|
+
transformData,
|
|
123
|
+
legend
|
|
124
|
+
]);
|
|
105
125
|
const finalXAxisValues = useMemo(()=>{
|
|
106
126
|
const allXValues = transformData.map((item)=>item[x]);
|
|
107
127
|
return Array.from(new Set(allXValues));
|
|
@@ -145,7 +165,8 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
|
|
|
145
165
|
isHighlight: isHighlight,
|
|
146
166
|
filterFn: filterFn,
|
|
147
167
|
dataLength: transformData.length,
|
|
148
|
-
mainBarSize: mainBarSize
|
|
168
|
+
mainBarSize: mainBarSize,
|
|
169
|
+
finalXAxisValues: finalXAxisValues
|
|
149
170
|
}),
|
|
150
171
|
/*#__PURE__*/ jsx(Line, {
|
|
151
172
|
position: `${x}*${yAxis}`,
|
|
@@ -176,7 +197,13 @@ const MultipleCompareLine = ({ height, data, x = 'groupName', legend = 'groupTyp
|
|
|
176
197
|
}
|
|
177
198
|
}
|
|
178
199
|
},
|
|
179
|
-
color:
|
|
200
|
+
color: [
|
|
201
|
+
legend,
|
|
202
|
+
(name)=>{
|
|
203
|
+
const baseName = name.split('_')[0];
|
|
204
|
+
return colorMap[baseName] || defaultChartConfig.theme.colors["0"];
|
|
205
|
+
}
|
|
206
|
+
],
|
|
180
207
|
shape: [
|
|
181
208
|
legend,
|
|
182
209
|
(groupType)=>{
|
|
@@ -145,7 +145,8 @@ const MultipleLine = ({ height, data, x = 'groupName', legend = 'groupType', ind
|
|
|
145
145
|
isHighlight: isHighlight,
|
|
146
146
|
filterFn: filterFn,
|
|
147
147
|
dataLength: transformData.length,
|
|
148
|
-
mainBarSize: mainBarSize
|
|
148
|
+
mainBarSize: mainBarSize,
|
|
149
|
+
finalXAxisValues: finalXAxisValues
|
|
149
150
|
}),
|
|
150
151
|
/*#__PURE__*/ jsx(Line, {
|
|
151
152
|
position: `${x}*${yAxis}`,
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useMemo, useRef } from "react";
|
|
3
3
|
import { Axis, Coordinate, Interval, View } from "bizcharts";
|
|
4
4
|
const STRIPE_PATTERN_THRESHOLD = 10;
|
|
5
|
-
const XAxisBackground = ({ x, data, isHighlight, filterFn, mainBarSize, dataLength, backgroundHeight = 1000, backgroundColor = '#f1f1f1', backgroundOpacity = 0.8, sizeMultiplier = 1.2, isHorizontal = false })=>{
|
|
5
|
+
const XAxisBackground = ({ x, data, isHighlight, filterFn, mainBarSize, dataLength, backgroundHeight = 1000, backgroundColor = '#f1f1f1', backgroundOpacity = 0.8, sizeMultiplier = 1.2, isHorizontal = false, finalXAxisValues })=>{
|
|
6
6
|
const backgroundPatternRef = useRef(null);
|
|
7
7
|
const createBackgroundPattern = (color)=>{
|
|
8
8
|
const patternCanvas = document.createElement('canvas');
|
|
@@ -61,6 +61,12 @@ const XAxisBackground = ({ x, data, isHighlight, filterFn, mainBarSize, dataLeng
|
|
|
61
61
|
indicatorValue: {
|
|
62
62
|
type: 'linear',
|
|
63
63
|
max: backgroundHeight
|
|
64
|
+
},
|
|
65
|
+
...finalXAxisValues && {
|
|
66
|
+
[x]: {
|
|
67
|
+
type: 'cat',
|
|
68
|
+
values: finalXAxisValues
|
|
69
|
+
}
|
|
64
70
|
}
|
|
65
71
|
},
|
|
66
72
|
padding: 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@publishfx/publish-chart",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|