polish: add upper bound and date format for chart axis

Fixes microsoft/vscode#107798

Author: connor4312

packages/vscode-js-profile-flame/package.json

@@ -81,6 +81,7 @@
           "debug.flameGraph.realtimePollInterval": {
             "type": "integer",
             "minimum": 0.5,
+            "maximum": 3600,
             "default": 1,
             "description": "How often (in seconds) to refresh statistics from the runtime"
           },

packages/vscode-js-profile-flame/src/realtime/chart.ts

@@ -6,6 +6,7 @@ import { Metric } from './baseMetric';
 import styles from './chart.css';
 import { Configurator } from './configurator';
 import { FrameCanvas, Sizing } from './frameCanvas';
+import { durationFormat } from './metrics';
 import { Settings } from './settings';
 
 const naturalAspectRatio = 16 / 9;
@@ -197,7 +198,7 @@ export class Chart {
 
   private applySettings() {
     const { leftTime, labelList, valueContainer } = this.elements;
-    leftTime.innerText = `${Math.round(this.settings.value.viewDuration / 1000)}s ago`;
+    leftTime.innerText = `${durationFormat(this.settings.value.viewDuration / 1000)} ago`;
     this.setSeries(labelList, valueContainer);
   }
 

packages/vscode-js-profile-flame/src/realtime/metrics.ts

@@ -22,6 +22,24 @@ const smallPercentFormat = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 2,
 });
 
+const durationRawFormat = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 1,
+});
+
+export const durationFormat = (seconds: number) => {
+  if (seconds < 120) {
+    return `${durationRawFormat.format(seconds)}s`;
+  }
+
+  const minutes = seconds / 60;
+  if (minutes < 120) {
+    return `${durationRawFormat.format(minutes)}m`;
+  }
+
+  const hours = minutes / 60;
+  return `${durationRawFormat.format(hours)}h`;
+};
+
 export class CpuMetric extends DerivativeMetric {
   public update(timestamp: number, metrics: IDAMetrics): void {
     if (metrics.cpu /* node */) {