@datarailsshared/dr_renderer 1.2.5 → 1.2.6

package/src/dr_chart_tooltip.js

@@ -1,277 +0,0 @@
-const helpers = require("./dr-renderer-helpers");
-
-const DR_TOOLTIP_OPTIONS_DEFAULT = {
-    anchorOffset: 10,
-    arrowRadius: 3,
-    arrowSize: 10,
-    background: "#fff",
-    border: 1,
-    borderColor: "#DFE0E3",
-    borderRadius: 8,
-    boxShadow: "0px 4px 8px 1px rgba(0, 0, 0, 0.25)",
-    direction: "top",
-    followPointer: false,
-    outerOffset: 8,
-    paddings: [6, 12],
-    showArrow: true,
-};
-
-function DrChartTooltip(chart, options) {
-    this.getOptions = function() {
-        return this.options;
-    }
-
-    this.add = function(content, anchor, options = {}) {
-        const localOptions = Object.assign({}, this.options, options );
-        let tooltip;
-
-        if (!content || !anchor) {
-            return false;
-        }
-
-        anchor.addEventListener("mouseover", (event) => {
-            if (tooltip) {
-                tooltip.destroy();
-            }
-            tooltip = this.create(content, localOptions.followPointer ? event : anchor, localOptions);
-            tooltip.show();
-        });
-
-        anchor.addEventListener("mouseleave", (event) => {
-            if (!tooltip) {
-                return;
-            }
-
-            tooltip = tooltip.destroy();
-        });
-
-        if (localOptions.followPointer) {
-            anchor.addEventListener("mousemove", (event) => {
-                if (!tooltip) {
-                    return;
-                }
-
-                this.setTooltipPosition(tooltip, event, localOptions);
-            });
-        }
-    }
-
-    this.create = function(content, anchor, options) {
-        const tooltip = this.chart.renderer
-            .text(`${content}${options.showArrow ? `<span class="dr-renderer-tooltip_arrow" style="position: absolute"></span>` : ""}`, 0, 0, true)
-            .attr({
-                class: "dr-renderer-tooltip",
-            })
-            .css({
-                background: options.background,
-                border: `${options.border}px solid ${options.borderColor}`,
-                borderRadius: options.borderRadius + "px",
-                boxShadow: options.boxShadow,
-                color: options.color,
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                fontFamily: options.fontFamily,
-                fontSize: options.fontSize + "px",
-                padding: options.paddings.map((p) => `${p}px`).join(" "),
-            })
-            .add()
-            .hide();
-
-        helpers.removeSVGTextCorrection(tooltip);
-
-        this.setTooltipPosition(tooltip, anchor, options);
-
-        return tooltip;
-    }
-
-    this.setTooltipPosition = function(tooltip, anchor, options) {
-        const position = this.getPosition(tooltip, anchor, options);
-
-        tooltip.attr({
-            x: position.x,
-            y: position.y,
-            class: `dr-renderer-tooltip ${position.direction}`,
-        });
-
-        if (options.showArrow) {
-            this.setArrowPosition(tooltip, position, anchor, options);
-        }
-    }
-
-    this.setArrowPosition = function(tooltip, position, anchor, options) {
-        const arrowEl = tooltip.element.querySelector(".dr-renderer-tooltip_arrow");
-        const anchorBox = this.getAnchorBox(anchor);
-        const tooltipBox = tooltip.getBBox();
-        arrowEl.removeAttribute("style");
-        const styles = {
-            position: "absolute",
-            display: "block",
-            width: `${options.arrowSize}px`,
-            height: `${options.arrowSize}px`,
-            transform: "rotate(-45deg)",
-            "border-style": "solid",
-            "border-width": `${options.border}px`,
-            background: options.background,
-        };
-
-        switch (position.direction) {
-            case "top":
-                Object.assign(styles, {
-                    "border-color": `transparent transparent ${options.borderColor} ${options.borderColor}`,
-                    "border-bottom-left-radius": `${options.arrowRadius}px`,
-                    bottom: `-${options.arrowSize / 2}px`,
-                    left: `${helpers.clamp(
-                        options.borderRadius,
-                        Math.max(anchorBox.x - position.x, 0) +
-                            Math.min(anchorBox.width, tooltipBox.width) / 2 -
-                            options.arrowSize / 2,
-                        tooltipBox.width - options.arrowSize - options.borderRadius
-                    )}px`,
-                });
-                break;
-            case "bottom":
-                Object.assign(styles, {
-                    "border-color": `${options.borderColor} ${options.borderColor} transparent transparent`,
-                    "border-top-right-radius": `${options.arrowRadius}px`,
-                    top: `-${options.arrowSize / 2}px`,
-                    left: `${helpers.clamp(
-                        options.borderRadius,
-                        Math.max(anchorBox.x - position.x, 0) +
-                            Math.min(anchorBox.width, tooltipBox.width) / 2 -
-                            options.arrowSize / 2,
-                        tooltipBox.width - options.arrowSize - options.borderRadius
-                    )}px`,
-                });
-                break;
-            case "left":
-                Object.assign(styles, {
-                    "border-color": `transparent ${options.borderColor} ${options.borderColor} transparent`,
-                    "border-bottom-right-radius": `${options.arrowRadius}px`,
-                    right: `-${options.arrowSize / 2}px`,
-                    top: `${helpers.clamp(
-                        options.borderRadius,
-                        Math.max(anchorBox.y - position.y, 0) +
-                            Math.min(anchorBox.height, tooltipBox.height) / 2 -
-                            options.arrowSize / 2,
-                        tooltipBox.height - options.arrowSize - options.borderRadius
-                    )}px`,
-                });
-                break;
-            case "right":
-                Object.assign(styles, {
-                    "border-color": `${options.borderColor} transparent transparent ${options.borderColor}`,
-                    "border-top-left-radius": `${options.arrowRadius}px`,
-                    left: `-${options.arrowSize / 2}px`,
-                    top: `${helpers.clamp(
-                        options.borderRadius,
-                        Math.max(anchorBox.y - position.y, 0) +
-                            Math.min(anchorBox.height, tooltipBox.height) / 2 -
-                            options.arrowSize / 2,
-                        tooltipBox.height - options.arrowSize - options.borderRadius
-                    )}px`,
-                });
-                break;
-        }
-
-        arrowEl.setAttribute(
-            "style",
-            Object.keys(styles)
-                .map((key) => `${key}:${styles[key]}`)
-                .join(";")
-        );
-    }
-
-    this.getCoords = function(direction, tooltip, anchor, options) {
-        const tooltipBox = tooltip.getBBox();
-        const anchorBox = this.getAnchorBox(anchor);
-        switch (direction) {
-            case "top":
-                return {
-                    x: helpers.clamp(
-                        options.outerOffset,
-                        anchorBox.x + anchorBox.width / 2 - tooltipBox.width / 2,
-                        this.chart.chartWidth - tooltipBox.width - options.outerOffset
-                    ),
-                    y: anchorBox.y - tooltipBox.height - options.anchorOffset,
-                };
-            case "bottom":
-                return {
-                    x: helpers.clamp(
-                        options.outerOffset,
-                        anchorBox.x + anchorBox.width / 2 - tooltipBox.width / 2,
-                        this.chart.chartWidth - tooltipBox.width - options.outerOffset
-                    ),
-                    y: anchorBox.y + anchorBox.height + options.anchorOffset,
-                };
-            case "left":
-                return {
-                    x: anchorBox.x - tooltipBox.width - options.anchorOffset,
-                    y: helpers.clamp(
-                        options.outerOffset,
-                        anchorBox.y + anchorBox.height / 2 - tooltipBox.height / 2,
-                        this.chart.chartHeight - tooltipBox.height - options.outerOffset
-                    ),
-                };
-            case "right":
-                return {
-                    x: anchorBox.x + anchorBox.width + options.anchorOffset,
-                    y: helpers.clamp(
-                        options.outerOffset,
-                        anchorBox.y + anchorBox.height / 2 - tooltipBox.height / 2,
-                        this.chart.chartHeight - tooltipBox.height - options.outerOffset
-                    ),
-                };
-        }
-    }
-
-    this.getAnchorBox = function(el) {
-        if (el.getBBox) {
-            return el.getBBox();
-        }
-
-        const containerRect = this.chart.container.getBoundingClientRect();
-
-        if (el.getBoundingClientRect) {
-            const elRect = el.getBoundingClientRect();
-            return {
-                x: elRect.x - containerRect.x,
-                y: elRect.y - containerRect.y,
-                width: elRect.width,
-                height: elRect.height,
-            };
-        }
-        return {
-            x: el.x - containerRect.x,
-            y: el.y - containerRect.y,
-            width: 0,
-            height: 0,
-        };
-    }
-
-    this.getPosition = function(tooltip, anchor, options) {
-        const bbox = tooltip.getBBox();
-
-        for (let direction of [options.direction, ...["top", "right", "bottom", "left"].filter((d) => d !== options.direction)]) {
-            const coords = this.getCoords(direction, tooltip, anchor, options);
-
-            if (
-                coords.x >= 0 &&
-                coords.x <= this.chart.chartWidth - bbox.width &&
-                coords.y >= 0 &&
-                coords.y <= this.chart.chartHeight - bbox.height
-            ) {
-                return {
-                    x: coords.x,
-                    y: coords.y,
-                    direction: direction,
-                };
-            }
-        }
-    }
-
-    this.chart = chart;
-    this.options = Object.assign({}, DR_TOOLTIP_OPTIONS_DEFAULT, options);
-}
-
-module.exports = { DrChartTooltip, DR_TOOLTIP_OPTIONS_DEFAULT };

package/src/graph-table-renderer.js

@@ -1,147 +0,0 @@
-/**
- * @typedef {Object} HighChartsRenderer
- * @property {(rows: Rows, options: GTROptions | null, isTable: boolean, widget: any, pivotModel?: PivotModel) => string} rhPivotViewV2
- */
-
-/**
- * @typedef {Object} PivotUtilities
- * @property {(rows: Rows, options: GTROptions) => PivotModel} getPivotDataModel
- */
-
-/**
- * @typedef {Object} JQuery
- * @property {PivotUtilities} pivotUtilities
- */
-
-/**
- * @typedef {Object} PivotModel
- */
-
-/**
- * @typedef {Object} RendererOptions
- * @property {any} hcInstance
- */
-
-/**
- * @typedef {Object} GTROptions
- * @property {RendererOptions} rendererOptions
- */
-
-/**
- * @typedef {Record<string, Record<string, number | string> | number | string>[]} Rows - BE data response
- */
-
-export class GraphTableRenderer {
-    /**
-     * @type {PivotModel | undefined}
-     */
-    #pivotModel;
-
-    /**
-     * @type {GTROptions | null}
-     */
-    #options = null;
-
-    /**
-     * @type {Record<string, Record<string, number | string> | number | string>[]}
-     * 
-     */
-    #rows = [];
-
-    /**
-     * Utility properties
-     */
-    /**
-     * @type {HighChartsRenderer}
-     */
-    #hcr;
-    /**
-     * @type {JQuery}
-     */
-    #$;
-    /**
-     * @type {PivotUtilities}
-     */
-    #pivotUtilities;
-
-    /**
-     * @type {any | null}
-     */
-    #hcInstance = null;
-
-    /**
-     * 
-     * @param {HighChartsRenderer} hcr 
-     * @param {JQuery} $
-     */
-    constructor(hcr, $) {
-        this.#hcr = hcr;
-        this.#$ = $;
-        this.#pivotUtilities = this.#$.pivotUtilities;
-    }
-
-    /**
-     * Creates Pivot Data Model that works we BE data response to aggregate data to render with Chart and Table
-     * @param {Rows} rows BE data response
-     * @param {GTROptions} options 
-     * @returns {this}
-     */
-    createPivotModel(rows, options) {
-        this.#options = options;
-        this.#rows = rows;
-        this.#pivotModel = this.#pivotUtilities.getPivotDataModel(rows, options);
-        return this;
-    }
-
-    /**
-     * @returns {void}
-     */
-    disposePivotModel() {
-        this.#pivotModel = undefined;
-    }
-
-    /**
-     * @see createPivotModel
-     * @returns {PivotModel | undefined}
-     */
-    getPivotModel() {
-        return this.#pivotModel;
-    }
-
-    /**
-     * @description returns Chart instance of HighCharts library
-     * @returns {any | null}
-     */
-    hcInstance() {
-        return this.#hcInstance;
-    }
-
-    #setHcInstance() {
-        if (!this.#options) {
-            return;
-        }
-        this.#hcInstance = this.#options.rendererOptions.hcInstance;
-        if (!this.#hcInstance) {
-            console.warn('[dr_renderer] HighCharts instance not found in options after the chart is rendered.');
-        }
-        /**
-         * hcInstance object is not needed in options after the chart is rendered - it's an internal object of HighCharts library
-         * Deleting to not supply it to widget object, so it cannot be used anywhere else 
-         */
-        delete this.#options.rendererOptions.hcInstance;
-    }
-
-    renderTable(widget = null) {
-        return this.#hcr.rhPivotViewV2(this.#rows, this.#options, true, widget, this.#pivotModel);
-    }
-
-    renderChart(widget = null) {
-        const chart = this.#hcr.rhPivotViewV2(this.#rows, this.#options, false, widget, this.#pivotModel);
-        setTimeout(() => {
-            this.#setHcInstance();
-        });
-        return chart;
-    }
-}
-
-export default GraphTableRenderer;

package/src/seriesPointStyles-helper.js

@@ -1,43 +0,0 @@
-function getSeriesPointStyles(isSelected) {
-    return {
-        opacity: isSelected ? 1 : 0.1,
-        marker: {
-            enabled: true,
-            radius: isSelected ? 8 : 3,
-        },
-        dataLabels: {
-            style: {
-                fontWeight: isSelected ? "bold" : "normal",
-            },
-        },
-    };
-}
-
-function setSeriesPointStylesOnClick(e) {
-    const selectedPoint = e.point;
-    e.point.series.chart.series.forEach((series) =>
-        series.points.forEach((point) => {
-            point.update(getSeriesPointStyles(point === selectedPoint), false);
-        })
-    );
-    e.point.series.chart.redraw();
-}
-
-function setInitialPointStyles(opts, series) {
-    series.forEach((series) => {
-        if (Array.isArray(series.data)) {
-            series.data.forEach((item) => {
-                const isSelected =
-                    item && opts.selectedPoint &&
-                    item.initialName === opts.selectedPoint.initialName &&
-                    item.y.toFixed(2) === opts.selectedPoint.y.toFixed(2);
-                item = Object.assign(item, getSeriesPointStyles(isSelected));
-            });
-        }
-    });
-}
-
-module.exports = {
-    setSeriesPointStylesOnClick,
-    setInitialPointStyles,
-};

package/tests/dr-renderer-helpers.test.js

@@ -1,150 +0,0 @@
-import drRendererHelpers from '../src/dr-renderer-helpers';
-
-describe('dr-renderer-helpers', () => {
-
-    describe('backendSortingKeysAreNotEmpty', () => {
-        it('should return true if keys are not empty', () => {
-            const keys = {
-                row_keys: [1, 2, 3],
-                col_keys: [1, 2, 3]
-            };
-            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
-        });
-
-        it('should return true if one of the keys is not empty', () => {
-            const keys = {
-                row_keys: [1, 2, 3],
-                col_keys: []
-            };
-            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
-        });
-
-        it('should return false if keys are empty', () => {
-            const keys = {
-                row_keys: [],
-                col_keys: [],
-            };
-            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
-        });
-
-        it('should return false if keys are null', () => {
-            const keys = null;
-            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
-        });
-    });
-
-    describe('capitalize', () => {
-        it('should capitalize a string', () => {
-            const string = 'test';
-            expect(drRendererHelpers.capitalize(string)).toBe('Test');
-        });
-
-        it('should not capitalize a string when it was not trimmed', () => {
-            const string = ' test';
-            expect(drRendererHelpers.capitalize(string)).toBe(' test');
-        });
-
-        it('should return an empty string if string is null', () => {
-            const string = null;
-            expect(drRendererHelpers.capitalize(string)).toBe('');
-        });
-    });
-
-    describe('clamp', () => {
-        it('should clamp value between teh boundaries', () => {
-            expect(drRendererHelpers.clamp(10, 5, 20)).toBe(10);
-            expect(drRendererHelpers.clamp(10, 25, 20)).toBe(20);
-            expect(drRendererHelpers.clamp(10, 15, 20)).toBe(15);
-        });
-    });
-
-    describe('isNumber', () => {
-        it('should check whether the value is a finity number', () => {
-            expect(drRendererHelpers.isNumber('number')).toBeFalsy();
-            expect(drRendererHelpers.isNumber(Infinity)).toBeFalsy();
-            expect(drRendererHelpers.isNumber(12)).toBeTruthy();
-        });
-    });
-
-    describe('mergeDeep', () => {
-        it('should handle the wrong data', () => {
-            expect(drRendererHelpers.mergeDeep([1, 2, 3], { a: 1, b: 2})).toEqual([1, 2, 3]);
-            expect(drRendererHelpers.mergeDeep('string', { a: 1, b: 2})).toEqual('string');
-            expect(drRendererHelpers.mergeDeep({ a: 1 }, 'string')).toEqual({ a: 1 });
-        });
-
-        it('should not merge arrays and replace instead', () => {
-            expect(drRendererHelpers.mergeDeep({
-                a: [1, 2, 3]
-            }, {
-                a: [2, 3, 4]
-            })).toEqual({
-                a: [2, 3, 4]
-            });
-        });
-
-        it('should merge nested objects', () => {
-            expect(drRendererHelpers.mergeDeep({
-                a: 1,
-                b: {
-                    c: 3,
-                    d: 4
-                }
-            },
-            {
-                b: {
-                    d: 5,
-                    e: 6
-                },
-                c: 7
-            })).toEqual({
-                a: 1,
-                b: {
-                    c: 3,
-                    d: 5,
-                    e: 6,
-                },
-                c: 7,
-            });
-        });
-
-        it('should merge more than 2 objects', () => {
-            expect(drRendererHelpers.mergeDeep({
-                a: 1,
-                b: 2
-            },
-            {
-                b: 3,
-                c: 4
-            },
-            {
-                a: 5,
-                e: 6
-            })).toEqual({
-                a: 5,
-                b: 3,
-                c: 4,
-                e: 6
-            });
-        });
-    });
-
-    describe('removeSVGTextCorrection', () => {
-        it('should remove yCorr by default', () => {
-            const svg = {
-                yCorr: -12
-            };
-            drRendererHelpers.removeSVGTextCorrection(svg);
-            expect(svg.yCorr).toBe(0);
-        });
-
-        it('should remove yCorr by default', () => {
-            const svg = {
-                xCorr: -12
-            };
-            drRendererHelpers.removeSVGTextCorrection(svg, 'xCorr');
-            svg.xCorr = -20;
-            expect(svg.xCorr).toBe(0);
-        });
-    });
-});