refactor: scales

docs/1-Typesofchart/0-Bar.mdx

@@ -77,7 +77,7 @@ This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `
 
 <Chart>
     <Settings theme={LIGHT_THEME} />
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -107,7 +107,7 @@ This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `
 ```js
 <Chart>
     <Settings theme={LIGHT_THEME} />
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -136,7 +136,7 @@ This chart now includes x and y axes. These axes can be `linear`, `ordinal` or `
 And below is an example of an `ordinal` x axis bar chart
 
 <Chart>
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -163,7 +163,7 @@ And below is an example of an `ordinal` x axis bar chart
 ```js
 
 <Chart>
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -196,7 +196,7 @@ Here is an example of a `time` x axis
         id={'bottom'}
         position={Position.Bottom}
         title={'Bottom axis'}
-        showOverlappingTicks={boolean('showOverlappingTicks bottom axis', false)}
+        ticksForCulledLabels={boolean('ticksForCulledLabels bottom axis', false)}
         showOverlappingLabels={boolean('showOverlappingLabels bottom axis', false)}
         tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     />
@@ -225,7 +225,7 @@ Here is an example of a `time` x axis
         id={'bottom'}
         position={Position.Bottom}
         title={'Bottom axis'}
-        showOverlappingTicks={boolean('showOverlappingTicks bottom axis', false)}
+        ticksForCulledLabels={boolean('ticksForCulledLabels bottom axis', false)}
         showOverlappingLabels={boolean('showOverlappingLabels bottom axis', false)}
         tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     />

docs/1-Typesofchart/1-Area.mdx

@@ -61,7 +61,7 @@ Here is the same chart including axes
     id={'bottom'}
     title={'timestamp per 1 minute'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter('HH:mm')}
   />
   <Axis
@@ -96,7 +96,7 @@ To only have an area chart without axes, do not include the `<Axis/>` components
     id={'bottom'}
     title={'timestamp per 1 minute'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter('HH:mm')}
   />
   <Axis

docs/1-Typesofchart/2-Line.mdx

@@ -59,7 +59,7 @@ Here is a `linear x axis` line chart
     <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     title={'timestamp per 1 minute'}
     />
@@ -94,7 +94,7 @@ Notice how the `<Axis position={Position.Left}/>` includes a tickFormat prop to
     <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     title={'timestamp per 1 minute'}
     />

docs/1-Typesofchart/3-Stacked.mdx

@@ -28,7 +28,7 @@ The stackAccessors prop is an array of fields that indicates the stack membershi
 ## Stacked bar chart examples
 <Chart>
   <Settings showLegend={true} legendPosition={Position.Right} />
-  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
   <Axis
     id={'left2'}
     title={'Left axis'}
@@ -62,7 +62,7 @@ The code for the chart above can be found below.
 ```js
 <Chart>
   <Settings showLegend={true} legendPosition={Position.Right} />
-  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
   <Axis
     id={'left2'}
     title={'Left axis'}
@@ -100,7 +100,7 @@ The code for the chart above can be found below.
   <Axis
   id={'bottom'}
   position={Position.Bottom}
-  showOverlappingTicks={true}
+  ticksForCulledLabels={true}
   tickFormat={timeFormatter(niceTimeFormatByDay(1))}
   title={'timestamp per 1 minute'}
   />
@@ -150,7 +150,7 @@ The code for the chart above can be found below.
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     title={'timestamp per 1 minute'}
   />
@@ -196,7 +196,7 @@ The code for the chart above can be found below.
 
 <Chart>
   <Settings showLegend />
-  <Axis id={'bottom'} title={'timestamp per 1 minute'} position={Position.Bottom} showOverlappingTicks={true} tickFormat={timeFormatter('HH:mm')}/>
+  <Axis id={'bottom'} title={'timestamp per 1 minute'} position={Position.Bottom} ticksForCulledLabels={true} tickFormat={timeFormatter('HH:mm')}/>
   <Axis
   id={'left'}
   domain={{ fit: boolean('scale to extent', false) }}
@@ -230,7 +230,7 @@ The code for the chart above can be found below.
 ```js
 <Chart>
   <Settings showLegend />
-  <Axis id={'bottom'} title={'timestamp per 1 minute'} position={Position.Bottom} showOverlappingTicks={true} tickFormat={timeFormatter('HH:mm')}/>
+  <Axis id={'bottom'} title={'timestamp per 1 minute'} position={Position.Bottom} ticksForCulledLabels={true} tickFormat={timeFormatter('HH:mm')}/>
   <Axis
     id={'left'}
     title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
@@ -410,7 +410,7 @@ This chart shows multiple line series with an axis and legend.
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
   />
   <Axis
@@ -455,7 +455,7 @@ Compare the above chart with the following below. The difference between the two
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
   />
   <Axis
@@ -504,7 +504,7 @@ Compare the above chart with the following below. The difference between the two
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
   />
   <Axis

docs/1-Typesofchart/6-LegendsBars.mdx

@@ -22,7 +22,7 @@ Here is a chart with a legend on the `right`
 
 <Chart>
     <Settings showLegend={true} legendPosition={Position.Right} />
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -56,7 +56,7 @@ What you should pay attention to:
 ```js
 <Chart>
     <Settings showLegend={true} legendPosition={Position.Right} />
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}

docs/2-ChartPropTables/12-AxisProps.md

@@ -8,7 +8,7 @@ The bar chart with axis example in the `Types of charts` section includes only s
 | specType  | `typeof SpecType.Axis` | SpecType.Axis  |  |
 | groupId | GroupId | `__global__`  | The ID of the axis group |
 | hide  | boolean  | false  | Hide this axis |
-| showOverlappingTicks | boolean | false  | Shows all ticks, also the one from the overlapping labels   |
+| ticksForCulledLabels | boolean | false  | Shows all ticks, also the one from the overlapping labels   |
 | showOverlappingLabels | boolean  | false  | Shows all labels, also the overlapping ones |
 | position |  | Position.Left | Where the axis appear on the chart |
 | tickSize | number | 10 | The length of the tick line |

docs/2-ChartPropTables/8-ConsolidatedSnippets.mdx

@@ -40,7 +40,7 @@ Bar with axes
 ```js
 <Chart>
     <Settings theme={LIGHT_THEME} />
-    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+    <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
     <Axis
     id={'left2'}
     title={'Left axis'}
@@ -67,7 +67,7 @@ Stacked bar chart
 ```js
 <Chart>
   <Settings showLegend={true} legendPosition={Position.Right} />
-  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+  <Axis id={'bottom'} position={Position.Bottom} title={'Bottom axis'} ticksForCulledLabels={true} />
   <Axis
     id={'left2'}
     title={'Left axis'}
@@ -117,7 +117,7 @@ Area chart with axes components
     id={'bottom'}
     title={'timestamp per 1 minute'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter('HH:mm')}
   />
   <Axis
@@ -144,7 +144,7 @@ Stacked area chart
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     title={'timestamp per 1 minute'}
   />
@@ -207,7 +207,7 @@ Linear x axis line chart
     <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
     title={'timestamp per 1 minute'}
     />
@@ -235,7 +235,7 @@ Stacked line chart
   <Axis
     id={'bottom'}
     position={Position.Bottom}
-    showOverlappingTicks={true}
+    ticksForCulledLabels={true}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
   />
   <Axis

integration/tests/scales_stories.test.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { LogBase } from '../../packages/charts/src/scales/scale_continuous';
 import { common } from '../page_objects';
 
 describe('Scales stories', () => {
@@ -15,7 +14,7 @@ describe('Scales stories', () => {
     ${'Negative'} | ${true}
     ${'Positive'} | ${false}
   `('$polarity values', ({ value: negative }) => {
-    it.each(Object.values(LogBase))('should render proper ticks with %s base', async (base) => {
+    it.each(['common', 'binary', 'natural'])('should render proper ticks with %s base', async (base) => {
       await common.expectChartAtUrlToMatchScreenshot(
         `http://localhost:9001/?path=/story/scales--log-scale-options&knob-Use negative values_Y - Axis=${negative}&knob-Log base_Y - Axis=${base}&knob-Fit domain_Y - Axis=true&knob-Use default limit_Y - Axis=true`,
       );

packages/charts/api/charts.api.md

@@ -170,12 +170,12 @@ export interface AxisSpec extends Spec {
     // @deprecated
     showGridLines?: boolean;
     showOverlappingLabels: boolean;
-    showOverlappingTicks: boolean;
     // (undocumented)
     specType: typeof SpecType.Axis;
     style?: RecursivePartial<Omit<AxisStyle, 'gridLine'>>;
     tickFormat?: TickFormatter;
     ticks?: number;
+    ticksForCulledLabels: boolean;
     title?: string;
 }
 
@@ -1328,19 +1328,9 @@ export interface LineStyle {
     visible: boolean;
 }
 
-// @public (undocumented)
-export const LogBase: Readonly<{
-    Common: "common";
-    Binary: "binary";
-    Natural: "natural";
-}>;
-
-// @public
-export type LogBase = $Values<typeof LogBase>;
-
 // @public
 export interface LogScaleOptions {
-    logBase?: LogBase;
+    logBase?: number;
     logMinLimit?: number;
 }
 

packages/charts/src/chart_types/goal_chart/state/selectors/scenegraph.ts

@@ -26,32 +26,23 @@ const mapConfigToTheme = ({
   fontFamily,
 }: RecursivePartial<Config> = {}): PartialTheme => ({
   chartMargins: margin,
-  background: {
-    color: backgroundColor,
-  },
+  background: { color: backgroundColor },
   goal: {
     minFontSize,
     maxFontSize,
-    tickLabel: {
-      fontFamily,
-    },
-    majorLabel: {
-      fontFamily,
-    },
-    minorLabel: {
-      fontFamily,
-    },
+    tickLabel: { fontFamily },
+    majorLabel: { fontFamily },
+    minorLabel: { fontFamily },
   },
 });
 
 /** @internal */
 export function render(spec: GoalSpec, parentDimensions: Dimensions, theme: Theme): ShapeViewModel {
   // override theme and spec with old deprecated config options
-  const mergedTheme: Theme = mergePartial(theme, mapConfigToTheme(spec.config), { mergeOptionalPartialValues: true });
+  const mergedTheme: Theme = mergePartial(theme, mapConfigToTheme(spec.config));
   const mergedSpec: GoalSpec = mergePartial(spec, {
     angleEnd: spec?.config?.angleEnd,
     angleStart: spec?.config?.angleStart,
   });
-
   return shapeViewModel(mergedSpec, mergedTheme, parentDimensions);
 }

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -56,18 +56,18 @@ function getValuesInRange(
   return values.slice(startIndex, endIndex);
 }
 
-/**
- * Resolves the maximum number of ticks based on the chart width and sample label based on formatter config.
- */
-function getTicks(chartWidth: number, { formatter, padding, fontSize, fontFamily }: Config['xAxisLabel']): number {
+function estimatedNonOverlappingTickCount(
+  chartWidth: number,
+  { formatter, padding, fontSize, fontFamily }: Config['xAxisLabel'],
+): number {
   return withTextMeasure((textMeasure) => {
     const labelSample = formatter(Date.now());
     const { width } = textMeasure(labelSample, padding, fontSize, fontFamily);
-    const maxTicks = Math.floor(chartWidth / width);
+    const maxTicks = chartWidth / width;
     // Dividing by 2 is a temp fix to make sure {@link ScaleContinuous} won't produce
     // to many ticks creating nice rounded tick values
     // TODO add support for limiting the number of tick in {@link ScaleContinuous}
-    return maxTicks / 2;
+    return Math.floor(maxTicks / 2);
   });
 }
 
@@ -89,13 +89,11 @@ export function shapeViewModel(
   const { table, yValues, xDomain } = heatmapTable;
 
   // measure the text width of all rows values to get the grid area width
-  const boxedYValues = yValues.map<Box & { value: NonNullable<PrimitiveValue> }>((value) => {
-    return {
-      text: config.yAxisLabel.formatter(value),
-      value,
-      ...config.yAxisLabel,
-    };
-  });
+  const boxedYValues = yValues.map<Box & { value: NonNullable<PrimitiveValue> }>((value) => ({
+    text: config.yAxisLabel.formatter(value),
+    value,
+    ...config.yAxisLabel,
+  }));
 
   // compute the scale for the rows positions
   const yScale = scaleBand<NonNullable<PrimitiveValue>>().domain(yValues).range([0, height]);
@@ -112,7 +110,7 @@ export function shapeViewModel(
             nice: false,
           },
           {
-            desiredTickCount: getTicks(chartDimensions.width, config.xAxisLabel),
+            desiredTickCount: estimatedNonOverlappingTickCount(chartDimensions.width, config.xAxisLabel),
             timeZone: config.timeZone,
           },
         )