Show Median, P90, and P95 line in MermaidXYChart

yykamei · Apr 3, 2024 · c55d0dc · c55d0dc
1 parent 51e3d54
commit c55d0dc
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -29457,11 +29457,13 @@ class MermaidXYChart {
             seconds.unshift(mean);
         }
         const status = this.input.status ? ` for status=${this.input.status}` : "";
+        const { p50, p90, p95 } = this.getPercentiles();
         return `
 \`\`\`mermaid
 ---
 config:
     xyChart:
+        width: 900
         xAxis:
             labelPadding: 16
             labelFontSize: 8
@@ -29473,9 +29475,28 @@ xychart-beta
     x-axis [${xAxis.join(",")}]
     y-axis "Duration (in seconds)"
     bar [${seconds.join(",")}]
+    line [${seconds.map(() => p50).join(",")}]
+    line [${seconds.map(() => p90).join(",")}]
+    line [${seconds.map(() => p95).join(",")}]
 \`\`\`
 `;
     }
+    getPercentiles() {
+        const durations = this.runs
+            .filter((run) => !run.isOutlier)
+            .map((run) => run.duration.toSeconds())
+            .sort((a, b) => a - b);
+        const percentile = (p) => {
+            const index = Math.floor(p * durations.length);
+            // @ts-ignore
+            return durations[index];
+        };
+        return {
+            p50: percentile(0.5),
+            p90: percentile(0.9),
+            p95: percentile(0.95),
+        };
+    }
 }
 
 ;// CONCATENATED MODULE: ./src/main.ts

diff --git a/src/MermaidXYChart.ts b/src/MermaidXYChart.ts
@@ -2,6 +2,12 @@ import type { GitHubWorkflow } from "./GitHubWorkflow";
 import type { GitHubWorkflowRun } from "./GitHubWorkflowRun";
 import type { Input } from "./Input";
 
+type Percentiles = {
+	readonly p50: number;
+	readonly p90: number;
+	readonly p95: number;
+};
+
 export class MermaidXYChart {
 	constructor(
 		private readonly workflow: GitHubWorkflow,
@@ -38,6 +44,7 @@ export class MermaidXYChart {
 			seconds.unshift(mean);
 		}
 		const status = this.input.status ? ` for status=${this.input.status}` : "";
+		const { p50, p90, p95 } = this.getPercentiles();
 		return `
 \`\`\`mermaid
 ---
@@ -55,7 +62,29 @@ xychart-beta
     x-axis [${xAxis.join(",")}]
     y-axis "Duration (in seconds)"
     bar [${seconds.join(",")}]
+    line [${seconds.map(() => p50).join(",")}]
+    line [${seconds.map(() => p90).join(",")}]
+    line [${seconds.map(() => p95).join(",")}]
 \`\`\`
 `;
 	}
+
+	private getPercentiles(): Percentiles {
+		const durations = this.runs
+			.filter((run) => !run.isOutlier)
+			.map((run) => run.duration.toSeconds())
+			.sort((a, b) => a - b);
+
+		const percentile = (p: number): number => {
+			const index = Math.floor(p * durations.length);
+			// @ts-ignore
+			return durations[index];
+		};
+
+		return {
+			p50: percentile(0.5),
+			p90: percentile(0.9),
+			p95: percentile(0.95),
+		};
+	}
 }
diff --git a/tests/GitHubIssueContent.test.ts b/tests/GitHubIssueContent.test.ts
@@ -77,6 +77,9 @@ xychart-beta
     x-axis ["Feb 27"]
     y-axis "Duration (in seconds)"
     bar [4]
+    line [4]
+    line [4]
+    line [4]
 \`\`\`
 
 
@@ -96,6 +99,9 @@ xychart-beta
     x-axis ["Mar 27"]
     y-axis "Duration (in seconds)"
     bar [2]
+    line [2]
+    line [2]
+    line [2]
 \`\`\`
 `);
 	});

diff --git a/tests/MermaidXYChart.test.ts b/tests/MermaidXYChart.test.ts
@@ -100,6 +100,9 @@ xychart-beta
     x-axis ["Feb 19","Feb 20","Feb 21","Feb 22","Feb 23","Feb 24","Feb 25","Feb 26","Feb 27"]
     y-axis "Duration (in seconds)"
     bar [424,942,971,1055,911,734,684,658,815]
+    line [815,815,815,815,815,815,815,815,815]
+    line [1055,1055,1055,1055,1055,1055,1055,1055,1055]
+    line [1055,1055,1055,1055,1055,1055,1055,1055,1055]
 \`\`\`
 `);
 	});
@@ -148,6 +151,9 @@ xychart-beta
     x-axis ["Feb 19"]
     y-axis "Duration (in seconds)"
     bar [521]
+    line [521]
+    line [521]
+    line [521]
 \`\`\`
 `);
 	});