vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,268 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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>
-  );
-};

package/2/apps/native/src/features/charts/components/stacked-bar-chart.tsx

@@ -1,325 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-// vibefast license: c1e9fcd2-muhammad
-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, {
-  G as SvgG,
-  Line as SvgLine,
-  Rect as SvgRect,
-  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 StackedBarDataPoint {
-  label: string;
-  values: number[];
-}
-
-type Props = {
-  data: StackedBarDataPoint[];
-  colors?: string[];
-  config?: ChartConfig;
-  style?: ViewStyle;
-  categories?: string[];
-  horizontal?: boolean;
-};
-
-export const StackedBarChart = ({
-  data,
-  colors = [],
-  config = {},
-  style,
-  categories = [],
-  horizontal = false,
-}: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
-  const {
-    height = 200,
-    padding = 20,
-    showLabels = true,
-    showGrid = 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.values.reduce((s, v) => s + v, 0)),
-  );
-  const seriesCount = data[0]?.values.length || 0;
-  const innerChartWidth = chartWidth - padding * 2;
-  const chartHeight = height - padding * 2;
-
-  const defaultColors = [
-    '#8884d8',
-    '#82ca9d',
-    '#ffc658',
-    '#ff7300',
-    '#00ff00',
-    '#0088fe',
-    primaryColor,
-  ];
-  const seriesColors =
-    colors.length >= seriesCount
-      ? colors
-      : [...colors, ...defaultColors].slice(0, seriesCount);
-
-  if (horizontal) {
-    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 }}>
-          {data.map((item, itemIndex) => {
-            let cumulativeWidth = 0;
-            const y =
-              padding + itemIndex * (barHeight + barSpacing) + barSpacing / 2;
-            return (
-              <Group key={`bar-${itemIndex}`}>
-                {item.values.map((value, valueIndex) => {
-                  const segmentWidth = (value / maxValue) * innerChartWidth;
-                  const w = segmentWidth * progress;
-                  const x = padding + cumulativeWidth;
-                  cumulativeWidth += segmentWidth;
-                  return (
-                    <RoundedRect
-                      key={`seg-${valueIndex}`}
-                      x={x}
-                      y={y}
-                      width={w}
-                      height={barHeight}
-                      color={seriesColors[valueIndex]}
-                      r={2}
-                    />
-                  );
-                })}
-              </Group>
-            );
-          })}
-        </Canvas>
-        {(showGrid || showLabels || categories.length > 0) && (
-          <Svg
-            width={chartWidth}
-            height={height}
-            style={{ position: 'absolute', left: 0, top: 0 }}
-          >
-            {showGrid && (
-              <SvgG>
-                {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
-                  <SvgLine
-                    key={`grid-${index}`}
-                    x1={padding + ratio * innerChartWidth}
-                    y1={padding}
-                    x2={padding + ratio * innerChartWidth}
-                    y2={height - padding}
-                    stroke={mutedColor}
-                    strokeWidth={0.5}
-                    opacity={0.3}
-                  />
-                ))}
-              </SvgG>
-            )}
-            {showLabels && (
-              <SvgG>
-                {data.map((item, itemIndex) => {
-                  const y =
-                    padding +
-                    itemIndex * (barHeight + barSpacing) +
-                    barSpacing / 2;
-                  return (
-                    <SvgText
-                      key={`lbl-${itemIndex}`}
-                      x={padding - 10}
-                      y={y + barHeight / 2 + 4}
-                      textAnchor="end"
-                      fontSize={12}
-                      fill={mutedColor}
-                    >
-                      {item.label}
-                    </SvgText>
-                  );
-                })}
-              </SvgG>
-            )}
-            {categories.length > 0 && (
-              <SvgG>
-                {categories.map((category, index) => (
-                  <React.Fragment key={`legend-${index}`}>
-                    <SvgRect
-                      x={padding + index * 80}
-                      y={height - padding + 10}
-                      width={12}
-                      height={8}
-                      fill={seriesColors[index]}
-                      rx={2}
-                    />
-                    <SvgText
-                      x={padding + index * 80 + 18}
-                      y={height - padding + 18}
-                      fontSize={12}
-                      fill={mutedColor}
-                    >
-                      {category}
-                    </SvgText>
-                  </React.Fragment>
-                ))}
-              </SvgG>
-            )}
-          </Svg>
-        )}
-      </View>
-    );
-  }
-
-  // Vertical stacked bars
-  const barWidth = (innerChartWidth / data.length) * 0.8;
-  const barSpacing = (innerChartWidth / data.length) * 0.2;
-
-  return (
-    <View style={[{ width: '100%', height }, style]} onLayout={onLayout}>
-      <Canvas style={{ width: chartWidth, height }}>
-        <Group>
-          {data.map((item, itemIndex) => {
-            const x =
-              padding + itemIndex * (barWidth + barSpacing) + barSpacing / 2;
-            let cumHeight = 0;
-            return item.values.map((value, valueIndex) => {
-              const segmentHeight = (value / maxValue) * chartHeight;
-              cumHeight += segmentHeight;
-              const baseY = height - padding - cumHeight;
-              const h = segmentHeight * progress;
-              const y = baseY + (1 - progress) * segmentHeight;
-              return (
-                <RoundedRect
-                  key={`seg-${itemIndex}-${valueIndex}`}
-                  x={x}
-                  y={y}
-                  width={barWidth}
-                  height={h}
-                  color={seriesColors[valueIndex]}
-                  r={2}
-                />
-              );
-            });
-          })}
-        </Group>
-      </Canvas>
-      {(showGrid || showLabels || categories.length > 0) && (
-        <Svg
-          width={chartWidth}
-          height={height}
-          style={{ position: 'absolute', left: 0, top: 0 }}
-        >
-          {showGrid && (
-            <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>
-          )}
-          {showLabels && (
-            <SvgG>
-              {data.map((item, itemIndex) => {
-                const x =
-                  padding +
-                  itemIndex * (barWidth + barSpacing) +
-                  barSpacing / 2;
-                return (
-                  <SvgText
-                    key={`lbl-${itemIndex}`}
-                    x={x + barWidth / 2}
-                    y={height - 5}
-                    textAnchor="middle"
-                    fontSize={12}
-                    fill={mutedColor}
-                  >
-                    {item.label}
-                  </SvgText>
-                );
-              })}
-            </SvgG>
-          )}
-          {categories.length > 0 && (
-            <SvgG>
-              {categories.map((category, index) => (
-                <React.Fragment key={`legend-${index}`}>
-                  <SvgRect
-                    x={padding + index * 80}
-                    y={height - padding + 10}
-                    width={12}
-                    height={8}
-                    fill={seriesColors[index]}
-                    rx={2}
-                  />
-                  <SvgText
-                    x={padding + index * 80 + 18}
-                    y={height - padding + 18}
-                    fontSize={12}
-                    fill={mutedColor}
-                  >
-                    {category}
-                  </SvgText>
-                </React.Fragment>
-              ))}
-            </SvgG>
-          )}
-        </Svg>
-      )}
-    </View>
-  );
-};