Status matrix

using CanopyX;
using CanopyX.Html;

var matrix = new CanopyMatrix("services", "Services by server");
matrix
    .State("critical", "Critical", CanopyTone.Danger, CanopyMatrixSymbol.Cross,
        attention: true)
    .State("warning", "Warning", CanopyTone.Warning, CanopyMatrixSymbol.Warning,
        attention: true)
    .State("ok", "Running", CanopyTone.Success, CanopyMatrixSymbol.Check)
    .State("absent", "Not installed", CanopyTone.Muted, CanopyMatrixSymbol.Dash);
matrix.Rows.Title = "Server";
matrix.Rows.Attribute("site", "Site", facet: true);
matrix.Rows.GroupBy = "site";
matrix.Columns.Title = "Service";
foreach (var (id, label) in new[] {
    ("dns", "DNS"), ("ldap", "LDAP"),
    ("smb", "File sharing"), ("backup", "Backup agent")
}) {
    matrix.Columns.Item(id, label);
}

var services = new[] { "dns", "ldap", "smb", "backup" };
foreach (var (server, site, states) in new[] {
    ("SRV-OSL-01", "Oslo", "ok ok ok ok"),
    ("SRV-OSL-02", "Oslo", "ok warning ok critical"),
    ("SRV-LYO-01", "Lyon", "ok ok warning ok"),
    ("SRV-LYO-02", "Lyon", "absent absent ok ok")
}) {
    var row = server.ToLowerInvariant();
    matrix.Rows.Item(row, server, item => item.Value("site", site));
    var cells = states.Split(' ');
    for (var i = 0; i < services.Length; i++) {
        var cell = matrix.Set(row, services[i], cells[i]);
        if (cells[i] == "critical") cell.Title = "Probes failing: 3/3.";
    }
}
matrix.SaveHtmlPage("matrix.html");

Run this snippet (status matrix, C#)Its output, generated with the site.

import { createMatrix } from "@evotecit/canopyx/grid";
import "@evotecit/canopyx/grid.css";

const server = (id, label, site) => ({ id, label, values: { site } });

createMatrix(document.getElementById("matrix"), {
  view: {
    protocol: "canopyx/2", type: "matrix", id: "services",
    label: "Services by server",
    states: [
      {
        id: "critical", label: "Critical", tone: "danger", symbol: "cross",
        attention: true
      },
      {
        id: "warning", label: "Warning", tone: "warning", symbol: "warning",
        attention: true
      },
      { id: "ok", label: "Running", tone: "success", symbol: "check" },
      { id: "absent", label: "Not installed", tone: "muted", symbol: "dash" }
    ],
    rows: {
      title: "Server",
      groupBy: "site",
      attributes: [{ id: "site", title: "Site", facet: true }],
      items: [
        server("srv-osl-01", "SRV-OSL-01", "Oslo"),
        server("srv-osl-02", "SRV-OSL-02", "Oslo"),
        server("srv-lyo-01", "SRV-LYO-01", "Lyon"),
        server("srv-lyo-02", "SRV-LYO-02", "Lyon")
      ]
    },
    columns: {
      title: "Service",
      items: [
        { id: "dns", label: "DNS" },
        { id: "ldap", label: "LDAP" },
        { id: "smb", label: "File sharing" },
        { id: "backup", label: "Backup agent" }
      ]
    },
    // One string per server, one digit per service: the position of its state.
    cells: ["2222", "2120", "2212", "3322"],
    notes: [[1, 3, null, null, "Probes failing: 3/3."]]
  }
});

Run this snippet (status matrix, JavaScript)Its output, generated with the site.