@publishfx/publish-chart 2.1.21 → 2.1.22

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.
@@ -144,7 +144,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
144
144
  items: safeItems,
145
145
  safeIndicatorMap: safeIndicatorMap,
146
146
  formatter: formatter,
147
- safeLegend: safeLegend,
148
147
  auxiliaryLineData: auxiliaryLineData
149
148
  }), container);
150
149
  return container;
@@ -70,7 +70,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
70
70
  isGroupRef.current = isGroup;
71
71
  const themeColors = contextConfig?.theme?.colors || [];
72
72
  const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
73
- const safeLegend = legend || "groupType";
74
73
  const safeZ = z;
75
74
  const safeY = "groupValue";
76
75
  const isCompare = timeRange?.compareStartTime !== "";
@@ -257,7 +256,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
257
256
  isDataTag,
258
257
  isCombineDataTag,
259
258
  isLegend: false,
260
- isCompare,
259
+ isCompare: isCompare && isOldData,
261
260
  isHighlight,
262
261
  isClickable: !!onChartClick,
263
262
  formatLabel: (isDataTag || isCombineDataTag) && !isOldData ? (d)=>{
@@ -282,7 +281,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
282
281
  items: safeItems,
283
282
  safeIndicatorMap: safeIndicatorMap,
284
283
  formatter: formatter,
285
- safeLegend: safeLegend,
286
284
  auxiliaryLineData: auxiliaryLineData
287
285
  }), container);
288
286
  return container;
@@ -303,8 +301,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
303
301
  lineColors,
304
302
  legendItems,
305
303
  indicatorId: y,
306
- isGroup: isGroupRef.current,
307
- isTooltipContent
304
+ isGroup: isGroupRef.current
308
305
  });
309
306
  chartRef.current = chart;
310
307
  if (onChartClick) chart.on("plot:click", (_e)=>{
@@ -133,7 +133,6 @@ const G2GroupBarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onC
133
133
  items: safeItems,
134
134
  safeIndicatorMap: safeIndicatorMap,
135
135
  formatter: formatter,
136
- safeLegend: safeLegend,
137
136
  auxiliaryLineData: auxiliaryLineData
138
137
  }), container);
139
138
  return container;
@@ -165,7 +165,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
165
165
  items: safeItems,
166
166
  safeIndicatorMap: safeIndicatorMap,
167
167
  formatter: formatter,
168
- safeLegend: safeLegend,
169
168
  auxiliaryLineData: auxiliaryLineData
170
169
  }), container);
171
170
  return container;
@@ -72,6 +72,7 @@ function applyAxisX(mark, options = {}) {
72
72
  labelAutoRotate: false,
73
73
  labelFontSize: fontSize,
74
74
  labelFontColor: '#000',
75
+ size: isHorizontal ? Math.min(180, Math.floor(containerWidth / 5)) : 30,
75
76
  labelAutoEllipsis: {
76
77
  type: 'ellipsis',
77
78
  minLength: 80,
@@ -147,7 +148,11 @@ function applyAuxiliaryLineY(view, lines, options = {}) {
147
148
  if (!lines?.length) return;
148
149
  const { stroke = '#F4664A', strokeOpacity = 1, labelMaxLength = 5 } = options;
149
150
  lines.forEach((auxLine)=>{
150
- view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').animate(false).scale('y', {
151
+ view.lineY().data([
152
+ {
153
+ y: auxLine.value
154
+ }
155
+ ]).encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').animate(false).scale('y', {
151
156
  key: auxLine?.axis === 'right' ? 'line' : 'main'
152
157
  }).axis('x', false).label({
153
158
  dx: 0,
@@ -19,7 +19,7 @@ function renderG2BarChart(container, options) {
19
19
  insetBottom: 0
20
20
  });
21
21
  const view = getMainView(chart);
22
- view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
22
+ view.attr('marginLeft', 0).attr('marginRight', isHorizontal ? 30 : 0).attr('marginBottom', isLegend ? 0 : 16);
23
23
  if (isHorizontal) view.coordinate({
24
24
  transform: [
25
25
  {
@@ -79,8 +79,8 @@ function renderG2BarChart(container, options) {
79
79
  });
80
80
  view.legend(false);
81
81
  view.interaction('poptip', {
82
- offsetY: -20,
83
- offsetX: 0,
82
+ offsetY: -50,
83
+ offsetX: -10,
84
84
  tipBackgroundColor: '#fcfcfc',
85
85
  tipColor: '#333',
86
86
  tipBorderRadius: '6px',
@@ -140,7 +140,9 @@ function renderG2BarChart(container, options) {
140
140
  else view.interaction('tooltip', {
141
141
  bounding: tooltipBounding
142
142
  });
143
- applyAuxiliaryLineY(view, auxiliaryLineData);
143
+ applyAuxiliaryLineY(view, auxiliaryLineData, {
144
+ labelMaxLength: 5
145
+ });
144
146
  const nodeResult = applyNodeData(view, nodeData, x, y);
145
147
  if (isDataTag && formatLabel) interval.label({
146
148
  style: {
@@ -158,6 +160,15 @@ function renderG2BarChart(container, options) {
158
160
  }
159
161
  ]
160
162
  });
163
+ view.labelTransform([
164
+ {
165
+ type: 'exceedAdjust',
166
+ bounds: 'main'
167
+ },
168
+ {
169
+ type: 'overlapHide'
170
+ }
171
+ ]);
161
172
  chart.render();
162
173
  let hasEmittedNodeList = false;
163
174
  chart.on('afterrender', (_e)=>{
@@ -87,8 +87,6 @@ export interface RenderG2CombineChartOptions {
87
87
  }>;
88
88
  /** 当前指标 id(用于 tooltip 展示) */
89
89
  indicatorId?: string;
90
- /** 是否将 tooltip 挂载到 body(用于可视化看板、编辑看板场景,避免被父容器裁剪) */
91
- isTooltipContent?: boolean;
92
90
  }
93
91
  /**
94
92
  * 在容器上渲染 G2 柱状 + 折线组合图,返回 Chart 实例便于 destroy/更新
@@ -5,7 +5,7 @@ const Y_AXIS_FIELD = 'groupValue';
5
5
  const BAR_Y_FIELD = 'barValue';
6
6
  const LINE_Y_FIELD = 'lineValue';
7
7
  function renderG2CombineChart(container, options) {
8
- const { data, nodeData, x, z: _z, maxLeft, maxRight, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId, isTooltipContent = false } = options;
8
+ const { data, nodeData, x, z: _z, maxLeft, maxRight, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
9
9
  const chart = createChart({
10
10
  container,
11
11
  autoFit: true
@@ -265,9 +265,6 @@ function renderG2CombineChart(container, options) {
265
265
  crosshairsY: true,
266
266
  marker: false,
267
267
  bounding: tooltipBounding,
268
- ...isTooltipContent ? {
269
- mount: 'body'
270
- } : {},
271
268
  render: (_event, payload)=>{
272
269
  const { title, items } = payload;
273
270
  let safeTitle = title.replace(/,.*$/, '');
@@ -16,7 +16,6 @@ interface Props {
16
16
  items: Item[];
17
17
  safeIndicatorMap: any;
18
18
  formatter: any;
19
- safeLegend: string;
20
19
  auxiliaryLineData?: AuxiliaryLineData[];
21
20
  }
22
21
  declare const _default: import("react").NamedExoticComponent<Props>;
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { memo } from "react";
3
3
  import { CompareChange } from "@publishfx/publish-components";
4
4
  import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
5
- const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap, formatter, safeLegend, auxiliaryLineData })=>{
5
+ const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap, formatter, auxiliaryLineData })=>{
6
6
  let auxiIndicatorId = '';
7
7
  let combineIndicatorId = '';
8
8
  const uniqueColors = [];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@publishfx/publish-chart",
3
- "version": "2.1.21",
3
+ "version": "2.1.22",
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": [