diff --git a/docs/chart.html b/docs/chart.html new file mode 100644 index 0000000000..a6001a78d9 --- /dev/null +++ b/docs/chart.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + Lambda Cold Starts analysis + + + + + + + + +
+

Lambda Cold Starts benchmark
by maxday

+

Visualize 10 Cold Starts for each runtime, updated daily. +
[How to deploy a Rust Lambda function?] +
[How does it work?] +
🏎️ Speed comparison + +

+

+ + | + + +
+ + | + + +
+ + | + | + | + + +
+ us-east1 +
+ Last update: loading +

+

+ +

Selected Metric:

+ + + + + + +

+ + +
+
+ runtime name +
+ ❄ + 💾 + ⚡ +
+ +
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/docs/chart.js b/docs/chart.js new file mode 100644 index 0000000000..2afd960b27 --- /dev/null +++ b/docs/chart.js @@ -0,0 +1,114 @@ +import { + dataManager, + getCurrentMemorySize, + getCurrentArchitecture, + getCurrentPackageType, + setupFilterEvent, + load +} from "./shared.js"; + +let chart = null; + +const animate = async dataManager => { + try { + const memorySize = getCurrentMemorySize(); + const architecture = getCurrentArchitecture(); + const packageType = getCurrentPackageType(); + const selectedMetric = getCurrentMetric(); + if (!dataManager.fetchData) { + await load(dataManager); + } + const data = dataManager.fetchData; + document.getElementById("lastUpdate").innerHTML = data.metadata.generatedAt; + const promiseArray = []; + let i = 0; + data.runtimeData.sort((a, b) => a.acd - b.acd); + const filteredData = data.runtimeData.filter( + r => r.m == memorySize && r.a === architecture && r.p === packageType + ); + + buildChart(filteredData, selectedMetric); + + await Promise.all(promiseArray); + } catch (e) { + console.error(e); + } +}; + +const getCurrentMetric = () => { + const buttons = document.getElementsByClassName("metricButton"); + for (const btn of buttons) { + if (btn.classList.contains("bg-success")) { + return btn.id; + } + } + return "Cold Start"; +}; + +const loaded = async dataManager => { + setupFilterEvent(".memorySizeBtn", dataManager, updateFilter); + setupFilterEvent(".architectureBtn", dataManager, updateFilter); + setupFilterEvent(".packageTypeBtn", dataManager, updateFilter); + setupFilterEvent(".metricButton", dataManager, updateFilter); + + await animate(dataManager); +}; + +const buildChart = (filteredData, selectedMetric) => { + const categories = filteredData.map(data => data.d); + + let seriesData = []; + if (selectedMetric == "avgDuration") { + seriesData = filteredData.map(data => data.ad); + } else if (selectedMetric == "coldStart") { + seriesData = filteredData.map(data => data.acd); + } else { + seriesData = filteredData.map(data => data.mu); + } + + var options = { + series: [ + { + name: selectedMetric, + data: seriesData + } + ], + chart: { + height: "600px", + type: "bar" + }, + plotOptions: { + bar: { + borderRadius: 4, + horizontal: true + } + }, + dataLabels: { + enabled: false + }, + xaxis: { + categories: categories + } + }; + + if (!chart) { + chart = new ApexCharts(document.querySelector("#chart"), options); + chart.render(); + } else { + chart.updateOptions(options); + } +}; + +document.addEventListener( + "DOMContentLoaded", + dataManager => loaded(dataManager), + false +); + +export const updateFilter = async (e, className, dataManager) => { + const newValue = e.target.id; + const btns = document.querySelectorAll(className); + btns.forEach(el => el.classList.remove("bg-success")); + document.getElementById(newValue).classList.add("bg-success"); + await animate(dataManager); +}; diff --git a/docs/css/custom.css b/docs/css/custom.css index e2745121cd..9c4371edef 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -68,4 +68,24 @@ hr { } .badge:empty { display: inline-block; -} \ No newline at end of file +} + +.chart-container { + display: flex; + align-items: center; + justify-content: center; +} + +.chart { + width: 100%; + max-height: 400px; +} + + + +@media (min-width: 768px) { + .chart { + min-height: 1000px; + max-width: 90vw; + } +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 943acc811a..e0924760c1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,7 +24,9 @@ Lambda Cold Starts analysis - + + + @@ -34,6 +36,7 @@

Lambda Cold Starts benchmark
by Visualize 10 Cold Starts for each runtime, updated daily.
[How to deploy a Rust Lambda function?]
[How does it work?] +
📈 Chart visualization