vibefast-cli 0.1.1

package/recipes/charts/apps/native/src/features/charts/components/radar-chart.tsx

@@ -0,0 +1,180 @@
+import {
+  Canvas,
+  Circle as SkCircle,
+  Path as SkPath,
+  Skia,
+} from '@shopify/react-native-skia';
+import React, { useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
+import Svg, { Text as SvgText } from 'react-native-svg';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+  maxValue?: number;
+}
+
+interface RadarChartDataPoint {
+  label: string;
+  value: number;
+}
+
+type Props = {
+  data: RadarChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const RadarChart = ({ data, config = {}, style }: Props) => {
+  const hasData = data.length > 0;
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    showLabels = true,
+    animated = true,
+    duration = 1000,
+    maxValue,
+  } = config;
+  const chartWidth = containerWidth || config.width || 300;
+
+  const theme = useThemeConfig();
+  const primaryColor = theme.colors.primary as string;
+  const mutedColor = theme.colors.mutedForeground as string;
+
+  const [progress, setProgress] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    if (width > 0) setContainerWidth(width);
+  };
+
+  useEffect(() => {
+    if (!animated) {
+      setProgress(1);
+      return;
+    }
+    let raf: number;
+    const start = Date.now();
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = () => {
+      const elapsed = Date.now() - start;
+      const t = Math.min(1, elapsed / (duration || 1000));
+      setProgress(easeInOutCubic(t));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setProgress(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animated, duration, data]);
+
+  const centerX = chartWidth / 2;
+  const centerY = height / 2;
+  const radius = Math.min(chartWidth, height) / 2 - 40;
+  const maxVal =
+    maxValue || (hasData ? Math.max(...data.map((d) => d.value)) : 1);
+
+  const angleStep = hasData ? (2 * Math.PI) / data.length : 0;
+  const points = useMemo(() => {
+    return (hasData ? data : []).map((item, index) => {
+      const angle = index * angleStep - Math.PI / 2;
+      const dist = (item.value / maxVal) * radius * progress;
+      return {
+        x: centerX + dist * Math.cos(angle),
+        y: centerY + dist * Math.sin(angle),
+        labelX: centerX + (radius + 20) * Math.cos(angle),
+        labelY: centerY + (radius + 20) * Math.sin(angle),
+        label: item.label,
+      };
+    });
+  }, [data, hasData, angleStep, centerX, centerY, radius, progress, maxVal]);
+
+  const radarPath = useMemo(() => {
+    if (!points.length) return Skia.Path.Make();
+    const p = Skia.Path.Make();
+    p.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) p.lineTo(points[i].x, points[i].y);
+    p.close();
+    return p;
+  }, [points]);
+
+  if (!hasData) return null;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        {/* Grid circles */}
+        {[0.2, 0.4, 0.6, 0.8, 1].map((ratio, idx) => (
+          <SkCircle
+            key={`grid-${idx}`}
+            cx={centerX}
+            cy={centerY}
+            r={radius * ratio}
+            color={mutedColor}
+            style="stroke"
+            strokeWidth={0.5}
+            opacity={0.3}
+          />
+        ))}
+        {/* Grid spokes */}
+        {(() => {
+          const p = Skia.Path.Make();
+          data.forEach((_, index) => {
+            const angle = index * angleStep - Math.PI / 2;
+            const endX = centerX + radius * Math.cos(angle);
+            const endY = centerY + radius * Math.sin(angle);
+            p.moveTo(centerX, centerY);
+            p.lineTo(endX, endY);
+          });
+          return (
+            <SkPath
+              path={p}
+              color={mutedColor}
+              style="stroke"
+              strokeWidth={0.5}
+              opacity={0.3}
+            />
+          );
+        })()}
+        {/* Radar polygon */}
+        <SkPath
+          path={radarPath}
+          color={primaryColor}
+          style="stroke"
+          strokeWidth={2}
+        />
+        <SkPath
+          path={radarPath}
+          color={primaryColor}
+          style="fill"
+          opacity={0.3}
+        />
+      </Canvas>
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {points.map((pt, idx) => (
+            <SvgText
+              key={`label-${idx}`}
+              x={pt.labelX}
+              y={pt.labelY}
+              textAnchor="middle"
+              fontSize={12}
+              fill={mutedColor}
+            >
+              {pt.label}
+            </SvgText>
+          ))}
+        </Svg>
+      )}
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/radial-bar-chart.tsx

@@ -0,0 +1,188 @@
+import {
+  Canvas,
+  Group,
+  Path as SkPath,
+  Skia,
+} from '@shopify/react-native-skia';
+import React, { useEffect, useState } from 'react';
+import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
+import Svg, { Text as SvgText } from 'react-native-svg';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  padding?: number;
+  animated?: boolean;
+  duration?: number;
+  gradient?: boolean; // not applied to stroke in Skia v1; using solid color
+}
+
+interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const RadialBarChart = ({ data, config = {}, style }: Props) => {
+  const [containerSize, setContainerSize] = useState(200);
+  const { padding = 20, animated = true, duration = 1000 } = config;
+
+  const theme = useThemeConfig();
+  const primaryColor = theme.colors.primary as string;
+  const mutedColor = theme.colors.mutedForeground as string;
+
+  const [progress, setProgress] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    const size = Math.min(width, height);
+    if (size > 0) setContainerSize(size);
+  };
+
+  useEffect(() => {
+    if (!animated) {
+      setProgress(1);
+      return;
+    }
+    let raf: number;
+    const start = Date.now();
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = () => {
+      const elapsed = Date.now() - start;
+      const t = Math.min(1, elapsed / (duration || 1000));
+      setProgress(easeInOutCubic(t));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setProgress(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animated, duration, data]);
+
+  if (!data.length) return null;
+
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const size = containerSize || 200;
+  const center = size / 2;
+  const maxRadius = (size - padding * 2) / 2;
+  const strokeWidth = maxRadius / (data.length + 1);
+
+  const colors = [
+    primaryColor,
+    '#3B82F6',
+    '#10B981',
+    '#F59E0B',
+    '#8B5CF6',
+    '#EC4899',
+  ];
+
+  return (
+    <View style={[{ width: '100%' }, style]}>
+      <View
+        style={{
+          width: '100%',
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        onLayout={onLayout}
+      >
+        <Canvas style={{ width: size, height: size }}>
+          <Group>
+            {data.map((item, index) => {
+              const r = maxRadius - index * strokeWidth - strokeWidth / 2;
+              const track = Skia.Path.Make();
+              track.addCircle(center, center, r);
+              const arc = Skia.Path.Make();
+              arc.addCircle(center, center, r);
+              const color = (item.color ||
+                colors[index % colors.length]) as string;
+              const end = (item.value / maxValue) * progress;
+              return (
+                <React.Fragment key={`rb-${index}`}>
+                  <SkPath
+                    path={track}
+                    color={mutedColor}
+                    style="stroke"
+                    strokeWidth={strokeWidth * 0.8}
+                    opacity={0.15}
+                  />
+                  <SkPath
+                    path={arc}
+                    color={color}
+                    style="stroke"
+                    strokeWidth={strokeWidth * 0.8}
+                    start={0}
+                    end={end}
+                    strokeCap="round"
+                  />
+                </React.Fragment>
+              );
+            })}
+          </Group>
+        </Canvas>
+        {/* Center values */}
+        {data.length > 0 && (
+          <Svg
+            width={size}
+            height={size}
+            style={{ position: 'absolute', left: 0, top: 0 }}
+          >
+            <SvgText
+              x={center}
+              y={center - 5}
+              textAnchor="middle"
+              fontSize={16}
+              fill={primaryColor}
+              fontWeight="bold"
+            >
+              {data.reduce((sum, item) => sum + item.value, 0)}
+            </SvgText>
+            <SvgText
+              x={center}
+              y={center + 15}
+              textAnchor="middle"
+              fontSize={12}
+              fill={mutedColor}
+            >
+              Total
+            </SvgText>
+          </Svg>
+        )}
+      </View>
+      {/* Legend */}
+      <View style={{ marginTop: 15 }}>
+        {data.map((item, index) => (
+          <View
+            key={`legend-${index}`}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginBottom: 8,
+            }}
+          >
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 6,
+                backgroundColor: item.color || colors[index % colors.length],
+                marginRight: 10,
+              }}
+            />
+            <Text>
+              {item.label}: {item.value}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/stacked-area-chart.tsx

@@ -0,0 +1,265 @@
+import {
+  Canvas,
+  Group,
+  LinearGradient,
+  Path as SkPath,
+  Skia,
+  vec,
+} from '@shopify/react-native-skia';
+import React, { useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, View, type ViewStyle } from 'react-native';
+import Svg, {
+  G as SvgG,
+  Line as SvgLine,
+  Text as SvgText,
+} from 'react-native-svg';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showGrid?: boolean;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+}
+
+export interface StackedAreaDataPoint {
+  x: number;
+  y: number[];
+  label?: string;
+}
+
+type Props = {
+  data: StackedAreaDataPoint[];
+  colors?: string[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+  categories?: string[];
+};
+
+const smoothPath = (pts: { x: number; y: number }[]) => {
+  const p = Skia.Path.Make();
+  if (!pts.length) return p;
+  p.moveTo(pts[0].x, pts[0].y);
+  for (let i = 1; i < pts.length; i++) {
+    const prev = pts[i - 1];
+    const curr = pts[i];
+    const cpx = (prev.x + curr.x) / 2;
+    const cpy = prev.y;
+    p.quadTo(cpx, cpy, curr.x, curr.y);
+  }
+  return p;
+};
+
+const areaPathFromTopAndBase = (
+  top: { x: number; y: number }[],
+  baseY: number,
+) => {
+  const topPath = smoothPath(top);
+  const p = topPath.copy();
+  if (!top.length) return p;
+  const last = top[top.length - 1];
+  const first = top[0];
+  p.lineTo(last.x, baseY);
+  p.lineTo(first.x, baseY);
+  p.close();
+  return p;
+};
+
+export const StackedAreaChart = ({
+  data,
+  colors = [],
+  config = {},
+  style,
+  categories = [],
+}: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    padding = 20,
+    showGrid = true,
+    showLabels = true,
+    animated = true,
+    duration = 1000,
+  } = config;
+  const chartWidth = containerWidth || config.width || 300;
+
+  const theme = useThemeConfig();
+  const primaryColor = theme.colors.primary as string;
+  const mutedColor = theme.colors.mutedForeground as string;
+
+  const [progress, setProgress] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    if (width > 0) setContainerWidth(width);
+  };
+
+  useEffect(() => {
+    if (!animated) {
+      setProgress(1);
+      return;
+    }
+    let raf: number;
+    const start = Date.now();
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = () => {
+      const elapsed = Date.now() - start;
+      const t = Math.min(1, elapsed / (duration || 1000));
+      setProgress(easeInOutCubic(t));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setProgress(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animated, duration, data]);
+
+  const stackedData = data.map((point) => {
+    const cumulative = point.y.reduce((acc, val) => {
+      acc.push((acc[acc.length - 1] || 0) + val);
+      return acc;
+    }, [] as number[]);
+    return { ...point, cumulative };
+  });
+
+  const maxValue = Math.max(
+    ...stackedData.map((d) => Math.max(...d.cumulative)),
+  );
+  const seriesCount = data[0]?.y.length || 0;
+  const innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  const defaultColors = [
+    primaryColor,
+    '#8884d8',
+    '#82ca9d',
+    '#ffc658',
+    '#ff7300',
+    '#00ff00',
+    '#0088fe',
+  ];
+  const seriesColors =
+    colors.length >= seriesCount
+      ? colors
+      : [...colors, ...defaultColors].slice(0, seriesCount);
+
+  const topSeriesPoints = useMemo(() => {
+    return Array.from({ length: seriesCount }, (_, seriesIndex) =>
+      stackedData.map((point, pointIndex) => ({
+        x: padding + (pointIndex / (data.length - 1)) * innerChartWidth,
+        y:
+          padding +
+          ((maxValue - point.cumulative[seriesIndex]) / maxValue) * chartHeight,
+      })),
+    );
+  }, [
+    stackedData,
+    seriesCount,
+    padding,
+    data.length,
+    innerChartWidth,
+    maxValue,
+    chartHeight,
+  ]);
+
+  if (!data.length) return null;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        {/* Grid lines (kept in SVG overlay for exact label parity) */}
+        {/* Areas */}
+        <Group>
+          {Array.from({ length: seriesCount }, (_, seriesIndex) => {
+            const top = topSeriesPoints[seriesIndex];
+            const path = areaPathFromTopAndBase(top, height - padding);
+            return (
+              <SkPath
+                key={`area-${seriesIndex}`}
+                path={path}
+                style="fill"
+                opacity={
+                  0.3 + 0.4 * (1 - seriesIndex / Math.max(1, seriesCount - 1))
+                }
+              >
+                <LinearGradient
+                  start={vec(0, padding)}
+                  end={vec(0, height - padding)}
+                  colors={[
+                    seriesColors[seriesIndex],
+                    seriesColors[seriesIndex],
+                  ]}
+                />
+              </SkPath>
+            );
+          })}
+        </Group>
+        {/* Top lines */}
+        <Group>
+          {Array.from({ length: seriesCount }, (_, seriesIndex) => {
+            const top = topSeriesPoints[seriesIndex];
+            const p = smoothPath(top);
+            return (
+              <SkPath
+                key={`line-${seriesIndex}`}
+                path={p}
+                color={seriesColors[seriesIndex]}
+                style="stroke"
+                strokeWidth={1.5}
+                end={progress}
+              />
+            );
+          })}
+        </Group>
+      </Canvas>
+      {showGrid && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          <SvgG>
+            {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+              <SvgLine
+                key={`grid-${index}`}
+                x1={padding}
+                y1={padding + ratio * chartHeight}
+                x2={chartWidth - padding}
+                y2={padding + ratio * chartHeight}
+                stroke={mutedColor}
+                strokeWidth={0.5}
+                opacity={0.3}
+              />
+            ))}
+          </SvgG>
+        </Svg>
+      )}
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          <SvgG>
+            {data.map((point, index) => (
+              <SvgText
+                key={`x-${index}`}
+                x={padding + (index / (data.length - 1)) * innerChartWidth}
+                y={height - 5}
+                textAnchor="middle"
+                fontSize={10}
+                fill={mutedColor}
+              >
+                {point.label || String(point.x)}
+              </SvgText>
+            ))}
+          </SvgG>
+        </Svg>
+      )}
+    </View>
+  );
+};