react-native-metrify 0.1.0-alpha.1

package/src/core/utils/responsive.ts

@@ -0,0 +1,203 @@
+/**
+ * Responsive sizing utilities for widgets
+ */
+
+import type { FontSizeConfig } from '../types';
+
+/**
+ * Scale factor type for responsive sizing
+ */
+export type ScaleFactor = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Base font sizes - used as reference for scaling
+ */
+const BASE_FONT_SIZES = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 18,
+  xl: 24,
+  xxl: 32,
+};
+
+/**
+ * Calculate responsive font size based on widget dimensions
+ * 
+ * @param baseFontSize - Base font size (from theme or custom)
+ * @param width - Widget width
+ * @param height - Widget height
+ * @param referenceSize - Reference dimension (default: 300 for width-based scaling)
+ * @returns Scaled font size
+ * 
+ * @example
+ * // For a widget that's 150px wide (half of reference 300px)
+ * getResponsiveFontSize(16, 150, 100, 300) // Returns 8 (50% of 16)
+ * 
+ * // For a widget that's 600px wide (2x reference)
+ * getResponsiveFontSize(16, 600, 200, 300) // Returns 32 (200% of 16)
+ */
+export function getResponsiveFontSize(
+  baseFontSize: number,
+  width: number,
+  height: number,
+  referenceSize: number = 300
+): number {
+  // Use the smaller dimension to ensure text fits in both directions
+  const dimension = Math.min(width, height);
+  const scaleFactor = dimension / referenceSize;
+  
+  // Clamp the scale factor to prevent text from becoming too small or too large
+  const clampedScale = Math.max(0.5, Math.min(scaleFactor, 2.5));
+  
+  return Math.round(baseFontSize * clampedScale);
+}
+
+/**
+ * Get scaled font sizes for all scale factors
+ * 
+ * @param width - Widget width
+ * @param height - Widget height
+ * @param referenceSize - Reference dimension for scaling
+ * @returns Object with scaled font sizes for each scale factor
+ * 
+ * @example
+ * const fontSizes = getScaledFontSizes(150, 100, 300);
+ * // Returns: { xs: 5, sm: 6, md: 7, lg: 9, xl: 12, xxl: 16 }
+ */
+export function getScaledFontSizes(
+  width: number,
+  height: number,
+  referenceSize: number = 300
+): Record<ScaleFactor, number> {
+  return {
+    xs: getResponsiveFontSize(BASE_FONT_SIZES.xs, width, height, referenceSize),
+    sm: getResponsiveFontSize(BASE_FONT_SIZES.sm, width, height, referenceSize),
+    md: getResponsiveFontSize(BASE_FONT_SIZES.md, width, height, referenceSize),
+    lg: getResponsiveFontSize(BASE_FONT_SIZES.lg, width, height, referenceSize),
+    xl: getResponsiveFontSize(BASE_FONT_SIZES.xl, width, height, referenceSize),
+    xxl: getResponsiveFontSize(BASE_FONT_SIZES.xxl, width, height, referenceSize),
+  };
+}
+
+/**
+ * Options for responsive font scaling
+ */
+export interface ResponsiveFontOptions {
+  /**
+   * Enable/disable responsive scaling (default: true)
+   */
+  enabled?: boolean;
+  
+  /**
+   * Minimum font size to prevent text from becoming unreadable
+   */
+  minSize?: number;
+  
+  /**
+   * Maximum font size to prevent text from becoming too large
+   */
+  maxSize?: number;
+  
+  /**
+   * Reference size for scaling calculations (default: 300)
+   */
+  referenceSize?: number;
+}
+
+/**
+ * Calculate font size with options
+ * 
+ * @param baseFontSize - Base font size
+ * @param width - Widget width
+ * @param height - Widget height
+ * @param options - Responsive font options
+ * @returns Calculated font size
+ */
+export function calculateFontSize(
+  baseFontSize: number,
+  width: number,
+  height: number,
+  options: ResponsiveFontOptions = {}
+): number {
+  const {
+    enabled = true,
+    minSize = 8,
+    maxSize = 48,
+    referenceSize = 300,
+  } = options;
+  
+  // If responsive scaling is disabled, return base size
+  if (!enabled) {
+    return baseFontSize;
+  }
+  
+  // Calculate responsive size
+  const responsiveSize = getResponsiveFontSize(
+    baseFontSize,
+    width,
+    height,
+    referenceSize
+  );
+  
+  // Apply min/max constraints
+  return Math.max(minSize, Math.min(responsiveSize, maxSize));
+}
+
+/**
+ * Create font size calculator for a widget
+ * 
+ * @param width - Widget width
+ * @param height - Widget height
+ * @param fontConfig - Font size configuration from props
+ * @returns Function to calculate responsive font sizes
+ */
+export function createFontSizeCalculator(
+  width: number,
+  height: number,
+  fontConfig: FontSizeConfig = {}
+) {
+  const {
+    responsive = true,
+    minSize = 8,
+    maxSize = 48,
+  } = fontConfig;
+  
+  return {
+    /**
+     * Get font size for labels
+     */
+    label: (baseFontSize: number): number => {
+      return fontConfig.labelSize ?? calculateFontSize(
+        baseFontSize,
+        width,
+        height,
+        { enabled: responsive, minSize, maxSize }
+      );
+    },
+    
+    /**
+     * Get font size for values
+     */
+    value: (baseFontSize: number): number => {
+      return fontConfig.valueSize ?? calculateFontSize(
+        baseFontSize,
+        width,
+        height,
+        { enabled: responsive, minSize, maxSize }
+      );
+    },
+    
+    /**
+     * Get font size for secondary text
+     */
+    secondary: (baseFontSize: number): number => {
+      return fontConfig.secondarySize ?? calculateFontSize(
+        baseFontSize,
+        width,
+        height,
+        { enabled: responsive, minSize, maxSize }
+      );
+    },
+  };
+}

package/src/core/utils/time.ts

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

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

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

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

@@ -0,0 +1,17 @@
+{
+  "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

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

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

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

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

@@ -0,0 +1,80 @@
+/**
+ * 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(' ');
+}