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

package/src/renderer-svg/paths/line.ts

@@ -1,83 +0,0 @@
-/**
- * SVG line path generators
- */
-import { Point } from '../../core/layout';
-
-/**
- * Creates a simple line path from points
- */
-export function createLinePath(points: Point[]): string {
-  if (points.length === 0) return '';
-  
-  const pathParts = points.map((point, index) => {
-    const command = index === 0 ? 'M' : 'L';
-    return `${command} ${point.x} ${point.y}`;
-  });
-  
-  return pathParts.join(' ');
-}
-
-/**
- * Creates a smooth curve path using quadratic bezier curves
- */
-export function createSmoothLinePath(points: Point[]): string {
-  if (points.length === 0) return '';
-  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
-  
-  const pathParts: string[] = [`M ${points[0].x} ${points[0].y}`];
-  
-  for (let i = 0; i < points.length - 1; i++) {
-    const current = points[i];
-    const next = points[i + 1];
-    
-    // Calculate control point (midpoint)
-    const controlX = (current.x + next.x) / 2;
-    const controlY = (current.y + next.y) / 2;
-    
-    if (i === 0) {
-      // First segment: use simple control point
-      pathParts.push(`Q ${current.x} ${current.y} ${controlX} ${controlY}`);
-    } else {
-      // Subsequent segments: smooth curve
-      pathParts.push(`T ${controlX} ${controlY}`);
-    }
-  }
-  
-  // Final point
-  const lastPoint = points[points.length - 1];
-  pathParts.push(`T ${lastPoint.x} ${lastPoint.y}`);
-  
-  return pathParts.join(' ');
-}
-
-/**
- * Creates an area path (filled under line)
- */
-export function createAreaPath(
-  points: Point[],
-  baselineY: number
-): string {
-  if (points.length === 0) return '';
-  
-  const linePath = createLinePath(points);
-  const lastPoint = points[points.length - 1];
-  const firstPoint = points[0];
-  
-  return `${linePath} L ${lastPoint.x} ${baselineY} L ${firstPoint.x} ${baselineY} Z`;
-}
-
-/**
- * Creates a smooth area path
- */
-export function createSmoothAreaPath(
-  points: Point[],
-  baselineY: number
-): string {
-  if (points.length === 0) return '';
-  
-  const linePath = createSmoothLinePath(points);
-  const lastPoint = points[points.length - 1];
-  const firstPoint = points[0];
-  
-  return `${linePath} L ${lastPoint.x} ${baselineY} L ${firstPoint.x} ${baselineY} Z`;
-}

package/src/renderer-svg/paths/rect.ts

@@ -1,80 +0,0 @@
-/**
- * SVG rectangle path generators
- */
-
-export interface RectConfig {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  radius?: number;
-}
-
-/**
- * Creates a rounded rectangle path
- */
-export function createRoundedRectPath(config: RectConfig): string {
-  const { x, y, width, height, radius = 0 } = config;
-  
-  if (radius === 0) {
-    return `M ${x} ${y} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height} Z`;
-  }
-  
-  const r = Math.min(radius, width / 2, height / 2);
-  
-  return [
-    `M ${x + r} ${y}`,
-    `L ${x + width - r} ${y}`,
-    `Q ${x + width} ${y} ${x + width} ${y + r}`,
-    `L ${x + width} ${y + height - r}`,
-    `Q ${x + width} ${y + height} ${x + width - r} ${y + height}`,
-    `L ${x + r} ${y + height}`,
-    `Q ${x} ${y + height} ${x} ${y + height - r}`,
-    `L ${x} ${y + r}`,
-    `Q ${x} ${y} ${x + r} ${y}`,
-    'Z',
-  ].join(' ');
-}
-
-/**
- * Creates a rectangle with only specific corners rounded
- */
-export function createPartiallyRoundedRectPath(
-  config: RectConfig & {
-    radiusTopLeft?: number;
-    radiusTopRight?: number;
-    radiusBottomRight?: number;
-    radiusBottomLeft?: number;
-  }
-): string {
-  const {
-    x,
-    y,
-    width,
-    height,
-    radiusTopLeft = 0,
-    radiusTopRight = 0,
-    radiusBottomRight = 0,
-    radiusBottomLeft = 0,
-  } = config;
-  
-  const rtl = Math.min(radiusTopLeft, width / 2, height / 2);
-  const rtr = Math.min(radiusTopRight, width / 2, height / 2);
-  const rbr = Math.min(radiusBottomRight, width / 2, height / 2);
-  const rbl = Math.min(radiusBottomLeft, width / 2, height / 2);
-  
-  return [
-    `M ${x + rtl} ${y}`,
-    `L ${x + width - rtr} ${y}`,
-    rtr > 0 ? `Q ${x + width} ${y} ${x + width} ${y + rtr}` : '',
-    `L ${x + width} ${y + height - rbr}`,
-    rbr > 0 ? `Q ${x + width} ${y + height} ${x + width - rbr} ${y + height}` : '',
-    `L ${x + rbl} ${y + height}`,
-    rbl > 0 ? `Q ${x} ${y + height} ${x} ${y + height - rbl}` : '',
-    `L ${x} ${y + rtl}`,
-    rtl > 0 ? `Q ${x} ${y} ${x + rtl} ${y}` : '',
-    'Z',
-  ]
-    .filter(Boolean)
-    .join(' ');
-}

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

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

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

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

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

package/src/widgets/AreaChart/AreaChart.tsx

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

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

package/src/widgets/AreaChart/types.ts

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