@datarailsshared/dr_renderer 1.2.452 → 1.2.454

package/src/dr_chart_tooltip.js

@@ -0,0 +1,279 @@
+const helpers = require("./dr-renderer-helpers");
+
+export 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,
+};
+
+export class DrChartTooltip {
+    #chart;
+    #options;
+
+    constructor(chart, options = {}) {
+        this.#chart = chart;
+        this.#options = { ...DR_TOOLTIP_OPTIONS_DEFAULT, ...options };
+    }
+
+    getOptions() {
+        return this.#options;
+    }
+
+    add(content, anchor, options = {}) {
+        const localOptions = { ...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);
+            });
+        }
+    }
+
+    create(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;
+    }
+
+    setTooltipPosition(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);
+        }
+    }
+
+    setArrowPosition(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(";")
+        );
+    }
+
+    getCoords(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
+                    ),
+                };
+        }
+    }
+
+    getAnchorBox(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,
+        };
+    }
+
+    getPosition(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 {
+                    ...coords,
+                    direction,
+                };
+            }
+        }
+    }
+}

package/src/highcharts_renderer.js

@@ -1,5 +1,7 @@
 const helpers = require('./dr-renderer-helpers');
-const seriesPointStylesHelper= require('./seriesPointStyles-helper')
+const { DrChart } = require('./charts/dr_chart');
+const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
+const seriesPointStylesHelper= require('./seriesPointStyles-helper');
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -56,6 +58,7 @@ const CHART_TYPES = {
     PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
     GAUGE_SOLID_CHART: 'gauge-solid-chart',
     GAUGE_CHART: 'gauge-chart',
+    GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
     KPI_WIDGET: 'kpi-widget',
     TEXT_WIDGET: 'text-widget',
     WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
@@ -195,6 +198,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     if (!highchartsRenderer) {
         highchartsRenderer = {};
     }
+    DrChart.highchartsRenderer = highchartsRenderer;
     lodash.assign(highchartsRenderer, HIGHCHARTS_CONSTANTS);
 
     highchartsRenderer.enabledNewWidgetValueFormatting = false;
@@ -265,7 +269,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 style: {
                     fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
                     color: CHART_COLORS.TEXT,
-                    'font-size': '10px',
+                    'font-size': '12px',
                     'font-weight': "bold"
                 }
             },
@@ -287,7 +291,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             labels: {
                 style: {
                     fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
-                    'font-size': '10px',
+                    'font-size': '12px',
                     color: CHART_COLORS.LABEL_SECOND
                 }
             },
@@ -2231,6 +2235,41 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptRenderGauge(pivotData, opts, true);
     };
 
+    highchartsRenderer.transformOldGaugeOptions = (oldOptions) => {
+        const newOptions = highchartsRenderer.objectCopyJsonMethod(oldOptions);
+        const { range, segments } = newOptions;
+
+        if (!segments) {
+            newOptions.segments = highchartsRenderer.objectCopyJsonMethod(GAUGE_OPTIONS_DEFAULT.segments);
+        }
+
+        if (!range) {
+            return newOptions;
+        }
+
+        const rangeArr = [range.low, range.medium, Math.max(range.high || 100, 100)];
+
+        newOptions.segments.forEach((segment, i) => {
+            segment.from = (rangeArr[i - 1] + 1) || segment.from;
+            segment.to = rangeArr[i] || segment.to;
+        });
+
+        if (!newOptions.goal) {
+            newOptions.goal = highchartsRenderer.objectCopyJsonMethod(GAUGE_OPTIONS_DEFAULT.goal);
+        }
+
+        newOptions.goal.value = range.max || newOptions.goal.value;
+
+        delete newOptions.range;
+
+        return newOptions;
+    };
+
+    highchartsRenderer.ptRenderGaugeEnhanced = (pivotData, opts) => {
+        opts.chartOptions = highchartsRenderer.transformOldGaugeOptions(opts.chartOptions);
+        return new DrGaugeChart(pivotData, opts).render();
+    };
+
     highchartsRenderer.ptRenderGauge = (pivotData, opts, isSolidGauge = false) => {
         const gaugeopts = opts.chartOptions
             || highchartsRenderer.getDefaultValueForChart(isSolidGauge ? 'gauge-solid-chart' : 'gauge-chart');
@@ -6073,7 +6112,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const chartOpt = type === highchartsRenderer.richTextSubType.type
             ? highchartsRenderer.richTextSubType
             : highchartsRenderer.getChartOptionsBySubType(type);
-
         let valToReturn = {};
         if (chartOpt) {
             lodash.forEach(chartOpt.suboptions, (suboption) => {
@@ -6574,6 +6612,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
             ]
         },
+        'table_options_gauge': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Table',
+            category_type: 'table_options',
+            elements: [
+                {
+                    element_type: 'input',
+                    value_name: 'table_colors_offset',
+                    element_label: 'Colors offset',
+                    default_value: 0
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Column totals',
+                    value_name: 'show_column_total',
+                    default_value: true
+                }
+            ]
+        },
         'value': {
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Value',
@@ -6848,6 +6905,67 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
             ]
         },
+        'label_gauge': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Label',
+            category_type: 'label',
+            elements: [
+                {
+                    element_type: 'toggle',
+                    element_label: 'Show',
+                    value_name: 'show',
+                    default_value: true,
+                },
+                {
+                    element_type: 'devider',
+                },
+                {
+                    element_type: 'devider',
+                    element_label: 'Label Style',
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_style',
+                    element_label: 'Font style',
+                    element_options: SUBOPTIONS_FONTS,
+                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: suboptionsFontSizeValues,
+                    default_value: 16,
+                },
+                {
+                    element_type: 'color_picker',
+                    value_name: 'font_color',
+                    element_label: 'Font Color',
+                    default_value: '#333'
+                },
+                {
+                    element_type: 'devider',
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Goal name',
+                    value_name: 'show_goal_name',
+                    default_value: true,
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Value % out of Goal',
+                    value_name: 'show_percentage_in_value',
+                    default_value: false,
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Segment % out Goal',
+                    value_name: 'show_percentage_in_segments',
+                    default_value: false,
+                },
+            ]
+        },
         'label_with_percentage': {
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Label',
@@ -7191,6 +7309,73 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
             ]
         },
+        'tooltips_gauge': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Tooltip',
+            category_type: 'tooltips',
+            elements: [
+                {
+                    element_type: 'toggle',
+                    element_label: 'Show',
+                    value_name: 'show',
+                    default_value: true,
+                },
+                {
+                    element_type: 'devider',
+                },
+                {
+                    element_type: 'devider',
+                    element_label: 'Tooltip Style',
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_style',
+                    element_label: 'Font style',
+                    element_options: SUBOPTIONS_FONTS,
+                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: suboptionsFontSizeValues,
+                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
+                },
+                {
+                    element_type: 'color_picker',
+                    value_name: 'font_color',
+                    element_label: 'Font Color',
+                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR
+                },
+                {
+                    element_type: 'devider',
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Segment name',
+                    value_name: 'show_segment_name',
+                    default_value: true,
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Goal %',
+                    value_name: 'show_percentage_in_goal',
+                    default_value: true,
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Value %',
+                    value_name: 'show_percentage_in_value',
+                    default_value: true,
+                },
+                {
+                    element_type: 'checkbox',
+                    element_label: 'Segments %',
+                    value_name: 'show_percentage_in_segments',
+                    default_value: true,
+                },
+            ]
+        },
         'negative_number_format': {
             is_hidden: true,
             category_class: 'google-visualization-charteditor-mini-more',
@@ -7392,7 +7577,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             ],
             default_value: ''
           }]
-        },
+        }
     };
 
     highchartsRenderer.chartsTypesInfo = {
@@ -7603,6 +7788,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendName: 'Data Series',
             startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
         },
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
+            name: 'Gauge chart',
+            label: 'Gauge',
+            title: 'Measures progress toward a goal or a KPI.',
+            axisName: 'X-Axis',
+            legendName: 'Data Series',
+            startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
+        },
         'kpi-widget': {
             name: 'Kpi ',
             label: 'KPI',
@@ -7995,7 +8188,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["legends"],
                         ]
-                    }
+                    },
+                    {
+                        type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
+                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED].name,
+                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                        hidden: true,
+                        render: highchartsRenderer.ptRenderGaugeEnhanced,
+                        suboptions: [
+                            highchartsRenderer.suboptions["label_gauge"],
+                            highchartsRenderer.suboptions["tooltips_gauge"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["table_options_gauge"],
+                            highchartsRenderer.suboptions["table_design_options"],
+                        ]
+                    },
                 ]
             },
             {

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

@@ -49,4 +49,102 @@ describe('dr-renderer-helpers', () => {
             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);
+        });
+    });
 });