feat: improve progress bar svg based on https://x.com/devongovett/sta…

…tus/1835692034104918053/photo/1
felixmosh · Sep 17, 2024 · 236065f · 236065f
1 parent 51bf3ba
commit 236065f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/packages/ui/src/components/JobCard/Progress/Progress.module.css b/packages/ui/src/components/JobCard/Progress/Progress.module.css
@@ -4,15 +4,12 @@
 }
 
 .progress circle {
-  transform-origin: center;
   transition: stroke-dashoffset 500ms ease-in-out;
   fill: none;
-  stroke-width: 8;
-  stroke-linecap: butt;
 }
 
 .progress text {
-  font-size: 2.5rem;
+  font-size: 1.5rem;
   font-family: inherit;
   font-weight: 300;
   fill: #a0aec0;

diff --git a/packages/ui/src/components/JobCard/Progress/Progress.tsx b/packages/ui/src/components/JobCard/Progress/Progress.tsx
@@ -4,32 +4,35 @@ import cn from 'clsx';
 import { Status } from '@bull-board/api/typings/app';
 import { STATUSES } from '@bull-board/api/src/constants/statuses';
 
-const radius = 65;
-const circumference = 2 * Math.PI * radius;
-
 interface ProgressProps {
   percentage: number;
+  strokeWidth?: number;
   status: Status;
   className?: string;
 }
 
-export const Progress = ({ percentage, status, className }: ProgressProps) => {
-  const circleProps = {
-    cx: 70,
-    cy: 70,
-    r: radius,
+export const Progress = ({ percentage, status, className, strokeWidth = 6 }: ProgressProps) => {
+  const commonProps = {
+    cx: '50%',
+    cy: '50%',
+    r: `calc(50% - ${strokeWidth / 2}px)`,
+    strokeWidth,
+    ['transform-origin']: 'center',
   };
   return (
-    <svg className={cn(s.progress, className)} viewBox="0 0 140 140">
-      <circle stroke="#E5E7EB" {...circleProps} />
+    <svg className={cn(s.progress, className)} width="100%" height="100%">
+      <circle stroke="#E5E7EB" {...commonProps} />
       <circle
         stroke={status === STATUSES.failed ? '#F56565' : '#48BB78'}
-        strokeDasharray={circumference}
-        strokeDashoffset={circumference - (circumference * percentage) / 100}
-        style={{ transform: 'rotate(-90deg)' }}
-        {...circleProps}
+        pathLength={100}
+        strokeDasharray={100}
+        strokeDashoffset={100 - percentage}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        transform="rotate(-90)"
+        {...commonProps}
       />
-      <text textAnchor="middle" x="74" y="88">
+      <text textAnchor="middle" dominantBaseline="middle" x="50%" y="50%">
         {Math.round(percentage)}%
       </text>
     </svg>