@obitrain/charts 0.10.3 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/lib/commonjs/Charts/BottomAxis/BottomAxis.js +53 -13
- package/lib/commonjs/Charts/BottomAxis/BottomAxis.js.map +1 -1
- package/lib/commonjs/Charts/BottomAxis/Tick.js +27 -11
- package/lib/commonjs/Charts/BottomAxis/Tick.js.map +1 -1
- package/lib/commonjs/Charts/BottomAxis/index.js.map +1 -1
- package/lib/commonjs/Charts/Cursor.js +18 -6
- package/lib/commonjs/Charts/Cursor.js.map +1 -1
- package/lib/commonjs/Charts/Dot.js +51 -0
- package/lib/commonjs/Charts/Dot.js.map +1 -0
- package/lib/commonjs/Charts/Dots.js +74 -0
- package/lib/commonjs/Charts/Dots.js.map +1 -0
- package/lib/commonjs/Charts/YAxis.js +64 -0
- package/lib/commonjs/Charts/YAxis.js.map +1 -0
- package/lib/commonjs/Charts/gesture.js +67 -24
- package/lib/commonjs/Charts/gesture.js.map +1 -1
- package/lib/commonjs/Charts/graphUtils.js +4 -1
- package/lib/commonjs/Charts/graphUtils.js.map +1 -1
- package/lib/commonjs/Charts/index.js +33 -0
- package/lib/commonjs/Charts/index.js.map +1 -1
- package/lib/module/Charts/BottomAxis/BottomAxis.js +55 -14
- package/lib/module/Charts/BottomAxis/BottomAxis.js.map +1 -1
- package/lib/module/Charts/BottomAxis/Tick.js +28 -10
- package/lib/module/Charts/BottomAxis/Tick.js.map +1 -1
- package/lib/module/Charts/BottomAxis/index.js.map +1 -1
- package/lib/module/Charts/Cursor.js +19 -7
- package/lib/module/Charts/Cursor.js.map +1 -1
- package/lib/module/Charts/Dot.js +47 -0
- package/lib/module/Charts/Dot.js.map +1 -0
- package/lib/module/Charts/Dots.js +70 -0
- package/lib/module/Charts/Dots.js.map +1 -0
- package/lib/module/Charts/YAxis.js +59 -0
- package/lib/module/Charts/YAxis.js.map +1 -0
- package/lib/module/Charts/gesture.js +67 -25
- package/lib/module/Charts/gesture.js.map +1 -1
- package/lib/module/Charts/graphUtils.js +4 -1
- package/lib/module/Charts/graphUtils.js.map +1 -1
- package/lib/module/Charts/index.js +4 -1
- package/lib/module/Charts/index.js.map +1 -1
- package/lib/typescript/commonjs/src/Charts/BottomAxis/BottomAxis.d.ts +26 -3
- package/lib/typescript/commonjs/src/Charts/BottomAxis/BottomAxis.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/BottomAxis/Tick.d.ts +16 -3
- package/lib/typescript/commonjs/src/Charts/BottomAxis/Tick.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/BottomAxis/index.d.ts +1 -1
- package/lib/typescript/commonjs/src/Charts/BottomAxis/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/Cursor.d.ts +3 -0
- package/lib/typescript/commonjs/src/Charts/Cursor.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/Dot.d.ts +22 -0
- package/lib/typescript/commonjs/src/Charts/Dot.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/Charts/Dots.d.ts +28 -0
- package/lib/typescript/commonjs/src/Charts/Dots.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/Charts/YAxis.d.ts +22 -0
- package/lib/typescript/commonjs/src/Charts/YAxis.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/Charts/ZoomableLinechart/ScalablePath.d.ts +1 -1
- package/lib/typescript/commonjs/src/Charts/ZoomableLinechart/ScalablePath.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/gesture.d.ts +6 -0
- package/lib/typescript/commonjs/src/Charts/gesture.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/graphUtils.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/Charts/index.d.ts +8 -2
- package/lib/typescript/commonjs/src/Charts/index.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/BottomAxis/BottomAxis.d.ts +26 -3
- package/lib/typescript/module/src/Charts/BottomAxis/BottomAxis.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/BottomAxis/Tick.d.ts +16 -3
- package/lib/typescript/module/src/Charts/BottomAxis/Tick.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/BottomAxis/index.d.ts +1 -1
- package/lib/typescript/module/src/Charts/BottomAxis/index.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/Cursor.d.ts +3 -0
- package/lib/typescript/module/src/Charts/Cursor.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/Dot.d.ts +22 -0
- package/lib/typescript/module/src/Charts/Dot.d.ts.map +1 -0
- package/lib/typescript/module/src/Charts/Dots.d.ts +28 -0
- package/lib/typescript/module/src/Charts/Dots.d.ts.map +1 -0
- package/lib/typescript/module/src/Charts/YAxis.d.ts +22 -0
- package/lib/typescript/module/src/Charts/YAxis.d.ts.map +1 -0
- package/lib/typescript/module/src/Charts/ZoomableLinechart/ScalablePath.d.ts +1 -1
- package/lib/typescript/module/src/Charts/ZoomableLinechart/ScalablePath.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/gesture.d.ts +6 -0
- package/lib/typescript/module/src/Charts/gesture.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/graphUtils.d.ts.map +1 -1
- package/lib/typescript/module/src/Charts/index.d.ts +8 -2
- package/lib/typescript/module/src/Charts/index.d.ts.map +1 -1
- package/package.json +4 -2
- package/src/Charts/BottomAxis/BottomAxis.tsx +100 -19
- package/src/Charts/BottomAxis/Tick.tsx +55 -11
- package/src/Charts/BottomAxis/index.tsx +5 -1
- package/src/Charts/Cursor.tsx +21 -1
- package/src/Charts/Dot.tsx +64 -0
- package/src/Charts/Dots.tsx +96 -0
- package/src/Charts/YAxis.tsx +96 -0
- package/src/Charts/ZoomableLinechart/ScalablePath.tsx +1 -1
- package/src/Charts/gesture.ts +109 -51
- package/src/Charts/graphUtils.ts +4 -1
- package/src/Charts/index.tsx +8 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomAxis.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/BottomAxis.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BottomAxis.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/BottomAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,gFAAgF;AAChF,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA4EnC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type SkFont } from '@shopify/react-native-skia';
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import { type Color, type SkFont } from '@shopify/react-native-skia';
|
|
3
2
|
import { type SharedValue } from 'react-native-reanimated';
|
|
4
3
|
export type TickProps = {
|
|
5
4
|
initPosition: number;
|
|
@@ -9,6 +8,20 @@ export type TickProps = {
|
|
|
9
8
|
offsetX: SharedValue<number>;
|
|
10
9
|
offsetY?: number;
|
|
11
10
|
font: SkFont;
|
|
11
|
+
color?: Color;
|
|
12
|
+
labelColor?: Color;
|
|
13
|
+
/** Length of the tick line. Use a negative value (e.g. -chartHeight) to draw a vertical gridline above the axis. */
|
|
14
|
+
tickLength?: number;
|
|
15
|
+
strokeWidth?: number;
|
|
16
|
+
/** Dash/gap lengths for a dashed tick line. */
|
|
17
|
+
dash?: [number, number];
|
|
18
|
+
showLabel?: boolean;
|
|
19
|
+
/** `center` puts the label under the tick, `left` starts it right after the tick. */
|
|
20
|
+
labelAlign?: 'center' | 'left';
|
|
21
|
+
/** Gap between the tick and a left-aligned label. */
|
|
22
|
+
labelGap?: number;
|
|
12
23
|
};
|
|
13
|
-
|
|
24
|
+
declare const TickComponent: (props: TickProps) => import("react").JSX.Element;
|
|
25
|
+
export declare const Tick: import("react").MemoExoticComponent<typeof TickComponent>;
|
|
26
|
+
export {};
|
|
14
27
|
//# sourceMappingURL=Tick.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tick.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/Tick.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tick.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/Tick.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,KAAK,EACV,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,MAAM,MAAM,SAAS,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,oHAAoH;IACpH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qFAAqF;IACrF,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,aAAa,UAAoB,SAAS,gCAsD/C,CAAC;AAIF,eAAO,MAAM,IAAI,2DAAsB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { AxisLine, type AxisLineProps } from './AxisLine.js';
|
|
2
|
-
export { BottomAxis, type BottomAxisProps } from './BottomAxis.js';
|
|
2
|
+
export { BottomAxis, type AxisTick, type BottomAxisProps, } from './BottomAxis.js';
|
|
3
3
|
export { Tick, type TickProps } from './Tick.js';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAY,CAAC;AAC1D,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/BottomAxis/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAY,CAAC;AAC1D,OAAO,EACL,UAAU,EACV,KAAK,QAAQ,EACb,KAAK,eAAe,GACrB,MAAM,iBAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,WAAQ,CAAC"}
|
|
@@ -6,6 +6,9 @@ export type CursorProps = {
|
|
|
6
6
|
positionX: SharedValue<number>;
|
|
7
7
|
size?: number;
|
|
8
8
|
color?: string;
|
|
9
|
+
/** When set, draws a ring of this color around the cursor. */
|
|
10
|
+
strokeColor?: string;
|
|
11
|
+
strokeWidth?: number;
|
|
9
12
|
currentValue?: SharedValue<number> | SharedValue<number | undefined>;
|
|
10
13
|
translateY?: SharedValue<number | undefined>;
|
|
11
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cursor.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/Cursor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAK5E,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;IACtC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Cursor.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/Cursor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAK5E,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;IACtC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAgD3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type Color } from '@shopify/react-native-skia';
|
|
2
|
+
import { type SharedValue } from 'react-native-reanimated';
|
|
3
|
+
export type DotProps = {
|
|
4
|
+
x: SharedValue<number> | number;
|
|
5
|
+
y: SharedValue<number> | number;
|
|
6
|
+
opacity?: SharedValue<number> | number;
|
|
7
|
+
r?: number;
|
|
8
|
+
color?: Color;
|
|
9
|
+
/**
|
|
10
|
+
* When set, the dot is drawn as a ring: `fillColor` inside, `color` as the
|
|
11
|
+
* stroke. Use the chart background color to get a "hollow" marker.
|
|
12
|
+
*/
|
|
13
|
+
fillColor?: Color;
|
|
14
|
+
strokeWidth?: number;
|
|
15
|
+
scale?: SharedValue<number>;
|
|
16
|
+
focalX?: SharedValue<number>;
|
|
17
|
+
offsetX?: SharedValue<number>;
|
|
18
|
+
};
|
|
19
|
+
declare function DotComponent(props: DotProps): import("react").JSX.Element;
|
|
20
|
+
export declare const Dot: import("react").MemoExoticComponent<typeof DotComponent>;
|
|
21
|
+
export {};
|
|
22
|
+
//# sourceMappingURL=Dot.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/Dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEvE,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5E,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAChC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IACvC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,QAAQ,+BAoCpC;AAID,eAAO,MAAM,GAAG,0DAAqB,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type Color } from '@shopify/react-native-skia';
|
|
2
|
+
import { type FC } from 'react';
|
|
3
|
+
import { type SharedValue } from 'react-native-reanimated';
|
|
4
|
+
import type { AnimatedDot } from './types.js';
|
|
5
|
+
export type DotShape = 'circle' | 'diamond';
|
|
6
|
+
export type DotsProps = {
|
|
7
|
+
dots: AnimatedDot[];
|
|
8
|
+
r?: number;
|
|
9
|
+
shape?: DotShape;
|
|
10
|
+
color?: Color;
|
|
11
|
+
/** When set, dots are drawn as rings: `fillColor` inside, `color` as the stroke. */
|
|
12
|
+
fillColor?: Color;
|
|
13
|
+
strokeWidth?: number;
|
|
14
|
+
/** Viewport width used to cull off-screen dots. */
|
|
15
|
+
width?: number;
|
|
16
|
+
scale?: SharedValue<number>;
|
|
17
|
+
focalX?: SharedValue<number>;
|
|
18
|
+
offsetX?: SharedValue<number>;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Draw a whole series of dots as a single Skia path (two with `fillColor`).
|
|
22
|
+
* Unlike mapping over {@link Dot}, this runs one worklet per frame instead of
|
|
23
|
+
* one per dot, which keeps large series smooth during zoom/pan gestures.
|
|
24
|
+
* Per-dot opacity is binary here: dots below 0.5 are hidden.
|
|
25
|
+
*/
|
|
26
|
+
declare const Dots: FC<DotsProps>;
|
|
27
|
+
export { Dots };
|
|
28
|
+
//# sourceMappingURL=Dots.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dots.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/Dots.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAE3C,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oFAAoF;IACpF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA+DvB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type Color, type SkFont } from '@shopify/react-native-skia';
|
|
2
|
+
import { type FC } from 'react';
|
|
3
|
+
export type YAxisProps = {
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
font: SkFont;
|
|
7
|
+
minY: number;
|
|
8
|
+
maxY: number;
|
|
9
|
+
/** Values to draw a gridline at. Defaults to `nbTicks` evenly spaced values. */
|
|
10
|
+
values?: number[];
|
|
11
|
+
nbTicks?: number;
|
|
12
|
+
color?: Color;
|
|
13
|
+
labelColor?: Color;
|
|
14
|
+
strokeWidth?: number;
|
|
15
|
+
showLabels?: boolean;
|
|
16
|
+
formatLabel?: (value: number) => string;
|
|
17
|
+
};
|
|
18
|
+
/** Evenly spaced integer ticks from 0 to a padded maximum, e.g. 0, 26, 52, 78, 104. */
|
|
19
|
+
export declare const getPaddedTicks: (maxValue: number, nbTicks?: number, padding?: number) => number[];
|
|
20
|
+
declare const YAxis: FC<YAxisProps>;
|
|
21
|
+
export { YAxis };
|
|
22
|
+
//# sourceMappingURL=YAxis.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/YAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,KAAK,EACV,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAIF,uFAAuF;AACvF,eAAO,MAAM,cAAc,aACf,MAAM,yCAGf,MAAM,EAGR,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAsDzB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ export type ScalablePathProps = {
|
|
|
7
7
|
focalX: SharedValue<number>;
|
|
8
8
|
offsetX: SharedValue<number>;
|
|
9
9
|
color?: string;
|
|
10
|
-
pathProps?: Omit<React.ComponentProps<typeof Path>, 'color'>;
|
|
10
|
+
pathProps?: Omit<React.ComponentProps<typeof Path>, 'color' | 'path'>;
|
|
11
11
|
};
|
|
12
12
|
declare const ScalablePath: FC<ScalablePathProps>;
|
|
13
13
|
export { ScalablePath };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalablePath.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/ZoomableLinechart/ScalablePath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAQ,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ScalablePath.d.ts","sourceRoot":"","sources":["../../../../../../src/Charts/ZoomableLinechart/ScalablePath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAQ,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACvE,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyBvC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -6,6 +6,12 @@ import type { DataPoint } from './types.js';
|
|
|
6
6
|
* given the current focal, scale and offset
|
|
7
7
|
*/
|
|
8
8
|
export declare const getPositionWl: (position: number, focalX: number, scale: number, offsetX: number) => number;
|
|
9
|
+
/**
|
|
10
|
+
* Offset range keeping the content edges pinned to the viewport:
|
|
11
|
+
* leftBound (position 0) <= startOffset and rightBound (position width)
|
|
12
|
+
* >= width + startOffset. Collapses to [startOffset, startOffset] at scale 1.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getOffsetBoundsWl: (width: number, startOffset: number, focalX: number, scale: number) => [min: number, max: number];
|
|
9
15
|
export type AxisGestureProps = {
|
|
10
16
|
width: number;
|
|
11
17
|
startOffset?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/gesture.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC3F,OAAO,
|
|
1
|
+
{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/gesture.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAGH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,aAAa,aACd,MAAM,UACR,MAAM,SACP,MAAM,WACJ,MAAM,WAIhB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UACrB,MAAM,eACA,MAAM,UACX,MAAM,SACP,MAAM,KACZ,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAK3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,gBAAgB,KAAG,eA0H5D,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,aAAa,UAAoB,eAAe;;CAoC5D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,MACvB,MAAM,cACG,SAAS,EAAE,KACtB,SAiBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,UAAoB,qBAAqB;;;;;CAgDrE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graphUtils.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/graphUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAClC,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,oBAAoB,CAAC;CACzD,CAAC;AAEF,uDAAuD;AACvD,MAAM,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3C,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,UAAU,SACf,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,SACvB,MAAM,UACL,MAAM,WACL,gBAAgB,KACxB,SAsCF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,aACd,WAAW,EAAE,UACf,WAAW,CAAC,MAAM,CAAC,UACnB,WAAW,CAAC,MAAM,CAAC,WAClB,WAAW,CAAC,MAAM,CAAC,WACnB,WAAW,CAAC,MAAM,CAAC,KAC3B,WAAW,EA+Cb,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC;IAC1B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,0BAA0B,YAAsB,MAAM,WAGlE,CAAC;AACF,eAAO,MAAM,4BAA4B,aAAuB,MAAM,WAGrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAoB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"graphUtils.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/graphUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAClC,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,oBAAoB,CAAC;CACzD,CAAC;AAEF,uDAAuD;AACvD,MAAM,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3C,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,UAAU,SACf,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,SACvB,MAAM,UACL,MAAM,WACL,gBAAgB,KACxB,SAsCF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,aACd,WAAW,EAAE,UACf,WAAW,CAAC,MAAM,CAAC,UACnB,WAAW,CAAC,MAAM,CAAC,WAClB,WAAW,CAAC,MAAM,CAAC,WACnB,WAAW,CAAC,MAAM,CAAC,KAC3B,WAAW,EA+Cb,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC;IAC1B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,0BAA0B,YAAsB,MAAM,WAGlE,CAAC;AACF,eAAO,MAAM,4BAA4B,aAAuB,MAAM,WAGrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAoB,oBAAoB,SAwCrE,CAAC"}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
export { AxisLine, BottomAxis, Tick } from './BottomAxis/index.js';
|
|
2
|
-
export type { AxisLineProps, BottomAxisProps, TickProps, } from './BottomAxis/index.js';
|
|
2
|
+
export type { AxisLineProps, AxisTick, BottomAxisProps, TickProps, } from './BottomAxis/index.js';
|
|
3
3
|
export { Cursor } from './Cursor.js';
|
|
4
4
|
export type { CursorProps } from './Cursor.js';
|
|
5
|
+
export { Dot } from './Dot.js';
|
|
6
|
+
export type { DotProps } from './Dot.js';
|
|
7
|
+
export { Dots } from './Dots.js';
|
|
8
|
+
export type { DotShape, DotsProps } from './Dots.js';
|
|
9
|
+
export { YAxis, getPaddedTicks } from './YAxis.js';
|
|
10
|
+
export type { YAxisProps } from './YAxis.js';
|
|
5
11
|
export { LineChart } from './Linechart/index.js';
|
|
6
12
|
export type { LineChartProps, LinePath } from './Linechart/index.js';
|
|
7
13
|
export { ScalablePath, ZoomableLineChart } from './ZoomableLinechart/index.js';
|
|
8
14
|
export type { ScalablePathProps, ZoomableLineChartProps, } from './ZoomableLinechart/index.js';
|
|
9
|
-
export { getClosestPoint, getPositionWl, useCursorGesture, useScalableGesture, useUpdateAxis, } from './gesture.js';
|
|
15
|
+
export { getClosestPoint, getOffsetBoundsWl, getPositionWl, useCursorGesture, useScalableGesture, useUpdateAxis, } from './gesture.js';
|
|
10
16
|
export type { AxisGestureProps, ScalableGesture, UpdateAxisProps, UseCursorGestureProps, } from './gesture.js';
|
|
11
17
|
export { buildGraph, defaultOpacityTransitionWl, defaultTranslateTransitionWl, scaleCommands, useDotsTransition, } from './graphUtils.js';
|
|
12
18
|
export type { BuildGraphConfig, Config, GraphData, UseDotAnimationProps, } from './graphUtils.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,uBAAc,CAAC;AAC1D,YAAY,EACV,aAAa,EACb,eAAe,EACf,SAAS,GACV,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAU,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAa,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAAqB,CAAC;AACtE,YAAY,EACV,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,8BAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,GACd,MAAM,cAAW,CAAC;AACnB,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,qBAAqB,GACtB,MAAM,cAAW,CAAC;AACnB,OAAO,EACL,UAAU,EACV,0BAA0B,EAC1B,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,GAClB,MAAM,iBAAc,CAAC;AACtB,YAAY,EACV,gBAAgB,EAEhB,MAAM,EACN,SAAS,EACT,oBAAoB,GACrB,MAAM,iBAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,GACZ,MAAM,YAAS,CAAC;AACjB,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Charts/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,uBAAc,CAAC;AAC1D,YAAY,EACV,aAAa,EACb,QAAQ,EACR,eAAe,EACf,SAAS,GACV,MAAM,uBAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAU,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,UAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAO,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAQ,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAQ,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAa,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAAqB,CAAC;AACtE,YAAY,EACV,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,8BAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,GACd,MAAM,cAAW,CAAC;AACnB,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,qBAAqB,GACtB,MAAM,cAAW,CAAC;AACnB,OAAO,EACL,UAAU,EACV,0BAA0B,EAC1B,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,GAClB,MAAM,iBAAc,CAAC;AACtB,YAAY,EACV,gBAAgB,EAEhB,MAAM,EACN,SAAS,EACT,oBAAoB,GACrB,MAAM,iBAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,GACZ,MAAM,YAAS,CAAC;AACjB,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obitrain/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Charting library for React Native",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
"@types/d3-shape": "^3.2.0"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
|
+
"@babel/core": "^8.0.1",
|
|
77
78
|
"@commitlint/config-conventional": "^21.2.2",
|
|
78
79
|
"@evilmartians/lefthook": "^2.1.12",
|
|
79
80
|
"@react-native-community/cli": "^20.2.0",
|
|
@@ -123,7 +124,8 @@
|
|
|
123
124
|
],
|
|
124
125
|
"resolutions": {
|
|
125
126
|
"react": "19.2.3",
|
|
126
|
-
"react-dom": "19.2.3"
|
|
127
|
+
"react-dom": "19.2.3",
|
|
128
|
+
"react-native-worklets": "patch:react-native-worklets@npm%3A0.10.1#~/.yarn/patches/react-native-worklets-npm-0.10.1-c5d5cb7f1d.patch"
|
|
127
129
|
},
|
|
128
130
|
"packageManager": "yarn@4.18.0",
|
|
129
131
|
"engines": {
|
|
@@ -1,41 +1,122 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import {
|
|
2
|
+
Canvas,
|
|
3
|
+
type Color,
|
|
4
|
+
type SkFont,
|
|
5
|
+
} from '@shopify/react-native-skia';
|
|
6
|
+
import { useMemo, type FC } from 'react';
|
|
4
7
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
5
8
|
import type { SharedValue } from 'react-native-reanimated';
|
|
6
9
|
import { AxisLine } from './AxisLine';
|
|
7
10
|
import { Tick } from './Tick';
|
|
8
11
|
|
|
12
|
+
/** A tick at an explicit position in graph space, as returned by a d3 scale. */
|
|
13
|
+
export type AxisTick = { x: number; label: string };
|
|
14
|
+
|
|
9
15
|
export type BottomAxisProps = {
|
|
10
|
-
labels: string[];
|
|
11
16
|
width: number;
|
|
12
|
-
// tickInterval: number;
|
|
13
17
|
scale: SharedValue<number>;
|
|
14
18
|
focalX: SharedValue<number>;
|
|
15
19
|
offsetX: SharedValue<number>;
|
|
20
|
+
font: SkFont;
|
|
21
|
+
/**
|
|
22
|
+
* Ticks at explicit positions, for a non-uniform axis (a time axis lands on
|
|
23
|
+
* month starts or Mondays, not on even fractions). Takes precedence over `labels`.
|
|
24
|
+
*/
|
|
25
|
+
ticks?: AxisTick[];
|
|
26
|
+
/** Labels spread evenly across `width`. */
|
|
27
|
+
labels?: string[];
|
|
16
28
|
offsetY?: number;
|
|
17
29
|
style?: StyleProp<ViewStyle>;
|
|
18
|
-
|
|
30
|
+
/** Renders its own Canvas by default; pass false to embed in an existing one. */
|
|
31
|
+
standalone?: boolean;
|
|
32
|
+
showAxisLine?: boolean;
|
|
33
|
+
color?: Color;
|
|
34
|
+
labelColor?: Color;
|
|
35
|
+
/** Negative (e.g. -chartHeight) draws full-height gridlines above the axis. */
|
|
36
|
+
tickLength?: number;
|
|
37
|
+
strokeWidth?: number;
|
|
38
|
+
dash?: [number, number];
|
|
39
|
+
labelAlign?: 'center' | 'left';
|
|
40
|
+
labelGap?: number;
|
|
41
|
+
showLabels?: boolean;
|
|
19
42
|
};
|
|
20
43
|
|
|
21
44
|
const BottomAxis: FC<BottomAxisProps> = function (props) {
|
|
22
|
-
const {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
45
|
+
const {
|
|
46
|
+
labels,
|
|
47
|
+
ticks,
|
|
48
|
+
scale,
|
|
49
|
+
focalX,
|
|
50
|
+
offsetX,
|
|
51
|
+
style,
|
|
52
|
+
width,
|
|
53
|
+
font,
|
|
54
|
+
offsetY = 0,
|
|
55
|
+
standalone = true,
|
|
56
|
+
showAxisLine = true,
|
|
57
|
+
color,
|
|
58
|
+
labelColor,
|
|
59
|
+
tickLength,
|
|
60
|
+
strokeWidth,
|
|
61
|
+
dash,
|
|
62
|
+
labelAlign,
|
|
63
|
+
labelGap,
|
|
64
|
+
showLabels,
|
|
65
|
+
} = props;
|
|
66
|
+
|
|
67
|
+
const items = useMemo<AxisTick[]>(() => {
|
|
68
|
+
if (ticks !== undefined) return ticks;
|
|
69
|
+
if (labels === undefined) return [];
|
|
70
|
+
const interval = labels.length > 1 ? width / (labels.length - 1) : 0;
|
|
71
|
+
return labels.map((label, i) => ({ x: interval * i, label }));
|
|
72
|
+
}, [ticks, labels, width]);
|
|
73
|
+
|
|
74
|
+
// Callers naturally write `dash={[3, 4]}`; keying the memo on the values
|
|
75
|
+
// keeps one reference so the memoized Ticks are not rebuilt every render
|
|
76
|
+
const dashStart = dash?.[0];
|
|
77
|
+
const dashEnd = dash?.[1];
|
|
78
|
+
const dashIntervals = useMemo(
|
|
79
|
+
() =>
|
|
80
|
+
dashStart === undefined || dashEnd === undefined
|
|
81
|
+
? undefined
|
|
82
|
+
: ([dashStart, dashEnd] as [number, number]),
|
|
83
|
+
[dashStart, dashEnd]
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
const content = (
|
|
87
|
+
<>
|
|
88
|
+
{showAxisLine ? (
|
|
89
|
+
<AxisLine
|
|
90
|
+
{...{ width, offsetY, focalX, scale, offsetX, color, strokeWidth }}
|
|
91
|
+
/>
|
|
92
|
+
) : null}
|
|
93
|
+
{items.map((tick) => (
|
|
30
94
|
<Tick
|
|
31
|
-
key={
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{
|
|
95
|
+
key={`${tick.x}:${tick.label}`}
|
|
96
|
+
initPosition={tick.x}
|
|
97
|
+
label={tick.label}
|
|
98
|
+
dash={dashIntervals}
|
|
99
|
+
{...{
|
|
100
|
+
offsetX,
|
|
101
|
+
offsetY,
|
|
102
|
+
focalX,
|
|
103
|
+
scale,
|
|
104
|
+
font,
|
|
105
|
+
color,
|
|
106
|
+
labelColor,
|
|
107
|
+
tickLength,
|
|
108
|
+
strokeWidth,
|
|
109
|
+
labelAlign,
|
|
110
|
+
labelGap,
|
|
111
|
+
}}
|
|
112
|
+
showLabel={showLabels}
|
|
35
113
|
/>
|
|
36
114
|
))}
|
|
37
|
-
|
|
115
|
+
</>
|
|
38
116
|
);
|
|
117
|
+
|
|
118
|
+
if (!standalone) return content;
|
|
119
|
+
return <Canvas style={style}>{content}</Canvas>;
|
|
39
120
|
};
|
|
40
121
|
|
|
41
122
|
export { BottomAxis };
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
|
+
DashPathEffect,
|
|
2
3
|
Group,
|
|
3
4
|
Line,
|
|
4
5
|
Text,
|
|
5
6
|
vec,
|
|
7
|
+
type Color,
|
|
6
8
|
type SkFont,
|
|
7
9
|
} from '@shopify/react-native-skia';
|
|
8
|
-
import
|
|
10
|
+
import { memo } from 'react';
|
|
9
11
|
import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
|
|
10
12
|
import { getPositionWl } from '../gesture';
|
|
11
13
|
|
|
@@ -17,10 +19,37 @@ export type TickProps = {
|
|
|
17
19
|
offsetX: SharedValue<number>;
|
|
18
20
|
offsetY?: number;
|
|
19
21
|
font: SkFont;
|
|
22
|
+
color?: Color;
|
|
23
|
+
labelColor?: Color;
|
|
24
|
+
/** Length of the tick line. Use a negative value (e.g. -chartHeight) to draw a vertical gridline above the axis. */
|
|
25
|
+
tickLength?: number;
|
|
26
|
+
strokeWidth?: number;
|
|
27
|
+
/** Dash/gap lengths for a dashed tick line. */
|
|
28
|
+
dash?: [number, number];
|
|
29
|
+
showLabel?: boolean;
|
|
30
|
+
/** `center` puts the label under the tick, `left` starts it right after the tick. */
|
|
31
|
+
labelAlign?: 'center' | 'left';
|
|
32
|
+
/** Gap between the tick and a left-aligned label. */
|
|
33
|
+
labelGap?: number;
|
|
20
34
|
};
|
|
21
35
|
|
|
22
|
-
|
|
23
|
-
const {
|
|
36
|
+
const TickComponent = function (props: TickProps) {
|
|
37
|
+
const {
|
|
38
|
+
label,
|
|
39
|
+
scale,
|
|
40
|
+
focalX,
|
|
41
|
+
offsetX,
|
|
42
|
+
initPosition,
|
|
43
|
+
font,
|
|
44
|
+
color = 'black',
|
|
45
|
+
labelColor,
|
|
46
|
+
tickLength = 10,
|
|
47
|
+
strokeWidth,
|
|
48
|
+
dash,
|
|
49
|
+
showLabel = true,
|
|
50
|
+
labelAlign = 'center',
|
|
51
|
+
labelGap = 6,
|
|
52
|
+
} = props;
|
|
24
53
|
const offsetY = props.offsetY ?? 0;
|
|
25
54
|
const transform = useDerivedValue(() => [
|
|
26
55
|
{
|
|
@@ -35,17 +64,32 @@ export const Tick: React.FC<TickProps> = (props) => {
|
|
|
35
64
|
const width = font
|
|
36
65
|
.getGlyphWidths(font.getGlyphIDs(label))
|
|
37
66
|
.reduce((a, b) => a + b, 0);
|
|
67
|
+
const labelX = labelAlign === 'left' ? labelGap : -width / 2;
|
|
38
68
|
|
|
39
69
|
return (
|
|
40
70
|
<Group transform={transform}>
|
|
41
|
-
<Line
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
71
|
+
<Line
|
|
72
|
+
color={color}
|
|
73
|
+
strokeWidth={strokeWidth}
|
|
74
|
+
p1={vec(0, offsetY)}
|
|
75
|
+
p2={vec(0, offsetY + tickLength)}
|
|
76
|
+
>
|
|
77
|
+
{dash !== undefined ? <DashPathEffect intervals={dash} /> : null}
|
|
78
|
+
</Line>
|
|
79
|
+
{showLabel ? (
|
|
80
|
+
<Text
|
|
81
|
+
text={label}
|
|
82
|
+
color={labelColor ?? color}
|
|
83
|
+
x={labelX}
|
|
84
|
+
y={offsetY + 23}
|
|
85
|
+
font={font}
|
|
86
|
+
/>
|
|
87
|
+
) : null}
|
|
49
88
|
</Group>
|
|
50
89
|
);
|
|
51
90
|
};
|
|
91
|
+
|
|
92
|
+
// Memoized: zoom/pan flows through shared values, so a Tick only needs to
|
|
93
|
+
// re-render when its label or base position changes
|
|
94
|
+
export const Tick = memo(TickComponent);
|
|
95
|
+
Tick.displayName = 'Tick';
|
package/src/Charts/Cursor.tsx
CHANGED
|
@@ -10,6 +10,9 @@ export type CursorProps = {
|
|
|
10
10
|
positionX: SharedValue<number>;
|
|
11
11
|
size?: number;
|
|
12
12
|
color?: string;
|
|
13
|
+
/** When set, draws a ring of this color around the cursor. */
|
|
14
|
+
strokeColor?: string;
|
|
15
|
+
strokeWidth?: number;
|
|
13
16
|
currentValue?: SharedValue<number> | SharedValue<number | undefined>;
|
|
14
17
|
translateY?: SharedValue<number | undefined>;
|
|
15
18
|
};
|
|
@@ -18,6 +21,8 @@ const Cursor: FC<CursorProps> = function ({
|
|
|
18
21
|
commands,
|
|
19
22
|
positionX,
|
|
20
23
|
color,
|
|
24
|
+
strokeColor,
|
|
25
|
+
strokeWidth = 2,
|
|
21
26
|
currentValue,
|
|
22
27
|
translateY,
|
|
23
28
|
size = CURSOR_SIZE,
|
|
@@ -44,7 +49,22 @@ const Cursor: FC<CursorProps> = function ({
|
|
|
44
49
|
{ translateX: positionX.value },
|
|
45
50
|
{ translateY: _translateY.value ?? 0 },
|
|
46
51
|
]);
|
|
47
|
-
return
|
|
52
|
+
return (
|
|
53
|
+
<>
|
|
54
|
+
<Circle transform={transform} cx={0} cy={0} r={size} color={color} />
|
|
55
|
+
{strokeColor !== undefined ? (
|
|
56
|
+
<Circle
|
|
57
|
+
transform={transform}
|
|
58
|
+
cx={0}
|
|
59
|
+
cy={0}
|
|
60
|
+
r={size}
|
|
61
|
+
color={strokeColor}
|
|
62
|
+
style="stroke"
|
|
63
|
+
strokeWidth={strokeWidth}
|
|
64
|
+
/>
|
|
65
|
+
) : null}
|
|
66
|
+
</>
|
|
67
|
+
);
|
|
48
68
|
};
|
|
49
69
|
|
|
50
70
|
export { Cursor };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Circle, Group, type Color } from '@shopify/react-native-skia';
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
|
|
4
|
+
import { getPositionWl } from './gesture';
|
|
5
|
+
|
|
6
|
+
export type DotProps = {
|
|
7
|
+
x: SharedValue<number> | number;
|
|
8
|
+
y: SharedValue<number> | number;
|
|
9
|
+
opacity?: SharedValue<number> | number;
|
|
10
|
+
r?: number;
|
|
11
|
+
color?: Color;
|
|
12
|
+
/**
|
|
13
|
+
* When set, the dot is drawn as a ring: `fillColor` inside, `color` as the
|
|
14
|
+
* stroke. Use the chart background color to get a "hollow" marker.
|
|
15
|
+
*/
|
|
16
|
+
fillColor?: Color;
|
|
17
|
+
strokeWidth?: number;
|
|
18
|
+
// Optional zoom/pan awareness (see useScalableGesture)
|
|
19
|
+
scale?: SharedValue<number>;
|
|
20
|
+
focalX?: SharedValue<number>;
|
|
21
|
+
offsetX?: SharedValue<number>;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
function DotComponent(props: DotProps) {
|
|
25
|
+
const {
|
|
26
|
+
x,
|
|
27
|
+
y,
|
|
28
|
+
opacity = 1,
|
|
29
|
+
r = 4,
|
|
30
|
+
color = 'black',
|
|
31
|
+
fillColor,
|
|
32
|
+
strokeWidth = 2,
|
|
33
|
+
scale,
|
|
34
|
+
focalX,
|
|
35
|
+
offsetX,
|
|
36
|
+
} = props;
|
|
37
|
+
|
|
38
|
+
const cx = useDerivedValue(() => {
|
|
39
|
+
const _x = typeof x === 'number' ? x : x.value;
|
|
40
|
+
if (scale === undefined || focalX === undefined || offsetX === undefined)
|
|
41
|
+
return _x;
|
|
42
|
+
return getPositionWl(_x, focalX.value, scale.value, offsetX.value);
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<Group opacity={opacity}>
|
|
47
|
+
<Circle cx={cx} cy={y} r={r} color={fillColor ?? color} />
|
|
48
|
+
{fillColor !== undefined ? (
|
|
49
|
+
<Circle
|
|
50
|
+
cx={cx}
|
|
51
|
+
cy={y}
|
|
52
|
+
r={r}
|
|
53
|
+
style="stroke"
|
|
54
|
+
color={color}
|
|
55
|
+
strokeWidth={strokeWidth}
|
|
56
|
+
/>
|
|
57
|
+
) : null}
|
|
58
|
+
</Group>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Memoized: charts render many dots and the position updates flow through
|
|
63
|
+
// shared values, so parent re-renders don't need to reach them
|
|
64
|
+
export const Dot = memo(DotComponent);
|