Minimal

by stitot

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<h1 id="title">Support load overview</h1>
<div id="container"></div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.rating {
    --rating-size: 18px;
    --rating-empty: light-dark(#d9d9d9, #575757);
    --rating-fill: light-dark(#141414, #fff);
    --size: var(--rating-size);
    --width: calc(var(--size) * 5);
    --p: 0%;

    width: var(--width);
    height: var(--size);
    position: relative;
    display: inline-block;
    background-color: var(--rating-empty);

    /* ⭐ star shape */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg%3E%3Cpath d='M10 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L10 15.17 4.44 18l1.06-6.18L1 7.44l6.22-.9z'/%3E%3Cpath d='M30 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L30 15.17 24.44 18l1.06-6.18L21 7.44l6.22-.9z'/%3E%3Cpath d='M50 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L50 15.17 44.44 18l1.06-6.18L41 7.44l6.22-.9z'/%3E%3Cpath d='M70 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L70 15.17 64.44 18l1.06-6.18L61 7.44l6.22-.9z'/%3E%3Cpath d='M90 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L90 15.17 84.44 18l1.06-6.18L81 7.44l6.22-.9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / var(--width) var(--size);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg%3E%3Cpath d='M10 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L10 15.17 4.44 18l1.06-6.18L1 7.44l6.22-.9z'/%3E%3Cpath d='M30 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L30 15.17 24.44 18l1.06-6.18L21 7.44l6.22-.9z'/%3E%3Cpath d='M50 .9l2.78 5.64 6.22.9-4.5 4.39 1.06 6.18L50 15.17 44.44...

JavaScript

/* eslint-disable max-len */
const colors = Highcharts.getOptions().colors.map((c, i) =>
    Highcharts.color('#0443E1')
        .brighten(i / 10)
        .get()
);

Highcharts.setOptions({
    title: {
        align: 'left',
        style: {
            fontSize: '1em'
        }
    },
    chart: {
        spacing: 20
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    }
});

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'support',
            type: 'JSON',
            firstRowAsNames: false,
            columnIds: [
                'Channel', 'Department', 'Satisfaction',
                'Wait time', 'Tickets', 'Resolution time'
            ],
            data: [
                ['Email', 'Marketing', 8, 310, 140, 1.4],
                ['Chat', 'Marketing', 7, 14, 90, 2.3],
                ['Phone', 'Sales', 5, 35, 55, 3.2],
                ['In app', 'Sales', 6, 10, 241, 1.3],
                ['Other', 'Marketing', 7, 5000, 65, 2.4]
            ]
        }]
    },
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }, {
                    id: 'dashboard-col-1'
                }]
            }, {
                cells: [{
                    id: 'dashboard-col-2'
                }]
            }]
        }]
    },
    components: [
        {
            renderTo: 'dashboard-col-0',
            type: 'Highcharts',
            sync: {
                highlight: true
            },
            connector: {
                id: 'support',
                columnAssignment: [{
                    seriesId: 'tickets',
                    data: ['Channel', 'Tickets']
                }]
            },
            chartOptions: {
                title: {
                    text: 'Ticket distribution by channel'
                },
 ...