@bashem/rn-charts 0.0.2

package/src/skia/Progress/LinearProgress.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { View, Button, useWindowDimensions } from 'react-native';
+import {
+  Canvas,
+  LinearGradient,
+  Rect,
+  RoundedRect,
+} from '@shopify/react-native-skia';
+import type { CommonStyle } from '../common';
+
+export interface LinearProgressStyles extends CommonStyle {
+  width?: number;
+  height?: number;
+  radius?: number;
+  tintColor?: string;
+  backgroundColor?: string;
+  tintColors?: string[];
+  tineColorsPositions?: number[];
+  backgroundColors?: string[];
+  backgroundColorsPositions?: number[];
+}
+
+export interface LinearProgressProps {
+  style: LinearProgressStyles;
+  progress: number; // value between 0 and 1
+}
+
+export default function LinearProgress({
+  progress,
+  style,
+}: LinearProgressProps) {
+  const width = style.width ?? 300;
+  const height = style.height ?? 20;
+  const radius = style.radius ?? 0;
+  const tintColor = style.tintColor ?? '#4A90E2';
+
+  // Animate progress
+  useEffect(() => {
+    // runTiming(progress, 0.7, { duration: 1000 }); // progress to 70%
+  }, []);
+
+  return (
+    <View>
+      <Canvas style={{ width, height }}>
+        {/* Background bar */}
+        <RoundedRect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          r={radius}
+          color={style.backgroundColor}
+        >
+          {style.backgroundColors && (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: width, y: 0 }}
+              colors={style.backgroundColors}
+							positions={style.backgroundColorsPositions}
+            />
+          )}
+        </RoundedRect>
+        {/* Foreground progress */}
+        <RoundedRect
+          x={0}
+          y={0}
+          width={progress * width} // animate width
+          height={height}
+          r={radius}
+          color={style.tintColor}
+        >
+          {style.tintColors && (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: width, y: 0 }}
+              colors={style.tintColors}
+              positions={style.tineColorsPositions}
+            />
+          )}
+        </RoundedRect>
+      </Canvas>
+    </View>
+  );
+}

package/src/skia/Progress/SemiCircleProgress.tsx

@@ -0,0 +1,82 @@
+import { View } from 'react-native';
+import {
+  Canvas,
+  LinearGradient,
+  RoundedRect,
+} from '@shopify/react-native-skia';
+import type { CommonStyle } from '../common';
+
+export interface SemiCircleProgressStyles extends CommonStyle {
+  width?: number;
+  height?: number;
+  radius?: number;
+  tintColor?: string;
+  backgroundColor?: string;
+  tintColors?: string[];
+  tineColorsPositions?: number[];
+  backgroundColors?: string[];
+  backgroundColorsPositions?: number[];
+}
+
+export interface SemiCircleProgressProps {
+  style: SemiCircleProgressStyles;
+  progress: number;
+}
+
+export default function SemiCircleProgress({
+  progress,
+  style,
+}: SemiCircleProgressProps) {
+  const width = style.width ?? 300;
+  const height = style.height ?? 20;
+  const radius = style.radius ?? 0;
+  const tintColor = style.tintColor ?? '#4A90E2';
+
+  return (
+    <View
+      onLayout={(event) => {
+        const { width, height } = event.nativeEvent.layout;
+        console.log('Layout width, height:', width, height);
+      }}
+    >
+      <Canvas style={{ width, height }}>
+        {/* Background bar */}
+        <RoundedRect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          r={radius}
+          color={style.backgroundColor}
+        >
+          {style.backgroundColors && (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: width, y: 0 }}
+              colors={style.backgroundColors}
+							positions={style.backgroundColorsPositions}
+            />
+          )}
+        </RoundedRect>
+        {/* Foreground progress */}
+        <RoundedRect
+          x={0}
+          y={0}
+          width={progress * width} // animate width
+          height={height}
+          r={radius}
+          color={style.tintColor}
+        >
+          {style.tintColors && (
+            <LinearGradient
+              start={{ x: 0, y: 0 }}
+              end={{ x: width, y: 0 }}
+              colors={style.tintColors}
+              positions={style.tineColorsPositions}
+            />
+          )}
+        </RoundedRect>
+      </Canvas>
+    </View>
+  );
+}

package/src/skia/RadarChart/RadarChart.tsx

@@ -0,0 +1,159 @@
+import React, { cloneElement, useMemo, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {
+  Canvas,
+  Path,
+  Group,
+  Circle,
+} from '@shopify/react-native-skia';
+import { type CommonStyle } from '../common';
+import useRadarChart from './useRadarChart';
+
+export interface RadarDatum {
+  values: number[];
+  backgroundColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+export interface RadarChartStyle extends CommonStyle {
+  size?: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  centerDotRadius?: number;
+  centerDotColor?: string;
+}
+
+export interface RadarChartProps {
+  data: RadarDatum[];
+  labels?: string[];
+  levels?: number;
+  labelViews?: ReactNode[];
+  maxValue?: number;
+  minValue?: number;
+  style?: RadarChartStyle;
+}
+
+function RadarChart(props: RadarChartProps) {
+    const {
+    size,
+    cx,
+    cy,
+    gridPaths,
+    axisPaths,
+    dataPaths,
+    formattedLabels,
+    formattedLabelViews,
+    strokeWidth,
+    strokeColor,
+    centerDotRadius,
+    centerDotColor,
+  } = useRadarChart(props);
+
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          backgroundColor: props.style?.backgroundColor,
+        },
+      ]}
+    >
+      <Canvas style={{ width: size, height: size }}>
+        <Group>
+          {/* grid polygons */}
+          {gridPaths.map((gridPath, index) => (
+            <Path
+              key={index}
+              path={gridPath}
+              style="stroke"
+              strokeWidth={strokeWidth}
+              color={strokeColor}
+            />
+          ))}
+
+          {axisPaths.map((ap, index) => (
+            <Path
+              key={index}
+              path={ap}
+              style="stroke"
+              strokeWidth={strokeWidth}
+              color={strokeColor}
+            />
+          ))}
+
+          {dataPaths.map((pathDatum, index) => (
+            <Group key={index}>
+              <Path
+                path={pathDatum.path}
+                style="fill"
+                color={pathDatum.backgroundColor}
+              />
+              <Path
+                path={pathDatum.path}
+                style="stroke"
+                strokeWidth={pathDatum.strokeWidth}
+                color={pathDatum.strokeColor}
+              />
+            </Group>
+          ))}
+
+          {/* center dot */}
+          <Circle cx={cx} cy={cy} r={centerDotRadius} color={centerDotColor} />
+        </Group>
+      </Canvas>
+
+      {/* Labels overlay */}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { justifyContent: 'center', alignItems: 'center' },
+        ]}
+        pointerEvents="none"
+      >
+        {formattedLabelViews &&
+          formattedLabelViews.map((viewDataum, index) => {
+            let style: ViewStyle = {
+              position: 'absolute',
+              bottom: viewDataum.y,
+            };
+            if (viewDataum.align === 'left') style.left = viewDataum.x;
+            if (viewDataum.align === 'right') style.right = viewDataum.x;
+
+            return (
+              <View style={style} key={index}>
+                {viewDataum.view}
+              </View>
+            );
+          })}
+        {formattedLabels &&
+          formattedLabels.map((formatedlabel, index) => {
+            let style: TextStyle = {
+              position: 'absolute',
+              bottom: formatedlabel.y,
+              fontSize: 12,
+              includeFontPadding: false,
+            };
+
+            if (formatedlabel.align === 'left') style.left = formatedlabel.x;
+            if (formatedlabel.align === 'right') style.right = formatedlabel.x;
+
+            return (
+              <Text key={index} style={style}>
+                {formatedlabel.label}
+              </Text>
+            );
+          })}
+      </View>
+    </View>
+  );
+}
+
+export default RadarChart;

package/src/skia/RadarChart/useRadarChart.ts

@@ -0,0 +1,208 @@
+import { useMemo } from "react";
+import { Skia, type SkPath } from "@shopify/react-native-skia";
+import { arrayFrom } from "../../util/util";
+import { getPaddings, type CommonStyle } from "../common";
+import type { RadarChartProps } from "./RadarChart";
+
+type Point = { x: number; y: number };
+
+export interface RadarDatum {
+  values: number[];
+  backgroundColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+interface RadarChartStyle extends CommonStyle {
+  size?: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  centerDotRadius?: number;
+  centerDotColor?: string;
+}
+
+export default function useRadarChart({
+  data,
+  labels,
+  labelViews,
+  levels = 5,
+  maxValue,
+  minValue = 0,
+  style,
+}: RadarChartProps) {
+  const size = style?.size ?? 200;
+  const { paddingHorizontal, paddingVertical } = getPaddings(style);
+
+  const radius = size / 2 - Math.max(paddingHorizontal, paddingVertical) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+
+  // Compute max value
+  const safeMax = useMemo(() => {
+    if (maxValue !== undefined) return maxValue;
+    let m = minValue;
+    for (let datum of data)
+      for (let v of datum.values) m = Math.max(m, v);
+    return m;
+  }, [data, maxValue]);
+
+  // Determine number of axes
+  const angles = useMemo(() => {
+    let len = data[0]?.values.length ?? 0;
+    if (len === 0 && labels) len = labels.length;
+    if (len === 0 && labelViews) len = labelViews.length;
+    if (len === 0) return [];
+
+    return arrayFrom(len, 1).map(
+      (i) => -Math.PI / 2 + (i * 2 * Math.PI) / len
+    );
+  }, [data[0]?.values.length, labels?.length, labelViews?.length]);
+
+  const pointFor = (angle: number, r: number): Point => ({
+    x: cx + Math.cos(angle) * r,
+    y: cy + Math.sin(angle) * r,
+  });
+
+  // ------------------------------
+  // Grid paths
+  // ------------------------------
+  const gridPaths = useMemo(() => {
+    const arr: SkPath[] = [];
+    for (let lvl = 1; lvl <= levels; lvl++) {
+      const r = (radius * lvl) / levels;
+      const p = Skia.Path.Make();
+      angles.forEach((angle, i) => {
+        const pt = pointFor(angle, r);
+        if (i === 0) p.moveTo(pt.x, pt.y);
+        else p.lineTo(pt.x, pt.y);
+      });
+      p.close();
+      arr.push(p);
+    }
+    return arr;
+  }, [levels, radius, angles]);
+
+  // ------------------------------
+  // Axis paths
+  // ------------------------------
+  const axisPaths = useMemo(
+    () =>
+      angles.map((angle) => {
+        const p = Skia.Path.Make();
+        const outer = pointFor(angle, radius);
+        p.moveTo(cx, cy);
+        p.lineTo(outer.x, outer.y);
+        return p;
+      }),
+    [angles, radius]
+  );
+
+  // ------------------------------
+  // Data polygons
+  // ------------------------------
+  const dataPaths = useMemo(() => {
+    return data.map(({ values, ...rest }) => {
+      const path = Skia.Path.Make();
+      values.forEach((v, i) => {
+        const r = Math.max(0, Math.min(1, v / safeMax)) * radius;
+        const pt = pointFor(angles[i]!, r);
+        if (i === 0) path.moveTo(pt.x, pt.y);
+        else path.lineTo(pt.x, pt.y);
+      });
+      path.close();
+      return { path, ...rest };
+    });
+  }, [data, radius, safeMax, angles]);
+
+  // ------------------------------
+  // Labels
+  // ------------------------------
+  const formattedLabels = useMemo(() => {
+    if (!labels) return undefined;
+
+    const arr: {
+      x: number;
+      y: number;
+      label: string;
+      align: "left" | "center" | "right";
+    }[] = [];
+
+    const r = radius + 12;
+
+    angles.forEach((angle, i) => {
+      const p = pointFor(angle, r);
+      const deg = (angle * 180) / Math.PI;
+
+      let align: "left" | "center" | "right" = "center";
+      if (deg > -90 && deg < 90) align = "left";
+      else if (deg < -90 || deg > 90) {
+        align = "right";
+        p.x = size - p.x;
+      }
+
+      arr.push({
+        x: p.x,
+        y: size - p.y,
+        label: labels[i]!,
+        align,
+      });
+    });
+
+    return arr;
+  }, [labels, angles, radius]);
+
+  // ------------------------------
+  // Label Views
+  // ------------------------------
+  const formattedLabelViews = useMemo(() => {
+    if (!labelViews) return undefined;
+
+    const arr: {
+      x: number;
+      y: number;
+      view: React.ReactNode;
+      align: "left" | "center" | "right";
+    }[] = [];
+
+    const r = radius + 12;
+
+    angles.forEach((angle, i) => {
+      const p = pointFor(angle, r);
+      const deg = (angle * 180) / Math.PI;
+
+      let align: "left" | "center" | "right" = "center";
+      if (deg > -90 && deg < 90) align = "left";
+      else if (deg < -90 || deg > 90) {
+        align = "right";
+        p.x = size - p.x;
+      }
+
+      arr.push({
+        x: p.x,
+        y: size - p.y,
+        view: labelViews[i]!,
+        align,
+      });
+    });
+
+    return arr;
+  }, [labelViews, angles, radius]);
+
+  return {
+    size,
+    cx,
+    cy,
+    radius,
+    safeMax,
+    angles,
+    gridPaths,
+    axisPaths,
+    dataPaths,
+    formattedLabels,
+    formattedLabelViews,
+    strokeWidth: style?.strokeWidth ?? 2,
+    strokeColor: style?.strokeColor ?? "gray",
+    centerDotRadius: style?.centerDotRadius ?? 2,
+    centerDotColor: style?.centerDotColor ?? style?.strokeColor ?? "gray",
+  };
+}

package/src/skia/common.ts

@@ -0,0 +1,82 @@
+import { listFontFamilies, matchFont, Skia, TextAlign, type SkFont, type SkParagraph, type SkTextStyle } from "@shopify/react-native-skia";
+import { Platform } from "react-native";
+
+export interface CommonStyle {
+	padding?: number;
+	paddingTop?: number;
+	paddingBottom?: number;
+	paddingStart?: number;
+	paddingEnd?: number;
+	paddingLeft?: number;
+	paddingRight?: number;
+	backgroundColor?: string;
+	disableRTL?: boolean;
+	font?: SkFont;
+	fontSize?: number;
+}
+
+export function getCommonStyleFont(style?: CommonStyle) {
+	const fontSize = style?.font?.getSize() ?? style?.fontSize ?? 12;
+	const font = style?.font ?? getFont(fontSize);
+	return { font, fontSize };
+}
+
+export function getPaddings(style?: CommonStyle) {
+	const paddingTop = style?.paddingTop ?? style?.padding ?? 0;
+	const paddingBottom = style?.paddingBottom ?? style?.padding ?? 0;
+	const paddingLeft = style?.paddingLeft ?? style?.paddingStart ?? style?.padding ?? 0;
+	const paddingRight = style?.paddingRight ?? style?.paddingEnd ?? style?.padding ?? 0;
+	const paddingHorizontal = paddingLeft + paddingRight;
+	const paddingVertical = paddingTop + paddingBottom;
+
+	return {
+		paddingTop,
+		paddingBottom,
+		paddingLeft,
+		paddingRight,
+		paddingHorizontal,
+		paddingVertical
+	};
+}
+
+export function getRandomRGBColor() {
+	const r = Math.floor(Math.random() * 256);
+	const g = Math.floor(Math.random() * 256);
+	const b = Math.floor(Math.random() * 256);
+	return `rgb(${r},${g},${b})`;
+};
+
+export const systemFontFamilies = Platform.select({
+	ios: ["Helvetica", "Arial", "Courier"],
+	android: ["roboto-flex", "sans-serif", "Roboto", "serif", "monospace"],
+	default: ["sans-serif", "serif"],
+});
+
+export function getFont(size: number = 14): SkFont {
+	const fontFamily = systemFontFamilies[0];
+	// console.log("Available system font families:", listFontFamilies());
+	// console.log("Using font family:", fontFamily, systemFontFamilies);
+	const font = matchFont({
+		fontFamily,
+		fontSize: size,
+		fontStyle: "normal",
+		fontWeight: "normal",
+	});
+	return font;
+}
+
+export const font = getFont();
+
+function createParagraph(text: string): SkParagraph {
+	const paragraphStyle = {
+		textAlign: TextAlign.Center,
+	};
+
+	const fontStyle: SkTextStyle = {
+		fontFamilies: systemFontFamilies,
+		fontSize: 14,
+	};
+	const paragraph = Skia.ParagraphBuilder.Make(paragraphStyle).pushStyle(fontStyle).addText(text).pop().build();
+
+	return paragraph;
+}