react-native-metrify 0.1.0-alpha.1

package/src/widgets/HorizontalBarChart/HorizontalBarChart.tsx

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

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

package/src/widgets/HorizontalBarChart/types.ts

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

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

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

package/src/widgets/KPI/types.ts

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