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

package/src/widgets/Heatmap/types.ts

@@ -1,27 +0,0 @@
-/**
- * Heatmap Widget types
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface HeatmapDataPoint {
-  x: number | string;
-  y: number | string;
-  value: number;
-}
-
-export interface HeatmapData {
-  data: HeatmapDataPoint[];
-  xLabels: string[];
-  yLabels: string[];
-  title?: string;
-}
-
-export interface HeatmapWidgetProps extends BaseWidgetProps<HeatmapData> {
-  cellSize?: number;
-  cellSpacing?: number;
-  showValues?: boolean;
-  showLabels?: boolean;
-  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'gradient';
-  minColor?: string;
-  maxColor?: string;
-}

package/src/widgets/Histogram/Histogram.tsx

@@ -1,173 +0,0 @@
-/**
- * Histogram Widget - Frequency distribution
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Rect, Line as SvgLine } from 'react-native-svg';
-import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
-import { HistogramWidgetProps } from './types';
-
-export const Histogram = memo<HistogramWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showXAxis = true,
-  showYAxis = true,
-  showGrid = false,
-  color,
-  barSpacing = 2,
-  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, binCount = 10 } = widgetData;
-  const padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 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 - xAxisHeight;
-
-  const barColor = color || theme.colors.chartPrimary;
-
-  // Calculate bins
-  const { bins, maxFrequency, minValue, maxValue } = useMemo(() => {
-    const min = Math.min(...data);
-    const max = Math.max(...data);
-    const binWidth = (max - min) / binCount;
-    
-    const binArray: { start: number; end: number; count: number }[] = [];
-    
-    for (let i = 0; i < binCount; i++) {
-      const start = min + i * binWidth;
-      const end = start + binWidth;
-      const count = data.filter(val => val >= start && (i === binCount - 1 ? val <= end : val < end)).length;
-      binArray.push({ start, end, count });
-    }
-
-    const maxFreq = Math.max(...binArray.map(b => b.count));
-    
-    return {
-      bins: binArray,
-      maxFrequency: maxFreq,
-      minValue: min,
-      maxValue: max,
-    };
-  }, [data, binCount]);
-
-  const yAxisLabels = useMemo(() => {
-    const step = Math.ceil(maxFrequency / 4);
-    return Array.from({ length: 5 }, (_, i) => ({
-      value: i * step,
-      y: chartHeight - (i * chartHeight) / 4,
-    }));
-  }, [maxFrequency, chartHeight]);
-
-  const barWidth = (chartWidth - (bins.length - 1) * barSpacing) / bins.length;
-
-  const bars = useMemo(() => {
-    return bins.map((bin, index) => {
-      const barHeight = (bin.count / maxFrequency) * chartHeight;
-      const barY = chartHeight - barHeight;
-      const barX = index * (barWidth + barSpacing);
-
-      return {
-        x: barX,
-        y: barY,
-        width: barWidth,
-        height: barHeight,
-        count: bin.count,
-        rangeLabel: `${bin.start.toFixed(0)}-${bin.end.toFixed(0)}`,
-      };
-    });
-  }, [bins, maxFrequency, chartHeight, barWidth, 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.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}
-              </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} />
-            ))}
-
-            {bars.map((bar, index) => (
-              <Rect
-                key={`bar-${index}`}
-                x={bar.x}
-                y={bar.y}
-                width={bar.width}
-                height={bar.height}
-                fill={barColor}
-                rx={theme.radius.sm}
-                ry={theme.radius.sm}
-              />
-            ))}
-          </Svg>
-
-          {showXAxis && (
-            <View style={[styles.xAxis, { width: chartWidth }]}>
-              <RNText style={[styles.xAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, left: 0 }]}>
-                {minValue.toFixed(0)}
-              </RNText>
-              <RNText style={[styles.xAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, right: 0 }]}>
-                {maxValue.toFixed(0)}
-              </RNText>
-            </View>
-          )}
-        </View>
-      </View>
-    </View>
-  );
-});
-
-Histogram.displayName = 'Histogram';
-
-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' },
-});

package/src/widgets/Histogram/index.ts

@@ -1,2 +0,0 @@
-export { Histogram } from './Histogram';
-export type { HistogramWidgetProps, HistogramData } from './types';

package/src/widgets/Histogram/types.ts

@@ -1,18 +0,0 @@
-/**
- * Histogram Widget types
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface HistogramData {
-  data: number[];
-  title?: string;
-  binCount?: number;
-}
-
-export interface HistogramWidgetProps extends BaseWidgetProps<HistogramData> {
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showGrid?: boolean;
-  color?: string;
-  barSpacing?: number;
-}

package/src/widgets/HorizontalBarChart/HorizontalBarChart.tsx

@@ -1,125 +0,0 @@
-/**
- * HorizontalBarChart Widget - Bars go left to right
- */
-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 { HorizontalBarChartWidgetProps } from './types';
-
-export const HorizontalBarChart = memo<HorizontalBarChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  barHeight = 24,
-  barSpacing = 12,
-  showValues = true,
-  showLabels = true,
-  maxBars = 15,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 350, 300);
-
-  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 labelWidth = showLabels ? 80 : 0;
-  const valueWidth = showValues ? 50 : 0;
-  
-  const chartWidth = dimensions.width - padding * 2 - labelWidth - valueWidth;
-  const maxValue = useMemo(() => Math.max(...displayData.map(d => d.value)), [displayData]);
-
-  const bars = useMemo(() => {
-    return displayData.map((item, index) => {
-      const normalizedValue = normalize(item.value, 0, maxValue);
-      const barWidth = normalizedValue * chartWidth;
-      const barY = index * (barHeight + barSpacing);
-      
-      return {
-        x: 0,
-        y: barY,
-        width: barWidth,
-        height: barHeight,
-        color: item.color || theme.colors.chartPrimary,
-        value: item.value,
-        label: item.label,
-      };
-    });
-  }, [displayData, maxValue, chartWidth, barHeight, barSpacing, theme.colors.chartPrimary]);
-
-  const totalHeight = bars.length * (barHeight + 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}>
-        {bars.map((bar, index) => (
-          <View key={`row-${index}`} style={styles.barRow}>
-            {showLabels && (
-              <View style={[styles.labelContainer, { width: labelWidth }]}>
-                <RNText style={[styles.label, { color: theme.colors.text, fontSize: theme.fontScale.sm }]} numberOfLines={1}>
-                  {bar.label}
-                </RNText>
-              </View>
-            )}
-            
-            <View style={{ width: chartWidth, height: barHeight }}>
-              <Svg width={chartWidth} height={barHeight}>
-                <Rect x={bar.x} y={0} width={bar.width} height={bar.height} fill={bar.color} rx={theme.radius.sm} ry={theme.radius.sm} />
-              </Svg>
-            </View>
-
-            {showValues && (
-              <View style={[styles.valueContainer, { width: valueWidth }]}>
-                <RNText style={[styles.value, { color: theme.colors.textSecondary, fontSize: theme.fontScale.sm }]}>
-                  {bar.value}
-                </RNText>
-              </View>
-            )}
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-});
-
-HorizontalBarChart.displayName = 'HorizontalBarChart';
-
-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%' },
-  barRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
-  labelContainer: { justifyContent: 'center', paddingRight: 8 },
-  label: { textAlign: 'right' },
-  valueContainer: { justifyContent: 'center', paddingLeft: 8 },
-  value: { textAlign: 'left', fontWeight: '600' },
-});

package/src/widgets/HorizontalBarChart/index.ts

@@ -1,2 +0,0 @@
-export { HorizontalBarChart } from './HorizontalBarChart';
-export type { HorizontalBarChartWidgetProps, HorizontalBarChartData, HorizontalBarDataPoint } from './types';

package/src/widgets/HorizontalBarChart/types.ts

@@ -1,23 +0,0 @@
-/**
- * HorizontalBarChart Widget types
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface HorizontalBarDataPoint {
-  value: number;
-  label: string;
-  color?: string;
-}
-
-export interface HorizontalBarChartData {
-  data: HorizontalBarDataPoint[];
-  title?: string;
-}
-
-export interface HorizontalBarChartWidgetProps extends BaseWidgetProps<HorizontalBarChartData> {
-  barHeight?: number;
-  barSpacing?: number;
-  showValues?: boolean;
-  showLabels?: boolean;
-  maxBars?: number;
-}

package/src/widgets/KPI/KPI.tsx

@@ -1,222 +0,0 @@
-/**
- * KPI Widget - Show one metric + trend
- * First widget implementation following the widget contract
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-  useWidgetDimensions,
-  useWidgetTheme,
-  createFontSizeCalculator,
-} from '../../core';
-import { formatNumber, getTrendColor } from '../../renderer-svg/adapters';
-import { KPIWidgetProps } from './types';
-
-/**
- * KPI Widget Component
- */
-export const KPI = memo<KPIWidgetProps>(({
-  data,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  animated = true,
-  showTrend = true,
-  showDelta = true,
-  fontSize: fontConfig,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 300, 120);
-  
-  // Create responsive font size calculator
-  const fontSizes = useMemo(
-    () => createFontSizeCalculator(dimensions.width, dimensions.height, fontConfig),
-    [dimensions.width, dimensions.height, fontConfig]
-  );
-  
-  // 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`}
-      >
-        <Text style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
-          Loading...
-        </Text>
-      </View>
-    );
-  }
-
-  if (!data) {
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            width: dimensions.width,
-            height: dimensions.height,
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius.md,
-          },
-        ]}
-        testID={`${testID}-empty`}
-      >
-        <Text style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
-          No data
-        </Text>
-      </View>
-    );
-  }
-
-  const { value, label, delta, trend = 'neutral', format = 'number' } = data;
-
-  // Format the value (no animation for now - Expo Go limitation)
-  const displayValue = useMemo(
-    () => formatNumber(value, format),
-    [value, format]
-  );
-
-  // Get trend color
-  const trendColor = useMemo(
-    () =>
-      getTrendColor(trend, {
-        positive: theme.colors.chartPositive,
-        negative: theme.colors.chartNegative,
-        neutral: theme.colors.chartNeutral,
-      }),
-    [trend, theme.colors]
-  );
-
-  // Format delta
-  const formattedDelta = useMemo(() => {
-    if (delta === undefined) return null;
-    const sign = delta >= 0 ? '+' : '';
-    return `${sign}${delta.toFixed(1)}%`;
-  }, [delta]);
-
-  // Trend icon
-  const trendIcon = useMemo(() => {
-    if (trend === 'up') return '↑';
-    if (trend === 'down') return '↓';
-    return '→';
-  }, [trend]);
-
-  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}
-    >
-      {/* Label */}
-      <Text
-        style={[
-          styles.label,
-          {
-            color: theme.colors.textSecondary,
-            fontSize: fontSizes.label(theme.fontScale.sm),
-            marginBottom: theme.spacing.xs,
-          },
-        ]}
-      >
-        {label}
-      </Text>
-
-      {/* Value */}
-      <Text
-        style={[
-          styles.value,
-          {
-            color: theme.colors.text,
-            fontSize: fontSizes.value(theme.fontScale.xxl),
-            fontWeight: 'bold',
-          },
-        ]}
-      >
-        {displayValue}
-      </Text>
-
-      {/* Trend and Delta */}
-      {(showTrend || showDelta) && (delta !== undefined || trend !== 'neutral') && (
-        <View style={styles.trendContainer}>
-          {showTrend && (
-            <Text
-              style={[
-                styles.trendIcon,
-                {
-                  color: trendColor,
-                  fontSize: fontSizes.secondary(theme.fontScale.md),
-                  marginRight: theme.spacing.xs,
-                },
-              ]}
-            >
-              {trendIcon}
-            </Text>
-          )}
-          {showDelta && formattedDelta && (
-            <Text
-              style={[
-                styles.delta,
-                {
-                  color: trendColor,
-                  fontSize: fontSizes.secondary(theme.fontScale.md),
-                  fontWeight: '600',
-                },
-              ]}
-            >
-              {formattedDelta}
-            </Text>
-          )}
-        </View>
-      )}
-    </View>
-  );
-});
-
-KPI.displayName = 'KPI';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  },
-  loadingText: {
-    fontSize: 16,
-  },
-  emptyText: {
-    fontSize: 16,
-  },
-  label: {
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-  },
-  value: {
-    marginBottom: 4,
-  },
-  trendContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  trendIcon: {
-    fontWeight: 'bold',
-  },
-  delta: {},
-});

package/src/widgets/KPI/index.ts

@@ -1,5 +0,0 @@
-/**
- * KPI Widget exports
- */
-export { KPI } from './KPI';
-export type { KPIWidgetProps, KPIData, KPIFormat } from './types';

package/src/widgets/KPI/types.ts

@@ -1,19 +0,0 @@
-/**
- * KPI Widget types
- */
-import { BaseWidgetProps, TrendDirection } from '../../core/types';
-
-export type KPIFormat = 'number' | 'currency' | 'percent' | 'compact';
-
-export interface KPIData {
-  value: number;
-  label: string;
-  delta?: number;
-  trend?: TrendDirection;
-  format?: KPIFormat;
-}
-
-export interface KPIWidgetProps extends BaseWidgetProps<KPIData> {
-  showTrend?: boolean;
-  showDelta?: boolean;
-}