@datarailsshared/dr_renderer 1.2.6 → 1.2.7

package/src/dataformatter.js

@@ -1,3 +1,5 @@
+const _ = require('lodash');
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -350,7 +352,7 @@ var DataFormatterImpl = function () {
 
             n = this.roundDecimals(n, decimals).toString().split('.');
             var integerPart = n[0];
-            var decimalPart = n[1] || 0;
+            var decimalPart = _.padEnd(String(n[1] || 0), decimals, '0');
 
             return this.applyNumberPattern(integerPart, patternIntegerPart) + this.locale.decimalSeparator + this.applyNumberPattern(decimalPart, patternDecimalPart, n[1] && n[1][0] == '0' ? '' : 'right');
         }
@@ -1026,9 +1028,49 @@ var DataFormatterImpl = function () {
 
             return result;
         }
+    }, {
+        key: 'formatValue',
+        value: function formatValue(data_type, number_format, value, override_values_format) {
+            if (!number_format) {
+                number_format = 'General';
+            }
+
+            if (Number.isNaN(value)) {
+                return { value: "#Error" };
+            }
+
+            if (data_type === 'n' && value != null) {
+                if (override_values_format) {
+                    number_format = override_values_format;
+                }
+
+                if (number_format.indexOf('[kilo]') >= 0) {
+                    value = value / 1000;
+                    number_format = number_format.replace('[kilo]', '');
+                } else if (number_format.indexOf('[mega]') >= 0) {
+                    value = value / 1000000;
+                    number_format = number_format.replace('[mega]', '');
+                } else if (number_format.indexOf('[kilomega]') >= 0) {
+                    number_format = number_format.replace('[kilomega]', '');
+                }
+
+                return this.format(value, 'Number', number_format);
+            } else if (data_type === 'd') {
+                number_format = number_format.split(';')[0];
+                let d;
+                if (value instanceof Date || typeof value === 'string') {
+                    d = new Date(value);
+                } else {
+                    d = new Date(value * 1000);
+                }
+                return this.format(d.toString(), 'DateTime', number_format);
+            } else {
+                return value;
+            }
+        }
     }]);
 
     return DataFormatterImpl;
 }();
 
-module.exports = new DataFormatterImpl();
+module.exports = new DataFormatterImpl();

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 };