diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-log-scale-options-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-log-scale-options-visually-looks-correct-1-snap.png index 222617d063..b53713482d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-log-scale-options-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-scales-log-scale-options-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-1-snap.png b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-1-snap.png index 222617d063..b53713482d 100644 Binary files a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-1-snap.png and b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-2-snap.png b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-2-snap.png index 610ea9253f..85f53bd905 100644 Binary files a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-2-snap.png and b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-2-snap.png differ diff --git a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-3-snap.png b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-3-snap.png index dc90a12247..994f760b85 100644 Binary files a/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-3-snap.png and b/integration/tests/__image_snapshots__/scales-stories-test-ts-scales-stories-should-render-proper-tick-count-3-snap.png differ diff --git a/src/chart_types/xy_chart/state/utils/utils.ts b/src/chart_types/xy_chart/state/utils/utils.ts index 001e47df65..c4b6766e45 100644 --- a/src/chart_types/xy_chart/state/utils/utils.ts +++ b/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, 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 { 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; diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts index 607092fac1..4cceb4f5ad 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.ts +++ b/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, axesStyles: Map, diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap index 8f328e72a6..a354f9c450 100644 --- a/src/components/__snapshots__/chart.test.tsx.snap +++ b/src/components/__snapshots__/chart.test.tsx.snap @@ -54,7 +54,7 @@ exports[`Chart should render the legend name test 1`] = ` - + diff --git a/src/specs/constants.ts b/src/specs/constants.ts index 6bc0575259..60c26d945c 100644 --- a/src/specs/constants.ts +++ b/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, }; diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx index 4050cefaff..6b13572674 100644 --- a/src/specs/settings.tsx +++ b/src/specs/settings.tsx @@ -321,6 +321,38 @@ export type LegendColorPicker = ComponentType; */ 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>; diff --git a/stories/area/17_negative.tsx b/stories/area/17_negative.tsx index dd44c88f57..f52c24009e 100644 --- a/stories/area/17_negative.tsx +++ b/stories/area/17_negative.tsx @@ -40,7 +40,7 @@ export const Example = () => { ); return ( - + Number(d).toFixed(2)} /> diff --git a/stories/area/18_negative_positive.tsx b/stories/area/18_negative_positive.tsx index c75dbbbe42..f8a86e2d3d 100644 --- a/stories/area/18_negative_positive.tsx +++ b/stories/area/18_negative_positive.tsx @@ -39,7 +39,7 @@ export const Example = () => { return ( - + & { +type LogKnobs = Pick & { 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 ( - + diff --git a/stories/utils/knobs.ts b/stories/utils/knobs.ts index 6c524727fc..c2adbdc127 100644 --- a/stories/utils/knobs.ts +++ b/stories/utils/knobs.ts @@ -75,10 +75,12 @@ export const getKnobsFromEnum = ; exclude?: Array; } = {}, @@ -92,7 +94,7 @@ export const getKnobsFromEnum =