react-native-metrify 0.1.0-alpha.1

package/src/widgets/CandlestickChart/CandlestickChart.tsx

@@ -0,0 +1,204 @@
+/**
+ * CandlestickChart Widget - For stock/financial data
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect, Line as SvgLine } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize, formatTimeLabel, reduceLabels } from '../../core';
+import { CandlestickChartWidgetProps } from './types';
+
+export const CandlestickChart = memo<CandlestickChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  candleWidth = 8,
+  candleSpacing = 4,
+  upColor,
+  downColor,
+  maxCandles = 30,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 350, 300);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-loading`}>
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>Loading...</RNText>
+      </View>
+    );
+  }
+
+  if (!widgetData || !widgetData.data || widgetData.data.length === 0) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-empty`}>
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>No data</RNText>
+      </View>
+    );
+  }
+
+  const { data, title, timeInterval = 'day' } = widgetData;
+  const displayData = data.slice(-maxCandles); // Show last N candles
+  
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const xAxisHeight = showXAxis ? 30 : 0;
+  const yAxisWidth = showYAxis ? 40 : 0;
+
+  const chartWidth = dimensions.width - padding * 2 - yAxisWidth;
+  const chartHeight = dimensions.height - padding * 2 - titleHeight - xAxisHeight;
+
+  const colorUp = upColor || theme.colors.chartPositive;
+  const colorDown = downColor || theme.colors.chartNegative;
+
+  // Find min/max prices
+  const { minPrice, maxPrice } = useMemo(() => {
+    const lows = displayData.map(d => d.low);
+    const highs = displayData.map(d => d.high);
+    return {
+      minPrice: Math.min(...lows),
+      maxPrice: Math.max(...highs),
+    };
+  }, [displayData]);
+
+  const yAxisLabels = useMemo(() => {
+    const range = maxPrice - minPrice;
+    const step = range / 4;
+    return Array.from({ length: 5 }, (_, i) => ({
+      value: minPrice + i * step,
+      y: chartHeight - (i * chartHeight) / 4,
+    }));
+  }, [minPrice, maxPrice, chartHeight]);
+
+  const xLabels = useMemo(() => {
+    return displayData.map(d => formatTimeLabel(d.date, timeInterval));
+  }, [displayData, timeInterval]);
+
+  const xAxisLabelsReduced = useMemo(() => {
+    return reduceLabels(xLabels, 6);
+  }, [xLabels]);
+
+  const totalCandleWidth = candleWidth + candleSpacing;
+  const chartStartX = Math.max(0, (chartWidth - displayData.length * totalCandleWidth) / 2);
+
+  const candles = useMemo(() => {
+    return displayData.map((point, index) => {
+      const isUp = point.close >= point.open;
+      const color = isUp ? colorUp : colorDown;
+
+      // Normalize prices to chart height
+      const highY = chartHeight - normalize(point.high, minPrice, maxPrice) * chartHeight;
+      const lowY = chartHeight - normalize(point.low, minPrice, maxPrice) * chartHeight;
+      const openY = chartHeight - normalize(point.open, minPrice, maxPrice) * chartHeight;
+      const closeY = chartHeight - normalize(point.close, minPrice, maxPrice) * chartHeight;
+
+      const candleX = chartStartX + index * totalCandleWidth;
+      const candleCenterX = candleX + candleWidth / 2;
+
+      // Candle body
+      const bodyTop = Math.min(openY, closeY);
+      const bodyHeight = Math.max(Math.abs(closeY - openY), 1); // Minimum 1px
+
+      return {
+        // High-Low line (wick)
+        wickX: candleCenterX,
+        wickTop: highY,
+        wickBottom: lowY,
+        
+        // Body rectangle
+        bodyX: candleX,
+        bodyY: bodyTop,
+        bodyWidth: candleWidth,
+        bodyHeight: bodyHeight,
+        
+        color,
+        isUp,
+      };
+    });
+  }, [displayData, chartHeight, minPrice, maxPrice, colorUp, colorDown, candleWidth, totalCandleWidth, chartStartX]);
+
+  return (
+    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
+      {title && (
+        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
+          {title}
+        </RNText>
+      )}
+
+      <View style={styles.chartRow}>
+        {showYAxis && (
+          <View style={[styles.yAxis, { width: yAxisWidth }]}>
+            {yAxisLabels.map((label, index) => (
+              <RNText key={`y-${index}`} style={[styles.yAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, top: label.y - 6 }]}>
+                {label.value.toFixed(0)}
+              </RNText>
+            ))}
+          </View>
+        )}
+
+        <View>
+          <Svg width={chartWidth} height={chartHeight}>
+            {showGrid && yAxisLabels.map((label, index) => (
+              <SvgLine key={`grid-${index}`} x1={0} y1={label.y} x2={chartWidth} y2={label.y} stroke={theme.colors.borderLight} strokeWidth={1} />
+            ))}
+
+            {candles.map((candle, index) => (
+              <React.Fragment key={`candle-${index}`}>
+                {/* Wick (high-low line) */}
+                <SvgLine
+                  x1={candle.wickX}
+                  y1={candle.wickTop}
+                  x2={candle.wickX}
+                  y2={candle.wickBottom}
+                  stroke={candle.color}
+                  strokeWidth={1}
+                />
+                
+                {/* Body */}
+                <Rect
+                  x={candle.bodyX}
+                  y={candle.bodyY}
+                  width={candle.bodyWidth}
+                  height={candle.bodyHeight}
+                  fill={candle.color}
+                  stroke={candle.color}
+                  strokeWidth={1}
+                />
+              </React.Fragment>
+            ))}
+          </Svg>
+
+          {showXAxis && (
+            <View style={[styles.xAxis, { width: chartWidth }]}>
+              {xAxisLabelsReduced.map((item, index) => (
+                <RNText key={`x-${index}`} style={[styles.xAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, left: chartStartX + (item.index * totalCandleWidth) - 20 }]}>
+                  {item.label}
+                </RNText>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+});
+
+CandlestickChart.displayName = 'CandlestickChart';
+
+const styles = StyleSheet.create({
+  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  container: { justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 16 },
+  emptyText: { fontSize: 16 },
+  title: { textAlign: 'center', width: '100%' },
+  chartRow: { flexDirection: 'row', alignItems: 'flex-start' },
+  yAxis: { position: 'relative', marginRight: 8 },
+  yAxisLabel: { position: 'absolute', right: 0, textAlign: 'right' },
+  xAxis: { position: 'relative', height: 30, marginTop: 4 },
+  xAxisLabel: { position: 'absolute', width: 40, textAlign: 'center' },
+});

package/src/widgets/CandlestickChart/index.ts

@@ -0,0 +1,2 @@
+export { CandlestickChart } from './CandlestickChart';
+export type { CandlestickChartWidgetProps, CandlestickChartData, CandlestickDataPoint } from './types';

package/src/widgets/CandlestickChart/types.ts

@@ -0,0 +1,29 @@
+/**
+ * CandlestickChart Widget types
+ */
+import { BaseWidgetProps, TimeInterval } from '../../core';
+
+export interface CandlestickDataPoint {
+  date: Date;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+}
+
+export interface CandlestickChartData {
+  data: CandlestickDataPoint[];
+  title?: string;
+  timeInterval?: TimeInterval;
+}
+
+export interface CandlestickChartWidgetProps extends BaseWidgetProps<CandlestickChartData> {
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  candleWidth?: number;
+  candleSpacing?: number;
+  upColor?: string;
+  downColor?: string;
+  maxCandles?: number;
+}

package/src/widgets/FunnelChart/FunnelChart.tsx

@@ -0,0 +1,172 @@
+/**
+ * FunnelChart Widget - Conversion funnel visualization
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Polygon } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
+import { FunnelChartWidgetProps } from './types';
+
+export const FunnelChart = memo<FunnelChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showLabels = true,
+  showValues = true,
+  showPercentages = true,
+  stageSpacing = 8,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 300, 400);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-loading`}>
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>Loading...</RNText>
+      </View>
+    );
+  }
+
+  if (!widgetData || !widgetData.stages || widgetData.stages.length === 0) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-empty`}>
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>No data</RNText>
+      </View>
+    );
+  }
+
+  const { stages, title } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const labelWidth = showLabels ? 100 : 0;
+
+  const chartWidth = dimensions.width - padding * 2 - labelWidth;
+  const chartHeight = dimensions.height - padding * 2 - titleHeight;
+
+  const maxValue = stages[0].value;
+  const totalSpacing = (stages.length - 1) * stageSpacing;
+  const stageHeight = (chartHeight - totalSpacing) / stages.length;
+
+  const funnelStages = useMemo(() => {
+    return stages.map((stage, index) => {
+      const normalizedValue = normalize(stage.value, 0, maxValue);
+      const topWidth = normalizedValue * chartWidth;
+      const bottomWidth = index < stages.length - 1
+        ? normalize(stages[index + 1].value, 0, maxValue) * chartWidth
+        : topWidth * 0.7; // Last stage tapers to 70%
+
+      const y = index * (stageHeight + stageSpacing);
+      const centerX = chartWidth / 2;
+
+      // Create trapezoid points (top-left, top-right, bottom-right, bottom-left)
+      const points = `
+        ${centerX - topWidth / 2},${y}
+        ${centerX + topWidth / 2},${y}
+        ${centerX + bottomWidth / 2},${y + stageHeight}
+        ${centerX - bottomWidth / 2},${y + stageHeight}
+      `;
+
+      const percentage = ((stage.value / maxValue) * 100).toFixed(1);
+      const conversionRate = index > 0
+        ? ((stage.value / stages[index - 1].value) * 100).toFixed(1)
+        : '100.0';
+
+      return {
+        points,
+        color: stage.color || getDefaultColor(index, theme),
+        label: stage.label,
+        value: stage.value,
+        percentage,
+        conversionRate,
+        y: y + stageHeight / 2,
+      };
+    });
+  }, [stages, chartWidth, chartHeight, stageHeight, stageSpacing, maxValue, theme]);
+
+  return (
+    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
+      {title && (
+        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
+          {title}
+        </RNText>
+      )}
+
+      <View style={styles.chartRow}>
+        <View>
+          <Svg width={chartWidth} height={chartHeight}>
+            {funnelStages.map((stage, index) => (
+              <Polygon
+                key={`stage-${index}`}
+                points={stage.points}
+                fill={stage.color}
+                opacity={0.9}
+              />
+            ))}
+          </Svg>
+        </View>
+
+        {showLabels && (
+          <View style={[styles.labelsContainer, { width: labelWidth, height: chartHeight }]}>
+            {funnelStages.map((stage, index) => (
+              <View
+                key={`label-${index}`}
+                style={[styles.labelItem, { top: stage.y - 20, height: 40 }]}
+              >
+                <RNText
+                  style={[styles.label, { color: theme.colors.text, fontSize: theme.fontScale.sm }]}
+                  numberOfLines={1}
+                >
+                  {stage.label}
+                </RNText>
+                {showValues && (
+                  <RNText
+                    style={[styles.value, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
+                  >
+                    {stage.value.toLocaleString()}
+                  </RNText>
+                )}
+                {showPercentages && (
+                  <RNText
+                    style={[styles.percentage, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
+                  >
+                    {index > 0 ? `${stage.conversionRate}%` : '100%'}
+                  </RNText>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+});
+
+FunnelChart.displayName = 'FunnelChart';
+
+function getDefaultColor(index: number, theme: any): string {
+  const colors = [
+    theme.colors.chartPrimary,
+    theme.colors.chartSecondary,
+    theme.colors.chartTertiary,
+    theme.colors.chartQuaternary,
+    theme.colors.chartPositive,
+  ];
+  return colors[index % colors.length];
+}
+
+const styles = StyleSheet.create({
+  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  container: { justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 16 },
+  emptyText: { fontSize: 16 },
+  title: { textAlign: 'center', width: '100%' },
+  chartRow: { flexDirection: 'row', flex: 1 },
+  labelsContainer: { position: 'relative', marginLeft: 12 },
+  labelItem: { position: 'absolute', justifyContent: 'center' },
+  label: { fontWeight: '600', marginBottom: 2 },
+  value: { marginBottom: 1 },
+  percentage: { fontWeight: '500' },
+});

package/src/widgets/FunnelChart/index.ts

@@ -0,0 +1,2 @@
+export { FunnelChart } from './FunnelChart';
+export type { FunnelChartWidgetProps, FunnelChartData, FunnelStage } from './types';

package/src/widgets/FunnelChart/types.ts

@@ -0,0 +1,22 @@
+/**
+ * FunnelChart Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface FunnelStage {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export interface FunnelChartData {
+  stages: FunnelStage[];
+  title?: string;
+}
+
+export interface FunnelChartWidgetProps extends BaseWidgetProps<FunnelChartData> {
+  showLabels?: boolean;
+  showValues?: boolean;
+  showPercentages?: boolean;
+  stageSpacing?: number;
+}

package/src/widgets/Gauge/Gauge.tsx

@@ -0,0 +1,235 @@
+/**
+ * Gauge Widget - Show progress toward a goal
+ * Demonstrates SVG + math separation
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  clamp,
+  interpolate,
+  normalize,
+  createFontSizeCalculator,
+} from '../../core';
+import {
+  createArcPath,
+  AnimatedPath,
+  Text,
+  formatNumber,
+} from '../../renderer-svg';
+import { GaugeWidgetProps } from './types';
+
+/**
+ * Gauge Widget Component
+ */
+export const Gauge = memo<GaugeWidgetProps>(({
+  data,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  animated = true,
+  startAngle = -120,
+  endAngle = 120,
+  thickness = 12,
+  showValue = true,
+  showLabel = true,
+  fontSize: fontConfig,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 200, 200);
+  
+  // Create responsive font size calculator
+  const fontSizes = useMemo(
+    () => createFontSizeCalculator(dimensions.width, dimensions.height, fontConfig),
+    [dimensions.width, dimensions.height, fontConfig]
+  );
+
+  // Handle states
+  if (loading) {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            width: dimensions.width,
+            height: dimensions.height,
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius.md,
+          },
+        ]}
+        testID={`${testID}-loading`}
+      >
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
+          Loading...
+        </RNText>
+      </View>
+    );
+  }
+
+  if (!data) {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            width: dimensions.width,
+            height: dimensions.height,
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius.md,
+          },
+        ]}
+        testID={`${testID}-empty`}
+      >
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
+          No data
+        </RNText>
+      </View>
+    );
+  }
+
+  const { value, max, label, unit = '' } = data;
+  const normalizedValue = clamp(value, 0, max);
+
+  // Calculate dimensions
+  const size = Math.min(dimensions.width, dimensions.height);
+  const center = size / 2;
+  const radius = (size - thickness - theme.spacing.md * 2) / 2;
+
+  // Calculate progress (no animation for Expo Go)
+  const progressValue = normalize(normalizedValue, 0, max);
+  const currentAngle = interpolate(progressValue, [0, 1], [startAngle, endAngle]);
+
+  // Background arc path (full gauge)
+  const backgroundArcPath = useMemo(
+    () =>
+      createArcPath({
+        cx: center,
+        cy: center,
+        radius,
+        startAngle,
+        endAngle,
+      }),
+    [center, radius, startAngle, endAngle]
+  );
+
+  // Foreground arc path
+  const foregroundArcPath = useMemo(
+    () =>
+      createArcPath({
+        cx: center,
+        cy: center,
+        radius,
+        startAngle,
+        endAngle: currentAngle,
+      }),
+    [center, radius, startAngle, currentAngle]
+  );
+
+  // Display value
+  const displayValue = useMemo(
+    () => `${formatNumber(normalizedValue, 'compact')}${unit}`,
+    [normalizedValue, unit]
+  );
+
+  const displayMax = useMemo(
+    () => `/ ${formatNumber(max, 'compact')}${unit}`,
+    [max, unit]
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: dimensions.width,
+          height: dimensions.height,
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.radius.md,
+          padding: theme.spacing.md,
+        },
+      ]}
+      testID={testID}
+    >
+      <Svg width={size} height={size}>
+        {/* Background arc */}
+        <AnimatedPath
+          d={backgroundArcPath}
+          stroke={theme.colors.borderLight}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          fill="transparent"
+        />
+
+        {/* Foreground arc */}
+        <AnimatedPath
+          d={foregroundArcPath}
+          stroke={theme.colors.chartPrimary}
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          fill="transparent"
+        />
+
+        {/* Center value text */}
+        {showValue && (
+          <>
+            <Text
+              x={center}
+              y={center - 8}
+              text={displayValue}
+              fontSize={fontSizes.value(theme.fontScale.xl)}
+              fontWeight="bold"
+              fill={theme.colors.text}
+            />
+            <Text
+              x={center}
+              y={center + 16}
+              text={displayMax}
+              fontSize={fontSizes.secondary(theme.fontScale.sm)}
+              fill={theme.colors.textSecondary}
+            />
+          </>
+        )}
+      </Svg>
+
+      {/* Label */}
+      {showLabel && label && (
+        <RNText
+          style={[
+            styles.label,
+            {
+              color: theme.colors.textSecondary,
+              fontSize: fontSizes.label(theme.fontScale.sm),
+              marginTop: theme.spacing.sm,
+            },
+          ]}
+        >
+          {label}
+        </RNText>
+      )}
+    </View>
+  );
+});
+
+Gauge.displayName = 'Gauge';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  label: {
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+});

package/src/widgets/Gauge/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Gauge Widget exports
+ */
+export { Gauge } from './Gauge';
+export type { GaugeWidgetProps, GaugeData } from './types';

package/src/widgets/Gauge/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Gauge Widget types
+ */
+import { BaseWidgetProps } from '../../core/types';
+
+export interface GaugeData {
+  value: number;
+  max: number;
+  label?: string;
+  unit?: string;
+}
+
+export interface GaugeWidgetProps extends BaseWidgetProps<GaugeData> {
+  startAngle?: number;
+  endAngle?: number;
+  thickness?: number;
+  showValue?: boolean;
+  showLabel?: boolean;
+}