diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx index 94ba13df59..733a395b04 100644 --- a/.playground/playgroud.tsx +++ b/.playground/playgroud.tsx @@ -1,88 +1,25 @@ import React from 'react'; - -import { - Axis, - Chart, - getAxisId, - getSpecId, - niceTimeFormatter, - Position, - ScaleType, - Settings, - AreaSeries, - getGroupId, -} from '../src'; +import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, Settings, BarSeries } from '../src'; import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; -export class Playground extends React.Component { - ref1 = React.createRef(); - ref2 = React.createRef(); - ref3 = React.createRef(); +export class Playground extends React.Component { render() { return ( - - - - `GA: ${d.toFixed(2)}`} /> - `GB: ${d.toFixed(2)}`} - /> - - - [d[0], -d[1]])} - xAccessor={0} - yAccessors={[1]} - stackAccessors={[0]} - /> - [d[0], -d[1]])} - xAccessor={0} - yAccessors={[1]} - stackAccessors={[0]} - /> - +
+ + + + + + +
); } } diff --git a/src/chart_types/xy_chart/annotations/annotation_utils.test.ts b/src/chart_types/xy_chart/annotations/annotation_utils.test.ts index 3c0c02ccfc..224d2644c9 100644 --- a/src/chart_types/xy_chart/annotations/annotation_utils.test.ts +++ b/src/chart_types/xy_chart/annotations/annotation_utils.test.ts @@ -1384,14 +1384,14 @@ describe('annotation utils', () => { const dimensions = computeRectAnnotationDimensions(annotationRectangle, yScales, xScale, true, 0); const [dims1, dims2, dims3, dims4] = dimensions; - expect(dims1.rect.x).toBe(0); + expect(dims1.rect.x).toBe(10); expect(dims1.rect.y).toBe(0); - expect(dims1.rect.width).toBe(10); + expect(dims1.rect.width).toBeCloseTo(100); expect(dims1.rect.height).toBe(100); - expect(dims2.rect.x).toBe(10); + expect(dims2.rect.x).toBe(0); expect(dims2.rect.y).toBe(0); - expect(dims2.rect.width).toBeCloseTo(100); + expect(dims2.rect.width).toBe(10); expect(dims2.rect.height).toBe(100); expect(dims3.rect.x).toBe(0); @@ -1425,8 +1425,8 @@ describe('annotation utils', () => { const dimensions = computeRectAnnotationDimensions(annotationRectangle, yScales, xScale, false, 0); const expectedDimensions = [ - { rect: { x: 0, y: 0, width: 10, height: 100 } }, { rect: { x: 10, y: 0, width: 90, height: 100 } }, + { rect: { x: 0, y: 0, width: 10, height: 100 } }, { rect: { x: 0, y: 0, width: 100, height: 10 } }, { rect: { x: 0, y: 10, width: 100, height: 90 } }, ]; diff --git a/src/chart_types/xy_chart/annotations/annotation_utils.ts b/src/chart_types/xy_chart/annotations/annotation_utils.ts index 53b69ed7c3..c0b37a776e 100644 --- a/src/chart_types/xy_chart/annotations/annotation_utils.ts +++ b/src/chart_types/xy_chart/annotations/annotation_utils.ts @@ -399,7 +399,6 @@ export function computeRectAnnotationDimensions( const yDomain = yScale.domain; const lastX = xDomain[xDomain.length - 1]; const xMinInterval = xScale.minInterval; - const rectsProps: AnnotationRectProps[] = []; dataValues.forEach((dataValue: RectAnnotationDatum) => { @@ -410,15 +409,15 @@ export function computeRectAnnotationDimensions( return; } - if (x0 == null) { + if (x1 == null) { // if x1 is defined, we want the rect to draw to the end of the scale // if we're in histogram mode, extend domain end by min interval - x0 = enableHistogramMode ? lastX + xMinInterval : lastX; + x1 = enableHistogramMode && !xScale.isSingleValue() ? lastX + xMinInterval : lastX; } - if (x1 == null) { + if (x0 == null) { // if x0 is defined, we want the rect to draw to the start of the scale - x1 = xDomain[0]; + x0 = xDomain[0]; } if (y0 == null) { diff --git a/src/chart_types/xy_chart/utils/scales.ts b/src/chart_types/xy_chart/utils/scales.ts index afa529a9bd..f74300b9ec 100644 --- a/src/chart_types/xy_chart/utils/scales.ts +++ b/src/chart_types/xy_chart/utils/scales.ts @@ -98,7 +98,15 @@ export function computeXScale(options: XScaleOptions): Scale { domain: adjustedDomain, range: [start, end], }, - { bandwidth: bandwidth / totalBarsInCluster, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks }, + { + bandwidth: bandwidth / totalBarsInCluster, + minInterval, + timeZone, + totalBarsInCluster, + barsPadding, + ticks, + isSingleValueHistogram, + }, ); return scale; diff --git a/src/utils/scales/scale_continuous.ts b/src/utils/scales/scale_continuous.ts index fbc6c03a55..9b0b705ab0 100644 --- a/src/utils/scales/scale_continuous.ts +++ b/src/utils/scales/scale_continuous.ts @@ -103,8 +103,18 @@ interface ScaleOptions { * @default 10 */ ticks: number; + /** true if the scale was adjusted to fit one single value histogram */ + isSingleValueHistogram: boolean; } - +const defaultScaleOptions: ScaleOptions = { + bandwidth: 0, + minInterval: 0, + timeZone: 'utc', + totalBarsInCluster: 1, + barsPadding: 0, + ticks: 10, + isSingleValueHistogram: false, +}; export class ScaleContinuous implements Scale { readonly bandwidth: number; readonly totalBarsInCluster: number; @@ -118,22 +128,21 @@ export class ScaleContinuous implements Scale { readonly tickValues: number[]; readonly timeZone: string; readonly barsPadding: number; + readonly isSingleValueHistogram: boolean; private readonly d3Scale: any; constructor(scaleData: ScaleData, options?: Partial) { const { type, domain, range } = scaleData; - const scaleOptions: ScaleOptions = mergePartial( - { - bandwidth: 0, - minInterval: 0, - timeZone: 'utc', - totalBarsInCluster: 1, - barsPadding: 0, - ticks: 10, - }, - options, - ); - const { bandwidth, minInterval, timeZone, totalBarsInCluster, barsPadding, ticks } = scaleOptions; + const { + bandwidth, + minInterval, + timeZone, + totalBarsInCluster, + barsPadding, + ticks, + isSingleValueHistogram, + } = mergePartial(defaultScaleOptions, options); + this.d3Scale = SCALES[type](); if (type === ScaleType.Log) { this.domain = limitLogScaleDomain(domain); @@ -154,6 +163,7 @@ export class ScaleContinuous implements Scale { this.isInverted = this.domain[0] > this.domain[1]; this.timeZone = timeZone; this.totalBarsInCluster = totalBarsInCluster; + this.isSingleValueHistogram = isSingleValueHistogram; if (type === ScaleType.Time) { const startDomain = DateTime.fromMillis(this.domain[0], { zone: this.timeZone }); const endDomain = DateTime.fromMillis(this.domain[1], { zone: this.timeZone }); @@ -227,6 +237,9 @@ export class ScaleContinuous implements Scale { return prevValue; } isSingleValue() { + if (this.isSingleValueHistogram) { + return true; + } if (this.domain.length < 2) { return true; }