react-native-metrify 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/widgets/CandlestickChart/CandlestickChart.tsx

@@ -1,204 +0,0 @@
-/**
- * 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

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

package/src/widgets/CandlestickChart/types.ts

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,172 +0,0 @@
-/**
- * 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

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

package/src/widgets/FunnelChart/types.ts

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,235 +0,0 @@
-/**
- * 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

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

package/src/widgets/Gauge/types.ts

@@ -1,19 +0,0 @@
-/**
- * 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;
-}