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

package/src/widgets/SunburstChart/SunburstChart.tsx

@@ -1,176 +0,0 @@
-/**
- * SunburstChart Widget - Hierarchical data in concentric rings
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { useWidgetDimensions, useWidgetTheme, polarToCartesian } from '../../core';
-import { createDonutArcPath } from '../../renderer-svg';
-import { SunburstChartWidgetProps, SunburstNode } from './types';
-
-interface SunburstSegment {
-  path: string;
-  color: string;
-  label: string;
-  level: number;
-}
-
-function calculateSunburst(
-  nodes: SunburstNode[],
-  cx: number,
-  cy: number,
-  innerRadius: number,
-  outerRadius: number,
-  startAngle: number,
-  endAngle: number,
-  level: number,
-  colors: string[]
-): SunburstSegment[] {
-  const segments: SunburstSegment[] = [];
-  const totalValue = nodes.reduce((sum, node) => sum + node.value, 0);
-  
-  if (totalValue === 0) return segments;
-
-  let currentAngle = startAngle;
-  const radiusStep = (outerRadius - innerRadius) / 3; // Support 3 levels
-
-  nodes.forEach((node, index) => {
-    const angleSpan = ((endAngle - startAngle) * node.value) / totalValue;
-    const nodeEndAngle = currentAngle + angleSpan;
-    
-    const levelInnerRadius = innerRadius + level * radiusStep;
-    const levelOuterRadius = innerRadius + (level + 1) * radiusStep;
-    
-    const color = node.color || colors[index % colors.length];
-
-    // Create arc for this node
-    const path = createDonutArcPath({
-      cx,
-      cy,
-      radius: levelOuterRadius,
-      innerRadius: levelInnerRadius,
-      startAngle: currentAngle,
-      endAngle: nodeEndAngle,
-    });
-
-    segments.push({
-      path,
-      color,
-      label: node.label,
-      level,
-    });
-
-    // Recursively process children
-    if (node.children && node.children.length > 0) {
-      const childSegments = calculateSunburst(
-        node.children,
-        cx,
-        cy,
-        innerRadius,
-        outerRadius,
-        currentAngle,
-        nodeEndAngle,
-        level + 1,
-        colors
-      );
-      segments.push(...childSegments);
-    }
-
-    currentAngle = nodeEndAngle;
-  });
-
-  return segments;
-}
-
-export const SunburstChart = memo<SunburstChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showLabels = false,
-  size: customSize,
-  innerRadius = 30,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 350, 350);
-
-  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 availableSize = Math.min(
-    dimensions.width - padding * 2,
-    dimensions.height - padding * 2 - titleHeight
-  );
-  
-  const chartSize = customSize || availableSize;
-  const center = chartSize / 2;
-  const outerRadius = chartSize / 2 - 10;
-
-  const colors = [
-    theme.colors.chartPrimary,
-    theme.colors.chartSecondary,
-    theme.colors.chartTertiary,
-    theme.colors.chartQuaternary,
-    theme.colors.chartPositive,
-    theme.colors.chartNegative,
-  ];
-
-  const segments = useMemo(() => {
-    return calculateSunburst(data, center, center, innerRadius, outerRadius, 0, 360, 0, colors);
-  }, [data, center, innerRadius, outerRadius, colors]);
-
-  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}>
-        <Svg width={chartSize} height={chartSize}>
-          {segments.map((segment, index) => (
-            <Path
-              key={`segment-${index}`}
-              d={segment.path}
-              fill={segment.color}
-              opacity={0.8 - segment.level * 0.1}
-              stroke={theme.colors.background}
-              strokeWidth={2}
-            />
-          ))}
-        </Svg>
-      </View>
-    </View>
-  );
-});
-
-SunburstChart.displayName = 'SunburstChart';
-
-const styles = StyleSheet.create({
-  wrapper: { justifyContent: 'flex-start', alignItems: 'center' },
-  container: { justifyContent: 'center', alignItems: 'center' },
-  loadingText: { fontSize: 16 },
-  emptyText: { fontSize: 16 },
-  title: { textAlign: 'center', width: '100%' },
-  chartContainer: { alignItems: 'center', justifyContent: 'center' },
-});

package/src/widgets/SunburstChart/index.ts

@@ -1,2 +0,0 @@
-export { SunburstChart } from './SunburstChart';
-export type { SunburstChartWidgetProps, SunburstChartData, SunburstNode } from './types';

package/src/widgets/SunburstChart/types.ts

@@ -1,22 +0,0 @@
-/**
- * SunburstChart Widget types - Circular hierarchical visualization
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface SunburstNode {
-  label: string;
-  value: number;
-  color?: string;
-  children?: SunburstNode[];
-}
-
-export interface SunburstChartData {
-  data: SunburstNode[];
-  title?: string;
-}
-
-export interface SunburstChartWidgetProps extends BaseWidgetProps<SunburstChartData> {
-  showLabels?: boolean;
-  size?: number;
-  innerRadius?: number;
-}

package/src/widgets/Treemap/Treemap.tsx

@@ -1,191 +0,0 @@
-/**
- * Treemap Widget - Hierarchical data visualization
- */
-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 } from '../../core';
-import { Text } from '../../renderer-svg/primitives';
-import { TreemapWidgetProps, TreemapNode } from './types';
-
-interface LayoutRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  label: string;
-  value: number;
-  color: string;
-}
-
-// Simple squarified treemap algorithm
-function squarify(
-  data: TreemapNode[],
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  colors: string[]
-): LayoutRect[] {
-  const rects: LayoutRect[] = [];
-  const totalValue = data.reduce((sum, node) => sum + node.value, 0);
-  
-  if (totalValue === 0) return rects;
-
-  let currentX = x;
-  let currentY = y;
-  let remainingWidth = width;
-  let remainingHeight = height;
-
-  // Sort by value descending for better layout
-  const sortedData = [...data].sort((a, b) => b.value - a.value);
-
-  sortedData.forEach((node, index) => {
-    const ratio = node.value / totalValue;
-    const color = node.color || colors[index % colors.length];
-
-    // Simple layout: horizontal strip
-    if (remainingWidth >= remainingHeight) {
-      // Lay out vertically
-      const rectWidth = width * ratio;
-      rects.push({
-        x: currentX,
-        y: currentY,
-        width: rectWidth,
-        height: remainingHeight,
-        label: node.label,
-        value: node.value,
-        color,
-      });
-      currentX += rectWidth;
-      remainingWidth -= rectWidth;
-    } else {
-      // Lay out horizontally
-      const rectHeight = height * ratio;
-      rects.push({
-        x: currentX,
-        y: currentY,
-        width: remainingWidth,
-        height: rectHeight,
-        label: node.label,
-        value: node.value,
-        color,
-      });
-      currentY += rectHeight;
-      remainingHeight -= rectHeight;
-    }
-  });
-
-  return rects;
-}
-
-export const Treemap = memo<TreemapWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showLabels = true,
-  showValues = true,
-  colorScheme = 'categorical',
-  padding = 2,
-  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 chartPadding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-
-  const chartWidth = dimensions.width - chartPadding * 2;
-  const chartHeight = dimensions.height - chartPadding * 2 - titleHeight;
-
-  const colors = [
-    theme.colors.chartPrimary,
-    theme.colors.chartSecondary,
-    theme.colors.chartTertiary,
-    theme.colors.chartQuaternary,
-    theme.colors.chartPositive,
-    theme.colors.chartNegative,
-  ];
-
-  const rectangles = useMemo(() => {
-    return squarify(data, 0, 0, chartWidth, chartHeight, colors);
-  }, [data, chartWidth, chartHeight, colors]);
-
-  return (
-    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding: chartPadding }]} testID={testID}>
-      {title && (
-        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
-          {title}
-        </RNText>
-      )}
-
-      <Svg width={chartWidth} height={chartHeight}>
-        {rectangles.map((rect, index) => (
-          <React.Fragment key={`rect-${index}`}>
-            <Rect
-              x={rect.x + padding}
-              y={rect.y + padding}
-              width={Math.max(0, rect.width - padding * 2)}
-              height={Math.max(0, rect.height - padding * 2)}
-              fill={rect.color}
-              opacity={0.8}
-              rx={theme.radius.sm}
-              ry={theme.radius.sm}
-            />
-            {showLabels && rect.width > 40 && rect.height > 30 && (
-              <Text
-                x={rect.x + rect.width / 2}
-                y={rect.y + rect.height / 2 - (showValues ? 6 : 0)}
-                text={rect.label}
-                fontSize={theme.fontScale.xs}
-                fill="#FFFFFF"
-                textAnchor="middle"
-                fontWeight="600"
-              />
-            )}
-            {showValues && rect.width > 40 && rect.height > 30 && (
-              <Text
-                x={rect.x + rect.width / 2}
-                y={rect.y + rect.height / 2 + (showLabels ? 10 : 0)}
-                text={rect.value.toString()}
-                fontSize={theme.fontScale.xs}
-                fill="#FFFFFF"
-                textAnchor="middle"
-                opacity={0.9}
-              />
-            )}
-          </React.Fragment>
-        ))}
-      </Svg>
-    </View>
-  );
-});
-
-Treemap.displayName = 'Treemap';
-
-const styles = StyleSheet.create({
-  wrapper: { justifyContent: 'flex-start', alignItems: 'center' },
-  container: { justifyContent: 'center', alignItems: 'center' },
-  loadingText: { fontSize: 16 },
-  emptyText: { fontSize: 16 },
-  title: { textAlign: 'center', width: '100%' },
-});

package/src/widgets/Treemap/index.ts

@@ -1,2 +0,0 @@
-export { Treemap } from './Treemap';
-export type { TreemapWidgetProps, TreemapData, TreemapNode } from './types';

package/src/widgets/Treemap/types.ts

@@ -1,23 +0,0 @@
-/**
- * Treemap Widget types - Hierarchical data as nested rectangles
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface TreemapNode {
-  label: string;
-  value: number;
-  color?: string;
-  children?: TreemapNode[];
-}
-
-export interface TreemapData {
-  data: TreemapNode[];
-  title?: string;
-}
-
-export interface TreemapWidgetProps extends BaseWidgetProps<TreemapData> {
-  showLabels?: boolean;
-  showValues?: boolean;
-  colorScheme?: 'categorical' | 'sequential';
-  padding?: number;
-}

package/src/widgets/WaterfallChart/WaterfallChart.tsx

@@ -1,226 +0,0 @@
-/**
- * WaterfallChart Widget - Shows incremental positive/negative changes
- */
-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';
-import { Text } from '../../renderer-svg/primitives';
-import { WaterfallChartWidgetProps } from './types';
-
-export const WaterfallChart = memo<WaterfallChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  showValues = true,
-  showLabels = true,
-  positiveColor,
-  negativeColor,
-  totalColor,
-  barWidth = 40,
-  barSpacing = 20,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 400, 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, startLabel = 'Start' } = widgetData;
-  const padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-  const labelHeight = showLabels ? 40 : 0;
-
-  const chartHeight = dimensions.height - padding * 2 - titleHeight - labelHeight;
-  const chartWidth = dimensions.width - padding * 2;
-
-  const colorPositive = positiveColor || theme.colors.chartPositive;
-  const colorNegative = negativeColor || theme.colors.chartNegative;
-  const colorTotal = totalColor || theme.colors.chartPrimary;
-
-  // Calculate cumulative values and positions
-  const { bars, maxValue, minValue } = useMemo(() => {
-    let cumulative = 0;
-    const calculatedBars: any[] = [];
-    let max = -Infinity;
-    let min = Infinity;
-
-    data.forEach((point, index) => {
-      const isPositive = point.value >= 0;
-      const isTotal = point.isTotal || false;
-      
-      const startValue = isTotal ? 0 : cumulative;
-      const endValue = isTotal ? cumulative + point.value : cumulative + point.value;
-      
-      if (endValue > max) max = endValue;
-      if (startValue < min) min = startValue;
-      
-      calculatedBars.push({
-        label: point.label,
-        value: point.value,
-        startValue,
-        endValue,
-        isPositive,
-        isTotal,
-        x: index * (barWidth + barSpacing),
-      });
-
-      if (!isTotal) {
-        cumulative += point.value;
-      }
-    });
-
-    if (0 > min) min = 0;
-    if (0 < max) max = max;
-
-    return { bars: calculatedBars, maxValue: max, minValue: min };
-  }, [data, barWidth, barSpacing]);
-
-  const valueRange = maxValue - minValue;
-  const zeroY = chartHeight - ((0 - minValue) / valueRange) * chartHeight;
-
-  const renderedBars = useMemo(() => {
-    return bars.map(bar => {
-      const startY = chartHeight - ((bar.startValue - minValue) / valueRange) * chartHeight;
-      const endY = chartHeight - ((bar.endValue - minValue) / valueRange) * chartHeight;
-      const barHeight = Math.abs(startY - endY);
-      const barY = Math.min(startY, endY);
-
-      let color = colorTotal;
-      if (!bar.isTotal) {
-        color = bar.isPositive ? colorPositive : colorNegative;
-      }
-
-      return {
-        x: bar.x,
-        y: barY,
-        width: barWidth,
-        height: barHeight,
-        color,
-        label: bar.label,
-        value: bar.value,
-        startY,
-        endY,
-        isTotal: bar.isTotal,
-      };
-    });
-  }, [bars, chartHeight, minValue, valueRange, barWidth, colorPositive, colorNegative, colorTotal]);
-
-  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}>
-        <Svg width={chartWidth} height={chartHeight}>
-          {/* Zero line */}
-          <SvgLine
-            x1={0}
-            y1={zeroY}
-            x2={chartWidth}
-            y2={zeroY}
-            stroke={theme.colors.border}
-            strokeWidth={1}
-            strokeDasharray="4 4"
-          />
-
-          {/* Connection lines between bars */}
-          {renderedBars.map((bar, index) => {
-            if (index < renderedBars.length - 1) {
-              const nextBar = renderedBars[index + 1];
-              return (
-                <SvgLine
-                  key={`connector-${index}`}
-                  x1={bar.x + barWidth}
-                  y1={bar.endY}
-                  x2={nextBar.x}
-                  y2={nextBar.isTotal ? nextBar.y : bar.endY}
-                  stroke={theme.colors.borderLight}
-                  strokeWidth={2}
-                  strokeDasharray="4 2"
-                />
-              );
-            }
-            return null;
-          })}
-
-          {/* Bars */}
-          {renderedBars.map((bar, index) => (
-            <React.Fragment key={`bar-${index}`}>
-              <Rect
-                x={bar.x}
-                y={bar.y}
-                width={bar.width}
-                height={bar.height}
-                fill={bar.color}
-                rx={theme.radius.sm}
-                ry={theme.radius.sm}
-              />
-              {showValues && (
-                <Text
-                  x={bar.x + bar.width / 2}
-                  y={bar.y - 4}
-                  text={bar.value >= 0 ? `+${bar.value}` : `${bar.value}`}
-                  fontSize={theme.fontScale.xs}
-                  fill={theme.colors.text}
-                  textAnchor="middle"
-                />
-              )}
-            </React.Fragment>
-          ))}
-        </Svg>
-
-        {showLabels && (
-          <View style={styles.labelsContainer}>
-            {renderedBars.map((bar, index) => (
-              <View
-                key={`label-${index}`}
-                style={[styles.labelItem, { left: bar.x, width: barWidth }]}
-              >
-                <RNText
-                  style={[styles.labelText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
-                  numberOfLines={2}
-                >
-                  {bar.label}
-                </RNText>
-              </View>
-            ))}
-          </View>
-        )}
-      </View>
-    </View>
-  );
-});
-
-WaterfallChart.displayName = 'WaterfallChart';
-
-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%' },
-  labelsContainer: { position: 'relative', height: 40, marginTop: 4 },
-  labelItem: { position: 'absolute', alignItems: 'center' },
-  labelText: { textAlign: 'center' },
-});

package/src/widgets/WaterfallChart/index.ts

@@ -1,2 +0,0 @@
-export { WaterfallChart } from './WaterfallChart';
-export type { WaterfallChartWidgetProps, WaterfallChartData, WaterfallDataPoint } from './types';

package/src/widgets/WaterfallChart/types.ts

@@ -1,26 +0,0 @@
-/**
- * WaterfallChart Widget types - Shows incremental changes
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface WaterfallDataPoint {
-  label: string;
-  value: number;
-  isTotal?: boolean;
-}
-
-export interface WaterfallChartData {
-  data: WaterfallDataPoint[];
-  title?: string;
-  startLabel?: string;
-}
-
-export interface WaterfallChartWidgetProps extends BaseWidgetProps<WaterfallChartData> {
-  showValues?: boolean;
-  showLabels?: boolean;
-  positiveColor?: string;
-  negativeColor?: string;
-  totalColor?: string;
-  barWidth?: number;
-  barSpacing?: number;
-}