react-native-metrify 0.1.0-alpha.1

package/src/widgets/LineChart/LineChart.tsx

@@ -0,0 +1,364 @@
+/**
+ * LineChart Widget - Full line chart with X and Y axes
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Line as SvgLine } from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  normalize,
+  formatTimeLabel,
+  reduceLabels,
+} from '../../core';
+import {
+  createLinePath,
+  AnimatedPath,
+  Text,
+} from '../../renderer-svg';
+import { LineChartWidgetProps } from './types';
+
+/**
+ * LineChart Widget Component
+ */
+export const LineChart = memo<LineChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+  showLegend = true,
+  maxXLabels = 6,
+  maxYLabels = 5,
+  curveType = 'linear',
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 350, 250);
+
+  // 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.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, xAxisLabel, yAxisLabel, timeInterval } = widgetData;
+
+  // Calculate chart dimensions
+  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;
+
+  // Find global min/max for all series
+  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);
+      });
+    });
+
+    // Generate X-axis labels
+    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]);
+
+  // Y-axis labels
+  const yAxisLabels = useMemo(() => {
+    const range = globalMaxY - globalMinY;
+    const step = range / (maxYLabels - 1);
+    return Array.from({ length: maxYLabels }, (_, i) => ({
+      value: globalMinY + i * step,
+      y: chartHeight - (i * chartHeight) / (maxYLabels - 1),
+    }));
+  }, [globalMinY, globalMaxY, maxYLabels, chartHeight]);
+
+  // X-axis labels (reduced to fit)
+  const xAxisLabelsReduced = useMemo(() => {
+    return reduceLabels(xLabels, maxXLabels);
+  }, [xLabels, maxXLabels]);
+
+  // Generate paths for each series
+  const seriesPaths = useMemo(() => {
+    return series.map(s => {
+      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 };
+      });
+
+      return {
+        path: createLinePath(points),
+        color: s.color,
+        strokeWidth: s.strokeWidth || 2,
+        label: s.label,
+      };
+    });
+  }, [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 */}
+      {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.chartRow}>
+        {/* Y-Axis */}
+        {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>
+        )}
+
+        {/* Chart SVG */}
+        <View>
+          <Svg width={chartWidth} height={chartHeight}>
+            {/* Grid lines */}
+            {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}
+              />
+            ))}
+
+            {/* Line series */}
+            {seriesPaths.map((series, index) => (
+              <AnimatedPath
+                key={`series-${index}`}
+                d={series.path}
+                stroke={series.color}
+                strokeWidth={series.strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="transparent"
+              />
+            ))}
+          </Svg>
+
+          {/* X-Axis */}
+          {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>
+
+      {/* Legend */}
+      {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>
+  );
+});
+
+LineChart.displayName = 'LineChart';
+
+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/LineChart/index.ts

@@ -0,0 +1,10 @@
+/**
+ * LineChart Widget exports
+ */
+export { LineChart } from './LineChart';
+export type { 
+  LineChartWidgetProps, 
+  LineChartData,
+  LineChartSeries,
+  LineChartDataPoint
+} from './types';

package/src/widgets/LineChart/types.ts

@@ -0,0 +1,34 @@
+/**
+ * LineChart Widget types - Full line chart with axes
+ */
+import { BaseWidgetProps, TimeInterval } from '../../core';
+
+export interface LineChartDataPoint {
+  x: number | Date;
+  y: number;
+}
+
+export interface LineChartSeries {
+  data: LineChartDataPoint[];
+  color: string;
+  label?: string;
+  strokeWidth?: number;
+}
+
+export interface LineChartData {
+  series: LineChartSeries[];
+  title?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  timeInterval?: TimeInterval;
+}
+
+export interface LineChartWidgetProps extends BaseWidgetProps<LineChartData> {
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  maxXLabels?: number;
+  maxYLabels?: number;
+  curveType?: 'linear' | 'smooth';
+}

package/src/widgets/MultiLineSparkline/MultiLineSparkline.tsx

@@ -0,0 +1,234 @@
+/**
+ * MultiLineSparkline Widget - Multiple trends on same chart
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg from 'react-native-svg';
+import {
+  useWidgetDimensions,
+  useWidgetTheme,
+  useWidgetPadding,
+  useInnerDimensions,
+} from '../../core';
+import {
+  createLinePath,
+  AnimatedPath,
+  dataToPoints,
+} from '../../renderer-svg';
+import { MultiLineSparklineWidgetProps } from './types';
+
+const MAX_DATA_POINTS = 100;
+
+/**
+ * MultiLineSparkline Widget Component
+ */
+export const MultiLineSparkline = memo<MultiLineSparklineWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  style = 'line',
+  showLegend = true,
+  maxDataPoints = MAX_DATA_POINTS,
+  minHeight = 120,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 300, minHeight);
+  const padding = useWidgetPadding(theme);
+  
+  // Calculate inner dimensions
+  const legendHeight = showLegend ? 30 : 0;
+  const svgHeight = dimensions.height - legendHeight - padding.vertical;
+  
+  const innerDimensions = useInnerDimensions(
+    dimensions.width,
+    svgHeight,
+    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.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 } = widgetData;
+
+  // Find global min/max across all series for consistent scaling
+  const { globalMin, globalMax } = useMemo(() => {
+    let min = Infinity;
+    let max = -Infinity;
+    
+    series.forEach(s => {
+      const seriesMin = Math.min(...s.data);
+      const seriesMax = Math.max(...s.data);
+      if (seriesMin < min) min = seriesMin;
+      if (seriesMax > max) max = seriesMax;
+    });
+    
+    return { globalMin: min, globalMax: max };
+  }, [series]);
+
+  // Generate paths for each series
+  const seriesPaths = useMemo(() => {
+    return series.map(s => {
+      // Cap data points if needed
+      const cappedData = s.data.length > maxDataPoints
+        ? s.data.filter((_, idx) => idx % Math.ceil(s.data.length / maxDataPoints) === 0)
+        : s.data;
+      
+      // Normalize all series to same scale
+      const normalizedData = cappedData.map(val => 
+        ((val - globalMin) / (globalMax - globalMin || 1)) * 100
+      );
+      
+      const points = dataToPoints(
+        normalizedData,
+        innerDimensions.width,
+        innerDimensions.height,
+        theme.spacing.xs
+      );
+      
+      return {
+        path: createLinePath(points),
+        color: s.color,
+        strokeWidth: s.strokeWidth || 2,
+        label: s.label,
+      };
+    });
+  }, [series, maxDataPoints, innerDimensions, theme.spacing.xs, globalMin, globalMax]);
+
+  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={dimensions.width - theme.spacing.md * 2} height={svgHeight - theme.spacing.md}>
+        {seriesPaths.map((series, index) => (
+          <AnimatedPath
+            key={`series-${index}`}
+            d={series.path}
+            stroke={series.color}
+            strokeWidth={series.strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="transparent"
+          />
+        ))}
+      </Svg>
+
+      {/* Legend */}
+      {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>
+  );
+});
+
+MultiLineSparkline.displayName = 'MultiLineSparkline';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    fontSize: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  legend: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginTop: 8,
+    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/MultiLineSparkline/index.ts

@@ -0,0 +1,10 @@
+/**
+ * MultiLineSparkline Widget exports
+ */
+export { MultiLineSparkline } from './MultiLineSparkline';
+export type { 
+  MultiLineSparklineWidgetProps, 
+  MultiLineSparklineData,
+  SparklineSeries,
+  SparklineRenderStyle
+} from './types';

package/src/widgets/MultiLineSparkline/types.ts

@@ -0,0 +1,25 @@
+/**
+ * MultiLineSparkline Widget types
+ */
+import { BaseWidgetProps } from '../../core/types';
+
+export interface SparklineSeries {
+  data: number[];
+  color: string;
+  label?: string;
+  strokeWidth?: number;
+}
+
+export interface MultiLineSparklineData {
+  series: SparklineSeries[];
+  labels?: string[];
+}
+
+export type SparklineRenderStyle = 'line' | 'area';
+
+export interface MultiLineSparklineWidgetProps extends BaseWidgetProps<MultiLineSparklineData> {
+  style?: SparklineRenderStyle;
+  showLegend?: boolean;
+  maxDataPoints?: number;
+  minHeight?: number;
+}