@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.
@@ -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: legend,
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}`,
@@ -26,6 +26,7 @@ export interface XAxisBackgroundProps {
26
26
  sizeMultiplier?: number;
27
27
  /** 是否水平布局 */
28
28
  isHorizontal?: boolean;
29
+ finalXAxisValues?: string[];
29
30
  }
30
31
  declare const XAxisBackground: React.FC<XAxisBackgroundProps>;
31
32
  export default XAxisBackground;
@@ -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.4.6",
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": [