Skip to content

fix: Installations graphs responsiveness #1022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
+91 −72
Open

fix: Installations graphs responsiveness #1022

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09c4704
fix: Installations graphs responsiveness
Quentame Oct 24, 2025
990ed50
fix: versionHistoryChart with mobile width < 400
Quentame Oct 27, 2025
376ee21
refactor: usePointStyle already by default
Quentame Oct 27, 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
163 changes: 91 additions & 72 deletions site/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,99 +10,115 @@
---

<style>
.intro {
.row {
display: flex;
flex-direction: row;
column-gap: 3em;
row-gap: 1em;
margin-bottom: 1em;
gap: 2rem;
margin-bottom: 2rem;
}
.intro > * {
flex: 1;
.col {
flex: 1 0 0;
}
.chart-title {
color: var(--secondary-text-color);
margin-bottom: 0.5rem;
}
canvas {
margin-bottom: 32px;
width: 100%;
}
.half {
display: flex;
}
.half > * {
flex: 1;
margin: 0 16px;
}
@media only screen and (max-width: 800px) {
.intro {
@media only screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
@media only screen and (max-width: 600px) {
.half {
flex-direction: column-reverse;

.row-donut {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
</style>

<div class="intro">
<div>
<div class="row">
<div class="col">
Home Assistant allows users to share their usage data. It is used to
influence Home Assistant development priorities and to convince
manufacturers to add local control and privacy-focused features.
</div>
<div>

<div class="col">
Analytics in Home Assistant are opt-in and do not reflect the entire Home
Assistant userbase. We estimate that less than a fourth of all Home Assistant
users opt in.
</div>
</div>

<div class="chart-title">
{{ data.history.last.active_installations | formatNumber }} Active Home
Assistant Installations
<div class="row">
<div class="col">
<div class="chart-title">
{{ data.history.last.active_installations | formatNumber }} Active Home
Assistant Installations
</div>
<canvas id="installationsChart"></canvas>
</div>
</div>
<canvas id="installationsChart" style="width: 100%"></canvas>

<div class="chart-title">Version history</div>
<canvas id="versionHistoryChart" style="width: 100%"></canvas>
<div class="row">
<div class="col">
<div class="chart-title">Version history</div>
<canvas id="versionHistoryChart"></canvas>
</div>
</div>

<div class="half">
<div>
<div class="row row-donut">
<div class="col">
<div class="chart-title">Last releases</div>
<canvas id="lastReleaseChart" style="width: 100%"></canvas>
<canvas id="lastReleaseChart"></canvas>
</div>
<div>

<div class="col">
<div class="chart-title">Installation types</div>
<canvas id="installationTypesChart" style="width: 100%"></canvas>
<canvas id="installationTypesChart"></canvas>
</div>
</div>

<div class="half">
<div>
<div class="row row-donut">
<div class="col">
<div class="chart-title">Top 5 used operating system versions</div>
<canvas id="top5OSversionChart" style="width: 100%"></canvas>
<canvas id="top5OSversionChart"></canvas>
</div>
<div>

<div class="col">
<div class="chart-title">Board types</div>
<canvas id="boardTypesChart" style="width: 100%"></canvas>
<canvas id="boardTypesChart"></canvas>
</div>
</div>

<div id="svgMap"></div>
<div class="row">
<div id="installationsPerCountry" class="col"></div>
</div>

<script>
function tooltipFooterCallback(item) {
let sum = 0;
item[0].dataset.data.forEach(data => { sum += Number(data) });
return `${(item[0].parsed * 100 / sum).toFixed(2)}%`;
}
const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

Chart.defaults.color = darkMode ? "#9b9b9b" : "#727272";
Chart.defaults.borderColor = darkMode ? "#202020" : "#ffffff";
Chart.defaults.responsive = true;
Chart.defaults.plugins.legend.position = "right";
Chart.defaults.plugins.legend.labels.usePointStyle = true;

new Chart("installationsChart", {
type: "line",
options: {
parsing: false,
responsive: false,
plugins: {
legend: {
position: "bottom",
},
},
scales: {
x: {
type: 'time',
Expand All @@ -118,7 +134,13 @@
type: "line",
options: {
parsing: false,
responsive: false,
aspectRatio: window.innerWidth < 400 ? 0.75 : window.innerWidth < 600 ? 0.8 : 1.5,
plugins: {
legend: {
align: "start",
position: "bottom",
},
},
scales: {
x: {
type: 'time',
Expand All @@ -134,14 +156,13 @@
type: "pie",
options: {
plugins: {
legend: {
position: window.innerWidth < 600 ? "bottom" : "right",
},
tooltip: {
enabled: true,
callbacks: {
footer: (item) => {
let sum = 0;
item[0].dataset.data.forEach(data => { sum += Number(data) });
return `${(item[0].parsed * 100 / sum).toFixed(2)}%`;
}
footer: tooltipFooterCallback
}
},
},
Expand All @@ -159,14 +180,13 @@
type: "pie",
options: {
plugins: {
legend: {
position: window.innerWidth < 600 ? "bottom" : "right",
},
tooltip: {
enabled: true,
callbacks: {
footer: (item) => {
let sum = 0;
item[0].dataset.data.forEach(data => { sum += Number(data) });
return `${(item[0].parsed * 100 / sum).toFixed(2)}%`;
}
footer: tooltipFooterCallback
}
},
},
Expand Down Expand Up @@ -199,14 +219,13 @@
type: "pie",
options: {
plugins: {
legend: {
position: window.innerWidth < 600 ? "bottom" : "right",
},
tooltip: {
enabled: true,
callbacks: {
footer: (item) => {
let sum = 0;
item[0].dataset.data.forEach(data => { sum += Number(data) });
return `${(item[0].parsed * 100 / sum).toFixed(2)}%`;
}
footer: tooltipFooterCallback
}
},
},
Expand All @@ -225,14 +244,14 @@
type: "pie",
options: {
plugins: {
legend: {
align: "start",
position: window.innerWidth < 600 ? "bottom" : "right",
},
tooltip: {
enabled: true,
callbacks: {
footer: (item) => {
let sum = 0;
item[0].dataset.data.forEach(data => { sum += Number(data) });
return `${(item[0].parsed * 100 / sum).toFixed(2)}%`;
}
footer: tooltipFooterCallback
}
},
},
Expand All @@ -247,19 +266,19 @@
});

new svgMap({
targetElementID: 'svgMap',
targetElementID: 'installationsPerCountry',
colorMin: "#80CBC4",
colorMax: "#004D40",
hideFlag: true,
initialZoom: 1.0,
data: {
data: {
installations: {
format: "{0} Installations",
},
},
applyData: "installations",
values: {{ data.current.countries | countriesForMap }},
},
data: {
installations: {
format: "{0} Installations",
},
},
applyData: "installations",
values: {{ data.current.countries | countriesForMap }},
},
});
</script>