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

package/gauge/simple/simple.gauge.js

@@ -0,0 +1,102 @@
+import { withResponsiveContainer } from '../../chart-container';
+import { useChartTheme, withChartTheme } from '../../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { GaugeChart } from 'echarts/charts';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+// Register necessary components for this chart
+echarts.use([
+    SkiaRenderer,
+    GaugeChart,
+]);
+const ChartComponent = ({ value, min = 0, max = 100, width = 220, height = 240, title = 'Metric', detailText = '30%', axisBgColor: axisBgColorProp, axisWidth = 50, tickColor: tickColorProp, ...props }) => {
+    const { theme: chartTheme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const option = useMemo(() => {
+        const backgroundColor = axisBgColorProp ?? chartTheme.axis.r.tickColor;
+        const mainColor = chartTheme.series[0].color;
+        const pointerColor = chartTheme.axis.r.lineColor;
+        const titleColor = tickColorProp ?? chartTheme.axis.r.tickLabelColor;
+        const detailColor = tickColorProp ?? chartTheme.axis.r.tickLabelColor;
+        return {
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '65%'],
+                    radius: '90%',
+                    startAngle: 170,
+                    endAngle: 10,
+                    min: min,
+                    max: max,
+                    axisLine: {
+                        lineStyle: {
+                            width: axisWidth,
+                            color: [
+                                [value / max, mainColor],
+                                [1, backgroundColor],
+                            ],
+                        },
+                    },
+                    pointer: {
+                        length: '70%',
+                        width: 8,
+                        icon: 'path://M-2,0 L0,-51 L 2,0 A1, 1 0 0 1 -2, 0 Z',
+                        itemStyle: {
+                            color: pointerColor,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    title: {
+                        offsetCenter: [0, '85%'],
+                        fontSize: 13,
+                        fontWeight: '600',
+                        color: titleColor,
+                    },
+                    detail: {
+                        offsetCenter: [0, '115%'],
+                        fontSize: 11,
+                        color: detailColor,
+                    },
+                    data: [{ value: value, name: title, detail: { formatter: detailText } }],
+                },
+            ],
+        };
+    }, [chartTheme, value, min, max, title, detailText, axisBgColorProp, axisWidth, tickColorProp]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width: width,
+                    height: height,
+                });
+                chart.setOption(option);
+            }
+            catch (error) {
+                console.warn('Chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef}/>;
+};
+export const SimpleGauge = Object.assign(withResponsiveContainer(withChartTheme(ChartComponent), 'value'), {
+    displayName: 'SimpleGauge',
+});

package/gauge/speedometer/speedometer.gauge.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { BaseGaugeProps } from '../gauge.types';
+/**
+ * Props for the SpeedometerGauge component.
+ * A semi-circular gauge chart with color-coded segments and modern design.
+ */
+interface SpeedometerGaugeProps extends BaseGaugeProps {
+    /**
+     * Array of colors for the axis segments.
+     * If not provided, uses theme colors.
+     * Example: ['#e74c3c', '#3498db', '#2ecc71']
+     */
+    axisColors?: string[];
+    /**
+     * Array of endpoint values for each color segment.
+     * The length should match axisColors length.
+     * Each value represents the endpoint (threshold) for that color segment.
+     * Example: [40, 80, 120] means:
+     *   - First color: 0 to 40
+     *   - Second color: 40 to 80
+     *   - Third color: 80 to 120
+     * If not provided, segments are divided evenly based on max value.
+     */
+    axisColorLengths?: number[];
+}
+export declare const SpeedometerGauge: ((props: SpeedometerGaugeProps & {
+    theme?: Partial<import("../..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=speedometer.gauge.d.ts.map

package/gauge/speedometer/speedometer.gauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"speedometer.gauge.d.ts","sourceRoot":"","sources":["../../../../../components/chart/gauge/speedometer/speedometer.gauge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQrD;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,cAAc;IACpD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AA2PD,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}

package/gauge/speedometer/speedometer.gauge.js

@@ -0,0 +1,241 @@
+import { withResponsiveContainer } from '../../chart-container';
+import { useChartTheme, withChartTheme } from '../../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { GaugeChart } from 'echarts/charts';
+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,
+]);
+const ChartComponent = ({ value = 85, min = 0, max = 100, width = 400, height = 250, axisColors, axisColorLengths, axisBgColor = 'transparent', axisWidth = 30, tickColor: tickColorProp, ...props }) => {
+    const { theme: chartTheme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const axisRef = useRef(null);
+    const axisOption = useMemo(() => {
+        return {
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '50%'], // Positioned lower to show semi-circle with flat base at bottom
+                    radius: '90%',
+                    startAngle: 200, // Start from left (0 position)
+                    endAngle: -20, // End at right (100 position) - creates top semi-circle
+                    min: min,
+                    max: max,
+                    splitNumber: 6, // 10 major divisions (0, 10, 20, ..., 100)
+                    axisLine: {
+                        lineStyle: {
+                            width: 50,
+                            color: [[1, axisBgColor]],
+                        },
+                    },
+                    pointer: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    detail: {
+                        show: false, // Hide the detail text to match the image
+                    },
+                    data: [{ value: max }],
+                }
+            ]
+        };
+    }, [max, min, axisBgColor, axisWidth]);
+    const option = useMemo(() => {
+        const pointerColor = chartTheme.axis.r.lineColor || '#1e3a8a'; // Use axis line color for needle
+        const whiteColor = '#ffffff';
+        const tickColor = tickColorProp || chartTheme.axis.r.tickColor || chartTheme.grid.r.lineColor || '#666666'; // Use prop or theme tick color
+        const labelColor = chartTheme.axis.r.tickLabelColor || '#666666'; // Use theme label color
+        const backgroundColor = chartTheme.axis.r.tickColor || '#DDDDDD'; // Background color from theme
+        // Determine colors to use
+        let colors;
+        if (axisColors && axisColors.length > 0) {
+            colors = axisColors;
+        }
+        else {
+            // Fall back to theme colors
+            colors = [
+                chartTheme.series[0].color,
+                chartTheme.series.length > 1 ? chartTheme.series[1].color : chartTheme.series[0].color
+            ];
+        }
+        // Determine segment endpoints
+        let endpoints;
+        if (axisColorLengths && axisColorLengths.length > 0) {
+            endpoints = axisColorLengths;
+        }
+        else {
+            // Default: divide evenly based on number of colors
+            const segmentSize = (max - min) / colors.length;
+            endpoints = colors.map((_, index) => min + (index + 1) * segmentSize);
+        }
+        // Ensure endpoints don't exceed max and match colors length
+        const numSegments = Math.min(colors.length, endpoints.length);
+        const finalEndpoints = endpoints.slice(0, numSegments).map(endpoint => Math.min(endpoint, max));
+        const finalColors = colors.slice(0, numSegments);
+        // Build color array for ECharts (as percentage thresholds)
+        const axisLineColors = finalEndpoints.map((endpoint, index) => [
+            endpoint / max,
+            finalColors[index],
+        ]);
+        // Ensure the last segment goes to 1.0 (100%)
+        if (axisLineColors.length > 0 && axisLineColors[axisLineColors.length - 1][0] < 1) {
+            axisLineColors[axisLineColors.length - 1][0] = 1;
+        }
+        return {
+            backgroundColor: 'transparent',
+            series: [
+                {
+                    type: 'gauge',
+                    center: ['50%', '50%'], // Positioned lower to show semi-circle with flat base at bottom
+                    radius: '90%',
+                    startAngle: 200, // Start from left (0 position)
+                    endAngle: -20, // End at right (100 position) - creates top semi-circle
+                    min: min,
+                    max: max,
+                    splitNumber: (max - min) / 10, // 10 major divisions (0, 10, 20, ..., 100)
+                    axisLine: {
+                        lineStyle: {
+                            width: axisWidth,
+                            color: axisLineColors,
+                        },
+                    },
+                    pointer: {
+                        itemStyle: {
+                            color: pointerColor,
+                        },
+                        length: '70%',
+                        width: 4,
+                        icon: 'path://M-2,0 L0,-50 L2,0 A1,1 0 0,1 -2,0 Z', // Triangular pointer
+                    },
+                    axisTick: {
+                        distance: 0,
+                        length: 0,
+                        splitNumber: 20, // More tick marks for finer divisions
+                        lineStyle: {
+                            color: tickColor,
+                            width: 1,
+                        },
+                    },
+                    splitLine: {
+                        distance: 0,
+                        length: 10,
+                        lineStyle: {
+                            color: tickColor,
+                            width: 1.5,
+                        },
+                        show: function (value) {
+                            return value % 20 === 0;
+                        },
+                    },
+                    axisLabel: {
+                        show: true,
+                        distance: axisWidth,
+                        color: labelColor,
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                        formatter: function (value) {
+                            return value % 20 === 0 ? value.toString() : '';
+                        },
+                    },
+                    anchor: {
+                        show: true,
+                        showAbove: true,
+                        size: 14,
+                        itemStyle: {
+                            color: whiteColor,
+                            borderColor: pointerColor,
+                            borderWidth: 2,
+                            shadowBlur: 4,
+                            shadowColor: 'rgba(0, 0, 0, 0.2)',
+                        },
+                    },
+                    detail: {
+                        show: false, // Hide the detail text to match the image
+                    },
+                    data: [{ value: value }],
+                }
+            ],
+        };
+    }, [chartTheme, value, min, max, axisColors, axisColorLengths, axisWidth, tickColorProp]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width: width,
+                    height: height,
+                });
+                chart.setOption(option);
+            }
+            catch (error) {
+                console.warn('Chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    useEffect(() => {
+        let chart;
+        if (axisRef.current) {
+            chart = echarts.init(axisRef.current, 'light', {
+                width: width,
+                height: height,
+            });
+        }
+        chart.setOption(axisOption);
+        return () => {
+            if (chart) {
+                chart.dispose();
+            }
+        };
+    }, [axisOption, width, height]);
+    return (<View style={[styles.container, { width, height }]}>
+      {/* Blue transparent background overlay */}
+      <View style={styles.chartContainer}>
+        <SkiaChart ref={axisRef}/>
+        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%' }}>
+          <SkiaChart ref={chartRef}/>
+        </View>
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    chartContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+});
+export const SpeedometerGauge = Object.assign(withResponsiveContainer(withChartTheme(ChartComponent), 'value'), {
+    displayName: 'SpeedometerGauge',
+});

package/geo/geo-chart.d.ts

@@ -0,0 +1,15 @@
+import type { GeoChartProps } from './geo-chart.props';
+import React from 'react';
+import type { GeoJSONMap } from './geo-chart.props';
+export type { GeoChartProps, GeoChartSelectEvent, GeoDataItem, GeoJSONMap } from './geo-chart.props';
+/** Optional context to provide mapJson without passing as prop (avoids Storybook serialization issues). */
+export declare const GeoMapJsonContext: React.Context<GeoJSONMap | null>;
+export declare const GeoChart: ((props: GeoChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=geo-chart.d.ts.map

package/geo/geo-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geo-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/geo-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAoC,MAAM,mBAAmB,CAAC;AAKzF,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAErG,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,kCAAyC,CAAC;AAuNxE,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}

package/geo/geo-chart.js

@@ -0,0 +1,200 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { MapChart } from 'echarts/charts';
+import { TooltipComponent, VisualMapComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import worldJson from '../../../data/world.json';
+/** Optional context to provide mapJson without passing as prop (avoids Storybook serialization issues). */
+export const GeoMapJsonContext = createContext(null);
+echarts.use([
+    TooltipComponent,
+    VisualMapComponent,
+    SkiaRenderer,
+    MapChart,
+]);
+const DEFAULT_MAP_NAME = 'world';
+const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME, width = 400, height = 300, showLegend = true, showHighlighter = true, tooltipFormatter, visualMapMin, visualMapMax, visualMapMode = 'continuous', piecewisePieces, onSelect, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const contextMapJson = useContext(GeoMapJsonContext);
+    const mapJson = mapJsonProp ?? contextMapJson ?? worldJson;
+    useEffect(() => {
+        if (mapJson?.type === 'FeatureCollection' && mapJson.features?.length) {
+            try {
+                echarts.registerMap(mapName, mapJson);
+            }
+            catch (e) {
+                console.warn('GeoChart: registerMap failed', e);
+            }
+        }
+    }, [mapName, mapJson]);
+    const valueRange = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return { min: 0, max: 100 };
+        const values = data.map((d) => d.value).filter((v) => typeof v === 'number');
+        if (values.length === 0)
+            return { min: 0, max: 100 };
+        const min = visualMapMin ?? Math.min(...values);
+        const max = visualMapMax ?? Math.max(...values);
+        return { min: min === max ? min - 1 : min, max: min === max ? max + 1 : max };
+    }, [data, visualMapMin, visualMapMax]);
+    const option = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0) {
+            return { series: [{ type: 'map', map: mapName, data: [] }] };
+        }
+        const seriesColor = theme.series[0]?.color ?? '#3b82f6';
+        const tooltipConfig = {
+            trigger: 'item',
+            formatter: tooltipFormatter
+                ? (params) => {
+                    const p = params?.data ?? params;
+                    return tooltipFormatter({ name: p?.name ?? '', value: p?.value ?? 0 });
+                }
+                : undefined,
+            backgroundColor: theme.tooltip.backgroundColor,
+            borderColor: theme.tooltip.borderColor,
+            borderWidth: theme.tooltip.borderWidth,
+            borderRadius: theme.tooltip.borderRadius,
+            padding: theme.tooltip.padding,
+        };
+        const visualMapConfig = showLegend
+            ? visualMapMode === 'piecewise' && piecewisePieces?.length
+                ? {
+                    type: 'piecewise',
+                    min: valueRange.min,
+                    max: valueRange.max,
+                    pieces: piecewisePieces.map((p) => ({
+                        min: p.min,
+                        max: p.max,
+                        label: p.label,
+                        color: p.color,
+                    })),
+                    textStyle: {
+                        color: theme.legend.textColor,
+                        fontSize: theme.legend.fontSize,
+                    },
+                    right: 10,
+                    bottom: 20,
+                    orient: 'vertical',
+                }
+                : {
+                    type: 'continuous',
+                    min: valueRange.min,
+                    max: valueRange.max,
+                    text: [String(valueRange.max), String(valueRange.min)],
+                    realtime: false,
+                    calculable: true,
+                    inRange: {
+                        color: [theme.series[1]?.color ?? '#93c5fd', seriesColor],
+                    },
+                    textStyle: {
+                        color: theme.legend.textColor,
+                        fontSize: theme.legend.fontSize,
+                    },
+                    right: 10,
+                    bottom: 20,
+                    orient: 'vertical',
+                }
+            : undefined;
+        const seriesConfig = {
+            type: 'map',
+            map: mapName,
+            roam: true,
+            data: data,
+            itemStyle: {
+                ...(visualMapConfig ? {} : { areaColor: '#f0f0f0' }),
+                borderColor: '#ccc',
+                borderWidth: 1,
+            },
+            emphasis: showHighlighter
+                ? {
+                    itemStyle: {
+                        areaColor: seriesColor,
+                        borderColor: '#333',
+                        borderWidth: 1,
+                    },
+                    label: {
+                        show: true,
+                        color: theme.legend.textColor,
+                    },
+                }
+                : { disabled: true },
+        };
+        const config = {
+            tooltip: tooltipConfig,
+            series: [seriesConfig],
+        };
+        if (visualMapConfig)
+            config.visualMap = visualMapConfig;
+        return config;
+    }, [
+        data,
+        mapName,
+        theme,
+        valueRange,
+        showLegend,
+        showHighlighter,
+        tooltipFormatter,
+        visualMapMode,
+        piecewisePieces,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width,
+                    height,
+                });
+                chart.setOption(option);
+                const handleMapClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'map')
+                        return;
+                    const rawName = params.name ?? params.data?.name;
+                    if (rawName == null || rawName === '')
+                        return;
+                    let value = 0;
+                    if (params.data && typeof params.data === 'object' && 'value' in params.data) {
+                        value = Number(params.data.value);
+                    }
+                    else if (typeof params.value === 'number') {
+                        value = params.value;
+                    }
+                    const event = {
+                        name: String(rawName),
+                        value,
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleMapClick);
+            }
+            catch (error) {
+                console.warn('GeoChart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('GeoChart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const GeoChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const GeoChart = Object.assign(GeoChartComponent, {
+    displayName: 'GeoChart',
+});