@publishfx/publish-chart 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+**2.0.3** feat(chart): G2GaugeChart设置value文本的颜色和阈值保持一致
+- 2026-02-05T15:06:47+08:00 [feat(chart): G2GaugeChart设置value文本的颜色和阈值保持一致](http://lf.git.oa.mt/publish_platform/web/publish/commit/6b80990920484818132164048278789e6f6aa740)
+
+**2.0.2** feat(chart): 优化G2GaugeChart组件，仅基于数据驱动UI，不涉及业务逻辑
+- 2026-02-05T14:07:11+08:00 [feat(chart): 优化G2GaugeChart组件，仅基于数据驱动UI，不涉及业务逻辑](http://lf.git.oa.mt/publish_platform/web/publish/commit/ad3728038c692c40a03dcb6a38f7b77b0952cccc)
+
 **2.0.1** feat(chart): 使用svg重写gauge图表组件
 - 2026-02-04T11:18:21+08:00 [feat(chart): 使用svg重写gauge图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/47a981e483d2a4df79d473e1053d9f9ea927ee10)
 - 2026-02-03T19:25:53+08:00 [feat(chart): 修改ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/40e4e8f44c7ff02b079974eca52ece225180329c)

package/README.md

@@ -1,13 +1,13 @@
-# @moonton/publish-chart
+# @publishfx/publish-chart
 
 基于新架构设计的 React 图表组件库，支持离线分析模块使用的所有图表类型。
 
 ## 安装
 
 ```bash
-npm install @moonton/publish-chart
+npm install @publishfx/publish-chart
 # 或
-pnpm add @moonton/publish-chart
+pnpm add @publishfx/publish-chart
 ```
 
 ## 特性
@@ -30,7 +30,7 @@ import {
   defaultChartConfig, 
   createFormatterService, 
   createDataTransformService 
-} from '@moonton/publish-chart';
+} from '@publishfx/publish-chart';
 
 const chartServices = {
   formatter: createFormatterService(),
@@ -53,7 +53,7 @@ const chartServices = {
 如果你只需要自定义业务组件，其他服务使用库的默认配置，可以这样：
 
 ```tsx
-import { ChartProvider } from '@moonton/publish-chart';
+import { ChartProvider } from '@publishfx/publish-chart';
 
 // 只定义 businessComponents，其他使用默认值
 const chartServices = {
@@ -73,7 +73,7 @@ const chartServices = {
 ### 2. 使用图表组件
 
 ```tsx
-import { BarChart, LineChart, BarLineChart } from '@moonton/publish-chart';
+import { BarChart, LineChart, BarLineChart } from '@publishfx/publish-chart';
 
 <BarChart
   data={data}

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

@@ -7,12 +7,10 @@ export interface G2GaugeChartProps {
     value: number;
     min?: number;
     max: number;
-    target?: number;
     thresholds?: number[] | Array<{
         value: number;
         color: string;
     }>;
-    ticks?: number[];
     height?: number;
     showPercent?: boolean;
     formatter?: (value: number, percent: number) => string;

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

@@ -1,69 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
-const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height = 300, showPercent = true, formatter, tickFormatter, pointerColor = "#c5c5c5", thresholdColors = [
-    "#9596d9",
-    "#FF9F4C",
-    "#56c2f3"
-], tooltip })=>{
+import { safeFormat, safeTickFormat, validateAndNormalizeProps } from "./gaugePropsValidator.js";
+const G2GaugeChart = (props)=>{
     const containerRef = useRef(null);
-    const scaleTicks = useMemo(()=>{
-        if (ticks && ticks.length > 0) return ticks;
-        if (target) return [
-            min,
-            Math.round(0.5 * target),
-            target,
-            Math.round(0.9 * max),
-            max
-        ];
-        const step = (max - min) / 4;
-        return [
-            min,
-            Math.round(min + step),
-            Math.round(min + 2 * step),
-            Math.round(min + 3 * step),
-            max
-        ];
-    }, [
-        min,
-        max,
-        target,
-        ticks
-    ]);
-    const thresholdValues = useMemo(()=>{
-        let baseThresholds = [];
-        if (thresholds) {
-            if (Array.isArray(thresholds) && thresholds.length > 0 && "number" == typeof thresholds[0]) baseThresholds = [
-                ...thresholds
-            ];
-            else if (Array.isArray(thresholds) && thresholds.length > 0 && "object" == typeof thresholds[0]) baseThresholds = thresholds.map((t)=>t.value);
-        } else if (target) baseThresholds = [
-            Math.round(0.6 * target),
-            Math.round(0.9 * target),
-            target
-        ];
-        else {
-            const step = (max - min) / 3;
-            baseThresholds = [
-                Math.round(min + step),
-                Math.round(min + 2 * step),
-                max
-            ];
-        }
-        if (baseThresholds.length > 0 && baseThresholds[baseThresholds.length - 1] !== max) baseThresholds.push(max);
-        return baseThresholds;
-    }, [
-        min,
-        max,
-        target,
-        thresholds
-    ]);
-    const thresholdColorArray = useMemo(()=>{
-        if (thresholds && Array.isArray(thresholds) && thresholds.length > 0 && "object" == typeof thresholds[0]) return thresholds.map((t)=>t.color);
-        return thresholdColors;
-    }, [
-        thresholds,
-        thresholdColors
+    const normalizedProps = useMemo(()=>validateAndNormalizeProps(props), [
+        props.value,
+        props.min,
+        props.max,
+        props.thresholds,
+        props.thresholdColors,
+        props.height,
+        props.showPercent,
+        props.formatter,
+        props.tickFormatter,
+        props.pointerColor,
+        props.tooltip
     ]);
+    const { value, min, max, thresholds: thresholdValues, colors: thresholdColorArray, height, showPercent, formatter, tickFormatter, pointerColor, tooltip } = normalizedProps;
     useEffect(()=>{
         if (!containerRef.current) return;
         const startAngle = -1.2 * Math.PI;
@@ -83,41 +36,47 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             const innerRadius = 0.85 * radius;
             const outerRadius = 0.95 * radius;
             const totalAngle = endAngle - startAngle;
-            const padding = 50;
+            const topPadding = 40;
+            const bottomPadding = -30;
+            const leftPadding = 0;
+            const rightPadding = 0;
             let svgOverlay = containerRef.current.querySelector('svg.gauge-arc-overlay');
             if (svgOverlay) {
                 svgOverlay.innerHTML = '';
-                svgOverlay.setAttribute('width', String(width + 2 * padding));
-                svgOverlay.setAttribute('height', String(height + 2 * padding));
-                svgOverlay.setAttribute('viewBox', `0 0 ${width + 2 * padding} ${height + 2 * padding}`);
-                svgOverlay.style.top = `-${padding}px`;
-                svgOverlay.style.left = `-${padding}px`;
+                svgOverlay.setAttribute('width', String(width));
+                svgOverlay.setAttribute('height', String(height));
+                svgOverlay.setAttribute('viewBox', `-${leftPadding} -${topPadding} ${width + leftPadding + rightPadding} ${height + topPadding + bottomPadding}`);
+                svgOverlay.style.top = '0';
+                svgOverlay.style.left = '0';
             } else {
                 svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                 svgOverlay.setAttribute('class', 'gauge-arc-overlay');
-                svgOverlay.setAttribute('width', String(width + 2 * padding));
-                svgOverlay.setAttribute('height', String(height + 2 * padding));
-                svgOverlay.setAttribute('viewBox', `0 0 ${width + 2 * padding} ${height + 2 * padding}`);
+                svgOverlay.setAttribute('width', String(width));
+                svgOverlay.setAttribute('height', String(height));
+                svgOverlay.setAttribute('viewBox', `-${leftPadding} -${topPadding} ${width + leftPadding + rightPadding} ${height + topPadding + bottomPadding}`);
+                svgOverlay.style.position = 'absolute';
+                svgOverlay.style.top = '0';
+                svgOverlay.style.left = '0';
                 svgOverlay.style.pointerEvents = 'none';
                 svgOverlay.style.overflow = 'visible';
                 containerRef.current.appendChild(svgOverlay);
             }
             for(let i = 0; i < thresholdValues.length; i++){
-                const start = 0 === i ? min : thresholdValues[i - 1];
-                const end = thresholdValues[i];
-                const color = colors[i] || '#ccc';
+                const start = 0 === i ? min : thresholdValues[i - 1] < min ? min : thresholdValues[i - 1];
+                const end = thresholdValues[i] < min ? min : thresholdValues[i];
+                const color = thresholdColorArray[i] || '#ccc';
                 const startAngleValue = startAngle + (start - min) / (max - min) * totalAngle;
                 const endAngleValue = startAngle + (end - min) / (max - min) * totalAngle;
                 const largeArcFlag = Math.abs(endAngleValue - startAngleValue) > Math.PI ? 1 : 0;
                 const sweepFlag = 1;
-                const startX = centerX + padding + outerRadius * Math.cos(startAngleValue);
-                const startY = centerY + padding + outerRadius * Math.sin(startAngleValue);
-                const endX = centerX + padding + outerRadius * Math.cos(endAngleValue);
-                const endY = centerY + padding + outerRadius * Math.sin(endAngleValue);
-                const innerStartX = centerX + padding + innerRadius * Math.cos(startAngleValue);
-                const innerStartY = centerY + padding + innerRadius * Math.sin(startAngleValue);
-                const innerEndX = centerX + padding + innerRadius * Math.cos(endAngleValue);
-                const innerEndY = centerY + padding + innerRadius * Math.sin(endAngleValue);
+                const startX = centerX + outerRadius * Math.cos(startAngleValue);
+                const startY = centerY + outerRadius * Math.sin(startAngleValue);
+                const endX = centerX + outerRadius * Math.cos(endAngleValue);
+                const endY = centerY + outerRadius * Math.sin(endAngleValue);
+                const innerStartX = centerX + innerRadius * Math.cos(startAngleValue);
+                const innerStartY = centerY + innerRadius * Math.sin(startAngleValue);
+                const innerEndX = centerX + innerRadius * Math.cos(endAngleValue);
+                const innerEndY = centerY + innerRadius * Math.sin(endAngleValue);
                 const pathString = [
                     `M ${startX} ${startY}`,
                     `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`,
@@ -135,12 +94,12 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             const tickLength = 0.05 * radius;
             const textOffset = 0.15 * radius;
             const startAngleValue = startAngle;
-            const startX = centerX + padding + innerRadius * Math.cos(startAngleValue);
-            const startY = centerY + padding + innerRadius * Math.sin(startAngleValue);
-            const startTickEndX = centerX + padding + (outerRadius + tickLength) * Math.cos(startAngleValue);
-            const startTickEndY = centerY + padding + (outerRadius + tickLength) * Math.sin(startAngleValue);
-            const startTextX = centerX + padding + (outerRadius + textOffset) * Math.cos(startAngleValue);
-            const startTextY = centerY + padding + (outerRadius + textOffset) * Math.sin(startAngleValue);
+            const startX = centerX + innerRadius * Math.cos(startAngleValue);
+            const startY = centerY + innerRadius * Math.sin(startAngleValue);
+            const startTickEndX = centerX + (outerRadius + tickLength) * Math.cos(startAngleValue);
+            const startTickEndY = centerY + (outerRadius + tickLength) * Math.sin(startAngleValue);
+            const startTextX = centerX + (outerRadius + textOffset) * Math.cos(startAngleValue);
+            const startTextY = centerY + (outerRadius + textOffset) * Math.sin(startAngleValue);
             const startTickLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             startTickLine.setAttribute('x1', String(startX));
             startTickLine.setAttribute('y1', String(startY));
@@ -156,9 +115,9 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             startText.setAttribute('font-size', '14');
             startText.setAttribute('text-anchor', 'middle');
             startText.setAttribute('dominant-baseline', 'middle');
-            startText.textContent = tickFormatter ? tickFormatter(min) : String(min);
+            startText.textContent = safeTickFormat(tickFormatter, min, String(min));
             svgOverlay.appendChild(startText);
-            const thresholdTextOffset = 0.12 * radius;
+            const thresholdTextOffset = 0.05 * radius;
             const minThresholdDistance = (max - min) * 0.1;
             const textOffsets = [];
             for(let i = 0; i < thresholdValues.length - 1; i++){
@@ -183,27 +142,27 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
                 const thresholdValue = thresholdValues[i];
                 const currentTextOffset = textOffsets[i];
                 const thresholdAngle = startAngle + (thresholdValue - min) / (max - min) * totalAngle;
-                const thresholdTextX = centerX + padding + (outerRadius + currentTextOffset) * Math.cos(thresholdAngle);
-                const thresholdTextY = centerY + padding + (outerRadius + currentTextOffset) * Math.sin(thresholdAngle);
+                const thresholdTextX = centerX + (outerRadius + currentTextOffset) * Math.cos(thresholdAngle);
+                const thresholdTextY = centerY + (outerRadius + currentTextOffset) * Math.sin(thresholdAngle);
                 const rotationAngle = (180 * thresholdAngle / Math.PI + 90) % 360;
                 const thresholdText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                 thresholdText.setAttribute('x', String(thresholdTextX));
                 thresholdText.setAttribute('y', String(thresholdTextY));
                 thresholdText.setAttribute('fill', '#1d2129');
-                thresholdText.setAttribute('font-size', '14');
+                thresholdText.setAttribute('font-size', '12');
                 thresholdText.setAttribute('text-anchor', 'middle');
                 thresholdText.setAttribute('dominant-baseline', 'middle');
                 thresholdText.setAttribute('transform', `rotate(${rotationAngle} ${thresholdTextX} ${thresholdTextY})`);
-                thresholdText.textContent = tickFormatter ? tickFormatter(thresholdValue) : String(thresholdValue);
+                thresholdText.textContent = safeTickFormat(tickFormatter, thresholdValue, String(thresholdValue));
                 svgOverlay.appendChild(thresholdText);
             }
             const endAngleValue = endAngle;
-            const endX = centerX + padding + innerRadius * Math.cos(endAngleValue);
-            const endY = centerY + padding + innerRadius * Math.sin(endAngleValue);
-            const endTickEndX = centerX + padding + (outerRadius + tickLength) * Math.cos(endAngleValue);
-            const endTickEndY = centerY + padding + (outerRadius + tickLength) * Math.sin(endAngleValue);
-            const endTextX = centerX + padding + (outerRadius + textOffset) * Math.cos(endAngleValue);
-            const endTextY = centerY + padding + (outerRadius + textOffset) * Math.sin(endAngleValue);
+            const endX = centerX + innerRadius * Math.cos(endAngleValue);
+            const endY = centerY + innerRadius * Math.sin(endAngleValue);
+            const endTickEndX = centerX + (outerRadius + tickLength) * Math.cos(endAngleValue);
+            const endTickEndY = centerY + (outerRadius + tickLength) * Math.sin(endAngleValue);
+            const endTextX = centerX + (outerRadius + textOffset) * Math.cos(endAngleValue);
+            const endTextY = centerY + (outerRadius + textOffset) * Math.sin(endAngleValue);
             const endTickLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             endTickLine.setAttribute('x1', String(endX));
             endTickLine.setAttribute('y1', String(endY));
@@ -219,19 +178,19 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             endText.setAttribute('font-size', '14');
             endText.setAttribute('text-anchor', 'middle');
             endText.setAttribute('dominant-baseline', 'middle');
-            endText.textContent = tickFormatter ? tickFormatter(max) : String(max);
+            endText.textContent = safeTickFormat(tickFormatter, max, String(max));
             svgOverlay.appendChild(endText);
             const pointerValue = Math.min(Math.max(value, min), max);
             const pointerAngle = startAngle + (pointerValue - min) / (max - min) * totalAngle;
             const pointerStartCircleRadius = 4;
             const pointerLength = 0.6 * outerRadius;
-            const pointerStartX = centerX + padding + pointerStartCircleRadius * Math.cos(pointerAngle);
-            const pointerStartY = centerY + padding + pointerStartCircleRadius * Math.sin(pointerAngle);
-            const pointerEndX = centerX + padding + (pointerStartCircleRadius + pointerLength) * Math.cos(pointerAngle);
-            const pointerEndY = centerY + padding + (pointerStartCircleRadius + pointerLength) * Math.sin(pointerAngle);
+            const pointerStartX = centerX + pointerStartCircleRadius * Math.cos(pointerAngle);
+            const pointerStartY = centerY + pointerStartCircleRadius * Math.sin(pointerAngle);
+            const pointerEndX = centerX + (pointerStartCircleRadius + pointerLength) * Math.cos(pointerAngle);
+            const pointerEndY = centerY + (pointerStartCircleRadius + pointerLength) * Math.sin(pointerAngle);
             const pointerStartCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            pointerStartCircle.setAttribute('cx', String(centerX + padding));
-            pointerStartCircle.setAttribute('cy', String(centerY + padding));
+            pointerStartCircle.setAttribute('cx', String(centerX));
+            pointerStartCircle.setAttribute('cy', String(centerY));
             pointerStartCircle.setAttribute('r', String(pointerStartCircleRadius));
             pointerStartCircle.setAttribute('fill', '#fff');
             pointerStartCircle.setAttribute('stroke', pointerColor);
@@ -246,17 +205,24 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             pointerLine.setAttribute('stroke-width', '3');
             pointerLine.setAttribute('stroke-linecap', 'round');
             svgOverlay.appendChild(pointerLine);
-            const displayValue = formatter ? formatter(value, value / max * 100) : tickFormatter ? tickFormatter(value) : String(value);
-            const percent = (value / max * 100).toFixed(2);
-            const textCenterX = centerX + padding;
-            const textCenterY = centerY + padding + 0.7 * radius;
-            const valueTextY = textCenterY - 10;
-            const percentTextY = textCenterY + 10;
+            const percent = value / max * 100;
+            const fallbackValue = safeTickFormat(tickFormatter, value, String(value));
+            const displayValue = safeFormat(formatter, value, percent, fallbackValue);
+            const percentDisplay = percent.toFixed(2);
+            const textCenterX = centerX;
+            const textCenterY = centerY + 0.3 * radius;
+            const textSpacing = 0.18 * radius;
+            const valueTextY = textCenterY + +textSpacing;
+            const percentTextY = textCenterY + 2 * textSpacing;
+            const valueFontSize = Math.max(14, 0.12 * radius);
+            const percentFontSize = Math.max(12, 0.09 * radius);
             const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             valueText.setAttribute('x', String(textCenterX));
             valueText.setAttribute('y', String(valueTextY));
-            valueText.setAttribute('fill', colors[0] || '#9596d9');
-            valueText.setAttribute('font-size', '18');
+            const thresholdIndex = thresholdValues.findIndex((threshold)=>value <= threshold);
+            const thresholdColor = thresholdColorArray[thresholdIndex] || '#9596d9';
+            valueText.setAttribute('fill', thresholdColor);
+            valueText.setAttribute('font-size', String(valueFontSize));
             valueText.setAttribute('font-weight', 'bold');
             valueText.setAttribute('text-anchor', 'middle');
             valueText.setAttribute('dominant-baseline', 'middle');
@@ -267,10 +233,10 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
                 percentText.setAttribute('x', String(textCenterX));
                 percentText.setAttribute('y', String(percentTextY));
                 percentText.setAttribute('fill', '#8c8c8c');
-                percentText.setAttribute('font-size', '14');
+                percentText.setAttribute('font-size', String(percentFontSize));
                 percentText.setAttribute('text-anchor', 'middle');
                 percentText.setAttribute('dominant-baseline', 'middle');
-                percentText.textContent = `占比: ${percent}%`;
+                percentText.textContent = `占比: ${percentDisplay}%`;
                 svgOverlay.appendChild(percentText);
             }
             if (tooltip) {
@@ -291,11 +257,21 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
                     tooltipElement.style.whiteSpace = 'nowrap';
                     containerRef.current.appendChild(tooltipElement);
                 }
-                const tooltipLabel = tooltip.label || '值';
-                const tooltipValue = tooltip.formatter ? tooltip.formatter(value) : value.toLocaleString();
+                const tooltipLabel = tooltip.label;
+                let tooltipValue;
+                if (tooltip.formatter) try {
+                    tooltipValue = tooltip.formatter(value);
+                } catch (error) {
+                    if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] tooltip.formatter 函数执行出错，使用降级值", {
+                        error,
+                        value
+                    });
+                    tooltipValue = value.toLocaleString();
+                }
+                else tooltipValue = value.toLocaleString();
                 tooltipElement.innerHTML = `
-          <div style="color: #666; margin-bottom: 4px;">${tooltipLabel}</div>
-          <div style="color: #1d2129; font-weight: 500;">${tooltipValue}</div>
+          ${tooltipLabel ? `<div style="color: #666; margin-bottom: 4px;">${tooltipLabel}</div>` : ''}
+          ${tooltipValue ? `<div style="color: #1d2129; font-weight: 500;">${tooltipValue}</div>` : ''}
         `;
                 const handleMouseMove = (e)=>{
                     if (!tooltipElement || !containerRef.current) return;
@@ -304,7 +280,6 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
                     const mouseY = e.clientY;
                     if (mouseX >= svgOverlayRect.left && mouseX <= svgOverlayRect.right && mouseY >= svgOverlayRect.top && mouseY <= svgOverlayRect.bottom) {
                         const containerRect = containerRef.current.getBoundingClientRect();
-                        console.log('containerRect', containerRect, mouseX, mouseY);
                         const relativeX = mouseX - containerRect.left;
                         const relativeY = mouseY - containerRect.top;
                         const offsetX = 10;
@@ -343,24 +318,15 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
             }
         };
     }, [
-        value,
-        min,
-        max,
-        thresholdValues,
-        thresholdColorArray,
-        scaleTicks,
-        height,
-        formatter,
-        tickFormatter,
-        showPercent,
-        pointerColor,
-        tooltip
+        normalizedProps
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         style: {
             width: "100%",
-            height: `${height}px`
+            height: `${height}px`,
+            position: 'relative',
+            overflow: 'visible'
         }
     });
 };

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

@@ -0,0 +1,42 @@
+/**
+ * G2GaugeChart Props 验证和规范化工具
+ * 用于优雅处理调用方传入的异常参数
+ */
+import { G2GaugeChartProps } from "./G2GaugeChart";
+export interface NormalizedGaugeProps {
+    value: number;
+    min: number;
+    max: number;
+    thresholds: number[];
+    colors: string[];
+    height: number;
+    showPercent: boolean;
+    formatter?: (value: number, percent: number) => string;
+    tickFormatter?: (value: number) => string;
+    pointerColor: string;
+    tooltip?: G2GaugeChartProps["tooltip"];
+}
+/**
+ * 验证和规范化 G2GaugeChart 的 props
+ *
+ * 处理以下异常情况：
+ * 1. min >= max：自动调整或使用默认值
+ * 2. value 超出范围：限制在 [min, max] 内
+ * 3. thresholds 不合法：自动生成或过滤无效值
+ * 4. colors 不合法：使用默认颜色
+ * 5. height 异常：使用默认值
+ * 6. formatter 函数异常：使用降级方案
+ *
+ * @param props 原始 props
+ * @returns 规范化后的 props
+ */
+export declare function validateAndNormalizeProps(props: G2GaugeChartProps): NormalizedGaugeProps;
+/**
+ * 安全调用 formatter 函数
+ * 如果 formatter 抛出错误，返回降级值
+ */
+export declare function safeFormat(formatter: ((value: number, percent: number) => string) | undefined, value: number, percent: number, fallback: string): string;
+/**
+ * 安全调用 tickFormatter 函数
+ */
+export declare function safeTickFormat(tickFormatter: ((value: number) => string) | undefined, value: number, fallback: string): string;

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

@@ -0,0 +1,139 @@
+function isValidColor(color) {
+    if (!color || "string" != typeof color) return false;
+    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) return true;
+    if (/^rgba?\(/.test(color)) return true;
+    const s = new Option().style;
+    s.color = color;
+    return "" !== s.color;
+}
+function validateAndNormalizeProps(props) {
+    const isDev = "development" === process.env.NODE_ENV;
+    let { min = 0, max } = props;
+    if ("number" != typeof max || !isFinite(max)) {
+        if (isDev) console.warn("[G2GaugeChart] max 必须是有效的数字，使用默认值 100", {
+            max
+        });
+        max = 100;
+    }
+    if ("number" != typeof min || !isFinite(min)) {
+        if (isDev) console.warn("[G2GaugeChart] min 必须是有效的数字，使用默认值 0", {
+            min
+        });
+        min = 0;
+    }
+    if (min >= max) {
+        if (isDev) console.warn(`[G2GaugeChart] min (${min}) 必须小于 max (${max})，自动调整为 max - 1`, {
+            min,
+            max
+        });
+        min = max - 1;
+        if (min < 0) {
+            min = 0;
+            max = 100;
+            if (isDev) console.warn("[G2GaugeChart] min 和 max 都无效，使用默认值 min=0, max=100");
+        }
+    }
+    let { value } = props;
+    if ("number" != typeof value || !isFinite(value)) {
+        if (isDev) console.warn(`[G2GaugeChart] value 必须是有效的数字，使用默认值 (min + max) / 2`, {
+            value
+        });
+        value = (min + max) / 2;
+    }
+    const originalValue = value;
+    value = Math.min(Math.max(value, min), max);
+    if (originalValue !== value && isDev) console.warn(`[G2GaugeChart] value (${originalValue}) 超出范围 [${min}, ${max}]，已限制为 ${value}`, {
+        originalValue,
+        min,
+        max,
+        clampedValue: value
+    });
+    let thresholds = [];
+    const defaultColors = [
+        '#9596d9',
+        '#FF9F4C',
+        '#56c2f3'
+    ];
+    if (props.thresholds) {
+        if (Array.isArray(props.thresholds) && props.thresholds.length > 0) {
+            if ("number" == typeof props.thresholds[0]) thresholds = [
+                ...props.thresholds
+            ];
+            else if ("object" == typeof props.thresholds[0]) thresholds = props.thresholds.map((t)=>t.value);
+        }
+    }
+    thresholds = thresholds.filter((t)=>"number" == typeof t && isFinite(t)).filter((t)=>t > min && t < max).sort((a, b)=>a - b);
+    thresholds = Array.from(new Set(thresholds));
+    if (thresholds[thresholds.length - 1] !== max) thresholds.push(max);
+    let colors = [];
+    if (props.thresholds && Array.isArray(props.thresholds) && props.thresholds.length > 0 && "object" == typeof props.thresholds[0]) colors = props.thresholds.map((t)=>t.color).filter((c)=>!!c && isValidColor(c));
+    if (0 === colors.length && props.thresholdColors) colors = props.thresholdColors.filter((c)=>isValidColor(c));
+    if (0 === colors.length) {
+        colors = [
+            ...defaultColors
+        ];
+        if (isDev) console.warn("[G2GaugeChart] 未提供有效的颜色，使用默认颜色", {
+            colors
+        });
+    }
+    while(colors.length < thresholds.length){
+        const lastColor = colors[colors.length - 1];
+        colors.push(lastColor || defaultColors[0]);
+    }
+    let height = props.height ?? 300;
+    if ("number" != typeof height || !isFinite(height) || height <= 0) {
+        if (isDev) console.warn(`[G2GaugeChart] height 必须是大于 0 的数字，使用默认值 300`, {
+            height: props.height
+        });
+        height = 300;
+    }
+    height = Math.min(Math.max(height, 100), 2000);
+    let pointerColor = props.pointerColor ?? "#c5c5c5";
+    if (!isValidColor(pointerColor)) {
+        if (isDev) console.warn(`[G2GaugeChart] pointerColor 无效，使用默认值 #c5c5c5`, {
+            pointerColor: props.pointerColor
+        });
+        pointerColor = "#c5c5c5";
+    }
+    const formatter = props.formatter;
+    const tickFormatter = props.tickFormatter;
+    return {
+        value,
+        min,
+        max,
+        thresholds,
+        colors,
+        height,
+        showPercent: props.showPercent ?? true,
+        formatter,
+        tickFormatter,
+        pointerColor,
+        tooltip: props.tooltip
+    };
+}
+function safeFormat(formatter, value, percent, fallback) {
+    if (!formatter) return fallback;
+    try {
+        return formatter(value, percent);
+    } catch (error) {
+        if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] formatter 函数执行出错，使用降级值", {
+            error,
+            value,
+            percent
+        });
+        return fallback;
+    }
+}
+function safeTickFormat(tickFormatter, value, fallback) {
+    if (!tickFormatter) return fallback;
+    try {
+        return tickFormatter(value);
+    } catch (error) {
+        if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] tickFormatter 函数执行出错，使用降级值", {
+            error,
+            value
+        });
+        return fallback;
+    }
+}
+export { safeFormat, safeTickFormat, validateAndNormalizeProps };

package/package.json

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

package/dist/components/g2/base/G2GaugeChart.example.d.ts

@@ -1,10 +0,0 @@
-/**
- * G2 Gauge 图表使用示例
- * 展示如何自定义 scale 和阈值区间
- */
-import React from 'react';
-export declare const Example1_TargetBased: React.FC;
-export declare const Example2_CustomThresholds: React.FC;
-export declare const Example3_CustomThresholdsWithColors: React.FC;
-export declare const Example4_TargetWithCustomScale: React.FC;
-export declare const Example5_Simple: React.FC;

package/dist/components/g2/base/G2GaugeChart.example.js

@@ -1,88 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import G2GaugeChart from "./G2GaugeChart.js";
-const Example1_TargetBased = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        target: 160000,
-        showPercent: true
-    });
-const Example2_CustomThresholds = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        thresholds: [
-            60000,
-            120000,
-            180000
-        ],
-        thresholdColors: [
-            '#FF4D4F',
-            '#FFA940',
-            '#FFC53D',
-            '#52C41A'
-        ],
-        ticks: [
-            0,
-            50000,
-            100000,
-            150000,
-            200000
-        ],
-        showPercent: true
-    });
-const Example3_CustomThresholdsWithColors = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        thresholds: [
-            {
-                value: 50000,
-                color: '#FF4D4F'
-            },
-            {
-                value: 100000,
-                color: '#FFA940'
-            },
-            {
-                value: 150000,
-                color: '#FFC53D'
-            },
-            {
-                value: 200000,
-                color: '#52C41A'
-            }
-        ],
-        ticks: [
-            0,
-            50000,
-            100000,
-            150000,
-            200000
-        ],
-        showPercent: true
-    });
-const Example4_TargetWithCustomScale = ()=>{
-    const max = 200000;
-    const target = 160000;
-    return /*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: max,
-        target: target,
-        thresholdColors: [
-            '#FF4D4F',
-            '#FFA940',
-            '#FFC53D',
-            '#52C41A'
-        ],
-        formatter: (value, percent)=>`${value}\n完成度: ${percent.toFixed(1)}%`
-    });
-};
-const Example5_Simple = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        max: 200000,
-        showPercent: true
-    });
-export { Example1_TargetBased, Example2_CustomThresholds, Example3_CustomThresholdsWithColors, Example4_TargetWithCustomScale, Example5_Simple };