@figliolia/rn-donut-chart
Version:
An animated donut/pie chart library
61 lines (60 loc) • 2.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DonutChart = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
const Controller_1 = require("./Controller");
const Gradient_1 = require("./Gradient");
const Section_1 = require("./Section");
const Styles_1 = require("./Styles");
const useController_1 = require("./useController");
/**
* ### Donut Chart
*
* A component for creating beautiful responsive
* donuts using React Native
*
* ```tsx
* <DonutChart
* delay={0}
* duration={1500}
* strokeWidth={12}
* strokeLinecap="round"
* style={Styles.yourContrainerStyles}
* data={[{
* label: "rent",
* value: 2000,
* stroke: "rgb(228, 69, 69)",
* style: Styles.yourSVGStyles // such as shadow and stuff
* }]}
* easing={Easing.out(Easing.exp)}
* onMeasure={(dimensions: number) => {}}>
* {children}
* </DonutChart>
* ```
*/
exports.DonutChart = (0, react_1.memo)(function DonutChart({ data, style, children, onMeasure, delay = 0, duration = 1500, strokeWidth = 25, strokeLinecap = "round", easing = react_native_1.Easing.inOut(react_native_1.Easing.exp), }) {
const [width, setWidth] = (0, react_1.useState)(0);
const gap = (0, react_1.useMemo)(() => (data.length < 2 ? 0 : strokeWidth * 2), [strokeWidth, data.length]);
const center = (0, react_1.useMemo)(() => width / 2, [width]);
const radius = (0, react_1.useMemo)(() => (width - strokeWidth) / 2, [width, strokeWidth]);
const circumference = (0, react_1.useMemo)(() => 2 * Math.PI * radius, [radius]);
const controller = (0, useController_1.useController)(new Controller_1.Controller(data));
controller.update(data);
const onLayout = (0, react_1.useCallback)((e) => {
const { width } = e.nativeEvent.layout;
setWidth(width);
onMeasure === null || onMeasure === void 0 ? void 0 : onMeasure(width);
}, [onMeasure]);
return (<react_native_1.View onLayout={onLayout} style={[Styles_1.Styles.container, style, { height: width }]}>
<react_native_1.View style={Styles_1.Styles.inner}>
{width !== 0 &&
controller.data.map(({ label, style, stroke = "#000" }, i) => {
return (<Section_1.Section gap={gap} key={label} size={width} delay={delay} style={style} easing={easing} radius={radius} center={center} duration={duration} strokeWidth={strokeWidth} strokeLinecap={strokeLinecap} circumference={circumference} rotation={controller.angles[i]} value={controller.percentages[i]} renderPhase={controller.renderPhase} stroke={Controller_1.Controller.parseStroke(label, stroke)}>
{Controller_1.Controller.renderGradient(stroke) && (<Gradient_1.Gradient label={label} colors={stroke}/>)}
</Section_1.Section>);
})}
</react_native_1.View>
{children}
</react_native_1.View>);
});