@datarailsshared/dr_renderer 1.1.41 → 1.2.2

package/src/dr-renderer-helpers.js

@@ -0,0 +1,58 @@
+function backendSortingKeysAreNotEmpty(keys) {
+    return !!keys && (!!keys.row_keys && !!keys.row_keys.length || !!keys.col_keys && !!keys.col_keys.length);
+}
+
+function capitalize(string) {
+    if (typeof string !== 'string') return '';
+    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,
+}

package/src/dr_chart_tooltip.js

@@ -0,0 +1,277 @@
+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 };