react-native-metrify 0.1.0-alpha.1

package/dist/esm/widgets/Histogram/Histogram.js

@@ -0,0 +1,116 @@
+/**
+ * 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 } from '../../core';
+export const Histogram = memo(({ 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 = [];
+        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' },
+});
+//# sourceMappingURL=Histogram.js.map

package/dist/esm/widgets/Histogram/Histogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Histogram.js","sourceRoot":"","sources":["../../../../src/widgets/Histogram/Histogram.tsx"],"names":[],"mappings":"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"}

package/dist/esm/widgets/Histogram/index.js

@@ -0,0 +1,2 @@
+export { Histogram } from './Histogram';
+//# sourceMappingURL=index.js.map

package/dist/esm/widgets/Histogram/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/widgets/Histogram/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/widgets/Histogram/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/widgets/Histogram/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/Histogram/types.ts"],"names":[],"mappings":""}

package/dist/esm/widgets/HorizontalBarChart/HorizontalBarChart.js

@@ -0,0 +1,88 @@
+/**
+ * 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';
+export const HorizontalBarChart = memo(({ 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' },
+});
+//# sourceMappingURL=HorizontalBarChart.js.map

package/dist/esm/widgets/HorizontalBarChart/HorizontalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarChart.js","sourceRoot":"","sources":["../../../../src/widgets/HorizontalBarChart/HorizontalBarChart.tsx"],"names":[],"mappings":"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"}

package/dist/esm/widgets/HorizontalBarChart/index.js

@@ -0,0 +1,2 @@
+export { HorizontalBarChart } from './HorizontalBarChart';
+//# sourceMappingURL=index.js.map

package/dist/esm/widgets/HorizontalBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/widgets/HorizontalBarChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/widgets/HorizontalBarChart/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/widgets/HorizontalBarChart/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/HorizontalBarChart/types.ts"],"names":[],"mappings":""}

package/dist/esm/widgets/KPI/KPI.js

@@ -0,0 +1,159 @@
+/**
+ * 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';
+/**
+ * KPI Widget Component
+ */
+export const KPI = memo(({ 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: {},
+});
+//# sourceMappingURL=KPI.js.map

package/dist/esm/widgets/KPI/KPI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPI.js","sourceRoot":"","sources":["../../../../src/widgets/KPI/KPI.tsx"],"names":[],"mappings":"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"}

package/dist/esm/widgets/KPI/index.js

@@ -0,0 +1,5 @@
+/**
+ * KPI Widget exports
+ */
+export { KPI } from './KPI';
+//# sourceMappingURL=index.js.map

package/dist/esm/widgets/KPI/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/widgets/KPI/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/esm/widgets/KPI/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/widgets/KPI/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/KPI/types.ts"],"names":[],"mappings":""}