@publishfx/publish-chart 2.1.1 → 2.1.2

package/dist/adapters/DataAdapter.d.ts

@@ -1,5 +1,5 @@
 export interface TransformConfig {
-    type: 'bar' | 'groupBar' | 'line' | 'barLine' | 'groupCompare';
+    type: 'bar' | 'groupBar' | 'line' | 'barLine' | 'groupBarLine' | 'groupCompare';
     x?: string;
     y?: string;
     z?: string;
@@ -30,6 +30,10 @@ export declare class DataAdapter {
      * 柱状折线组合图数据转换
      */
     private static transformForBarLine;
+    /**
+   * 分组柱状折线组合图数据转换
+   */
+    private static transformForGroupBarLine;
     /**
      * 分组对比图数据转换
      */

package/dist/adapters/DataAdapter.js

@@ -11,6 +11,8 @@ class DataAdapter {
                 return this.transformForLine(data, config);
             case 'barLine':
                 return this.transformForBarLine(data, config);
+            case 'groupBarLine':
+                return this.transformForGroupBarLine(data, config);
             case 'groupCompare':
                 return this.transformForGroupCompare(data, config);
             default:
@@ -129,6 +131,71 @@ class DataAdapter {
         });
         return dv.rows;
     }
+    static transformForGroupBarLine(data, config) {
+        const ds = new lib();
+        const dv = ds.createView().source(data);
+        const tdv = ds.createView().source(data);
+        if (config.y && config.x) {
+            dv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    return row;
+                }
+            });
+            tdv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    return row;
+                }
+            });
+            tdv.transform({
+                type: 'filter',
+                callback (row) {
+                    return !row.isCombine;
+                }
+            });
+            tdv.transform({
+                type: 'filter',
+                callback (row) {
+                    return !row[config.y] || '-' !== row[config.y];
+                }
+            });
+            tdv.transform({
+                type: 'aggregate',
+                fields: [
+                    config.y
+                ],
+                groupBy: [
+                    config.x
+                ],
+                operations: [
+                    'sum'
+                ],
+                as: [
+                    'total'
+                ]
+            });
+            tdv.transform({
+                type: 'sort',
+                callback (a, b) {
+                    return b.total - a.total;
+                }
+            });
+            const xKey = config.x ?? 'x';
+            const sortData = tdv.rows.map((item)=>item[xKey]);
+            if (config.isDescend) dv.transform({
+                type: 'sort',
+                callback (a, b) {
+                    if (-1 === sortData.indexOf(a[xKey])) return 1;
+                    if (-1 === sortData.indexOf(b[xKey])) return -1;
+                    return sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]);
+                }
+            });
+        }
+        return dv.rows;
+    }
     static transformForGroupCompare(data, _config) {
         return data;
     }

package/dist/components/g2/base/G2CombineChart.js

@@ -60,18 +60,26 @@ const lineColors = [
 const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
-}, indicators = [], auxiliaryLineData, highlightDate, timeRange })=>{
+}, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
-    console.log("G2CombineChart props:", data, x, y, z, indicatorMap, indicators, legend, config, nodeSetting);
+    console.log("G2CombineChart props:", data, x, y, z, indicators, legend, config, nodeSetting);
     const themeColors = contextConfig?.theme?.colors || [];
     const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
-    const safeLegend = "groupType" !== legend ? legend || y : y;
+    const safeLegend = useMemo(()=>{
+        if (isGroup) return legend || 'groupType';
+        if ("groupType" === legend) return y;
+        return legend || y;
+    }, [
+        isGroup,
+        legend,
+        y
+    ]);
     const safeZ = z;
     const safeY = "groupValue";
     const isCompare = timeRange?.compareStartTime !== "";
     const chartConfig = config || {};
-    const { isDataTag = false, isLegend = true } = chartConfig;
+    const { isDataTag = false, isLegend = true, isDescend = false } = chartConfig;
     const [xyList, setXYList] = useState([]);
     const [activeIds, setActiveIds] = useState([]);
     const [legendItems, setLegendItems] = useState([]);
@@ -81,7 +89,12 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             data = result;
         }
         console.log("G2CombineChart transformedData2:", data);
-        const result = DataAdapter.transform(data, "barLine", {
+        const result = isGroup ? DataAdapter.transform(data, "groupBarLine", {
+            type: "barLine",
+            x,
+            y: safeY,
+            isDescend
+        }) : DataAdapter.transform(data, "barLine", {
             type: "barLine",
             x,
             y: safeY,
@@ -89,6 +102,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         });
         return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
     }, [
+        isGroup,
         data,
         x,
         safeY,
@@ -98,11 +112,13 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
     ]);
     console.log("G2CombineChart transformedData:", transformedData);
     const { maxY } = useMemo(()=>{
-        const yValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
+        const key = isGroup ? "total" : safeY;
+        const yValues = transformedData.filter((item)=>"-" !== item[key] && void 0 !== item[key] && null !== item[key]).map((item)=>Number(item[key]) || 0);
         return {
             maxY: yValues.length > 0 ? Math.max(...yValues) : 0
         };
     }, [
+        isGroup,
         transformedData,
         safeY
     ]);
@@ -124,18 +140,20 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         const items = groupTypes.map((id, index)=>{
             const colorIndex = index;
             const indicatorId = id.split("_")[0];
-            const color = 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
+            const isCombine = "true" === id.split("_")[1];
+            const color = isGroup ? themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
             return {
                 id,
-                label: getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
+                label: isGroup ? isCombine ? getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) : indicatorId : getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
                 color,
                 isCompare: String(indicatorId).includes("_compare"),
-                symbol: 0 === colorIndex ? "square" : "line"
+                symbol: isGroup ? isCombine ? 'line' : 'square' : 0 === colorIndex ? "square" : "line"
             };
         });
         setLegendItems(items);
         if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
     }, [
+        isGroup,
         transformedData,
         safeIndicatorMap,
         themeColors,
@@ -187,8 +205,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                         ...i,
                         color: i.color ?? themeColors[0] ?? "#5B8FF9"
                     }));
-                console.log("safeItems:", safeItems);
+                safeItems = safeItems.filter((i)=>i.indicatorId);
                 react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
+                    isGroupBar: true,
                     title: title,
                     items: safeItems,
                     safeIndicatorMap: safeIndicatorMap,
@@ -210,7 +229,10 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                     setViewOffset((layout.paddingLeft ?? 0) + (layout.marginLeft ?? 0));
                 }
             },
-            lineColors
+            lineColors,
+            isGroup,
+            legendItems,
+            indicatorId: y
         });
         chartRef.current = chart;
         if (onChartClick) chart.on("element:click", (e)=>{
@@ -237,7 +259,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         safeIndicatorMap,
         formatter,
         formatAxis,
-        onChartClick
+        onChartClick,
+        isGroup,
+        legendItems
     ]);
     if (!z) return /*#__PURE__*/ jsx("div", {
         style: {

package/dist/components/g2/base/g2combine.d.ts

@@ -64,6 +64,15 @@ export interface RenderG2CombineChartOptions {
     onChartRender?: (chartProps: {
         layout: any;
     }) => void;
+    /** 是否为分组柱状（影响 legend / tooltip 文案） */
+    isGroup?: boolean;
+    /** 图例项列表（用于 tooltip 取色与文案） */
+    legendItems?: Array<{
+        id: string;
+        [key: string]: any;
+    }>;
+    /** 当前指标 id（用于 tooltip 展示） */
+    indicatorId?: string;
 }
 /**
  * 在容器上渲染 G2 柱状 + 折线组合图，返回 Chart 实例便于 destroy/更新

package/dist/components/g2/base/g2combine.js

@@ -4,7 +4,7 @@ const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
 const LINE_Y_FIELD = 'lineValue';
 function renderG2CombineChart(container, options) {
-    const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender } = options;
+    const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
     const chart = createChart({
         container,
         height,
@@ -36,13 +36,21 @@ function renderG2CombineChart(container, options) {
             ...item,
             [BAR_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
-    const intervalMaxY = intervalData.reduce((max, item)=>Math.max(max, item[BAR_Y_FIELD]), 0);
-    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform({
+    const intervalMaxY = intervalData.reduce((max, item)=>{
+        const key = isGroup ? "total" : BAR_Y_FIELD;
+        return Math.max(max, item[key]);
+    }, 0);
+    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform(isGroup ? {
+        type: 'stackY',
+        reverse: true
+    } : {
         type: 'dodgeX'
     }).style({
         columnWidthRatio: 0.5,
         fill: (datum)=>{
             const groupType = String(datum.groupType ?? '');
+            const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
+            if (isGroup) return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
             if (groupType.includes('_compare')) return {
                 image: lines({
                     backgroundColor: '#fff',
@@ -84,7 +92,20 @@ function renderG2CombineChart(container, options) {
     });
     console.log('tooltip:', barColor, isCompare);
     interval.tooltip({
-        items: [
+        items: isGroup ? [
+            (datum)=>{
+                const groupType = String(datum.groupType ?? '');
+                const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
+                return {
+                    value: datum[Y_AXIS_FIELD],
+                    name: datum['groupType'],
+                    indicatorId,
+                    channel: Y_AXIS_FIELD,
+                    color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
+                    percent: `${(100 * Number(datum.percent)).toFixed(2)}%`
+                };
+            }
+        ].filter(Boolean) : [
             (datum)=>datum.groupType.includes('_compare') ? false : {
                     value: datum[BAR_Y_FIELD],
                     name: datum['groupType'],

package/dist/components/g2/base/g2groupbar.js

@@ -53,7 +53,8 @@ function renderG2GroupBarChart(container, options) {
                 transform: 'rotate(-30deg)'
             };
             return themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9";
-        }
+        },
+        stroke: 'transparent'
     });
     applyAxisX(view, {
         title: false,

package/dist/core/ChartTypes.d.ts

@@ -98,6 +98,8 @@ export interface BaseChartProps {
     auxiliaryLineData?: AuxiliaryLineData[];
     /** 高亮日期数组 */
     highlightDate?: string[];
+    /** 是否为分组柱状（组合图等场景） */
+    isGroup?: boolean;
 }
 /**
  * 业务组件 Props（可选，通过 Context 注入）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [