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

package/src/core/utils/time.ts

@@ -1,100 +0,0 @@
-/**
- * Time formatting utilities for chart labels
- */
-
-export type TimeInterval = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
-
-/**
- * Format date based on interval
- */
-export function formatTimeLabel(date: Date, interval: TimeInterval): string {
-  switch (interval) {
-    case 'minute':
-      return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-    
-    case 'hour':
-      return date.toLocaleTimeString('en-US', { hour: '2-digit' });
-    
-    case 'day':
-      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-    
-    case 'week':
-      return `Week ${getWeekNumber(date)}`;
-    
-    case 'month':
-      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
-    
-    case 'year':
-      return date.getFullYear().toString();
-    
-    default:
-      return date.toLocaleDateString();
-  }
-}
-
-/**
- * Get week number of year
- */
-function getWeekNumber(date: Date): number {
-  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
-  const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
-  return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
-}
-
-/**
- * Generate array of dates for a time range
- */
-export function generateTimeLabels(
-  start: Date,
-  count: number,
-  interval: TimeInterval
-): string[] {
-  const labels: string[] = [];
-  const current = new Date(start);
-  
-  for (let i = 0; i < count; i++) {
-    labels.push(formatTimeLabel(current, interval));
-    
-    // Increment based on interval
-    switch (interval) {
-      case 'minute':
-        current.setMinutes(current.getMinutes() + 1);
-        break;
-      case 'hour':
-        current.setHours(current.getHours() + 1);
-        break;
-      case 'day':
-        current.setDate(current.getDate() + 1);
-        break;
-      case 'week':
-        current.setDate(current.getDate() + 7);
-        break;
-      case 'month':
-        current.setMonth(current.getMonth() + 1);
-        break;
-      case 'year':
-        current.setFullYear(current.getFullYear() + 1);
-        break;
-    }
-  }
-  
-  return labels;
-}
-
-/**
- * Reduce labels to fit width (show every Nth label)
- */
-export function reduceLabels(labels: string[], maxLabels: number): { label: string; index: number }[] {
-  if (labels.length <= maxLabels) {
-    return labels.map((label, index) => ({ label, index }));
-  }
-  
-  const step = Math.ceil(labels.length / maxLabels);
-  const reduced: { label: string; index: number }[] = [];
-  
-  for (let i = 0; i < labels.length; i += step) {
-    reduced.push({ label: labels[i], index: i });
-  }
-  
-  return reduced;
-}

package/src/index.ts

@@ -1,13 +0,0 @@
-/**
- * Dashboard Widgets - Main entry point
- * Mobile-first dashboard widget library for React Native
- */
-
-// Core exports
-export * from './core';
-
-// Widget exports
-export * from './widgets';
-
-// Version
-export const VERSION = '0.1.0';

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

@@ -1,84 +0,0 @@
-/**
- * Adapters for bridging core utilities with SVG rendering
- */
-import { Point } from '../../core/layout';
-
-/**
- * Converts data array to SVG points
- */
-export function dataToPoints(
-  data: number[],
-  width: number,
-  height: number,
-  padding: number = 0
-): Point[] {
-  if (data.length === 0) return [];
-  
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  
-  const innerWidth = width - padding * 2;
-  const innerHeight = height - padding * 2;
-  const stepX = data.length > 1 ? innerWidth / (data.length - 1) : 0;
-  
-  return data.map((value, index) => {
-    const normalizedY = (value - min) / range;
-    return {
-      x: padding + index * stepX,
-      y: padding + innerHeight - normalizedY * innerHeight,
-    };
-  });
-}
-
-/**
- * Formats numbers for display
- */
-export function formatNumber(
-  value: number,
-  format?: 'number' | 'currency' | 'percent' | 'compact'
-): string {
-  switch (format) {
-    case 'currency':
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      }).format(value);
-    
-    case 'percent':
-      return `${value.toFixed(1)}%`;
-    
-    case 'compact':
-      if (value >= 1_000_000) {
-        return `${(value / 1_000_000).toFixed(1)}M`;
-      }
-      if (value >= 1_000) {
-        return `${(value / 1_000).toFixed(1)}K`;
-      }
-      return value.toString();
-    
-    case 'number':
-    default:
-      return new Intl.NumberFormat('en-US').format(value);
-  }
-}
-
-/**
- * Gets color for trend direction
- */
-export function getTrendColor(
-  trend: 'up' | 'down' | 'neutral',
-  colors: { positive: string; negative: string; neutral: string }
-): string {
-  switch (trend) {
-    case 'up':
-      return colors.positive;
-    case 'down':
-      return colors.negative;
-    case 'neutral':
-    default:
-      return colors.neutral;
-  }
-}

package/src/renderer-svg/index.ts

@@ -1,8 +0,0 @@
-/**
- * SVG Renderer package
- * Translates geometry to SVG primitives
- * NO BUSINESS LOGIC HERE
- */
-export * from './primitives';
-export * from './paths';
-export * from './adapters';

package/src/renderer-svg/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@dashboard-widgets/renderer-svg",
-  "version": "0.1.0",
-  "description": "SVG renderer for dashboard widgets - primitives, paths, adapters",
-  "main": "index.ts",
-  "types": "index.ts",
-  "private": true,
-  "dependencies": {
-    "@dashboard-widgets/core": "*"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-svg": ">=13.0.0",
-    "react-native-reanimated": ">=3.0.0"
-  }
-}

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

@@ -1,93 +0,0 @@
-/**
- * SVG arc path generator
- * Translates geometry to SVG path strings
- */
-import { polarToCartesian } from '../../core/math';
-
-export interface ArcPathConfig {
-  cx: number;
-  cy: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-}
-
-/**
- * Creates an SVG arc path
- * @param config - Arc configuration
- * @returns SVG path string
- */
-export function createArcPath(config: ArcPathConfig): string {
-  const { cx, cy, radius, startAngle, endAngle } = config;
-  
-  const start = polarToCartesian(cx, cy, radius, endAngle);
-  const end = polarToCartesian(cx, cy, radius, startAngle);
-  
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-  
-  return [
-    'M',
-    start.x,
-    start.y,
-    'A',
-    radius,
-    radius,
-    0,
-    largeArcFlag,
-    0,
-    end.x,
-    end.y,
-  ].join(' ');
-}
-
-/**
- * Creates a filled arc (pie slice) path
- */
-export function createFilledArcPath(config: ArcPathConfig): string {
-  const { cx, cy } = config;
-  const arcPath = createArcPath(config);
-  
-  return `${arcPath} L ${cx} ${cy} Z`;
-}
-
-/**
- * Creates a donut arc path with inner and outer radius
- */
-export function createDonutArcPath(
-  config: ArcPathConfig & { innerRadius: number }
-): string {
-  const { cx, cy, radius, innerRadius, startAngle, endAngle } = config;
-  
-  const outerStart = polarToCartesian(cx, cy, radius, endAngle);
-  const outerEnd = polarToCartesian(cx, cy, radius, startAngle);
-  const innerStart = polarToCartesian(cx, cy, innerRadius, endAngle);
-  const innerEnd = polarToCartesian(cx, cy, innerRadius, startAngle);
-  
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-  
-  return [
-    'M',
-    outerStart.x,
-    outerStart.y,
-    'A',
-    radius,
-    radius,
-    0,
-    largeArcFlag,
-    0,
-    outerEnd.x,
-    outerEnd.y,
-    'L',
-    innerEnd.x,
-    innerEnd.y,
-    'A',
-    innerRadius,
-    innerRadius,
-    0,
-    largeArcFlag,
-    1,
-    innerStart.x,
-    innerStart.y,
-    'Z',
-  ].join(' ');
-}

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

@@ -1,6 +0,0 @@
-/**
- * SVG path generators
- */
-export * from './arc';
-export * from './line';
-export * from './rect';

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';