Change sparkline to use histogram ala snapshot histogram. (#29018)

Switch the stacking order for sparklines.

x-pack/plugins/uptime/public/components/queries/monitor_list/__tests__/format_sparkline_counts.test.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { formatSparklineCounts, PingCount } from '../format_sparkline_counts';
+
+describe('formatSparklineCounts', () => {
+  let counts: PingCount[];
+
+  beforeEach(() => {
+    counts = [
+      { x: 100, y: 50 },
+      { x: 200, y: 55 },
+      { x: 300, y: 52 },
+      { x: 400, y: 60 },
+      { x: 500, y: 58 },
+    ];
+  });
+
+  it('assigns an x0 and x to track point size, and preserves the y-value', () => {
+    const result = formatSparklineCounts(counts);
+    expect(result[0]).toEqual({ x0: 100, x: 200, y: 50 });
+    expect(result[1]).toEqual({ x0: 200, x: 300, y: 55 });
+    expect(result[2]).toEqual({ x0: 300, x: 400, y: 52 });
+    expect(result[3]).toEqual({ x0: 400, x: 500, y: 60 });
+    expect(result[4]).toEqual({ x0: 500, x: 600, y: 58 });
+  });
+
+  it('returns an empty array if size === 1', () => {
+    const result = formatSparklineCounts([{ x: 1, y: 2 }]);
+    expect(result).toEqual([]);
+  });
+});

x-pack/plugins/uptime/public/components/queries/monitor_list/format_sparkline_counts.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface PingCount {
+  x: number;
+  y: number;
+}
+
+export const formatSparklineCounts = (counts: PingCount[]) => {
+  let defaultSize = 0;
+  const { length } = counts;
+  // assume points are uniform, use this
+  // for the last element's span
+  if (length > 1) {
+    defaultSize = Math.max(counts[1].x - counts[0].x, 0);
+  } else if (length === 1) {
+    // wait for another point
+    return [];
+  }
+  return counts.map(({ x: x0, y }, index, array) => {
+    let x;
+    const nextIndex = index + 1;
+    if (nextIndex === array.length) {
+      x = x0 + defaultSize;
+    } else {
+      const { x: nextX } = array[nextIndex];
+      x = nextX;
+    }
+    return { x, x0, y };
+  });
+};

x-pack/plugins/uptime/public/components/queries/monitor_list/monitor_list.tsx

@@ -7,9 +7,9 @@
 import {
   EuiHealth,
   // @ts-ignore missing type definition
-  EuiInMemoryTable,
+  EuiHistogramSeries,
   // @ts-ignore missing type definition
-  EuiLineSeries,
+  EuiInMemoryTable,
   EuiPanel,
   // @ts-ignore missing type definition
   EuiSeriesChart,
@@ -26,6 +26,7 @@ import { Query } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import { LatestMonitorsResult } from 'x-pack/plugins/uptime/common/graphql/types';
 import { UptimeCommonProps } from '../../../uptime_app';
+import { formatSparklineCounts } from './format_sparkline_counts';
 import { getMonitorListQuery } from './get_monitor_list';
 
 interface MonitorListProps {
@@ -100,27 +101,25 @@ const monitorListColumns = [
       return (
         <EuiSeriesChart
           showDefaultAxis={false}
-          width={160}
           height={70}
+          stackBy="y"
+          // TODO: style hack
+          style={{ marginBottom: '-20px' }}
           xType={EuiSeriesChartUtils.SCALE.TIME}
         >
-          <EuiLineSeries
-            lineSize={2}
-            color="green"
+          <EuiHistogramSeries
+            data={formatSparklineCounts(upSeries)}
             name={i18n.translate('xpack.uptime.monitorList.upLineSeries.upLabel', {
               defaultMessage: 'Up',
             })}
-            data={upSeries}
-            showLineMarks={true}
+            color="green"
           />
-          <EuiLineSeries
-            lineSize={2}
-            color="red"
+          <EuiHistogramSeries
+            data={formatSparklineCounts(downSeries)}
             name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
               defaultMessage: 'Down',
             })}
-            data={downSeries}
-            showLineMarks={true}
+            color="red"
           />
         </EuiSeriesChart>
       );