Refactored Axis defaults to use global defaultOptions

highcharts · Nov 1, 2023 · 999f29c · 999f29c
1 parent dfafac6
commit 999f29c
Show file tree

Hide file tree

Showing 16 changed files with 151 additions and 143 deletions.
diff --git a/samples/unit-tests/axis/labels-usehtml/demo.css b/samples/unit-tests/axis/labels-usehtml/demo.css
@@ -1,5 +1,5 @@
 #container {
     width: 600px;
-    height: 250px;
+    height: 400px;
     margin: 0 auto;
 }
diff --git a/samples/unit-tests/coloraxis/setoptions/demo.js b/samples/unit-tests/coloraxis/setoptions/demo.js
@@ -1,6 +1,7 @@
 QUnit.test(
     'yAxis theme settings affected color axis (#5569)',
     function (assert) {
+        const yAxis = Highcharts.merge(Highcharts.defaultOptions.yAxis);
         Highcharts.theme = {
             yAxis: {
                 alternateGridColor: '#ff0',
@@ -46,6 +47,6 @@ QUnit.test(
         );
 
         // Undo
-        delete Highcharts.defaultOptions.yAxis;
+        Highcharts.defaultOptions.yAxis = yAxis;
     }
 );
diff --git a/samples/unit-tests/highcharts/setoptions/demo.js b/samples/unit-tests/highcharts/setoptions/demo.js
@@ -1,5 +1,6 @@
 QUnit.test('Stock chart specific options in setOptions', function (assert) {
-    var chart;
+    const yAxis = Highcharts.merge(Highcharts.defaultOptions.yAxis);
+    let chart;
 
     chart = $('#container')
         .highcharts('StockChart', {
@@ -31,14 +32,16 @@ QUnit.test('Stock chart specific options in setOptions', function (assert) {
         },
         tooltip: {
             split: false
-        },
+        }
+        /*,
         yAxis: [
             {
                 title: {
                     text: 'Custom title'
                 }
             }
         ]
+        */
     });
 
     chart = $('#container')
@@ -64,11 +67,16 @@ QUnit.test('Stock chart specific options in setOptions', function (assert) {
         'The instanciated tooltip should not be split (#7307)'
     );
 
+    // Skip this. Default options for corresponding index has never been
+    // properly supported, and is now removed. The default options/setOptions
+    // should have only a single object for xAxis, yAxis and colorAxis.
+    /*
     assert.strictEqual(
         chart.yAxis[0].options.title.text,
         'Custom title',
         'Axis option set as array should apply to corresponding index (#7690)'
     );
+    */
 
     chart = $('#container')
         .highcharts('StockChart', {
@@ -100,5 +108,5 @@ QUnit.test('Stock chart specific options in setOptions', function (assert) {
     delete Highcharts.defaultOptions.navigator.enabled;
     delete Highcharts.defaultOptions.rangeSelector.enabled;
     delete Highcharts.defaultOptions.tooltip.split;
-    delete Highcharts.defaultOptions.yAxis;
+    Highcharts.defaultOptions.yAxis = yAxis;
 });
diff --git a/test/karma-files.json b/test/karma-files.json
@@ -10,7 +10,7 @@
 	"code/highcharts.src.js",
 	"code/highcharts-more.src.js",
 	"code/highcharts-3d.src.js",
-	
+
 	"code/modules/stock.src.js",
 	"code/modules/map.src.js",
 	"code/modules/gantt.src.js",

diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts
@@ -50,6 +50,7 @@ import type TickPositionsArray from './TickPositionsArray';
 import A from '../Animation/AnimationUtilities.js';
 const { animObject } = A;
 import AxisDefaults from './AxisDefaults.js';
+const { xAxis, yAxis } = AxisDefaults;
 import Color from '../Color/Color.js';
 import D from '../Defaults.js';
 const { defaultOptions } = D;
@@ -104,6 +105,8 @@ const getNormalizedTickInterval = (
     !!axis.tickAmount
 );
 
+extend(defaultOptions, { xAxis, yAxis: merge(xAxis, yAxis) });
+
 /* *
  *
  *  Declarations
@@ -164,8 +167,6 @@ class Axis {
      *
      * */
 
-    public static readonly defaultOptions = AxisDefaults.defaultXAxisOptions;
-
     // Properties to survive after destroy, needed for Axis.update (#4317,
     // #5773, #5881).
     public static keepProps = [
@@ -580,23 +581,34 @@ class Axis {
      * @emits Highcharts.Axis#event:afterSetOptions
      */
     public setOptions(userOptions: DeepPartial<AxisOptions>): void {
+        const sideSpecific = this.side % 2 ?
+            // Left and right axis, title rotated 90 or 270 degrees
+            // respectively
+            {
+                title: {
+                    rotation: 90 * this.side
+                }
+            } :
+
+            // Top and bottom axis defaults
+            {
+                labels: {
+                    autoRotation: [-45]
+                },
+                margin: 15,
+                title: {
+                    rotation: 0
+                }
+            };
+
+
         this.options = merge(
-            AxisDefaults.defaultXAxisOptions,
-            (this.coll === 'yAxis') && AxisDefaults.defaultYAxisOptions,
-            [
-                AxisDefaults.defaultTopAxisOptions,
-                AxisDefaults.defaultRightAxisOptions,
-                AxisDefaults.defaultBottomAxisOptions,
-                AxisDefaults.defaultLeftAxisOptions
-            ][this.side],
-            merge(
-                // if set in setOptions (#1053):
-                defaultOptions[this.coll],
-                userOptions
-            )
+            sideSpecific,
+            defaultOptions[this.coll] as AxisOptions,
+            userOptions
         );
 
-        fireEvent(this, 'afterSetOptions', { userOptions: userOptions });
+        fireEvent(this, 'afterSetOptions', { userOptions });
     }
 
     /**

diff --git a/ts/Core/Axis/Axis3DComposition.ts b/ts/Core/Axis/Axis3DComposition.ts
@@ -27,6 +27,8 @@ import type SVGPath from '../Renderer/SVG/SVGPath';
 import type Tick from './Tick.js';
 
 import Axis3DDefaults from './Axis3DDefaults.js';
+import D from '../Defaults.js';
+const { defaultOptions } = D;
 import H from '../Globals.js';
 const { deg2rad } = H;
 import Math3D from '../Math3D.js';
@@ -447,7 +449,7 @@ class Axis3DAdditions {
         Tick3D.compose(TickClass);
 
         if (U.pushUnique(composedMembers, AxisClass)) {
-            merge(true, AxisClass.defaultOptions, Axis3DDefaults);
+            merge(true, defaultOptions.xAxis, Axis3DDefaults);
 
             AxisClass.keepProps.push('axis3D');
 

diff --git a/ts/Core/Axis/AxisDefaults.ts b/ts/Core/Axis/AxisDefaults.ts
@@ -55,7 +55,7 @@ namespace AxisDefaults {
      * @type         {*|Array<*>}
      * @optionparent xAxis
      */
-    export const defaultXAxisOptions: XAxisOptions = {
+    export const xAxis: XAxisOptions = {
 
         /**
          * When using multiple axis, the ticks of two or more opposite axes
@@ -821,7 +821,6 @@ namespace AxisDefaults {
              * @product   highcharts highstock gantt
              * @apioption xAxis.labels.autoRotation
              */
-            autoRotation: void 0,
 
             /**
              * When each category width is more than this many pixels, we don't
@@ -2285,7 +2284,7 @@ namespace AxisDefaults {
      * @excluding    currentDateIndicator,ordinal,overscroll
      * @optionparent yAxis
      */
-    export const defaultYAxisOptions: DeepPartial<YAxisOptions> = {
+    export const yAxis: DeepPartial<YAxisOptions> = {
 
         /**
          * The type of axis. Can be one of `linear`, `logarithmic`, `datetime`,
@@ -3153,47 +3152,6 @@ namespace AxisDefaults {
      * @apioption zAxis
      */
 
-    // This variable extends the defaultOptions for left axes.
-    export const defaultLeftAxisOptions: DeepPartial<AxisOptions> = {
-        title: {
-            rotation: 270
-        }
-    };
-
-    // This variable extends the defaultOptions for right axes.
-    export const defaultRightAxisOptions: DeepPartial<AxisOptions> = {
-        title: {
-            rotation: 90
-        }
-    };
-
-    // This variable extends the defaultOptions for bottom axes.
-    export const defaultBottomAxisOptions: DeepPartial<AxisOptions> = {
-        labels: {
-            autoRotation: [-45]
-            // overflow: undefined,
-            // staggerLines: null
-        },
-        margin: 15,
-        title: {
-            rotation: 0
-        }
-    };
-
-    // This variable extends the defaultOptions for top axes.
-    export const defaultTopAxisOptions: DeepPartial<AxisOptions> = {
-        labels: {
-            autoRotation: [-45]
-            // overflow: undefined
-            // staggerLines: null
-        },
-        margin: 15,
-        title: {
-            rotation: 0
-        }
-    };
-
-
 }
 
 /* *

diff --git a/ts/Core/Axis/Color/ColorAxis.ts b/ts/Core/Axis/Color/ColorAxis.ts
@@ -34,6 +34,8 @@ import Axis from '../Axis.js';
 import ColorAxisComposition from './ColorAxisComposition.js';
 import ColorAxisDefaults from './ColorAxisDefaults.js';
 import ColorAxisLike from './ColorAxisLike.js';
+import D from '../../Defaults.js';
+const { defaultOptions } = D;
 import LegendSymbol from '../../Legend/LegendSymbol.js';
 import SeriesRegistry from '../../Series/SeriesRegistry.js';
 import SeriesClass from '../../Series/Series';
@@ -98,6 +100,8 @@ declare module '../../Series/SeriesOptions' {
     }
 }
 
+defaultOptions.colorAxis = merge(defaultOptions.xAxis, ColorAxisDefaults);
+
 /* *
  *
  *  Class
@@ -125,8 +129,6 @@ class ColorAxis extends Axis implements AxisLike {
      *
      * */
 
-    public static defaultColorAxisOptions = ColorAxisDefaults;
-
     public static defaultLegendLength: number = 200;
 
     /**
@@ -222,7 +224,7 @@ class ColorAxis extends Axis implements AxisLike {
             visible = userOptions.visible;
 
         const options = merge(
-            ColorAxis.defaultColorAxisOptions,
+            defaultOptions.colorAxis as ColorAxis.Options,
             userOptions,
             {
                 showEmpty: false,
@@ -282,11 +284,10 @@ class ColorAxis extends Axis implements AxisLike {
      * @private
      */
     public setOptions(userOptions: DeepPartial<ColorAxis.Options>): void {
-        const axis = this;
 
         super.setOptions(userOptions);
 
-        axis.options.crosshair = axis.options.marker;
+        this.options.crosshair = this.options.marker;
     }
 
     /**

diff --git a/ts/Core/Axis/Color/ColorAxisComposition.ts b/ts/Core/Axis/Color/ColorAxisComposition.ts
@@ -193,13 +193,15 @@ namespace ColorAxisComposition {
     function onChartAfterGetAxes(
         this: Chart
     ): void {
-        const options = this.options;
+        const { userOptions } = this;
 
         this.colorAxis = [];
 
-        if (options.colorAxis) {
-            options.colorAxis = splat(options.colorAxis);
-            options.colorAxis.map((axisOptions): ColorAxis => (
+        // If a `colorAxis` config is present in the user options (not in a
+        // theme), instanciate it.
+        if (userOptions.colorAxis) {
+            userOptions.colorAxis = splat(userOptions.colorAxis);
+            userOptions.colorAxis.map((axisOptions): ColorAxis => (
                 new ColorAxisConstructor(
                     this,
                     axisOptions as Partial<ColorAxis.Options>