Add percent display

components/Progress.tsx

@@ -19,6 +19,13 @@ type BarProps = {
     striped?: boolean;
     animated?: boolean;
     class?: string;
+    label?: string;
+    set_label?: (
+        per: number,
+        value: number,
+        max: number,
+        min: number,
+    ) => string;
 };
 
 class ProgressBar extends Component<BarProps> {
@@ -38,7 +45,12 @@ class ProgressBar extends Component<BarProps> {
         const max = this.context?.max || 100;
         const min = this.context?.min || 0;
         const v = this.props.value;
-        const style = `width: ${(v - min) / (max - min) * 100}%;`;
+        const per = (v - min) / (max - min) * 100;
+        const style = `width: ${per}%;`;
+        let label = this.props.label;
+        if (this.props.set_label) {
+            label = this.props.set_label(per, v, max, min);
+        }
         return (
             <div
                 class={cls}
@@ -47,7 +59,9 @@ class ProgressBar extends Component<BarProps> {
                 aria-valuenow={v}
                 aria-valuemin={min}
                 aria-valuemax={max}
-            />
+            >
+                {label}
+            </div>
         );
     }
 }

components/Task.tsx

@@ -6,6 +6,7 @@ import t from "../server/i18n.ts";
 import { tw } from "twind";
 import Progress from "./Progress.tsx";
 import { TaskStatusFlag } from "./TaskFilterBar.tsx";
+import { filesize } from "filesize";
 
 type Props = {
     task: TaskDetail;
@@ -76,8 +77,15 @@ export default class Task extends Component<Props, State> {
                         <Progress.Bar
                             class="bg-success"
                             value={d.downloaded_page}
+                            set_label={(per, v) =>
+                                `${v} (${per}%)`}
+                        />
+                        <Progress.Bar
+                            class="bg-danger"
+                            value={d.failed_page}
+                            set_label={(per, v) =>
+                                `${v} (${per}%)`}
                         />
-                        <Progress.Bar class="bg-danger" value={d.failed_page} />
                     </Progress>
                 );
                 progress_div = (
@@ -94,6 +102,13 @@ export default class Task extends Component<Props, State> {
                                         <Progress.Bar
                                             class="bg-success"
                                             value={v.downloaded}
+                                            set_label={(per, v) =>
+                                                `${
+                                                    filesize(v, {
+                                                        base: 2,
+                                                        round: 3,
+                                                    })
+                                                } (${per}%)`}
                                         />
                                     </Progress>
                                 </div>

import_map.json

@@ -26,6 +26,7 @@
         "randomstring": "https://esm.sh/[email protected]",
         "@material/web/": "https://unpkg.lifegpc.workers.dev/@material/[email protected]/",
         "@lit-labs/react/": "https://esm.sh/@lit-labs/[email protected]/",
-        "bootstrap/": "https://esm.sh/[email protected]/"
+        "bootstrap/": "https://esm.sh/[email protected]/",
+        "filesize": "https://esm.sh/[email protected]"
     }
 }