perfrunner-reporters/dist/reporters/html/charts/abstract.chart.js

Home of the perfrunner reporters

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.kbLabel = exports.msLabel = exports.diffLabel = exports.AbstractChart = void 0;
const chart_js_1 = __importDefault(require("chart.js"));
const utils_1 = require("../../../utils");
class AbstractChart {
    constructor() {
        this.FONT_FAMILIY = `'monospace', 'Verdana', 'sans-serif'`;
        this.DEFAULT_LINE_WIDTH = 2;
        this.animation = { duration: 0 };
        this.hover = { animationDuration: 0 };
        this.responsiveAnimationDuration = 0;
        this.elements = { line: { tension: 0 } };
        this.yAxes = () => [
            { ticks: { beginAtZero: true, fontFamily: this.FONT_FAMILIY, callback: this.yAxesLabelCalback } },
        ];
        this.xAxes = () => [{ ticks: { callback: (v) => v.toString().substring(0, 30) } }];
        this.legend = () => ({ labels: { fontFamily: this.FONT_FAMILIY } });
        this.chartTitle = () => ({ text: this.title, display: true, fontFamily: this.FONT_FAMILIY });
        this.getLabel = (index, comment) => `#${index + 1}${(0, utils_1.isNullOrEmpty)(comment) ? '' : ` ${comment}`}`;
        this.runParams = (rawData) => rawData.map((x) => ({
            download: x.runParams.network.downloadThroughput,
            upload: x.runParams.network.uploadThroughput,
            useCache: !!x.runParams.useCache,
            latency: x.runParams.network.latency,
            throttling: x.runParams.throttlingRate,
        }));
        this.withDefaults = (label, data, color) => ({
            label,
            data,
            borderColor: color,
            backgroundColor: utils_1.TRANSPARENT,
            borderWidth: this.DEFAULT_LINE_WIDTH,
        });
        this.tooltipLabel = (_) => (0, exports.diffLabel)(utils_1.toMs);
        this.tooltipFooter = ({ runParams, timeStamp }) => (t) => {
            const index = t[0].index;
            if (index == null || index >= runParams.length) {
                return '';
            }
            const param = runParams[index];
            const time = new Date(timeStamp[index]);
            return [
                `time: ${time.toLocaleString()}`,
                `download: ${(0, utils_1.toBytes)(param.download)} upload ${(0, utils_1.toBytes)(param.upload)} latency: ${param.latency}`,
                `throttling: ${param.throttling}x useCache: ${param.useCache}`,
            ];
        };
        this.getCanvasContext = (container) => {
            const canvas = container;
            if (canvas == null || typeof canvas.getContext !== 'function') {
                throw new Error(`${this.name} failed, provided container is not canvas, ${canvas}`);
            }
            return canvas.getContext('2d');
        };
        this.isVisible = (viewData) => Object.keys(viewData.data).length !== 0;
    }
    render(container, rawData) {
        if (container == null) {
            throw new Error('Chart container is not defined');
        }
        const viewData = this.getViewData(rawData);
        const isVisible = this.isVisible(viewData);
        if (!isVisible) {
            console.log(`Skipping rendering ${this.name} chart because of no data provided`);
            return;
        }
        const canvas = (0, utils_1.createElement)('canvas');
        const wrapper = (0, utils_1.createElement)('div', { className: 'chart-container', child: canvas });
        container.appendChild(wrapper);
        const ctx = this.getCanvasContext(canvas);
        new chart_js_1.default(ctx, {
            type: 'line',
            data: {
                labels: viewData.labels,
                datasets: this.getDatasetEntries(viewData.data),
            },
            options: {
                animation: this.animation,
                hover: this.hover,
                responsiveAnimationDuration: this.responsiveAnimationDuration,
                elements: this.elements,
                scales: {
                    xAxes: this.xAxes(),
                    yAxes: this.yAxes(),
                },
                legend: this.legend(),
                title: this.chartTitle(),
                tooltips: {
                    callbacks: {
                        label: this.tooltipLabel(viewData),
                        footer: this.tooltipFooter(viewData),
                    },
                },
                maintainAspectRatio: true,
            },
        });
    }
}
exports.AbstractChart = AbstractChart;
const diffLabel = (formatter) => {
    return (t, d) => {
        var _a;
        const entryIndex = t.index;
        const dIndex = t.datasetIndex;
        const data = d.datasets && d.datasets[dIndex] ? (_a = d.datasets[dIndex]) === null || _a === void 0 ? void 0 : _a.data : undefined;
        if (!(0, utils_1.defined)(entryIndex) || !(0, utils_1.defined)(dIndex) || !(0, utils_1.defined)(data)) {
            throw new Error('Something went wrong with labels');
        }
        const currentValue = data[entryIndex];
        const label = d.datasets[dIndex].label;
        if (typeof currentValue !== 'number') {
            return `${t.label}: ${t.value}`;
        }
        if (entryIndex === 0) {
            return `${label}: ${formatter(currentValue)}`;
        }
        if (entryIndex > 0) {
            const prev = data[entryIndex - 1];
            const diff = currentValue - prev;
            const formmattedDiff = `(diff: ${diff > 0 ? '+' : ''} ${formatter(diff)})`;
            return `${label}: ${formatter(currentValue)} ${formmattedDiff}`;
        }
        return label !== null && label !== void 0 ? label : '';
    };
};
exports.diffLabel = diffLabel;
const msLabel = (value) => `${value} ms`;
exports.msLabel = msLabel;
const kbLabel = (value) => (typeof value === 'number' ? (0, utils_1.toBytes)(value) : (0, utils_1.toBytes)(parseFloat(value)));
exports.kbLabel = kbLabel;