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

Home of the perfrunner reporters

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResourceSizeChart = void 0;
const abstract_chart_1 = require("./abstract.chart");
const utils_1 = require("../../../utils");
class ResourceSizeChart extends abstract_chart_1.AbstractChart {
    constructor() {
        super(...arguments);
        this.type = 'chart';
        this.name = 'size';
        this.title = 'Resource Size';
        this.getViewData = (rawData) => {
            if (!Array.isArray(rawData)) {
                throw new Error('data is not in array format');
            }
            const length = rawData.length;
            const newArray = () => (0, utils_1.init0)(length);
            const data = {
                data: {
                    css: newArray(),
                    img: newArray(),
                    js: newArray(),
                    unknown: newArray(),
                    document: newArray(),
                    font: newArray(),
                    xhr: newArray(),
                    html: newArray(),
                },
                labels: (0, utils_1.initWithEmptyString)(length),
                runParams: this.runParams(rawData),
                timeStamp: (0, utils_1.init0)(length),
            };
            const performanceEntries = rawData.map((x) => this.filter(x.performanceEntries));
            return performanceEntries.reduce((acc, entrySet, i) => {
                entrySet.forEach((pEntry) => {
                    const entryType = (0, utils_1.getResourceType)(pEntry);
                    acc.data[entryType][i] += pEntry.encodedBodySize || 0;
                });
                acc.labels[i] = this.getLabel(i, rawData[i].comment);
                acc.timeStamp[i] = rawData[i].timeStamp;
                return acc;
            }, data);
        };
        this.getDatasetEntries = (viewData) => {
            const isEmpty = (arr) => arr.reduce((sum, val) => sum + val, 0) === 0;
            const datasets = [
                !isEmpty(viewData.js) ? this.withDefaults('JS Size', viewData.js, (0, utils_1.color)(0)) : null,
                !isEmpty(viewData.img) ? this.withDefaults('IMG Size', viewData.img, (0, utils_1.color)(1)) : null,
                !isEmpty(viewData.css) ? this.withDefaults('CSS Size', viewData.css, (0, utils_1.color)(2)) : null,
                !isEmpty(viewData.font) ? this.withDefaults('Fonts Size', viewData.font, (0, utils_1.color)(3)) : null,
                !isEmpty(viewData.document) ? this.withDefaults('Index Size', viewData.document, (0, utils_1.color)(4)) : null,
                !isEmpty(viewData.html) ? this.withDefaults('HTML Size', viewData.html, (0, utils_1.color)(5)) : null,
            ].filter((x) => !!x);
            const isOtherResourcesFound = viewData.unknown.some((x) => x > 0);
            if (isOtherResourcesFound) {
                datasets.push(this.withDefaults('Others', viewData.unknown, (0, utils_1.color)(5)));
            }
            return datasets;
        };
        this.yAxesLabelCalback = abstract_chart_1.kbLabel;
        this.tooltipLabel = () => (0, abstract_chart_1.diffLabel)(utils_1.toBytes);
    }
    filter(rawData) {
        if (!Array.isArray(rawData)) {
            throw new Error('data is not in array format');
        }
        return rawData.filter((x) => !(0, utils_1.isNullOrEmpty)(x.name));
    }
}
exports.ResourceSizeChart = ResourceSizeChart;