@bashem/rn-charts 0.0.2

package/lib/typescript/src/skia/Progress/LinearProgress.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+export default function LinearProgress({ progress, style, }: LinearProgressProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinearProgress.d.ts.map

package/lib/typescript/src/skia/Progress/LinearProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgress.d.ts","sourceRoot":"","sources":["../../../../../src/skia/Progress/LinearProgress.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,yBAAyB,CAAC,EAAE,MAAM,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,KAAK,GACN,EAAE,mBAAmB,2CAqDrB"}

package/lib/typescript/src/skia/Progress/SemiCircleProgress.d.ts

@@ -0,0 +1,18 @@
+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): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SemiCircleProgress.d.ts.map

package/lib/typescript/src/skia/Progress/SemiCircleProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SemiCircleProgress.d.ts","sourceRoot":"","sources":["../../../../../src/skia/Progress/SemiCircleProgress.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,yBAAyB,CAAC,EAAE,MAAM,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,KAAK,GACN,EAAE,uBAAuB,2CAqDzB"}

package/lib/typescript/src/skia/RadarChart/RadarChart.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+import { type CommonStyle } from '../common';
+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;
+}
+declare function RadarChart(props: RadarChartProps): import("react/jsx-runtime").JSX.Element;
+export default RadarChart;
+//# sourceMappingURL=RadarChart.d.ts.map

package/lib/typescript/src/skia/RadarChart/RadarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadarChart.d.ts","sourceRoot":"","sources":["../../../../../src/skia/RadarChart/RadarChart.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcrE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkHzC;AAED,eAAe,UAAU,CAAC"}

package/lib/typescript/src/skia/RadarChart/useRadarChart.d.ts

@@ -0,0 +1,41 @@
+import { type SkPath } from "@shopify/react-native-skia";
+import type { RadarChartProps } from "./RadarChart";
+export interface RadarDatum {
+    values: number[];
+    backgroundColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+export default function useRadarChart({ data, labels, labelViews, levels, maxValue, minValue, style, }: RadarChartProps): {
+    size: number;
+    cx: number;
+    cy: number;
+    radius: number;
+    safeMax: number;
+    angles: number[];
+    gridPaths: SkPath[];
+    axisPaths: SkPath[];
+    dataPaths: {
+        backgroundColor?: string;
+        strokeColor?: string;
+        strokeWidth?: number;
+        path: SkPath;
+    }[];
+    formattedLabels: {
+        x: number;
+        y: number;
+        label: string;
+        align: "left" | "center" | "right";
+    }[] | undefined;
+    formattedLabelViews: {
+        x: number;
+        y: number;
+        view: React.ReactNode;
+        align: "left" | "center" | "right";
+    }[] | undefined;
+    strokeWidth: number;
+    strokeColor: string;
+    centerDotRadius: number;
+    centerDotColor: string;
+};
+//# sourceMappingURL=useRadarChart.d.ts.map

package/lib/typescript/src/skia/RadarChart/useRadarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadarChart.d.ts","sourceRoot":"","sources":["../../../../../src/skia/RadarChart/useRadarChart.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,MAAM,EACN,UAAU,EACV,MAAU,EACV,QAAQ,EACR,QAAY,EACZ,KAAK,GACN,EAAE,eAAe;;;;;;;;;;;;;;;;WA4FT,MAAM;WACN,MAAM;eACF,MAAM;eACN,MAAM,GAAG,QAAQ,GAAG,OAAO;;;WAkC/B,MAAM;WACN,MAAM;cACH,KAAK,CAAC,SAAS;eACd,MAAM,GAAG,QAAQ,GAAG,OAAO;;;;;;EA4CvC"}

package/lib/typescript/src/skia/common.d.ts

@@ -0,0 +1,31 @@
+import { type SkFont } from "@shopify/react-native-skia";
+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 declare function getCommonStyleFont(style?: CommonStyle): {
+    font: SkFont;
+    fontSize: number;
+};
+export declare function getPaddings(style?: CommonStyle): {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+};
+export declare function getRandomRGBColor(): string;
+export declare const systemFontFamilies: string[];
+export declare function getFont(size?: number): SkFont;
+export declare const font: SkFont;
+//# sourceMappingURL=common.d.ts.map

package/lib/typescript/src/skia/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/skia/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,MAAM,EAAsC,MAAM,4BAA4B,CAAC;AAG3I,MAAM,WAAW,WAAW;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW;;;EAIrD;AAED,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW;;;;;;;EAgB9C;AAED,wBAAgB,iBAAiB,WAKhC;AAED,eAAO,MAAM,kBAAkB,UAI7B,CAAC;AAEH,wBAAgB,OAAO,CAAC,IAAI,GAAE,MAAW,GAAG,MAAM,CAWjD;AAED,eAAO,MAAM,IAAI,QAAY,CAAC"}

package/lib/typescript/src/util/colors.d.ts

@@ -0,0 +1,4 @@
+export declare const colorNameToRBG: Record<string, [number, number, number]>;
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare function lighten(color: string, amount: number): string;
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/src/util/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/util/colors.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAqJnE,CAAC;AAEF,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAmB9D;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAY7D"}

package/lib/typescript/src/util/util.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+export declare function arrayFrom(maxValue: number, interval: number): number[];
+export declare const stringToArray: (s: string, separator: string) => string[];
+export declare const increment: (char: string, by: number) => string;
+export declare const getRandomInteger: (min: number, max: number) => number;
+export declare const parseQuery: (queryString: string) => Record<string, string>;
+export declare const processNumber: (num: number, min: number, max: number) => number;
+/**
+ *
+ * @param {number} value - The number.
+ * @param {Intl.NumberFormatOptions} options - The options.
+ *  Default Value: { maximumFractionDigits: 2, minimumFractionDigits: 0 }
+ * @returns {string} Returns the number in as formatted string.
+ *
+ * @example
+ * const result = getFormattedString(3.012)
+ * console.log(result); // 3.01
+ */
+export declare function getFormattedString(value: number, options?: Intl.NumberFormatOptions): string;
+export declare function isNumber<T>(value: T | number): value is number;
+export declare function isNonNANNumber<T>(value: T | number): value is number;
+export declare function isStringNumber(value: string): boolean;
+export declare function isDefined<T>(value: T | undefined | null): value is T;
+export declare function isFunction(value: any): value is Function;
+export declare function isString(node: ReactNode): node is string;
+type ArrayLengthMutationKeys = 'splice' | 'push' | 'pop' | 'shift' | 'unshift';
+export type FixedLengthArray<T, L extends number, TObj = [T, ...Array<T>]> = Pick<TObj, Exclude<keyof TObj, ArrayLengthMutationKeys>> & {
+    readonly length: L;
+    [I: number]: T;
+    [Symbol.iterator]: () => IterableIterator<T>;
+};
+export {};
+//# sourceMappingURL=util.d.ts.map

package/lib/typescript/src/util/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/util/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAEtE;AAED,eAAO,MAAM,aAAa,GAAI,GAAG,MAAM,EAAE,WAAW,MAAM,KAAG,MAAM,EAElE,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,EAAE,IAAI,MAAM,WAEjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,WAExD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,aAAa,MAAM,2BAW7C,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,MAAM,KACV,MAKF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,mBAA4E,UAE3I;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,KAAK,IAAI,MAAM,CAE9D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,MAAM,GAAG,KAAK,IAAI,MAAM,CAEpE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,IAAI,CAAC,CAEpE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,QAAQ,CAExD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,IAAI,MAAM,CAExD;AAED,KAAK,uBAAuB,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAI,SAAS,CAAA;AAC/E,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EAAE,IAAI,GAAG,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IACvE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,uBAAuB,CAAC,CAAC,GACtD;IACA,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;IAClB,CAAE,CAAC,EAAG,MAAM,GAAK,CAAC,CAAA;IAClB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAA;CAC7C,CAAA"}

package/package.json

@@ -0,0 +1,172 @@
+{
+  "name": "@bashem/rn-charts",
+  "version": "0.0.2",
+  "description": "Experimental Charts Library",
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "homepage": "https://github.com/mbashem/rn-charts#readme",
+  "bugs": {
+    "url": "https://github.com/mbashem/rn-charts/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbashem/rn-charts.git"
+  },
+  "license": "MIT",
+  "author": "Bashem <example@github.com> (https://github.com/mbashem)",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "directories": {
+    "example": "example",
+    "lib": "lib"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "workspaces": [
+    "example"
+  ],
+  "scripts": {
+    "example": "yarn workspace rn-charts-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
+  },
+  "dependencies": {
+    "@shopify/react-native-skia": "v2.0.0-next.4",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^3.19.5",
+    "react-native-worklets": "^0.4.2",
+    "react": "19.0.0",
+    "react-native": "0.79.6"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^10.0.4",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.2.2",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-native": "^0.79.5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "requireCleanWorkingDir": false,
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.52.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}
+
+export { default as BarChart } from './skia/BarChart/BarChart';
+export * from './skia/BarChart/BarChart';
+export * from './skia/PieChart/PieChart';
+export * from './skia/AreaChart/AreaChart';
+export * from './skia/Progress/LinearProgress';
+export * from './skia/RadarChart/RadarChart';
+export { default as PieChart } from './skia/PieChart/PieChart';
+export { default as AreaChart } from './skia/AreaChart/AreaChart';

package/src/skia/AreaChart/AreaChart.tsx

@@ -0,0 +1,140 @@
+// AreaChart.tsx
+import { Canvas, Circle, Group, Path, Text } from '@shopify/react-native-skia';
+import { type CommonStyle } from '../common';
+import VerticalLabel from '../Common/VerticalLabel';
+import { View } from 'react-native';
+import useAreaChart, { type AreaData } from './useAreaChart';
+import { useState } from 'react';
+import { lighten } from '../../util/colors';
+import Popup, { type PopupStyle } from '../Popup';
+
+export interface AreaChartStyle extends CommonStyle {
+  width: number;
+  height: number;
+  showPoints?: boolean;
+  pointRadius?: number;
+  lightenPointsBy?: number;
+}
+
+export interface AreaChartProps {
+  data: AreaData[];
+  minValue?: number;
+  maxValue?: number;
+  xLabels?: string[];
+  style?: AreaChartStyle;
+  popupStyle: PopupStyle<{ rowIndex: number; colIndex: number; value: number }>;
+}
+
+function AreaChart(props: AreaChartProps) {
+  const {
+    minValue,
+    maxValue,
+    canvasHeight,
+    areaCanvasHeight,
+    labelWidth,
+    chartWidth,
+    paths,
+    xLabelsData,
+    paddingLeft,
+    paddingTop,
+    paddingHorizontal,
+    font,
+    touchLine,
+    touchHandler,
+  } = useAreaChart(props);
+  const { style, popupStyle } = props;
+
+  const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
+  console.log('AreaChart render', { touchLine });
+
+  return (
+    <View
+      style={[style, { flexDirection: 'row' }]}
+      ref={(view) => {
+        view?.measureInWindow((fx, fy) => {
+          setViewOffset((prev) => {
+            if (prev.x === fx && prev.y === fy) {
+              return prev;
+            }
+            return { x: fx, y: fy };
+          });
+        });
+      }}
+    >
+      <VerticalLabel
+        minValue={minValue}
+        maxValue={maxValue}
+        styles={{
+          height: areaCanvasHeight,
+          width: labelWidth,
+          fontSize: style?.fontSize,
+        }}
+        labelCount={5}
+      />
+
+      <Canvas
+        style={{
+          width: chartWidth,
+          height: canvasHeight,
+        }}
+        onTouchStart={(event) =>
+          touchHandler(event.nativeEvent.locationX, event.nativeEvent.locationY)
+        }
+      >
+        {paths.map(({ path, points, color }, index) => {
+          return (
+            <Group key={index}>
+              <Path path={path} color={color} />
+              {style?.showPoints &&
+                color &&
+                points.map((points) => (
+                  <Circle
+                    key={`${points.x}-${points.y}`}
+                    cx={points.x}
+                    cy={points.y}
+                    r={style?.pointRadius ?? 3}
+                    color={lighten(color, style?.lightenPointsBy ?? 0.3)}
+                  />
+                ))}
+            </Group>
+          );
+        })}
+        {xLabelsData.map(({ label, xPosition }, index) => {
+          return (
+            <Text
+              key={index}
+              x={xPosition}
+              y={canvasHeight}
+              text={label}
+              font={font}
+              color={'white'}
+            />
+          );
+        })}
+      </Canvas>
+      {touchLine && (
+        <Popup
+          popupData={touchLine.y.map((y, index) => ({
+            x: touchLine.x,
+            y: y,
+            data: {
+              rowIndex: index,
+              colIndex: touchLine.col,
+              value: touchLine.values[index]!,
+            },
+          }))}
+          totalWidth={chartWidth + labelWidth + paddingHorizontal}
+          totalHeight={canvasHeight}
+          touchHandler={(x, y) => {
+            console.log('Popup touchHandler', x, y);
+            touchHandler(x - labelWidth - paddingLeft, y - paddingTop);
+          }}
+          viewOffset={viewOffset}
+          popupStyle={popupStyle}
+        />
+      )}
+    </View>
+  );
+}
+
+export default AreaChart;