import { Card } from "@windmill/react-ui"; import React from "react"; import { ChevronsDown, ChevronsUp } from "react-feather"; import { animated, config, useSpring } from "react-spring"; function RadialCard({ label, count, current, previous, col = "" }) { const current_used = Math.round((current.used / current.total) * 100); const previous_used = Math.round((previous.used / previous.total) * 100); const diff = current_used - previous_used; const _p = Math.round((current.used / current.total) * 100); const { used, total, progress, innerProgress } = useSpring({ from: { used: 0, total: 0, progress: "0, 100", innerProgress: 0 }, to: { used: current.used, total: current.total, progress: `${Number.isNaN(_p) ? 0 : _p}, 100`, innerProgress: Number.isNaN(_p) ? 0 : _p, }, delay: 0, config: config.slow, }); const circlePath = `M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831`; return ( <Card className={`flex items-center justify-between ${col}`}> <div className="relative flex content-center justify-center m-2 w-4/5"> <svg viewBox="0 0 36 36" className="w-4/5"> <path className="text-gray-100 dark:text-gray-400 stroke-current stroke-2" fill="none" d={circlePath} /> <animated.path className="text-primary-500 stroke-current stroke-2" fill="none" strokeDasharray={progress} d={circlePath} /> </svg> <div className="absolute inline-flex flex-col items-center self-center w-3/5 text-center text-sm xl:text-lg"> <p className="text-center dark:text-gray-400 text-gray-600 text-xxs font-medium xl:text-xs"> {label} </p> <div className="space-x-1"> <animated.span className="text-center dark:text-gray-200 text-gray-700 font-semibold"> {innerProgress.interpolate((x) => `${Math.round(x)}%`)} </animated.span> {count > 0 && !Number.isNaN(diff) && diff !== 0 && (diff > 0 ? ( <span className="text-red-400"> <ChevronsUp className="inline h-full" /> {Math.abs(diff)}% </span> ) : ( <span className="text-primary-400"> <ChevronsDown className="inline h-full" /> {Math.abs(diff)}% </span> ))} </div> </div> </div> <div style={{ direction: "rtl" }} className="grid grid-cols-1 mr-4 w-1/4 text-right space-y-1 xl:space-y-2" > <div className="flex-col"> <p className="dark:text-gray-400 text-gray-600 text-xs font-medium xl:text-sm"> Used </p> <animated.p className="dark:text-gray-200 text-gray-700 text-xs font-semibold xl:text-lg"> {used.interpolate((x) => Math.round(x))} </animated.p> </div> <div className="flex-col"> <p className="dark:text-gray-400 text-gray-600 text-xs font-medium xl:text-sm"> Total </p> <animated.p className="dark:text-gray-200 text-gray-700 text-xs font-semibold xl:text-lg"> {total.interpolate((x) => Math.round(x))} </animated.p> </div> </div> </Card> ); } export default RadialCard;