Explorer empty bucket

public/components/event_analytics/explorer/explorer.tsx

@@ -530,7 +530,12 @@ export const Explorer = ({
                       startTime={appLogEvents ? startTime : dateRange[0]}
                       endTime={appLogEvents ? endTime : dateRange[1]}
                     />
-                    <CountDistribution countDistribution={countDistribution} />
+                    <CountDistribution
+                      countDistribution={countDistribution}
+                      selectedInterval={selectedIntervalRef.current?.value}
+                      startTime={appLogEvents ? startTime : dateRange[0]}
+                      endTime={appLogEvents ? endTime : dateRange[1]}
+                    />
                     <EuiHorizontalRule margin="xs" />
                     <LogPatterns
                       selectedIntervalUnit={selectedIntervalRef.current}

public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap

@@ -44,134 +44,7 @@ exports[`Count distribution component Renders count distribution component with
       },
     }
   }
->
-  <Plt
-    data={
-      Array [
-        Object {
-          "name": Object {
-            "name": "count()",
-            "type": "integer",
-          },
-          "orientation": "v",
-          "type": "bar",
-          "x": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
-          ],
-          "y": Array [
-            2549,
-            9337,
-            1173,
-          ],
-        },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-      }
-    }
-  >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "name": Object {
-              "name": "count()",
-              "type": "integer",
-            },
-            "orientation": "v",
-            "type": "bar",
-            "x": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
-            ],
-            "y": Array [
-              2549,
-              9337,
-              1173,
-            ],
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "h",
-            "traceorder": "normal",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "xaxis": Object {
-            "automargin": true,
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "title": Object {
-              "text": "Count",
-            },
-            "zeroline": false,
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
-    >
-      <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
-</Component>
+/>
 `;
 
 exports[`Count distribution component Renders empty count distribution component 1`] = `<Component />`;

public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx

@@ -4,15 +4,24 @@
  */
 
 import React from 'react';
+import moment from 'moment';
+import datemath from '@elastic/datemath';
 import { BarOrientation, LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
 import { Plt } from '../../../../visualizations/plotly/plot';
+import { DATE_PICKER_FORMAT } from '../../../../../../common/constants/explorer';
 
-export const CountDistribution = ({ countDistribution }: any) => {
+export const CountDistribution = ({
+  countDistribution,
+  selectedInterval,
+  startTime,
+  endTime,
+}: any) => {
   if (
     !countDistribution ||
     !countDistribution.data ||
     !countDistribution.metadata ||
-    !countDistribution.metadata.fields
+    !countDistribution.metadata.fields ||
+    !selectedInterval
   )
     return null;
 
@@ -31,9 +40,62 @@ export const CountDistribution = ({ countDistribution }: any) => {
     },
   ];
 
+  // fill the final data with the exact right amount of empty buckets
+  function fillWithEmpty(processedData: any) {
+    // original x and y fields
+    const xVals = processedData[0].x;
+    const yVals = processedData[0].y;
+
+    const intervalPeriod = selectedInterval.replace(/^auto_/, '');
+
+    // parses out datetime for start and end, then reformats
+    const startDate = datemath
+      .parse(startTime)
+      ?.startOf(intervalPeriod === 'w' ? 'isoWeek' : intervalPeriod);
+    const endDate = datemath
+      .parse(endTime)
+      ?.startOf(intervalPeriod === 'w' ? 'isoWeek' : intervalPeriod);
+    // TODO: figure out how to handle an error here - which would happen if start/endTime were
+    // to somehow be invalid for datemath.parse, but that would be a flaw in the datepicker
+    // component if that happens
+    if (startDate === undefined || endDate === undefined) {
+      return null;
+    }
+
+    // find the number of buckets
+    // below essentially does ((end - start) / interval_period) + 1
+    const numBuckets = endDate.diff(startDate, intervalPeriod) + 1;
+
+    // populate buckets as x values in the graph
+    const buckets = [startDate.format(DATE_PICKER_FORMAT)];
+    const currentDate = startDate;
+    for (let i = 1; i < numBuckets; i++) {
+      const nextBucket = currentDate.add(1, intervalPeriod);
+      buckets.push(nextBucket.format(DATE_PICKER_FORMAT));
+    }
+
+    // create y values, use old y values if they exist
+    const values: number[] = [];
+    buckets.forEach((bucket) => {
+      const bucketIndex = xVals.findIndex((x: string) => x === bucket);
+      if (bucketIndex !== undefined) {
+        values.push(yVals[bucketIndex]);
+      } else {
+        values.push(0);
+      }
+    });
+
+    // replace old x and y values with new
+    processedData[0].x = buckets;
+    processedData[0].y = values;
+
+    // // at the end, return the new object
+    return processedData;
+  }
+
   return (
     <Plt
-      data={finalData}
+      data={fillWithEmpty(finalData)}
       layout={{
         showlegend: true,
         margin: {