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

package/src/widgets/ScatterPlot/ScatterPlot.tsx

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

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

package/src/widgets/ScatterPlot/types.ts

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

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

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

package/src/widgets/Sparkline/types.ts

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

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

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

package/src/widgets/StackedBarChart/types.ts

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