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

package/src/widgets/RadarChart/RadarChart.tsx

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

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

package/src/widgets/RadarChart/types.ts

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

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

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

package/src/widgets/SankeyDiagram/types.ts

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