@publishfx/publish-chart 2.1.24 → 2.1.26

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

@@ -230,7 +230,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                             height: 12,
                             borderRadius: "50%",
                             transform: "translate(-50%, 0%)",
-                            background: item?.color,
                             zIndex: 999
                         },
                         pointP: item.pointP,

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

@@ -374,7 +374,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                             height: 12,
                             borderRadius: "50%",
                             transform: "translate(-50%, 0%)",
-                            background: item?.color,
                             zIndex: 999
                         },
                         pointP: item.pointP,

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

@@ -256,7 +256,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
                             height: 12,
                             borderRadius: "50%",
                             transform: "translate(-50%, 0%)",
-                            background: item?.color,
                             zIndex: 999
                         },
                         pointP: item.pointP,

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

@@ -275,9 +275,11 @@ export declare function applyLegendColor(view: any, options?: ApplyLegendColorOp
 export interface AuxiliaryLineItem {
     name: string;
     value: number;
-    axis?: 'left' | 'right';
+    axis?: 'left' | 'right' | '';
 }
 export interface ApplyAuxiliaryLineYOptions {
+    maxLeft?: number;
+    maxRight?: number;
     stroke?: string;
     strokeOpacity?: number;
     labelMaxLength?: number;

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

@@ -146,29 +146,26 @@ function applyLegendColor(view, options = {}) {
 }
 function applyAuxiliaryLineY(view, lines, options = {}) {
     if (!lines?.length) return;
-    const { labelMaxLength = 5 } = options;
+    const { labelMaxLength = 5, stroke = 'rgb(234, 54, 106)', maxLeft, maxRight } = options;
     lines.forEach((auxLine)=>{
         view.lineY().data([
             {
                 y: auxLine.value
             }
-        ]).encode('y', auxLine.value).style('stroke', 'rgb(234, 54, 106)').style('strokeOpacity', 1).style('opacity', 1).style('lineWidth', 2).style('shadowColor', 'transparent').animate(false).scale('y', {
+        ]).encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', 1).style('opacity', 1).style('lineWidth', 2).style('shadowColor', 'transparent').animate(false).scale('y', {
             key: auxLine?.axis === 'right' ? 'line' : 'main'
         }).axis('x', false).label({
             opacity: 1,
             dx: -20,
             dy: 0,
-            text: splitTextToMultiline(auxLine.name, labelMaxLength, '\n'),
+            text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
             position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
-            style: {
-                fill: 'red',
-                shadowColor: 'red',
-                fillOpacity: 1,
-                strokeOpacity: 1,
-                opacity: 1,
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0
+            render: (text)=>{
+                let top = auxLine?.name?.length > 5 ? -38 : -24;
+                if ((auxLine?.axis === 'left' || auxLine?.axis === '') && maxLeft && auxLine.value > 0.92 * maxLeft || auxLine?.axis === 'right' && maxRight && auxLine.value > 0.92 * maxRight) top = 0;
+                top += 'px';
+                return `<div style="background-color: rgba(255, 0, 102, 0.15); padding: 5px; border-radius: 5px;font-size: 12px;position: absolute;left: ${auxLine?.axis === 'right' ? '-75px' : '0px'}; top: ${top} ; display:inline-block; min-width: 65px; line-height: 14px; color: #FF0066;
+          font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`;
             }
         });
     });

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

@@ -131,7 +131,8 @@ function renderG2BarChart(container, options) {
         }
     });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
-        labelMaxLength: 5
+        labelMaxLength: 5,
+        maxLeft: maxY
     });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) interval.label({

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

@@ -5,7 +5,7 @@ const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
 const LINE_Y_FIELD = 'lineValue';
 function renderG2CombineChart(container, options) {
-    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;
+    const { data, nodeData, x, z: _z, maxLeft, maxRight, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isCompare = false, formatLabel, highlightDate = [], isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
     const chart = createChart({
         container,
         autoFit: true
@@ -17,7 +17,7 @@ function renderG2CombineChart(container, options) {
         animate: null
     });
     const view = getMainView(chart);
-    view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 10).attr('marginBottom', 16).animate(false);
+    view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 16).attr('marginBottom', 0).animate(false);
     view.data(data);
     const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
@@ -298,7 +298,10 @@ function renderG2CombineChart(container, options) {
         tipFontSize: '12px',
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
-    applyAuxiliaryLineY(view, auxiliaryLineData);
+    applyAuxiliaryLineY(view, auxiliaryLineData, {
+        maxLeft,
+        maxRight
+    });
     const nodeResult = applyNodeData(view, nodeData, x, 'groupValue');
     if (formatLabel) {
         if (isDataTag) {

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

@@ -117,7 +117,9 @@ function renderG2LineChart(container, options) {
         tipFontSize: '12px',
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
-    applyAuxiliaryLineY(view, auxiliaryLineData);
+    applyAuxiliaryLineY(view, auxiliaryLineData, {
+        maxLeft: maxY
+    });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) {
         line.label({

package/dist/core/ChartConfig.d.ts

@@ -1,3 +1,13 @@
+export declare const nodeMap: Map<number, {
+    des: string;
+    color: string;
+    bgc: string;
+}>;
+export declare const nodeTextMap: Map<string, {
+    type: number;
+    color: string;
+    bgc: string;
+}>;
 /**
  * 图表配置接口
  */
@@ -23,6 +33,12 @@ export interface ChartConfig {
         barPaddingRight?: number;
         horBarPaddingRight?: number;
     };
+    /** 节点映射表 */
+    nodeMap?: Map<number, {
+        des: string;
+        color: string;
+        bgc: string;
+    }>;
 }
 /**
  * 默认图表配置
@@ -36,13 +52,3 @@ export declare const getThemeColors: () => string[];
  * 合并配置
  */
 export declare const mergeChartConfig: (defaultConfig: ChartConfig, userConfig: Partial<ChartConfig>) => ChartConfig;
-export declare const nodeMap: Map<number, {
-    des: string;
-    color: string;
-    bgc: string;
-}>;
-export declare const nodeTextMap: Map<string, {
-    type: number;
-    color: string;
-    bgc: string;
-}>;

package/dist/core/ChartConfig.js

@@ -1,70 +1,4 @@
 import { getTheme } from "bizcharts";
-const defaultChartConfig = {
-    baseChartConfig: {
-        appendPadding: [
-            20,
-            0,
-            10,
-            0
-        ],
-        padding: 'auto',
-        autoFit: true,
-        limitInPlot: false,
-        forceUpdate: false,
-        animate: {
-            leave: false
-        }
-    },
-    theme: {
-        colors: [
-            '#5B8FF9',
-            '#5AD8A6',
-            '#5D7092',
-            '#F6BD16',
-            '#6F5EF9',
-            '#6DC8EC',
-            '#945FB9',
-            '#FF9845',
-            '#1E9493',
-            '#FF99C3',
-            '#8CD85A',
-            '#FE765E',
-            '#67A1FF',
-            '#D85ACB',
-            '#F95B8F'
-        ],
-        combineColors: [
-            '#FF8C00',
-            '#FFD700'
-        ]
-    },
-    layout: {
-        barPaddingRight: 10,
-        horBarPaddingRight: 50
-    }
-};
-const getThemeColors = ()=>{
-    try {
-        const theme = getTheme();
-        return theme.colors10 || defaultChartConfig.theme.colors;
-    } catch  {
-        return defaultChartConfig.theme.colors;
-    }
-};
-const mergeChartConfig = (defaultConfig, userConfig)=>({
-        baseChartConfig: {
-            ...defaultConfig.baseChartConfig,
-            ...userConfig.baseChartConfig
-        },
-        theme: {
-            ...defaultConfig.theme,
-            ...userConfig.theme
-        },
-        layout: {
-            ...defaultConfig.layout,
-            ...userConfig.layout
-        }
-    });
 const nodeMap = new Map([
     [
         1,
@@ -149,4 +83,71 @@ const nodeTextMap = new Map([
         }
     ]
 ]);
+const defaultChartConfig = {
+    baseChartConfig: {
+        appendPadding: [
+            20,
+            0,
+            10,
+            0
+        ],
+        padding: 'auto',
+        autoFit: true,
+        limitInPlot: false,
+        forceUpdate: false,
+        animate: {
+            leave: false
+        }
+    },
+    theme: {
+        colors: [
+            '#5B8FF9',
+            '#5AD8A6',
+            '#5D7092',
+            '#F6BD16',
+            '#6F5EF9',
+            '#6DC8EC',
+            '#945FB9',
+            '#FF9845',
+            '#1E9493',
+            '#FF99C3',
+            '#8CD85A',
+            '#FE765E',
+            '#67A1FF',
+            '#D85ACB',
+            '#F95B8F'
+        ],
+        combineColors: [
+            '#FF8C00',
+            '#FFD700'
+        ]
+    },
+    layout: {
+        barPaddingRight: 10,
+        horBarPaddingRight: 50
+    },
+    nodeMap
+};
+const getThemeColors = ()=>{
+    try {
+        const theme = getTheme();
+        return theme.colors10 || defaultChartConfig.theme.colors;
+    } catch  {
+        return defaultChartConfig.theme.colors;
+    }
+};
+const mergeChartConfig = (defaultConfig, userConfig)=>({
+        baseChartConfig: {
+            ...defaultConfig.baseChartConfig,
+            ...userConfig.baseChartConfig
+        },
+        theme: {
+            ...defaultConfig.theme,
+            ...userConfig.theme
+        },
+        layout: {
+            ...defaultConfig.layout,
+            ...userConfig.layout
+        }
+    });
 export { defaultChartConfig, getThemeColors, mergeChartConfig, nodeMap, nodeTextMap };

package/package.json

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