@publishfx/publish-chart 2.1.11 → 2.1.13

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.
@@ -145,6 +145,12 @@ class DataAdapter {
145
145
  }
146
146
  });
147
147
  console.log('tdv:', tdv.rows);
148
+ tdv.transform({
149
+ type: 'filter',
150
+ callback (row) {
151
+ return !row[config.y] || '-' !== row[config.y];
152
+ }
153
+ });
148
154
  console.log('tdv:', tdv.rows);
149
155
  if (config.isDescend) tdv.transform({
150
156
  type: 'sort',
@@ -61,7 +61,7 @@ const lineColors = [
61
61
  const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
62
62
  showType: 0,
63
63
  type: []
64
- }, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
64
+ }, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup, isTooltipContent = false })=>{
65
65
  const { formatter, dataTransform, config: contextConfig } = useChartContext();
66
66
  const tooltipContainerRef = useG2TooltipContainer();
67
67
  const isGroupRef = useRef(isGroup);
@@ -177,7 +177,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
177
177
  if (!activeIds.length) return leftData;
178
178
  const result = leftData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
179
179
  if (isGroupRef.current) result.forEach((item)=>{
180
- item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + d.groupValue === '' ? 0 : d.groupValue, 0);
180
+ item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + ('' === d.groupValue ? 0 : d.groupValue), 0);
181
181
  });
182
182
  return result;
183
183
  }, [
@@ -272,7 +272,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
272
272
  lineColors,
273
273
  legendItems,
274
274
  indicatorId: y,
275
- isGroup: isGroupRef.current
275
+ isGroup: isGroupRef.current,
276
+ isTooltipContent
276
277
  });
277
278
  chartRef.current = chart;
278
279
  if (onChartClick) chart.on("plot:click", (_e)=>{
@@ -85,6 +85,8 @@ export interface RenderG2CombineChartOptions {
85
85
  }>;
86
86
  /** 当前指标 id(用于 tooltip 展示) */
87
87
  indicatorId?: string;
88
+ /** 是否将 tooltip 挂载到 body(用于可视化看板、编辑看板场景,避免被父容器裁剪) */
89
+ isTooltipContent?: boolean;
88
90
  }
89
91
  /**
90
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, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
8
+ const { data, nodeData, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId, isTooltipContent = false } = options;
9
9
  const chart = createChart({
10
10
  container,
11
11
  height,
@@ -291,6 +291,9 @@ function renderG2CombineChart(container, options) {
291
291
  shared: true,
292
292
  crosshairsY: true,
293
293
  marker: false,
294
+ ...isTooltipContent ? {
295
+ mount: 'body'
296
+ } : {},
294
297
  render: (event, payload)=>{
295
298
  const { title, items } = payload;
296
299
  let safeTitle = title.replace(/,.*$/, '');
@@ -331,7 +334,51 @@ function renderG2CombineChart(container, options) {
331
334
  ...safeItems,
332
335
  ...sortedCombineItems
333
336
  ]) ?? null;
334
- if (content) {
337
+ if (content && isTooltipContent) {
338
+ const domEvent = event?.event ?? event;
339
+ const canvas = container.querySelector('canvas');
340
+ const canvasRect = canvas ? canvas.getBoundingClientRect() : container.getBoundingClientRect();
341
+ const canvasX = domEvent?.canvasX ?? domEvent?.x ?? 0;
342
+ const canvasY = domEvent?.canvasY ?? domEvent?.y ?? 0;
343
+ const clientX = canvasRect.left + canvasX;
344
+ const clientY = canvasRect.top + canvasY;
345
+ const offsetX = 12;
346
+ const offsetY = 12;
347
+ const applyPosition = ()=>{
348
+ let el = content;
349
+ while(el && el.parentElement){
350
+ const p = el.parentElement;
351
+ if (p.classList?.contains('g2-tooltip')) {
352
+ el = p;
353
+ break;
354
+ }
355
+ el = p;
356
+ }
357
+ const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
358
+ if (!wrapper) return;
359
+ const wRect = wrapper.getBoundingClientRect();
360
+ const tooltipW = wRect.width || 260;
361
+ const tooltipH = wRect.height || 300;
362
+ const viewportWidth = window.innerWidth;
363
+ const viewportHeight = window.innerHeight;
364
+ let left = clientX + offsetX;
365
+ let top = clientY + offsetY;
366
+ if (left + tooltipW > viewportWidth - 10) left = clientX - tooltipW - offsetX;
367
+ if (top + tooltipH > viewportHeight - 10) top = clientY - tooltipH - offsetY;
368
+ if (left < 10) left = 10;
369
+ if (top < 10) top = 10;
370
+ wrapper.style.position = 'fixed';
371
+ wrapper.style.left = `${left}px`;
372
+ wrapper.style.top = `${top}px`;
373
+ wrapper.style.transform = 'none';
374
+ wrapper.style.pointerEvents = 'none';
375
+ wrapper.style.zIndex = '99999';
376
+ };
377
+ try {
378
+ applyPosition();
379
+ requestAnimationFrame(applyPosition);
380
+ } catch {}
381
+ } else if (content && !isTooltipContent) {
335
382
  const domEvent = event?.event ?? event;
336
383
  const clientX = domEvent?.clientX ?? domEvent?.x ?? 0;
337
384
  const clientY = domEvent?.clientY ?? domEvent?.y ?? 0;
@@ -100,6 +100,7 @@ export interface BaseChartProps {
100
100
  highlightDate?: string[];
101
101
  /** 是否为分组柱状(组合图等场景) */
102
102
  isGroup?: boolean;
103
+ isTooltipContent?: boolean;
103
104
  }
104
105
  /**
105
106
  * 业务组件 Props(可选,通过 Context 注入)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@publishfx/publish-chart",
3
- "version": "2.1.11",
3
+ "version": "2.1.13",
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": [