61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
// ClockProgress.tsx
|
|
import React from 'react';
|
|
import Svg, { Circle, Path } from 'react-native-svg';
|
|
|
|
interface ClockProgressProps {
|
|
degree: number; // Valor entre 0 y 360
|
|
width: number; // Ancho del SVG
|
|
height: number; // Alto del SVG
|
|
color: string;
|
|
}
|
|
|
|
function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
|
|
const angleRad = (angleDeg - 90) * Math.PI / 180;
|
|
return {
|
|
x: cx + r * Math.cos(angleRad),
|
|
y: cy + r * Math.sin(angleRad)
|
|
};
|
|
}
|
|
|
|
function describeSector(cx: number, cy: number, r: number, startAngle: number, endAngle: number) {
|
|
const start = polarToCartesian(cx, cy, r, endAngle);
|
|
const end = polarToCartesian(cx, cy, r, startAngle);
|
|
const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
|
|
|
|
return [
|
|
`M ${cx},${cy}`,
|
|
`L ${start.x},${start.y}`,
|
|
`A ${r},${r} 0 ${largeArc} 0 ${end.x},${end.y}`,
|
|
'Z'
|
|
].join(' ');
|
|
}
|
|
|
|
const ClockProgress: React.FC<ClockProgressProps> = ({ degree, width, height, color }) => {
|
|
const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);
|
|
|
|
return (
|
|
<Svg width={width} height={height} viewBox="0 0 200 200">
|
|
<Circle cx="100" cy="100" r="70" fill="none" />
|
|
<Circle cx="100" cy="100" r="90" fill="none" stroke={color} strokeWidth="10" />
|
|
<Path d={path} fill={color} />
|
|
</Svg>
|
|
);
|
|
};
|
|
|
|
export default ClockProgress;
|
|
|
|
// Create a exported function that returns the SVG as a string
|
|
export function getClockProgressSVG(degree: number, width: number, height: number, color: string): string {
|
|
|
|
const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);
|
|
|
|
const svg = (
|
|
`<svg width="${width}" height="${height}" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="100" cy="100" r="70" fill="none"/>
|
|
<circle cx="100" cy="100" r="90" fill="none" stroke="${color}" stroke-width="10"/>
|
|
<path d="${path}" fill="${color}"/>
|
|
</svg>`
|
|
);
|
|
return svg;
|
|
}
|