Commit 63614d28 authored by jan.koester's avatar jan.koester
Browse files

test

parent 8ee8b828

www/app.css

+1 −1
Changes for www/app.css: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -260,7 +260,7 @@ dialog.console .console-status { margin: .5em 0 0; color: var(--muted, #6b7280); 
.gauge-value.warn { stroke: var(--warn); }

.gauge-value.danger { stroke: var(--danger); }

.gauge-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

svg.spark { display: block; width: 100%; height: 28px; margin-top: 10px; }

svg.spark { display: block; width: 100%; height: 28px; margin-top: auto; padding-top: 10px; box-sizing: content-box; }

.spark-line { fill: none; stroke: var(--series-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.spark-area { fill: var(--series-1); opacity: .12; }

.meter { height: 8px; background: #dfe2e6; border-radius: 4px; overflow: hidden; min-width: 80px; }

www/modules/dashboard.js

+11 −10
Changes for www/modules/dashboard.js: 11 added lines, 10 removed lines.
Original line number Diff line number Diff line
@@ -103,7 +103,7 @@ 
    el.set = (values, max) => {

      if (values.length < 2) return;

      const top = max || Math.max(...values, 1);

      const pts = values.map((v, i) => [W * (i + POINTS - values.length) / (POINTS - 1), H - 1 - (H - 2) * Math.min(v, top) / top]);

      const pts = values.map((v, i) => [W * i / (values.length - 1), H - 1 - (H - 2) * Math.min(v, top) / top]);

      const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join('');

      line.setAttribute('d', d);

      area.setAttribute('d', d + `L${pts[pts.length - 1][0].toFixed(1)} ${H}L${pts[0][0].toFixed(1)} ${H}Z`);
@@ -112,8 +112,8 @@ 
  }



  // a time series chart with two series, one y axis, a legend and a

  // crosshair with tooltip

  function lineChart(series, format) {

  // crosshair with tooltip; base: 1000 or 1024, the steps of format's units

  function lineChart(series, format, base) {

    const H = 180, PAD = {l: 64, r: 12, t: 10, b: 22};

    const svg = s('svg', {class: 'chart-svg', height: H, role: 'img'});

    const tip = h('div', {class: 'chart-tip', hidden: true});
@@ -131,13 +131,14 @@ 
      svg.setAttribute('width', W);

      svg.setAttribute('viewBox', `0 0 ${W} ${H}`);

      const max = Math.max(...series.flatMap(sr => hist[sr.key]), 0);

      // a round top: 1, 2 or 5 times a power of ten (of the formatted unit)

      // a round top in the unit format shows it in: 1, 2, 2.5 or 5 times a

      // power of ten of KiB/s, Mbit/s, ...; at least one kilo

      const nice = v => {

        if (v <= 0) return 1;

        const p = Math.pow(10, Math.floor(Math.log10(v)));

        return [1, 2, 2.5, 5, 10].map(f => f * p).find(x => x >= v);

        const k = Math.pow(base, Math.max(1, Math.floor(Math.log(v) / Math.log(base))));

        const p = Math.pow(10, Math.floor(Math.log10(v / k)));

        return k * p * [1, 2, 2.5, 5, 10].find(f => f * p * k >= v);

      };

      const top = nice(max * 1.1);

      const top = max * 1.1 > base ? nice(max * 1.1) : base;

      const pw = W - PAD.l - PAD.r, ph = H - PAD.t - PAD.b;

      const x = i => PAD.l + pw * (i + POINTS - n) / (POINTS - 1);

      const y = v => PAD.t + ph - ph * v / top;
@@ -217,8 +218,8 @@ 
    ui.disk = card(t('System disk'), '⛁', false);

    ui.temp = card(t('Temperature'), '🌡', true);

    ui.cores = h('div', {class: 'cores'});

    ui.net = lineChart([{key: 'rx', label: t('received'), color: 's1'}, {key: 'tx', label: t('sent'), color: 's2'}], bitRate);

    ui.io = lineChart([{key: 'read', label: t('Read'), color: 's1'}, {key: 'write', label: t('Written'), color: 's2'}], byteRate);

    ui.net = lineChart([{key: 'rx', label: t('received'), color: 's1'}, {key: 'tx', label: t('sent'), color: 's2'}], bitRate, 1000);

    ui.io = lineChart([{key: 'read', label: t('Read'), color: 's1'}, {key: 'write', label: t('Written'), color: 's2'}], byteRate, 1024);

    ui.fs = h('div', {});

    ui.ifaces = h('div', {});

    ui.sensors = h('div', {});