Skip to content

Commit

Permalink
Use actual data on chart widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@msfstef
msfstef committed Dec 9, 2024
1 parent a047dc1 commit 94f64e0
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 53 deletions.
88 changes: 35 additions & 53 deletions website/src/components/ScalabilityChart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import { ref, onMounted, watch, markRaw } from "vue"
import { Chart } from "chart.js/auto"
import benchmarkData from "../../static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json"
function getComputedStyleValue(name) {
if (typeof window !== "undefined") {
Expand All @@ -17,47 +18,20 @@ function formatMetricValue(metricName, value) {
return `${value}%`
case "syncServiceMemory":
case "postgresMemory":
return `${value} MB`
return humanizeBytes(value)
case "syncServiceStorage":
return `${value} GB`
return humanizeBytes(value)
}
}
// TODO: Use actual data
const staticData = {
60: {
clients: [0, 100000, 200000, 300000, 400000, 500000],
latency99: [50, 60, 70, 80, 90, 100],
latency95: [40, 50, 60, 70, 80, 90],
latencyMean: [30, 40, 50, 60, 70, 80],
syncServiceCPU: [10, 20, 30, 40, 50, 60],
syncServiceMemory: [200, 300, 400, 500, 600, 700],
syncServiceStorage: [100, 150, 200, 250, 300, 350],
postgresCPU: [5, 10, 15, 20, 25, 30],
postgresMemory: [50, 100, 150, 200, 250, 300],
},
1000: {
clients: [0, 100000, 200000, 300000, 400000, 500000],
latency99: [60, 70, 80, 90, 100, 110],
latency95: [50, 60, 70, 80, 90, 100],
latencyMean: [40, 50, 60, 70, 80, 90],
syncServiceCPU: [15, 25, 35, 45, 55, 65],
syncServiceMemory: [250, 350, 450, 550, 650, 750],
syncServiceStorage: [120, 170, 220, 270, 320, 370],
postgresCPU: [7, 12, 17, 22, 27, 32],
postgresMemory: [60, 110, 160, 210, 260, 310],
},
5000: {
clients: [0, 100000, 200000, 300000, 400000, 500000],
latency99: [70, 80, 90, 100, 110, 120],
latency95: [60, 70, 80, 90, 100, 110],
latencyMean: [50, 60, 70, 80, 90, 100],
syncServiceCPU: [20, 30, 40, 50, 60, 70],
syncServiceMemory: [300, 400, 500, 600, 700, 800],
syncServiceStorage: [140, 190, 240, 290, 340, 390],
postgresCPU: [10, 15, 20, 25, 30, 35],
postgresMemory: [70, 120, 170, 220, 270, 320],
},
function humanizeBytes(bytes, decimals = 0) {
if (bytes < 0) throw new Error("Byte value cannot be negative.")
const units = ["B", "KB", "MB", "GB"]
const factor = 1024
if (bytes === 0) return `0 B`
const index = Math.floor(Math.log(bytes) / Math.log(factor))
const size = bytes / Math.pow(factor, index)
return `${size.toFixed(decimals)} ${units[index]}`
}
export default {
Expand All @@ -73,25 +47,33 @@ export default {
const chartInstance = ref(null)
const latencyOptions = [
{ label: "Latency (99th percentile)", value: "latency99" },
{ label: "Latency (95th percentile)", value: "latency95" },
{ label: "Latency (min)", value: "latencyMin" },
{ label: "Latency (95th percentile)", value: "latencyP95" },
{ label: "Latency (99th percentile)", value: "latencyP99" },
{ label: "Latency (mean)", value: "latencyMean" },
]
const txRateOptions = Object.keys(staticData).map((key) => ({
label: `${key} txs per sec`,
value: key,
}))
const txRateOptions = Object.keys(benchmarkData)
.sort()
.map((key) => ({
label: `Workload (${parseInt(key)} req/s)`,
value: key,
}))
const metricOptions = [
{ label: "Sync Service CPU", value: "syncServiceCPU" },
{ label: "Sync Service Memory", value: "syncServiceMemory" },
{ label: "Sync Service Storage", value: "syncServiceStorage" },
{ label: "Sync service CPU", value: "syncServiceCPU" },
{ label: "Sync service memory", value: "syncServiceMemory" },
{ label: "Sync service storage", value: "syncServiceStorage" },
{ label: "Postgres CPU", value: "postgresCPU" },
{ label: "Postgres Memory", value: "postgresMemory" },
]
{ label: "Postgres memory", value: "postgresMemory" },
].filter((option) => option.value in benchmarkData[txRateOptions[0].value])
const selectedLatency = ref("latency95")
const selectedTxRate = ref(1000)
const selectedMetric = ref("syncServiceMemory")
const selectedLatency = ref("latencyP95")
const selectedTxRate = ref(
txRateOptions[Math.floor(txRateOptions.length / 2)].value
)
const selectedMetric = ref(
metricOptions[Math.floor(metricOptions.length / 2)].value
)
const brandColor1 = getComputedStyleValue("--electric-color")
const brandColor2 = getComputedStyleValue("--vp-c-brand-1")
Expand All @@ -101,7 +83,7 @@ export default {
createChart()
return
}
const data = staticData[selectedTxRate.value]
const data = benchmarkData[selectedTxRate.value]
const labels = data.clients
const latencyData = data[selectedLatency.value]
const metricData = data[selectedMetric.value]
Expand All @@ -117,7 +99,7 @@ export default {
chartInstance.value.destroy()
}
const data = staticData[selectedTxRate.value]
const data = benchmarkData[selectedTxRate.value]
const labels = data.clients
const latencyData = data[selectedLatency.value]
const metricData = data[selectedMetric.value]
Expand Down
1 change: 1 addition & 0 deletions website/static/data/benchmarks/cdn_perf_benchmark_2024-12-09.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"01":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[134410956.15875081,130496122.89908257,131894534.22881356,135630697.91902834,129499521.71333702,138155825.94741967,134175098.45115453,137554435.50230415,133581181.98016781,140547456.79595278],"latencyP99":[906.4,164.0,161.0,313.0,289.2,149.4,148.0,426.3,588.5,762.3],"latencyP95":[680.0,141.0,136.0,137.0,140.0,136.0,136.0,137.0,138.0,145.0],"latencyMin":[38,40,39,39,39,39,39,39,29,39],"latencyMean":[169.0,111.0,112.0,110.0,109.0,103.0,98.0,103.0,107.0,108.0]},"08":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[140908443.28082192,144824390.15325670,141254914.39000961,147019373.25811966,143461288.40404040,137469823.27204503,140446023.46534653,141577913.25160110,146528775.69824561,142434288.30030030],"latencyP99":[497.4,555.7,599.5,745.2,636.4,633.0,680.7,631.0,642.0,659.0],"latencyP95":[372.0,430.0,433.0,470.0,494.8,474.0,497.0,525.0,573.0,603.0],"latencyMin":[53,49,48,47,37,39,40,41,37,37],"latencyMean":[184.0,198.0,195.0,193.0,194.0,244.0,325.0,387.0,422.0,411.0]},"16":{"clients":[100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000],"syncServiceMemory":[183168384.36908881,257632226.58088931,142978966.67489712,160860059.81069959,154866966.74385965,149829325.75898520,188003115.93131643,181152340.15866388,209312369.83443223,213181084.52704577],"latencyP99":[946.2,1227.5,304.0,331.0,399.0,318.0,332.0,371.0,410.0,484.7],"latencyP95":[481.9,908.8,239.0,256.0,289.0,256.0,285.0,321.0,367.0,416.0],"latencyMin":[56,70,38,38,39,37,39,35,45,41],"latencyMean":[212.5,304.5,166.0,172.0,185.0,176.0,204.0,228.0,252.0,288.0]}}

0 comments on commit 94f64e0

Please sign in to comment.