@impulse-ui-native/charts 2.2.0 → 2.3.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 +48 -1
- package/dist/components/{bar-chart-body.d.mts → bar-chart/bar-chart-body.d.mts} +4 -4
- package/dist/components/{bar-chart-body.js → bar-chart/bar-chart-body.js} +3 -3
- package/dist/components/bar-chart/bar-chart-body.js.map +1 -0
- package/dist/components/{bar-chart.d.mts → bar-chart/bar-chart.d.mts} +4 -4
- package/dist/components/{bar-chart.js → bar-chart/bar-chart.js} +1 -1
- package/dist/components/bar-chart/bar-chart.js.map +1 -0
- package/dist/components/bar-chart/index.d.mts +8 -0
- package/dist/components/bar-chart/index.js +5 -0
- package/dist/components/bar-chart/index.js.map +1 -0
- package/dist/components/{chart-axes.d.mts → chart-axes/chart-axes.d.mts} +3 -3
- package/dist/components/{chart-axes.js → chart-axes/chart-axes.js} +1 -1
- package/dist/components/chart-axes/chart-axes.js.map +1 -0
- package/dist/components/chart-axes/index.d.mts +7 -0
- package/dist/components/chart-axes/index.js +5 -0
- package/dist/components/chart-axes/index.js.map +1 -0
- package/dist/components/index.d.mts +10 -4
- package/dist/components/index.js +5 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/line-chart/index.d.mts +7 -0
- package/dist/components/line-chart/index.js +5 -0
- package/dist/components/line-chart/index.js.map +1 -0
- package/dist/components/{line-chart-body.d.mts → line-chart/line-chart-body.d.mts} +3 -3
- package/dist/components/{line-chart-body.js → line-chart/line-chart-body.js} +4 -4
- package/dist/components/line-chart/line-chart-body.js.map +1 -0
- package/dist/components/{line-chart.d.mts → line-chart/line-chart.d.mts} +3 -3
- package/dist/components/{line-chart.js → line-chart/line-chart.js} +1 -1
- package/dist/components/line-chart/line-chart.js.map +1 -0
- package/dist/components/multi-bar-chart/index.d.mts +9 -0
- package/dist/components/multi-bar-chart/index.js +5 -0
- package/dist/components/multi-bar-chart/index.js.map +1 -0
- package/dist/components/{multi-bar-chart-body.d.mts → multi-bar-chart/multi-bar-chart-body.d.mts} +5 -5
- package/dist/components/{multi-bar-chart-body.js → multi-bar-chart/multi-bar-chart-body.js} +4 -4
- package/dist/components/multi-bar-chart/multi-bar-chart-body.js.map +1 -0
- package/dist/components/{multi-bar-chart.d.mts → multi-bar-chart/multi-bar-chart.d.mts} +5 -5
- package/dist/components/{multi-bar-chart.js → multi-bar-chart/multi-bar-chart.js} +1 -1
- package/dist/components/multi-bar-chart/multi-bar-chart.js.map +1 -0
- package/dist/components/multi-line-chart/index.d.mts +8 -0
- package/dist/components/multi-line-chart/index.js +5 -0
- package/dist/components/multi-line-chart/index.js.map +1 -0
- package/dist/components/{multi-line-chart-body.d.mts → multi-line-chart/multi-line-chart-body.d.mts} +4 -4
- package/dist/components/{multi-line-chart-body.js → multi-line-chart/multi-line-chart-body.js} +3 -3
- package/dist/components/multi-line-chart/multi-line-chart-body.js.map +1 -0
- package/dist/components/{multi-line-chart.d.mts → multi-line-chart/multi-line-chart.d.mts} +4 -4
- package/dist/components/{multi-line-chart.js → multi-line-chart/multi-line-chart.js} +1 -1
- package/dist/components/multi-line-chart/multi-line-chart.js.map +1 -0
- package/dist/components/multi-pie-chart/index.d.mts +7 -0
- package/dist/components/multi-pie-chart/index.js +5 -0
- package/dist/components/multi-pie-chart/index.js.map +1 -0
- package/dist/components/multi-pie-chart/multi-pie-chart-body.d.mts +13 -0
- package/dist/components/multi-pie-chart/multi-pie-chart-body.js +40 -0
- package/dist/components/multi-pie-chart/multi-pie-chart-body.js.map +1 -0
- package/dist/components/multi-pie-chart/multi-pie-chart.d.mts +10 -0
- package/dist/components/multi-pie-chart/multi-pie-chart.js +19 -0
- package/dist/components/multi-pie-chart/multi-pie-chart.js.map +1 -0
- package/dist/components/pie-chart/index.d.mts +6 -0
- package/dist/components/pie-chart/index.js +5 -0
- package/dist/components/pie-chart/index.js.map +1 -0
- package/dist/components/pie-chart/pie-chart-body.d.mts +12 -0
- package/dist/components/pie-chart/pie-chart-body.js +32 -0
- package/dist/components/pie-chart/pie-chart-body.js.map +1 -0
- package/dist/components/pie-chart/pie-chart.d.mts +9 -0
- package/dist/components/pie-chart/pie-chart.js +19 -0
- package/dist/components/pie-chart/pie-chart.js.map +1 -0
- package/dist/components/primitives/index.d.mts +3 -0
- package/dist/components/primitives/index.js +2 -0
- package/dist/components/primitives/index.js.map +1 -1
- package/dist/components/primitives/pie.d.mts +10 -0
- package/dist/components/primitives/pie.js +63 -0
- package/dist/components/primitives/pie.js.map +1 -0
- package/dist/constants/index.d.mts +1 -0
- package/dist/constants/index.js +1 -0
- package/dist/constants/index.js.map +1 -1
- package/dist/constants/pie.constants.d.mts +15 -0
- package/dist/constants/pie.constants.js +26 -0
- package/dist/constants/pie.constants.js.map +1 -0
- package/dist/hooks/index.d.mts +6 -0
- package/dist/hooks/index.js +5 -1
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/use-multi-pie-chart.hook.d.mts +10 -0
- package/dist/hooks/use-multi-pie-chart.hook.js +40 -0
- package/dist/hooks/use-multi-pie-chart.hook.js.map +1 -0
- package/dist/hooks/use-pie-chart.hook.d.mts +9 -0
- package/dist/hooks/use-pie-chart.hook.js +29 -0
- package/dist/hooks/use-pie-chart.hook.js.map +1 -0
- package/dist/index.d.mts +18 -4
- package/dist/types/index.d.mts +5 -0
- package/dist/types/index.js +5 -0
- package/dist/types/index.js.map +1 -1
- package/dist/types/multi-pie-chart.types.d.mts +20 -0
- package/dist/types/multi-pie-chart.types.js +1 -0
- package/dist/types/multi-pie-chart.types.js.map +1 -0
- package/dist/types/pie-chart.types.d.mts +46 -0
- package/dist/types/pie-chart.types.js +1 -0
- package/dist/types/pie-chart.types.js.map +1 -0
- package/dist/types/pie.types.d.mts +10 -0
- package/dist/types/pie.types.js +1 -0
- package/dist/types/pie.types.js.map +1 -0
- package/dist/types/use-multi-pie-chart.types.d.mts +14 -0
- package/dist/types/use-multi-pie-chart.types.js +1 -0
- package/dist/types/use-multi-pie-chart.types.js.map +1 -0
- package/dist/types/use-pie-chart.types.d.mts +12 -0
- package/dist/types/use-pie-chart.types.js +1 -0
- package/dist/types/use-pie-chart.types.js.map +1 -0
- package/dist/utils/index.d.mts +7 -0
- package/dist/utils/index.js +12 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/multi-pie-chart.util.d.mts +10 -0
- package/dist/utils/multi-pie-chart.util.js +59 -0
- package/dist/utils/multi-pie-chart.util.js.map +1 -0
- package/dist/utils/pie-chart.util.d.mts +18 -0
- package/dist/utils/pie-chart.util.js +82 -0
- package/dist/utils/pie-chart.util.js.map +1 -0
- package/dist/utils/pie.util.d.mts +8 -0
- package/dist/utils/pie.util.js +19 -0
- package/dist/utils/pie.util.js.map +1 -0
- package/package.json +6 -6
- package/dist/components/bar-chart-body.js.map +0 -1
- package/dist/components/bar-chart.js.map +0 -1
- package/dist/components/chart-axes.js.map +0 -1
- package/dist/components/line-chart-body.js.map +0 -1
- package/dist/components/line-chart.js.map +0 -1
- package/dist/components/multi-bar-chart-body.js.map +0 -1
- package/dist/components/multi-bar-chart.js.map +0 -1
- package/dist/components/multi-line-chart-body.js.map +0 -1
- package/dist/components/multi-line-chart.js.map +0 -1
package/dist/types/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./axis.types\";\nexport * from \"./bar.types\";\nexport * from \"./bar-chart.types\";\nexport * from \"./common.types\";\nexport * from \"./grid.types\";\nexport * from \"./label.types\";\nexport * from \"./line.types\";\nexport * from \"./line-chart.types\";\nexport * from \"./multi-bar-chart.types\";\nexport * from \"./multi-line-chart.types\";\nexport * from \"./style.types\";\nexport * from \"./use-bar-chart.types\";\nexport * from \"./use-line-chart.types\";\nexport * from \"./use-multi-bar-chart.types\";\nexport * from \"./use-multi-line-chart.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./axis.types\";\nexport * from \"./bar.types\";\nexport * from \"./bar-chart.types\";\nexport * from \"./common.types\";\nexport * from \"./grid.types\";\nexport * from \"./label.types\";\nexport * from \"./line.types\";\nexport * from \"./line-chart.types\";\nexport * from \"./multi-bar-chart.types\";\nexport * from \"./multi-line-chart.types\";\nexport * from \"./multi-pie-chart.types\";\nexport * from \"./pie.types\";\nexport * from \"./pie-chart.types\";\nexport * from \"./style.types\";\nexport * from \"./use-bar-chart.types\";\nexport * from \"./use-line-chart.types\";\nexport * from \"./use-multi-bar-chart.types\";\nexport * from \"./use-multi-line-chart.types\";\nexport * from \"./use-multi-pie-chart.types\";\nexport * from \"./use-pie-chart.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PieChartCommonProps, PieChartPoint, PieChartSliceOptions, PieChartCoordinate } from './pie-chart.types.mjs';
|
|
2
|
+
import './common.types.mjs';
|
|
3
|
+
import './style.types.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
|
|
6
|
+
interface MultiPieChartSeries {
|
|
7
|
+
id: string;
|
|
8
|
+
data: readonly PieChartPoint[];
|
|
9
|
+
slice?: PieChartSliceOptions;
|
|
10
|
+
}
|
|
11
|
+
interface MultiPieChartSeriesModel extends MultiPieChartSeries {
|
|
12
|
+
coordinates: readonly PieChartCoordinate[];
|
|
13
|
+
total: number;
|
|
14
|
+
}
|
|
15
|
+
interface MultiPieChartProps extends PieChartCommonProps {
|
|
16
|
+
series: readonly MultiPieChartSeries[];
|
|
17
|
+
ringPadding?: number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export type { MultiPieChartProps, MultiPieChartSeries, MultiPieChartSeriesModel };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=multi-pie-chart.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ChartInsets, ChartPoint } from './common.types.mjs';
|
|
2
|
+
import './style.types.mjs';
|
|
3
|
+
import '@shopify/react-native-skia';
|
|
4
|
+
|
|
5
|
+
interface PieChartPoint {
|
|
6
|
+
id: string;
|
|
7
|
+
value: number;
|
|
8
|
+
color?: string;
|
|
9
|
+
}
|
|
10
|
+
interface PieChartCoordinate {
|
|
11
|
+
datum: PieChartPoint;
|
|
12
|
+
index: number;
|
|
13
|
+
center: ChartPoint;
|
|
14
|
+
startAngle: number;
|
|
15
|
+
endAngle: number;
|
|
16
|
+
padAngle: number;
|
|
17
|
+
padRadius: number;
|
|
18
|
+
innerRadius: number;
|
|
19
|
+
outerRadius: number;
|
|
20
|
+
}
|
|
21
|
+
interface PieChartSliceOptions {
|
|
22
|
+
visible?: boolean;
|
|
23
|
+
colors?: readonly string[];
|
|
24
|
+
opacity?: number;
|
|
25
|
+
cornerRadius?: number;
|
|
26
|
+
strokeColor?: string;
|
|
27
|
+
strokeWidth?: number;
|
|
28
|
+
}
|
|
29
|
+
interface PieChartCommonProps {
|
|
30
|
+
insets?: Partial<ChartInsets>;
|
|
31
|
+
innerRadius?: number;
|
|
32
|
+
outerRadius?: number;
|
|
33
|
+
padAngle?: number;
|
|
34
|
+
startAngle?: number;
|
|
35
|
+
endAngle?: number;
|
|
36
|
+
}
|
|
37
|
+
interface PieChartProps extends PieChartCommonProps {
|
|
38
|
+
data: readonly PieChartPoint[];
|
|
39
|
+
slice?: PieChartSliceOptions;
|
|
40
|
+
}
|
|
41
|
+
interface PieChartModel {
|
|
42
|
+
coordinates: readonly PieChartCoordinate[];
|
|
43
|
+
total: number;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export type { PieChartCommonProps, PieChartCoordinate, PieChartModel, PieChartPoint, PieChartProps, PieChartSliceOptions };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=pie-chart.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { PieChartSliceOptions, PieChartCoordinate } from './pie-chart.types.mjs';
|
|
2
|
+
import './common.types.mjs';
|
|
3
|
+
import './style.types.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
|
|
6
|
+
interface PieProps extends PieChartSliceOptions {
|
|
7
|
+
coordinates: readonly PieChartCoordinate[];
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export type { PieProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=pie.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ChartRect } from './common.types.mjs';
|
|
2
|
+
import { MultiPieChartProps, MultiPieChartSeriesModel } from './multi-pie-chart.types.mjs';
|
|
3
|
+
import { PieChartCommonProps } from './pie-chart.types.mjs';
|
|
4
|
+
import './style.types.mjs';
|
|
5
|
+
import '@shopify/react-native-skia';
|
|
6
|
+
|
|
7
|
+
interface UseMultiPieChartProps extends Pick<PieChartCommonProps, "endAngle" | "innerRadius" | "outerRadius" | "padAngle" | "startAngle">, Pick<MultiPieChartProps, "ringPadding" | "series"> {
|
|
8
|
+
plot: ChartRect;
|
|
9
|
+
}
|
|
10
|
+
interface UseMultiPieChartResult {
|
|
11
|
+
series: readonly MultiPieChartSeriesModel[];
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type { UseMultiPieChartProps, UseMultiPieChartResult };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=use-multi-pie-chart.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ChartRect } from './common.types.mjs';
|
|
2
|
+
import { PieChartCommonProps, PieChartPoint, PieChartModel } from './pie-chart.types.mjs';
|
|
3
|
+
import './style.types.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
|
|
6
|
+
interface UsePieChartProps extends Pick<PieChartCommonProps, "endAngle" | "innerRadius" | "outerRadius" | "padAngle" | "startAngle"> {
|
|
7
|
+
data: readonly PieChartPoint[];
|
|
8
|
+
plot: ChartRect;
|
|
9
|
+
}
|
|
10
|
+
type UsePieChartResult = PieChartModel;
|
|
11
|
+
|
|
12
|
+
export type { UsePieChartProps, UsePieChartResult };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=use-pie-chart.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/utils/index.d.mts
CHANGED
|
@@ -8,6 +8,9 @@ export { createLineChartCoordinates, createLineChartModel } from './line-chart.u
|
|
|
8
8
|
export { createDrawableMultiLineChartSeries } from './multi-line-chart.util.mjs';
|
|
9
9
|
export { createDrawableMultiBarChartSeries, createMultiBarChartModel } from './multi-bar-chart.util.mjs';
|
|
10
10
|
export { createParagraphBuilder } from './paragraph-builder.util.mjs';
|
|
11
|
+
export { createMultiPieChartModel } from './multi-pie-chart.util.mjs';
|
|
12
|
+
export { createPieChartModel, createPieChartRadii, normalizeRadiusRatio } from './pie-chart.util.mjs';
|
|
13
|
+
export { createPieSlicePath } from './pie.util.mjs';
|
|
11
14
|
import '../types/axis.types.mjs';
|
|
12
15
|
import '@shopify/react-native-skia';
|
|
13
16
|
import '@impulse-ui-native/theme';
|
|
@@ -21,3 +24,7 @@ import '../types/use-line-chart.types.mjs';
|
|
|
21
24
|
import '../types/multi-line-chart.types.mjs';
|
|
22
25
|
import '../types/multi-bar-chart.types.mjs';
|
|
23
26
|
import '../types/use-multi-bar-chart.types.mjs';
|
|
27
|
+
import '../types/use-multi-pie-chart.types.mjs';
|
|
28
|
+
import '../types/multi-pie-chart.types.mjs';
|
|
29
|
+
import '../types/pie-chart.types.mjs';
|
|
30
|
+
import '../types/use-pie-chart.types.mjs';
|
package/dist/utils/index.js
CHANGED
|
@@ -28,6 +28,13 @@ import {
|
|
|
28
28
|
createMultiBarChartModel
|
|
29
29
|
} from "./multi-bar-chart.util";
|
|
30
30
|
import { createParagraphBuilder } from "./paragraph-builder.util";
|
|
31
|
+
import { createMultiPieChartModel } from "./multi-pie-chart.util";
|
|
32
|
+
import {
|
|
33
|
+
createPieChartModel,
|
|
34
|
+
createPieChartRadii,
|
|
35
|
+
normalizeRadiusRatio
|
|
36
|
+
} from "./pie-chart.util";
|
|
37
|
+
import { createPieSlicePath } from "./pie.util";
|
|
31
38
|
export {
|
|
32
39
|
createAxisTicks,
|
|
33
40
|
createBarChartCoordinates,
|
|
@@ -41,7 +48,11 @@ export {
|
|
|
41
48
|
createLineChartModel,
|
|
42
49
|
createLinePath,
|
|
43
50
|
createMultiBarChartModel,
|
|
51
|
+
createMultiPieChartModel,
|
|
44
52
|
createParagraphBuilder,
|
|
53
|
+
createPieChartModel,
|
|
54
|
+
createPieChartRadii,
|
|
55
|
+
createPieSlicePath,
|
|
45
56
|
createVerticalGridPath,
|
|
46
57
|
createXAxisLabelRect,
|
|
47
58
|
createXAxisLayout,
|
|
@@ -51,6 +62,7 @@ export {
|
|
|
51
62
|
formatAxisTick,
|
|
52
63
|
getLabelTextAlign,
|
|
53
64
|
getLabelY,
|
|
65
|
+
normalizeRadiusRatio,
|
|
54
66
|
resolveGridLineOptions
|
|
55
67
|
};
|
|
56
68
|
//# sourceMappingURL=index.js.map
|
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export {\n createAxisTicks,\n createXAxisLayout,\n createXAxisLabelRect,\n createYAxisLayout,\n createYAxisLabelRect,\n formatAxisTick,\n} from \"./axis.util\";\nexport {\n createBarChartCoordinates,\n createBarChartModel,\n} from \"./bar-chart.util\";\nexport { createChartLayout, createInsetRect } from \"./chart-layout.util\";\nexport {\n createHorizontalGridPath,\n createVerticalGridPath,\n resolveGridLineOptions,\n} from \"./grid.util\";\nexport { getLabelTextAlign, getLabelY } from \"./label.util\";\nexport { createLinePath, fitLineCoordinatesToRect } from \"./line.util\";\nexport {\n createLineChartCoordinates,\n createLineChartModel,\n} from \"./line-chart.util\";\nexport { createDrawableMultiLineChartSeries } from \"./multi-line-chart.util\";\nexport {\n createDrawableMultiBarChartSeries,\n createMultiBarChartModel,\n} from \"./multi-bar-chart.util\";\nexport { createParagraphBuilder } from \"./paragraph-builder.util\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,uBAAuB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,gBAAgB,gCAAgC;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0CAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["export {\n createAxisTicks,\n createXAxisLayout,\n createXAxisLabelRect,\n createYAxisLayout,\n createYAxisLabelRect,\n formatAxisTick,\n} from \"./axis.util\";\nexport {\n createBarChartCoordinates,\n createBarChartModel,\n} from \"./bar-chart.util\";\nexport { createChartLayout, createInsetRect } from \"./chart-layout.util\";\nexport {\n createHorizontalGridPath,\n createVerticalGridPath,\n resolveGridLineOptions,\n} from \"./grid.util\";\nexport { getLabelTextAlign, getLabelY } from \"./label.util\";\nexport { createLinePath, fitLineCoordinatesToRect } from \"./line.util\";\nexport {\n createLineChartCoordinates,\n createLineChartModel,\n} from \"./line-chart.util\";\nexport { createDrawableMultiLineChartSeries } from \"./multi-line-chart.util\";\nexport {\n createDrawableMultiBarChartSeries,\n createMultiBarChartModel,\n} from \"./multi-bar-chart.util\";\nexport { createParagraphBuilder } from \"./paragraph-builder.util\";\nexport { createMultiPieChartModel } from \"./multi-pie-chart.util\";\nexport {\n createPieChartModel,\n createPieChartRadii,\n normalizeRadiusRatio,\n} from \"./pie-chart.util\";\nexport { createPieSlicePath } from \"./pie.util\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,uBAAuB;AACnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,gBAAgB,gCAAgC;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0CAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { UseMultiPieChartProps, UseMultiPieChartResult } from '../types/use-multi-pie-chart.types.mjs';
|
|
2
|
+
import '../types/common.types.mjs';
|
|
3
|
+
import '../types/style.types.mjs';
|
|
4
|
+
import '@shopify/react-native-skia';
|
|
5
|
+
import '../types/multi-pie-chart.types.mjs';
|
|
6
|
+
import '../types/pie-chart.types.mjs';
|
|
7
|
+
|
|
8
|
+
declare function createMultiPieChartModel(props: UseMultiPieChartProps): UseMultiPieChartResult;
|
|
9
|
+
|
|
10
|
+
export { createMultiPieChartModel };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { MultiPieDefaultRingPadding } from "../constants";
|
|
2
|
+
import { createPieChartModel, createPieChartRadii } from "./pie-chart.util";
|
|
3
|
+
function createMultiPieChartModel(props) {
|
|
4
|
+
const { innerRadius, outerRadius } = createPieChartRadii(
|
|
5
|
+
props.plot,
|
|
6
|
+
props.innerRadius,
|
|
7
|
+
props.outerRadius
|
|
8
|
+
);
|
|
9
|
+
const ringCount = props.series.length;
|
|
10
|
+
const radialSpan = outerRadius - innerRadius;
|
|
11
|
+
const ringPadding = ringCount <= 1 ? 0 : Math.min(
|
|
12
|
+
normalizeRingPadding(props.ringPadding),
|
|
13
|
+
radialSpan / (ringCount - 1)
|
|
14
|
+
);
|
|
15
|
+
const availableWidth = Math.max(
|
|
16
|
+
0,
|
|
17
|
+
radialSpan - ringPadding * Math.max(0, ringCount - 1)
|
|
18
|
+
);
|
|
19
|
+
const ringWidth = ringCount === 0 ? 0 : availableWidth / ringCount;
|
|
20
|
+
const maximumRadius = Math.max(
|
|
21
|
+
0,
|
|
22
|
+
Math.min(props.plot.width, props.plot.height) / 2
|
|
23
|
+
);
|
|
24
|
+
const series = props.series.map(
|
|
25
|
+
(currentSeries, index) => {
|
|
26
|
+
const seriesOuterRadius = outerRadius - index * (ringWidth + ringPadding);
|
|
27
|
+
const seriesInnerRadius = Math.max(
|
|
28
|
+
innerRadius,
|
|
29
|
+
seriesOuterRadius - ringWidth
|
|
30
|
+
);
|
|
31
|
+
const model = createPieChartModel({
|
|
32
|
+
data: currentSeries.data,
|
|
33
|
+
plot: props.plot,
|
|
34
|
+
startAngle: props.startAngle,
|
|
35
|
+
endAngle: props.endAngle,
|
|
36
|
+
padAngle: props.padAngle,
|
|
37
|
+
innerRadius: maximumRadius === 0 ? 0 : seriesInnerRadius / maximumRadius,
|
|
38
|
+
outerRadius: maximumRadius === 0 ? 0 : seriesOuterRadius / maximumRadius
|
|
39
|
+
});
|
|
40
|
+
return {
|
|
41
|
+
...currentSeries,
|
|
42
|
+
...model,
|
|
43
|
+
coordinates: model.coordinates.map((coordinate) => ({
|
|
44
|
+
...coordinate,
|
|
45
|
+
padRadius: outerRadius
|
|
46
|
+
}))
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
return { series };
|
|
51
|
+
}
|
|
52
|
+
function normalizeRingPadding(value) {
|
|
53
|
+
const padding = value === void 0 || !Number.isFinite(value) ? MultiPieDefaultRingPadding : value;
|
|
54
|
+
return Math.max(0, padding);
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
createMultiPieChartModel
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=multi-pie-chart.util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/multi-pie-chart.util.ts"],"sourcesContent":["import { MultiPieDefaultRingPadding } from \"../constants\";\nimport {\n MultiPieChartSeriesModel,\n UseMultiPieChartProps,\n UseMultiPieChartResult,\n} from \"../types\";\nimport { createPieChartModel, createPieChartRadii } from \"./pie-chart.util\";\n\nexport function createMultiPieChartModel(\n props: UseMultiPieChartProps,\n): UseMultiPieChartResult {\n const { innerRadius, outerRadius } = createPieChartRadii(\n props.plot,\n props.innerRadius,\n props.outerRadius,\n );\n const ringCount = props.series.length;\n const radialSpan = outerRadius - innerRadius;\n const ringPadding =\n ringCount <= 1\n ? 0\n : Math.min(\n normalizeRingPadding(props.ringPadding),\n radialSpan / (ringCount - 1),\n );\n const availableWidth = Math.max(\n 0,\n radialSpan - ringPadding * Math.max(0, ringCount - 1),\n );\n const ringWidth = ringCount === 0 ? 0 : availableWidth / ringCount;\n const maximumRadius = Math.max(\n 0,\n Math.min(props.plot.width, props.plot.height) / 2,\n );\n\n const series: MultiPieChartSeriesModel[] = props.series.map(\n (currentSeries, index) => {\n const seriesOuterRadius = outerRadius - index * (ringWidth + ringPadding);\n const seriesInnerRadius = Math.max(\n innerRadius,\n seriesOuterRadius - ringWidth,\n );\n const model = createPieChartModel({\n data: currentSeries.data,\n plot: props.plot,\n startAngle: props.startAngle,\n endAngle: props.endAngle,\n padAngle: props.padAngle,\n innerRadius:\n maximumRadius === 0 ? 0 : seriesInnerRadius / maximumRadius,\n outerRadius:\n maximumRadius === 0 ? 0 : seriesOuterRadius / maximumRadius,\n });\n\n return {\n ...currentSeries,\n ...model,\n coordinates: model.coordinates.map((coordinate) => ({\n ...coordinate,\n padRadius: outerRadius,\n })),\n };\n },\n );\n\n return { series };\n}\n\nfunction normalizeRingPadding(value: number | undefined): number {\n const padding =\n value === undefined || !Number.isFinite(value)\n ? MultiPieDefaultRingPadding\n : value;\n\n return Math.max(0, padding);\n}\n"],"mappings":"AAAA,SAAS,kCAAkC;AAM3C,SAAS,qBAAqB,2BAA2B;AAElD,SAAS,yBACd,OACwB;AACxB,QAAM,EAAE,aAAa,YAAY,IAAI;AAAA,IACnC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACA,QAAM,YAAY,MAAM,OAAO;AAC/B,QAAM,aAAa,cAAc;AACjC,QAAM,cACJ,aAAa,IACT,IACA,KAAK;AAAA,IACH,qBAAqB,MAAM,WAAW;AAAA,IACtC,cAAc,YAAY;AAAA,EAC5B;AACN,QAAM,iBAAiB,KAAK;AAAA,IAC1B;AAAA,IACA,aAAa,cAAc,KAAK,IAAI,GAAG,YAAY,CAAC;AAAA,EACtD;AACA,QAAM,YAAY,cAAc,IAAI,IAAI,iBAAiB;AACzD,QAAM,gBAAgB,KAAK;AAAA,IACzB;AAAA,IACA,KAAK,IAAI,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,IAAI;AAAA,EAClD;AAEA,QAAM,SAAqC,MAAM,OAAO;AAAA,IACtD,CAAC,eAAe,UAAU;AACxB,YAAM,oBAAoB,cAAc,SAAS,YAAY;AAC7D,YAAM,oBAAoB,KAAK;AAAA,QAC7B;AAAA,QACA,oBAAoB;AAAA,MACtB;AACA,YAAM,QAAQ,oBAAoB;AAAA,QAChC,MAAM,cAAc;AAAA,QACpB,MAAM,MAAM;AAAA,QACZ,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM;AAAA,QAChB,UAAU,MAAM;AAAA,QAChB,aACE,kBAAkB,IAAI,IAAI,oBAAoB;AAAA,QAChD,aACE,kBAAkB,IAAI,IAAI,oBAAoB;AAAA,MAClD,CAAC;AAED,aAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa,MAAM,YAAY,IAAI,CAAC,gBAAgB;AAAA,UAClD,GAAG;AAAA,UACH,WAAW;AAAA,QACb,EAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,OAAO;AAClB;AAEA,SAAS,qBAAqB,OAAmC;AAC/D,QAAM,UACJ,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IACzC,6BACA;AAEN,SAAO,KAAK,IAAI,GAAG,OAAO;AAC5B;","names":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChartRect } from '../types/common.types.mjs';
|
|
2
|
+
import { PieChartModel } from '../types/pie-chart.types.mjs';
|
|
3
|
+
import { UsePieChartProps } from '../types/use-pie-chart.types.mjs';
|
|
4
|
+
import '../types/style.types.mjs';
|
|
5
|
+
import '@shopify/react-native-skia';
|
|
6
|
+
|
|
7
|
+
declare function createPieChartModel(props: UsePieChartProps): PieChartModel;
|
|
8
|
+
declare function createPieChartRadii(plot: ChartRect, innerRadiusRatio?: number, outerRadiusRatio?: number): {
|
|
9
|
+
center: {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
};
|
|
13
|
+
innerRadius: number;
|
|
14
|
+
outerRadius: number;
|
|
15
|
+
};
|
|
16
|
+
declare function normalizeRadiusRatio(value: number): number;
|
|
17
|
+
|
|
18
|
+
export { createPieChartModel, createPieChartRadii, normalizeRadiusRatio };
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { pie } from "d3-shape";
|
|
2
|
+
import {
|
|
3
|
+
PieDefaultEndAngle,
|
|
4
|
+
PieDefaultInnerRadius,
|
|
5
|
+
PieDefaultOuterRadius,
|
|
6
|
+
PieDefaultPadAngle,
|
|
7
|
+
PieDefaultStartAngle
|
|
8
|
+
} from "../constants/pie.constants";
|
|
9
|
+
const DegreesToRadians = Math.PI / 180;
|
|
10
|
+
function createPieChartModel(props) {
|
|
11
|
+
const data = props.data.filter(isValidPieChartPoint);
|
|
12
|
+
const total = data.reduce((sum, datum) => sum + datum.value, 0);
|
|
13
|
+
const { center, innerRadius, outerRadius } = createPieChartRadii(
|
|
14
|
+
props.plot,
|
|
15
|
+
props.innerRadius,
|
|
16
|
+
props.outerRadius
|
|
17
|
+
);
|
|
18
|
+
if (data.length === 0 || outerRadius <= 0) {
|
|
19
|
+
return { coordinates: [], total: 0 };
|
|
20
|
+
}
|
|
21
|
+
const startAngle = degreesToRadians(
|
|
22
|
+
normalizeAngle(props.startAngle, PieDefaultStartAngle)
|
|
23
|
+
);
|
|
24
|
+
const endAngle = degreesToRadians(
|
|
25
|
+
normalizeAngle(props.endAngle, PieDefaultEndAngle)
|
|
26
|
+
);
|
|
27
|
+
const padAngle = Math.max(
|
|
28
|
+
0,
|
|
29
|
+
degreesToRadians(normalizeAngle(props.padAngle, PieDefaultPadAngle))
|
|
30
|
+
);
|
|
31
|
+
const arcs = pie().value((datum) => datum.value).sort(null).startAngle(startAngle).endAngle(endAngle).padAngle(padAngle)(data);
|
|
32
|
+
const coordinates = arcs.map((currentArc) => ({
|
|
33
|
+
datum: currentArc.data,
|
|
34
|
+
index: currentArc.index,
|
|
35
|
+
center,
|
|
36
|
+
startAngle: currentArc.startAngle,
|
|
37
|
+
endAngle: currentArc.endAngle,
|
|
38
|
+
padAngle: currentArc.padAngle,
|
|
39
|
+
padRadius: outerRadius,
|
|
40
|
+
innerRadius,
|
|
41
|
+
outerRadius
|
|
42
|
+
}));
|
|
43
|
+
return { coordinates, total };
|
|
44
|
+
}
|
|
45
|
+
function createPieChartRadii(plot, innerRadiusRatio = PieDefaultInnerRadius, outerRadiusRatio = PieDefaultOuterRadius) {
|
|
46
|
+
const maximumRadius = Math.max(0, Math.min(plot.width, plot.height) / 2);
|
|
47
|
+
const resolvedOuterRatio = normalizeRadiusRatio(
|
|
48
|
+
Number.isFinite(outerRadiusRatio) ? outerRadiusRatio : PieDefaultOuterRadius
|
|
49
|
+
);
|
|
50
|
+
const resolvedInnerRatio = Math.min(
|
|
51
|
+
normalizeRadiusRatio(
|
|
52
|
+
Number.isFinite(innerRadiusRatio) ? innerRadiusRatio : PieDefaultInnerRadius
|
|
53
|
+
),
|
|
54
|
+
resolvedOuterRatio
|
|
55
|
+
);
|
|
56
|
+
return {
|
|
57
|
+
center: {
|
|
58
|
+
x: plot.x + plot.width / 2,
|
|
59
|
+
y: plot.y + plot.height / 2
|
|
60
|
+
},
|
|
61
|
+
innerRadius: maximumRadius * resolvedInnerRatio,
|
|
62
|
+
outerRadius: maximumRadius * resolvedOuterRatio
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
function normalizeRadiusRatio(value) {
|
|
66
|
+
return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
|
|
67
|
+
}
|
|
68
|
+
function degreesToRadians(value) {
|
|
69
|
+
return value * DegreesToRadians;
|
|
70
|
+
}
|
|
71
|
+
function normalizeAngle(value, fallback) {
|
|
72
|
+
return value === void 0 || !Number.isFinite(value) ? fallback : value;
|
|
73
|
+
}
|
|
74
|
+
function isValidPieChartPoint(datum) {
|
|
75
|
+
return Number.isFinite(datum.value) && datum.value > 0;
|
|
76
|
+
}
|
|
77
|
+
export {
|
|
78
|
+
createPieChartModel,
|
|
79
|
+
createPieChartRadii,
|
|
80
|
+
normalizeRadiusRatio
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=pie-chart.util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/pie-chart.util.ts"],"sourcesContent":["import { pie } from \"d3-shape\";\n\nimport {\n PieDefaultEndAngle,\n PieDefaultInnerRadius,\n PieDefaultOuterRadius,\n PieDefaultPadAngle,\n PieDefaultStartAngle,\n} from \"../constants/pie.constants\";\nimport {\n ChartRect,\n PieChartCoordinate,\n PieChartModel,\n PieChartPoint,\n UsePieChartProps,\n} from \"../types\";\n\nconst DegreesToRadians = Math.PI / 180;\n\nexport function createPieChartModel(props: UsePieChartProps): PieChartModel {\n const data = props.data.filter(isValidPieChartPoint);\n const total = data.reduce((sum, datum) => sum + datum.value, 0);\n const { center, innerRadius, outerRadius } = createPieChartRadii(\n props.plot,\n props.innerRadius,\n props.outerRadius,\n );\n\n if (data.length === 0 || outerRadius <= 0) {\n return { coordinates: [], total: 0 };\n }\n\n const startAngle = degreesToRadians(\n normalizeAngle(props.startAngle, PieDefaultStartAngle),\n );\n const endAngle = degreesToRadians(\n normalizeAngle(props.endAngle, PieDefaultEndAngle),\n );\n const padAngle = Math.max(\n 0,\n degreesToRadians(normalizeAngle(props.padAngle, PieDefaultPadAngle)),\n );\n const arcs = pie<PieChartPoint>()\n .value((datum) => datum.value)\n .sort(null)\n .startAngle(startAngle)\n .endAngle(endAngle)\n .padAngle(padAngle)(data);\n const coordinates: PieChartCoordinate[] = arcs.map((currentArc) => ({\n datum: currentArc.data,\n index: currentArc.index,\n center,\n startAngle: currentArc.startAngle,\n endAngle: currentArc.endAngle,\n padAngle: currentArc.padAngle,\n padRadius: outerRadius,\n innerRadius,\n outerRadius,\n }));\n\n return { coordinates, total };\n}\n\nexport function createPieChartRadii(\n plot: ChartRect,\n innerRadiusRatio = PieDefaultInnerRadius,\n outerRadiusRatio = PieDefaultOuterRadius,\n) {\n const maximumRadius = Math.max(0, Math.min(plot.width, plot.height) / 2);\n const resolvedOuterRatio = normalizeRadiusRatio(\n Number.isFinite(outerRadiusRatio)\n ? outerRadiusRatio\n : PieDefaultOuterRadius,\n );\n const resolvedInnerRatio = Math.min(\n normalizeRadiusRatio(\n Number.isFinite(innerRadiusRatio)\n ? innerRadiusRatio\n : PieDefaultInnerRadius,\n ),\n resolvedOuterRatio,\n );\n\n return {\n center: {\n x: plot.x + plot.width / 2,\n y: plot.y + plot.height / 2,\n },\n innerRadius: maximumRadius * resolvedInnerRatio,\n outerRadius: maximumRadius * resolvedOuterRatio,\n };\n}\n\nexport function normalizeRadiusRatio(value: number): number {\n return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;\n}\n\nfunction degreesToRadians(value: number): number {\n return value * DegreesToRadians;\n}\n\nfunction normalizeAngle(value: number | undefined, fallback: number): number {\n return value === undefined || !Number.isFinite(value) ? fallback : value;\n}\n\nfunction isValidPieChartPoint(datum: PieChartPoint): boolean {\n return Number.isFinite(datum.value) && datum.value > 0;\n}\n"],"mappings":"AAAA,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,MAAM,mBAAmB,KAAK,KAAK;AAE5B,SAAS,oBAAoB,OAAwC;AAC1E,QAAM,OAAO,MAAM,KAAK,OAAO,oBAAoB;AACnD,QAAM,QAAQ,KAAK,OAAO,CAAC,KAAK,UAAU,MAAM,MAAM,OAAO,CAAC;AAC9D,QAAM,EAAE,QAAQ,aAAa,YAAY,IAAI;AAAA,IAC3C,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,MAAI,KAAK,WAAW,KAAK,eAAe,GAAG;AACzC,WAAO,EAAE,aAAa,CAAC,GAAG,OAAO,EAAE;AAAA,EACrC;AAEA,QAAM,aAAa;AAAA,IACjB,eAAe,MAAM,YAAY,oBAAoB;AAAA,EACvD;AACA,QAAM,WAAW;AAAA,IACf,eAAe,MAAM,UAAU,kBAAkB;AAAA,EACnD;AACA,QAAM,WAAW,KAAK;AAAA,IACpB;AAAA,IACA,iBAAiB,eAAe,MAAM,UAAU,kBAAkB,CAAC;AAAA,EACrE;AACA,QAAM,OAAO,IAAmB,EAC7B,MAAM,CAAC,UAAU,MAAM,KAAK,EAC5B,KAAK,IAAI,EACT,WAAW,UAAU,EACrB,SAAS,QAAQ,EACjB,SAAS,QAAQ,EAAE,IAAI;AAC1B,QAAM,cAAoC,KAAK,IAAI,CAAC,gBAAgB;AAAA,IAClE,OAAO,WAAW;AAAA,IAClB,OAAO,WAAW;AAAA,IAClB;AAAA,IACA,YAAY,WAAW;AAAA,IACvB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,EAAE;AAEF,SAAO,EAAE,aAAa,MAAM;AAC9B;AAEO,SAAS,oBACd,MACA,mBAAmB,uBACnB,mBAAmB,uBACnB;AACA,QAAM,gBAAgB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,IAAI,CAAC;AACvE,QAAM,qBAAqB;AAAA,IACzB,OAAO,SAAS,gBAAgB,IAC5B,mBACA;AAAA,EACN;AACA,QAAM,qBAAqB,KAAK;AAAA,IAC9B;AAAA,MACE,OAAO,SAAS,gBAAgB,IAC5B,mBACA;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,GAAG,KAAK,IAAI,KAAK,QAAQ;AAAA,MACzB,GAAG,KAAK,IAAI,KAAK,SAAS;AAAA,IAC5B;AAAA,IACA,aAAa,gBAAgB;AAAA,IAC7B,aAAa,gBAAgB;AAAA,EAC/B;AACF;AAEO,SAAS,qBAAqB,OAAuB;AAC1D,SAAO,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI;AACpE;AAEA,SAAS,iBAAiB,OAAuB;AAC/C,SAAO,QAAQ;AACjB;AAEA,SAAS,eAAe,OAA2B,UAA0B;AAC3E,SAAO,UAAU,UAAa,CAAC,OAAO,SAAS,KAAK,IAAI,WAAW;AACrE;AAEA,SAAS,qBAAqB,OAA+B;AAC3D,SAAO,OAAO,SAAS,MAAM,KAAK,KAAK,MAAM,QAAQ;AACvD;","names":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { SkPath } from '@shopify/react-native-skia';
|
|
2
|
+
import { PieChartCoordinate } from '../types/pie-chart.types.mjs';
|
|
3
|
+
import '../types/common.types.mjs';
|
|
4
|
+
import '../types/style.types.mjs';
|
|
5
|
+
|
|
6
|
+
declare function createPieSlicePath(coordinate: PieChartCoordinate, cornerRadius?: number): SkPath | null;
|
|
7
|
+
|
|
8
|
+
export { createPieSlicePath };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Skia } from "@shopify/react-native-skia";
|
|
2
|
+
import { arc } from "d3-shape";
|
|
3
|
+
function createPieSlicePath(coordinate, cornerRadius = 0) {
|
|
4
|
+
const pathData = arc().cornerRadius(Math.max(0, cornerRadius)).padRadius(coordinate.padRadius)({
|
|
5
|
+
innerRadius: coordinate.innerRadius,
|
|
6
|
+
outerRadius: coordinate.outerRadius,
|
|
7
|
+
startAngle: coordinate.startAngle,
|
|
8
|
+
endAngle: coordinate.endAngle,
|
|
9
|
+
padAngle: coordinate.padAngle
|
|
10
|
+
});
|
|
11
|
+
if (!pathData) {
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
return Skia.Path.MakeFromSVGString(pathData);
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
createPieSlicePath
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=pie.util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/pie.util.ts"],"sourcesContent":["import { Skia, SkPath } from \"@shopify/react-native-skia\";\nimport { arc } from \"d3-shape\";\n\nimport { PieChartCoordinate } from \"../types\";\n\nexport function createPieSlicePath(\n coordinate: PieChartCoordinate,\n cornerRadius = 0,\n): SkPath | null {\n const pathData = arc()\n .cornerRadius(Math.max(0, cornerRadius))\n .padRadius(coordinate.padRadius)({\n innerRadius: coordinate.innerRadius,\n outerRadius: coordinate.outerRadius,\n startAngle: coordinate.startAngle,\n endAngle: coordinate.endAngle,\n padAngle: coordinate.padAngle,\n });\n\n if (!pathData) {\n return null;\n }\n\n return Skia.Path.MakeFromSVGString(pathData);\n}\n"],"mappings":"AAAA,SAAS,YAAoB;AAC7B,SAAS,WAAW;AAIb,SAAS,mBACd,YACA,eAAe,GACA;AACf,QAAM,WAAW,IAAI,EAClB,aAAa,KAAK,IAAI,GAAG,YAAY,CAAC,EACtC,UAAU,WAAW,SAAS,EAAE;AAAA,IACjC,aAAa,WAAW;AAAA,IACxB,aAAa,WAAW;AAAA,IACxB,YAAY,WAAW;AAAA,IACvB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB,CAAC;AAED,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SAAO,KAAK,KAAK,kBAAkB,QAAQ;AAC7C;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/charts",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"d3-shape": "3.2.0",
|
|
26
26
|
"d3-time": "3.1.0",
|
|
27
27
|
"d3-time-format": "4.1.0",
|
|
28
|
-
"@impulse-ui-native/primitives": "2.1.
|
|
29
|
-
"@impulse-ui-native/core": "2.1.
|
|
30
|
-
"@impulse-ui-native/theme": "2.1.
|
|
28
|
+
"@impulse-ui-native/primitives": "2.1.3",
|
|
29
|
+
"@impulse-ui-native/core": "2.1.3",
|
|
30
|
+
"@impulse-ui-native/theme": "2.1.3"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@shopify/react-native-skia": "2.6.2",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"react": "19.2.3",
|
|
44
44
|
"react-native": "0.86.2",
|
|
45
45
|
"typescript": "~6.0.3",
|
|
46
|
-
"@impulse-ui-native/
|
|
46
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
47
47
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
48
|
-
"@impulse-ui-native/
|
|
48
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@shopify/react-native-skia": ">=2",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/bar-chart-body.tsx"],"sourcesContent":["import { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useBarChart, useChartLayout } from \"../hooks\";\nimport { BarChartProps, ChartSize, ChartXValue } from \"../types\";\nimport { ChartAxes } from \"./chart-axes\";\nimport { Bar } from \"./primitives\";\n\ninterface BarChartBodyProps<X extends ChartXValue> extends BarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const BarChartBody = memo(function BarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: BarChartBodyProps<X>) {\n const {\n bar,\n categoryPadding,\n data,\n fontManager,\n grid,\n insets,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets);\n const { coordinates, xScale, xTicks, yScale, yTicks } = useBarChart({\n categoryPadding,\n data,\n plot: layout.plot,\n xAxis,\n yAxis,\n });\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n <Bar coordinates={coordinates} {...bar} />\n </Group>\n </>\n );\n});\n"],"mappings":"AAwCI,mBACE,KADF;AAxCJ,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,aAAa,sBAAsB;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AAOb,MAAM,eAAe,KAAK,SAAS,sBAExC,OAA6B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,YAAY;AAAA,IAClE;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,OAAI,aAA2B,GAAG,KAAK,GAC1C;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { BarChartProps, ChartXValue } from \"../types\";\nimport { BarChartBody } from \"./bar-chart-body\";\n\nexport const BarChart = memo(function BarChart<X extends ChartXValue = string>(\n props: BarChartProps<X>,\n) {\n const theme = useTheme();\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <BarChartBody {...props} size={size} theme={theme} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAEtB,MAAM,WAAW,KAAK,SAASA,UACpC,OACA;AACA,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,gBAAc,GAAG,OAAO,MAAY,OAAc,GACrD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["BarChart"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/chart-axes.tsx"],"sourcesContent":["import { SkTypefaceFontProvider } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport {\n ChartGridOptions,\n ChartLayout,\n ChartXAxisOptions,\n ChartXValue,\n ChartYAxisOptions,\n LineChartScale,\n} from \"../types\";\nimport { Grid, XAxis, YAxis } from \"./primitives\";\n\ninterface ChartAxesProps<X extends ChartXValue> {\n fontManager?: SkTypefaceFontProvider;\n grid?: ChartGridOptions;\n layout: ChartLayout;\n theme: AppTheme;\n xAxis?: ChartXAxisOptions<X>;\n xScale: LineChartScale<X>;\n xTicks: readonly X[];\n yAxis?: ChartYAxisOptions;\n yScale: LineChartScale<number>;\n yTicks: readonly number[];\n}\n\nexport const ChartAxes = memo(function ChartAxes<\n X extends ChartXValue = number,\n>(props: ChartAxesProps<X>) {\n const {\n fontManager,\n grid,\n layout,\n theme,\n xAxis,\n xScale,\n xTicks,\n yAxis,\n yScale,\n yTicks,\n } = props;\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n </>\n );\n});\n"],"mappings":"AA8CI,mBAEI,KAFJ;AA5CJ,SAAS,YAAY;AAWrB,SAAS,MAAM,OAAO,aAAa;AAe5B,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,KACN;AAEJ,CAAC;","names":["ChartAxes"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { LineDefaultWidth } from \"../constants\";\nimport { useChartLayout, useLineChart } from \"../hooks\";\nimport { ChartSize, ChartXValue, LineChartProps } from \"../types\";\nimport { createInsetRect, fitLineCoordinatesToRect } from \"../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"./primitives\";\n\ninterface LineChartBodyProps<X extends ChartXValue> extends LineChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const LineChartBody = memo(function LineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: LineChartBodyProps<X>) {\n const {\n data,\n fontManager,\n grid,\n insets,\n line,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets);\n\n const { coordinates, xScale, xTicks, yScale, yTicks } = useLineChart({\n data,\n plot: layout.plot,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const linePlot = useMemo(\n () => createInsetRect(layout.plot, (line?.width ?? LineDefaultWidth) / 2),\n [layout.plot, line?.width],\n );\n\n const lineCoordinates = useMemo(\n () => fitLineCoordinatesToRect(coordinates, layout.plot, linePlot),\n [coordinates, layout.plot, linePlot],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n <Line coordinates={lineCoordinates} {...line} />\n </Group>\n </>\n );\n});\n"],"mappings":"AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,oBAAoB;AAE7C,SAAS,iBAAiB,gCAAgC;AAC1D,SAAS,MAAM,MAAM,OAAO,aAAa;AAOlC,MAAM,gBAAgB,KAAK,SAAS,uBAEzC,OAA8B;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAE1C,QAAM,EAAE,aAAa,QAAQ,QAAQ,QAAQ,OAAO,IAAI,aAAa;AAAA,IACnE;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW;AAAA,IACf,MAAM,gBAAgB,OAAO,OAAO,MAAM,SAAS,oBAAoB,CAAC;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,KAAK;AAAA,EAC3B;AAEA,QAAM,kBAAkB;AAAA,IACtB,MAAM,yBAAyB,aAAa,OAAO,MAAM,QAAQ;AAAA,IACjE,CAAC,aAAa,OAAO,MAAM,QAAQ;AAAA,EACrC;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MAClB,8BAAC,QAAK,aAAa,iBAAkB,GAAG,MAAM,GAChD;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/line-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { ChartXValue, LineChartProps } from \"../types\";\nimport { LineChartBody } from \"./line-chart-body\";\n\nexport const LineChart = memo(function LineChart<\n X extends ChartXValue = number,\n>(props: LineChartProps<X>) {\n const theme = useTheme();\n\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <LineChartBody {...props} size={size} theme={theme} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAmBM;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAEvB,MAAM,YAAY,KAAK,SAASA,WAErC,OAA0B;AAC1B,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,iBAAe,GAAG,OAAO,MAAY,OAAc,GACtD;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["LineChart"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-bar-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { AppTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartLayout, useMultiBarChart } from \"../hooks\";\nimport { ChartSize, ChartXValue, MultiBarChartProps } from \"../types\";\nimport { createDrawableMultiBarChartSeries } from \"../utils\";\nimport { ChartAxes } from \"./chart-axes\";\nimport { Bar } from \"./primitives\";\n\ninterface MultiBarChartBodyProps<\n X extends ChartXValue,\n> extends MultiBarChartProps<X> {\n size: ChartSize;\n theme: AppTheme;\n}\n\nexport const MultiBarChartBody = memo(function MultiBarChartBodyComponent<\n X extends ChartXValue = string,\n>(props: MultiBarChartBodyProps<X>) {\n const {\n categoryPadding,\n fontManager,\n grid,\n insets,\n series,\n seriesPadding,\n size,\n theme,\n xAxis,\n yAxis,\n } = props;\n const layout = useChartLayout(size, insets);\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiBarChart({\n categoryPadding,\n plot: layout.plot,\n series,\n seriesPadding,\n xAxis,\n yAxis,\n });\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiBarChartSeries(currentSeries, index),\n ),\n [seriesModels],\n );\n\n return (\n <>\n <ChartAxes\n fontManager={fontManager}\n grid={grid}\n layout={layout}\n theme={theme}\n xAxis={xAxis}\n xScale={xScale}\n xTicks={xTicks}\n yAxis={yAxis}\n yScale={yScale}\n yTicks={yTicks}\n />\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Bar\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.bar}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"AA0DI,mBACE,KADF;AA1DJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAGrB,SAAS,gBAAgB,wBAAwB;AAEjD,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AASb,MAAM,oBAAoB,KAAK,SAAS,2BAE7C,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAC1C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAAA,IACnB;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,kCAAkC,eAAe,KAAK;AAAA,IACxD;AAAA,IACF,CAAC,YAAY;AAAA,EACf;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-bar-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { ChartXValue, MultiBarChartProps } from \"../types\";\nimport { MultiBarChartBody } from \"./multi-bar-chart-body\";\n\nexport const MultiBarChart = memo(function MultiBarChart<\n X extends ChartXValue = string,\n>(props: MultiBarChartProps<X>) {\n const theme = useTheme();\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <MultiBarChartBody {...props} size={size} theme={theme} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,KAAK,SAASA,eAEzC,OAA8B;AAC9B,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,qBAAmB,GAAG,OAAO,MAAY,OAAc,GAC1D;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiBarChart"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-line-chart-body.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartLayout, useMultiLineChart } from \"../hooks\";\nimport { ChartXValue, MultiLineChartBodyProps } from \"../types\";\nimport { createDrawableMultiLineChartSeries } from \"../utils\";\nimport { Grid, Line, XAxis, YAxis } from \"./primitives\";\n\nexport const MultiLineChartBody = memo(function MultiLineChartBodyComponent<\n X extends ChartXValue = number,\n>(props: MultiLineChartBodyProps<X>) {\n const {\n fontManager,\n grid,\n insets,\n series,\n size,\n theme,\n xAxis,\n xScaleType,\n yAxis,\n } = props;\n\n const layout = useChartLayout(size, insets);\n\n const {\n series: seriesModels,\n xScale,\n xTicks,\n yScale,\n yTicks,\n } = useMultiLineChart({\n plot: layout.plot,\n series,\n xAxis,\n xScaleType,\n yAxis,\n });\n\n const drawableSeries = useMemo(\n () =>\n seriesModels.map((currentSeries, index) =>\n createDrawableMultiLineChartSeries(currentSeries, index, layout.plot),\n ),\n [layout.plot, seriesModels],\n );\n\n const isGridStyle = grid !== undefined;\n\n return (\n <>\n {isGridStyle ? (\n <Grid\n options={grid}\n plot={layout.plot}\n theme={theme}\n xTicks={xTicks}\n xScale={xScale}\n yTicks={yTicks}\n yScale={yScale}\n />\n ) : null}\n\n {xAxis?.visible !== false ? (\n <XAxis\n ticks={xTicks}\n scale={xScale}\n plot={layout.plot}\n region={layout.xAxis}\n theme={theme}\n options={xAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n {yAxis?.visible !== false ? (\n <YAxis\n ticks={yTicks}\n scale={yScale}\n plot={layout.plot}\n region={layout.yAxis}\n theme={theme}\n options={yAxis}\n fontManager={fontManager}\n lineVisible={!isGridStyle}\n tickVisible={!isGridStyle}\n />\n ) : null}\n\n <Group clip={layout.plot}>\n {drawableSeries.map((currentSeries) => (\n <Line\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.line}\n />\n ))}\n </Group>\n </>\n );\n});\n"],"mappings":"AAoDI,mBAEI,KAFJ;AApDJ,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,SAAS,YAAY;AAErB,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,0CAA0C;AACnD,SAAS,MAAM,MAAM,OAAO,aAAa;AAElC,MAAM,qBAAqB,KAAK,SAAS,4BAE9C,OAAmC;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,eAAe,MAAM,MAAM;AAE1C,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MACE,aAAa;AAAA,MAAI,CAAC,eAAe,UAC/B,mCAAmC,eAAe,OAAO,OAAO,IAAI;AAAA,IACtE;AAAA,IACF,CAAC,OAAO,MAAM,YAAY;AAAA,EAC5B;AAEA,QAAM,cAAc,SAAS;AAE7B,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,OAAO;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEH,OAAO,YAAY,QAClB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM,OAAO;AAAA,QACb,QAAQ,OAAO;AAAA,QACf;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,aAAa,CAAC;AAAA,QACd,aAAa,CAAC;AAAA;AAAA,IAChB,IACE;AAAA,IAEJ,oBAAC,SAAM,MAAM,OAAO,MACjB,yBAAe,IAAI,CAAC,kBACnB;AAAA,MAAC;AAAA;AAAA,QAEC,aAAa,cAAc;AAAA,QAC1B,GAAG,cAAc;AAAA;AAAA,MAFb,cAAc;AAAA,IAGrB,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-line-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useChartCanvas } from \"../hooks\";\nimport { ChartXValue, MultiLineChartProps } from \"../types\";\nimport { MultiLineChartBody } from \"./multi-line-chart-body\";\n\nexport const MultiLineChart = memo(function MultiLineChart<\n X extends ChartXValue = number,\n>(props: MultiLineChartProps<X>) {\n const theme = useTheme();\n\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <MultiLineChartBody {...props} size={size} theme={theme} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAmBM;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,KAAK,SAASA,gBAE1C,OAA+B;AAC/B,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,sBAAoB,GAAG,OAAO,MAAY,OAAc,GAC3D;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiLineChart"]}
|