fix(ticks): fill in additional ticks for histogram (#251)

emmacunningham · markov00 · commit af92736dc877 · 2019-07-05T12:39:52.000+02:00
diff --git a/src/lib/axes/axis_utils.test.ts b/src/lib/axes/axis_utils.test.ts
@@ -206,36 +206,90 @@ describe('Axis computational utils', () => {
     expect(xScale).toBeDefined();
   });
 
-  test('should compute available ticks', () => {
-    const scale = getScaleForAxisSpec(verticalAxisSpec, xDomain, [yDomain], 0, 0, 100, 0);
-    const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, false);
-    const expectedAxisPositions = [
-      { label: '0', position: 100, value: 0 },
-      { label: '0.1', position: 90, value: 0.1 },
-      { label: '0.2', position: 80, value: 0.2 },
-      { label: '0.3', position: 70, value: 0.3 },
-      { label: '0.4', position: 60, value: 0.4 },
-      { label: '0.5', position: 50, value: 0.5 },
-      { label: '0.6', position: 40, value: 0.6 },
-      { label: '0.7', position: 30, value: 0.7 },
-      { label: '0.8', position: 20, value: 0.8 },
-      { label: '0.9', position: 10, value: 0.9 },
-      { label: '1', position: 0, value: 1 },
-    ];
-    expect(axisPositions).toEqual(expectedAxisPositions);
-
-    // histogram mode axis ticks should add an additional tick
-    const xBandDomain: XDomain = {
-      type: 'xDomain',
-      scaleType: ScaleType.Linear,
-      domain: [0, 100],
-      isBandScale: true,
-      minInterval: 10,
-    };
-    const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
-    const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, true);
-    const histogramTickLabels = histogramAxisPositions.map((tick: AxisTick) => tick.label);
-    expect(histogramTickLabels).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110']);
+  describe('getAvailableTicks', () => {
+    test('should compute to end of domain when histogram mode not enabled', () => {
+      const enableHistogramMode = false;
+      const scale = getScaleForAxisSpec(verticalAxisSpec, xDomain, [yDomain], 0, 0, 100, 0);
+      const axisPositions = getAvailableTicks(verticalAxisSpec, scale!, 0, enableHistogramMode);
+      const expectedAxisPositions = [
+        { label: '0', position: 100, value: 0 },
+        { label: '0.1', position: 90, value: 0.1 },
+        { label: '0.2', position: 80, value: 0.2 },
+        { label: '0.3', position: 70, value: 0.3 },
+        { label: '0.4', position: 60, value: 0.4 },
+        { label: '0.5', position: 50, value: 0.5 },
+        { label: '0.6', position: 40, value: 0.6 },
+        { label: '0.7', position: 30, value: 0.7 },
+        { label: '0.8', position: 20, value: 0.8 },
+        { label: '0.9', position: 10, value: 0.9 },
+        { label: '1', position: 0, value: 1 },
+      ];
+      expect(axisPositions).toEqual(expectedAxisPositions);
+    });
+
+    test('should extend ticks to domain + minInterval in histogram mode for linear scale', () => {
+      const enableHistogramMode = true;
+      const xBandDomain: XDomain = {
+        type: 'xDomain',
+        scaleType: ScaleType.Linear,
+        domain: [0, 100],
+        isBandScale: true,
+        minInterval: 10,
+      };
+      const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
+      const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
+      const histogramTickLabels = histogramAxisPositions.map(({ label }: AxisTick) => label);
+      expect(histogramTickLabels).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110']);
+    });
+
+    test('should extend ticks to domain + minInterval in histogram mode for time scale', () => {
+      const enableHistogramMode = true;
+      const xBandDomain: XDomain = {
+        type: 'xDomain',
+        scaleType: ScaleType.Time,
+        domain: [1560438420000, 1560438510000],
+        isBandScale: true,
+        minInterval: 90000,
+      };
+      const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
+      const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
+      const histogramTickValues = histogramAxisPositions.map(({ value }: AxisTick) => value);
+
+      const expectedTickValues = [
+        1560438420000,
+        1560438435000,
+        1560438450000,
+        1560438465000,
+        1560438480000,
+        1560438495000,
+        1560438510000,
+        1560438525000,
+        1560438540000,
+        1560438555000,
+        1560438570000,
+        1560438585000,
+        1560438600000,
+      ];
+
+      expect(histogramTickValues).toEqual(expectedTickValues);
+    });
+
+    test('should extend ticks to domain + minInterval in histogram mode for a scale with single datum', () => {
+      const enableHistogramMode = true;
+      const xBandDomain: XDomain = {
+        type: 'xDomain',
+        scaleType: ScaleType.Time,
+        domain: [1560438420000, 1560438420000], // a single datum scale will have the same value for domain start & end
+        isBandScale: true,
+        minInterval: 90000,
+      };
+      const xScale = getScaleForAxisSpec(horizontalAxisSpec, xBandDomain, [yDomain], 1, 0, 100, 0);
+      const histogramAxisPositions = getAvailableTicks(horizontalAxisSpec, xScale!, 1, enableHistogramMode);
+      const histogramTickValues = histogramAxisPositions.map(({ value }: AxisTick) => value);
+      const expectedTickValues = [1560438420000, 1560438510000];
+
+      expect(histogramTickValues).toEqual(expectedTickValues);
+    });
   });
   test('should compute visible ticks for a vertical axis', () => {
     const allTicks = [
diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
@@ -383,17 +383,47 @@ export function getAvailableTicks(
   enableHistogramMode: boolean,
 ): AxisTick[] {
   const ticks = scale.ticks();
+  const isSingleValueScale = scale.domain[0] - scale.domain[1] === 0;
+  const hasAdditionalTicks = enableHistogramMode && scale.bandwidth > 0;
 
-  if (enableHistogramMode && scale.bandwidth > 0) {
-    const finalTick = ticks[ticks.length - 1] + scale.minInterval;
-    ticks.push(finalTick);
+  if (hasAdditionalTicks) {
+    const lastComputedTick = ticks[ticks.length - 1];
+
+    if (!isSingleValueScale) {
+      const penultimateComputedTick = ticks[ticks.length - 2];
+      const computedTickDistance = lastComputedTick - penultimateComputedTick;
+      const numTicks = scale.minInterval / computedTickDistance;
+
+      for (let i = 1; i <= numTicks; i++) {
+        ticks.push(i * computedTickDistance + lastComputedTick);
+      }
+    }
   }
 
   const shift = totalBarsInCluster > 0 ? totalBarsInCluster : 1;
 
   const band = scale.bandwidth / (1 - scale.barsPadding);
   const halfPadding = (band - scale.bandwidth) / 2;
   const offset = enableHistogramMode ? -halfPadding : (scale.bandwidth * shift) / 2;
+
+  if (isSingleValueScale && hasAdditionalTicks) {
+    const firstTickValue = ticks[0];
+    const firstTick = {
+      value: firstTickValue,
+      label: axisSpec.tickFormat(firstTickValue),
+      position: scale.scale(firstTickValue) + offset,
+    };
+
+    const lastTickValue = firstTickValue + scale.minInterval;
+    const lastTick = {
+      value: lastTickValue,
+      label: axisSpec.tickFormat(lastTickValue),
+      position: scale.bandwidth + halfPadding * 2,
+    };
+
+    return [firstTick, lastTick];
+  }
+
   return ticks.map((tick) => {
     return {
       value: tick,
@@ -433,6 +463,7 @@ export function getVisibleTicks(allTicks: AxisTick[], axisSpec: AxisSpec, axisDi
       }
     }
   }
+
   return visibleTicks;
 }
 
diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
@@ -1608,6 +1608,39 @@ storiesOf('Bar Chart', module)
       </Chart>
     );
   })
+  .add('[test] single histogram bar chart', () => {
+    const formatter = timeFormatter(niceTimeFormatByDay(1));
+
+    const xDomain = {
+      minInterval: 60000,
+    };
+
+    return (
+      <Chart className={'story-chart'}>
+        <Settings xDomain={xDomain} />
+        <Axis
+          id={getAxisId('bottom')}
+          title={'timestamp per 1 minute'}
+          position={Position.Bottom}
+          showOverlappingTicks={true}
+          tickFormat={formatter}
+        />
+        <Axis
+          id={getAxisId('left')}
+          title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+          position={Position.Left}
+        />
+        <HistogramBarSeries
+          id={getSpecId('bars')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 1)}
+        />
+      </Chart>
+    );
+  })
   .add('stacked only grouped areas', () => {
     const data1 = [[1, 2], [2, 2], [3, 3], [4, 5], [5, 5], [6, 3], [7, 8], [8, 2], [9, 1]];
     const data2 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 4], [7, 3], [8, 2], [9, 4]];
