@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
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "@impulse-ui-native/core";
|
|
3
|
+
import { useChartLayout, useMultiPieChart } from "../../hooks";
|
|
4
|
+
import { Pie } from "../primitives";
|
|
5
|
+
const MultiPieChartBody = memo(function MultiPieChartBody2(props) {
|
|
6
|
+
const {
|
|
7
|
+
endAngle,
|
|
8
|
+
innerRadius,
|
|
9
|
+
insets,
|
|
10
|
+
outerRadius,
|
|
11
|
+
padAngle,
|
|
12
|
+
ringPadding,
|
|
13
|
+
series,
|
|
14
|
+
size,
|
|
15
|
+
startAngle
|
|
16
|
+
} = props;
|
|
17
|
+
const layout = useChartLayout(size, insets);
|
|
18
|
+
const { series: seriesModels } = useMultiPieChart({
|
|
19
|
+
endAngle,
|
|
20
|
+
innerRadius,
|
|
21
|
+
outerRadius,
|
|
22
|
+
padAngle,
|
|
23
|
+
plot: layout.plot,
|
|
24
|
+
ringPadding,
|
|
25
|
+
series,
|
|
26
|
+
startAngle
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx(Fragment, { children: seriesModels.map((currentSeries) => /* @__PURE__ */ jsx(
|
|
29
|
+
Pie,
|
|
30
|
+
{
|
|
31
|
+
coordinates: currentSeries.coordinates,
|
|
32
|
+
...currentSeries.slice
|
|
33
|
+
},
|
|
34
|
+
currentSeries.id
|
|
35
|
+
)) });
|
|
36
|
+
});
|
|
37
|
+
export {
|
|
38
|
+
MultiPieChartBody
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=multi-pie-chart-body.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/multi-pie-chart/multi-pie-chart-body.tsx"],"sourcesContent":["import { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartLayout, useMultiPieChart } from \"../../hooks\";\nimport { ChartSize, MultiPieChartProps } from \"../../types\";\nimport { Pie } from \"../primitives\";\n\ninterface MultiPieChartBodyProps extends MultiPieChartProps {\n size: ChartSize;\n}\n\nexport const MultiPieChartBody = memo(function MultiPieChartBody(\n props: MultiPieChartBodyProps,\n) {\n const {\n endAngle,\n innerRadius,\n insets,\n outerRadius,\n padAngle,\n ringPadding,\n series,\n size,\n startAngle,\n } = props;\n const layout = useChartLayout(size, insets);\n const { series: seriesModels } = useMultiPieChart({\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot: layout.plot,\n ringPadding,\n series,\n startAngle,\n });\n\n return (\n <>\n {seriesModels.map((currentSeries) => (\n <Pie\n key={currentSeries.id}\n coordinates={currentSeries.coordinates}\n {...currentSeries.slice}\n />\n ))}\n </>\n );\n});\n"],"mappings":"AAqCI,mBAEI,WAFJ;AArCJ,SAAS,YAAY;AAErB,SAAS,gBAAgB,wBAAwB;AAEjD,SAAS,WAAW;AAMb,MAAM,oBAAoB,KAAK,SAASA,mBAC7C,OACA;AACA,QAAM;AAAA,IACJ;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,QAAQ,aAAa,IAAI,iBAAiB;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gCACG,uBAAa,IAAI,CAAC,kBACjB;AAAA,IAAC;AAAA;AAAA,MAEC,aAAa,cAAc;AAAA,MAC1B,GAAG,cAAc;AAAA;AAAA,IAFb,cAAc;AAAA,EAGrB,CACD,GACH;AAEJ,CAAC;","names":["MultiPieChartBody"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { MultiPieChartProps } from '../../types/multi-pie-chart.types.mjs';
|
|
3
|
+
import '../../types/pie-chart.types.mjs';
|
|
4
|
+
import '../../types/common.types.mjs';
|
|
5
|
+
import '../../types/style.types.mjs';
|
|
6
|
+
import '@shopify/react-native-skia';
|
|
7
|
+
|
|
8
|
+
declare const MultiPieChart: (props: MultiPieChartProps) => react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { MultiPieChart };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { StyleSheet } from "react-native";
|
|
3
|
+
import { Canvas } from "@shopify/react-native-skia";
|
|
4
|
+
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import { useChartCanvas } from "../../hooks";
|
|
6
|
+
import { MultiPieChartBody } from "./multi-pie-chart-body";
|
|
7
|
+
const MultiPieChart = memo(function MultiPieChart2(props) {
|
|
8
|
+
const { ref, size } = useChartCanvas();
|
|
9
|
+
return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(MultiPieChartBody, { ...props, size }) });
|
|
10
|
+
});
|
|
11
|
+
const styles = StyleSheet.create({
|
|
12
|
+
container: {
|
|
13
|
+
flex: 1
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
export {
|
|
17
|
+
MultiPieChart
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=multi-pie-chart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/multi-pie-chart/multi-pie-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { MultiPieChartProps } from \"../../types\";\nimport { MultiPieChartBody } from \"./multi-pie-chart-body\";\n\nexport const MultiPieChart = memo(function MultiPieChart(\n props: MultiPieChartProps,\n) {\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <MultiPieChartBody {...props} size={size} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAgBM;AAhBN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAE/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,KAAK,SAASA,eACzC,OACA;AACA,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,qBAAmB,GAAG,OAAO,MAAY,GAC5C;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["MultiPieChart"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/pie-chart/index.ts"],"sourcesContent":["export { PieChart } from \"./pie-chart\";\n"],"mappings":"AAAA,SAAS,gBAAgB;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ChartSize } from '../../types/common.types.mjs';
|
|
3
|
+
import { PieChartProps } from '../../types/pie-chart.types.mjs';
|
|
4
|
+
import '../../types/style.types.mjs';
|
|
5
|
+
import '@shopify/react-native-skia';
|
|
6
|
+
|
|
7
|
+
interface PieChartBodyProps extends PieChartProps {
|
|
8
|
+
size: ChartSize;
|
|
9
|
+
}
|
|
10
|
+
declare const PieChartBody: (props: PieChartBodyProps) => react_jsx_runtime.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { PieChartBody };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "@impulse-ui-native/core";
|
|
3
|
+
import { useChartLayout, usePieChart } from "../../hooks";
|
|
4
|
+
import { Pie } from "../primitives";
|
|
5
|
+
const PieChartBody = memo(function PieChartBody2(props) {
|
|
6
|
+
const {
|
|
7
|
+
data,
|
|
8
|
+
endAngle,
|
|
9
|
+
innerRadius,
|
|
10
|
+
insets,
|
|
11
|
+
outerRadius,
|
|
12
|
+
padAngle,
|
|
13
|
+
size,
|
|
14
|
+
slice,
|
|
15
|
+
startAngle
|
|
16
|
+
} = props;
|
|
17
|
+
const layout = useChartLayout(size, insets);
|
|
18
|
+
const { coordinates } = usePieChart({
|
|
19
|
+
data,
|
|
20
|
+
endAngle,
|
|
21
|
+
innerRadius,
|
|
22
|
+
outerRadius,
|
|
23
|
+
padAngle,
|
|
24
|
+
plot: layout.plot,
|
|
25
|
+
startAngle
|
|
26
|
+
});
|
|
27
|
+
return /* @__PURE__ */ jsx(Pie, { coordinates, ...slice });
|
|
28
|
+
});
|
|
29
|
+
export {
|
|
30
|
+
PieChartBody
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=pie-chart-body.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/pie-chart/pie-chart-body.tsx"],"sourcesContent":["import { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartLayout, usePieChart } from \"../../hooks\";\nimport { ChartSize, PieChartProps } from \"../../types\";\nimport { Pie } from \"../primitives\";\n\ninterface PieChartBodyProps extends PieChartProps {\n size: ChartSize;\n}\n\nexport const PieChartBody = memo(function PieChartBody(\n props: PieChartBodyProps,\n) {\n const {\n data,\n endAngle,\n innerRadius,\n insets,\n outerRadius,\n padAngle,\n size,\n slice,\n startAngle,\n } = props;\n const layout = useChartLayout(size, insets);\n const { coordinates } = usePieChart({\n data,\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot: layout.plot,\n startAngle,\n });\n\n return <Pie coordinates={coordinates} {...slice} />;\n});\n"],"mappings":"AAmCS;AAnCT,SAAS,YAAY;AAErB,SAAS,gBAAgB,mBAAmB;AAE5C,SAAS,WAAW;AAMb,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM;AAAA,IACJ;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,YAAY,IAAI,YAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,OAAI,aAA2B,GAAG,OAAO;AACnD,CAAC;","names":["PieChartBody"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { PieChartProps } from '../../types/pie-chart.types.mjs';
|
|
3
|
+
import '../../types/common.types.mjs';
|
|
4
|
+
import '../../types/style.types.mjs';
|
|
5
|
+
import '@shopify/react-native-skia';
|
|
6
|
+
|
|
7
|
+
declare const PieChart: (props: PieChartProps) => react_jsx_runtime.JSX.Element;
|
|
8
|
+
|
|
9
|
+
export { PieChart };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { StyleSheet } from "react-native";
|
|
3
|
+
import { Canvas } from "@shopify/react-native-skia";
|
|
4
|
+
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import { useChartCanvas } from "../../hooks";
|
|
6
|
+
import { PieChartBody } from "./pie-chart-body";
|
|
7
|
+
const PieChart = memo(function PieChart2(props) {
|
|
8
|
+
const { ref, size } = useChartCanvas();
|
|
9
|
+
return /* @__PURE__ */ jsx(Canvas, { ref, style: styles.container, children: /* @__PURE__ */ jsx(PieChartBody, { ...props, size }) });
|
|
10
|
+
});
|
|
11
|
+
const styles = StyleSheet.create({
|
|
12
|
+
container: {
|
|
13
|
+
flex: 1
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
export {
|
|
17
|
+
PieChart
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/pie-chart/pie-chart.tsx"],"sourcesContent":["import { StyleSheet } from \"react-native\";\nimport { Canvas } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport { useChartCanvas } from \"../../hooks\";\nimport { PieChartProps } from \"../../types\";\nimport { PieChartBody } from \"./pie-chart-body\";\n\nexport const PieChart = memo(function PieChart(props: PieChartProps) {\n const { ref, size } = useChartCanvas();\n\n return (\n <Canvas ref={ref} style={styles.container}>\n <PieChartBody {...props} size={size} />\n </Canvas>\n );\n});\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"AAcM;AAdN,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAEtB,MAAM,WAAW,KAAK,SAASA,UAAS,OAAsB;AACnE,QAAM,EAAE,KAAK,KAAK,IAAI,eAAe;AAErC,SACE,oBAAC,UAAO,KAAU,OAAO,OAAO,WAC9B,8BAAC,gBAAc,GAAG,OAAO,MAAY,GACvC;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;","names":["PieChart"]}
|
|
@@ -2,6 +2,7 @@ export { Bar } from './bar.mjs';
|
|
|
2
2
|
export { Grid } from './grid.mjs';
|
|
3
3
|
export { Label } from './label.mjs';
|
|
4
4
|
export { Line } from './line.mjs';
|
|
5
|
+
export { Pie } from './pie.mjs';
|
|
5
6
|
export { XAxis } from './x-axis.mjs';
|
|
6
7
|
export { YAxis } from './y-axis.mjs';
|
|
7
8
|
import 'react/jsx-runtime';
|
|
@@ -14,4 +15,6 @@ import '../../types/bar.types.mjs';
|
|
|
14
15
|
import '../../types/bar-chart.types.mjs';
|
|
15
16
|
import '../../types/label.types.mjs';
|
|
16
17
|
import '../../types/line.types.mjs';
|
|
18
|
+
import '../../types/pie.types.mjs';
|
|
19
|
+
import '../../types/pie-chart.types.mjs';
|
|
17
20
|
import '../../types/axis.types.mjs';
|
|
@@ -2,6 +2,7 @@ import { Bar } from "./bar";
|
|
|
2
2
|
import { Grid } from "./grid";
|
|
3
3
|
import { Label } from "./label";
|
|
4
4
|
import { Line } from "./line";
|
|
5
|
+
import { Pie } from "./pie";
|
|
5
6
|
import { XAxis } from "./x-axis";
|
|
6
7
|
import { YAxis } from "./y-axis";
|
|
7
8
|
export {
|
|
@@ -9,6 +10,7 @@ export {
|
|
|
9
10
|
Grid,
|
|
10
11
|
Label,
|
|
11
12
|
Line,
|
|
13
|
+
Pie,
|
|
12
14
|
XAxis,
|
|
13
15
|
YAxis
|
|
14
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export { Bar } from \"./bar\";\nexport { Grid } from \"./grid\";\nexport { Label } from \"./label\";\nexport { Line } from \"./line\";\nexport { XAxis } from \"./x-axis\";\nexport { YAxis } from \"./y-axis\";\n"],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,aAAa;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export { Bar } from \"./bar\";\nexport { Grid } from \"./grid\";\nexport { Label } from \"./label\";\nexport { Line } from \"./line\";\nexport { Pie } from \"./pie\";\nexport { XAxis } from \"./x-axis\";\nexport { YAxis } from \"./y-axis\";\n"],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB,SAAS,aAAa;AACtB,SAAS,aAAa;","names":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { PieProps } from '../../types/pie.types.mjs';
|
|
3
|
+
import '../../types/pie-chart.types.mjs';
|
|
4
|
+
import '../../types/common.types.mjs';
|
|
5
|
+
import '../../types/style.types.mjs';
|
|
6
|
+
import '@shopify/react-native-skia';
|
|
7
|
+
|
|
8
|
+
declare const Pie: (props: PieProps) => react_jsx_runtime.JSX.Element | null;
|
|
9
|
+
|
|
10
|
+
export { Pie };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { Group, Path } from "@shopify/react-native-skia";
|
|
4
|
+
import { memo } from "@impulse-ui-native/core";
|
|
5
|
+
import {
|
|
6
|
+
PieDefaultColor,
|
|
7
|
+
PieDefaultColors,
|
|
8
|
+
PieDefaultCornerRadius,
|
|
9
|
+
PieDefaultOpacity,
|
|
10
|
+
PieDefaultStrokeWidth
|
|
11
|
+
} from "../../constants";
|
|
12
|
+
import { createPieSlicePath } from "../../utils";
|
|
13
|
+
const Pie = memo(function Pie2(props) {
|
|
14
|
+
const {
|
|
15
|
+
colors = PieDefaultColors,
|
|
16
|
+
coordinates,
|
|
17
|
+
cornerRadius = PieDefaultCornerRadius,
|
|
18
|
+
opacity = PieDefaultOpacity,
|
|
19
|
+
strokeColor,
|
|
20
|
+
strokeWidth = PieDefaultStrokeWidth,
|
|
21
|
+
visible = true
|
|
22
|
+
} = props;
|
|
23
|
+
const slices = useMemo(
|
|
24
|
+
() => coordinates.map((coordinate) => ({
|
|
25
|
+
color: coordinate.datum.color ?? colors[coordinate.index % colors.length] ?? PieDefaultColor,
|
|
26
|
+
coordinate,
|
|
27
|
+
path: createPieSlicePath(coordinate, cornerRadius)
|
|
28
|
+
})),
|
|
29
|
+
[colors, coordinates, cornerRadius]
|
|
30
|
+
);
|
|
31
|
+
if (!visible) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
return /* @__PURE__ */ jsx(Group, { children: slices.map(
|
|
35
|
+
({ color, coordinate, path }) => path ? /* @__PURE__ */ jsxs(
|
|
36
|
+
Group,
|
|
37
|
+
{
|
|
38
|
+
transform: [
|
|
39
|
+
{ translateX: coordinate.center.x },
|
|
40
|
+
{ translateY: coordinate.center.y }
|
|
41
|
+
],
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ jsx(Path, { path, color, opacity }),
|
|
44
|
+
strokeColor && strokeWidth > 0 ? /* @__PURE__ */ jsx(
|
|
45
|
+
Path,
|
|
46
|
+
{
|
|
47
|
+
path,
|
|
48
|
+
color: strokeColor,
|
|
49
|
+
opacity,
|
|
50
|
+
style: "stroke",
|
|
51
|
+
strokeWidth
|
|
52
|
+
}
|
|
53
|
+
) : null
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
coordinate.datum.id
|
|
57
|
+
) : null
|
|
58
|
+
) });
|
|
59
|
+
});
|
|
60
|
+
export {
|
|
61
|
+
Pie
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=pie.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/primitives/pie.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Group, Path } from \"@shopify/react-native-skia\";\n\nimport { memo } from \"@impulse-ui-native/core\";\n\nimport {\n PieDefaultColor,\n PieDefaultColors,\n PieDefaultCornerRadius,\n PieDefaultOpacity,\n PieDefaultStrokeWidth,\n} from \"../../constants\";\nimport { PieProps } from \"../../types\";\nimport { createPieSlicePath } from \"../../utils\";\n\nexport const Pie = memo(function Pie(props: PieProps) {\n const {\n colors = PieDefaultColors,\n coordinates,\n cornerRadius = PieDefaultCornerRadius,\n opacity = PieDefaultOpacity,\n strokeColor,\n strokeWidth = PieDefaultStrokeWidth,\n visible = true,\n } = props;\n const slices = useMemo(\n () =>\n coordinates.map((coordinate) => ({\n color:\n coordinate.datum.color ??\n colors[coordinate.index % colors.length] ??\n PieDefaultColor,\n coordinate,\n path: createPieSlicePath(coordinate, cornerRadius),\n })),\n [colors, coordinates, cornerRadius],\n );\n\n if (!visible) {\n return null;\n }\n\n return (\n <Group>\n {slices.map(({ color, coordinate, path }) =>\n path ? (\n <Group\n key={coordinate.datum.id}\n transform={[\n { translateX: coordinate.center.x },\n { translateY: coordinate.center.y },\n ]}\n >\n <Path path={path} color={color} opacity={opacity} />\n {strokeColor && strokeWidth > 0 ? (\n <Path\n path={path}\n color={strokeColor}\n opacity={opacity}\n style=\"stroke\"\n strokeWidth={strokeWidth}\n />\n ) : null}\n </Group>\n ) : null,\n )}\n </Group>\n );\n});\n"],"mappings":"AA8CU,SAOE,KAPF;AA9CV,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AAE5B,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AAE5B,MAAM,MAAM,KAAK,SAASA,KAAI,OAAiB;AACpD,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,IAAI;AACJ,QAAM,SAAS;AAAA,IACb,MACE,YAAY,IAAI,CAAC,gBAAgB;AAAA,MAC/B,OACE,WAAW,MAAM,SACjB,OAAO,WAAW,QAAQ,OAAO,MAAM,KACvC;AAAA,MACF;AAAA,MACA,MAAM,mBAAmB,YAAY,YAAY;AAAA,IACnD,EAAE;AAAA,IACJ,CAAC,QAAQ,aAAa,YAAY;AAAA,EACpC;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SACE,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,YAAY,KAAK,MACrC,OACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT,EAAE,YAAY,WAAW,OAAO,EAAE;AAAA,UAClC,EAAE,YAAY,WAAW,OAAO,EAAE;AAAA,QACpC;AAAA,QAEA;AAAA,8BAAC,QAAK,MAAY,OAAc,SAAkB;AAAA,UACjD,eAAe,cAAc,IAC5B;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,OAAM;AAAA,cACN;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,MAfC,WAAW,MAAM;AAAA,IAgBxB,IACE;AAAA,EACN,GACF;AAEJ,CAAC;","names":["Pie"]}
|
|
@@ -5,6 +5,7 @@ export { GridDefaultOpacity, GridDefaultWidth, GridDefaultXVisible, GridDefaultY
|
|
|
5
5
|
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature } from './label.constants.mjs';
|
|
6
6
|
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth } from './line.constants.mjs';
|
|
7
7
|
export { LineChartDefaultNumericDomain, LineChartDefaultTickCount } from './line-chart.constants.mjs';
|
|
8
|
+
export { MultiPieDefaultRingPadding, PieDefaultColor, PieDefaultColors, PieDefaultCornerRadius, PieDefaultEndAngle, PieDefaultInnerRadius, PieDefaultOpacity, PieDefaultOuterRadius, PieDefaultPadAngle, PieDefaultStartAngle, PieDefaultStrokeWidth } from './pie.constants.mjs';
|
|
8
9
|
import '@impulse-ui-native/theme';
|
|
9
10
|
import '@shopify/react-native-skia';
|
|
10
11
|
import '../types/label.types.mjs';
|
package/dist/constants/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./axis.constants\";\nexport * from \"./bar.constants\";\nexport * from \"./bar-chart.constants\";\nexport * from \"./grid.constants\";\nexport * from \"./label.constants\";\nexport * from \"./line.constants\";\nexport * from \"./line-chart.constants\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./axis.constants\";\nexport * from \"./bar.constants\";\nexport * from \"./bar-chart.constants\";\nexport * from \"./grid.constants\";\nexport * from \"./label.constants\";\nexport * from \"./line.constants\";\nexport * from \"./line-chart.constants\";\nexport * from \"./pie.constants\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as _impulse_ui_native_theme from '@impulse-ui-native/theme';
|
|
2
|
+
|
|
3
|
+
declare const PieDefaultColors: _impulse_ui_native_theme.ChartColorPalette;
|
|
4
|
+
declare const PieDefaultColor: string;
|
|
5
|
+
declare const PieDefaultOpacity = 1;
|
|
6
|
+
declare const PieDefaultInnerRadius = 0;
|
|
7
|
+
declare const PieDefaultOuterRadius = 1;
|
|
8
|
+
declare const PieDefaultPadAngle = 0;
|
|
9
|
+
declare const PieDefaultStartAngle = 0;
|
|
10
|
+
declare const PieDefaultEndAngle = 360;
|
|
11
|
+
declare const PieDefaultCornerRadius = 0;
|
|
12
|
+
declare const PieDefaultStrokeWidth = 0;
|
|
13
|
+
declare const MultiPieDefaultRingPadding = 2;
|
|
14
|
+
|
|
15
|
+
export { MultiPieDefaultRingPadding, PieDefaultColor, PieDefaultColors, PieDefaultCornerRadius, PieDefaultEndAngle, PieDefaultInnerRadius, PieDefaultOpacity, PieDefaultOuterRadius, PieDefaultPadAngle, PieDefaultStartAngle, PieDefaultStrokeWidth };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ChartColorTokens } from "@impulse-ui-native/theme";
|
|
2
|
+
const PieDefaultColors = ChartColorTokens;
|
|
3
|
+
const PieDefaultColor = ChartColorTokens[0];
|
|
4
|
+
const PieDefaultOpacity = 1;
|
|
5
|
+
const PieDefaultInnerRadius = 0;
|
|
6
|
+
const PieDefaultOuterRadius = 1;
|
|
7
|
+
const PieDefaultPadAngle = 0;
|
|
8
|
+
const PieDefaultStartAngle = 0;
|
|
9
|
+
const PieDefaultEndAngle = 360;
|
|
10
|
+
const PieDefaultCornerRadius = 0;
|
|
11
|
+
const PieDefaultStrokeWidth = 0;
|
|
12
|
+
const MultiPieDefaultRingPadding = 2;
|
|
13
|
+
export {
|
|
14
|
+
MultiPieDefaultRingPadding,
|
|
15
|
+
PieDefaultColor,
|
|
16
|
+
PieDefaultColors,
|
|
17
|
+
PieDefaultCornerRadius,
|
|
18
|
+
PieDefaultEndAngle,
|
|
19
|
+
PieDefaultInnerRadius,
|
|
20
|
+
PieDefaultOpacity,
|
|
21
|
+
PieDefaultOuterRadius,
|
|
22
|
+
PieDefaultPadAngle,
|
|
23
|
+
PieDefaultStartAngle,
|
|
24
|
+
PieDefaultStrokeWidth
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=pie.constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/pie.constants.ts"],"sourcesContent":["import { ChartColorTokens } from \"@impulse-ui-native/theme\";\n\nexport const PieDefaultColors = ChartColorTokens;\nexport const PieDefaultColor = ChartColorTokens[0];\nexport const PieDefaultOpacity = 1;\nexport const PieDefaultInnerRadius = 0;\nexport const PieDefaultOuterRadius = 1;\nexport const PieDefaultPadAngle = 0;\nexport const PieDefaultStartAngle = 0;\nexport const PieDefaultEndAngle = 360;\nexport const PieDefaultCornerRadius = 0;\nexport const PieDefaultStrokeWidth = 0;\nexport const MultiPieDefaultRingPadding = 2;\n"],"mappings":"AAAA,SAAS,wBAAwB;AAE1B,MAAM,mBAAmB;AACzB,MAAM,kBAAkB,iBAAiB,CAAC;AAC1C,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAC3B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;","names":[]}
|
package/dist/hooks/index.d.mts
CHANGED
|
@@ -4,6 +4,8 @@ export { useBarChart } from './use-bar-chart.hook.mjs';
|
|
|
4
4
|
export { useLineChart } from './use-line-chart.hook.mjs';
|
|
5
5
|
export { useMultiBarChart } from './use-multi-bar-chart.hook.mjs';
|
|
6
6
|
export { useMultiLineChart } from './use-multi-line-chart.hook.mjs';
|
|
7
|
+
export { useMultiPieChart } from './use-multi-pie-chart.hook.mjs';
|
|
8
|
+
export { usePieChart } from './use-pie-chart.hook.mjs';
|
|
7
9
|
import 'react';
|
|
8
10
|
import '@shopify/react-native-skia';
|
|
9
11
|
import '../types/common.types.mjs';
|
|
@@ -17,3 +19,7 @@ import '../types/use-multi-bar-chart.types.mjs';
|
|
|
17
19
|
import '../types/multi-bar-chart.types.mjs';
|
|
18
20
|
import '../types/use-multi-line-chart.types.mjs';
|
|
19
21
|
import '../types/multi-line-chart.types.mjs';
|
|
22
|
+
import '../types/use-multi-pie-chart.types.mjs';
|
|
23
|
+
import '../types/multi-pie-chart.types.mjs';
|
|
24
|
+
import '../types/pie-chart.types.mjs';
|
|
25
|
+
import '../types/use-pie-chart.types.mjs';
|
package/dist/hooks/index.js
CHANGED
|
@@ -4,12 +4,16 @@ import { useBarChart } from "./use-bar-chart.hook";
|
|
|
4
4
|
import { useLineChart } from "./use-line-chart.hook";
|
|
5
5
|
import { useMultiBarChart } from "./use-multi-bar-chart.hook";
|
|
6
6
|
import { useMultiLineChart } from "./use-multi-line-chart.hook";
|
|
7
|
+
import { useMultiPieChart } from "./use-multi-pie-chart.hook";
|
|
8
|
+
import { usePieChart } from "./use-pie-chart.hook";
|
|
7
9
|
export {
|
|
8
10
|
useBarChart,
|
|
9
11
|
useChartCanvas,
|
|
10
12
|
useChartLayout,
|
|
11
13
|
useLineChart,
|
|
12
14
|
useMultiBarChart,
|
|
13
|
-
useMultiLineChart
|
|
15
|
+
useMultiLineChart,
|
|
16
|
+
useMultiPieChart,
|
|
17
|
+
usePieChart
|
|
14
18
|
};
|
|
15
19
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useChartCanvas } from \"./use-chart-canvas.hook\";\nexport { useChartLayout } from \"./use-chart-layout.hook\";\nexport { useBarChart } from \"./use-bar-chart.hook\";\nexport { useLineChart } from \"./use-line-chart.hook\";\nexport { useMultiBarChart } from \"./use-multi-bar-chart.hook\";\nexport { useMultiLineChart } from \"./use-multi-line-chart.hook\";\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useChartCanvas } from \"./use-chart-canvas.hook\";\nexport { useChartLayout } from \"./use-chart-layout.hook\";\nexport { useBarChart } from \"./use-bar-chart.hook\";\nexport { useLineChart } from \"./use-line-chart.hook\";\nexport { useMultiBarChart } from \"./use-multi-bar-chart.hook\";\nexport { useMultiLineChart } from \"./use-multi-line-chart.hook\";\nexport { useMultiPieChart } from \"./use-multi-pie-chart.hook\";\nexport { usePieChart } from \"./use-pie-chart.hook\";\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;","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 useMultiPieChart(props: UseMultiPieChartProps): UseMultiPieChartResult;
|
|
9
|
+
|
|
10
|
+
export { useMultiPieChart };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { createMultiPieChartModel } from "../utils";
|
|
3
|
+
function useMultiPieChart(props) {
|
|
4
|
+
const {
|
|
5
|
+
endAngle,
|
|
6
|
+
innerRadius,
|
|
7
|
+
outerRadius,
|
|
8
|
+
padAngle,
|
|
9
|
+
plot,
|
|
10
|
+
ringPadding,
|
|
11
|
+
series,
|
|
12
|
+
startAngle
|
|
13
|
+
} = props;
|
|
14
|
+
return useMemo(
|
|
15
|
+
() => createMultiPieChartModel({
|
|
16
|
+
endAngle,
|
|
17
|
+
innerRadius,
|
|
18
|
+
outerRadius,
|
|
19
|
+
padAngle,
|
|
20
|
+
plot,
|
|
21
|
+
ringPadding,
|
|
22
|
+
series,
|
|
23
|
+
startAngle
|
|
24
|
+
}),
|
|
25
|
+
[
|
|
26
|
+
endAngle,
|
|
27
|
+
innerRadius,
|
|
28
|
+
outerRadius,
|
|
29
|
+
padAngle,
|
|
30
|
+
plot,
|
|
31
|
+
ringPadding,
|
|
32
|
+
series,
|
|
33
|
+
startAngle
|
|
34
|
+
]
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
useMultiPieChart
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=use-multi-pie-chart.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-multi-pie-chart.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { UseMultiPieChartProps, UseMultiPieChartResult } from \"../types\";\nimport { createMultiPieChartModel } from \"../utils\";\n\nexport function useMultiPieChart(\n props: UseMultiPieChartProps,\n): UseMultiPieChartResult {\n const {\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot,\n ringPadding,\n series,\n startAngle,\n } = props;\n\n return useMemo(\n () =>\n createMultiPieChartModel({\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot,\n ringPadding,\n series,\n startAngle,\n }),\n [\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot,\n ringPadding,\n series,\n startAngle,\n ],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,SAAS,gCAAgC;AAElC,SAAS,iBACd,OACwB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SAAO;AAAA,IACL,MACE,yBAAyB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { UsePieChartProps, UsePieChartResult } from '../types/use-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/pie-chart.types.mjs';
|
|
6
|
+
|
|
7
|
+
declare function usePieChart(props: UsePieChartProps): UsePieChartResult;
|
|
8
|
+
|
|
9
|
+
export { usePieChart };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { createPieChartModel } from "../utils";
|
|
3
|
+
function usePieChart(props) {
|
|
4
|
+
const {
|
|
5
|
+
data,
|
|
6
|
+
endAngle,
|
|
7
|
+
innerRadius,
|
|
8
|
+
outerRadius,
|
|
9
|
+
padAngle,
|
|
10
|
+
plot,
|
|
11
|
+
startAngle
|
|
12
|
+
} = props;
|
|
13
|
+
return useMemo(
|
|
14
|
+
() => createPieChartModel({
|
|
15
|
+
data,
|
|
16
|
+
endAngle,
|
|
17
|
+
innerRadius,
|
|
18
|
+
outerRadius,
|
|
19
|
+
padAngle,
|
|
20
|
+
plot,
|
|
21
|
+
startAngle
|
|
22
|
+
}),
|
|
23
|
+
[data, endAngle, innerRadius, outerRadius, padAngle, plot, startAngle]
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
usePieChart
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=use-pie-chart.hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-pie-chart.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { UsePieChartProps, UsePieChartResult } from \"../types\";\nimport { createPieChartModel } from \"../utils\";\n\nexport function usePieChart(props: UsePieChartProps): UsePieChartResult {\n const {\n data,\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot,\n startAngle,\n } = props;\n\n return useMemo(\n () =>\n createPieChartModel({\n data,\n endAngle,\n innerRadius,\n outerRadius,\n padAngle,\n plot,\n startAngle,\n }),\n [data, endAngle, innerRadius, outerRadius, padAngle, plot, startAngle],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,SAAS,2BAA2B;AAE7B,SAAS,YAAY,OAA4C;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SAAO;AAAA,IACL,MACE,oBAAoB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH,CAAC,MAAM,UAAU,aAAa,aAAa,UAAU,MAAM,UAAU;AAAA,EACvE;AACF;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,12 +2,15 @@ export { Bar } from './components/primitives/bar.mjs';
|
|
|
2
2
|
export { Grid } from './components/primitives/grid.mjs';
|
|
3
3
|
export { Label } from './components/primitives/label.mjs';
|
|
4
4
|
export { Line } from './components/primitives/line.mjs';
|
|
5
|
+
export { Pie } from './components/primitives/pie.mjs';
|
|
5
6
|
export { XAxis } from './components/primitives/x-axis.mjs';
|
|
6
7
|
export { YAxis } from './components/primitives/y-axis.mjs';
|
|
7
|
-
export { BarChart } from './components/bar-chart.mjs';
|
|
8
|
-
export { LineChart } from './components/line-chart.mjs';
|
|
9
|
-
export { MultiBarChart } from './components/multi-bar-chart.mjs';
|
|
10
|
-
export { MultiLineChart } from './components/multi-line-chart.mjs';
|
|
8
|
+
export { BarChart } from './components/bar-chart/bar-chart.mjs';
|
|
9
|
+
export { LineChart } from './components/line-chart/line-chart.mjs';
|
|
10
|
+
export { MultiBarChart } from './components/multi-bar-chart/multi-bar-chart.mjs';
|
|
11
|
+
export { MultiLineChart } from './components/multi-line-chart/multi-line-chart.mjs';
|
|
12
|
+
export { MultiPieChart } from './components/multi-pie-chart/multi-pie-chart.mjs';
|
|
13
|
+
export { PieChart } from './components/pie-chart/pie-chart.mjs';
|
|
11
14
|
export { AxisDefaultLabelGap, AxisDefaultOpacity, AxisDefaultTickLength, AxisDefaultWidth } from './constants/axis.constants.mjs';
|
|
12
15
|
export { BarDefaultColor, BarDefaultColors, BarDefaultOpacity, BarDefaultRadius } from './constants/bar.constants.mjs';
|
|
13
16
|
export { BarChartDefaultCategoryPadding, MultiBarChartDefaultSeriesPadding } from './constants/bar-chart.constants.mjs';
|
|
@@ -15,12 +18,15 @@ export { GridDefaultOpacity, GridDefaultWidth, GridDefaultXVisible, GridDefaultY
|
|
|
15
18
|
export { LabelDefaultHorizontalAlignment, LabelDefaultVerticalAlignment, TabularNumsFeature } from './constants/label.constants.mjs';
|
|
16
19
|
export { LineDefaultCap, LineDefaultColor, LineDefaultColors, LineDefaultCurve, LineDefaultJoin, LineDefaultOpacity, LineDefaultWidth } from './constants/line.constants.mjs';
|
|
17
20
|
export { LineChartDefaultNumericDomain, LineChartDefaultTickCount } from './constants/line-chart.constants.mjs';
|
|
21
|
+
export { MultiPieDefaultRingPadding, PieDefaultColor, PieDefaultColors, PieDefaultCornerRadius, PieDefaultEndAngle, PieDefaultInnerRadius, PieDefaultOpacity, PieDefaultOuterRadius, PieDefaultPadAngle, PieDefaultStartAngle, PieDefaultStrokeWidth } from './constants/pie.constants.mjs';
|
|
18
22
|
export { useChartCanvas } from './hooks/use-chart-canvas.hook.mjs';
|
|
19
23
|
export { useChartLayout } from './hooks/use-chart-layout.hook.mjs';
|
|
20
24
|
export { useBarChart } from './hooks/use-bar-chart.hook.mjs';
|
|
21
25
|
export { useLineChart } from './hooks/use-line-chart.hook.mjs';
|
|
22
26
|
export { useMultiBarChart } from './hooks/use-multi-bar-chart.hook.mjs';
|
|
23
27
|
export { useMultiLineChart } from './hooks/use-multi-line-chart.hook.mjs';
|
|
28
|
+
export { useMultiPieChart } from './hooks/use-multi-pie-chart.hook.mjs';
|
|
29
|
+
export { usePieChart } from './hooks/use-pie-chart.hook.mjs';
|
|
24
30
|
export { AxisLayout, AxisLineLayout, AxisProps, AxisTick, AxisTickLayout, CreateAxisLayoutProps, CreateYAxisLayoutProps, XAxisProps, YAxisProps } from './types/axis.types.mjs';
|
|
25
31
|
export { BarProps } from './types/bar.types.mjs';
|
|
26
32
|
export { BarChartBarOptions, BarChartCommonProps, BarChartCoordinate, BarChartPoint, BarChartProps } from './types/bar-chart.types.mjs';
|
|
@@ -30,11 +36,16 @@ export { LabelHorizontalAlignment, LabelProps, LabelVerticalAlignment } from './
|
|
|
30
36
|
export { LineProps } from './types/line.types.mjs';
|
|
31
37
|
export { MultiBarChartProps, MultiBarChartSeries, MultiBarChartSeriesModel } from './types/multi-bar-chart.types.mjs';
|
|
32
38
|
export { MultiLineChartBodyProps, MultiLineChartProps, MultiLineChartSeries, MultiLineChartSeriesModel } from './types/multi-line-chart.types.mjs';
|
|
39
|
+
export { MultiPieChartProps, MultiPieChartSeries, MultiPieChartSeriesModel } from './types/multi-pie-chart.types.mjs';
|
|
40
|
+
export { PieProps } from './types/pie.types.mjs';
|
|
41
|
+
export { PieChartCommonProps, PieChartCoordinate, PieChartModel, PieChartPoint, PieChartProps, PieChartSliceOptions } from './types/pie-chart.types.mjs';
|
|
33
42
|
export { ChartLabelStyle, ChartStrokeCap, ChartStrokeJoin, ChartStrokeStyle } from './types/style.types.mjs';
|
|
34
43
|
export { UseBarChartProps, UseBarChartResult } from './types/use-bar-chart.types.mjs';
|
|
35
44
|
export { LineChartXScaleModel, UseLineChartProps, UseLineChartResult } from './types/use-line-chart.types.mjs';
|
|
36
45
|
export { UseMultiBarChartProps, UseMultiBarChartResult } from './types/use-multi-bar-chart.types.mjs';
|
|
37
46
|
export { UseMultiLineChartProps, UseMultiLineChartResult } from './types/use-multi-line-chart.types.mjs';
|
|
47
|
+
export { UseMultiPieChartProps, UseMultiPieChartResult } from './types/use-multi-pie-chart.types.mjs';
|
|
48
|
+
export { UsePieChartProps, UsePieChartResult } from './types/use-pie-chart.types.mjs';
|
|
38
49
|
export { createAxisTicks, createXAxisLabelRect, createXAxisLayout, createYAxisLabelRect, createYAxisLayout, formatAxisTick } from './utils/axis.util.mjs';
|
|
39
50
|
export { createBarChartCoordinates, createBarChartModel } from './utils/bar-chart.util.mjs';
|
|
40
51
|
export { createChartLayout, createInsetRect } from './utils/chart-layout.util.mjs';
|
|
@@ -45,6 +56,9 @@ export { createLineChartCoordinates, createLineChartModel } from './utils/line-c
|
|
|
45
56
|
export { createDrawableMultiLineChartSeries } from './utils/multi-line-chart.util.mjs';
|
|
46
57
|
export { createDrawableMultiBarChartSeries, createMultiBarChartModel } from './utils/multi-bar-chart.util.mjs';
|
|
47
58
|
export { createParagraphBuilder } from './utils/paragraph-builder.util.mjs';
|
|
59
|
+
export { createMultiPieChartModel } from './utils/multi-pie-chart.util.mjs';
|
|
60
|
+
export { createPieChartModel, createPieChartRadii, normalizeRadiusRatio } from './utils/pie-chart.util.mjs';
|
|
61
|
+
export { createPieSlicePath } from './utils/pie.util.mjs';
|
|
48
62
|
import 'react/jsx-runtime';
|
|
49
63
|
import '@impulse-ui-native/theme';
|
|
50
64
|
import '@shopify/react-native-skia';
|
package/dist/types/index.d.mts
CHANGED
|
@@ -7,10 +7,15 @@ export { LabelHorizontalAlignment, LabelProps, LabelVerticalAlignment } from './
|
|
|
7
7
|
export { LineProps } from './line.types.mjs';
|
|
8
8
|
export { MultiBarChartProps, MultiBarChartSeries, MultiBarChartSeriesModel } from './multi-bar-chart.types.mjs';
|
|
9
9
|
export { MultiLineChartBodyProps, MultiLineChartProps, MultiLineChartSeries, MultiLineChartSeriesModel } from './multi-line-chart.types.mjs';
|
|
10
|
+
export { MultiPieChartProps, MultiPieChartSeries, MultiPieChartSeriesModel } from './multi-pie-chart.types.mjs';
|
|
11
|
+
export { PieProps } from './pie.types.mjs';
|
|
12
|
+
export { PieChartCommonProps, PieChartCoordinate, PieChartModel, PieChartPoint, PieChartProps, PieChartSliceOptions } from './pie-chart.types.mjs';
|
|
10
13
|
export { ChartLabelStyle, ChartStrokeCap, ChartStrokeJoin, ChartStrokeStyle } from './style.types.mjs';
|
|
11
14
|
export { UseBarChartProps, UseBarChartResult } from './use-bar-chart.types.mjs';
|
|
12
15
|
export { LineChartXScaleModel, UseLineChartProps, UseLineChartResult } from './use-line-chart.types.mjs';
|
|
13
16
|
export { UseMultiBarChartProps, UseMultiBarChartResult } from './use-multi-bar-chart.types.mjs';
|
|
14
17
|
export { UseMultiLineChartProps, UseMultiLineChartResult } from './use-multi-line-chart.types.mjs';
|
|
18
|
+
export { UseMultiPieChartProps, UseMultiPieChartResult } from './use-multi-pie-chart.types.mjs';
|
|
19
|
+
export { UsePieChartProps, UsePieChartResult } from './use-pie-chart.types.mjs';
|
|
15
20
|
import '@shopify/react-native-skia';
|
|
16
21
|
import '@impulse-ui-native/theme';
|
package/dist/types/index.js
CHANGED
|
@@ -8,9 +8,14 @@ export * from "./line.types";
|
|
|
8
8
|
export * from "./line-chart.types";
|
|
9
9
|
export * from "./multi-bar-chart.types";
|
|
10
10
|
export * from "./multi-line-chart.types";
|
|
11
|
+
export * from "./multi-pie-chart.types";
|
|
12
|
+
export * from "./pie.types";
|
|
13
|
+
export * from "./pie-chart.types";
|
|
11
14
|
export * from "./style.types";
|
|
12
15
|
export * from "./use-bar-chart.types";
|
|
13
16
|
export * from "./use-line-chart.types";
|
|
14
17
|
export * from "./use-multi-bar-chart.types";
|
|
15
18
|
export * from "./use-multi-line-chart.types";
|
|
19
|
+
export * from "./use-multi-pie-chart.types";
|
|
20
|
+
export * from "./use-pie-chart.types";
|
|
16
21
|
//# sourceMappingURL=index.js.map
|