add alternate chart layout for narrow screens

This commit is contained in:
Arthur Lu 2023-10-05 16:38:25 +00:00
parent c5c54b0691
commit a18cc5f39c
3 changed files with 71 additions and 10 deletions

View File

@ -16,23 +16,23 @@
#resource-container { #resource-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, calc(100% / 6)); grid-template-columns: repeat(auto-fill, calc(100% / 6));
grid-gap: 0px; grid-gap: 0;
justify-content: space-between; justify-content: space-between;
} }
} }
@media screen and (width <= 1264px) and (width >= 480px) { @media screen and (width <= 1264px) and (width >= 680px) {
#resource-container { #resource-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 200px); grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 0px; grid-gap: 0;
justify-content: space-between; justify-content: space-between;
} }
} }
@media screen and (width <= 480px) { @media screen and (width <= 680px) {
#resource-container { #resource-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0px; gap: 0;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
} }

View File

@ -98,6 +98,8 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
}, },
ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}` ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
}; };
chart.style = "margin: 10px;";
chart.responsive = "680px";
} }
function parseNumber (value, unitData) { function parseNumber (value, unitData) {

View File

@ -1,31 +1,90 @@
class CustomChart extends HTMLElement { class CustomChart extends HTMLElement {
constructor (data) { constructor () {
super(); super();
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
* {
box-sizing: border-box;
font-family: monospace;
}
figure {
margin: 0;
}
div { div {
min-width: 200px;
max-width: 400px; max-width: 400px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
figcaption {
text-align: center;
margin-top: 10px;
display: flex;
flex-direction: column;
}
</style> </style>
<div> <style id="responsive-style" media="not all">
<canvas> figure {
</div> display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
div {
max-height: 1lh;
}
figcaption {
margin: 0;
margin-left: 10px;
display: flex;
flex-direction: row;
gap: 1ch;
font-size: small;
}
</style>
<figure>
<div>
<canvas>
</div>
<figcaption></figcaption>
</figure>
`; `;
this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
this.canvas = this.shadowRoot.querySelector("canvas"); this.canvas = this.shadowRoot.querySelector("canvas");
this.caption = this.shadowRoot.querySelector("figcaption");
} }
set data (data) { set data (data) {
if (data.chart?.options?.plugins?.title.display) {
data.chart.options.plugins.title.display = false;
for (let line of data.chart.options.plugins.title.text) {
this.caption.innerHTML += `<span>${line}</span>`
}
}
this.canvas.role = "img"; this.canvas.role = "img";
this.canvas.ariaLabel = data.ariaLabel; this.canvas.ariaLabel = data.ariaLabel;
createChart(this.canvas, data.chart); createChart(this.canvas, data.chart);
} }
get data () { get data () {
return null; return null;
} }
set responsive (breakpoint) {
this.breakpoint = breakpoint;
if (breakpoint) {
this.responsiveStyle.media = `screen and (width <= ${breakpoint})`;
}
else {
this.responsiveStyle.media = "not all";
}
}
get responsive () {
return this.breakpoint;
}
} }
function createChart (ctx, data) { function createChart (ctx, data) {