@datarailsshared/dr_renderer 1.2.454 → 1.2.455

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -1,8 +1,7 @@
-const { DrChart } = require("./dr_chart");
 const { DrChartTooltip } = require("../dr_chart_tooltip");
 const helpers = require("../dr-renderer-helpers");
 
-export const GAUGE_OPTIONS_DEFAULT = {
+const GAUGE_OPTIONS_DEFAULT = {
     gauge: {
         background: "#fff",
         startAngle: -90,
@@ -51,39 +50,40 @@ export const GAUGE_OPTIONS_DEFAULT = {
     ],
 };
 
-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) {
+function DrGaugeChart(pivotData, opts) {
+    this.render = function () {
+        return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
+    };
+
+    this.formatValue = function (data_type, number_format, value, widget_values_format) {
+        return DrGaugeChart.highchartsRenderer.formatValue(data_type, number_format, value, widget_values_format);
+    };
+
+    this.getDefaultValueForChart = function (type, existing_options) {
+        return DrGaugeChart.highchartsRenderer.getDefaultValueForChart(type, existing_options);
+    };
+
+    this.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
+        return DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries(
+            pivotData,
+            colors,
+            onlyNumbers,
+            isUniqueVals,
+            additionOptions,
+            opts,
+            chartOptions
+        );
+    };
+
+    this.getSingleValueAgg = function (opts, aggfunc, base) {
+        return DrGaugeChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
+    };
+
+    this.isLeftQuarter = function (value, max = this.max) {
         return value < max / 2;
-    }
+    };
 
-    createPlotBands(options) {
+    this.createPlotBands = function (options) {
         const {
             segments,
             isAbsoluteValue,
@@ -106,41 +106,41 @@ export class DrGaugeChart extends DrChart {
         bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
 
         return bands;
-    }
+    };
 
-    createTicks(plotBands, options) {
+    this.createTicks = function (plotBands, options) {
         return [...new Set([0, ...plotBands.map((b) => b.to), options.goal.value])].sort((a, b) => a - b);
-    }
+    };
 
-    mergeOptions(options) {
+    this.mergeOptions = function (options) {
         return helpers.mergeDeep(
             JSON.parse(JSON.stringify(GAUGE_OPTIONS_DEFAULT)),
-            this.getDefaultValueForChart(DrChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED),
+            this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED),
             options
         );
-    }
+    };
 
-    getAngleForValue(
+    this.getAngleForValue = function (
         value,
         min = 0,
-        max = this.#max,
-        startAngle = this.#options.gauge.startAngle,
-        endAngle = this.#options.gauge.endAngle
+        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;
-    }
+    this.formatValue = function (value, format = this.format) {
+        return helpers.isNumber(value) ? DrGaugeChart.highchartsRenderer.formatValue("n", format, value).value : value;
+    };
 
-    toPercent(value) {
-        return `${Math.round((value * 100) / (this.#options.isAbsoluteValue ? this.#max : this.#goal.value))}%`;
-    }
+    this.toPercent = function (value) {
+        return `${Math.round((value * 100) / (this.options.isAbsoluteValue ? this.max : this.goal.value))}%`;
+    };
 
-    formatValueLabel(value, options) {
+    this.formatValueLabel = function (value, options) {
         return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
             options.label.font_size
         }px;">
@@ -158,9 +158,9 @@ export class DrGaugeChart extends DrChart {
                 options.gauge.colors.meta
             };">Current status</span>
         </span>`;
-    }
+    };
 
-    formatTickLabel(value, options) {
+    this.formatTickLabel = function (value, options) {
         const isGoal = value === options.goal.value;
         const isLeftQuarter = this.isLeftQuarter(value);
         const formattedValue = this.formatValue(value);
@@ -191,9 +191,9 @@ export class DrGaugeChart extends DrChart {
             ${goalTitle}
             ${percentage}
         </span>`;
-    }
+    };
 
-    getValue(pivotData, opts) {
+    this.getValue = function (pivotData, opts) {
         const lineSeries = this.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
 
         let total = lineSeries
@@ -220,9 +220,9 @@ export class DrGaugeChart extends DrChart {
         const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
 
         return value;
-    }
+    };
 
-    getBorderPosition(chart, options, position) {
+    this.getBorderPosition = function (chart, options, position) {
         const { center, size } = chart.pane[0].options;
         const {
             gauge: { tickLength, tickWidth },
@@ -232,17 +232,18 @@ export class DrGaugeChart extends DrChart {
             x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
             y: center[1] + tickWidth / 2,
         };
-    }
+    };
 
-    createBorder(chart, options, position) {
+    this.createBorder = function (chart, options, position) {
         return chart.renderer
-            .arc({
-                ...this.getBorderPosition(chart, options, position),
-                r: options.gauge.thickness / 2,
-                innerR: 0,
-                start: 0,
-                end: Math.PI,
-            })
+            .arc(
+                Object.assign(this.getBorderPosition(chart, options, position), {
+                    r: options.gauge.thickness / 2,
+                    innerR: 0,
+                    start: 0,
+                    end: Math.PI,
+                })
+            )
             .attr({
                 fill:
                     position === "start"
@@ -251,9 +252,9 @@ export class DrGaugeChart extends DrChart {
             })
             .add()
             .toFront();
-    }
+    };
 
-    getGoalIconPosition(chart, options) {
+    this.getGoalIconPosition = function (chart, options) {
         const { center, size } = chart.pane[0].options;
         const radius = size / 2;
         const {
@@ -265,26 +266,26 @@ export class DrGaugeChart extends DrChart {
             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) {
+    this.createGoalIcon = function (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) {
+    this.getValueLabelPosition = function (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();
+    this.createValueLabel = function (chart, options) {
+        const label = chart.renderer.text(this.formatValueLabel(this.value, options), 0, 0, true).add().toFront();
 
         helpers.removeSVGTextCorrection(label, "yCorr");
 
@@ -293,11 +294,11 @@ export class DrGaugeChart extends DrChart {
         });
 
         return label;
-    }
+    };
 
-    getPaneDimensions(chart, options) {
+    this.getPaneDimensions = function (chart, options) {
         const { renderer } = chart;
-        const valueLabel = this.createValueLabel(chart, this.#options);
+        const valueLabel = this.createValueLabel(chart, this.options);
         const { offset } = options.gauge;
         const { height: labelH } = valueLabel.getBBox();
 
@@ -306,7 +307,7 @@ export class DrGaugeChart extends DrChart {
 
         const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
         if (options.label.show) {
-            this.#ticks.forEach((tick) => {
+            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
@@ -333,9 +334,9 @@ export class DrGaugeChart extends DrChart {
             radius: Math.min(...radiuses),
             center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
         };
-    }
+    };
 
-    setTicksStyles(chart, options) {
+    this.setTicksStyles = function (chart, options) {
         Object.keys(chart.yAxis[0].ticks).forEach((i) => {
             const tick = chart.yAxis[0].ticks[i];
             const isLeftQuarter = this.isLeftQuarter(tick.pos);
@@ -355,9 +356,9 @@ export class DrGaugeChart extends DrChart {
                 transform: `translate(${isLeftQuarter ? "-100%" : 0}, 0)`,
             });
         });
-    }
+    };
 
-    addTooltips(chart, options) {
+    this.addTooltips = function (chart, options) {
         if (!options.tooltips.show) {
             return false;
         }
@@ -380,7 +381,7 @@ export class DrGaugeChart extends DrChart {
 
         // 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, {
+            drTooltip.add(this.toPercent(this.value), chart.label.element, {
                 direction: "top",
             });
         }
@@ -410,43 +411,43 @@ export class DrGaugeChart extends DrChart {
                 });
             }
         });
-    }
+    };
 
-    setPane(chart, options) {
+    this.setPane = function (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) + '%';
-    }
+        chart.series[0].options.dial.radius = Math.round((100 * (radius - options.gauge.tickLength - 10)) / radius) + "%";
+    };
 
-    setCustomElements(chart, options) {
+    this.setCustomElements = function (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) {
+    this.updateCustomElements = function (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) {
+    this.moveCustomElementsToFront = function (chart) {
         chart.startBorder.toFront();
         chart.endBorder.toFront();
         chart.goalIcon.toFront();
-    }
+    };
 
-    clampValueToPane(value, max = this.#max) {
+    this.clampValueToPane = function (value, max = this.max) {
         return helpers.clamp(-0.02 * max, value, 1.02 * max);
-    }
+    };
 
-    configChart() {
+    this.configChart = function () {
         return {
             title: {
                 text: null,
@@ -460,7 +461,7 @@ export class DrGaugeChart extends DrChart {
             },
             chart: {
                 type: "gauge",
-                backgroundColor: this.#options.gauge.background,
+                backgroundColor: this.options.gauge.background,
                 plotBackgroundColor: null,
                 plotBackgroundImage: null,
                 plotBorderWidth: 0,
@@ -468,18 +469,18 @@ export class DrGaugeChart extends DrChart {
                 events: {
                     render: ({ target: chart }) => {
                         this.moveCustomElementsToFront(chart);
-                        this.setTicksStyles(chart, this.#options);
+                        this.setTicksStyles(chart, this.options);
                     },
                     beforeRedraw: ({ target: chart }) => {
-                        this.setPane(chart, this.#options);
-                        this.updateCustomElements(chart, this.#options);
+                        this.setPane(chart, this.options);
+                        this.updateCustomElements(chart, this.options);
                     },
                     beforeRender: ({ target: chart }) => {
-                        this.setPane(chart, this.#options);
-                        this.setCustomElements(chart, this.#options);
+                        this.setPane(chart, this.options);
+                        this.setCustomElements(chart, this.options);
                     },
                     load: ({ target: chart }) => {
-                        this.addTooltips(chart, this.#options);
+                        this.addTooltips(chart, this.options);
                     },
                 },
                 margin: [0, 0, 0, 0],
@@ -496,16 +497,16 @@ export class DrGaugeChart extends DrChart {
             // the value axis
             yAxis: {
                 min: 0,
-                max: this.#max,
-                tickPositions: this.#ticks,
+                max: this.max,
+                tickPositions: this.ticks,
                 tickPosition: "inside",
-                tickColor: this.#options.gauge.background,
-                tickLength: this.#options.gauge.tickLength,
-                tickWidth: this.#options.gauge.tickWidth,
+                tickColor: this.options.gauge.background,
+                tickLength: this.options.gauge.tickLength,
+                tickWidth: this.options.gauge.tickWidth,
                 minorTickInterval: null,
 
                 labels: {
-                    enabled: !!this.#options.label.show,
+                    enabled: !!this.options.label.show,
                     distance: 0,
                     verticalAlign: "middle",
                     allowOverlap: true,
@@ -515,18 +516,18 @@ export class DrGaugeChart extends DrChart {
                         width: "auto",
                     },
                     formatter: ({ value }) => {
-                        return this.formatTickLabel(value, this.#options);
+                        return this.formatTickLabel(value, this.options);
                     },
                     useHTML: true,
                 },
                 lineWidth: 0,
-                plotBands: this.#plotBands,
+                plotBands: this.plotBands,
             },
 
             series: [
                 {
                     name: null,
-                    data: [this.clampValueToPane(this.#value)],
+                    data: [this.clampValueToPane(this.value)],
                     dataLabels: [
                         {
                             enabled: false,
@@ -534,17 +535,29 @@ export class DrGaugeChart extends DrChart {
                     ],
                     dial: {
                         radius: "70%",
-                        backgroundColor: this.#options.gauge.pivot.color,
-                        baseWidth: 2 * this.#options.gauge.pivot.radius,
+                        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,
+                        backgroundColor: this.options.gauge.pivot.color,
+                        radius: this.options.gauge.pivot.radius,
                     },
                 },
             ],
         };
-    }
+    };
+
+    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];
 }
+
+module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

package/src/dr_chart_tooltip.js

@@ -1,6 +1,6 @@
 const helpers = require("./dr-renderer-helpers");
 
-export const DR_TOOLTIP_OPTIONS_DEFAULT = {
+const DR_TOOLTIP_OPTIONS_DEFAULT = {
     anchorOffset: 10,
     arrowRadius: 3,
     arrowSize: 10,
@@ -16,21 +16,13 @@ export const DR_TOOLTIP_OPTIONS_DEFAULT = {
     showArrow: true,
 };
 
-export class DrChartTooltip {
-    #chart;
-    #options;
-
-    constructor(chart, options = {}) {
-        this.#chart = chart;
-        this.#options = { ...DR_TOOLTIP_OPTIONS_DEFAULT, ...options };
-    }
-
-    getOptions() {
-        return this.#options;
+function DrChartTooltip(chart, options) {
+    this.getOptions = function() {
+        return this.options;
     }
 
-    add(content, anchor, options = {}) {
-        const localOptions = { ...this.#options, ...options };
+    this.add = function(content, anchor, options = {}) {
+        const localOptions = Object.assign({}, this.options, options );
         let tooltip;
 
         if (!content || !anchor) {
@@ -64,8 +56,8 @@ export class DrChartTooltip {
         }
     }
 
-    create(content, anchor, options) {
-        const tooltip = this.#chart.renderer
+    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",
@@ -93,7 +85,7 @@ export class DrChartTooltip {
         return tooltip;
     }
 
-    setTooltipPosition(tooltip, anchor, options) {
+    this.setTooltipPosition = function(tooltip, anchor, options) {
         const position = this.getPosition(tooltip, anchor, options);
 
         tooltip.attr({
@@ -107,7 +99,7 @@ export class DrChartTooltip {
         }
     }
 
-    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();
@@ -190,7 +182,7 @@ export class DrChartTooltip {
         );
     }
 
-    getCoords(direction, tooltip, anchor, options) {
+    this.getCoords = function(direction, tooltip, anchor, options) {
         const tooltipBox = tooltip.getBBox();
         const anchorBox = this.getAnchorBox(anchor);
         switch (direction) {
@@ -199,7 +191,7 @@ export class DrChartTooltip {
                     x: helpers.clamp(
                         options.outerOffset,
                         anchorBox.x + anchorBox.width / 2 - tooltipBox.width / 2,
-                        this.#chart.chartWidth - tooltipBox.width - options.outerOffset
+                        this.chart.chartWidth - tooltipBox.width - options.outerOffset
                     ),
                     y: anchorBox.y - tooltipBox.height - options.anchorOffset,
                 };
@@ -208,7 +200,7 @@ export class DrChartTooltip {
                     x: helpers.clamp(
                         options.outerOffset,
                         anchorBox.x + anchorBox.width / 2 - tooltipBox.width / 2,
-                        this.#chart.chartWidth - tooltipBox.width - options.outerOffset
+                        this.chart.chartWidth - tooltipBox.width - options.outerOffset
                     ),
                     y: anchorBox.y + anchorBox.height + options.anchorOffset,
                 };
@@ -218,7 +210,7 @@ export class DrChartTooltip {
                     y: helpers.clamp(
                         options.outerOffset,
                         anchorBox.y + anchorBox.height / 2 - tooltipBox.height / 2,
-                        this.#chart.chartHeight - tooltipBox.height - options.outerOffset
+                        this.chart.chartHeight - tooltipBox.height - options.outerOffset
                     ),
                 };
             case "right":
@@ -227,18 +219,18 @@ export class DrChartTooltip {
                     y: helpers.clamp(
                         options.outerOffset,
                         anchorBox.y + anchorBox.height / 2 - tooltipBox.height / 2,
-                        this.#chart.chartHeight - tooltipBox.height - options.outerOffset
+                        this.chart.chartHeight - tooltipBox.height - options.outerOffset
                     ),
                 };
         }
     }
 
-    getAnchorBox(el) {
+    this.getAnchorBox = function(el) {
         if (el.getBBox) {
             return el.getBBox();
         }
 
-        const containerRect = this.#chart.container.getBoundingClientRect();
+        const containerRect = this.chart.container.getBoundingClientRect();
 
         if (el.getBoundingClientRect) {
             const elRect = el.getBoundingClientRect();
@@ -257,7 +249,7 @@ export class DrChartTooltip {
         };
     }
 
-    getPosition(tooltip, anchor, options) {
+    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)]) {
@@ -265,15 +257,21 @@ export class DrChartTooltip {
 
             if (
                 coords.x >= 0 &&
-                coords.x <= this.#chart.chartWidth - bbox.width &&
+                coords.x <= this.chart.chartWidth - bbox.width &&
                 coords.y >= 0 &&
-                coords.y <= this.#chart.chartHeight - bbox.height
+                coords.y <= this.chart.chartHeight - bbox.height
             ) {
                 return {
-                    ...coords,
-                    direction,
+                    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/highcharts_renderer.js

@@ -1,5 +1,4 @@
 const helpers = require('./dr-renderer-helpers');
-const { DrChart } = require('./charts/dr_chart');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
 const seriesPointStylesHelper= require('./seriesPointStyles-helper');
 
@@ -198,7 +197,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     if (!highchartsRenderer) {
         highchartsRenderer = {};
     }
-    DrChart.highchartsRenderer = highchartsRenderer;
+    DrGaugeChart.highchartsRenderer = highchartsRenderer;
     lodash.assign(highchartsRenderer, HIGHCHARTS_CONSTANTS);
 
     highchartsRenderer.enabledNewWidgetValueFormatting = false;

package/tests/dr_gauge_chart.test.js

@@ -1,5 +1,4 @@
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require("../src/charts/dr_gauge_chart");
-const { DrChart } = require("../src/charts/dr_chart");
 const helpers = require("../src/dr-renderer-helpers");
 const { DrChartTooltip } = require("../src/dr_chart_tooltip");
 
@@ -7,7 +6,7 @@ jest.mock("../src/dr_chart_tooltip"); // Mock the tooltip class
 
 const mockFormattedValue = "16,549";
 
-DrChart.highchartsRenderer = {
+DrGaugeChart.highchartsRenderer = {
     CHART_TYPES: {
         GAUGE_CHART_ENHANCE: "gauge-chart-enhanced",
     },
@@ -401,21 +400,20 @@ describe("DrGaugeChart", () => {
     describe("formatValue", () => {
         it("should format number to provided format", () => {
             expect(chart.formatValue(16549.1234, "#,###")).toBe(mockFormattedValue);
-            expect(DrChart.highchartsRenderer.formatValue).toHaveBeenCalledWith("n", "#,###", 16549.1234, undefined);
+            expect(DrGaugeChart.highchartsRenderer.formatValue).toHaveBeenCalledWith("n", "#,###", 16549.1234);
         });
 
         it("should not format value unless it is a number", () => {
             expect(chart.formatValue("one", "#,###")).toBe("one");
-            expect(DrChart.highchartsRenderer.formatValue).not.toHaveBeenCalled();
+            expect(DrGaugeChart.highchartsRenderer.formatValue).not.toHaveBeenCalled();
         });
 
         it("should use default value for format", () => {
             expect(chart.formatValue(16549.1234)).toBe(mockFormattedValue);
-            expect(DrChart.highchartsRenderer.formatValue).toHaveBeenCalledWith(
+            expect(DrGaugeChart.highchartsRenderer.formatValue).toHaveBeenCalledWith(
                 "n",
                 mockAggregation.widget_values_format,
-                16549.1234,
-                undefined
+                16549.1234
             );
         });
     });
@@ -704,17 +702,17 @@ describe("DrGaugeChart", () => {
 
     describe("getValue", () => {
         it("should return aggregator value unledss the total is empty", () => {
-            DrChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([]);
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([]);
             expect(chart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
         });
 
         it("should return value to display", () => {
-            DrChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
             expect(chart.getValue(mockPivotData, {})).toBe(2000);
         });
 
         it("should calculate total", () => {
-            DrChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([
                 { data: [2000] },
                 { data: [3000] },
                 { data: [5000] },
@@ -1903,6 +1901,7 @@ describe("DrGaugeChart", () => {
         });
 
         it("sets series", () => {
+            chart.value = 204;
             const series = chart.configChart().series[0];
 
             expect(series.name).toBe(null);

package/src/charts/dr_chart.js

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