kynjal-cli 2.0.6

package/dist/templates/components/charts/radial-bar-chart.tsx

@@ -0,0 +1,216 @@
+import { Text } from '@/components/ui/text';
+import { useColor } from '@/hooks/useColor';
+import { useEffect, useState } from 'react';
+import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, {
+  Circle,
+  Defs,
+  LinearGradient,
+  Stop,
+  Text as SvgText,
+} from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface ChartConfig {
+  padding?: number;
+  animated?: boolean;
+  duration?: number;
+  gradient?: boolean;
+}
+
+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,
+    gradient = false,
+  } = config;
+
+  const primaryColor = useColor('primary');
+  const mutedColor = useColor('mutedForeground');
+
+  const animationProgress = useSharedValue(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    const size = Math.min(width, height);
+    if (size > 0) {
+      setContainerSize(size);
+    }
+  };
+
+  useEffect(() => {
+    if (animated) {
+      animationProgress.value = withTiming(1, { duration });
+    } else {
+      animationProgress.value = 1;
+    }
+  }, [data, animated, duration]);
+
+  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,
+    useColor('blue'),
+    useColor('green'),
+    useColor('orange'),
+    useColor('purple'),
+    useColor('pink'),
+  ];
+
+  return (
+    <View style={[{ width: '100%' }, style]}>
+      <View
+        style={{
+          width: '100%',
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        onLayout={handleLayout}
+      >
+        <Svg width={size} height={size}>
+          <Defs>
+            {gradient &&
+              data.map((item, index) => (
+                <LinearGradient
+                  key={`gradient-${index}`}
+                  id={`radialGradient-${index}`}
+                  x1='0%'
+                  y1='0%'
+                  x2='100%'
+                  y2='0%'
+                >
+                  <Stop
+                    offset='0%'
+                    stopColor={item.color || colors[index % colors.length]}
+                    stopOpacity='0.3'
+                  />
+                  <Stop
+                    offset='100%'
+                    stopColor={item.color || colors[index % colors.length]}
+                    stopOpacity='1'
+                  />
+                </LinearGradient>
+              ))}
+          </Defs>
+
+          {data.map((item, index) => {
+            const radius = maxRadius - index * strokeWidth - strokeWidth / 2;
+            const circumference = 2 * Math.PI * radius;
+            const progressRatio = item.value / maxValue;
+
+            const circleAnimatedProps = useAnimatedProps(() => {
+              const animatedProgress = animationProgress.value * progressRatio;
+              const strokeDashoffset =
+                circumference - animatedProgress * circumference;
+
+              return {
+                strokeDashoffset,
+              };
+            });
+
+            return (
+              <AnimatedCircle
+                key={`radial-${index}`}
+                cx={center}
+                cy={center}
+                r={radius}
+                stroke={
+                  gradient
+                    ? `url(#radialGradient-${index})`
+                    : item.color || colors[index % colors.length]
+                }
+                strokeWidth={strokeWidth * 0.8}
+                fill='none'
+                strokeLinecap='round'
+                strokeDasharray={circumference}
+                transform={`rotate(-90 ${center} ${center})`}
+                animatedProps={circleAnimatedProps}
+              />
+            );
+          })}
+
+          {/* Center values */}
+          {data.length > 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 variant='caption'>
+              {item.label}: {item.value}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/dist/templates/components/charts/scatter-chart.tsx

@@ -0,0 +1,176 @@
+import { useColor } from '@/hooks/useColor';
+import { useEffect, useState } from 'react';
+import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle, G, Line, Text as SvgText } from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface ChartConfig {
+  width?: number;
+  height?: number;
+  padding?: number;
+  showGrid?: boolean;
+  showLabels?: boolean;
+  animated?: boolean;
+  duration?: number;
+}
+
+export type ChartDataPoint = {
+  x: number;
+  y: number;
+  label?: string;
+};
+
+type Props = {
+  data: ChartDataPoint[];
+  config?: ChartConfig;
+  style?: ViewStyle;
+};
+
+// Scatter Plot Component
+export const ScatterPlot = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+
+  const {
+    height = 200,
+    padding = 20,
+    showGrid = true,
+    showLabels = true,
+    animated = true,
+    duration = 800,
+  } = config;
+
+  const chartWidth = containerWidth || config.width || 300;
+
+  const primaryColor = useColor('primary');
+  const mutedColor = useColor('mutedForeground');
+
+  const animationProgress = useSharedValue(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width: measuredWidth } = event.nativeEvent.layout;
+    if (measuredWidth > 0) {
+      setContainerWidth(measuredWidth);
+    }
+  };
+
+  useEffect(() => {
+    if (animated) {
+      animationProgress.value = withTiming(1, { duration });
+    } else {
+      animationProgress.value = 1;
+    }
+  }, [data, animated, duration]);
+
+  if (!data.length) return null;
+
+  const maxX = Math.max(...data.map((d) => d.x));
+  const minX = Math.min(...data.map((d) => d.x));
+  const maxY = Math.max(...data.map((d) => d.y));
+  const minY = Math.min(...data.map((d) => d.y));
+
+  const xRange = maxX - minX || 1;
+  const yRange = maxY - minY || 1;
+
+  const innerChartWidth = chartWidth - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  // Convert data to screen coordinates
+  const points = data.map((point) => ({
+    x: padding + ((point.x - minX) / xRange) * innerChartWidth,
+    y: padding + ((maxY - point.y) / yRange) * chartHeight,
+  }));
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={handleLayout}>
+      <Svg width={chartWidth} height={height}>
+        {/* Grid lines */}
+        {showGrid && (
+          <G>
+            {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+              <G key={`grid-${index}`}>
+                <Line
+                  x1={padding}
+                  y1={padding + ratio * chartHeight}
+                  x2={chartWidth - padding}
+                  y2={padding + ratio * chartHeight}
+                  stroke={mutedColor}
+                  strokeWidth={0.5}
+                  opacity={0.3}
+                />
+                <Line
+                  x1={padding + ratio * innerChartWidth}
+                  y1={padding}
+                  x2={padding + ratio * innerChartWidth}
+                  y2={height - padding}
+                  stroke={mutedColor}
+                  strokeWidth={0.5}
+                  opacity={0.3}
+                />
+              </G>
+            ))}
+          </G>
+        )}
+
+        {/* Scatter points */}
+        {points.map((point, index) => {
+          const pointAnimatedProps = useAnimatedProps(() => ({
+            opacity: animationProgress.value,
+            r: withDelay(index * 50, withSpring(animationProgress.value * 5)),
+          }));
+
+          return (
+            <AnimatedCircle
+              key={`point-${index}`}
+              cx={point.x}
+              cy={point.y}
+              fill={primaryColor}
+              animatedProps={pointAnimatedProps}
+            />
+          );
+        })}
+
+        {/* Axis labels */}
+        {showLabels && (
+          <G>
+            {/* X-axis labels */}
+            {[minX, (minX + maxX) / 2, maxX].map((value, index) => (
+              <SvgText
+                key={`x-label-${index}`}
+                x={padding + (index * innerChartWidth) / 2}
+                y={height - 5}
+                textAnchor='middle'
+                fontSize={12}
+                fill={mutedColor}
+              >
+                {Math.round(value)}
+              </SvgText>
+            ))}
+            {/* Y-axis labels */}
+            {[maxY, (minY + maxY) / 2, minY].map((value, index) => (
+              <SvgText
+                key={`y-label-${index}`}
+                x={15}
+                y={padding + (index * chartHeight) / 2}
+                textAnchor='middle'
+                fontSize={12}
+                fill={mutedColor}
+                alignmentBaseline='middle'
+              >
+                {Math.round(value)}
+              </SvgText>
+            ))}
+          </G>
+        )}
+      </Svg>
+    </View>
+  );
+};

package/dist/templates/components/charts/stacked-area-chart.tsx

@@ -0,0 +1,289 @@
+import { useColor } from '@/hooks/useColor';
+import { useEffect, useState } from 'react';
+import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, {
+  Defs,
+  G,
+  Line,
+  LinearGradient,
+  Path,
+  Stop,
+  Text as SvgText,
+} from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+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[];
+};
+
+// Utility function to create smooth path
+const createSmoothPath = (points: { x: number; y: number }[]): string => {
+  if (points.length === 0) return '';
+
+  let path = `M${points[0].x},${points[0].y}`;
+
+  for (let i = 1; i < points.length; i++) {
+    const prevPoint = points[i - 1];
+    const currentPoint = points[i];
+    const cpx = (prevPoint.x + currentPoint.x) / 2;
+    const cpy = prevPoint.y;
+    path += ` Q${cpx},${cpy} ${currentPoint.x},${currentPoint.y}`;
+  }
+
+  return path;
+};
+
+const createAreaPath = (
+  topPoints: { x: number; y: number }[],
+  bottomPoints: { x: number; y: number }[]
+): string => {
+  if (topPoints.length === 0 || bottomPoints.length === 0) return '';
+
+  // Create the top curve
+  const topPath = createSmoothPath(topPoints);
+
+  // Create the bottom curve (reversed order for proper path closure)
+  const reversedBottomPoints = [...bottomPoints].reverse();
+
+  // Start the area path with the top curve
+  let areaPath = topPath;
+
+  // Add line to the last bottom point
+  areaPath += ` L${reversedBottomPoints[0].x},${reversedBottomPoints[0].y}`;
+
+  // Add the bottom curve
+  if (reversedBottomPoints.length > 1) {
+    for (let i = 1; i < reversedBottomPoints.length; i++) {
+      const prevPoint = reversedBottomPoints[i - 1];
+      const currentPoint = reversedBottomPoints[i];
+      const cpx = (prevPoint.x + currentPoint.x) / 2;
+      const cpy = prevPoint.y;
+      areaPath += ` Q${cpx},${cpy} ${currentPoint.x},${currentPoint.y}`;
+    }
+  }
+
+  // Close the path
+  areaPath += ' Z';
+
+  return areaPath;
+};
+
+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 primaryColor = useColor('primary');
+  const mutedColor = useColor('mutedForeground');
+
+  const animationProgress = useSharedValue(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width: measuredWidth } = event.nativeEvent.layout;
+    if (measuredWidth > 0) {
+      setContainerWidth(measuredWidth);
+    }
+  };
+
+  useEffect(() => {
+    if (animated) {
+      animationProgress.value = withTiming(1, { duration });
+    } else {
+      animationProgress.value = 1;
+    }
+  }, [data, animated, duration]);
+
+  if (!data.length) return null;
+
+  // Calculate stacked totals and max value
+  const stackedData = data.map((point) => {
+    const cumulative = point.y.reduce((acc, val, idx) => {
+      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;
+
+  // Default colors if not provided
+  const defaultColors = [
+    primaryColor,
+    '#8884d8',
+    '#82ca9d',
+    '#ffc658',
+    '#ff7300',
+    '#00ff00',
+    '#0088fe',
+  ];
+
+  const seriesColors =
+    colors.length >= seriesCount
+      ? colors
+      : [...colors, ...defaultColors].slice(0, seriesCount);
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={handleLayout}>
+      <Svg width={chartWidth} height={height}>
+        <Defs>
+          {seriesColors.map((color, index) => (
+            <LinearGradient
+              key={`gradient-${index}`}
+              id={`areaGradient-${index}`}
+              x1='0%'
+              y1='0%'
+              x2='0%'
+              y2='100%'
+            >
+              <Stop offset='0%' stopColor={color} stopOpacity='0.8' />
+              <Stop offset='100%' stopColor={color} stopOpacity='0.3' />
+            </LinearGradient>
+          ))}
+        </Defs>
+
+        {/* Grid lines */}
+        {showGrid && (
+          <G>
+            {[0, 0.25, 0.5, 0.75, 1].map((ratio, index) => (
+              <Line
+                key={`grid-${index}`}
+                x1={padding}
+                y1={padding + ratio * chartHeight}
+                x2={chartWidth - padding}
+                y2={padding + ratio * chartHeight}
+                stroke={mutedColor}
+                strokeWidth={0.5}
+                opacity={0.3}
+              />
+            ))}
+          </G>
+        )}
+
+        {/* Stacked areas */}
+        {Array.from({ length: seriesCount }, (_, seriesIndex) => {
+          const topPoints = stackedData.map((point, pointIndex) => ({
+            x: padding + (pointIndex / (data.length - 1)) * innerChartWidth,
+            y:
+              padding +
+              ((maxValue - point.cumulative[seriesIndex]) / maxValue) *
+                chartHeight,
+          }));
+
+          // All areas extend from x-axis (y=0) to their cumulative value
+          const bottomPoints = stackedData.map((point, pointIndex) => ({
+            x: padding + (pointIndex / (data.length - 1)) * innerChartWidth,
+            y: height - padding, // Always extend to x-axis (y=0 in data terms)
+          }));
+
+          const areaPath = createAreaPath(topPoints, bottomPoints);
+
+          const areaAnimatedProps = useAnimatedProps(() => ({
+            opacity: animationProgress.value * (seriesIndex === 0 ? 1 : 0.7), // Make upper areas slightly transparent
+          }));
+
+          return (
+            <AnimatedPath
+              key={`area-${seriesIndex}`}
+              d={areaPath}
+              fill={`url(#areaGradient-${seriesIndex})`}
+              stroke={seriesColors[seriesIndex]}
+              strokeWidth={1}
+              animatedProps={areaAnimatedProps}
+            />
+          );
+        })}
+
+        {/* Labels */}
+        {showLabels && (
+          <G>
+            {data.map((point, index) => (
+              <SvgText
+                key={`label-${index}`}
+                x={padding + (index / (data.length - 1)) * innerChartWidth}
+                y={height - 5}
+                textAnchor='middle'
+                fontSize={12}
+                fill={mutedColor}
+              >
+                {point.label || point.x.toString()}
+              </SvgText>
+            ))}
+          </G>
+        )}
+
+        {/* Legend */}
+        {categories.length > 0 && (
+          <G>
+            {categories.map((category, index) => (
+              <G key={`legend-${index}`}>
+                <Path
+                  d={`M${padding + index * 80},${padding - 15} L${
+                    padding + index * 80 + 15
+                  },${padding - 15}`}
+                  stroke={seriesColors[index]}
+                  strokeWidth={3}
+                />
+                <SvgText
+                  x={padding + index * 80 + 20}
+                  y={padding - 10}
+                  fontSize={11}
+                  fill={mutedColor}
+                >
+                  {category}
+                </SvgText>
+              </G>
+            ))}
+          </G>
+        )}
+      </Svg>
+    </View>
+  );
+};