d3 implementation of progress pie chart

package.json

@@ -12,6 +12,7 @@
     "@percy/playwright": "1.0.4",
     "@playwright/test": "1.39.0",
     "@types/d3-axis": "3.0.6",
+    "@types/d3-shape": "3.0.0",
     "@types/d3-scale": "4.0.8",
     "@types/d3-selection": "3.0.10",
     "@types/eventemitter3": "1.2.0",
@@ -26,6 +27,7 @@
     "cspell": "7.3.8",
     "css-loader": "6.8.1",
     "d3-axis": "3.0.0",
+    "d3-shape": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
     "eslint": "8.56.0",

src/plugins/timelist/ExpandedViewItem.vue

@@ -37,6 +37,18 @@
     </div>
     <div class="c-tli__graphic">
       <svg viewBox="0 0 100 100">
+        <g aria-label="Activity in progress" class="c-tli__graphic__pie">
+          <circle class="c-svg-progress__bg" r="50" cx="50" cy="50"></circle>
+          <path ref="progressElement" class="c-svg-progress__progress"></path>
+          <circle
+            class="c-svg-progress__ticks"
+            r="40"
+            cx="50"
+            cy="50"
+            stroke-dasharray="3 7.472"
+          ></circle>
+          <rect class="c-svg-progress__sweep-hand" x="48" y="18" width="4" height="27"></rect>
+        </g>
         <path
           aria-label="Activity complete"
           class="c-tli__graphic__check"
@@ -80,6 +92,7 @@ import _ from 'lodash';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import { CURRENT_CSS_SUFFIX, FUTURE_CSS_SUFFIX, PAST_CSS_SUFFIX } from './constants.js';
+import { updateProgress } from './svg-progress.js';
 
 const ITEM_COLORS = {
   [CURRENT_CSS_SUFFIX]: '#ffcc00',
@@ -220,6 +233,10 @@ export default {
     },
     updateTimestamp(time) {
       this.timestamp = time;
+      const progressElement = this.$refs.progressElement;
+      if (this.isInProgress && progressElement) {
+        updateProgress(this.start, this.end, this.timestamp, progressElement);
+      }
       this.formatItemLabel();
     },
     formatItemLabel() {

src/plugins/timelist/svg-progress.js

@@ -0,0 +1,55 @@
+const PI = Math.PI; // Use the built-in constant directly
+const DEGREES_TO_RADIANS = PI / 180; // Calculate the conversion factor
+
+import { arc } from 'd3-shape';
+
+const SVG_VB_SIZE = 100;
+const UPDATE_RATE_MS = 1000; // 1 Hz
+
+function progToDegrees(progVal) {
+  return (progVal / 100) * 360;
+}
+
+function renderProgress(progressPercent, element) {
+  let startAngleInDegrees = 0;
+  let endAngleInDegrees = progToDegrees(progressPercent);
+  // Check if the arc forms a full circle
+  const isFullCircle = Math.abs(endAngleInDegrees - startAngleInDegrees) === 360;
+
+  if (isFullCircle) {
+    endAngleInDegrees--;
+  }
+
+  // Convert angles to radians for calculations
+  const startAngleInRadians = startAngleInDegrees * DEGREES_TO_RADIANS;
+  const endAngleInRadians = endAngleInDegrees * DEGREES_TO_RADIANS;
+
+  // d3's arc API does the work for us
+  const progressArc = arc();
+  progressArc.innerRadius(0);
+  progressArc.outerRadius(SVG_VB_SIZE / 2);
+  progressArc.startAngle(startAngleInRadians);
+  progressArc.endAngle(endAngleInRadians);
+  element.setAttribute('d', progressArc());
+}
+
+export function updateProgress(start, end, timestamp, element) {
+  const duration = end - start;
+  const update_per_cycle = 100 / (duration / UPDATE_RATE_MS);
+  let progressPercent = 0;
+  if (timestamp > start) {
+    // Now is after activity start datetime
+    if (timestamp > end) {
+      progressPercent = 100;
+    } else {
+      progressPercent = (1 - (end - timestamp) / duration) * 100;
+    }
+  }
+  if (progressPercent < 100) {
+    // If the remaining percent is less than update_per_cycle, round up to 100%.
+    // Otherwise, increment by update_per_cycle.
+    progressPercent =
+      100 - progressPercent < update_per_cycle ? 100 : (progressPercent += update_per_cycle);
+  }
+  renderProgress(progressPercent, element);
+}

src/plugins/timelist/timelist.scss

@@ -308,6 +308,7 @@
 
     &__progress {
         fill: $colorInProgressFgEm;
+        transform: translateX(50%) translateY(50%);
     }
 
     &__sweep-hand {