@bashem/rn-charts 0.0.2
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/LICENSE +20 -0
- package/README.md +35 -0
- package/lib/module/index.js +14 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/skia/AreaChart/AreaChart.js +122 -0
- package/lib/module/skia/AreaChart/AreaChart.js.map +1 -0
- package/lib/module/skia/AreaChart/useAreaChart.js +141 -0
- package/lib/module/skia/AreaChart/useAreaChart.js.map +1 -0
- package/lib/module/skia/BarChart/BarChart.js +127 -0
- package/lib/module/skia/BarChart/BarChart.js.map +1 -0
- package/lib/module/skia/BarChart/useBarChart.js +172 -0
- package/lib/module/skia/BarChart/useBarChart.js.map +1 -0
- package/lib/module/skia/Common/VerticalLabel.js +73 -0
- package/lib/module/skia/Common/VerticalLabel.js.map +1 -0
- package/lib/module/skia/HeatMap/HeatMap.js +76 -0
- package/lib/module/skia/HeatMap/HeatMap.js.map +1 -0
- package/lib/module/skia/HeatMap/useHeatMap.js +139 -0
- package/lib/module/skia/HeatMap/useHeatMap.js.map +1 -0
- package/lib/module/skia/PieChart/PieChart.js +96 -0
- package/lib/module/skia/PieChart/PieChart.js.map +1 -0
- package/lib/module/skia/PieChart/usePieChart.js +103 -0
- package/lib/module/skia/PieChart/usePieChart.js.map +1 -0
- package/lib/module/skia/Popup.js +58 -0
- package/lib/module/skia/Popup.js.map +1 -0
- package/lib/module/skia/Progress/LinearProgress.js +69 -0
- package/lib/module/skia/Progress/LinearProgress.js.map +1 -0
- package/lib/module/skia/Progress/SemiCircleProgress.js +70 -0
- package/lib/module/skia/Progress/SemiCircleProgress.js.map +1 -0
- package/lib/module/skia/RadarChart/RadarChart.js +98 -0
- package/lib/module/skia/RadarChart/RadarChart.js.map +1 -0
- package/lib/module/skia/RadarChart/useRadarChart.js +164 -0
- package/lib/module/skia/RadarChart/useRadarChart.js.map +1 -0
- package/lib/module/skia/common.js +65 -0
- package/lib/module/skia/common.js.map +1 -0
- package/lib/module/util/colors.js +182 -0
- package/lib/module/util/colors.js.map +1 -0
- package/lib/module/util/util.js +71 -0
- package/lib/module/util/util.js.map +1 -0
- package/lib/typescript/index.d.ts +2 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/index.d.ts +10 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/skia/AreaChart/AreaChart.d.ts +25 -0
- package/lib/typescript/src/skia/AreaChart/AreaChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/AreaChart/useAreaChart.d.ts +47 -0
- package/lib/typescript/src/skia/AreaChart/useAreaChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/BarChart/BarChart.d.ts +30 -0
- package/lib/typescript/src/skia/BarChart/BarChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/BarChart/useBarChart.d.ts +41 -0
- package/lib/typescript/src/skia/BarChart/useBarChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/Common/VerticalLabel.d.ts +17 -0
- package/lib/typescript/src/skia/Common/VerticalLabel.d.ts.map +1 -0
- package/lib/typescript/src/skia/HeatMap/HeatMap.d.ts +33 -0
- package/lib/typescript/src/skia/HeatMap/HeatMap.d.ts.map +1 -0
- package/lib/typescript/src/skia/HeatMap/useHeatMap.d.ts +25 -0
- package/lib/typescript/src/skia/HeatMap/useHeatMap.d.ts.map +1 -0
- package/lib/typescript/src/skia/PieChart/PieChart.d.ts +27 -0
- package/lib/typescript/src/skia/PieChart/PieChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/PieChart/usePieChart.d.ts +13 -0
- package/lib/typescript/src/skia/PieChart/usePieChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/Popup.d.ts +26 -0
- package/lib/typescript/src/skia/Popup.d.ts.map +1 -0
- package/lib/typescript/src/skia/Progress/LinearProgress.d.ts +18 -0
- package/lib/typescript/src/skia/Progress/LinearProgress.d.ts.map +1 -0
- package/lib/typescript/src/skia/Progress/SemiCircleProgress.d.ts +18 -0
- package/lib/typescript/src/skia/Progress/SemiCircleProgress.d.ts.map +1 -0
- package/lib/typescript/src/skia/RadarChart/RadarChart.d.ts +27 -0
- package/lib/typescript/src/skia/RadarChart/RadarChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/RadarChart/useRadarChart.d.ts +41 -0
- package/lib/typescript/src/skia/RadarChart/useRadarChart.d.ts.map +1 -0
- package/lib/typescript/src/skia/common.d.ts +31 -0
- package/lib/typescript/src/skia/common.d.ts.map +1 -0
- package/lib/typescript/src/util/colors.d.ts +4 -0
- package/lib/typescript/src/util/colors.d.ts.map +1 -0
- package/lib/typescript/src/util/util.d.ts +33 -0
- package/lib/typescript/src/util/util.d.ts.map +1 -0
- package/package.json +172 -0
- package/src/index.tsx +12 -0
- package/src/skia/AreaChart/AreaChart.tsx +140 -0
- package/src/skia/AreaChart/useAreaChart.ts +180 -0
- package/src/skia/BarChart/BarChart.tsx +190 -0
- package/src/skia/BarChart/useBarChart.ts +210 -0
- package/src/skia/Common/VerticalLabel.tsx +91 -0
- package/src/skia/HeatMap/HeatMap.tsx +106 -0
- package/src/skia/HeatMap/useHeatMap.ts +175 -0
- package/src/skia/PieChart/PieChart.tsx +114 -0
- package/src/skia/PieChart/usePieChart.ts +156 -0
- package/src/skia/Popup.tsx +125 -0
- package/src/skia/Progress/LinearProgress.tsx +84 -0
- package/src/skia/Progress/SemiCircleProgress.tsx +82 -0
- package/src/skia/RadarChart/RadarChart.tsx +159 -0
- package/src/skia/RadarChart/useRadarChart.ts +208 -0
- package/src/skia/common.ts +82 -0
- package/src/util/colors.ts +186 -0
- package/src/util/util.ts +89 -0
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useEffect } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { Canvas, LinearGradient, RoundedRect } from '@shopify/react-native-skia';
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
export default function LinearProgress({
|
|
8
|
+
progress,
|
|
9
|
+
style
|
|
10
|
+
}) {
|
|
11
|
+
const width = style.width ?? 300;
|
|
12
|
+
const height = style.height ?? 20;
|
|
13
|
+
const radius = style.radius ?? 0;
|
|
14
|
+
const tintColor = style.tintColor ?? '#4A90E2';
|
|
15
|
+
|
|
16
|
+
// Animate progress
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
// runTiming(progress, 0.7, { duration: 1000 }); // progress to 70%
|
|
19
|
+
}, []);
|
|
20
|
+
return /*#__PURE__*/_jsx(View, {
|
|
21
|
+
children: /*#__PURE__*/_jsxs(Canvas, {
|
|
22
|
+
style: {
|
|
23
|
+
width,
|
|
24
|
+
height
|
|
25
|
+
},
|
|
26
|
+
children: [/*#__PURE__*/_jsx(RoundedRect, {
|
|
27
|
+
x: 0,
|
|
28
|
+
y: 0,
|
|
29
|
+
width: width,
|
|
30
|
+
height: height,
|
|
31
|
+
r: radius,
|
|
32
|
+
color: style.backgroundColor,
|
|
33
|
+
children: style.backgroundColors && /*#__PURE__*/_jsx(LinearGradient, {
|
|
34
|
+
start: {
|
|
35
|
+
x: 0,
|
|
36
|
+
y: 0
|
|
37
|
+
},
|
|
38
|
+
end: {
|
|
39
|
+
x: width,
|
|
40
|
+
y: 0
|
|
41
|
+
},
|
|
42
|
+
colors: style.backgroundColors,
|
|
43
|
+
positions: style.backgroundColorsPositions
|
|
44
|
+
})
|
|
45
|
+
}), /*#__PURE__*/_jsx(RoundedRect, {
|
|
46
|
+
x: 0,
|
|
47
|
+
y: 0,
|
|
48
|
+
width: progress * width // animate width
|
|
49
|
+
,
|
|
50
|
+
height: height,
|
|
51
|
+
r: radius,
|
|
52
|
+
color: style.tintColor,
|
|
53
|
+
children: style.tintColors && /*#__PURE__*/_jsx(LinearGradient, {
|
|
54
|
+
start: {
|
|
55
|
+
x: 0,
|
|
56
|
+
y: 0
|
|
57
|
+
},
|
|
58
|
+
end: {
|
|
59
|
+
x: width,
|
|
60
|
+
y: 0
|
|
61
|
+
},
|
|
62
|
+
colors: style.tintColors,
|
|
63
|
+
positions: style.tineColorsPositions
|
|
64
|
+
})
|
|
65
|
+
})]
|
|
66
|
+
})
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=LinearProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useEffect","View","Canvas","LinearGradient","RoundedRect","jsx","_jsx","jsxs","_jsxs","LinearProgress","progress","style","width","height","radius","tintColor","children","x","y","r","color","backgroundColor","backgroundColors","start","end","colors","positions","backgroundColorsPositions","tintColors","tineColorsPositions"],"sourceRoot":"../../../../src","sources":["skia/Progress/LinearProgress.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAcC,SAAS,QAAQ,OAAO;AAClD,SAASC,IAAI,QAAqC,cAAc;AAChE,SACEC,MAAM,EACNC,cAAc,EAEdC,WAAW,QACN,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoBpC,eAAe,SAASC,cAAcA,CAAC;EACrCC,QAAQ;EACRC;AACmB,CAAC,EAAE;EACtB,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAK,IAAI,GAAG;EAChC,MAAMC,MAAM,GAAGF,KAAK,CAACE,MAAM,IAAI,EAAE;EACjC,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAI,CAAC;EAChC,MAAMC,SAAS,GAAGJ,KAAK,CAACI,SAAS,IAAI,SAAS;;EAE9C;EACAf,SAAS,CAAC,MAAM;IACd;EAAA,CACD,EAAE,EAAE,CAAC;EAEN,oBACEM,IAAA,CAACL,IAAI;IAAAe,QAAA,eACHR,KAAA,CAACN,MAAM;MAACS,KAAK,EAAE;QAAEC,KAAK;QAAEC;MAAO,CAAE;MAAAG,QAAA,gBAE/BV,IAAA,CAACF,WAAW;QACVa,CAAC,EAAE,CAAE;QACLC,CAAC,EAAE,CAAE;QACLN,KAAK,EAAEA,KAAM;QACbC,MAAM,EAAEA,MAAO;QACfM,CAAC,EAAEL,MAAO;QACVM,KAAK,EAAET,KAAK,CAACU,eAAgB;QAAAL,QAAA,EAE5BL,KAAK,CAACW,gBAAgB,iBACrBhB,IAAA,CAACH,cAAc;UACboB,KAAK,EAAE;YAAEN,CAAC,EAAE,CAAC;YAAEC,CAAC,EAAE;UAAE,CAAE;UACtBM,GAAG,EAAE;YAAEP,CAAC,EAAEL,KAAK;YAAEM,CAAC,EAAE;UAAE,CAAE;UACxBO,MAAM,EAAEd,KAAK,CAACW,gBAAiB;UACtCI,SAAS,EAAEf,KAAK,CAACgB;QAA0B,CACrC;MACF,CACU,CAAC,eAEdrB,IAAA,CAACF,WAAW;QACVa,CAAC,EAAE,CAAE;QACLC,CAAC,EAAE,CAAE;QACLN,KAAK,EAAEF,QAAQ,GAAGE,KAAM,CAAC;QAAA;QACzBC,MAAM,EAAEA,MAAO;QACfM,CAAC,EAAEL,MAAO;QACVM,KAAK,EAAET,KAAK,CAACI,SAAU;QAAAC,QAAA,EAEtBL,KAAK,CAACiB,UAAU,iBACftB,IAAA,CAACH,cAAc;UACboB,KAAK,EAAE;YAAEN,CAAC,EAAE,CAAC;YAAEC,CAAC,EAAE;UAAE,CAAE;UACtBM,GAAG,EAAE;YAAEP,CAAC,EAAEL,KAAK;YAAEM,CAAC,EAAE;UAAE,CAAE;UACxBO,MAAM,EAAEd,KAAK,CAACiB,UAAW;UACzBF,SAAS,EAAEf,KAAK,CAACkB;QAAoB,CACtC;MACF,CACU,CAAC;IAAA,CACR;EAAC,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { Canvas, LinearGradient, RoundedRect } from '@shopify/react-native-skia';
|
|
5
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
export default function SemiCircleProgress({
|
|
7
|
+
progress,
|
|
8
|
+
style
|
|
9
|
+
}) {
|
|
10
|
+
const width = style.width ?? 300;
|
|
11
|
+
const height = style.height ?? 20;
|
|
12
|
+
const radius = style.radius ?? 0;
|
|
13
|
+
const tintColor = style.tintColor ?? '#4A90E2';
|
|
14
|
+
return /*#__PURE__*/_jsx(View, {
|
|
15
|
+
onLayout: event => {
|
|
16
|
+
const {
|
|
17
|
+
width,
|
|
18
|
+
height
|
|
19
|
+
} = event.nativeEvent.layout;
|
|
20
|
+
console.log('Layout width, height:', width, height);
|
|
21
|
+
},
|
|
22
|
+
children: /*#__PURE__*/_jsxs(Canvas, {
|
|
23
|
+
style: {
|
|
24
|
+
width,
|
|
25
|
+
height
|
|
26
|
+
},
|
|
27
|
+
children: [/*#__PURE__*/_jsx(RoundedRect, {
|
|
28
|
+
x: 0,
|
|
29
|
+
y: 0,
|
|
30
|
+
width: width,
|
|
31
|
+
height: height,
|
|
32
|
+
r: radius,
|
|
33
|
+
color: style.backgroundColor,
|
|
34
|
+
children: style.backgroundColors && /*#__PURE__*/_jsx(LinearGradient, {
|
|
35
|
+
start: {
|
|
36
|
+
x: 0,
|
|
37
|
+
y: 0
|
|
38
|
+
},
|
|
39
|
+
end: {
|
|
40
|
+
x: width,
|
|
41
|
+
y: 0
|
|
42
|
+
},
|
|
43
|
+
colors: style.backgroundColors,
|
|
44
|
+
positions: style.backgroundColorsPositions
|
|
45
|
+
})
|
|
46
|
+
}), /*#__PURE__*/_jsx(RoundedRect, {
|
|
47
|
+
x: 0,
|
|
48
|
+
y: 0,
|
|
49
|
+
width: progress * width // animate width
|
|
50
|
+
,
|
|
51
|
+
height: height,
|
|
52
|
+
r: radius,
|
|
53
|
+
color: style.tintColor,
|
|
54
|
+
children: style.tintColors && /*#__PURE__*/_jsx(LinearGradient, {
|
|
55
|
+
start: {
|
|
56
|
+
x: 0,
|
|
57
|
+
y: 0
|
|
58
|
+
},
|
|
59
|
+
end: {
|
|
60
|
+
x: width,
|
|
61
|
+
y: 0
|
|
62
|
+
},
|
|
63
|
+
colors: style.tintColors,
|
|
64
|
+
positions: style.tineColorsPositions
|
|
65
|
+
})
|
|
66
|
+
})]
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
//# sourceMappingURL=SemiCircleProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","Canvas","LinearGradient","RoundedRect","jsx","_jsx","jsxs","_jsxs","SemiCircleProgress","progress","style","width","height","radius","tintColor","onLayout","event","nativeEvent","layout","console","log","children","x","y","r","color","backgroundColor","backgroundColors","start","end","colors","positions","backgroundColorsPositions","tintColors","tineColorsPositions"],"sourceRoot":"../../../../src","sources":["skia/Progress/SemiCircleProgress.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SACEC,MAAM,EACNC,cAAc,EACdC,WAAW,QACN,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoBpC,eAAe,SAASC,kBAAkBA,CAAC;EACzCC,QAAQ;EACRC;AACuB,CAAC,EAAE;EAC1B,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAK,IAAI,GAAG;EAChC,MAAMC,MAAM,GAAGF,KAAK,CAACE,MAAM,IAAI,EAAE;EACjC,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAI,CAAC;EAChC,MAAMC,SAAS,GAAGJ,KAAK,CAACI,SAAS,IAAI,SAAS;EAE9C,oBACET,IAAA,CAACL,IAAI;IACHe,QAAQ,EAAGC,KAAK,IAAK;MACnB,MAAM;QAAEL,KAAK;QAAEC;MAAO,CAAC,GAAGI,KAAK,CAACC,WAAW,CAACC,MAAM;MAClDC,OAAO,CAACC,GAAG,CAAC,uBAAuB,EAAET,KAAK,EAAEC,MAAM,CAAC;IACrD,CAAE;IAAAS,QAAA,eAEFd,KAAA,CAACN,MAAM;MAACS,KAAK,EAAE;QAAEC,KAAK;QAAEC;MAAO,CAAE;MAAAS,QAAA,gBAE/BhB,IAAA,CAACF,WAAW;QACVmB,CAAC,EAAE,CAAE;QACLC,CAAC,EAAE,CAAE;QACLZ,KAAK,EAAEA,KAAM;QACbC,MAAM,EAAEA,MAAO;QACfY,CAAC,EAAEX,MAAO;QACVY,KAAK,EAAEf,KAAK,CAACgB,eAAgB;QAAAL,QAAA,EAE5BX,KAAK,CAACiB,gBAAgB,iBACrBtB,IAAA,CAACH,cAAc;UACb0B,KAAK,EAAE;YAAEN,CAAC,EAAE,CAAC;YAAEC,CAAC,EAAE;UAAE,CAAE;UACtBM,GAAG,EAAE;YAAEP,CAAC,EAAEX,KAAK;YAAEY,CAAC,EAAE;UAAE,CAAE;UACxBO,MAAM,EAAEpB,KAAK,CAACiB,gBAAiB;UACtCI,SAAS,EAAErB,KAAK,CAACsB;QAA0B,CACrC;MACF,CACU,CAAC,eAEd3B,IAAA,CAACF,WAAW;QACVmB,CAAC,EAAE,CAAE;QACLC,CAAC,EAAE,CAAE;QACLZ,KAAK,EAAEF,QAAQ,GAAGE,KAAM,CAAC;QAAA;QACzBC,MAAM,EAAEA,MAAO;QACfY,CAAC,EAAEX,MAAO;QACVY,KAAK,EAAEf,KAAK,CAACI,SAAU;QAAAO,QAAA,EAEtBX,KAAK,CAACuB,UAAU,iBACf5B,IAAA,CAACH,cAAc;UACb0B,KAAK,EAAE;YAAEN,CAAC,EAAE,CAAC;YAAEC,CAAC,EAAE;UAAE,CAAE;UACtBM,GAAG,EAAE;YAAEP,CAAC,EAAEX,KAAK;YAAEY,CAAC,EAAE;UAAE,CAAE;UACxBO,MAAM,EAAEpB,KAAK,CAACuB,UAAW;UACzBF,SAAS,EAAErB,KAAK,CAACwB;QAAoB,CACtC;MACF,CACU,CAAC;IAAA,CACR;EAAC,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View, Text, StyleSheet } from 'react-native';
|
|
5
|
+
import { Canvas, Path, Group, Circle } from '@shopify/react-native-skia';
|
|
6
|
+
import useRadarChart from "./useRadarChart.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
function RadarChart(props) {
|
|
9
|
+
const {
|
|
10
|
+
size,
|
|
11
|
+
cx,
|
|
12
|
+
cy,
|
|
13
|
+
gridPaths,
|
|
14
|
+
axisPaths,
|
|
15
|
+
dataPaths,
|
|
16
|
+
formattedLabels,
|
|
17
|
+
formattedLabelViews,
|
|
18
|
+
strokeWidth,
|
|
19
|
+
strokeColor,
|
|
20
|
+
centerDotRadius,
|
|
21
|
+
centerDotColor
|
|
22
|
+
} = useRadarChart(props);
|
|
23
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
24
|
+
style: [{
|
|
25
|
+
width: size,
|
|
26
|
+
height: size,
|
|
27
|
+
backgroundColor: props.style?.backgroundColor
|
|
28
|
+
}],
|
|
29
|
+
children: [/*#__PURE__*/_jsx(Canvas, {
|
|
30
|
+
style: {
|
|
31
|
+
width: size,
|
|
32
|
+
height: size
|
|
33
|
+
},
|
|
34
|
+
children: /*#__PURE__*/_jsxs(Group, {
|
|
35
|
+
children: [gridPaths.map((gridPath, index) => /*#__PURE__*/_jsx(Path, {
|
|
36
|
+
path: gridPath,
|
|
37
|
+
style: "stroke",
|
|
38
|
+
strokeWidth: strokeWidth,
|
|
39
|
+
color: strokeColor
|
|
40
|
+
}, index)), axisPaths.map((ap, index) => /*#__PURE__*/_jsx(Path, {
|
|
41
|
+
path: ap,
|
|
42
|
+
style: "stroke",
|
|
43
|
+
strokeWidth: strokeWidth,
|
|
44
|
+
color: strokeColor
|
|
45
|
+
}, index)), dataPaths.map((pathDatum, index) => /*#__PURE__*/_jsxs(Group, {
|
|
46
|
+
children: [/*#__PURE__*/_jsx(Path, {
|
|
47
|
+
path: pathDatum.path,
|
|
48
|
+
style: "fill",
|
|
49
|
+
color: pathDatum.backgroundColor
|
|
50
|
+
}), /*#__PURE__*/_jsx(Path, {
|
|
51
|
+
path: pathDatum.path,
|
|
52
|
+
style: "stroke",
|
|
53
|
+
strokeWidth: pathDatum.strokeWidth,
|
|
54
|
+
color: pathDatum.strokeColor
|
|
55
|
+
})]
|
|
56
|
+
}, index)), /*#__PURE__*/_jsx(Circle, {
|
|
57
|
+
cx: cx,
|
|
58
|
+
cy: cy,
|
|
59
|
+
r: centerDotRadius,
|
|
60
|
+
color: centerDotColor
|
|
61
|
+
})]
|
|
62
|
+
})
|
|
63
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
64
|
+
style: [StyleSheet.absoluteFill, {
|
|
65
|
+
justifyContent: 'center',
|
|
66
|
+
alignItems: 'center'
|
|
67
|
+
}],
|
|
68
|
+
pointerEvents: "none",
|
|
69
|
+
children: [formattedLabelViews && formattedLabelViews.map((viewDataum, index) => {
|
|
70
|
+
let style = {
|
|
71
|
+
position: 'absolute',
|
|
72
|
+
bottom: viewDataum.y
|
|
73
|
+
};
|
|
74
|
+
if (viewDataum.align === 'left') style.left = viewDataum.x;
|
|
75
|
+
if (viewDataum.align === 'right') style.right = viewDataum.x;
|
|
76
|
+
return /*#__PURE__*/_jsx(View, {
|
|
77
|
+
style: style,
|
|
78
|
+
children: viewDataum.view
|
|
79
|
+
}, index);
|
|
80
|
+
}), formattedLabels && formattedLabels.map((formatedlabel, index) => {
|
|
81
|
+
let style = {
|
|
82
|
+
position: 'absolute',
|
|
83
|
+
bottom: formatedlabel.y,
|
|
84
|
+
fontSize: 12,
|
|
85
|
+
includeFontPadding: false
|
|
86
|
+
};
|
|
87
|
+
if (formatedlabel.align === 'left') style.left = formatedlabel.x;
|
|
88
|
+
if (formatedlabel.align === 'right') style.right = formatedlabel.x;
|
|
89
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
90
|
+
style: style,
|
|
91
|
+
children: formatedlabel.label
|
|
92
|
+
}, index);
|
|
93
|
+
})]
|
|
94
|
+
})]
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
export default RadarChart;
|
|
98
|
+
//# sourceMappingURL=RadarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","Canvas","Path","Group","Circle","useRadarChart","jsx","_jsx","jsxs","_jsxs","RadarChart","props","size","cx","cy","gridPaths","axisPaths","dataPaths","formattedLabels","formattedLabelViews","strokeWidth","strokeColor","centerDotRadius","centerDotColor","style","width","height","backgroundColor","children","map","gridPath","index","path","color","ap","pathDatum","r","absoluteFill","justifyContent","alignItems","pointerEvents","viewDataum","position","bottom","y","align","left","x","right","view","formatedlabel","fontSize","includeFontPadding","label"],"sourceRoot":"../../../../src","sources":["skia/RadarChart/RadarChart.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { Skia } from "@shopify/react-native-skia";
|
|
5
|
+
import { arrayFrom } from "../../util/util.js";
|
|
6
|
+
import { getPaddings } from "../common.js";
|
|
7
|
+
export default function useRadarChart({
|
|
8
|
+
data,
|
|
9
|
+
labels,
|
|
10
|
+
labelViews,
|
|
11
|
+
levels = 5,
|
|
12
|
+
maxValue,
|
|
13
|
+
minValue = 0,
|
|
14
|
+
style
|
|
15
|
+
}) {
|
|
16
|
+
const size = style?.size ?? 200;
|
|
17
|
+
const {
|
|
18
|
+
paddingHorizontal,
|
|
19
|
+
paddingVertical
|
|
20
|
+
} = getPaddings(style);
|
|
21
|
+
const radius = size / 2 - Math.max(paddingHorizontal, paddingVertical) / 2;
|
|
22
|
+
const cx = size / 2;
|
|
23
|
+
const cy = size / 2;
|
|
24
|
+
|
|
25
|
+
// Compute max value
|
|
26
|
+
const safeMax = useMemo(() => {
|
|
27
|
+
if (maxValue !== undefined) return maxValue;
|
|
28
|
+
let m = minValue;
|
|
29
|
+
for (let datum of data) for (let v of datum.values) m = Math.max(m, v);
|
|
30
|
+
return m;
|
|
31
|
+
}, [data, maxValue]);
|
|
32
|
+
|
|
33
|
+
// Determine number of axes
|
|
34
|
+
const angles = useMemo(() => {
|
|
35
|
+
let len = data[0]?.values.length ?? 0;
|
|
36
|
+
if (len === 0 && labels) len = labels.length;
|
|
37
|
+
if (len === 0 && labelViews) len = labelViews.length;
|
|
38
|
+
if (len === 0) return [];
|
|
39
|
+
return arrayFrom(len, 1).map(i => -Math.PI / 2 + i * 2 * Math.PI / len);
|
|
40
|
+
}, [data[0]?.values.length, labels?.length, labelViews?.length]);
|
|
41
|
+
const pointFor = (angle, r) => ({
|
|
42
|
+
x: cx + Math.cos(angle) * r,
|
|
43
|
+
y: cy + Math.sin(angle) * r
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// ------------------------------
|
|
47
|
+
// Grid paths
|
|
48
|
+
// ------------------------------
|
|
49
|
+
const gridPaths = useMemo(() => {
|
|
50
|
+
const arr = [];
|
|
51
|
+
for (let lvl = 1; lvl <= levels; lvl++) {
|
|
52
|
+
const r = radius * lvl / levels;
|
|
53
|
+
const p = Skia.Path.Make();
|
|
54
|
+
angles.forEach((angle, i) => {
|
|
55
|
+
const pt = pointFor(angle, r);
|
|
56
|
+
if (i === 0) p.moveTo(pt.x, pt.y);else p.lineTo(pt.x, pt.y);
|
|
57
|
+
});
|
|
58
|
+
p.close();
|
|
59
|
+
arr.push(p);
|
|
60
|
+
}
|
|
61
|
+
return arr;
|
|
62
|
+
}, [levels, radius, angles]);
|
|
63
|
+
|
|
64
|
+
// ------------------------------
|
|
65
|
+
// Axis paths
|
|
66
|
+
// ------------------------------
|
|
67
|
+
const axisPaths = useMemo(() => angles.map(angle => {
|
|
68
|
+
const p = Skia.Path.Make();
|
|
69
|
+
const outer = pointFor(angle, radius);
|
|
70
|
+
p.moveTo(cx, cy);
|
|
71
|
+
p.lineTo(outer.x, outer.y);
|
|
72
|
+
return p;
|
|
73
|
+
}), [angles, radius]);
|
|
74
|
+
|
|
75
|
+
// ------------------------------
|
|
76
|
+
// Data polygons
|
|
77
|
+
// ------------------------------
|
|
78
|
+
const dataPaths = useMemo(() => {
|
|
79
|
+
return data.map(({
|
|
80
|
+
values,
|
|
81
|
+
...rest
|
|
82
|
+
}) => {
|
|
83
|
+
const path = Skia.Path.Make();
|
|
84
|
+
values.forEach((v, i) => {
|
|
85
|
+
const r = Math.max(0, Math.min(1, v / safeMax)) * radius;
|
|
86
|
+
const pt = pointFor(angles[i], r);
|
|
87
|
+
if (i === 0) path.moveTo(pt.x, pt.y);else path.lineTo(pt.x, pt.y);
|
|
88
|
+
});
|
|
89
|
+
path.close();
|
|
90
|
+
return {
|
|
91
|
+
path,
|
|
92
|
+
...rest
|
|
93
|
+
};
|
|
94
|
+
});
|
|
95
|
+
}, [data, radius, safeMax, angles]);
|
|
96
|
+
|
|
97
|
+
// ------------------------------
|
|
98
|
+
// Labels
|
|
99
|
+
// ------------------------------
|
|
100
|
+
const formattedLabels = useMemo(() => {
|
|
101
|
+
if (!labels) return undefined;
|
|
102
|
+
const arr = [];
|
|
103
|
+
const r = radius + 12;
|
|
104
|
+
angles.forEach((angle, i) => {
|
|
105
|
+
const p = pointFor(angle, r);
|
|
106
|
+
const deg = angle * 180 / Math.PI;
|
|
107
|
+
let align = "center";
|
|
108
|
+
if (deg > -90 && deg < 90) align = "left";else if (deg < -90 || deg > 90) {
|
|
109
|
+
align = "right";
|
|
110
|
+
p.x = size - p.x;
|
|
111
|
+
}
|
|
112
|
+
arr.push({
|
|
113
|
+
x: p.x,
|
|
114
|
+
y: size - p.y,
|
|
115
|
+
label: labels[i],
|
|
116
|
+
align
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
return arr;
|
|
120
|
+
}, [labels, angles, radius]);
|
|
121
|
+
|
|
122
|
+
// ------------------------------
|
|
123
|
+
// Label Views
|
|
124
|
+
// ------------------------------
|
|
125
|
+
const formattedLabelViews = useMemo(() => {
|
|
126
|
+
if (!labelViews) return undefined;
|
|
127
|
+
const arr = [];
|
|
128
|
+
const r = radius + 12;
|
|
129
|
+
angles.forEach((angle, i) => {
|
|
130
|
+
const p = pointFor(angle, r);
|
|
131
|
+
const deg = angle * 180 / Math.PI;
|
|
132
|
+
let align = "center";
|
|
133
|
+
if (deg > -90 && deg < 90) align = "left";else if (deg < -90 || deg > 90) {
|
|
134
|
+
align = "right";
|
|
135
|
+
p.x = size - p.x;
|
|
136
|
+
}
|
|
137
|
+
arr.push({
|
|
138
|
+
x: p.x,
|
|
139
|
+
y: size - p.y,
|
|
140
|
+
view: labelViews[i],
|
|
141
|
+
align
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
return arr;
|
|
145
|
+
}, [labelViews, angles, radius]);
|
|
146
|
+
return {
|
|
147
|
+
size,
|
|
148
|
+
cx,
|
|
149
|
+
cy,
|
|
150
|
+
radius,
|
|
151
|
+
safeMax,
|
|
152
|
+
angles,
|
|
153
|
+
gridPaths,
|
|
154
|
+
axisPaths,
|
|
155
|
+
dataPaths,
|
|
156
|
+
formattedLabels,
|
|
157
|
+
formattedLabelViews,
|
|
158
|
+
strokeWidth: style?.strokeWidth ?? 2,
|
|
159
|
+
strokeColor: style?.strokeColor ?? "gray",
|
|
160
|
+
centerDotRadius: style?.centerDotRadius ?? 2,
|
|
161
|
+
centerDotColor: style?.centerDotColor ?? style?.strokeColor ?? "gray"
|
|
162
|
+
};
|
|
163
|
+
}
|
|
164
|
+
//# sourceMappingURL=useRadarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","Skia","arrayFrom","getPaddings","useRadarChart","data","labels","labelViews","levels","maxValue","minValue","style","size","paddingHorizontal","paddingVertical","radius","Math","max","cx","cy","safeMax","undefined","m","datum","v","values","angles","len","length","map","i","PI","pointFor","angle","r","x","cos","y","sin","gridPaths","arr","lvl","p","Path","Make","forEach","pt","moveTo","lineTo","close","push","axisPaths","outer","dataPaths","rest","path","min","formattedLabels","deg","align","label","formattedLabelViews","view","strokeWidth","strokeColor","centerDotRadius","centerDotColor"],"sourceRoot":"../../../../src","sources":["skia/RadarChart/useRadarChart.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { matchFont, Skia, TextAlign } from "@shopify/react-native-skia";
|
|
4
|
+
import { Platform } from "react-native";
|
|
5
|
+
export function getCommonStyleFont(style) {
|
|
6
|
+
const fontSize = style?.font?.getSize() ?? style?.fontSize ?? 12;
|
|
7
|
+
const font = style?.font ?? getFont(fontSize);
|
|
8
|
+
return {
|
|
9
|
+
font,
|
|
10
|
+
fontSize
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export function getPaddings(style) {
|
|
14
|
+
const paddingTop = style?.paddingTop ?? style?.padding ?? 0;
|
|
15
|
+
const paddingBottom = style?.paddingBottom ?? style?.padding ?? 0;
|
|
16
|
+
const paddingLeft = style?.paddingLeft ?? style?.paddingStart ?? style?.padding ?? 0;
|
|
17
|
+
const paddingRight = style?.paddingRight ?? style?.paddingEnd ?? style?.padding ?? 0;
|
|
18
|
+
const paddingHorizontal = paddingLeft + paddingRight;
|
|
19
|
+
const paddingVertical = paddingTop + paddingBottom;
|
|
20
|
+
return {
|
|
21
|
+
paddingTop,
|
|
22
|
+
paddingBottom,
|
|
23
|
+
paddingLeft,
|
|
24
|
+
paddingRight,
|
|
25
|
+
paddingHorizontal,
|
|
26
|
+
paddingVertical
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
export function getRandomRGBColor() {
|
|
30
|
+
const r = Math.floor(Math.random() * 256);
|
|
31
|
+
const g = Math.floor(Math.random() * 256);
|
|
32
|
+
const b = Math.floor(Math.random() * 256);
|
|
33
|
+
return `rgb(${r},${g},${b})`;
|
|
34
|
+
}
|
|
35
|
+
;
|
|
36
|
+
export const systemFontFamilies = Platform.select({
|
|
37
|
+
ios: ["Helvetica", "Arial", "Courier"],
|
|
38
|
+
android: ["roboto-flex", "sans-serif", "Roboto", "serif", "monospace"],
|
|
39
|
+
default: ["sans-serif", "serif"]
|
|
40
|
+
});
|
|
41
|
+
export function getFont(size = 14) {
|
|
42
|
+
const fontFamily = systemFontFamilies[0];
|
|
43
|
+
// console.log("Available system font families:", listFontFamilies());
|
|
44
|
+
// console.log("Using font family:", fontFamily, systemFontFamilies);
|
|
45
|
+
const font = matchFont({
|
|
46
|
+
fontFamily,
|
|
47
|
+
fontSize: size,
|
|
48
|
+
fontStyle: "normal",
|
|
49
|
+
fontWeight: "normal"
|
|
50
|
+
});
|
|
51
|
+
return font;
|
|
52
|
+
}
|
|
53
|
+
export const font = getFont();
|
|
54
|
+
function createParagraph(text) {
|
|
55
|
+
const paragraphStyle = {
|
|
56
|
+
textAlign: TextAlign.Center
|
|
57
|
+
};
|
|
58
|
+
const fontStyle = {
|
|
59
|
+
fontFamilies: systemFontFamilies,
|
|
60
|
+
fontSize: 14
|
|
61
|
+
};
|
|
62
|
+
const paragraph = Skia.ParagraphBuilder.Make(paragraphStyle).pushStyle(fontStyle).addText(text).pop().build();
|
|
63
|
+
return paragraph;
|
|
64
|
+
}
|
|
65
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["matchFont","Skia","TextAlign","Platform","getCommonStyleFont","style","fontSize","font","getSize","getFont","getPaddings","paddingTop","padding","paddingBottom","paddingLeft","paddingStart","paddingRight","paddingEnd","paddingHorizontal","paddingVertical","getRandomRGBColor","r","Math","floor","random","g","b","systemFontFamilies","select","ios","android","default","size","fontFamily","fontStyle","fontWeight","createParagraph","text","paragraphStyle","textAlign","Center","fontFamilies","paragraph","ParagraphBuilder","Make","pushStyle","addText","pop","build"],"sourceRoot":"../../../src","sources":["skia/common.ts"],"mappings":"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","ignoreList":[]}
|