@wavemaker/react-native-echarts 1.0.0-dev.0

package/gauge/digital/digital.gauge.js

@@ -0,0 +1,213 @@
+import { withResponsiveContainer } from '../../chart-container';
+import { useChartTheme, withChartTheme } from '../../chart-theme.context';
+import React, { useEffect, useRef, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import Svg, { Defs, G, LinearGradient, Path, Stop, Text as SvgText } from 'react-native-svg';
+// SVG Gauge Component
+const SVGGaugeChart = ({ value, max = 100, showInnerArc = false, width, height, animationDuration = 1000, colors, axisBgColor: axisBgColorProp, axisWidth: axisWidthProp, tickColor: tickColorProp, }) => {
+    const { theme: chartTheme } = useChartTheme(undefined, colors);
+    // Use theme colors; allow overrides from props
+    const gradientColors = chartTheme.series.map(item => item.color);
+    const inactiveTickColor = tickColorProp ?? axisBgColorProp ?? chartTheme.axis.r.tickColor;
+    const labelColor = chartTheme.axis.r.tickLabelColor;
+    const innerTickColor = chartTheme.axis.r.lineColor;
+    const arcColor = axisBgColorProp ?? chartTheme.grid.r.lineColor;
+    const dimensions = useWindowDimensions();
+    const [animatedValue, setAnimatedValue] = useState(value);
+    const currentValueRef = useRef(value); // Stores the current animated value synchronously
+    const animationFrameRef = useRef(undefined);
+    const startTimeRef = useRef(undefined);
+    // Animation effect when value changes
+    useEffect(() => {
+        // Start from the current animated position (stored in ref)
+        const startValue = currentValueRef.current;
+        const endValue = value;
+        const startTime = new Date().getTime();
+        startTimeRef.current = startTime;
+        const animate = () => {
+            const currentTime = new Date().getTime();
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / animationDuration, 1);
+            // Easing function (easeOutCubic for smooth deceleration)
+            const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+            const easedProgress = easeOutCubic(progress);
+            const currentValue = startValue + (endValue - startValue) * easedProgress;
+            // Update both state and ref synchronously
+            currentValueRef.current = currentValue;
+            setAnimatedValue(currentValue);
+            if (progress < 1) {
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+        };
+        // Cancel any ongoing animation
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [value, animationDuration]);
+    // If height not provided, use 90% of available height
+    // If width not provided, use the same as height to keep it square
+    const calculatedHeight = height ?? dimensions.height * 0.9;
+    const calculatedWidth = width ?? calculatedHeight;
+    const size = Math.min(calculatedWidth, calculatedHeight);
+    const strokeWidth = 12;
+    const center = size / 2;
+    const radius = (size - strokeWidth) / 2 - 20;
+    const tickStrokeWidth = axisWidthProp ?? 3;
+    const startAngle = -135;
+    const endAngle = 135;
+    const totalAngle = endAngle - startAngle;
+    const percentage = (animatedValue / max) * 100;
+    const valueAngle = (percentage / 100) * totalAngle;
+    const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+        const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+        return {
+            x: centerX + radius * Math.cos(angleInRadians),
+            y: centerY + radius * Math.sin(angleInRadians),
+        };
+    };
+    const describeArc = (centerX, centerY, radius, startAngle, endAngle) => {
+        const start = polarToCartesian(centerX, centerY, radius, endAngle);
+        const end = polarToCartesian(centerX, centerY, radius, startAngle);
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+        return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+    };
+    // Helper function to interpolate between two colors
+    const interpolateColor = (color1, color2, factor) => {
+        const hex = (color) => {
+            const hex = color.replace('#', '');
+            return {
+                r: parseInt(hex.substring(0, 2), 16),
+                g: parseInt(hex.substring(2, 4), 16),
+                b: parseInt(hex.substring(4, 6), 16),
+            };
+        };
+        const c1 = hex(color1);
+        const c2 = hex(color2);
+        const r = Math.round(c1.r + factor * (c2.r - c1.r));
+        const g = Math.round(c1.g + factor * (c2.g - c1.g));
+        const b = Math.round(c1.b + factor * (c2.b - c1.b));
+        return `rgb(${r}, ${g}, ${b})`;
+    };
+    // Helper function to get color from gradient array based on position
+    const getGradientColor = (factor) => {
+        if (gradientColors.length === 0)
+            return '#FF6B6B';
+        if (gradientColors.length === 1)
+            return gradientColors[0];
+        // Determine which two colors to interpolate between
+        const scaledPosition = factor * (gradientColors.length - 1);
+        const lowerIndex = Math.floor(scaledPosition);
+        const upperIndex = Math.min(lowerIndex + 1, gradientColors.length - 1);
+        const localFactor = scaledPosition - lowerIndex;
+        return interpolateColor(gradientColors[lowerIndex], gradientColors[upperIndex], localFactor);
+    };
+    // Generate tick marks
+    const numTicks = 50;
+    const ticks = [];
+    const activeTickCount = Math.round((valueAngle / totalAngle) * numTicks);
+    const outerTickLength = 20;
+    for (let i = 0; i <= numTicks; i++) {
+        const angle = startAngle + (i / numTicks) * totalAngle;
+        const isActive = i <= activeTickCount;
+        const isMajor = i % 5 === 0;
+        const tickLength = outerTickLength;
+        const outerPoint = polarToCartesian(center, center, radius + 10, angle);
+        const innerPoint = polarToCartesian(center, center, radius + 10 - tickLength, angle);
+        // Calculate gradient factor for active ticks
+        let tickColor;
+        if (isActive) {
+            const gradientFactor = numTicks > 0 ? i / numTicks : 0;
+            tickColor = getGradientColor(gradientFactor);
+        }
+        else {
+            tickColor = inactiveTickColor;
+        }
+        ticks.push(<Path key={i} d={`M ${outerPoint.x} ${outerPoint.y} L ${innerPoint.x} ${innerPoint.y}`} stroke={tickColor} strokeWidth={tickStrokeWidth} strokeLinecap="round"/>);
+    }
+    // Generate scale labels and inner ticks
+    const scaleLabels = [];
+    const innerTicks = [];
+    const majorTickPositions = [0, 20, 40, 60, 80, 100];
+    const labelRadius = radius - 40;
+    const innerTickLength = 4;
+    const minorTickLength = 2;
+    const gapFromOuterTicks = 4; // Gap between outer and inner elements
+    const innerTickOuterRadius = radius - outerTickLength - gapFromOuterTicks;
+    // Add major ticks and labels
+    for (const labelValue of majorTickPositions) {
+        const labelAngle = startAngle + (labelValue / max) * totalAngle;
+        const labelPosition = polarToCartesian(center, center, labelRadius, labelAngle);
+        // Add scale label
+        scaleLabels.push(<SvgText key={`label-${labelValue}`} x={labelPosition.x} y={labelPosition.y} textAnchor="middle" fontSize="12" fill={labelColor}>
+        {labelValue}
+      </SvgText>);
+        // Add major inner tick mark
+        const tickOuterPoint = polarToCartesian(center, center, innerTickOuterRadius, labelAngle);
+        const tickInnerPoint = polarToCartesian(center, center, innerTickOuterRadius - innerTickLength, labelAngle);
+        innerTicks.push(<Path key={`inner-tick-${labelValue}`} d={`M ${tickOuterPoint.x} ${tickOuterPoint.y} L ${tickInnerPoint.x} ${tickInnerPoint.y}`} stroke={innerTickColor} strokeWidth={2} strokeLinecap="round"/>);
+    }
+    // Add minor ticks (9 ticks between each major tick)
+    // Major ticks are at 0, 20, 40, 60, 80, 100
+    // So we need ticks at every 2 units, excluding the major positions
+    for (let value = 0; value <= max; value += 2) {
+        // Skip if this is a major tick position
+        if (majorTickPositions.includes(value))
+            continue;
+        const tickAngle = startAngle + (value / max) * totalAngle;
+        const tickOuterPoint = polarToCartesian(center, center, innerTickOuterRadius, tickAngle);
+        const tickInnerPoint = polarToCartesian(center, center, innerTickOuterRadius - minorTickLength, tickAngle);
+        innerTicks.push(<Path key={`inner-minor-tick-${value}`} d={`M ${tickOuterPoint.x} ${tickOuterPoint.y} L ${tickInnerPoint.x} ${tickInnerPoint.y}`} stroke={inactiveTickColor} strokeWidth={1} strokeLinecap="round"/>);
+    }
+    // Calculate the animated end angle for the outer arc
+    const animatedEndAngle = startAngle + valueAngle;
+    const outerArcRadius = radius + 10;
+    return (<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <Defs>
+        <LinearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <Stop offset="0%" stopColor={gradientColors[0]} stopOpacity="1"/>
+          <Stop offset="100%" stopColor={gradientColors[gradientColors.length - 1]} stopOpacity="1"/>
+        </LinearGradient>
+        
+        {/* Radial gradient for a more dynamic look */}
+        <LinearGradient id="outerArcGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <Stop offset="0%" stopColor={gradientColors[0]} stopOpacity="0.8"/>
+          <Stop offset="100%" stopColor={gradientColors[gradientColors.length - 1]} stopOpacity="0.8"/>
+        </LinearGradient>
+      </Defs>
+      
+
+      {/* Tick marks */}
+      <G>{ticks}</G>
+
+      {/* Inner arc connecting the inner ticks (from 0 to 100) */}
+      {showInnerArc && (<Path d={describeArc(center, center, innerTickOuterRadius, startAngle, endAngle)} fill="none" stroke={arcColor} strokeWidth={1} opacity={0.5}/>)}
+
+      {/* Inner scale ticks */}
+      <G>{innerTicks}</G>
+
+      {/* Scale labels */}
+      <G>{scaleLabels}</G>
+
+      {/* Value display */}
+      <SvgText x={center} y={center + 10} textAnchor="middle" fontSize="56" fontWeight="bold" fill={chartTheme.axis.r.tickLabelColor}>
+        {Math.round(animatedValue)}
+      </SvgText>
+      
+      {/* Label */}
+      <SvgText x={center} y={center + 30} textAnchor="middle" fontSize="14" fill={labelColor}>
+        Value
+      </SvgText>
+    </Svg>);
+};
+const ChartComponent = ({ value = 46, min = 0, max = 90, width, height, axisBgColor, axisWidth, tickColor, showInnerArc, animationDuration, ...props }) => {
+    return (<SVGGaugeChart value={value} max={max} width={width} height={height} colors={props.colors} axisBgColor={axisBgColor} axisWidth={axisWidth} tickColor={tickColor} showInnerArc={showInnerArc} animationDuration={animationDuration}/>);
+};
+export const DigitalGauge = Object.assign(withResponsiveContainer(withChartTheme(ChartComponent), 'value'), {
+    displayName: 'DigitalGauge',
+});

package/gauge/gauge.types.d.ts

@@ -0,0 +1,51 @@
+import type { ChartTheme } from '../chart-theme.context';
+/**
+ * Common props shared by all gauge chart components.
+ * Individual gauge components extend this interface with their specific props.
+ */
+export interface BaseGaugeProps {
+    /**
+     * Current value to display on the gauge.
+     */
+    value: number;
+    /**
+     * Minimum value of the gauge scale.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the gauge scale.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Width of the chart in pixels.
+     */
+    width?: number;
+    /**
+     * Height of the chart in pixels.
+     */
+    height?: number;
+    /**
+     * Partial theme override for customizing chart appearance.
+     */
+    theme?: Partial<ChartTheme>;
+    /**
+     * Colors for the chart.
+     * @default theme.itemStyles.map(item => item.color)
+     */
+    colors?: string[];
+    /**
+     * Background color for the axis/track.
+     */
+    axisBgColor?: string;
+    /**
+     * Width of the axis line in pixels.
+     */
+    axisWidth?: number;
+    /**
+     * Color for tick marks and split lines.
+     */
+    tickColor?: string;
+}
+//# sourceMappingURL=gauge.types.d.ts.map

package/gauge/gauge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.types.d.ts","sourceRoot":"","sources":["../../../../components/chart/gauge/gauge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/gauge/index.d.ts

@@ -0,0 +1,6 @@
+export type { BaseGaugeProps } from './gauge.types';
+export { SimpleGauge } from './simple/simple.gauge';
+export { DigitalGauge } from './digital/digital.gauge';
+export { SpeedometerGauge } from './speedometer/speedometer.gauge';
+export { RadialGauge } from './radial/radial.gauge';
+//# sourceMappingURL=index.d.ts.map

package/gauge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/gauge/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/gauge/index.js

@@ -0,0 +1,4 @@
+export { SimpleGauge } from './simple/simple.gauge';
+export { DigitalGauge } from './digital/digital.gauge';
+export { SpeedometerGauge } from './speedometer/speedometer.gauge';
+export { RadialGauge } from './radial/radial.gauge';

package/gauge/radial/radial.gauge.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { BaseGaugeProps } from '../gauge.types';
+/**
+ * Props for the RadialGauge component.
+ * A composite gauge with both radial progress bar and traditional gauge display.
+ */
+interface RadialGaugeProps extends BaseGaugeProps {
+}
+export declare const RadialGauge: ((props: RadialGaugeProps & {
+    theme?: Partial<import("../..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=radial.gauge.d.ts.map

package/gauge/radial/radial.gauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/radial/radial.gauge.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAUrD;;;GAGG;AACH,UAAU,gBAAiB,SAAQ,cAAc;CAAG;AAgSpD,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/gauge/radial/radial.gauge.js

@@ -0,0 +1,284 @@
+import { withResponsiveContainer } from '../../chart-container';
+import { useChartTheme, withChartTheme } from '../../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { BarChart } from 'echarts/charts';
+import { GaugeChart } from 'echarts/charts';
+import { PolarComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+// Register necessary components for this chart
+echarts.use([
+    SkiaRenderer,
+    GaugeChart,
+    BarChart,
+    PolarComponent,
+]);
+const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240, axisBgColor: axisBgColorProp, axisWidth: axisWidthProp, tickColor: tickColorProp, ...props }) => {
+    const { theme: chartTheme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const radialChartRef = useRef(null);
+    // Radial background chart option (textRadialOption)
+    const radialOption = useMemo(() => {
+        // Calculate radius as percentage of the smaller dimension with gap
+        const minDim = Math.min(width, height);
+        const innerRadius = minDim * 0.30; // ~77px at 240px - inner edge of radial ring
+        const outerRadius = minDim * 0.48; // ~115px at 240px - outer edge of radial ring
+        const backgroundColor = axisBgColorProp ?? chartTheme.axis.r.tickColor;
+        const progressColor = chartTheme.series[0].color;
+        return {
+            polar: {
+                center: ['50%', '50%'],
+                radius: [innerRadius, outerRadius],
+            },
+            angleAxis: {
+                max: max,
+                startAngle: 225,
+                endAngle: -45,
+                clockwise: true,
+                show: false
+            },
+            radiusAxis: {
+                type: 'category',
+                data: ['Data'],
+                show: false
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: [max],
+                    coordinateSystem: 'polar',
+                    name: 'Background',
+                    tooltip: {
+                        show: false,
+                    },
+                    itemStyle: {
+                        color: backgroundColor,
+                        borderRadius: [50, 50],
+                    },
+                    animation: false,
+                    barWidth: '50%',
+                    emphasis: {
+                        disabled: true,
+                    },
+                },
+                {
+                    type: 'bar',
+                    data: [value],
+                    coordinateSystem: 'polar',
+                    name: 'Value',
+                    itemStyle: {
+                        color: progressColor,
+                        borderRadius: [50, 50],
+                    },
+                    barWidth: '50%',
+                    barGap: '-100%',
+                    emphasis: {
+                        disabled: true,
+                    },
+                },
+            ]
+        };
+    }, [chartTheme, value, max, width, height, axisBgColorProp]);
+    // Gauge option (progressArcOption)
+    const gaugeOption = useMemo(() => {
+        // Gauge radius smaller than radial inner ring to create a gap
+        const minDim = Math.min(width, height);
+        const gaugeRadius = minDim * 0.32; // ~65px at 240px - creates gap with radial inner ring (77px)
+        const axisLineColor = axisBgColorProp ?? chartTheme.axis.r.tickColor;
+        const pointerColor = chartTheme.axis.r.lineColor;
+        const tickColor = tickColorProp ?? chartTheme.axis.r.tickColor;
+        const splitLineColor = tickColorProp ?? chartTheme.axis.r.tickColor;
+        const labelColor = chartTheme.axis.r.tickLabelColor;
+        const anchorColor = chartTheme.axis.r.lineColor;
+        const anchorBorderColor = tickColorProp ?? chartTheme.axis.r.tickColor;
+        const valueColor = chartTheme.axis.r.tickLabelColor;
+        const unitColor = chartTheme.axis.r.tickLabelColor;
+        return {
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '50%'],
+                    radius: gaugeRadius,
+                    startAngle: 225,
+                    endAngle: -45,
+                    min: min,
+                    max: max,
+                    splitNumber: 5,
+                    axisLine: {
+                        show: false,
+                        distance: 1,
+                        length: 8,
+                        lineStyle: {
+                            width: axisWidthProp ?? 1,
+                            color: [[1, axisLineColor]],
+                        },
+                    },
+                    pointer: {
+                        length: '80%',
+                        width: 8,
+                        icon: 'path://M-4,0 L-2,-50 A1, 1 0 0 1 2, -50 L4,0 A1, 1 0 0 1 -4, 0 Z',
+                        itemStyle: {
+                            color: pointerColor,
+                        },
+                    },
+                    axisTick: {
+                        distance: 1,
+                        length: 4,
+                        splitNumber: 16,
+                        lineStyle: {
+                            color: tickColor,
+                            width: 0.5,
+                        },
+                    },
+                    splitLine: {
+                        distance: 1,
+                        length: 8,
+                        lineStyle: {
+                            color: splitLineColor,
+                            width: 1,
+                        },
+                    },
+                    axisLabel: {
+                        show: true,
+                        distance: 16,
+                        fontSize: 12,
+                        color: labelColor,
+                        formatter: function (value) {
+                            if (value === 20 || value === 80) {
+                                return value.toString();
+                            }
+                            return '';
+                        },
+                    },
+                    anchor: {
+                        show: true,
+                        showAbove: true,
+                        size: 8,
+                        itemStyle: {
+                            color: anchorColor,
+                            borderColor: anchorBorderColor,
+                            borderWidth: 3,
+                            shadowBlur: 3,
+                            shadowColor: 'rgba(0,0,0,0.15)',
+                        },
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        formatter: function (value) {
+                            return '{value|' + Math.round(value) + '}{unit|/100}';
+                        },
+                        offsetCenter: [0, '70%'],
+                        rich: {
+                            value: {
+                                fontSize: 40,
+                                fontWeight: 'bold',
+                                color: valueColor,
+                            },
+                            unit: {
+                                verticalAlign: 'bottom',
+                                fontSize: 16,
+                                color: unitColor,
+                                fontWeight: 'normal',
+                            },
+                        }
+                    },
+                    data: [{ value: value }],
+                }
+            ],
+            style: {
+                backgroundColor: 'transparent',
+            },
+        };
+    }, [chartTheme, value, min, max, width, height, axisBgColorProp, axisWidthProp, tickColorProp]);
+    // Initialize radial background chart
+    useEffect(() => {
+        let chart;
+        if (radialChartRef.current) {
+            try {
+                chart = echarts.init(radialChartRef.current, 'light', {
+                    width: width,
+                    height: height,
+                });
+                chart.setOption(radialOption);
+            }
+            catch (error) {
+                console.warn('Radial chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Radial chart disposal error:', error);
+                }
+            }
+        };
+    }, [radialOption, width, height]);
+    // Initialize gauge chart (same size as radial chart)
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width: width,
+                    height: height,
+                });
+                chart.setOption(gaugeOption);
+            }
+            catch (error) {
+                console.warn('Gauge chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Gauge chart disposal error:', error);
+                }
+            }
+        };
+    }, [gaugeOption, width, height]);
+    return (<View style={[styles.container, { width, height }]}>
+      <View style={styles.radialChart}>
+        <SkiaChart ref={radialChartRef}/>
+      </View>
+      <View style={styles.gaugeChart}>
+        <SkiaChart ref={chartRef}/>
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    radialChart: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+    gaugeChart: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+});
+export const RadialGauge = Object.assign(withResponsiveContainer(withChartTheme(ChartComponent), 'value'), {
+    displayName: 'RadialGauge',
+});

package/gauge/simple/simple.gauge.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { BaseGaugeProps } from '../gauge.types';
+/**
+ * Props for the SimpleGauge component.
+ * A gauge chart with customizable title and detail text labels.
+ */
+interface SimpleGaugeProps extends BaseGaugeProps {
+    /**
+     * Title text displayed on the gauge.
+     * @default 'Metric'
+     */
+    title?: string;
+    /**
+     * Detail text showing the value.
+     * @default '30%'
+     */
+    detailText?: string;
+}
+export declare const SimpleGauge: ((props: SimpleGaugeProps & {
+    theme?: Partial<import("../..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=simple.gauge.d.ts.map

package/gauge/simple/simple.gauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/simple/simple.gauge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQrD;;;GAGG;AACH,UAAU,gBAAiB,SAAQ,cAAc;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2GD,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}