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

package/src/widgets/BoxPlot/BoxPlot.tsx

@@ -1,252 +0,0 @@
-/**
- * BoxPlot Widget - Shows statistical distribution with quartiles
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Rect, Line as SvgLine, Circle } from 'react-native-svg';
-import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
-import { BoxPlotWidgetProps } from './types';
-
-export const BoxPlot = memo<BoxPlotWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showLabels = true,
-  showOutliers = true,
-  boxWidth = 50,
-  boxSpacing = 30,
-  color,
-  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 padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-  const labelHeight = showLabels ? 30 : 0;
-  const yAxisWidth = 40;
-
-  const chartHeight = dimensions.height - padding * 2 - titleHeight - labelHeight;
-  const chartWidth = dimensions.width - padding * 2 - yAxisWidth;
-
-  const boxColor = color || theme.colors.chartPrimary;
-
-  // Find global min/max for Y-axis
-  const { globalMin, globalMax } = useMemo(() => {
-    let min = Infinity;
-    let max = -Infinity;
-    
-    data.forEach(point => {
-      if (point.min < min) min = point.min;
-      if (point.max > max) max = point.max;
-      if (point.outliers) {
-        point.outliers.forEach(val => {
-          if (val < min) min = val;
-          if (val > max) max = val;
-        });
-      }
-    });
-    
-    return { globalMin: min, globalMax: max };
-  }, [data]);
-
-  const yAxisLabels = useMemo(() => {
-    const range = globalMax - globalMin;
-    const step = range / 4;
-    return Array.from({ length: 5 }, (_, i) => ({
-      value: globalMin + i * step,
-      y: chartHeight - (i * chartHeight) / 4,
-    }));
-  }, [globalMin, globalMax, chartHeight]);
-
-  const boxes = useMemo(() => {
-    return data.map((point, index) => {
-      const centerX = index * (boxWidth + boxSpacing) + boxWidth / 2;
-      
-      // Normalize values to chart height
-      const minY = chartHeight - normalize(point.min, globalMin, globalMax) * chartHeight;
-      const maxY = chartHeight - normalize(point.max, globalMin, globalMax) * chartHeight;
-      const q1Y = chartHeight - normalize(point.q1, globalMin, globalMax) * chartHeight;
-      const q3Y = chartHeight - normalize(point.q3, globalMin, globalMax) * chartHeight;
-      const medianY = chartHeight - normalize(point.median, globalMin, globalMax) * chartHeight;
-
-      const outlierPoints = point.outliers?.map(val => ({
-        x: centerX,
-        y: chartHeight - normalize(val, globalMin, globalMax) * chartHeight,
-      })) || [];
-
-      return {
-        label: point.label,
-        centerX,
-        boxX: centerX - boxWidth / 2,
-        boxWidth,
-        // Whiskers
-        minY,
-        maxY,
-        // Box (IQR)
-        q1Y,
-        q3Y,
-        boxHeight: Math.abs(q3Y - q1Y),
-        boxY: Math.min(q1Y, q3Y),
-        // Median line
-        medianY,
-        // Outliers
-        outliers: outlierPoints,
-      };
-    });
-  }, [data, chartHeight, globalMin, globalMax, boxWidth, boxSpacing]);
-
-  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}>
-        {/* Y-Axis */}
-        <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.toFixed(0)}
-            </RNText>
-          ))}
-        </View>
-
-        <View>
-          <Svg width={chartWidth} height={chartHeight}>
-            {boxes.map((box, index) => (
-              <React.Fragment key={`box-${index}`}>
-                {/* Whisker lines (min to Q1, Q3 to max) */}
-                <SvgLine
-                  x1={box.centerX}
-                  y1={box.minY}
-                  x2={box.centerX}
-                  y2={box.q1Y}
-                  stroke={boxColor}
-                  strokeWidth={1}
-                />
-                <SvgLine
-                  x1={box.centerX}
-                  y1={box.q3Y}
-                  x2={box.centerX}
-                  y2={box.maxY}
-                  stroke={boxColor}
-                  strokeWidth={1}
-                />
-                
-                {/* Min/Max caps */}
-                <SvgLine
-                  x1={box.centerX - boxWidth / 4}
-                  y1={box.minY}
-                  x2={box.centerX + boxWidth / 4}
-                  y2={box.minY}
-                  stroke={boxColor}
-                  strokeWidth={2}
-                />
-                <SvgLine
-                  x1={box.centerX - boxWidth / 4}
-                  y1={box.maxY}
-                  x2={box.centerX + boxWidth / 4}
-                  y2={box.maxY}
-                  stroke={boxColor}
-                  strokeWidth={2}
-                />
-                
-                {/* IQR Box (Q1 to Q3) */}
-                <Rect
-                  x={box.boxX}
-                  y={box.boxY}
-                  width={box.boxWidth}
-                  height={box.boxHeight}
-                  fill={boxColor}
-                  fillOpacity={0.3}
-                  stroke={boxColor}
-                  strokeWidth={2}
-                  rx={theme.radius.sm}
-                  ry={theme.radius.sm}
-                />
-                
-                {/* Median line */}
-                <SvgLine
-                  x1={box.boxX}
-                  y1={box.medianY}
-                  x2={box.boxX + box.boxWidth}
-                  y2={box.medianY}
-                  stroke={boxColor}
-                  strokeWidth={3}
-                />
-                
-                {/* Outliers */}
-                {showOutliers && box.outliers.map((outlier, oIndex) => (
-                  <Circle
-                    key={`outlier-${index}-${oIndex}`}
-                    cx={outlier.x}
-                    cy={outlier.y}
-                    r={3}
-                    fill={theme.colors.chartNegative}
-                    opacity={0.8}
-                  />
-                ))}
-              </React.Fragment>
-            ))}
-          </Svg>
-
-          {showLabels && (
-            <View style={styles.labelsContainer}>
-              {boxes.map((box, index) => (
-                <View
-                  key={`label-${index}`}
-                  style={[styles.labelItem, { left: box.boxX, width: box.boxWidth }]}
-                >
-                  <RNText
-                    style={[styles.labelText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
-                    numberOfLines={1}
-                  >
-                    {box.label}
-                  </RNText>
-                </View>
-              ))}
-            </View>
-          )}
-        </View>
-      </View>
-    </View>
-  );
-});
-
-BoxPlot.displayName = 'BoxPlot';
-
-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' },
-  labelsContainer: { position: 'relative', height: 30, marginTop: 4 },
-  labelItem: { position: 'absolute', alignItems: 'center' },
-  labelText: { textAlign: 'center' },
-});

package/src/widgets/BoxPlot/index.ts

@@ -1,2 +0,0 @@
-export { BoxPlot } from './BoxPlot';
-export type { BoxPlotWidgetProps, BoxPlotData, BoxPlotDataPoint } from './types';

package/src/widgets/BoxPlot/types.ts

@@ -1,27 +0,0 @@
-/**
- * BoxPlot Widget types - Statistical distribution (quartiles, outliers)
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface BoxPlotDataPoint {
-  label: string;
-  min: number;
-  q1: number;
-  median: number;
-  q3: number;
-  max: number;
-  outliers?: number[];
-}
-
-export interface BoxPlotData {
-  data: BoxPlotDataPoint[];
-  title?: string;
-}
-
-export interface BoxPlotWidgetProps extends BaseWidgetProps<BoxPlotData> {
-  showLabels?: boolean;
-  showOutliers?: boolean;
-  boxWidth?: number;
-  boxSpacing?: number;
-  color?: string;
-}

package/src/widgets/BubbleChart/BubbleChart.tsx

@@ -1,175 +0,0 @@
-/**
- * BubbleChart Widget - Scatter plot with size dimension (3D data)
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Circle, Line as SvgLine } from 'react-native-svg';
-import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
-import { BubbleChartWidgetProps } from './types';
-
-export const BubbleChart = memo<BubbleChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showXAxis = true,
-  showYAxis = true,
-  showGrid = true,
-  showLegend = true,
-  minBubbleSize = 5,
-  maxBubbleSize = 30,
-  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.series || widgetData.series.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 { series, title } = widgetData;
-  const padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-  const legendHeight = showLegend ? 30 : 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 - legendHeight - xAxisHeight;
-
-  const { globalMinX, globalMaxX, globalMinY, globalMaxY, globalMinSize, globalMaxSize } = useMemo(() => {
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, minS = Infinity, maxS = -Infinity;
-    series.forEach(s => {
-      s.data.forEach(point => {
-        if (point.x < minX) minX = point.x;
-        if (point.x > maxX) maxX = point.x;
-        if (point.y < minY) minY = point.y;
-        if (point.y > maxY) maxY = point.y;
-        if (point.size < minS) minS = point.size;
-        if (point.size > maxS) maxS = point.size;
-      });
-    });
-    return { globalMinX: minX, globalMaxX: maxX, globalMinY: minY, globalMaxY: maxY, globalMinSize: minS, globalMaxSize: maxS };
-  }, [series]);
-
-  const yAxisLabels = useMemo(() => {
-    const range = globalMaxY - globalMinY;
-    const step = range / 4;
-    return Array.from({ length: 5 }, (_, i) => ({
-      value: globalMinY + i * step,
-      y: chartHeight - (i * chartHeight) / 4,
-    }));
-  }, [globalMinY, globalMaxY, chartHeight]);
-
-  const seriesBubbles = useMemo(() => {
-    return series.map(s => {
-      const bubbles = s.data.map(point => {
-        const normalizedX = normalize(point.x, globalMinX, globalMaxX);
-        const normalizedY = normalize(point.y, globalMinY, globalMaxY);
-        const normalizedSize = normalize(point.size, globalMinSize, globalMaxSize);
-        const radius = minBubbleSize + normalizedSize * (maxBubbleSize - minBubbleSize);
-        
-        return {
-          cx: normalizedX * chartWidth,
-          cy: chartHeight - normalizedY * chartHeight,
-          r: radius,
-          label: point.label,
-        };
-      });
-
-      return {
-        bubbles,
-        color: s.color,
-        label: s.label,
-      };
-    });
-  }, [series, chartWidth, chartHeight, globalMinX, globalMaxX, globalMinY, globalMaxY, globalMinSize, globalMaxSize, minBubbleSize, maxBubbleSize]);
-
-  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.toFixed(0)}
-              </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} />
-            ))}
-
-            {seriesBubbles.map((series, seriesIndex) => (
-              series.bubbles.map((bubble, bubbleIndex) => (
-                <Circle
-                  key={`series-${seriesIndex}-bubble-${bubbleIndex}`}
-                  cx={bubble.cx}
-                  cy={bubble.cy}
-                  r={bubble.r}
-                  fill={series.color}
-                  opacity={0.6}
-                  stroke={series.color}
-                  strokeWidth={2}
-                />
-              ))
-            ))}
-          </Svg>
-        </View>
-      </View>
-
-      {showLegend && (
-        <View style={styles.legend}>
-          {seriesBubbles.map((series, index) => (
-            series.label && (
-              <View key={`legend-${index}`} style={styles.legendItem}>
-                <View style={[styles.legendColor, { backgroundColor: series.color }]} />
-                <RNText style={[styles.legendText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}>{series.label}</RNText>
-              </View>
-            )
-          ))}
-        </View>
-      )}
-    </View>
-  );
-});
-
-BubbleChart.displayName = 'BubbleChart';
-
-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' },
-  legend: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12, gap: 12 },
-  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  legendColor: { width: 12, height: 12, borderRadius: 6 },
-  legendText: { textTransform: 'uppercase', letterSpacing: 0.5 },
-});

package/src/widgets/BubbleChart/index.ts

@@ -1,2 +0,0 @@
-export { BubbleChart } from './BubbleChart';
-export type { BubbleChartWidgetProps, BubbleChartData, BubbleSeries, BubbleDataPoint } from './types';

package/src/widgets/BubbleChart/types.ts

@@ -1,33 +0,0 @@
-/**
- * BubbleChart Widget types - 3D scatter plot with size dimension
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface BubbleDataPoint {
-  x: number;
-  y: number;
-  size: number;
-  label?: string;
-}
-
-export interface BubbleSeries {
-  data: BubbleDataPoint[];
-  color: string;
-  label?: string;
-}
-
-export interface BubbleChartData {
-  series: BubbleSeries[];
-  title?: string;
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-}
-
-export interface BubbleChartWidgetProps extends BaseWidgetProps<BubbleChartData> {
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  minBubbleSize?: number;
-  maxBubbleSize?: number;
-}