interier/templates/en/history/property.eta

<% layout("/en/history/layout", { title: `history` }) %>

<%~ include("/en/partials/topbar") %>

<% const backIcon = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5" />
    </svg>
` %>

<div class="container-row">
    <a role="button" href="/en/history"><%~ backIcon %> history</a>
    <h2><%~ it?.lang?.history.properties?.[it?.property]() %></h2>
</div>

<div class="historyLinks">
    <a role="button" href="/en/history/<%= it.property %>/daily">day</a>
    <a role="button" href="/en/history/<%= it.property %>/monthly">month</a>
    <a role="button" href="/en/history/<%= it.property %>/yearly">year</a>
    <a role="button" href="/en/history/<%= it.property %>/allTime">all time</a>
</div>

<% if (it?.dateMap?.years) { %>
    <form id="historyForm">
        <% if (it?.dateMap?.days) { %>
            <div>
            <label for="day">day</label>
            <select id="day" name="day">
                <% for (const item of it?.dateMap?.days) { %>
                    <option value="<%= item %>" <%= item === it?.dateMap?.days[it?.dateMap?.days.length - 1] ? `selected` : `` %> ><%= item %></option>
                <% } %>
            </select>
            </div>
        <% } %>

        <% if (it?.dateMap?.months) { %>
            <div>
            <label for="month">month</label>
            <select id="month" name="month">
                <% for (const item of it?.dateMap?.months) { %>
                    <option value="<%= item %>" <%= item === it?.dateMap?.months[it?.dateMap?.months.length - 1] ? `selected` : `` %> > <%= it?.lang?.history.dateFormats.months?.[item]() %></option>
                <% } %>
            </select>
            </div>
        <% } %>

        <div>
            <label for="year">year</label>
            <select id="year" name="year">
                <% for (const item of it?.dateMap?.years) { %>
                    <option value="<%= item %>" <%= item === it?.dateMap?.years[it?.dateMap?.years.length - 1] ? `selected` : `` %> > <%= item %></option>
                <% } %>
            </select>
        </div>

        <button type="submit">load</button>
    </form>
<% } %>

<% const time = [] %>
<% const data = [] %>

<% for (const item of it.data) { %>
    <% time.push(item.timeMark) %>
    
    <% if (it.property === "outdoorConnected") {%>
        <% data.push(item.value) %>
        <% continue %>
    <% } %>

    <% data.push(item.value / 100) %>
<% } %>

<div>
    <canvas id="historyChart"></canvas>
</div>

<script>
  const ctx = document.getElementById('historyChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: <%~ JSON.stringify(time, null, 2) %>,
      datasets: [{
        label: `<%= it.property %>`,
        data: <%~ JSON.stringify(data, null, 2) %>,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>