feat: adding duplicate ticks story

elastic · Mar 5, 2020 · a0c8839 · a0c8839
1 parent f7a1aa0
commit a0c8839
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 4 deletions.
diff --git 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
@@ -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<GroupId, Scale> {
   const yScales: Map<GroupId, Scale> = 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<GroupId, Scale> {
       {
         ticks,
         integersOnly,
+        duplicateTicks,
       },
     );
     yScales.set(groupId, yScale);

diff --git 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
@@ -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 (
+    <Chart className="story-chart">
+      <Axis id="bottom" position={Position.Bottom} tickFormat={formatter} duplicateTicks={duplicateTicksInAxis} />
+      <Axis
+        id="left"
+        title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+        position={Position.Left}
+        tickFormat={(d) => `${Number(d).toFixed(1)}`}
+      />
+      <LineSeries
+        id="lines"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        xAccessor="x"
+        yAccessors={['y']}
+        data={[
+          { x: now, y: 2 },
+          { x: now + oneDay, y: 3 },
+          { x: now + oneDay * 2, y: 3 },
+          { x: now + oneDay * 3, y: 4 },
+          { x: now + oneDay * 4, y: 8 },
+          { x: now + oneDay * 5, y: 6 },
+        ]}
+      />
+    </Chart>
+  );
+};
diff --git 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';