Skip to content
This repository was archived by the owner on Jan 6, 2026. It is now read-only.

Place chart description above chart on mobile #25

Merged
pyropy merged 3 commits into from
Feb 6, 2025
Merged

Place chart description above chart on mobile #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c3aaa5e
Make chart description look better/responsive on mobile
pyropy Feb 3, 2025
497f5c4
Apply style to grid rows
pyropy Feb 3, 2025
2a01d65
Fix chart width
pyropy Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 44 additions & 48 deletions src/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,17 +184,6 @@ const percentiles = Object.entries(SparkMinerRsrSummaries).flatMap(

<div class="divider"></div>

<div class="grid grid-cols-2">
<div>
<h4>Spark Retrieval Result Codes</h4>
<body>This section shows the Spark Retrieval Result Codes breakdown.</body>
</div>
<div>
<h4>Spark Time To First Byte (TTFB)</h4>
<body>The section shows the median of all median TTFB values from all retrieval tasks.</body>
</div>
</div>

```js
// prettier-ignore
const mapping = {
Expand Down Expand Up @@ -260,44 +249,51 @@ const tidy = clone(SparkRetrievalResultCodes).flatMap(({ day, rates }) => {
```

<div class="grid grid-cols-2" style="grid-auto-rows: 500px;">
<div class="card">
${Plot.plot({
x: {label: null, type: "band", ticks: "week" },
y: {
percent: true
},
color: {
scheme: "Accent",
legend: "swatches",
width: 2000,
label: "Codes"
},
marks: [
Plot.rectY(tidy, {
x: "day",
y: "rate",
fill: "code",
offset: "normalize",
sort: {color: null, x: "-y" },
interval: 'day'
})
]
})}
</div>
<div class="card">
<div>
<h4>Spark Retrieval Result Codes</h4>
<body>This section shows the Spark Retrieval Result Codes breakdown.</body>
<div class="card">
${Plot.plot({
title: 'Time to First Byte (ms)',
// TODO: Change tick to month once we have more data
x: { type: 'utc', ticks: 'day' },
y: { grid: true, zero: true},
marks: [
Plot.lineY(SparkRetrievalTimes, {
x: 'day',
y: 'ttfb_ms',
stroke: "#FFBD3F",
})
]
})}
x: {label: null, type: "band", ticks: "week" },
y: {
percent: true
},
color: {
scheme: "Accent",
legend: "swatches",
label: "Codes"
},
marks: [
Plot.rectY(tidy, {
x: "day",
y: "rate",
fill: "code",
offset: "normalize",
sort: {color: null, x: "-y" },
interval: 'day'
})
]
})}
</div>
</div>
<div>
<h4>Spark Time To First Byte (TTFB)</h4>
<body>The section shows the median of all median TTFB values from all retrieval tasks.</body>
<div class="card">
${Plot.plot({
title: 'Time to First Byte (ms)',
// TODO: Change tick to month once we have more data
x: { type: 'utc', ticks: 'day' },
y: { grid: true, zero: true},
marks: [
Plot.lineY(SparkRetrievalTimes, {
x: 'day',
y: 'ttfb_ms',
stroke: "#FFBD3F",
})
]
})}
</div>
</div>
</div>

Expand Down
15 changes: 6 additions & 9 deletions src/provider/[provider].md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,22 +28,18 @@ const end = view(Inputs.date({ label: 'End', value: getDateXDaysAgo(1) }))

<h3>Stats for ${observable.params.provider}</h3>

<div class="grid grid-cols-2">
<div class="grid grid-cols-2" style="grid-auto-rows: 500px;">
<div>
<h4>Storage Provider Spark RSR Summary</h4>
<body>This section shows the storage provider Spark Retrieval Success Rate Score summary.</body>
<div class="card">${
resize((width) => LineGraph(rsrData, {width, title: "Retrieval Success Rate", start, end }))
}</div>
</div>
<div>
<h4>Storage Provider Spark Time To First Byte (TTFB)</h4>
<body>The section shows the median of all TTFB values for successful retrieval checks of this storage provider.</body>
</div>
</div>

<div class="grid grid-cols-2" style="grid-auto-rows: 500px;">
<div class="card">${
resize((width) => LineGraph(rsrData, {width, title: "Retrieval Success Rate", start, end }))
}</div>
<div class="card">
<div class="card">
${Plot.plot({
title: 'Time to First Byte (ms)',
// TODO: Change tick to month once we have more data
Expand All @@ -57,6 +53,7 @@ const end = view(Inputs.date({ label: 'End', value: getDateXDaysAgo(1) }))
})
]
})}
</div>
</div>
</div>

Expand Down