react-native-metrify 0.1.0-alpha.1

package/src/widgets/RadarChart/RadarChart.tsx

@@ -0,0 +1,213 @@
+/**
+ * RadarChart Widget - Multi-axis circular chart
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Polygon, Line as SvgLine, Circle } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, polarToCartesian, normalize } from '../../core';
+import { Text } from '../../renderer-svg/primitives';
+import { RadarChartWidgetProps } from './types';
+
+export const RadarChart = memo<RadarChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showLabels = true,
+  showLegend = true,
+  showGrid = true,
+  gridLevels = 5,
+  size: customSize,
+  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.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, maxValue: customMaxValue } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const legendHeight = showLegend ? 30 : 0;
+  const labelPadding = showLabels ? 40 : 10;
+
+  const availableSize = Math.min(
+    dimensions.width - padding * 2 - labelPadding * 2,
+    dimensions.height - padding * 2 - titleHeight - legendHeight - labelPadding * 2
+  );
+  
+  const chartSize = customSize || availableSize;
+  const center = chartSize / 2 + labelPadding;
+  const radius = chartSize / 2;
+
+  // Get all axis names
+  const axes = series[0].data.map(d => d.axis);
+  const axisCount = axes.length;
+
+  // Find max value
+  const maxValue = customMaxValue || Math.max(...series.flatMap(s => s.data.map(d => d.value)));
+
+  // Calculate angle for each axis
+  const angleStep = (2 * Math.PI) / axisCount;
+
+  // Grid circles
+  const gridCircles = useMemo(() => {
+    return Array.from({ length: gridLevels }, (_, i) => {
+      const r = ((i + 1) / gridLevels) * radius;
+      return { radius: r, value: ((i + 1) / gridLevels) * maxValue };
+    });
+  }, [gridLevels, radius, maxValue]);
+
+  // Axis lines
+  const axisLines = useMemo(() => {
+    return axes.map((axis, index) => {
+      const angle = index * angleStep - Math.PI / 2; // Start from top
+      const point = polarToCartesian(center, center, radius, (angle * 180) / Math.PI + 90);
+      
+      // Calculate label position (outside the circle)
+      const labelDistance = radius + 20;
+      const labelPoint = polarToCartesian(center, center, labelDistance, (angle * 180) / Math.PI + 90);
+      
+      return {
+        x1: center,
+        y1: center,
+        x2: point.x,
+        y2: point.y,
+        labelX: labelPoint.x,
+        labelY: labelPoint.y,
+        label: axis,
+      };
+    });
+  }, [axes, center, radius, angleStep]);
+
+  // Data polygons for each series
+  const dataPolygons = useMemo(() => {
+    return series.map(s => {
+      const points = s.data.map((point, index) => {
+        const angle = index * angleStep - Math.PI / 2;
+        const normalizedValue = normalize(point.value, 0, maxValue);
+        const r = normalizedValue * radius;
+        const coord = polarToCartesian(center, center, r, (angle * 180) / Math.PI + 90);
+        return `${coord.x},${coord.y}`;
+      }).join(' ');
+
+      return {
+        points,
+        color: s.color,
+        label: s.label,
+      };
+    });
+  }, [series, center, radius, maxValue, angleStep]);
+
+  const svgSize = chartSize + labelPadding * 2;
+
+  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={svgSize} height={svgSize}>
+          {/* Grid circles */}
+          {showGrid && gridCircles.map((circle, index) => (
+            <Circle
+              key={`grid-${index}`}
+              cx={center}
+              cy={center}
+              r={circle.radius}
+              stroke={theme.colors.borderLight}
+              strokeWidth={1}
+              fill="transparent"
+            />
+          ))}
+
+          {/* Axis lines */}
+          {axisLines.map((line, index) => (
+            <SvgLine
+              key={`axis-${index}`}
+              x1={line.x1}
+              y1={line.y1}
+              x2={line.x2}
+              y2={line.y2}
+              stroke={theme.colors.border}
+              strokeWidth={1}
+            />
+          ))}
+
+          {/* Data polygons */}
+          {dataPolygons.map((polygon, index) => (
+            <Polygon
+              key={`polygon-${index}`}
+              points={polygon.points}
+              fill={polygon.color}
+              fillOpacity={0.2}
+              stroke={polygon.color}
+              strokeWidth={2}
+            />
+          ))}
+
+          {/* Axis labels */}
+          {showLabels && axisLines.map((line, index) => (
+            <Text
+              key={`label-${index}`}
+              x={line.labelX}
+              y={line.labelY}
+              text={line.label}
+              fontSize={theme.fontScale.xs}
+              fill={theme.colors.text}
+              textAnchor="middle"
+            />
+          ))}
+        </Svg>
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {dataPolygons.map((polygon, index) => (
+            polygon.label && (
+              <View key={`legend-${index}`} style={styles.legendItem}>
+                <View style={[styles.legendColor, { backgroundColor: polygon.color }]} />
+                <RNText style={[styles.legendText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}>
+                  {polygon.label}
+                </RNText>
+              </View>
+            )
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+RadarChart.displayName = 'RadarChart';
+
+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' },
+  legend: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12, gap: 12 },
+  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  legendColor: { width: 12, height: 12, borderRadius: 2 },
+  legendText: { textTransform: 'uppercase', letterSpacing: 0.5 },
+});

package/src/widgets/RadarChart/index.ts

@@ -0,0 +1,2 @@
+export { RadarChart } from './RadarChart';
+export type { RadarChartWidgetProps, RadarChartData, RadarSeries, RadarDataPoint } from './types';

package/src/widgets/RadarChart/types.ts

@@ -0,0 +1,29 @@
+/**
+ * RadarChart Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface RadarDataPoint {
+  axis: string;
+  value: number;
+}
+
+export interface RadarSeries {
+  data: RadarDataPoint[];
+  color: string;
+  label?: string;
+}
+
+export interface RadarChartData {
+  series: RadarSeries[];
+  title?: string;
+  maxValue?: number;
+}
+
+export interface RadarChartWidgetProps extends BaseWidgetProps<RadarChartData> {
+  showLabels?: boolean;
+  showLegend?: boolean;
+  showGrid?: boolean;
+  gridLevels?: number;
+  size?: number;
+}

package/src/widgets/SankeyDiagram/SankeyDiagram.tsx

@@ -0,0 +1,272 @@
+/**
+ * SankeyDiagram Widget - Flow visualization showing how values flow between nodes
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect, Path } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme } from '../../core';
+import { Text } from '../../renderer-svg/primitives';
+import { SankeyDiagramWidgetProps } from './types';
+
+interface LayoutNode {
+  id: string;
+  label: string;
+  x: number;
+  y: number;
+  height: number;
+  totalValue: number;
+}
+
+interface LayoutLink {
+  source: LayoutNode;
+  target: LayoutNode;
+  value: number;
+  sourceY: number;
+  targetY: number;
+  color: string;
+}
+
+export const SankeyDiagram = memo<SankeyDiagramWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  nodeWidth = 20,
+  nodePadding = 20,
+  showLabels = true,
+  showValues = false,
+  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.nodes || widgetData.nodes.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 { nodes, links, title } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const labelWidth = showLabels ? 60 : 0;
+
+  const chartWidth = dimensions.width - padding * 2 - labelWidth * 2;
+  const chartHeight = dimensions.height - padding * 2 - titleHeight;
+
+  const defaultColors = [
+    theme.colors.chartPrimary,
+    theme.colors.chartSecondary,
+    theme.colors.chartTertiary,
+    theme.colors.chartQuaternary,
+  ];
+
+  // Simple Sankey layout algorithm
+  const { layoutNodes, layoutLinks } = useMemo(() => {
+    // Calculate node values (sum of inputs/outputs)
+    const nodeValues = new Map<string, number>();
+    nodes.forEach(node => nodeValues.set(node.id, 0));
+    
+    links.forEach(link => {
+      const sourceVal = nodeValues.get(link.source) || 0;
+      const targetVal = nodeValues.get(link.target) || 0;
+      nodeValues.set(link.source, Math.max(sourceVal, link.value));
+      nodeValues.set(link.target, targetVal + link.value);
+    });
+
+    // Determine node layers (simple left-to-right)
+    const layers = new Map<string, number>();
+    const sourceNodes = new Set(links.map(l => l.source));
+    const targetNodes = new Set(links.map(l => l.target));
+    
+    // Layer 0: nodes that are only sources
+    nodes.forEach(node => {
+      if (sourceNodes.has(node.id) && !targetNodes.has(node.id)) {
+        layers.set(node.id, 0);
+      }
+    });
+    
+    // Layer 1: nodes that receive from layer 0
+    nodes.forEach(node => {
+      if (!layers.has(node.id)) {
+        const hasLayer0Source = links.some(
+          l => l.target === node.id && layers.get(l.source) === 0
+        );
+        if (hasLayer0Source) {
+          layers.set(node.id, 1);
+        }
+      }
+    });
+    
+    // Layer 2: everything else
+    nodes.forEach(node => {
+      if (!layers.has(node.id)) {
+        layers.set(node.id, 2);
+      }
+    });
+
+    const maxLayer = Math.max(...Array.from(layers.values()));
+    const layerWidth = chartWidth / (maxLayer + 1);
+
+    // Position nodes
+    const positionedNodes: LayoutNode[] = [];
+    const nodesByLayer = new Map<number, string[]>();
+    
+    layers.forEach((layer, nodeId) => {
+      if (!nodesByLayer.has(layer)) {
+        nodesByLayer.set(layer, []);
+      }
+      nodesByLayer.get(layer)!.push(nodeId);
+    });
+
+    nodesByLayer.forEach((nodeIds, layer) => {
+      const layerHeight = chartHeight - (nodeIds.length - 1) * nodePadding;
+      const totalValue = nodeIds.reduce((sum, id) => sum + (nodeValues.get(id) || 0), 0);
+      
+      let currentY = 0;
+      nodeIds.forEach(nodeId => {
+        const node = nodes.find(n => n.id === nodeId)!;
+        const nodeValue = nodeValues.get(nodeId) || 0;
+        const nodeHeight = Math.max((nodeValue / totalValue) * layerHeight, 20);
+        
+        positionedNodes.push({
+          id: nodeId,
+          label: node.label,
+          x: layer * layerWidth + labelWidth,
+          y: currentY,
+          height: nodeHeight,
+          totalValue: nodeValue,
+        });
+        
+        currentY += nodeHeight + nodePadding;
+      });
+    });
+
+    // Create link paths
+    const positionedLinks: LayoutLink[] = [];
+    links.forEach((link, index) => {
+      const sourceNode = positionedNodes.find(n => n.id === link.source);
+      const targetNode = positionedNodes.find(n => n.id === link.target);
+      
+      if (sourceNode && targetNode) {
+        // Calculate vertical positions within nodes
+        const sourceLinks = links.filter(l => l.source === link.source);
+        const targetLinks = links.filter(l => l.target === link.target);
+        
+        const sourceLinkIndex = sourceLinks.findIndex(l => l === link);
+        const targetLinkIndex = targetLinks.findIndex(l => l === link);
+        
+        const sourceTotal = sourceLinks.reduce((sum, l) => sum + l.value, 0);
+        const targetTotal = targetLinks.reduce((sum, l) => sum + l.value, 0);
+        
+        const sourceOffsetBefore = sourceLinks
+          .slice(0, sourceLinkIndex)
+          .reduce((sum, l) => sum + l.value, 0);
+        const targetOffsetBefore = targetLinks
+          .slice(0, targetLinkIndex)
+          .reduce((sum, l) => sum + l.value, 0);
+        
+        const sourceY = sourceNode.y + (sourceOffsetBefore / sourceTotal) * sourceNode.height;
+        const targetY = targetNode.y + (targetOffsetBefore / targetTotal) * targetNode.height;
+        const linkHeight = (link.value / sourceTotal) * sourceNode.height;
+
+        positionedLinks.push({
+          source: sourceNode,
+          target: targetNode,
+          value: link.value,
+          sourceY,
+          targetY,
+          color: link.color || defaultColors[index % defaultColors.length],
+        });
+      }
+    });
+
+    return { layoutNodes: positionedNodes, layoutLinks: positionedLinks };
+  }, [nodes, links, chartWidth, chartHeight, nodeWidth, nodePadding, labelWidth, defaultColors]);
+
+  // Create curved paths for links
+  function createLinkPath(link: LayoutLink, linkHeight: number): string {
+    const sourceX = link.source.x + nodeWidth;
+    const targetX = link.target.x;
+    const midX = (sourceX + targetX) / 2;
+
+    return `
+      M ${sourceX} ${link.sourceY}
+      C ${midX} ${link.sourceY}, ${midX} ${link.targetY}, ${targetX} ${link.targetY}
+      L ${targetX} ${link.targetY + linkHeight}
+      C ${midX} ${link.targetY + linkHeight}, ${midX} ${link.sourceY + linkHeight}, ${sourceX} ${link.sourceY + linkHeight}
+      Z
+    `;
+  }
+
+  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>
+      )}
+
+      <Svg width={chartWidth + labelWidth * 2} height={chartHeight}>
+        {/* Links */}
+        {layoutLinks.map((link, index) => {
+          const linkHeight = (link.value / link.source.totalValue) * link.source.height;
+          return (
+            <Path
+              key={`link-${index}`}
+              d={createLinkPath(link, linkHeight)}
+              fill={link.color}
+              opacity={0.4}
+            />
+          );
+        })}
+
+        {/* Nodes */}
+        {layoutNodes.map((node, index) => (
+          <React.Fragment key={`node-${index}`}>
+            <Rect
+              x={node.x}
+              y={node.y}
+              width={nodeWidth}
+              height={node.height}
+              fill={theme.colors.chartPrimary}
+              rx={theme.radius.sm}
+              ry={theme.radius.sm}
+            />
+            {showLabels && (
+              <Text
+                x={node.x < chartWidth / 2 ? node.x - 5 : node.x + nodeWidth + 5}
+                y={node.y + node.height / 2}
+                text={node.label}
+                fontSize={theme.fontScale.xs}
+                fill={theme.colors.text}
+                textAnchor={node.x < chartWidth / 2 ? 'end' : 'start'}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </Svg>
+    </View>
+  );
+});
+
+SankeyDiagram.displayName = 'SankeyDiagram';
+
+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/SankeyDiagram/index.ts

@@ -0,0 +1,2 @@
+export { SankeyDiagram } from './SankeyDiagram';
+export type { SankeyDiagramWidgetProps, SankeyDiagramData, SankeyNode, SankeyLink } from './types';

package/src/widgets/SankeyDiagram/types.ts

@@ -0,0 +1,29 @@
+/**
+ * SankeyDiagram Widget types - Flow visualization
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface SankeyNode {
+  id: string;
+  label: string;
+}
+
+export interface SankeyLink {
+  source: string;
+  target: string;
+  value: number;
+  color?: string;
+}
+
+export interface SankeyDiagramData {
+  nodes: SankeyNode[];
+  links: SankeyLink[];
+  title?: string;
+}
+
+export interface SankeyDiagramWidgetProps extends BaseWidgetProps<SankeyDiagramData> {
+  nodeWidth?: number;
+  nodePadding?: number;
+  showLabels?: boolean;
+  showValues?: boolean;
+}