kynjal-cli 2.0.6

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

@@ -0,0 +1,172 @@
+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, { G, Path, Text as SvgText } from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface ChartConfig {
+  width?: number;
+  height?: 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 PieChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+
+  const {
+    height = 200,
+    showLabels = true,
+    animated = true,
+    duration = 1000,
+  } = config;
+
+  // Use measured width or fallback to config width or default
+  const chartWidth = containerWidth || config.width || 300;
+
+  const primaryColor = useColor('primary');
+
+  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 total = data.reduce((sum, item) => sum + item.value, 0);
+  const radius = Math.min(chartWidth, height) / 2 - 20;
+  const centerX = chartWidth / 2;
+  const centerY = height / 2;
+
+  let currentAngle = -Math.PI / 2; // Start from top
+
+  const colors = [
+    primaryColor,
+    useColor('blue'),
+    useColor('green'),
+    useColor('orange'),
+    useColor('purple'),
+    useColor('pink'),
+  ];
+
+  return (
+    <View style={[{ width: '100%' }, style]} onLayout={handleLayout}>
+      <Svg width={chartWidth} height={height}>
+        {data.map((item, index) => {
+          const sliceAngle = (item.value / total) * 2 * Math.PI;
+          const startAngle = currentAngle;
+          const endAngle = currentAngle + sliceAngle;
+
+          const largeArcFlag = sliceAngle > Math.PI ? 1 : 0;
+
+          const x1 = centerX + radius * Math.cos(startAngle);
+          const y1 = centerY + radius * Math.sin(startAngle);
+          const x2 = centerX + radius * Math.cos(endAngle);
+          const y2 = centerY + radius * Math.sin(endAngle);
+
+          const pathData = [
+            `M ${centerX} ${centerY}`,
+            `L ${x1} ${y1}`,
+            `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+            'Z',
+          ].join(' ');
+
+          // Label position
+          const labelAngle = startAngle + sliceAngle / 2;
+          const labelRadius = radius * 0.7;
+          const labelX = centerX + labelRadius * Math.cos(labelAngle);
+          const labelY = centerY + labelRadius * Math.sin(labelAngle);
+
+          currentAngle = endAngle;
+
+          const sliceAnimatedProps = useAnimatedProps(() => ({
+            opacity: animationProgress.value,
+          }));
+
+          return (
+            <G key={`slice-${index}`}>
+              <AnimatedPath
+                d={pathData}
+                fill={item.color || colors[index % colors.length]}
+                animatedProps={sliceAnimatedProps}
+              />
+
+              {showLabels && (
+                <SvgText
+                  x={labelX}
+                  y={labelY}
+                  textAnchor='middle'
+                  fontSize={12}
+                  fill='#FFFFFF'
+                  fontWeight='600'
+                >
+                  {Math.round((item.value / total) * 100)}%
+                </SvgText>
+              )}
+            </G>
+          );
+        })}
+      </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],
+                marginRight: 8,
+              }}
+            />
+            <Text variant='caption'>
+              {item.label}: {item.value}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,185 @@
+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, G, Path, Text as SvgText } from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface ChartConfig {
+  width?: number;
+  height?: 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 PolarAreaChart = ({ data, config = {}, style }: Props) => {
+  const [containerWidth, setContainerWidth] = useState(300);
+
+  const {
+    height = 200,
+    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;
+
+  const centerX = chartWidth / 2;
+  const centerY = height / 2;
+  const maxRadius = Math.min(chartWidth, height) / 2 - 20;
+  const maxValue = Math.max(...data.map((d) => d.value));
+
+  const angleStep = (2 * Math.PI) / data.length;
+
+  const colors = [
+    primaryColor,
+    useColor('blue'),
+    useColor('green'),
+    useColor('orange'),
+    useColor('purple'),
+    useColor('pink'),
+  ];
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={handleLayout}>
+      <Svg width={chartWidth} height={height}>
+        {data.map((item, index) => {
+          const angle = index * angleStep - Math.PI / 2;
+          const nextAngle = (index + 1) * angleStep - Math.PI / 2;
+          const radius = (item.value / maxValue) * maxRadius;
+
+          const x1 = centerX + radius * Math.cos(angle);
+          const y1 = centerY + radius * Math.sin(angle);
+          const x2 = centerX + radius * Math.cos(nextAngle);
+          const y2 = centerY + radius * Math.sin(nextAngle);
+
+          const pathData = [
+            `M ${centerX} ${centerY}`,
+            `L ${x1} ${y1}`,
+            `A ${radius} ${radius} 0 0 1 ${x2} ${y2}`,
+            'Z',
+          ].join(' ');
+
+          // Label position
+          const labelAngle = angle + angleStep / 2;
+          const labelRadius = radius * 0.7;
+          const labelX = centerX + labelRadius * Math.cos(labelAngle);
+          const labelY = centerY + labelRadius * Math.sin(labelAngle);
+
+          const sliceAnimatedProps = useAnimatedProps(() => ({
+            opacity: animationProgress.value * 0.8,
+          }));
+
+          return (
+            <G key={`slice-${index}`}>
+              <AnimatedPath
+                d={pathData}
+                fill={item.color || colors[index % colors.length]}
+                stroke='white'
+                strokeWidth={1}
+                animatedProps={sliceAnimatedProps}
+              />
+
+              {showLabels && (
+                <SvgText
+                  x={labelX}
+                  y={labelY}
+                  textAnchor='middle'
+                  fontSize={10}
+                  fill='#FFFFFF'
+                  fontWeight='600'
+                  alignmentBaseline='middle'
+                >
+                  {item.value}
+                </SvgText>
+              )}
+            </G>
+          );
+        })}
+
+        {/* Grid circles for reference */}
+        {[0.25, 0.5, 0.75, 1].map((ratio, index) => (
+          <Circle
+            key={`grid-${index}`}
+            cx={centerX}
+            cy={centerY}
+            r={maxRadius * ratio}
+            stroke={mutedColor}
+            strokeWidth={0.5}
+            fill='none'
+            opacity={0.2}
+          />
+        ))}
+      </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],
+                marginRight: 8,
+              }}
+            />
+            <Text variant='caption'>
+              {item.label}: {item.value}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/dist/templates/components/charts/progress-ring-chart.tsx

@@ -0,0 +1,161 @@
+import { useColor } from '@/hooks/useColor';
+import { useEffect } from 'react';
+import { 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 {
+  animated?: boolean;
+  duration?: number;
+  gradient?: boolean;
+}
+
+type Props = {
+  progress: number; // 0-100
+  size?: number;
+  strokeWidth?: number;
+  config?: ChartConfig;
+  style?: ViewStyle;
+  showLabel?: boolean;
+  label?: string;
+  centerText?: string;
+};
+
+export const ProgressRingChart = ({
+  progress,
+  size = 120,
+  strokeWidth = 8,
+  config = {},
+  style,
+  showLabel = true,
+  label,
+  centerText,
+}: Props) => {
+  const { animated = true, duration = 1000, gradient = false } = config;
+
+  const primaryColor = useColor('primary');
+  const mutedColor = useColor('mutedForeground');
+
+  const animationProgress = useSharedValue(0);
+
+  useEffect(() => {
+    if (animated) {
+      animationProgress.value = withTiming(1, { duration });
+    } else {
+      animationProgress.value = 1;
+    }
+  }, [progress, animated, duration]);
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+
+  const progressAnimatedProps = useAnimatedProps(() => {
+    const animatedProgress = animationProgress.value * (progress / 100);
+    const strokeDashoffset = circumference - animatedProgress * circumference;
+
+    return {
+      strokeDashoffset,
+    };
+  });
+
+  return (
+    <View style={[{ alignItems: 'center' }, style]}>
+      {showLabel && label && (
+        <SvgText
+          x={center}
+          y={20}
+          textAnchor='middle'
+          fontSize={14}
+          fill={mutedColor}
+          fontWeight='600'
+        >
+          {label}
+        </SvgText>
+      )}
+
+      <Svg width={size} height={size}>
+        <Defs>
+          {gradient && (
+            <LinearGradient
+              id='progressGradient'
+              x1='0%'
+              y1='0%'
+              x2='100%'
+              y2='0%'
+            >
+              <Stop offset='0%' stopColor={primaryColor} stopOpacity='0.3' />
+              <Stop offset='100%' stopColor={primaryColor} stopOpacity='1' />
+            </LinearGradient>
+          )}
+        </Defs>
+
+        {/* Background circle */}
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={mutedColor}
+          strokeWidth={strokeWidth}
+          fill='none'
+          opacity={0.2}
+        />
+
+        {/* Progress circle */}
+        <AnimatedCircle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={gradient ? 'url(#progressGradient)' : primaryColor}
+          strokeWidth={strokeWidth}
+          fill='none'
+          strokeLinecap='round'
+          strokeDasharray={circumference}
+          transform={`rotate(-90 ${center} ${center})`}
+          animatedProps={progressAnimatedProps}
+        />
+
+        {/* Center text */}
+        {centerText && (
+          <SvgText
+            x={center}
+            y={center + 6}
+            textAnchor='middle'
+            fontSize={18}
+            fill={primaryColor}
+            fontWeight='bold'
+          >
+            {centerText}
+          </SvgText>
+        )}
+
+        {/* Progress percentage */}
+        {!centerText && (
+          <SvgText
+            x={center}
+            y={center + 6}
+            textAnchor='middle'
+            fontSize={16}
+            fill={primaryColor}
+            fontWeight='600'
+          >
+            {Math.round(progress)}%
+          </SvgText>
+        )}
+      </Svg>
+    </View>
+  );
+};

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

@@ -0,0 +1,188 @@
+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, Line, Path, Text as SvgText } from 'react-native-svg';
+
+// Animated SVG Components
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+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 [containerWidth, setContainerWidth] = useState(300);
+
+  const {
+    height = 200,
+    showLabels = true,
+    animated = true,
+    duration = 1000,
+    maxValue,
+  } = 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 centerX = chartWidth / 2;
+  const centerY = height / 2;
+  const radius = Math.min(chartWidth, height) / 2 - 40;
+  const maxVal = maxValue || Math.max(...data.map((d) => d.value));
+
+  // Calculate points for each data point
+  const angleStep = (2 * Math.PI) / data.length;
+  const points = data.map((item, index) => {
+    const angle = index * angleStep - Math.PI / 2; // Start from top
+    const distance = (item.value / maxVal) * radius;
+    return {
+      x: centerX + distance * Math.cos(angle),
+      y: centerY + distance * Math.sin(angle),
+      labelX: centerX + (radius + 20) * Math.cos(angle),
+      labelY: centerY + (radius + 20) * Math.sin(angle),
+      label: item.label,
+    };
+  });
+
+  // Create path for the radar area
+  const radarPath =
+    points.length > 0
+      ? `M${points[0].x},${points[0].y} ` +
+        points
+          .slice(1)
+          .map((p) => `L${p.x},${p.y}`)
+          .join(' ') +
+        ' Z'
+      : '';
+
+  const radarAnimatedProps = useAnimatedProps(() => ({
+    opacity: animationProgress.value * 0.3,
+  }));
+
+  return (
+    <View style={[{ width: '100%', height }, style]} onLayout={handleLayout}>
+      <Svg width={chartWidth} height={height}>
+        {/* Grid circles */}
+        {[0.2, 0.4, 0.6, 0.8, 1].map((ratio, index) => (
+          <Circle
+            key={`grid-circle-${index}`}
+            cx={centerX}
+            cy={centerY}
+            r={radius * ratio}
+            stroke={mutedColor}
+            strokeWidth={0.5}
+            fill='none'
+            opacity={0.3}
+          />
+        ))}
+
+        {/* Grid lines */}
+        {data.map((_, index) => {
+          const angle = index * angleStep - Math.PI / 2;
+          const endX = centerX + radius * Math.cos(angle);
+          const endY = centerY + radius * Math.sin(angle);
+
+          return (
+            <Line
+              key={`grid-line-${index}`}
+              x1={centerX}
+              y1={centerY}
+              x2={endX}
+              y2={endY}
+              stroke={mutedColor}
+              strokeWidth={0.5}
+              opacity={0.3}
+            />
+          );
+        })}
+
+        {/* Radar area */}
+        <AnimatedPath
+          d={radarPath}
+          fill={primaryColor}
+          stroke={primaryColor}
+          strokeWidth={2}
+          animatedProps={radarAnimatedProps}
+        />
+
+        {/* Data points */}
+        {points.map((point, index) => {
+          const pointAnimatedProps = useAnimatedProps(() => ({
+            opacity: animationProgress.value,
+            r: withDelay(index * 100, withSpring(animationProgress.value * 4)),
+          }));
+
+          return (
+            <AnimatedCircle
+              key={`point-${index}`}
+              cx={point.x}
+              cy={point.y}
+              fill={primaryColor}
+              animatedProps={pointAnimatedProps}
+            />
+          );
+        })}
+
+        {/* Labels */}
+        {showLabels &&
+          points.map((point, index) => (
+            <SvgText
+              key={`label-${index}`}
+              x={point.labelX}
+              y={point.labelY}
+              textAnchor='middle'
+              fontSize={12}
+              fill={mutedColor}
+              alignmentBaseline='middle'
+            >
+              {point.label}
+            </SvgText>
+          ))}
+      </Svg>
+    </View>
+  );
+};