vibefast-cli 0.1.1

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

@@ -0,0 +1,143 @@
+import { Canvas, Group, RoundedRect } 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 { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+}
+
+interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+export const ColumnChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    padding = 20,
+    showLabels = true,
+    animated = true,
+    duration = 800,
+  } = 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 || 800));
+      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 innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+  const barHeight = (chartHeight / data.length) * 0.8;
+  const barSpacing = (chartHeight / data.length) * 0.2;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        <Group>
+          {data.map((item, index) => {
+            const w = (item.value / maxValue) * innerChartWidth * progress;
+            const x = padding;
+            const y =
+              padding + index * (barHeight + barSpacing) + barSpacing / 2;
+            return (
+              <RoundedRect
+                key={`bar-${index}`}
+                x={x}
+                y={y}
+                width={w}
+                height={barHeight}
+                color={(item.color || primaryColor) as string}
+                r={4}
+              />
+            );
+          })}
+        </Group>
+      </Canvas>
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {data.map((item, index) => {
+            const w = (item.value / maxValue) * innerChartWidth;
+            const x = padding;
+            const y =
+              padding + index * (barHeight + barSpacing) + barSpacing / 2;
+            return (
+              <React.Fragment key={`label-${index}`}>
+                <SvgText
+                  x={padding - 10}
+                  y={y + barHeight / 2}
+                  textAnchor="end"
+                  fontSize={12}
+                  fill={mutedColor}
+                  alignmentBaseline="middle"
+                >
+                  {item.label}
+                </SvgText>
+                <SvgText
+                  x={x + w + 10}
+                  y={y + barHeight / 2}
+                  textAnchor="start"
+                  fontSize={11}
+                  fill={mutedColor}
+                  fontWeight="600"
+                  alignmentBaseline="middle"
+                >
+                  {item.value}
+                </SvgText>
+              </React.Fragment>
+            );
+          })}
+        </Svg>
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,246 @@
+import {
+  Canvas,
+  Group,
+  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 { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  showLabels?: boolean; // not rendered in Skia v1 (no font binding yet)
+  animated?: boolean;
+  duration?: number;
+  innerRadius?: number; // ratio 0..1
+}
+
+interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+const makeDonutSlicePath = (
+  cx: number,
+  cy: number,
+  outerR: number,
+  innerR: number,
+  startAngle: number,
+  endAngle: number,
+) => {
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+
+  const x1 = cx + outerR * Math.cos(startAngle);
+  const y1 = cy + outerR * Math.sin(startAngle);
+  const x2 = cx + outerR * Math.cos(endAngle);
+  const y2 = cy + outerR * Math.sin(endAngle);
+
+  const x3 = cx + innerR * Math.cos(endAngle);
+  const y3 = cy + innerR * Math.sin(endAngle);
+  const x4 = cx + innerR * Math.cos(startAngle);
+  const y4 = cy + innerR * Math.sin(startAngle);
+
+  const pathData = [
+    `M ${x1} ${y1}`,
+    `A ${outerR} ${outerR} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+    `L ${x3} ${y3}`,
+    `A ${innerR} ${innerR} 0 ${largeArcFlag} 0 ${x4} ${y4}`,
+    'Z',
+  ].join(' ');
+
+  return Skia.Path.MakeFromSVGString(pathData) || Skia.Path.Make();
+};
+
+export const DoughnutChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+  const {
+    height = 200,
+    animated = true,
+    duration = 1000,
+    innerRadius = 0.5,
+    showLabels = true,
+  } = config;
+
+  const theme = useThemeConfig();
+  const primaryColor = theme.colors.primary as string;
+  const chartWidth = containerWidth || config.width || 300;
+  const centerX = chartWidth / 2;
+  const centerY = height / 2;
+
+  const total = Math.max(
+    1,
+    data.reduce((s, d) => s + d.value, 0),
+  );
+  const outerR = Math.min(chartWidth, height) / 2 - 20;
+  const innerR = outerR * innerRadius;
+
+  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]);
+
+  // fallback palette based on theme
+  const colors = useMemo(
+    () =>
+      [
+        primaryColor,
+        theme.colors.success[500],
+        theme.colors.warning[500],
+        theme.colors.danger[500],
+        theme.colors.neutral[500],
+        theme.colors.primary[600],
+        theme.colors.success[600],
+        theme.colors.warning[600],
+        theme.colors.danger[600],
+        theme.colors.neutral[600],
+      ] as string[],
+    [
+      primaryColor,
+      theme.colors.success[500],
+      theme.colors.warning[500],
+      theme.colors.danger[500],
+      theme.colors.neutral[500],
+      theme.colors.primary[600],
+      theme.colors.success[600],
+      theme.colors.warning[600],
+      theme.colors.danger[600],
+      theme.colors.neutral[600],
+    ],
+  );
+
+  // Calculate cumulative data properly to avoid mutation
+  const cumulativeData = useMemo(() => {
+    if (!data.length) return [];
+    let accumulatedStart = -Math.PI / 2;
+    return data.map((item, idx) => {
+      const delta = (item.value / total) * Math.PI * 2 * progress;
+      const start = accumulatedStart;
+      const end = start + delta;
+      accumulatedStart = end;
+      const color = (item.color || colors[idx % colors.length]) as string;
+      const path = makeDonutSlicePath(
+        centerX,
+        centerY,
+        outerR,
+        innerR,
+        start,
+        end,
+      );
+      return { path, color, key: `slice-${idx}` };
+    });
+  }, [data, total, progress, centerX, centerY, outerR, innerR, colors]);
+
+  if (!data.length) return null;
+
+  return (
+    <View style={[{ width: '100%' }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        <Group>
+          {cumulativeData.map(({ path, color, key }) => (
+            <SkPath key={key} path={path} color={color} style="fill" />
+          ))}
+        </Group>
+      </Canvas>
+      {showLabels && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {(() => {
+            return data.map((item, idx) => {
+              const startAngle = data
+                .slice(0, idx)
+                .reduce(
+                  (sum, d) => sum + (d.value / total) * Math.PI * 2,
+                  -Math.PI / 2,
+                );
+              const slice = (item.value / total) * Math.PI * 2;
+              const mid = startAngle + slice / 2;
+              const r = (outerR + innerR) / 2;
+              const lx = centerX + r * Math.cos(mid);
+              const ly = centerY + r * Math.sin(mid);
+              return (
+                <SvgText
+                  key={`label-${idx}`}
+                  x={lx}
+                  y={ly}
+                  textAnchor="middle"
+                  fontSize={12}
+                  fill={theme.colors.foreground as string}
+                  fontWeight="600"
+                >
+                  {Math.round((item.value / total) * 100)}%
+                </SvgText>
+              );
+            });
+          })()}
+        </Svg>
+      )}
+      {/* Legend */}
+      <View style={{ marginTop: 10 }}>
+        {data.map((item, index) => (
+          <View
+            key={`legend-${index}`}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginBottom: 5,
+            }}
+          >
+            <View
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 6,
+                backgroundColor:
+                  item.color || (colors[index % colors.length] as string),
+                marginRight: 8,
+              }}
+            />
+            <Text
+              className="text-xs"
+              style={{ color: theme.colors.mutedForeground }}
+            >
+              {item.label}: {item.value}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/recipes/charts/apps/native/src/features/charts/components/index.ts

@@ -0,0 +1,10 @@
+export { AreaChart } from './area-chart';
+export { BarChart } from './bar-chart';
+export { CandlestickChart } from './candlestick-chart';
+export { ColumnChart } from './column-chart';
+export { DoughnutChart } from './doughnut-chart';
+export { LineChart } from './line-chart';
+export { RadarChart } from './radar-chart';
+export { RadialBarChart } from './radial-bar-chart';
+export { StackedAreaChart } from './stacked-area-chart';
+export { StackedBarChart } from './stacked-bar-chart';

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

@@ -0,0 +1,308 @@
+import {
+  Canvas,
+  Circle,
+  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, 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; // not rendered in Skia v1 (no font binding yet)
+  animated?: boolean;
+  duration?: number;
+  gradient?: boolean;
+  interactive?: boolean; // not implemented in Skia v1
+  showYLabels?: boolean; // not rendered in Skia v1
+  yLabelCount?: number;
+  yAxisWidth?: number;
+}
+
+export type ChartDataPoint = {
+  x: string | number;
+  y: number;
+  label?: string;
+};
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+const makeSmoothPath = (points: { x: number; y: number }[]) => {
+  const p = Skia.Path.Make();
+  if (!points.length) return p;
+  p.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const cpx = (prev.x + curr.x) / 2;
+    const cpy = prev.y;
+    p.quadTo(cpx, cpy, curr.x, curr.y);
+  }
+  return p;
+};
+
+const makeAreaPath = (
+  points: { x: number; y: number }[],
+  height: number,
+  padding: number,
+) => {
+  const p = makeSmoothPath(points).copy();
+  if (!points.length) return p;
+  const last = points[points.length - 1];
+  const first = points[0];
+  p.lineTo(last.x, height - padding);
+  p.lineTo(first.x, height - padding);
+  p.close();
+  return p;
+};
+
+const withAlpha = (hex: string, alpha: number) => {
+  // alpha 0..1 -> 00..FF
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  if (hex.startsWith('#') && (hex.length === 7 || hex.length === 9)) {
+    // #RRGGBB or #RRGGBBAA
+    return hex.length === 7 ? `${hex}${a}` : `${hex.slice(0, 7)}${a}`;
+  }
+  return hex; // fallback
+};
+
+const formatNumber = (num: number): string => {
+  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+  if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+  return num.toFixed(0);
+};
+
+export const LineChart = ({ data, config = {}, style }: Props) => {
+  const hasData = data.length > 0;
+  const [containerWidth, setContainerWidth] = useState(300);
+  const [progress, setProgress] = useState(1);
+  const {
+    height = 200,
+    padding = 20,
+    showGrid = true,
+    animated = true,
+    duration = 1000,
+    gradient = false,
+    showYLabels = true,
+    yLabelCount = 5,
+    yAxisWidth = 20,
+  } = 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 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 maxValue = hasData ? Math.max(...data.map((d) => d.y)) : 0;
+  const minValue = hasData ? Math.min(...data.map((d) => d.y)) : 0;
+  const valueRange = hasData ? maxValue - minValue || 1 : 1;
+
+  const leftPadding = showYLabels ? padding + yAxisWidth : padding;
+  const innerChartWidth = chartWidth - leftPadding - padding;
+  const chartHeight = height - padding * 2;
+
+  const points = useMemo(
+    () =>
+      (hasData ? data : []).map((point, index) => ({
+        x:
+          leftPadding +
+          (index / Math.max(1, data.length - 1)) * innerChartWidth,
+        y: padding + ((maxValue - point.y) / valueRange) * chartHeight,
+      })),
+    [
+      data,
+      hasData,
+      leftPadding,
+      innerChartWidth,
+      padding,
+      maxValue,
+      valueRange,
+      chartHeight,
+    ],
+  );
+
+  const path = makeSmoothPath(points);
+  const areaPath = gradient ? makeAreaPath(points, height, padding) : undefined;
+
+  // Simple horizontal grid lines
+  const yAxisLabels = useMemo(() => {
+    const labels: { value: number; y: number }[] = [];
+    const count = yLabelCount;
+    for (let i = 0; i < count; i++) {
+      const ratio = i / (count - 1);
+      const value = maxValue - ratio * valueRange;
+      const y = padding + ratio * chartHeight;
+      labels.push({ value, y });
+    }
+    return labels;
+  }, [yLabelCount, padding, chartHeight, maxValue, valueRange]);
+
+  const gridYs: number[] = useMemo(
+    () => (showGrid ? yAxisLabels.map((l) => l.y) : []),
+    [showGrid, yAxisLabels],
+  );
+
+  // Batch grid lines into a single path each to reduce draw calls
+  const gridHPath = useMemo(() => {
+    const p = Skia.Path.Make();
+    if (!showGrid) return p;
+    for (const y of gridYs) {
+      p.moveTo(leftPadding, y);
+      p.lineTo(chartWidth - padding, y);
+    }
+    return p;
+  }, [showGrid, gridYs, leftPadding, chartWidth, padding]);
+
+  const gridVPath = useMemo(() => {
+    const p = Skia.Path.Make();
+    if (!showGrid) return p;
+    for (const pt of points) {
+      p.moveTo(pt.x, padding);
+      p.lineTo(pt.x, height - padding);
+    }
+    return p;
+  }, [showGrid, points, padding, height]);
+
+  if (!hasData) return null;
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
+      <Canvas style={{ width: chartWidth, height }}>
+        {showGrid && (
+          <Group>
+            <SkPath
+              path={gridHPath}
+              color={mutedColor}
+              style="stroke"
+              strokeWidth={0.5}
+              opacity={0.3}
+            />
+            <SkPath
+              path={gridVPath}
+              color={mutedColor}
+              style="stroke"
+              strokeWidth={0.5}
+              opacity={0.2}
+            />
+          </Group>
+        )}
+
+        {gradient && areaPath && (
+          <SkPath path={areaPath} style="fill">
+            <LinearGradient
+              start={vec(0, padding)}
+              end={vec(0, height - padding)}
+              colors={[
+                withAlpha(primaryColor, 0.3),
+                withAlpha(primaryColor, 0.05),
+              ]}
+            />
+          </SkPath>
+        )}
+
+        <SkPath
+          path={path}
+          color={primaryColor}
+          style="stroke"
+          strokeWidth={2}
+          strokeJoin="round"
+          strokeCap="round"
+          start={0}
+          end={progress}
+        />
+
+        {points.map((pt, idx) => (
+          <Circle
+            key={`pt-${idx}`}
+            cx={pt.x}
+            cy={pt.y}
+            r={3}
+            color={primaryColor}
+            opacity={progress}
+          />
+        ))}
+      </Canvas>
+      {/* Labels overlays for parity with SVG */}
+      {(config.showYLabels || config.showLabels) && (
+        <Svg
+          width={chartWidth}
+          height={height}
+          style={{ position: 'absolute', left: 0, top: 0 }}
+        >
+          {config.showYLabels && (
+            <G>
+              {yAxisLabels.map((label, index) => (
+                <SvgText
+                  key={`y-label-${index}`}
+                  x={leftPadding - 10}
+                  y={label.y + 4}
+                  textAnchor="end"
+                  fontSize={10}
+                  fill={mutedColor}
+                >
+                  {formatNumber(label.value)}
+                </SvgText>
+              ))}
+            </G>
+          )}
+          {config.showLabels && (
+            <G>
+              {data.map((point, index) => (
+                <SvgText
+                  key={`x-label-${index}`}
+                  x={points[index].x}
+                  y={height - 5}
+                  textAnchor="middle"
+                  fontSize={10}
+                  fill={mutedColor}
+                >
+                  {point.label || String(point.x)}
+                </SvgText>
+              ))}
+            </G>
+          )}
+        </Svg>
+      )}
+    </View>
+  );
+};