fix: x domain scale issue, refactor log options

- move all log options together
- fix x domain being different across other xScale getters
- update log option wording

src/chart_types/xy_chart/state/utils/utils.ts

@@ -18,7 +18,7 @@
  */
 
 import { SeriesKey, SeriesIdentifier } from '../../../../common/series_id';
-import { Scale } from '../../../../scales';
+import { LogBase, Scale } from '../../../../scales';
 import { SortSeriesByConfig } from '../../../../specs';
 import { OrderBy, SettingsSpec } from '../../../../specs/settings';
 import { mergePartial, Rotation, Color, isUniqueArray } from '../../../../utils/common';
@@ -204,7 +204,7 @@ export function computeSeriesGeometries(
   { xDomain, yDomains, formattedDataSeries: nonFilteredDataSeries }: SeriesDomainsAndData,
   seriesColorMap: Map<SeriesKey, Color>,
   chartTheme: Theme,
-  { rotation: chartRotation, yLogBase, yLogMinLimit }: SettingsSpec,
+  { rotation: chartRotation, logOptions: { yLogBase, yLogMinLimit, xLogBase, xLogMinLimit } = {} }: SettingsSpec,
   axesSpecs: AxisSpec[],
   smallMultiplesScales: SmallMultipleScales,
   enableHistogramMode: boolean,
@@ -256,6 +256,8 @@ export function computeSeriesGeometries(
     chartTheme,
     enableHistogramMode,
     chartRotation,
+    xLogBase,
+    xLogMinLimit,
   );
 
   const totalBarsInCluster = Object.values(barIndexByPanel).reduce((acc, curr) => {
@@ -268,6 +270,8 @@ export function computeSeriesGeometries(
     range: [0, isHorizontalRotation(chartRotation) ? horizontal.bandwidth : vertical.bandwidth],
     barsPadding: enableHistogramMode ? chartTheme.scales.histogramPadding : chartTheme.scales.barsPadding,
     enableHistogramMode,
+    logBase: xLogBase,
+    logMinLimit: xLogMinLimit,
   });
 
   return {
@@ -344,6 +348,8 @@ function renderGeometries(
   chartTheme: Theme,
   enableHistogramMode: boolean,
   chartRotation: Rotation,
+  xLogBase?: LogBase,
+  xLogMinLimit?: number,
 ): Omit<ComputedGeometries, 'scales'> {
   const len = dataSeries.length;
   let i;
@@ -388,6 +394,8 @@ function renderGeometries(
       range: [0, isHorizontalRotation(chartRotation) ? smHScale.bandwidth : smVScale.bandwidth],
       barsPadding,
       enableHistogramMode,
+      logBase: xLogBase,
+      logMinLimit: xLogMinLimit,
     });
 
     const { stackMode } = ds;

src/chart_types/xy_chart/utils/axis_utils.ts

@@ -95,7 +95,7 @@ export function computeAxisTicksDimensions(
   yDomains: YDomain[],
   totalBarsInCluster: number,
   bboxCalculator: BBoxCalculator,
-  { rotation: chartRotation, yLogBase, yLogMinLimit, xLogBase, xLogMinLimit }: SettingsSpec,
+  { rotation: chartRotation, logOptions: { yLogBase, yLogMinLimit, xLogBase, xLogMinLimit } = {} }: SettingsSpec,
   { gridLine, tickLabel }: AxisStyle,
   fallBackTickFormatter: TickFormatter,
   barsPadding?: number,
@@ -162,7 +162,7 @@ export function getScaleForAxisSpec(
   axisIsYDomain: boolean,
   minRange: number,
   maxRange: number,
-  logBase: LogBase,
+  logBase?: LogBase,
   logMinLimit?: number,
   barsPadding?: number,
   enableHistogramMode?: boolean,
@@ -756,7 +756,7 @@ export function getAxesGeometries(
     leftMargin: number;
   },
   { chartPaddings, chartMargins, axes: sharedAxesStyle }: Theme,
-  { rotation: chartRotation, yLogBase, yLogMinLimit, xLogBase, xLogMinLimit }: SettingsSpec,
+  { rotation: chartRotation, logOptions: { yLogBase, yLogMinLimit, xLogBase, xLogMinLimit } = {} }: SettingsSpec,
   axisSpecs: AxisSpec[],
   axisDimensions: Map<AxisId, AxisTicksDimensions>,
   axesStyles: Map<AxisId, AxisStyle | null>,

src/components/__snapshots__/chart.test.tsx.snap

@@ -54,7 +54,7 @@ exports[`Chart should render the legend name test 1`] = `
         <Connect(SpecsParserComponent)>
           <SpecsParserComponent specParsed={[Function (anonymous)]} specUnmounted={[Function (anonymous)]}>
             <Connect(SpecInstance) debug={true} rendering=\\"svg\\" showLegend={true}>
-              <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} externalPointerEvents={{...}} legendMaxDepth={Infinity} legendPosition=\\"right\\" showLegendExtra={false} hideDuplicateAxes={false} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} xLogBase=\\"common\\" yLogBase=\\"common\\" />
+              <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} externalPointerEvents={{...}} legendMaxDepth={Infinity} legendPosition=\\"right\\" showLegendExtra={false} hideDuplicateAxes={false} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} />
             </Connect(SpecInstance)>
             <Connect(SpecInstance) id=\\"test\\" data={{...}}>
               <SpecInstance id=\\"test\\" data={{...}} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} chartType=\\"xy_axis\\" specType=\\"series\\" seriesType=\\"bar\\" groupId=\\"__global__\\" xScaleType=\\"ordinal\\" yScaleType=\\"linear\\" xAccessor=\\"x\\" yAccessors={{...}} yScaleToDataExtent={false} hideInLegend={false} enableHistogramMode={false} />

src/specs/constants.ts

@@ -20,7 +20,6 @@
 import { $Values } from 'utility-types';
 
 import { ChartTypes } from '../chart_types';
-import { LogBase } from '../scales/scale_continuous';
 import { Position } from '../utils/common';
 import { LIGHT_THEME } from '../utils/themes/light_theme';
 import { SettingsSpec } from './settings';
@@ -143,6 +142,4 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
   baseTheme: LIGHT_THEME,
   brushAxis: BrushAxis.X,
   minBrushDelta: 2,
-  xLogBase: LogBase.Common,
-  yLogBase: LogBase.Common,
 };

src/specs/settings.tsx

@@ -321,6 +321,38 @@ export type LegendColorPicker = ComponentType<LegendColorPickerProps>;
  */
 export type MarkBuffer = number | ((radius: number) => number);
 
+export interface LogOptions {
+  /**
+   * Min log value to render y scale
+   *
+   * Defaults to min value of domain, or LOG_MIN_ABS_DOMAIN if mixed polarity
+   */
+  yLogMinLimit?: number;
+
+  /**
+   * Base for log y scales
+   *
+   * @defaultValue `common` {@link (LogBase:type) | LogBase.Common}
+   * (i.e. log base 10)
+   */
+  yLogBase?: LogBase;
+
+  /**
+   * Min log value to render x scale
+   *
+   * Defaults to min value of domain, or LOG_MIN_ABS_DOMAIN if mixed polarity
+   */
+  xLogMinLimit?: number;
+
+  /**
+   * Base for log x scales
+   *
+   * @defaultValue `common` {@link (LogBase:type) | LogBase.Common}
+   * (i.e. log base 10)
+   */
+  xLogBase?: LogBase;
+}
+
 /**
  * The Spec used for Chart settings
  * @public
@@ -472,31 +504,10 @@ export interface SettingsSpec extends Spec {
    */
   noResults?: ComponentType | ReactChild;
   /**
-   * Min log value to render y scale
-   *
-   * Defaults to min value of domain, or 0 if mixed polarity
-   */
-  yLogMinLimit?: number;
-
-  /**
-   * Min log value to render y scale
-   *
-   * Defaults to min value of domain, or 0 if mixed polarity
-   */
-  yLogBase: LogBase;
-  /**
-   * Min log value to render x scale
-   *
-   * Defaults to min value of domain, or 0 if mixed polarity
-   */
-  xLogMinLimit?: number;
-
-  /**
-   * Min log value to render x scale
-   *
-   * Defaults to min value of domain, or 0 if mixed polarity
+   * Options to configure log scales
+   * TODO: move into scales component to be per scale not per chart
    */
-  xLogBase: LogBase;
+  logOptions?: LogOptions;
 }
 
 /**
@@ -555,9 +566,7 @@ export type DefaultSettingsProps =
   | 'hideDuplicateAxes'
   | 'brushAxis'
   | 'minBrushDelta'
-  | 'externalPointerEvents'
-  | 'yLogBase'
-  | 'xLogBase';
+  | 'externalPointerEvents';
 
 export type SettingsSpecProps = Partial<Omit<SettingsSpec, 'chartType' | 'specType' | 'id'>>;
 

stories/area/17_negative.tsx

@@ -40,7 +40,7 @@ export const Example = () => {
   );
   return (
     <Chart className="story-chart">
-      <Settings yLogMinLimit={number('Y log limit', 1, { min: 0 })} />
+      <Settings logOptions={{ yLogMinLimit: number('Y log limit', 1, { min: 0 }) }} />
       <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
       <Axis id="left" title="negative metric" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
 

stories/area/18_negative_positive.tsx

@@ -39,7 +39,7 @@ export const Example = () => {
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend yLogMinLimit={number('Y log limit', 1, { min: 0 })} />
+      <Settings showLegend logOptions={{ yLogMinLimit: number('Y log limit', 1, { min: 0 }) }} />
       <Axis
         id="bottom"
         title="timestamp per 1 minute"

stories/scales/7_log_scale_options.tsx

@@ -27,7 +27,7 @@ import { logBaseMap, logFormatter } from '../utils/formatters';
 import { getKnobsFromEnum } from '../utils/knobs';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
-type LogKnobs = Pick<SettingsSpecProps, 'yLogBase' | 'yLogMinLimit' | 'xLogBase' | 'xLogMinLimit'> & {
+type LogKnobs = Pick<SettingsSpecProps, 'logOptions'> & {
   xDataType: string;
   yDataType: string;
   xNegative: boolean;
@@ -59,17 +59,25 @@ const getLogKnobs = (): LogKnobs => {
   const yGroup = 'Y - Axis';
   const yUseDefaultLimit = boolean('Use default limit', false, yGroup);
   const yLimit = number('Log min limit', 1, { min: 0 }, yGroup);
-  const xUseDefaultLimit = boolean('Use default limit', false, xGroup);
+  const xUseDefaultLimit = boolean('Use default limit', true, xGroup);
   const xLimit = number('Log min limit', 1, { min: 0 }, xGroup);
   return {
     xDataType: getDataType(xGroup),
     yDataType: getDataType(yGroup, 'upDown'),
     xNegative: boolean('Use negative values', false, xGroup),
     yNegative: boolean('Use negative values', false, yGroup),
-    yLogMinLimit: yUseDefaultLimit ? undefined : yLimit,
-    xLogMinLimit: xUseDefaultLimit ? undefined : xLimit,
-    yLogBase: getKnobsFromEnum('Log base', LogBase, LogBase.Common as LogBase, { group: yGroup }),
-    xLogBase: getKnobsFromEnum('Log base', LogBase, LogBase.Common as LogBase, { group: xGroup }),
+    logOptions: {
+      yLogMinLimit: yUseDefaultLimit ? undefined : yLimit,
+      xLogMinLimit: xUseDefaultLimit ? undefined : xLimit,
+      yLogBase: getKnobsFromEnum('Log base', LogBase, LogBase.Common as LogBase, {
+        group: yGroup,
+        allowUndefined: true,
+      }),
+      xLogBase: getKnobsFromEnum('Log base', LogBase, LogBase.Common as LogBase, {
+        group: xGroup,
+        allowUndefined: true,
+      }),
+    },
     yPadding: number('Padding', 0, { min: 0 }, yGroup),
   };
 };
@@ -108,7 +116,10 @@ const getInitalData = (rows: number) => {
   return [...range(quart, -quart, -1), ...range(-quart, quart + 1, 1)];
 };
 
-const getData = (rows: number, { yLogBase, xLogBase, yDataType, xDataType, yNegative, xNegative }: LogKnobs) =>
+const getData = (
+  rows: number,
+  { logOptions: { yLogBase, xLogBase } = {}, yDataType, xDataType, yNegative, xNegative }: LogKnobs,
+) =>
   getInitalData(rows).map((v, i, { length }) => {
     const y0 = getDataValue(yDataType, v, i, length);
     const x0 = getDataValue(xDataType, v, i, length);
@@ -120,23 +131,23 @@ const getData = (rows: number, { yLogBase, xLogBase, yDataType, xDataType, yNega
 
 export const Example = () => {
   const rows = number('Rows in dataset', 11, { min: 5, step: 2, max: 21 });
-  const logOptions = getLogKnobs();
-  const data = getData(rows, logOptions);
+  const logKnobs = getLogKnobs();
+  const data = getData(rows, logKnobs);
   const type = getSeriesType();
   const Series = seriesMap[type];
 
   return (
     <Chart className="story-chart">
-      <Settings {...logOptions} />
+      <Settings {...logKnobs} />
       <Axis
         id="y"
-        tickFormat={logFormatter(logOptions.yLogBase)}
+        tickFormat={logFormatter(logKnobs.logOptions?.yLogBase)}
         position={Position.Left}
-        domain={{ padding: logOptions.yPadding }}
+        domain={{ padding: logKnobs.yPadding }}
       />
       <Axis
         id="x"
-        tickFormat={logFormatter(logOptions.xLogBase)}
+        tickFormat={logFormatter(logKnobs.logOptions?.xLogBase)}
         position={Position.Bottom}
         style={{ tickLabel: { rotation: -90 } }}
       />

stories/utils/knobs.ts

@@ -75,10 +75,12 @@ export const getKnobsFromEnum = <T extends SelectTypeKnobValue, O extends Record
   defaultValue: T,
   {
     group,
+    allowUndefined,
     include,
     exclude,
   }: {
     group?: string;
+    allowUndefined?: boolean;
     include?: Array<T>;
     exclude?: Array<T>;
   } = {},
@@ -92,7 +94,7 @@ export const getKnobsFromEnum = <T extends SelectTypeKnobValue, O extends Record
         // @ts-ignore
         acc[key] = value;
         return acc;
-      }, {} as O),
+      }, (allowUndefined ? { Undefined: undefined } : ({} as unknown)) as O),
     defaultValue,
     group,
   ) || undefined;