react-native-metrify 0.1.0-alpha.1

package/src/renderer-svg/primitives/AnimatedCircle.tsx

@@ -0,0 +1,48 @@
+/**
+ * Animated SVG Circle primitive
+ */
+import React, { memo } from 'react';
+import Animated from 'react-native-reanimated';
+import { Circle } from 'react-native-svg';
+
+const AnimatedSVGCircle = Animated.createAnimatedComponent(Circle);
+
+export interface AnimatedCircleProps {
+  cx: number;
+  cy: number;
+  r: number;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  opacity?: number;
+  testID?: string;
+}
+
+/**
+ * Memoized animated circle component
+ */
+export const AnimatedCircle = memo<AnimatedCircleProps>(({
+  cx,
+  cy,
+  r,
+  fill = 'transparent',
+  stroke = 'transparent',
+  strokeWidth = 1,
+  opacity = 1,
+  testID,
+}) => {
+  return (
+    <AnimatedSVGCircle
+      cx={cx}
+      cy={cy}
+      r={r}
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      opacity={opacity}
+      testID={testID}
+    />
+  );
+});
+
+AnimatedCircle.displayName = 'AnimatedCircle';

package/src/renderer-svg/primitives/AnimatedPath.tsx

@@ -0,0 +1,48 @@
+/**
+ * Animated SVG Path primitive
+ */
+import React, { memo } from 'react';
+import Animated from 'react-native-reanimated';
+import { Path } from 'react-native-svg';
+
+const AnimatedSVGPath = Animated.createAnimatedComponent(Path);
+
+export interface AnimatedPathProps {
+  d: string;
+  stroke?: string;
+  strokeWidth?: number;
+  fill?: string;
+  opacity?: number;
+  strokeLinecap?: 'butt' | 'round' | 'square';
+  strokeLinejoin?: 'miter' | 'round' | 'bevel';
+  testID?: string;
+}
+
+/**
+ * Memoized animated path component
+ */
+export const AnimatedPath = memo<AnimatedPathProps>(({
+  d,
+  stroke = 'transparent',
+  strokeWidth = 1,
+  fill = 'transparent',
+  opacity = 1,
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  testID,
+}) => {
+  return (
+    <AnimatedSVGPath
+      d={d}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      fill={fill}
+      opacity={opacity}
+      strokeLinecap={strokeLinecap}
+      strokeLinejoin={strokeLinejoin}
+      testID={testID}
+    />
+  );
+});
+
+AnimatedPath.displayName = 'AnimatedPath';

package/src/renderer-svg/primitives/Text.tsx

@@ -0,0 +1,73 @@
+/**
+ * SVG Text primitive with centered text helper
+ */
+import React, { memo } from 'react';
+import { Text as SVGText } from 'react-native-svg';
+
+export interface TextProps {
+  x: number;
+  y: number;
+  text: string;
+  fontSize?: number;
+  fontWeight?: string | number;
+  fill?: string;
+  textAnchor?: 'start' | 'middle' | 'end';
+  alignmentBaseline?: 'baseline' | 'text-bottom' | 'alphabetic' | 'ideographic' | 'middle' | 'central' | 'mathematical' | 'text-top' | 'bottom' | 'center' | 'top' | 'text-before-edge' | 'text-after-edge' | 'before-edge' | 'after-edge' | 'hanging';
+  opacity?: number;
+  testID?: string;
+}
+
+/**
+ * SVG Text component with sensible defaults
+ */
+export const Text = memo<TextProps>(({
+  x,
+  y,
+  text,
+  fontSize = 14,
+  fontWeight = 'normal',
+  fill = '#000000',
+  textAnchor = 'middle',
+  alignmentBaseline = 'middle',
+  opacity = 1,
+  testID,
+}) => {
+  return (
+    <SVGText
+      x={x}
+      y={y}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      fill={fill}
+      textAnchor={textAnchor}
+      alignmentBaseline={alignmentBaseline}
+      opacity={opacity}
+      testID={testID}
+    >
+      {text}
+    </SVGText>
+  );
+});
+
+Text.displayName = 'Text';
+
+/**
+ * Helper to create centered text props
+ */
+export function createCenteredTextProps(
+  x: number,
+  y: number,
+  text: string,
+  fontSize?: number,
+  fill?: string
+): TextProps {
+  return {
+    x,
+    y,
+    text,
+    fontSize,
+    fill,
+    textAnchor: 'middle',
+    alignmentBaseline: 'middle',
+  };
+}

package/src/renderer-svg/primitives/index.ts

@@ -0,0 +1,6 @@
+/**
+ * SVG primitives - Basic building blocks
+ */
+export * from './Text';
+export * from './AnimatedPath';
+export * from './AnimatedCircle';

package/src/widgets/AreaChart/AreaChart.tsx

@@ -0,0 +1,213 @@
+/**
+ * AreaChart Widget - Filled area under line
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Line as SvgLine } from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  normalize,
+  formatTimeLabel,
+  reduceLabels,
+} from '../../core';
+import {
+  createLinePath,
+  createAreaPath,
+  AnimatedPath,
+} from '../../renderer-svg';
+import { AreaChartWidgetProps } from './types';
+
+export const AreaChart = memo<AreaChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  showLegend = true,
+  showGradient = true,
+  stacked = false,
+  curveStyle = 'linear',
+  maxXLabels = 6,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 350, 250);
+
+  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.series || widgetData.series.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 { series, title, timeInterval } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const legendHeight = showLegend ? 30 : 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 - legendHeight - xAxisHeight;
+
+  const { globalMinY, globalMaxY, xLabels } = useMemo(() => {
+    let minY = Infinity;
+    let maxY = -Infinity;
+    const allXValues: (number | Date)[] = [];
+
+    series.forEach(s => {
+      s.data.forEach(point => {
+        if (point.y < minY) minY = point.y;
+        if (point.y > maxY) maxY = point.y;
+        allXValues.push(point.x);
+      });
+    });
+
+    const labels = allXValues.map((x, idx) => {
+      if (x instanceof Date) {
+        return timeInterval ? formatTimeLabel(x, timeInterval) : x.toLocaleDateString();
+      }
+      return x.toString();
+    });
+
+    return { globalMinY: minY, globalMaxY: maxY, xLabels: labels };
+  }, [series, timeInterval]);
+
+  const yAxisLabels = useMemo(() => {
+    const range = globalMaxY - globalMinY;
+    const step = range / 4;
+    return Array.from({ length: 5 }, (_, i) => ({
+      value: globalMinY + i * step,
+      y: chartHeight - (i * chartHeight) / 4,
+    }));
+  }, [globalMinY, globalMaxY, chartHeight]);
+
+  const xAxisLabelsReduced = useMemo(() => {
+    return reduceLabels(xLabels, maxXLabels);
+  }, [xLabels, maxXLabels]);
+
+  const seriesPaths = useMemo(() => {
+    return series.map((s, seriesIndex) => {
+      const points = s.data.map((point, index) => {
+        const x = (index / (s.data.length - 1 || 1)) * chartWidth;
+        const normalizedY = normalize(point.y, globalMinY, globalMaxY);
+        const y = chartHeight - normalizedY * chartHeight;
+        return { x, y };
+      });
+
+      const linePath = createLinePath(points);
+      const areaPath = createAreaPath(points, chartHeight);
+
+      return {
+        linePath,
+        areaPath,
+        color: s.color,
+        label: s.label,
+        gradientId: `gradient-${seriesIndex}`,
+      };
+    });
+  }, [series, chartWidth, chartHeight, globalMinY, globalMaxY]);
+
+  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}>
+            {showGradient && (
+              <Defs>
+                {seriesPaths.map((series, index) => (
+                  <LinearGradient key={series.gradientId} id={series.gradientId} x1="0" y1="0" x2="0" y2="1">
+                    <Stop offset="0%" stopColor={series.color} stopOpacity="0.4" />
+                    <Stop offset="100%" stopColor={series.color} stopOpacity="0.05" />
+                  </LinearGradient>
+                ))}
+              </Defs>
+            )}
+
+            {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} />
+            ))}
+
+            {seriesPaths.map((series, index) => (
+              <React.Fragment key={`series-${index}`}>
+                <AnimatedPath d={series.areaPath} fill={showGradient ? `url(#${series.gradientId})` : series.color} opacity={showGradient ? 1 : 0.3} />
+                <AnimatedPath d={series.linePath} stroke={series.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" fill="transparent" />
+              </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: (item.index / (xLabels.length - 1 || 1)) * chartWidth - 20 }]}>
+                  {item.label}
+                </RNText>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {seriesPaths.map((series, index) => (
+            series.label && (
+              <View key={`legend-${index}`} style={styles.legendItem}>
+                <View style={[styles.legendColor, { backgroundColor: series.color }]} />
+                <RNText style={[styles.legendText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}>{series.label}</RNText>
+              </View>
+            )
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+AreaChart.displayName = 'AreaChart';
+
+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' },
+  legend: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12, gap: 12 },
+  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  legendColor: { width: 12, height: 12, borderRadius: 2 },
+  legendText: { textTransform: 'uppercase', letterSpacing: 0.5 },
+});

package/src/widgets/AreaChart/index.ts

@@ -0,0 +1,2 @@
+export { AreaChart } from './AreaChart';
+export type { AreaChartWidgetProps, AreaChartData, AreaChartSeries, AreaChartDataPoint } from './types';

package/src/widgets/AreaChart/types.ts

@@ -0,0 +1,34 @@
+/**
+ * AreaChart Widget types
+ */
+import { BaseWidgetProps, TimeInterval } from '../../core';
+
+export interface AreaChartDataPoint {
+  x: number | Date;
+  y: number;
+}
+
+export interface AreaChartSeries {
+  data: AreaChartDataPoint[];
+  color: string;
+  label?: string;
+}
+
+export interface AreaChartData {
+  series: AreaChartSeries[];
+  title?: string;
+  timeInterval?: TimeInterval;
+}
+
+export type AreaChartStyle = 'smooth' | 'linear';
+
+export interface AreaChartWidgetProps extends BaseWidgetProps<AreaChartData> {
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showGradient?: boolean;
+  stacked?: boolean;
+  curveStyle?: AreaChartStyle;
+  maxXLabels?: number;
+}

package/src/widgets/BarChart/BarChart.tsx

@@ -0,0 +1,249 @@
+/**
+ * BarChart Widget - Flexible bar chart for comparing values
+ */
+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,
+  normalize,
+} from '../../core';
+import { Text } from '../../renderer-svg/primitives';
+import { BarChartWidgetProps } from './types';
+
+/**
+ * BarChart Widget Component
+ */
+export const BarChart = memo<BarChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  orientation = 'vertical',
+  barWidth: customBarWidth,
+  barSpacing = 8,
+  showValues = true,
+  showLabels = true,
+  minBarHeight = 4,
+  maxBars = 20,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 300, 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 (!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 } = widgetData;
+  
+  // Limit number of bars
+  const displayData = data.slice(0, maxBars);
+
+  // Calculate dimensions
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const labelHeight = showLabels ? theme.fontScale.sm + theme.spacing.xs : 0;
+  const valueHeight = showValues ? theme.fontScale.sm + theme.spacing.xs : 0;
+  
+  const chartHeight = dimensions.height - padding * 2 - titleHeight - labelHeight - valueHeight;
+  const chartWidth = dimensions.width - padding * 2;
+
+  // Find max value for scaling
+  const maxValue = useMemo(() => Math.max(...displayData.map(d => d.value)), [displayData]);
+
+  // Calculate bar width
+  const calculatedBarWidth = customBarWidth || 
+    (chartWidth - (displayData.length - 1) * barSpacing) / displayData.length;
+
+  // Generate bars
+  const bars = useMemo(() => {
+    return displayData.map((item, index) => {
+      const normalizedValue = normalize(item.value, 0, maxValue);
+      const barHeight = Math.max(normalizedValue * chartHeight, minBarHeight);
+      const barX = index * (calculatedBarWidth + barSpacing);
+      const barY = chartHeight - barHeight;
+      
+      return {
+        x: barX,
+        y: barY,
+        width: calculatedBarWidth,
+        height: barHeight,
+        color: item.color || theme.colors.chartPrimary,
+        value: item.value,
+        label: item.label,
+      };
+    });
+  }, [displayData, maxValue, chartHeight, calculatedBarWidth, barSpacing, minBarHeight, theme.colors.chartPrimary]);
+
+  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,
+              marginBottom: theme.spacing.sm,
+            },
+          ]}
+        >
+          {title}
+        </RNText>
+      )}
+
+      {/* Chart */}
+      <View style={styles.chartContainer}>
+        <Svg width={chartWidth} height={chartHeight + valueHeight}>
+          {/* Bars */}
+          {bars.map((bar, index) => (
+            <Rect
+              key={`bar-${index}`}
+              x={bar.x}
+              y={bar.y}
+              width={bar.width}
+              height={bar.height}
+              fill={bar.color}
+              rx={theme.radius.sm}
+              ry={theme.radius.sm}
+            />
+          ))}
+          
+          {/* Values */}
+          {showValues && bars.map((bar, index) => (
+            <Text
+              key={`value-${index}`}
+              x={bar.x + bar.width / 2}
+              y={bar.y - 4}
+              text={bar.value.toString()}
+              fontSize={theme.fontScale.xs}
+              fill={theme.colors.textSecondary}
+              textAnchor="middle"
+            />
+          ))}
+        </Svg>
+
+        {/* Labels */}
+        {showLabels && (
+          <View style={styles.labelsContainer}>
+            {bars.map((bar, index) => (
+              <View
+                key={`label-${index}`}
+                style={[
+                  styles.labelItem,
+                  { width: bar.width + barSpacing },
+                ]}
+              >
+                <RNText
+                  style={[
+                    styles.labelText,
+                    {
+                      color: theme.colors.textSecondary,
+                      fontSize: theme.fontScale.xs,
+                    },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {bar.label}
+                </RNText>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+});
+
+BarChart.displayName = 'BarChart';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  title: {
+    fontWeight: 'bold',
+    textAlign: 'center',
+    width: '100%',
+  },
+  chartContainer: {
+    flex: 1,
+    width: '100%',
+  },
+  labelsContainer: {
+    flexDirection: 'row',
+    marginTop: 4,
+  },
+  labelItem: {
+    alignItems: 'center',
+  },
+  labelText: {
+    textAlign: 'center',
+  },
+});

package/src/widgets/BarChart/index.ts

@@ -0,0 +1,10 @@
+/**
+ * BarChart Widget exports
+ */
+export { BarChart } from './BarChart';
+export type { 
+  BarChartWidgetProps, 
+  BarChartData,
+  BarDataPoint,
+  BarOrientation
+} from './types';