react-native-metrify 0.1.0-alpha.1

package/src/widgets/PieChart/PieChart.tsx

@@ -0,0 +1,275 @@
+/**
+ * PieChart Widget - Pie and Donut charts for proportions
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+} from '../../core';
+import { createDonutArcPath, createFilledArcPath } from '../../renderer-svg';
+import { PieChartWidgetProps } from './types';
+
+/**
+ * PieChart Widget Component
+ */
+export const PieChart = memo<PieChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  variant = 'pie',
+  innerRadius = 0.5,
+  showLabels = true,
+  showValues = false,
+  showPercentages = true,
+  size: customSize,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 300, 300);
+
+  // 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 (!widgetData || !widgetData.segments || widgetData.segments.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 { segments, title } = widgetData;
+
+  // Calculate total
+  const total = useMemo(
+    () => segments.reduce((sum, seg) => sum + seg.value, 0),
+    [segments]
+  );
+
+  // Calculate chart size
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const legendHeight = showLabels ? segments.length * 24 + theme.spacing.md : 0;
+  
+  const availableHeight = dimensions.height - padding * 2 - titleHeight - legendHeight;
+  const availableWidth = dimensions.width - padding * 2;
+  
+  const chartSize = customSize || Math.min(availableHeight, availableWidth);
+  const center = chartSize / 2;
+  const radius = (chartSize - padding) / 2;
+  const innerR = variant === 'donut' ? radius * innerRadius : 0;
+
+  // Generate segments
+  const pieSegments = useMemo(() => {
+    let currentAngle = 0;
+    
+    return segments.map(segment => {
+      const percentage = (segment.value / total) * 100;
+      const angle = (segment.value / total) * 360;
+      const startAngle = currentAngle;
+      const endAngle = currentAngle + angle;
+      
+      currentAngle = endAngle;
+      
+      const path = variant === 'donut'
+        ? createDonutArcPath({
+            cx: center,
+            cy: center,
+            radius,
+            innerRadius: innerR,
+            startAngle,
+            endAngle,
+          })
+        : createFilledArcPath({
+            cx: center,
+            cy: center,
+            radius,
+            startAngle,
+            endAngle,
+          });
+      
+      return {
+        path,
+        color: segment.color,
+        label: segment.label,
+        value: segment.value,
+        percentage,
+      };
+    });
+  }, [segments, total, center, radius, innerR, variant]);
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          width: dimensions.width,
+          height: dimensions.height,
+          backgroundColor: theme.colors.surface,
+          borderRadius: theme.radius.md,
+          padding,
+        },
+      ]}
+      testID={testID}
+    >
+      {/* Title */}
+      {title && (
+        <RNText
+          style={[
+            styles.title,
+            {
+              color: theme.colors.text,
+              fontSize: theme.fontScale.md,
+              fontWeight: 'bold',
+              marginBottom: theme.spacing.sm,
+            },
+          ]}
+        >
+          {title}
+        </RNText>
+      )}
+
+      {/* Chart */}
+      <View style={styles.chartContainer}>
+        <Svg width={chartSize} height={chartSize}>
+          {pieSegments.map((segment, index) => (
+            <Path
+              key={`segment-${index}`}
+              d={segment.path}
+              fill={segment.color}
+            />
+          ))}
+        </Svg>
+      </View>
+
+      {/* Legend */}
+      {showLabels && (
+        <View style={styles.legend}>
+          {pieSegments.map((segment, index) => (
+            <View key={`legend-${index}`} style={styles.legendItem}>
+              <View
+                style={[
+                  styles.legendColor,
+                  { backgroundColor: segment.color },
+                ]}
+              />
+              <View style={styles.legendTextContainer}>
+                <RNText
+                  style={[
+                    styles.legendLabel,
+                    {
+                      color: theme.colors.text,
+                      fontSize: theme.fontScale.sm,
+                    },
+                  ]}
+                >
+                  {segment.label}
+                </RNText>
+                <RNText
+                  style={[
+                    styles.legendValue,
+                    {
+                      color: theme.colors.textSecondary,
+                      fontSize: theme.fontScale.xs,
+                    },
+                  ]}
+                >
+                  {showValues && `${segment.value} `}
+                  {showPercentages && `(${segment.percentage.toFixed(1)}%)`}
+                </RNText>
+              </View>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+PieChart.displayName = 'PieChart';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  title: {
+    textAlign: 'center',
+    width: '100%',
+  },
+  chartContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  legend: {
+    width: '100%',
+    marginTop: 16,
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  legendColor: {
+    width: 16,
+    height: 16,
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  legendTextContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  legendLabel: {
+    fontWeight: '600',
+  },
+  legendValue: {},
+});

package/src/widgets/PieChart/index.ts

@@ -0,0 +1,10 @@
+/**
+ * PieChart Widget exports
+ */
+export { PieChart } from './PieChart';
+export type { 
+  PieChartWidgetProps, 
+  PieChartData,
+  PieSegment,
+  PieChartVariant
+} from './types';

package/src/widgets/PieChart/types.ts

@@ -0,0 +1,26 @@
+/**
+ * PieChart Widget types
+ */
+import { BaseWidgetProps } from '../../core/types';
+
+export interface PieSegment {
+  value: number;
+  label: string;
+  color: string;
+}
+
+export interface PieChartData {
+  segments: PieSegment[];
+  title?: string;
+}
+
+export type PieChartVariant = 'pie' | 'donut';
+
+export interface PieChartWidgetProps extends BaseWidgetProps<PieChartData> {
+  variant?: PieChartVariant;
+  innerRadius?: number; // For donut chart (0-1, percentage of outer radius)
+  showLabels?: boolean;
+  showValues?: boolean;
+  showPercentages?: boolean;
+  size?: number;
+}

package/src/widgets/Progress/Progress.tsx

@@ -0,0 +1,201 @@
+/**
+ * Progress Widget - Simple linear progress with meaning
+ * SVG rects + animation
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  clamp,
+  normalize,
+} from '../../core';
+import { createRoundedRectPath, AnimatedPath } from '../../renderer-svg';
+import { ProgressWidgetProps } from './types';
+
+// AnimatedRect removed for Expo Go compatibility
+
+/**
+ * Progress Widget Component
+ */
+export const Progress = memo<ProgressWidgetProps>(({
+  data,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  animated = true,
+  variant = 'bar',
+  barHeight = 12,
+  showValue = true,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(
+    width,
+    height,
+    300,
+    variant === 'bar' ? 80 : 200
+  );
+
+  // 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, showPercentage = true } = data;
+  const normalizedValue = clamp(value, 0, max);
+  const percentage = max > 0 ? (normalizedValue / max) * 100 : 0;
+
+  // Calculate progress (no animation for Expo Go)
+  const progressValue = normalize(normalizedValue, 0, max);
+
+  // Calculate bar dimensions
+  const barWidth = dimensions.width - theme.spacing.md * 2;
+  const barY = label
+    ? theme.spacing.md + theme.fontScale.sm + theme.spacing.xs
+    : theme.spacing.md;
+
+  // Calculate bar width
+  const currentBarWidth = progressValue * barWidth;
+
+  // Display text
+  const displayValue = useMemo(() => {
+    if (!showValue) return null;
+    if (showPercentage) return `${percentage.toFixed(0)}%`;
+    return `${normalizedValue} / ${max}`;
+  }, [showValue, showPercentage, percentage, normalizedValue, max]);
+
+  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}
+    >
+      {/* Label */}
+      {label && (
+        <RNText
+          style={[
+            styles.label,
+            {
+              color: theme.colors.textSecondary,
+              fontSize: theme.fontScale.sm,
+              marginBottom: theme.spacing.xs,
+            },
+          ]}
+        >
+          {label}
+        </RNText>
+      )}
+
+      {/* Progress Bar */}
+      <Svg width={barWidth} height={barHeight}>
+        {/* Background */}
+        <Rect
+          x={0}
+          y={0}
+          width={barWidth}
+          height={barHeight}
+          fill={theme.colors.borderLight}
+          rx={theme.radius.sm}
+          ry={theme.radius.sm}
+        />
+
+        {/* Foreground */}
+        <Rect
+          x={0}
+          y={0}
+          width={currentBarWidth}
+          height={barHeight}
+          fill={theme.colors.chartPrimary}
+          rx={theme.radius.sm}
+          ry={theme.radius.sm}
+        />
+      </Svg>
+
+      {/* Value Display */}
+      {displayValue && (
+        <RNText
+          style={[
+            styles.value,
+            {
+              color: theme.colors.text,
+              fontSize: theme.fontScale.md,
+              fontWeight: '600',
+              marginTop: theme.spacing.xs,
+            },
+          ]}
+        >
+          {displayValue}
+        </RNText>
+      )}
+    </View>
+  );
+});
+
+Progress.displayName = 'Progress';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  loadingText: {
+    fontSize: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  label: {
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  value: {},
+});

package/src/widgets/Progress/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Progress Widget exports
+ */
+export { Progress } from './Progress';
+export type { ProgressWidgetProps, ProgressData, ProgressVariant } from './types';

package/src/widgets/Progress/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Progress Widget types
+ */
+import { BaseWidgetProps } from '../../core/types';
+
+export interface ProgressData {
+  value: number;
+  max: number;
+  label?: string;
+  showPercentage?: boolean;
+}
+
+export type ProgressVariant = 'bar' | 'circle';
+
+export interface ProgressWidgetProps extends BaseWidgetProps<ProgressData> {
+  variant?: ProgressVariant;
+  barHeight?: number;
+  showValue?: boolean;
+}