@datarailsshared/dr_renderer 1.4.46 → 1.4.52

package/README.md

@@ -21,3 +21,4 @@ To be able to compile types with `npm run build:types` you need to install types
 
 ## Publish to npm
 Just merge to prod branch
+###

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -89,10 +89,15 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
     }
 
     this.mergeOptions = function (options) {
+        const clone = (o) =>
+            o && typeof o === 'object'
+                ? (globalThis.structuredClone ? structuredClone(o) : JSON.parse(JSON.stringify(o)))
+                : o;
+
         return helpers.mergeDeep(
-            JSON.parse(JSON.stringify(GAUGE_OPTIONS_DEFAULT)),
-            this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED),
-            options
+            clone(GAUGE_OPTIONS_DEFAULT),
+            clone(this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED)),
+            clone(options || {})
         );
     };
 
@@ -246,45 +251,75 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
     };
 
     this.getPaneDimensions = function (chart, options) {
-        const { renderer } = chart;
-        const valueLabel = this.createValueLabel(chart, this.options);
+        const valueLabel = this.createValueLabel(chart, options);
+        const { height: labelH } = valueLabel.getBBox ? valueLabel.getBBox() : { height: 0 };
+        valueLabel.destroy && valueLabel.destroy();
+
         const { offset } = options.gauge;
-        const { height: labelH } = valueLabel.getBBox();
+        const offsetTop    = Array.isArray(offset) ? offset[0] : 0;
+        const offsetRight  = Array.isArray(offset) ? offset[1] : 0;
+        const offsetBottomG= Array.isArray(offset) ? offset[2] : 0;
+        const offsetLeft   = Array.isArray(offset) ? offset[3] : 0;
+
+        const vOff = options.gauge.valueOffset || [0,0,0,0];
+
+        const offsetBottom = (labelH || 0) + (vOff[0] || 0) + (vOff[2] || 0) + (offsetBottomG || 0);
+
+        const safeDiv = (num, den) => {
+            const v = num / den;
+            return Number.isFinite(v) ? v : Infinity;
+        };
 
-        const offsetBottom = labelH + options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
-        valueLabel.destroy();
+        const radiuses = [
+            chart.chartWidth / 2 - Math.max(offsetRight || 0, offsetLeft || 0),
+            chart.chartHeight - offsetBottom - (offsetTop || 0),
+        ];
 
-        const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
         if (options.label.show) {
             this.ticks.forEach((tick) => {
-                const label = renderer.label(this.formatTickLabel(tick, options), 0, 0, null, null, null, true).add();
+                const label = chart.renderer
+                    .label(this.formatTickLabel(tick, options), 0, 0, null, null, null, true)
+                    .add();
+
                 const angle = this.getAngleForValue(tick);
-                // depends on label width
-                radiuses.push(
-                    (chart.chartWidth / 2 - label.bBox.width - Math.max(offset[1], offset[3])) /
-                    Math.sin(Math.abs(Math.PI / 2 - angle))
-                );
-                // depends on label height
+                const s = Math.sin(Math.abs(Math.PI / 2 - angle));
+                const c = Math.cos(Math.abs(Math.PI / 2 - angle));
+
                 radiuses.push(
-                    (chart.chartHeight - offsetBottom - label.bBox.height / 2 - offset[0]) /
-                    Math.cos(Math.abs(Math.PI / 2 - angle))
+                    safeDiv(
+                        chart.chartWidth / 2 - label.bBox.width - Math.max(offsetRight || 0, offsetLeft || 0),
+                        s
+                    ),
+                    safeDiv(
+                        chart.chartHeight - offsetBottom - label.bBox.height / 2 - (offsetTop || 0),
+                        c
+                    )
                 );
-                label.destroy();
+
+                label.destroy && label.destroy();
             });
         } else {
-            // reserve space for the goal icon
             const angle = this.getAngleForValue(options.goal.value);
-            const [iconW, iconH] = options.gauge.goalIconSize;
-            radiuses.push((chart.chartWidth / 2 - iconW / 2 - offset[1]) / Math.sin(Math.abs(Math.PI / 2 - angle)));
-            radiuses.push((chart.chartHeight - offsetBottom - iconH / 2 - offset[0]) / Math.cos(Math.abs(Math.PI / 2 - angle)));
+            const [iconW, iconH] = options.gauge.goalIconSize || [0, 0];
+            const s = Math.sin(Math.abs(Math.PI / 2 - angle));
+            const c = Math.cos(Math.abs(Math.PI / 2 - angle));
+
+            radiuses.push(
+                safeDiv(chart.chartWidth  / 2 - iconW / 2 - (offsetRight || 0), s),
+                safeDiv(chart.chartHeight - offsetBottom - iconH / 2 - (offsetTop || 0), c)
+            );
         }
 
+        const finite = radiuses.filter(Number.isFinite);
+        const radius = finite.length ? Math.min(...finite) : 0;
+
         return {
-            radius: Math.min(...radiuses),
+            radius,
             center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
         };
     };
 
+
     this.setTicksStyles = function (chart, options) {
         const ticks = chart.yAxis[0].ticks;
         Object.keys(ticks).forEach((i) => {
@@ -398,14 +433,26 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
 
     this.setPane = function (chart, options) {
         const { radius, center } = this.getPaneDimensions(chart, options);
-        chart.pane[0].options.size = 2 * radius;
+
+        const MIN_RADIUS = Math.max(8, options.gauge.thickness / 2 + 1);
+        const R = Math.max(MIN_RADIUS, radius);
+
+        chart.pane[0].options.size = 2 * R;
         chart.pane[0].options.center = center;
+
+        const effectiveTick = Math.min(options.gauge.tickLength, Math.floor(R * 0.8));
+        chart.yAxis[0].options.tickLength = effectiveTick;
+
         chart.yAxis[0].options.plotBands.forEach((band) => {
-            band.outerRadius = radius - (options.gauge.tickLength - options.gauge.thickness) / 2;
+            band.outerRadius = Math.max(1, R - (effectiveTick - 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 = R > 0
+            ? Math.round((100 * (R - effectiveTick - 10)) / R) + "%"
+            : "0%";
     };
 
+
     this.setCustomElements = function (chart, options) {
         chart.label = this.createValueLabel(chart, options);
         chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");

package/src/dr-renderer-helpers.js

@@ -18,25 +18,32 @@ function isNumber(n) {
 }
 
 function mergeDeep(target, ...sources) {
-    const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
+    const deepClone = (val) => {
+        if (Array.isArray(val)) return val.map(deepClone);
+        if (_.isPlainObject(val)) {
+            const out = {};
+            for (const k of Object.keys(val)) out[k] = deepClone(val[k]);
+            return out;
+        }
+        return val;
+    };
 
-    if (!isObject(target)) return target;
+    if (!_.isPlainObject(target)) return target;
 
-    sources.forEach((source) => {
-        if (!isObject(source)) return;
+    for (const source of sources) {
+        if (!_.isPlainObject(source)) continue;
 
-        Object.keys(source).forEach((key) => {
-            const targetValue = target[key];
-            const sourceValue = source[key];
+        for (const key of Object.keys(source)) {
+            const tVal = target[key];
+            const sVal = source[key];
 
-            if (isObject(targetValue) && isObject(sourceValue)) {
-                target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
+            if (_.isPlainObject(tVal) && _.isPlainObject(sVal)) {
+                target[key] = mergeDeep({}, tVal, sVal);
             } else {
-                target[key] = sourceValue;
+                target[key] = deepClone(sVal);
             }
-        });
-    });
-
+        }
+    }
     return target;
 }
 

package/src/highcharts_renderer.js

@@ -6017,21 +6017,30 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     ];
 
     highchartsRenderer.getDefaultValueForChart = function (type, existing_options) {
-        const chartOpt = type === highchartsRenderer.richTextSubType.type
+        const chartOpt = (type === highchartsRenderer.richTextSubType.type)
             ? highchartsRenderer.richTextSubType
             : highchartsRenderer.getChartOptionsBySubType(type);
-        let valToReturn = {};
-        if (chartOpt) {
-            lodash.forEach(chartOpt.suboptions, (suboption) => {
-                valToReturn[suboption.category_type] = highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options, type);
-            });
-        }
 
-        if (chartOpt.hasOwnProperty('default_options') && chartOpt.default_options) {
-            valToReturn = lodash.extend(valToReturn, chartOpt.default_options);
-        }
+        if (!chartOpt) return {};
 
-        return valToReturn;
+        const clone = (v) => (globalThis.structuredClone ? structuredClone(v) : lodash.cloneDeep(v));
+
+        const subValues = {};
+        lodash.forEach(chartOpt.suboptions, (suboption) => {
+            subValues[suboption.category_type] = clone(
+                highchartsRenderer.getDefaultValueForSubOptions(suboption, existing_options, type)
+            );
+        });
+
+        const baseDefaults = clone(chartOpt.default_options || {});
+
+        const overwriteArrays = (objValue, srcValue) => {
+            if (Array.isArray(objValue) || Array.isArray(srcValue)) {
+                return clone(srcValue);
+            }
+        };
+
+        return lodash.mergeWith({}, subValues, baseDefaults, overwriteArrays);
     };
 
     highchartsRenderer.getCommonChartOptions = function(additionalOptions) {

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

@@ -73,6 +73,39 @@ describe('dr-renderer-helpers', () => {
             expect(drRendererHelpers.mergeDeep({ a: 1 }, 'string')).toEqual({ a: 1 });
         });
 
+        it('does not mutate sources', () => {
+            const src1 = { a: { x: 1 }, arr: [1,2] };
+            const src2 = { a: { y: 2 }, arr: [3] };
+            const res = drRendererHelpers.mergeDeep({}, src1, src2);
+
+            res.a.x = 42;
+            res.arr.push(99);
+
+            expect(src1).toEqual({ a: { x: 1 }, arr: [1,2] });
+            expect(src2).toEqual({ a: { y: 2 }, arr: [3] });
+        });
+
+        it('replaces arrays by clone, not by reference', () => {
+            const src = { a: [1,2,3] };
+            const res = drRendererHelpers.mergeDeep({}, src);
+            expect(res.a).not.toBe(src.a);
+        });
+
+        it('ignores non-plain objects', () => {
+            const d = new Date();
+            const res = drRendererHelpers.mergeDeep({}, { when: d });
+            expect(res.when).toBe(d);
+        });
+
+        it('last source wins (and arrays are replaced)', () => {
+            const res = drRendererHelpers.mergeDeep(
+                { a: { x: 1 }, arr: [1] },
+                { a: { y: 2 }, arr: [2] },
+                { a: { z: 3 }, arr: [3] },
+            );
+            expect(res).toEqual({ a: { x:1, y:2, z:3 }, arr: [3] });
+        });
+
         it('should not merge arrays and replace instead', () => {
             expect(drRendererHelpers.mergeDeep({
                 a: [1, 2, 3]

package/tests/highcharts_renderer.test.js

@@ -3054,6 +3054,115 @@ describe('highcharts_renderer', () => {
     });
 
     describe('function getDefaultValueForChart', () => {
+        let originalRich, originalGetter, originalSubDefaults;
+
+        beforeEach(() => {
+            originalRich = highchartsRenderer.richTextSubType;
+            originalGetter = highchartsRenderer.getChartOptionsBySubType;
+            originalSubDefaults = highchartsRenderer.getDefaultValueForSubOptions;
+
+            highchartsRenderer.richTextSubType = { type: 'rich_text', suboptions: [], default_options: null };
+        });
+
+        afterEach(() => {
+            highchartsRenderer.richTextSubType = originalRich;
+            highchartsRenderer.getChartOptionsBySubType = originalGetter;
+            highchartsRenderer.getDefaultValueForSubOptions = originalSubDefaults;
+        });
+
+        it('returns {} for unknown subtype', () => {
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => null);
+            expect(highchartsRenderer.getDefaultValueForChart('unknown-type', {})).toEqual({});
+        });
+
+        it('deep-clones suboptions return value (no shared refs)', () => {
+            const shared = { arr: [1, 2, 3], nested: { x: 1 } };
+            highchartsRenderer.getDefaultValueForSubOptions = jest.fn(() => shared);
+
+            const chartOpt = {
+                suboptions: [{ category_type: 'segments' }, { category_type: 'label' }],
+                default_options: {},
+            };
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => chartOpt);
+
+            const res = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            expect(res.segments).toEqual(shared);
+            expect(res.segments).not.toBe(shared);
+
+            res.segments.arr.push(99);
+            res.segments.nested.x = 42;
+            expect(shared.arr).toEqual([1, 2, 3]);
+            expect(shared.nested.x).toBe(1);
+        });
+
+        it('does not mutate chartOpt.default_options (base defaults stay immutable)', () => {
+            const baseDefaults = {
+                segments: [10, 20],
+                label: { font_size: 12, style: { weight: 400 } },
+            };
+            highchartsRenderer.getDefaultValueForSubOptions = jest.fn(() => ({ label: { font_size: 8 } }));
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => ({
+                suboptions: [{ category_type: 'label' }],
+                default_options: baseDefaults,
+            }));
+
+            const res = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            res.label.style.weight = 700;
+            res.segments.push(30);
+
+            expect(baseDefaults).toEqual({
+                segments: [10, 20],
+                label: { font_size: 12, style: { weight: 400 } },
+            });
+        });
+
+        it('default_options override suboptions (old semantics) and arrays are replaced, not merged', () => {
+            highchartsRenderer.getDefaultValueForSubOptions = jest.fn((sub) => {
+                if (sub.category_type === 'segments') return [1, 2, 3];
+                if (sub.category_type === 'label') return { font_size: 8 };
+                return {};
+            });
+
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => ({
+                suboptions: [{ category_type: 'segments' }, { category_type: 'label' }],
+                default_options: {
+                    segments: [100],
+                    label: { font_size: 12, color: '#000' },
+                },
+            }));
+
+            const res = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            expect(res.segments).toEqual([100]);                 // массив заменён целиком
+            expect(res.label).toEqual({ font_size: 12, color: '#000' }); // приоритет у default_options
+        });
+
+        it('fresh object on each call (no cross-call leakage)', () => {
+            highchartsRenderer.getDefaultValueForSubOptions = jest.fn(() => ({ a: 1 }));
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => ({
+                suboptions: [{ category_type: 'cfg' }],
+                default_options: {},
+            }));
+
+            const res1 = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            const res2 = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            res1.cfg.a = 99;
+
+            expect(res2.cfg.a).toBe(1);
+            expect(res1.cfg).not.toBe(res2.cfg);
+        });
+
+        it('handles non-plain values inside defaults (e.g., Date) without throwing', () => {
+            const dt = new Date('2025-01-01T00:00:00.000Z');
+            highchartsRenderer.getDefaultValueForSubOptions = jest.fn(() => ({}));
+            highchartsRenderer.getChartOptionsBySubType = jest.fn(() => ({
+                suboptions: [],
+                default_options: { createdAt: dt },
+            }));
+
+            const res = highchartsRenderer.getDefaultValueForChart('line-chart', {});
+            expect(new Date(res.createdAt).getTime()).toBe(dt.getTime());
+        });
+
         it('should return empty value for rich_text type', () => {
             expect(highchartsRenderer.getDefaultValueForChart('rich_text', {})).toEqual({});
         });