@datarailsshared/dr_renderer 1.2.452 → 1.2.454

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.452",
+  "version": "1.2.454",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/charts/dr_chart.js

@@ -0,0 +1,34 @@
+export class DrChart {
+    // A highchartsRenderer injection.
+    // Could be removed later when each chart type mirgate to class syntax
+    static highchartsRenderer;
+
+    constructor() {
+        if (!DrChart.highchartsRenderer) {
+            console.error('The highchartsRenderer instance is not provided!');
+        }
+    }
+
+    render(chartOptions, opts) {
+        return DrChart.highchartsRenderer.ptCreateElementAndDraw(
+            chartOptions,
+            opts
+        );
+    }
+
+    formatValue(data_type, number_format, value, widget_values_format) {
+        return DrChart.highchartsRenderer.formatValue(data_type, number_format, value, widget_values_format)
+    }
+
+    getDefaultValueForChart(type, existing_options) {
+        return DrChart.highchartsRenderer.getDefaultValueForChart(type, existing_options);
+    }
+
+    ptCreateBasicLineSeries(pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
+        return DrChart.highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions);
+    }
+
+    getSingleValueAgg(opts, aggfunc, base) {
+        return DrChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
+    }
+}

package/src/charts/dr_gauge_chart.js

@@ -0,0 +1,550 @@
+const { DrChart } = require("./dr_chart");
+const { DrChartTooltip } = require("../dr_chart_tooltip");
+const helpers = require("../dr-renderer-helpers");
+
+export const GAUGE_OPTIONS_DEFAULT = {
+    gauge: {
+        background: "#fff",
+        startAngle: -90,
+        endAngle: 90,
+        thickness: 16,
+        tickLength: 40,
+        tickWidth: 2,
+        valueOffset: [20, 0, 8, 0],
+        offset: [8, 8, 8, 8],
+        goalIcon:
+            "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE2IDE1IiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik04IDBMOS43OTYxMSA1LjUyNzg2SDE1LjYwODVMMTAuOTA2MiA4Ljk0NDI3TDEyLjcwMjMgMTQuNDcyMUw4IDExLjA1NTdMMy4yOTc3MiAxNC40NzIxTDUuMDkzODMgOC45NDQyN0wwLjM5MTU0OCA1LjUyNzg2SDYuMjAzODlMOCAwWiIgZmlsbD0iIzQ2NDZDRSIvPgo8L3N2Zz4=",
+        goalIconSize: [16, 16],
+        pivot: {
+            radius: 5,
+            color: "#808080",
+        },
+        colors: {
+            meta: "#6D6E6F",
+            goal: "#4646CE",
+        },
+    },
+    goal: {
+        title: "Goal",
+        value: 180,
+    },
+    isAbsoluteValue: false,
+    segments: [
+        {
+            from: 0,
+            to: 60,
+            title: "Low",
+            color: "#BF1D30",
+        },
+        {
+            from: 61,
+            to: 80,
+            title: "Medium",
+            color: "#FFA310",
+        },
+        {
+            from: 81,
+            to: 100,
+            title: "High",
+            color: "#037C5A",
+        },
+    ],
+};
+
+export class DrGaugeChart extends DrChart {
+    #aggregation;
+    #format;
+    #originalOptions;
+    #options;
+    #ticks;
+    #max;
+    #goal;
+    #value;
+    #plotBands;
+
+    constructor(pivotData, opts) {
+        super();
+        this.#originalOptions = opts;
+        this.#options = this.mergeOptions(opts.chartOptions);
+        this.#aggregation = pivotData.getAggregator([], []);
+        this.#format = this.#aggregation.widget_values_format;
+        this.#goal = this.#options.goal;
+        this.#plotBands = this.createPlotBands(this.#options);
+        this.#ticks = this.createTicks(this.#plotBands, this.#options);
+        this.#value = this.getValue(pivotData, opts);
+        this.#max = this.#ticks[this.#ticks.length - 1];
+    }
+
+    render() {
+        return super.render(this.configChart(), this.#originalOptions);
+    }
+
+    isLeftQuarter(value, max = this.#max) {
+        return value < max / 2;
+    }
+
+    createPlotBands(options) {
+        const {
+            segments,
+            isAbsoluteValue,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        const bands = segments.map((item) => {
+            return {
+                from: isAbsoluteValue ? Math.max(0, item.from - 1) : (Math.max(0, item.from - 1) * goalValue) / 100,
+                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        // clamp segments
+        bands[0].from = 0;
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
+    }
+
+    createTicks(plotBands, options) {
+        return [...new Set([0, ...plotBands.map((b) => b.to), options.goal.value])].sort((a, b) => a - b);
+    }
+
+    mergeOptions(options) {
+        return helpers.mergeDeep(
+            JSON.parse(JSON.stringify(GAUGE_OPTIONS_DEFAULT)),
+            this.getDefaultValueForChart(DrChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED),
+            options
+        );
+    }
+
+    getAngleForValue(
+        value,
+        min = 0,
+        max = this.#max,
+        startAngle = this.#options.gauge.startAngle,
+        endAngle = this.#options.gauge.endAngle
+    ) {
+        const degrees = ((value - min) / (max - min)) * (endAngle - startAngle);
+        const radians = degrees * (Math.PI / 180);
+        return radians;
+    }
+
+    formatValue(value, format = this.#format) {
+        return helpers.isNumber(value) ? super.formatValue("n", format, value).value : value;
+    }
+
+    toPercent(value) {
+        return `${Math.round((value * 100) / (this.#options.isAbsoluteValue ? this.#max : this.#goal.value))}%`;
+    }
+
+    formatValueLabel(value, options) {
+        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
+            options.label.font_size
+        }px;">
+            <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: ${options.label.font_color}">
+                ${this.formatValue(value)}
+                ${
+                    options.label.show_percentage_in_value
+                        ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
+                              options.gauge.colors.meta
+                          };">(${this.toPercent(value)})</span>`
+                        : ""
+                }
+            </span>
+            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${
+                options.gauge.colors.meta
+            };">Current status</span>
+        </span>`;
+    }
+
+    formatTickLabel(value, options) {
+        const isGoal = value === options.goal.value;
+        const isLeftQuarter = this.isLeftQuarter(value);
+        const formattedValue = this.formatValue(value);
+
+        const goalStyles = isGoal ? `padding-${isLeftQuarter ? "right" : "left"}: 12px;` : "";
+        const goalValue = isGoal
+            ? `<span style="font-size: 1.125em; color: ${options.gauge.colors.goal};">${formattedValue}</span>`
+            : `<span style="color: ${options.label.font_color};">${formattedValue}</span>`;
+        const goalTitle =
+            isGoal && options.label.show_goal_name && options.goal.title
+                ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.goal};">${options.goal.title}</span>`
+                : "";
+        const percentage = options.label.show_percentage_in_segments
+            ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.meta}; font-weight: 400;">(${this.toPercent(
+                  value
+              )})</span>`
+            : "";
+
+        return `<span style="
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: 600;
+            font-size: ${options.label.font_size}px;
+            ${goalStyles}
+        ">
+            ${goalValue}
+            ${goalTitle}
+            ${percentage}
+        </span>`;
+    }
+
+    getValue(pivotData, opts) {
+        const lineSeries = this.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
+
+        let total = lineSeries
+            .map((s) => s.data.map((v) => v))
+            .filter((v) => !isNaN(v))
+            .flat();
+
+        let aggfunc = (a, b) => a + b;
+        let base = 0;
+        let singleValueAgg = this.getSingleValueAgg(
+            {
+                value: {
+                    value: "Sum",
+                },
+            },
+            aggfunc,
+            base
+        );
+
+        aggfunc = singleValueAgg.aggfunc;
+        base = singleValueAgg.base;
+
+        const aggregator = pivotData.getAggregator([], []);
+        const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
+
+        return value;
+    }
+
+    getBorderPosition(chart, options, position) {
+        const { center, size } = chart.pane[0].options;
+        const {
+            gauge: { tickLength, tickWidth },
+        } = options;
+
+        return {
+            x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
+            y: center[1] + tickWidth / 2,
+        };
+    }
+
+    createBorder(chart, options, position) {
+        return chart.renderer
+            .arc({
+                ...this.getBorderPosition(chart, options, position),
+                r: options.gauge.thickness / 2,
+                innerR: 0,
+                start: 0,
+                end: Math.PI,
+            })
+            .attr({
+                fill:
+                    position === "start"
+                        ? chart.yAxis[0].options.plotBands[0].color
+                        : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
+            })
+            .add()
+            .toFront();
+    }
+
+    getGoalIconPosition(chart, options) {
+        const { center, size } = chart.pane[0].options;
+        const radius = size / 2;
+        const {
+            gauge: { goalIconSize },
+            goal: { value },
+        } = options;
+
+        return {
+            x: center[0] - radius * Math.sin(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[0] / 2,
+            y: center[1] - radius * Math.cos(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[1] / 2,
+        };
+    }
+
+    createGoalIcon(chart, options) {
+        const point = this.getGoalIconPosition(chart, options);
+        return chart.renderer
+            .image(options.gauge.goalIcon, point.x, point.y, options.gauge.goalIconSize[0], options.gauge.goalIconSize[1])
+            .add()
+            .toFront();
+    }
+
+    getValueLabelPosition(chart, options) {
+        const { center } = chart.pane[0].options;
+        return {
+            x: center[0],
+            y: center[1] + options.gauge.valueOffset[0],
+        };
+    }
+
+    createValueLabel(chart, options) {
+        const label = chart.renderer.text(this.formatValueLabel(this.#value, options), 0, 0, true).add().toFront();
+
+        helpers.removeSVGTextCorrection(label, "yCorr");
+
+        label.attr(this.getValueLabelPosition(chart, options)).css({
+            transform: "translateX(-50%)",
+        });
+
+        return label;
+    }
+
+    getPaneDimensions(chart, options) {
+        const { renderer } = chart;
+        const valueLabel = this.createValueLabel(chart, this.#options);
+        const { offset } = options.gauge;
+        const { height: labelH } = valueLabel.getBBox();
+
+        const offsetBottom = labelH + options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
+        valueLabel.destroy();
+
+        const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
+        if (options.label.show) {
+            this.#ticks.forEach((tick) => {
+                const label = renderer.label(this.formatTickLabel(tick, options), 0, 0, null, null, null, true).add();
+                const angle = this.getAngleForValue(tick);
+                // depends on label width
+                radiuses.push(
+                    (chart.chartWidth / 2 - label.bBox.width - Math.max(offset[1], offset[3])) /
+                        Math.sin(Math.abs(Math.PI / 2 - angle))
+                );
+                // depends on label height
+                radiuses.push(
+                    (chart.chartHeight - offsetBottom - label.bBox.height / 2 - offset[0]) /
+                        Math.cos(Math.abs(Math.PI / 2 - angle))
+                );
+                label.destroy();
+            });
+        } else {
+            // reserve space for the goal icon
+            const angle = this.getAngleForValue(options.goal.value);
+            const [iconW, iconH] = options.gauge.goalIconSize;
+            radiuses.push((chart.chartWidth / 2 - iconW / 2 - offset[1]) / Math.sin(Math.abs(Math.PI / 2 - angle)));
+            radiuses.push((chart.chartHeight - offsetBottom - iconH / 2 - offset[0]) / Math.cos(Math.abs(Math.PI / 2 - angle)));
+        }
+
+        return {
+            radius: Math.min(...radiuses),
+            center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
+        };
+    }
+
+    setTicksStyles(chart, options) {
+        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
+            const tick = chart.yAxis[0].ticks[i];
+            const isLeftQuarter = this.isLeftQuarter(tick.pos);
+
+            if (tick.pos === options.goal.value) {
+                tick.mark.attr({
+                    stroke: options.gauge.colors.goal,
+                    "stroke-dasharray": 2,
+                    "pointer-events": "none",
+                });
+            }
+
+            if (!tick.label) return;
+
+            // align left querter's labels
+            tick.label.css({
+                transform: `translate(${isLeftQuarter ? "-100%" : 0}, 0)`,
+            });
+        });
+    }
+
+    addTooltips(chart, options) {
+        if (!options.tooltips.show) {
+            return false;
+        }
+
+        const drTooltip = new DrChartTooltip(chart, {
+            fontSize: options.tooltips.font_size,
+            fontFamily: options.tooltips.font_style,
+            color: options.tooltips.font_color,
+        });
+
+        // segment title tooltip
+        if (options.tooltips.show_segment_name) {
+            chart.yAxis[0].plotLinesAndBands.forEach((band, i) => {
+                drTooltip.add(band.options.title, band.svgElem.element, {
+                    direction: "top",
+                    followPointer: true,
+                });
+            });
+        }
+
+        // value label tooltip
+        if (options.tooltips.show_percentage_in_value && !options.label.show_percentage_in_value) {
+            drTooltip.add(this.toPercent(this.#value), chart.label.element, {
+                direction: "top",
+            });
+        }
+
+        // segment name tooltips
+        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
+            const tick = chart.yAxis[0].ticks[i];
+            const isLeftQuarter = this.isLeftQuarter(tick.pos);
+
+            // goal tooltip if lebels are hidden
+            if (tick.pos === options.goal.value && !options.label.show) {
+                drTooltip.add(
+                    `${
+                        options.label.show_goal_name ? options.goal.title || "" : ""
+                    }<span style="font-weight: 600">${this.formatValue(options.goal.value)}</span>`,
+                    chart.goalIcon.element,
+                    {
+                        direction: isLeftQuarter ? "left" : "right",
+                    }
+                );
+            }
+
+            // segment label percentage tooltips
+            if (tick.label && options.tooltips.show_percentage_in_segments && !options.label.show_percentage_in_segments) {
+                drTooltip.add(this.toPercent(tick.pos), tick.label.element, {
+                    direction: isLeftQuarter ? "left" : "right",
+                });
+            }
+        });
+    }
+
+    setPane(chart, options) {
+        const { radius, center } = this.getPaneDimensions(chart, options);
+        chart.pane[0].options.size = 2 * radius;
+        chart.pane[0].options.center = center;
+        chart.yAxis[0].options.plotBands.forEach((band) => {
+            band.outerRadius = radius - (options.gauge.tickLength - options.gauge.thickness) / 2;
+        });
+        chart.series[0].options.dial.radius = Math.round(100 * (radius - options.gauge.tickLength - 10) / radius) + '%';
+    }
+
+    setCustomElements(chart, options) {
+        chart.label = this.createValueLabel(chart, options);
+        chart.startBorder = this.createBorder(chart, options, "start");
+        chart.endBorder = this.createBorder(chart, options, "end");
+        chart.goalIcon = this.createGoalIcon(chart, options);
+    }
+
+    updateCustomElements(chart, options) {
+        chart.startBorder.attr(this.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(this.getBorderPosition(chart, options, "end"));
+        chart.goalIcon.attr(this.getGoalIconPosition(chart, options));
+        chart.label.attr(this.getValueLabelPosition(chart, options));
+    }
+
+    moveCustomElementsToFront(chart) {
+        chart.startBorder.toFront();
+        chart.endBorder.toFront();
+        chart.goalIcon.toFront();
+    }
+
+    clampValueToPane(value, max = this.#max) {
+        return helpers.clamp(-0.02 * max, value, 1.02 * max);
+    }
+
+    configChart() {
+        return {
+            title: {
+                text: null,
+            },
+            subtitle: null,
+            exporting: {
+                allowHTML: true,
+            },
+            tooltip: {
+                enabled: false,
+            },
+            chart: {
+                type: "gauge",
+                backgroundColor: this.#options.gauge.background,
+                plotBackgroundColor: null,
+                plotBackgroundImage: null,
+                plotBorderWidth: 0,
+                plotShadow: false,
+                events: {
+                    render: ({ target: chart }) => {
+                        this.moveCustomElementsToFront(chart);
+                        this.setTicksStyles(chart, this.#options);
+                    },
+                    beforeRedraw: ({ target: chart }) => {
+                        this.setPane(chart, this.#options);
+                        this.updateCustomElements(chart, this.#options);
+                    },
+                    beforeRender: ({ target: chart }) => {
+                        this.setPane(chart, this.#options);
+                        this.setCustomElements(chart, this.#options);
+                    },
+                    load: ({ target: chart }) => {
+                        this.addTooltips(chart, this.#options);
+                    },
+                },
+                margin: [0, 0, 0, 0],
+                spacing: [0, 0, 0, 0],
+            },
+
+            pane: {
+                startAngle: -90,
+                endAngle: 90,
+                background: null,
+                center: [0, 0],
+            },
+
+            // the value axis
+            yAxis: {
+                min: 0,
+                max: this.#max,
+                tickPositions: this.#ticks,
+                tickPosition: "inside",
+                tickColor: this.#options.gauge.background,
+                tickLength: this.#options.gauge.tickLength,
+                tickWidth: this.#options.gauge.tickWidth,
+                minorTickInterval: null,
+
+                labels: {
+                    enabled: !!this.#options.label.show,
+                    distance: 0,
+                    verticalAlign: "middle",
+                    allowOverlap: true,
+                    align: "left",
+                    style: {
+                        whiteSpace: "nowrap",
+                        width: "auto",
+                    },
+                    formatter: ({ value }) => {
+                        return this.formatTickLabel(value, this.#options);
+                    },
+                    useHTML: true,
+                },
+                lineWidth: 0,
+                plotBands: this.#plotBands,
+            },
+
+            series: [
+                {
+                    name: null,
+                    data: [this.clampValueToPane(this.#value)],
+                    dataLabels: [
+                        {
+                            enabled: false,
+                        },
+                    ],
+                    dial: {
+                        radius: "70%",
+                        backgroundColor: this.#options.gauge.pivot.color,
+                        baseWidth: 2 * this.#options.gauge.pivot.radius,
+                        baseLength: "0%",
+                        rearLength: "0%",
+                    },
+                    pivot: {
+                        backgroundColor: this.#options.gauge.pivot.color,
+                        radius: this.#options.gauge.pivot.radius,
+                    },
+                },
+            ],
+        };
+    }
+}

package/src/dr-renderer-helpers.js

@@ -7,7 +7,52 @@ function capitalize(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function clamp(min, v, max) {
+    return Math.min(max, Math.max(v, min));
+}
+
+function isNumber(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+}
+
+function mergeDeep(target, ...sources) {
+    const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
+
+    if (!isObject(target)) return target;
+
+    sources.forEach((source) => {
+        if (!isObject(source)) return;
+
+        Object.keys(source).forEach((key) => {
+            const targetValue = target[key];
+            const sourceValue = source[key];
+
+            if (isObject(targetValue) && isObject(sourceValue)) {
+                target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
+            } else {
+                target[key] = sourceValue;
+            }
+        });
+    });
+
+    return target;
+}
+
+function removeSVGTextCorrection(svgEl, corr = 'yCorr') {
+    Object.defineProperty(svgEl, corr, {
+        set: function() {},
+        get: function() {
+            return 0;
+        }
+    });
+    return svgEl;
+}
+
 module.exports = {
     backendSortingKeysAreNotEmpty,
     capitalize,
+    clamp,
+    isNumber,
+    mergeDeep,
+    removeSVGTextCorrection,
 }