Merge pull request #5645 from ag-grid/AG-16331-axis-type

AG-16331 Change axis type to be an optional property

Author: alantreadway

packages/ag-charts-community/src/api/preset/presetModules.ts

@@ -73,7 +73,7 @@ const commonSparklineOptionsDef: OptionsDefs<
     data: defined,
     styleNonce: string,
 
-    axis: typeUnion<AgSparklineAxisOptions>(
+    axis: typeUnion<AgSparklineAxisOptions & { type: NonNullable<AgSparklineAxisOptions['type']> }>(
         {
             number: {
                 ...commonSparklineAxisOptionsDef,
@@ -92,7 +92,7 @@ const commonSparklineOptionsDef: OptionsDefs<
             },
         },
         'axis options',
-        'category' // AG-14799 - Contrary to the AgSparklineAxisOptions interface, type is optional and defaults to 'category'.
+        'category'
     ),
     min: and(number, lessThan('max')),
     max: and(number, greaterThan('min')),

packages/ag-charts-community/src/api/preset/sparkline.ts

@@ -14,6 +14,7 @@ import type {
     AgLineSeriesOptions,
     AgLineSeriesTooltipRendererParams,
     AgSparklineAxisOptions,
+    AgSparklineCategoryAxisOptions,
     AgSparklineOptions,
     AgSparklineTooltip,
     AgTooltipRendererResult,
@@ -241,7 +242,7 @@ function axisPreset(opts: AgSparklineAxisOptions | undefined): AgCartesianAxisOp
             if (opts == null) {
                 return { type: 'category' };
             }
-            const { reverse, paddingInner, paddingOuter } = opts;
+            const { reverse, paddingInner, paddingOuter } = opts as AgSparklineCategoryAxisOptions;
             return {
                 type: 'category',
                 reverse,

packages/ag-charts-community/src/chart/axesOptionsDefs.ts

@@ -347,7 +347,7 @@ export const discreteTimeAxisIntervalOptionsDefs: OptionsDefs<AgAxisDiscreteTime
 
 export const categoryAxisOptionsDefs: OptionsDefs<AgCategoryAxisOptions> = {
     ...cartesianAxisOptionsDefs,
-    type: required(constant('category')),
+    type: constant('category'),
     label: cartesianAxisLabelOptionsDefs,
     paddingInner: ratio,
     paddingOuter: ratio,
@@ -362,7 +362,7 @@ export const categoryAxisOptionsDefs: OptionsDefs<AgCategoryAxisOptions> = {
 
 export const groupedCategoryAxisOptionsDefs: OptionsDefs<AgGroupedCategoryAxisOptions> = {
     ...cartesianAxisOptionsDefs,
-    type: required(constant('grouped-category')),
+    type: constant('grouped-category'),
     label: cartesianAxisLabelOptionsDefs,
     crosshair: cartesianAxisCrosshairOptions(),
     bandHighlight: cartesianAxisBandHighlightOptions,
@@ -393,15 +393,15 @@ export const groupedCategoryAxisOptionsDefs: OptionsDefs<AgGroupedCategoryAxisOp
 export const numberAxisOptionsDefs: OptionsDefs<AgNumberAxisOptions> = {
     ...cartesianAxisOptionsDefs,
     ...continuousAxisOptions(number),
-    type: required(constant('number')),
+    type: constant('number'),
     label: cartesianNumericAxisLabel,
     crosshair: cartesianAxisCrosshairOptions(true),
 };
 
 export const logAxisOptionsDefs: OptionsDefs<AgLogAxisOptions> = {
     ...cartesianAxisOptionsDefs,
     ...continuousAxisOptions(number),
-    type: required(constant('log')),
+    type: constant('log'),
     base: and(
         positiveNumberNonZero,
         attachDescription((value) => value !== 1, 'not equal to 1')
@@ -413,15 +413,15 @@ export const logAxisOptionsDefs: OptionsDefs<AgLogAxisOptions> = {
 export const timeAxisOptionsDefs: OptionsDefs<AgTimeAxisOptions> = {
     ...cartesianAxisOptionsDefs,
     ...continuousAxisOptions(or(number, date), true),
-    type: required(constant('time')),
+    type: constant('time'),
     label: cartesianTimeAxisLabel,
     parentLevel: cartesianTimeAxisParentLevel,
     crosshair: cartesianAxisCrosshairOptions(true, true),
 };
 
 export const unitTimeAxisOptionsDefs: OptionsDefs<AgUnitTimeAxisOptions> = {
     ...cartesianAxisOptionsDefs,
-    type: required(constant('unit-time')),
+    type: constant('unit-time'),
     unit: or(timeInterval, timeIntervalUnit),
     label: cartesianTimeAxisLabel,
     parentLevel: cartesianTimeAxisParentLevel,

packages/ag-charts-community/src/chart/axesOptionsEnterpriseDefs.ts

@@ -8,7 +8,6 @@ import {
     number,
     positiveNumber,
     ratio,
-    required,
     union,
 } from 'ag-charts-core';
 import type {
@@ -37,7 +36,7 @@ import { numberFormatValidator, textOrSegments } from './commonOptionsDefs';
 
 export const ordinalTimeAxisOptionsDefs: OptionsDefs<AgOrdinalTimeAxisOptions> = {
     ...cartesianAxisOptionsDefs,
-    type: required(constant('ordinal-time')),
+    type: constant('ordinal-time'),
     paddingInner: ratio,
     paddingOuter: ratio,
     groupPaddingInner: ratio,
@@ -51,7 +50,7 @@ export const ordinalTimeAxisOptionsDefs: OptionsDefs<AgOrdinalTimeAxisOptions> =
 export const angleNumberAxisOptionsDefs: OptionsDefs<AgAngleNumberAxisOptions> = {
     ...commonAxisOptionsDefs,
     ...continuousAxisOptions(number),
-    type: required(constant('angle-number')),
+    type: constant('angle-number'),
     crossLines: arrayOfDefs(commonCrossLineOptionsDefs),
     startAngle: number,
     endAngle: number,
@@ -64,7 +63,7 @@ export const angleNumberAxisOptionsDefs: OptionsDefs<AgAngleNumberAxisOptions> =
 
 export const angleCategoryAxisOptionsDefs: OptionsDefs<AgAngleCategoryAxisOptions> = {
     ...commonAxisOptionsDefs,
-    type: required(constant('angle-category')),
+    type: constant('angle-category'),
     shape: union('polygon', 'circle'),
     crossLines: arrayOfDefs(commonCrossLineOptionsDefs),
     startAngle: number,
@@ -83,7 +82,7 @@ angleCategoryAxisOptionsDefs.innerRadiusRatio = ratio;
 export const radiusNumberAxisOptionsDefs: OptionsDefs<AgRadiusNumberAxisOptions> = {
     ...commonAxisOptionsDefs,
     ...continuousAxisOptions(number),
-    type: required(constant('radius-number')),
+    type: constant('radius-number'),
     shape: union('polygon', 'circle'),
     positionAngle: number,
     innerRadiusRatio: ratio,
@@ -112,7 +111,7 @@ export const radiusNumberAxisOptionsDefs: OptionsDefs<AgRadiusNumberAxisOptions>
 
 export const radiusCategoryAxisOptionsDefs: OptionsDefs<AgRadiusCategoryAxisOptions> = {
     ...commonAxisOptionsDefs,
-    type: required(constant('radius-category')),
+    type: constant('radius-category'),
     positionAngle: number,
     innerRadiusRatio: ratio,
     paddingInner: ratio,

packages/ag-charts-community/src/chart/axis/categoryAxis.test.ts

@@ -33,7 +33,7 @@ function applyIntervalOn<T extends AgCartesianChartOptions>(opts: T): T {
         ...opts,
         axes:
             mapValues(opts.axes ?? {}, (axis) =>
-                axesToTest.includes(axis.type)
+                axis.type && axesToTest.includes(axis.type)
                     ? {
                           ...axis,
                           interval: { ...(axis.interval ?? {}), placement: 'on' },
@@ -50,7 +50,7 @@ function applyIntervalBetween<T extends AgCartesianChartOptions>(opts: T): T {
         ...opts,
         axes:
             mapValues(opts.axes ?? {}, (axis) =>
-                axesToTest.includes(axis.type)
+                axis.type && axesToTest.includes(axis.type)
                     ? {
                           ...axis,
                           interval: { ...(axis.interval ?? {}), placement: 'between' },

packages/ag-charts-community/src/chart/chart.ts

@@ -1822,7 +1822,7 @@ export abstract class Chart extends Observable implements ModuleInstance, ChartS
         const moduleContext = this.getModuleContext();
 
         for (const [id, axisOptions] of entries(options)) {
-            const axis = ModuleRegistry.getAxisModule(axisOptions.type)!.create(moduleContext) as any;
+            const axis = ModuleRegistry.getAxisModule(axisOptions.type!)!.create(moduleContext) as any;
             axis.id = id as AxisID;
             this.applyAxisModules(axis, axisOptions);
             jsonApply(axis, axisOptions, { skip });

packages/ag-charts-community/src/chart/crossline/crossLine.test.ts

@@ -204,7 +204,7 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].range` cannot be set to `[null,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].range` cannot be set to `[null,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
         ],
     },
     INVALID_RANGE_LENGTH_CROSSLINE: {
@@ -214,7 +214,7 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].range` cannot be set to `[128,134,135]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].range` cannot be set to `[128,134,135]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
         ],
     },
     INVALID_RANGE_WITHOUT_TYPE_CROSSLINE: {
@@ -224,8 +224,8 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].type` is required and has not been provided; expecting a keyword such as 'line' or 'range', ignoring.",
-            "AG Charts - Option `axes[y].crossLines[0].range` cannot be set to `[128,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].type` is required and has not been provided; expecting a keyword such as 'line' or 'range', ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].range` cannot be set to `[128,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
         ],
     },
     INVALID_LINE_VALUE_CROSSLINES: {
@@ -243,7 +243,7 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].range` cannot be set to `[128,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].range` cannot be set to `[128,134]`; expecting crossLine type to be 'range', a defined value array and an array of exactly 2 items, ignoring.",
         ],
     },
     INVALID_LINE_WITHOUT_TYPE_CROSSLINE: {
@@ -253,8 +253,8 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].type` is required and has not been provided; expecting a keyword such as 'line' or 'range', ignoring.",
-            "AG Charts - Option `axes[y].crossLines[0].value` cannot be set to `128`; expecting crossLine type to be 'line' and a defined value, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].type` is required and has not been provided; expecting a keyword such as 'line' or 'range', ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].value` cannot be set to `128`; expecting crossLine type to be 'line' and a defined value, ignoring.",
         ],
     },
     INVALID_LINE_WITH_RANGE_TYPE_CROSSLINE: {
@@ -264,7 +264,7 @@ const INVALID_EXAMPLES: Record<string, CartesianTestCase & { warningMessages: st
             seriesTypes: repeat('line', 2),
         }),
         warningMessages: [
-            "AG Charts - Option `axes[y].crossLines[0].value` cannot be set to `128`; expecting crossLine type to be 'line' and a defined value, ignoring.",
+            "AG Charts - Option `axes.y.crossLines[0].value` cannot be set to `128`; expecting crossLine type to be 'line' and a defined value, ignoring.",
         ],
     },
 };

packages/ag-charts-community/src/chart/galleryExamplesUSTimezone.test.ts

@@ -19,7 +19,7 @@ import {
 const TIME_AXIS_EXAMPLES = Object.entries(EXAMPLES)
     .filter(([, { options }]) => {
         return Object.values((options as any as AgCartesianChartOptions).axes ?? {}).some((axis) =>
-            axis.type.endsWith('time')
+            axis.type?.endsWith('time')
         );
     })
     .reduce<typeof EXAMPLES>((out, [name, testCase]) => {

packages/ag-charts-community/src/module/optionsModule.test.ts

@@ -2567,6 +2567,103 @@ describe('ChartOptions', () => {
                     yKeyAxis: 'y',
                 });
             });
+
+            it('should predict missing types and positions', () => {
+                const options: AgCartesianChartOptions = {
+                    series: [{ type: 'line', xKey: 'x', yKey: 'y' }],
+                    axes: {
+                        x: {},
+                        y: {},
+                    },
+                };
+
+                const preparedOptions = prepareOptions(options);
+
+                expect(Object.keys(preparedOptions.axes ?? {})).toHaveLength(2);
+                expect(preparedOptions.axes).toMatchObject({
+                    x: { type: 'category', position: 'bottom' },
+                    y: { type: 'number', position: 'left' },
+                });
+            });
+
+            it('should predict missing types and positions for secondary axes', () => {
+                const options: AgCartesianChartOptions = {
+                    series: [
+                        { type: 'line', xKey: 'x', yKey: 'y' },
+                        { type: 'line', xKey: 'x', yKey: 'y', yKeyAxis: 'myAxis' },
+                    ],
+                    axes: {
+                        x: {},
+                        y: {},
+                        myAxis: {},
+                    },
+                };
+
+                const preparedOptions = prepareOptions(options);
+
+                expect(Object.keys(preparedOptions.axes ?? {})).toHaveLength(3);
+                expect(preparedOptions.axes).toMatchObject({
+                    x: { type: 'category', position: 'bottom' },
+                    y: { type: 'number', position: 'left' },
+                    __AXIS_ID_2: { type: 'number', position: 'left' },
+                });
+            });
+
+            it('should should predict missing types when given positions', () => {
+                const options: AgCartesianChartOptions = {
+                    series: [{ type: 'line', xKey: 'x', yKey: 'y' }],
+                    axes: {
+                        myAxis1: { position: 'left' },
+                        myAxis2: { position: 'bottom' },
+                    },
+                };
+
+                const preparedOptions = prepareOptions(options);
+
+                expect(Object.keys(preparedOptions.axes ?? {})).toHaveLength(2);
+                expect(preparedOptions.axes).toMatchObject({
+                    x: { type: 'category', position: 'bottom' },
+                    y: { type: 'number', position: 'left' },
+                });
+            });
+
+            it('should predict missing positions for primary axes when secondary axes have positions', () => {
+                const options: AgCartesianChartOptions = {
+                    series: [
+                        { type: 'line', xKey: 'x', yKey: 'y' },
+                        { type: 'line', xKey: 'x', yKey: 'y', yKeyAxis: 'myAxis' },
+                    ],
+                    axes: {
+                        x: {},
+                        y: {},
+                        myAxis: { position: 'right' },
+                    },
+                };
+
+                const preparedOptions = prepareOptions(options);
+
+                expect(Object.keys(preparedOptions.axes ?? {})).toHaveLength(3);
+                expect(preparedOptions.axes).toMatchObject({
+                    x: { type: 'category', position: 'bottom' },
+                    y: { type: 'number', position: 'left' },
+                    __AXIS_ID_2: { type: 'number', position: 'right' },
+                });
+            });
+
+            it('should discard secondary axes that are not referenced and have no position or type', () => {
+                const options: AgCartesianChartOptions = {
+                    series: [{ type: 'line', xKey: 'x', yKey: 'y' }],
+                    axes: {
+                        myAxis1: {},
+                        myAxis2: {},
+                        myAxis3: {},
+                    },
+                };
+
+                const preparedOptions = prepareOptions(options);
+
+                expect(Object.keys(preparedOptions.axes ?? {})).toHaveLength(2);
+            });
         });
     });
 });