react-native-metrify 0.1.0-alpha.1

package/src/widgets/ScatterPlot/ScatterPlot.tsx

@@ -0,0 +1,167 @@
+/**
+ * ScatterPlot Widget - Points without connecting lines
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Circle, Line as SvgLine } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
+import { ScatterPlotWidgetProps } from './types';
+
+export const ScatterPlot = memo<ScatterPlotWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  showLegend = true,
+  defaultPointSize = 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 } = 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 { globalMinX, globalMaxX, globalMinY, globalMaxY } = useMemo(() => {
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    series.forEach(s => {
+      s.data.forEach(point => {
+        if (point.x < minX) minX = point.x;
+        if (point.x > maxX) maxX = point.x;
+        if (point.y < minY) minY = point.y;
+        if (point.y > maxY) maxY = point.y;
+      });
+    });
+    return { globalMinX: minX, globalMaxX: maxX, globalMinY: minY, globalMaxY: maxY };
+  }, [series]);
+
+  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 seriesPoints = useMemo(() => {
+    return series.map(s => {
+      const points = s.data.map(point => {
+        const normalizedX = normalize(point.x, globalMinX, globalMaxX);
+        const normalizedY = normalize(point.y, globalMinY, globalMaxY);
+        return {
+          cx: normalizedX * chartWidth,
+          cy: chartHeight - normalizedY * chartHeight,
+          label: point.label,
+        };
+      });
+
+      return {
+        points,
+        color: s.color,
+        label: s.label,
+        pointSize: s.pointSize || defaultPointSize,
+      };
+    });
+  }, [series, chartWidth, chartHeight, globalMinX, globalMaxX, globalMinY, globalMaxY, defaultPointSize]);
+
+  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} />
+            ))}
+
+            {seriesPoints.map((series, seriesIndex) => (
+              series.points.map((point, pointIndex) => (
+                <Circle
+                  key={`series-${seriesIndex}-point-${pointIndex}`}
+                  cx={point.cx}
+                  cy={point.cy}
+                  r={series.pointSize}
+                  fill={series.color}
+                  opacity={0.8}
+                />
+              ))
+            ))}
+          </Svg>
+        </View>
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {seriesPoints.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>
+  );
+});
+
+ScatterPlot.displayName = 'ScatterPlot';
+
+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' },
+  legend: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12, gap: 12 },
+  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  legendColor: { width: 12, height: 12, borderRadius: 6 },
+  legendText: { textTransform: 'uppercase', letterSpacing: 0.5 },
+});

package/src/widgets/ScatterPlot/index.ts

@@ -0,0 +1,2 @@
+export { ScatterPlot } from './ScatterPlot';
+export type { ScatterPlotWidgetProps, ScatterPlotData, ScatterSeries, ScatterDataPoint } from './types';

package/src/widgets/ScatterPlot/types.ts

@@ -0,0 +1,32 @@
+/**
+ * ScatterPlot Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface ScatterDataPoint {
+  x: number;
+  y: number;
+  label?: string;
+}
+
+export interface ScatterSeries {
+  data: ScatterDataPoint[];
+  color: string;
+  label?: string;
+  pointSize?: number;
+}
+
+export interface ScatterPlotData {
+  series: ScatterSeries[];
+  title?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+}
+
+export interface ScatterPlotWidgetProps extends BaseWidgetProps<ScatterPlotData> {
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  defaultPointSize?: number;
+}

package/src/widgets/Sparkline/Sparkline.tsx

@@ -0,0 +1,203 @@
+/**
+ * Sparkline Widget - Show trend at a glance
+ * Minimal, no axes, capped data points
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop } from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  useWidgetPadding,
+  useInnerDimensions,
+} from '../../core';
+import {
+  createLinePath,
+  createAreaPath,
+  AnimatedPath,
+  dataToPoints,
+} from '../../renderer-svg';
+import { SparklineWidgetProps } from './types';
+
+const MAX_DATA_POINTS = 50;
+
+/**
+ * Sparkline Widget Component
+ */
+export const Sparkline = memo<SparklineWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  animated = true,
+  style = 'line',
+  strokeWidth = 2,
+  showGradient = false,
+  maxDataPoints = MAX_DATA_POINTS,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 200, 80);
+  const padding = useWidgetPadding(theme);
+  const innerDimensions = useInnerDimensions(
+    dimensions.width,
+    dimensions.height,
+    padding
+  );
+
+  // 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: rawData, label } = widgetData;
+
+  // Cap data points for performance
+  const data = useMemo(() => {
+    if (rawData.length <= maxDataPoints) return rawData;
+    
+    const step = Math.ceil(rawData.length / maxDataPoints);
+    return rawData.filter((_, index) => index % step === 0);
+  }, [rawData, maxDataPoints]);
+
+  // Convert data to SVG points
+  const points = useMemo(
+    () =>
+      dataToPoints(
+        data,
+        innerDimensions.width,
+        innerDimensions.height,
+        theme.spacing.xs
+      ),
+    [data, innerDimensions.width, innerDimensions.height, theme.spacing.xs]
+  );
+
+  // Generate paths
+  const linePath = useMemo(() => createLinePath(points), [points]);
+  
+  const areaPath = useMemo(
+    () => createAreaPath(points, innerDimensions.height - theme.spacing.xs),
+    [points, innerDimensions.height, theme.spacing.xs]
+  );
+
+  const svgWidth = dimensions.width;
+  const svgHeight = dimensions.height - (label ? theme.fontScale.sm + theme.spacing.sm : 0);
+
+  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={svgWidth - theme.spacing.md * 2} height={svgHeight}>
+        {showGradient && style === 'area' && (
+          <Defs>
+            <LinearGradient id="sparklineGradient" x1="0" y1="0" x2="0" y2="1">
+              <Stop offset="0%" stopColor={theme.colors.chartPrimary} stopOpacity="0.3" />
+              <Stop offset="100%" stopColor={theme.colors.chartPrimary} stopOpacity="0" />
+            </LinearGradient>
+          </Defs>
+        )}
+
+        {style === 'area' && (
+          <AnimatedPath
+            d={areaPath}
+            fill={showGradient ? 'url(#sparklineGradient)' : theme.colors.chartPrimary}
+            opacity={showGradient ? 1 : 0.2}
+          />
+        )}
+
+        <AnimatedPath
+          d={linePath}
+          stroke={theme.colors.chartPrimary}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="transparent"
+        />
+      </Svg>
+
+      {label && (
+        <RNText
+          style={[
+            styles.label,
+            {
+              color: theme.colors.textSecondary,
+              fontSize: theme.fontScale.sm,
+              marginTop: theme.spacing.xs,
+            },
+          ]}
+        >
+          {label}
+        </RNText>
+      )}
+    </View>
+  );
+});
+
+Sparkline.displayName = 'Sparkline';
+
+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/Sparkline/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Sparkline Widget exports
+ */
+export { Sparkline } from './Sparkline';
+export type { SparklineWidgetProps, SparklineData, SparklineStyle } from './types';

package/src/widgets/Sparkline/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Sparkline Widget types
+ */
+import { BaseWidgetProps } from '../../core/types';
+
+export interface SparklineData {
+  data: number[];
+  label?: string;
+}
+
+export type SparklineStyle = 'line' | 'area';
+
+export interface SparklineWidgetProps extends BaseWidgetProps<SparklineData> {
+  style?: SparklineStyle;
+  strokeWidth?: number;
+  showGradient?: boolean;
+  maxDataPoints?: number;
+}

package/src/widgets/StackedBarChart/StackedBarChart.tsx

@@ -0,0 +1,181 @@
+/**
+ * StackedBarChart Widget - Multiple values stacked on same bar
+ */
+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 { StackedBarChartWidgetProps } from './types';
+
+export const StackedBarChart = memo<StackedBarChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  barWidth: customBarWidth,
+  barSpacing = 8,
+  showValues = false,
+  showLabels = true,
+  showLegend = true,
+  maxBars = 12,
+  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.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;
+  const displayData = data.slice(0, maxBars);
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const legendHeight = showLegend ? 40 : 0;
+  const labelHeight = showLabels ? theme.fontScale.sm + theme.spacing.xs : 0;
+
+  const chartHeight = dimensions.height - padding * 2 - titleHeight - legendHeight - labelHeight;
+  const chartWidth = dimensions.width - padding * 2;
+
+  // Find max total value across all bars
+  const maxTotalValue = useMemo(() => {
+    return Math.max(...displayData.map(item => 
+      item.segments.reduce((sum, seg) => sum + seg.value, 0)
+    ));
+  }, [displayData]);
+
+  // Get all unique segment labels for legend
+  const allSegmentLabels = useMemo(() => {
+    const labels = new Map<string, string>();
+    displayData.forEach(item => {
+      item.segments.forEach(seg => {
+        labels.set(seg.label, seg.color);
+      });
+    });
+    return Array.from(labels.entries()).map(([label, color]) => ({ label, color }));
+  }, [displayData]);
+
+  const calculatedBarWidth = customBarWidth || 
+    (chartWidth - (displayData.length - 1) * barSpacing) / displayData.length;
+
+  const bars = useMemo(() => {
+    return displayData.map((item, index) => {
+      const barX = index * (calculatedBarWidth + barSpacing);
+      const totalValue = item.segments.reduce((sum, seg) => sum + seg.value, 0);
+      
+      let cumulativeY = 0;
+      const segments = item.segments.map(seg => {
+        const segmentHeight = (seg.value / maxTotalValue) * chartHeight;
+        const segmentY = chartHeight - cumulativeY - segmentHeight;
+        cumulativeY += segmentHeight;
+        
+        return {
+          x: barX,
+          y: segmentY,
+          width: calculatedBarWidth,
+          height: segmentHeight,
+          color: seg.color,
+          value: seg.value,
+          label: seg.label,
+        };
+      });
+
+      return {
+        label: item.label,
+        segments,
+        totalValue,
+      };
+    });
+  }, [displayData, maxTotalValue, chartHeight, calculatedBarWidth, barSpacing]);
+
+  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.chartContainer}>
+        <Svg width={chartWidth} height={chartHeight}>
+          {bars.map((bar, barIndex) => (
+            bar.segments.map((segment, segmentIndex) => (
+              <Rect
+                key={`bar-${barIndex}-seg-${segmentIndex}`}
+                x={segment.x}
+                y={segment.y}
+                width={segment.width}
+                height={segment.height}
+                fill={segment.color}
+                rx={segmentIndex === bar.segments.length - 1 ? theme.radius.sm : 0}
+                ry={segmentIndex === bar.segments.length - 1 ? theme.radius.sm : 0}
+              />
+            ))
+          ))}
+        </Svg>
+
+        {showLabels && (
+          <View style={styles.labelsContainer}>
+            {bars.map((bar, index) => (
+              <View
+                key={`label-${index}`}
+                style={[styles.labelItem, { width: calculatedBarWidth + barSpacing }]}
+              >
+                <RNText
+                  style={[styles.labelText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
+                  numberOfLines={1}
+                >
+                  {bar.label}
+                </RNText>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {allSegmentLabels.map((item, index) => (
+            <View key={`legend-${index}`} style={styles.legendItem}>
+              <View style={[styles.legendColor, { backgroundColor: item.color }]} />
+              <RNText style={[styles.legendText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}>
+                {item.label}
+              </RNText>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+StackedBarChart.displayName = 'StackedBarChart';
+
+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%' },
+  chartContainer: { flex: 1, width: '100%' },
+  labelsContainer: { flexDirection: 'row', marginTop: 4 },
+  labelItem: { alignItems: 'center' },
+  labelText: { 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/StackedBarChart/index.ts

@@ -0,0 +1,2 @@
+export { StackedBarChart } from './StackedBarChart';
+export type { StackedBarChartWidgetProps, StackedBarChartData, StackedBarDataPoint, StackedBarSegment } from './types';

package/src/widgets/StackedBarChart/types.ts

@@ -0,0 +1,29 @@
+/**
+ * StackedBarChart Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface StackedBarSegment {
+  value: number;
+  color: string;
+  label: string;
+}
+
+export interface StackedBarDataPoint {
+  label: string;
+  segments: StackedBarSegment[];
+}
+
+export interface StackedBarChartData {
+  data: StackedBarDataPoint[];
+  title?: string;
+}
+
+export interface StackedBarChartWidgetProps extends BaseWidgetProps<StackedBarChartData> {
+  barWidth?: number;
+  barSpacing?: number;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showLegend?: boolean;
+  maxBars?: number;
+}