react-native-metrify 0.1.0-alpha.1

package/src/widgets/SunburstChart/SunburstChart.tsx

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

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

package/src/widgets/SunburstChart/types.ts

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

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

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

package/src/widgets/Treemap/types.ts

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

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

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

package/src/widgets/WaterfallChart/types.ts

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