fix(server): thinner gauge marks as designed

GoogleChrome · Nov 8, 2019 · e16ce82 · e16ce82
1 parent 2dff3b4
commit e16ce82
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/server/src/ui/components/gauge.css b/packages/server/src/ui/components/gauge.css
@@ -34,7 +34,7 @@
 }
 
 .gauge-arc__indicator {
-  --indicator-width: 6px;
+  --indicator-width: 3px;
   --indicator-height: 12px;
 
   position: absolute;

diff --git a/packages/server/src/ui/components/gauge.jsx b/packages/server/src/ui/components/gauge.jsx
@@ -19,9 +19,12 @@ export const Gauge = props => {
   // 352 is ~= 2 * Math.PI * gauge radius (56)
   // https://codepen.io/xgad/post/svg-radial-progress-meters
   // score of 50: `stroke-dasharray: 176 352`;
-  const baseStrokeDasharray = `${props.score * 352} 352`;
+  // The roundcap on the arc makes it extend slightly past where it should, so we need to adjust it by a few pts.
+  const baseDasharrayScore = Math.max(0, props.score * 352 - 2);
+  const baseStrokeDasharray = `${baseDasharrayScore} 352`;
   const delta = Math.abs(baseScore - score);
-  const deltaStrokeDasharray = `${(delta / 100) * 352} 352`;
+  const deltaDasharrayScore = Math.max(0, (delta / 100) * 352 - 2);
+  const deltaStrokeDasharray = `${deltaDasharrayScore} 352`;
   const deltaTransform = `rotate(${(Math.min(score, baseScore) / 100) * 360}deg)`;
   const indicatorTransform = `rotate(${props.score * 360}deg)`;
 
@@ -38,7 +41,10 @@ export const Gauge = props => {
             style={{strokeDasharray: baseStrokeDasharray}}
           />
         </svg>
-        <div className="gauge-arc__delta-wrapper" style={{transform: deltaTransform}}>
+        <div
+          className="gauge-arc__delta-wrapper"
+          style={{transform: deltaTransform, display: deltaDasharrayScore < 1 ? 'none' : 'block'}}
+        >
           <svg viewBox="0 0 120 120">
             <circle
               className="gauge-arc__arc"