diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts index 82787a1291..d4a47c7b74 100644 --- a/src/chart_types/xy_chart/utils/axis_utils.ts +++ b/src/chart_types/xy_chart/utils/axis_utils.ts @@ -229,7 +229,6 @@ export function computeTickDimensions( const { tickLabelStyle: { fontFamily, fontSize }, } = axisConfig; - const { maxLabelBboxWidth, maxLabelBboxHeight, diff --git a/src/chart_types/xy_chart/utils/scales.ts b/src/chart_types/xy_chart/utils/scales.ts index c0a2a3b86b..b7d95badcf 100644 --- a/src/chart_types/xy_chart/utils/scales.ts +++ b/src/chart_types/xy_chart/utils/scales.ts @@ -70,7 +70,16 @@ interface XScaleOptions { * @param axisLength the length of the x axis */ export function computeXScale(options: XScaleOptions): Scale { - const { xDomain, totalBarsInCluster, range, barsPadding, enableHistogramMode, ticks, integersOnly } = options; + const { + xDomain, + totalBarsInCluster, + range, + barsPadding, + enableHistogramMode, + ticks, + integersOnly, + duplicateTicks, + } = options; const { scaleType, minInterval, domain, isBandScale, timeZone } = xDomain; const rangeDiff = Math.abs(range[1] - range[0]); const isInverse = range[1] < range[0]; @@ -112,7 +121,7 @@ export function computeXScale(options: XScaleOptions): Scale { } else { return new ScaleContinuous( { type: scaleType, domain, range }, - { bandwidth: 0, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks, integersOnly }, + { bandwidth: 0, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks, integersOnly, duplicateTicks }, ); } } @@ -132,7 +141,7 @@ interface YScaleOptions { */ export function computeYScales(options: YScaleOptions): Map { const yScales: Map = new Map(); - const { yDomains, range, ticks, integersOnly } = options; + const { yDomains, range, ticks, integersOnly, duplicateTicks } = options; yDomains.forEach(({ scaleType: type, domain, groupId }) => { const yScale = new ScaleContinuous( { @@ -143,6 +152,7 @@ export function computeYScales(options: YScaleOptions): Map { { ticks, integersOnly, + duplicateTicks, }, ); yScales.set(groupId, yScale); diff --git a/src/scales/scale_continuous.ts b/src/scales/scale_continuous.ts index 9e7108c466..28f8526866 100644 --- a/src/scales/scale_continuous.ts +++ b/src/scales/scale_continuous.ts @@ -121,6 +121,8 @@ interface ScaleOptions { isSingleValueHistogram: boolean; /** Show only integer values **/ integersOnly?: boolean; + /** Show duplicate tick values default to false */ + duplicateTicks?: boolean; } const defaultScaleOptions: ScaleOptions = { bandwidth: 0, @@ -131,6 +133,7 @@ const defaultScaleOptions: ScaleOptions = { ticks: 10, isSingleValueHistogram: false, integersOnly: false, + duplicateTicks: false, }; export class ScaleContinuous implements Scale { readonly bandwidth: number; diff --git a/stories/line/10_duplicate_ticks.tsx b/stories/line/10_duplicate_ticks.tsx new file mode 100644 index 0000000000..a782381e23 --- /dev/null +++ b/stories/line/10_duplicate_ticks.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Axis, Chart, LineSeries, Position, ScaleType, niceTimeFormatter } from '../../src/'; +import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana'; +import { boolean } from '@storybook/addon-knobs'; +import { DateTime } from 'luxon'; + +export const example = () => { + const now = DateTime.fromISO('2019-01-11T00:00:00.000') + .setZone('utc+1') + .toMillis(); + const oneDay = 1000 * 60 * 60 * 24; + const formatter = niceTimeFormatter([now, now + oneDay * 10]); + const duplicateTicksInAxis = boolean('Hide duplicate ticks in x axis', false); + return ( + + + `${Number(d).toFixed(1)}`} + /> + + + ); +}; diff --git a/stories/line/line.stories.tsx b/stories/line/line.stories.tsx index 970c206e38..6b242cd9b6 100644 --- a/stories/line/line.stories.tsx +++ b/stories/line/line.stories.tsx @@ -16,3 +16,4 @@ export { example as curvedWithAxisAndLegend } from './6_curved'; export { example as multipleWithAxisAndLegend } from './7_multiple'; export { example as stackedWithAxisAndLegend } from './8_stacked'; export { example as multiSeriesWithLogValues } from './9_multi_series'; +export { example as duplicateTicksDates } from './10_duplicate_ticks';