@oneuptime/common 12.0.33 → 13.0.0

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -144,6 +144,13 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -164,8 +171,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -175,8 +184,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -97,8 +97,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -108,8 +110,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Line/LineChart.tsx

@@ -122,6 +122,13 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -142,8 +149,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -153,8 +162,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Types/XAxis/XAxis.ts

@@ -1,4 +1,5 @@
 import XAxisMaxMin from "./XAxisMaxMin";
+import XAxisPrecision from "./XAxisPrecision";
 import XAxisType from "./XAxisType";
 
 export enum XAxisAggregateType {
@@ -13,6 +14,34 @@ export interface XAxisOptions {
   min: XAxisMaxMin;
   max: XAxisMaxMin;
   aggregateType: XAxisAggregateType;
+  /*
+   * Pin the grid step instead of letting XAxisUtil derive one from the
+   * window's duration.
+   *
+   * The derived ladder is a SECOND ladder: it guesses the bucket size the
+   * data was aggregated at from how long the window is. A caller that
+   * already knows the real bucket size does not have to guess, and must
+   * not — the two ladders disagree in both directions:
+   *
+   *  - Finer. The derived ladder has four sub-minute tiers (<=15s / 75s /
+   *    150s / 450s) while the analytics backend's finest bucket is one
+   *    minute, so every window under 7.5 minutes got a grid the data could
+   *    never fill. A 5-minute metric window drew an 11-slot 30-second grid
+   *    over 5 one-minute rows: every other slot empty, and the axis running
+   *    a full minute past the last real point.
+   *  - Coarser. Aligning a window to the bucket grid widens it slightly
+   *    (the start is floored), which can tip a window sitting exactly on a
+   *    tier threshold — a 3h preset, say — into the next tier. The query is
+   *    still pinned to the interval derived from the RAW window, so the
+   *    chart then re-averages five one-minute rows into each five-minute
+   *    slot: an unweighted average of averages.
+   *
+   * Set this to the interval the DATA was actually bucketed at and each
+   * slot maps to exactly one backend bucket. Left undefined, the duration
+   * ladder applies, which is right for callers whose points are raw
+   * samples rather than server-side buckets.
+   */
+  precision?: XAxisPrecision | undefined;
 }
 
 export interface XAxis {

package/UI/Components/Charts/Utils/DataPoint.ts

@@ -15,6 +15,7 @@ import ChartDataPoint, {
 import SeriesPoints from "../Types/SeriesPoints";
 import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis";
 import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
+import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
 import YAxis from "../Types/YAxis/YAxis";
 import XAxisUtil from "./XAxis";
 
@@ -31,7 +32,10 @@ export default class DataPointUtil {
     xAxis: XAxis;
     yAxis: YAxis;
   }): Array<ChartDataPoint> {
-    const { intervals, formatter } = this.initializeXAxisData(data.xAxis);
+    const { intervals, formatter } = this.initializeXAxisData(
+      data.xAxis,
+      data.seriesPoints,
+    );
     const arrayOfData: ChartDataPoint[] = this.initializeArrayOfData(
       intervals,
       formatter,
@@ -45,7 +49,10 @@ export default class DataPointUtil {
     return arrayOfData;
   }
 
-  private static initializeXAxisData(xAxis: XAxis): {
+  private static initializeXAxisData(
+    xAxis: XAxis,
+    seriesPoints: Array<SeriesPoints>,
+  ): {
     xAxisMax: XAxisMaxMin;
     xAxisMin: XAxisMaxMin;
     intervals: Array<Date>;
@@ -53,13 +60,25 @@ export default class DataPointUtil {
   } {
     const xAxisMax: XAxisMaxMin = xAxis.options.max;
     const xAxisMin: XAxisMaxMin = xAxis.options.min;
-    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+    const precision: XAxisPrecision | undefined = xAxis.options.precision;
+    /*
+     * Renderable, not raw: the grid's final slot is the bucket holding the
+     * window end, which the query only partly covered and which therefore
+     * comes back empty whenever the window ends on or just past a bucket
+     * boundary. XAxisUtil drops that one slot (and only that one, and only
+     * when nothing landed in it) so the axis stops at the last point there
+     * is data for instead of a bucket beyond it.
+     */
+    const intervals: Array<Date> = XAxisUtil.getRenderableIntervals({
       xAxisMax,
       xAxisMin,
+      precision,
+      seriesPoints,
     });
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax,
       xAxisMin,
+      precision,
     });
     return { xAxisMax, xAxisMin, intervals, formatter };
   }

package/UI/Components/Charts/Utils/TimeAnnotation.ts

@@ -2,7 +2,9 @@ import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
 import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
 import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
+import SeriesPoints from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
+import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
 import XAxisUtil from "./XAxis";
 
 interface AxisBuckets {
@@ -16,17 +18,38 @@ interface AxisBuckets {
    */
   labelToIndex: Map<string, number>;
   formatter: (value: Date) => string;
+  /*
+   * The axis's own maximum, kept alongside the slots because the slots no
+   * longer imply it — see getWindowEndInMs.
+   */
+  xAxisMax: XAxisMaxMin;
 }
 
 export default class TimeAnnotationUtil {
-  private static getAxisBuckets(xAxis: XAxis): AxisBuckets {
-    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+  /*
+   * `seriesPoints` is not used to place anything — it is what lets this
+   * rebuild the SAME slot array DataPointUtil built. XAxisUtil drops an
+   * unfillable trailing slot, and whether it does depends on the series, so
+   * an annotation resolved against a grid built without them would index
+   * into an array one longer than the chart's rows: every marker in the
+   * final bucket would land past the end of the axis. Chart wrappers pass
+   * the series they are drawing; callers that pass none get the raw grid,
+   * which is what DataPointUtil gives them too.
+   */
+  private static getAxisBuckets(
+    xAxis: XAxis,
+    seriesPoints?: Array<SeriesPoints> | undefined,
+  ): AxisBuckets {
+    const intervals: Array<Date> = XAxisUtil.getRenderableIntervals({
       xAxisMin: xAxis.options.min,
       xAxisMax: xAxis.options.max,
+      precision: xAxis.options.precision,
+      seriesPoints: seriesPoints,
     });
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMin: xAxis.options.min,
       xAxisMax: xAxis.options.max,
+      precision: xAxis.options.precision,
     });
     const labels: Array<string> = intervals.map((interval: Date) => {
       return formatter(interval);
@@ -38,14 +61,32 @@ export default class TimeAnnotationUtil {
         labelToIndex.set(label, index);
       }
     }
-    return { intervals, labels, labelToIndex, formatter };
+    return {
+      intervals,
+      labels,
+      labelToIndex,
+      formatter,
+      xAxisMax: xAxis.options.max,
+    };
   }
 
   /*
    * End of the charted window: last bucket start plus one bucket width
    * (buckets extend past their start date).
+   *
+   * Held up to the axis's own maximum, because the grid can legitimately
+   * stop SHORT of it — XAxisUtil drops a trailing slot no data could land
+   * in. Reconstructing the window from the slots alone would then pull this
+   * bound backwards by a bucket and start rejecting the very markers that
+   * sit at the window edge as "outside the charted window": on an alert the
+   * declared-at marker is at the window end exactly, and it would vanish
+   * from the chart it exists to annotate. Such a marker resolves instead to
+   * the last bucket that is still on the axis, which is where its data is.
    */
-  private static getWindowEndInMs(intervals: Array<Date>): number {
+  private static getWindowEndInMs(
+    intervals: Array<Date>,
+    xAxisMax: XAxisMaxMin,
+  ): number {
     const lastInterval: Date | undefined = intervals[intervals.length - 1];
     if (!lastInterval) {
       return Number.NEGATIVE_INFINITY;
@@ -55,7 +96,11 @@ export default class TimeAnnotationUtil {
     const bucketWidthInMs: number = secondToLastInterval
       ? lastInterval.getTime() - secondToLastInterval.getTime()
       : 0;
-    return lastInterval.getTime() + bucketWidthInMs;
+    const gridEndInMs: number = lastInterval.getTime() + bucketWidthInMs;
+    const axisMaxInMs: number =
+      typeof xAxisMax === "number" ? xAxisMax : xAxisMax.getTime();
+
+    return Math.max(gridEndInMs, axisMaxInMs);
   }
 
   /*
@@ -113,7 +158,10 @@ export default class TimeAnnotationUtil {
     if (!firstInterval || data.date.getTime() < firstInterval.getTime()) {
       return null;
     }
-    if (data.date.getTime() > this.getWindowEndInMs(intervals)) {
+    if (
+      data.date.getTime() >
+      this.getWindowEndInMs(intervals, data.buckets.xAxisMax)
+    ) {
       return null;
     }
 
@@ -130,8 +178,16 @@ export default class TimeAnnotationUtil {
   public static formatTimeReferenceLines(data: {
     timeReferenceLines: Array<ChartTimeReferenceLineProps>;
     xAxis: XAxis;
+    /*
+     * The series the chart is drawing. Only used to rebuild the same slot
+     * array the rows were built from — see getAxisBuckets.
+     */
+    seriesPoints?: Array<SeriesPoints> | undefined;
   }): Array<FormattedTimeReferenceLine> {
-    const buckets: AxisBuckets = this.getAxisBuckets(data.xAxis);
+    const buckets: AxisBuckets = this.getAxisBuckets(
+      data.xAxis,
+      data.seriesPoints,
+    );
 
     const formatted: Array<FormattedTimeReferenceLine> = [];
     for (const timeReferenceLine of data.timeReferenceLines) {
@@ -154,15 +210,26 @@ export default class TimeAnnotationUtil {
   public static formatReferenceRegions(data: {
     referenceRegions: Array<ChartReferenceRegionProps>;
     xAxis: XAxis;
+    /*
+     * The series the chart is drawing. Only used to rebuild the same slot
+     * array the rows were built from — see getAxisBuckets.
+     */
+    seriesPoints?: Array<SeriesPoints> | undefined;
   }): Array<FormattedReferenceRegion> {
-    const buckets: AxisBuckets = this.getAxisBuckets(data.xAxis);
+    const buckets: AxisBuckets = this.getAxisBuckets(
+      data.xAxis,
+      data.seriesPoints,
+    );
     const firstInterval: Date | undefined = buckets.intervals[0];
     const lastIndex: number = buckets.labels.length - 1;
     const lastLabel: string | undefined = buckets.labels[lastIndex];
     if (!firstInterval || lastLabel === undefined) {
       return [];
     }
-    const windowEndInMs: number = this.getWindowEndInMs(buckets.intervals);
+    const windowEndInMs: number = this.getWindowEndInMs(
+      buckets.intervals,
+      buckets.xAxisMax,
+    );
 
     const formatted: Array<FormattedReferenceRegion> = [];
     for (const referenceRegion of data.referenceRegions) {

package/UI/Components/Charts/Utils/XAxis.ts

@@ -1,5 +1,7 @@
+import AggregationInterval from "../../../../Types/BaseDatabase/AggregationInterval";
 import OneUptimeDate from "../../../../Types/Date";
 import NotImplementedException from "../../../../Types/Exception/NotImplementedException";
+import SeriesPoints from "../Types/SeriesPoints";
 import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
 import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
 
@@ -8,6 +10,49 @@ export default class XAxisUtil {
     return new Date(value.getTime());
   }
 
+  /*
+   * The grid step a caller should pin when its points are buckets the
+   * analytics backend produced, rather than raw samples.
+   *
+   * This is the bridge between the two ladders. AggregationInterval is what
+   * the server was asked to bucket by (AggregationIntervalUtil owns that
+   * decision, and the server compiles it into `toStartOfInterval`);
+   * XAxisPrecision is the step this file walks the axis at. Pinning the
+   * translation of one to the other is what makes "one slot == one backend
+   * bucket" a fact rather than a coincidence of two duration ladders
+   * agreeing.
+   *
+   * `Total` is the one interval with no grid at all — it collapses the whole
+   * window into a single aggregate whose timestamp is the earliest sample,
+   * not a bucket start — so it pins nothing and the duration ladder applies.
+   */
+  public static getPrecisionForAggregationInterval(
+    interval: AggregationInterval,
+  ): XAxisPrecision | undefined {
+    switch (interval) {
+      case AggregationInterval.Minute:
+        return XAxisPrecision.EVERY_MINUTE;
+      case AggregationInterval.FiveMinutes:
+        return XAxisPrecision.EVERY_FIVE_MINUTES;
+      case AggregationInterval.FifteenMinutes:
+        return XAxisPrecision.EVERY_FIFTEEN_MINUTES;
+      case AggregationInterval.ThirtyMinutes:
+        return XAxisPrecision.EVERY_THIRTY_MINUTES;
+      case AggregationInterval.Hour:
+        return XAxisPrecision.EVERY_HOUR;
+      case AggregationInterval.Day:
+        return XAxisPrecision.EVERY_DAY;
+      case AggregationInterval.Week:
+        return XAxisPrecision.EVERY_WEEK;
+      case AggregationInterval.Month:
+        return XAxisPrecision.EVERY_MONTH;
+      case AggregationInterval.Year:
+        return XAxisPrecision.EVERY_YEAR;
+      default:
+        return undefined;
+    }
+  }
+
   /*
    * A chart's x-axis label is not decoration — it IS the identity of its
    * bucket. DataPointUtil places a series row by finding the first row
@@ -110,7 +155,18 @@ export default class XAxisUtil {
   public static getPrecision(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): XAxisPrecision {
+    /*
+     * An explicit pin wins outright — see XAxisOptions.precision for why a
+     * caller that knows the bucket size must not have it re-guessed from the
+     * window duration. Checked before the Date guard so a pinned axis stays
+     * pinned regardless of how its bounds are expressed.
+     */
+    if (data.precision) {
+      return data.precision;
+    }
+
     if (
       typeof data.xAxisMax === "number" ||
       typeof data.xAxisMin === "number"
@@ -184,6 +240,7 @@ export default class XAxisUtil {
   public static getPrecisionIntervals(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): Array<Date> {
     const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
 
@@ -280,9 +337,169 @@ export default class XAxisUtil {
     return intervals;
   }
 
+  /*
+   * How much of the LAST slot's bucket has to lie inside the window before
+   * an empty slot is worth an axis position. Half.
+   *
+   * The bound has to sit somewhere between the two ends it separates, and
+   * both ends are real:
+   *
+   *  - Near zero coverage means the bucket is not in the window in any
+   *    meaningful sense. The alert snapshot that prompted this covered
+   *    243 MILLISECONDS of a 60-second bucket (its window ends at the
+   *    instant the alert was declared, which fell just past a minute
+   *    boundary); a window that ends exactly on a boundary covers none of
+   *    the next bucket at all. Those slots cannot carry data, and an
+   *    unfillable slot at the right-hand edge is the reported gap.
+   *  - Most-of-the-bucket coverage means an empty slot is INFORMATION.
+   *    "Last 7 days" ends mid-afternoon, so today's bucket is ~60% inside
+   *    the window; if a count chart has nothing in it, that empty final bar
+   *    says "nothing today", and dropping the tick would hide it.
+   *
+   * A half-covered bucket is the natural line between "barely touched" and
+   * "genuinely part of this window", and it keeps every rolling window
+   * anchored at `now` — where the in-progress bucket is on average half
+   * elapsed — on the safe side.
+   */
+  private static readonly MIN_TRAILING_BUCKET_COVERAGE: number = 0.5;
+
+  /*
+   * The intervals a chart should actually RENDER, which is the raw grid
+   * minus a trailing slot that no data could ever land in.
+   *
+   * getPrecisionIntervals walks inclusively to the window end, so the final
+   * slot is the start of whichever bucket CONTAINS that end. That bucket
+   * runs past the end of the window, so the query never covered all of it —
+   * and when the window ends at or just after a bucket boundary it covered
+   * essentially none of it. The backend returns rows only for buckets that
+   * had samples, so such a slot comes back empty every time; and because the
+   * recharts x-axis is categorical over exactly these slots, an empty one at
+   * the end is not a rounding detail — it stretches the axis a whole bucket
+   * past the last plotted point. On a 5-minute alert snapshot that is a
+   * fifth of the chart left blank.
+   *
+   * Only ever ONE slot is dropped, and only when BOTH hold:
+   *
+   *  - it carries no data, so a live in-progress bucket keeps rendering
+   *    (dropping populated trailing buckets would make every now-anchored
+   *    chart lag by a bucket — the opposite complaint), and
+   *  - the window covers less than half of it, so an empty bucket that the
+   *    window really does span stays on the axis.
+   *
+   * Dropping at most one is what keeps a genuine outage visible: a source
+   * that stopped reporting three buckets before the window end still leaves
+   * two blank slots on the axis, which is the truth. Callers with no series
+   * to check get the raw grid unchanged.
+   */
+  public static getRenderableIntervals(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
+    seriesPoints?: Array<SeriesPoints> | undefined;
+  }): Array<Date> {
+    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals(data);
+
+    if (!data.seriesPoints || intervals.length < 2) {
+      return intervals;
+    }
+
+    const lastInterval: Date = intervals[intervals.length - 1]!;
+    const previousInterval: Date = intervals[intervals.length - 2]!;
+
+    /*
+     * Bucket width read off the grid itself rather than recomputed from the
+     * precision: the walk steps in wall-clock time, so a month, a year or a
+     * daylight-saving day is exactly as wide as the grid says it is.
+     */
+    const bucketWidthInMs: number =
+      lastInterval.getTime() - previousInterval.getTime();
+    if (bucketWidthInMs <= 0) {
+      return intervals;
+    }
+
+    /*
+     * Emptiness — and the bucket boundary below — are decided with the SAME
+     * formatter that DataPointUtil uses to place a datapoint on a row.
+     * Anything else would let the two disagree about which bucket the last
+     * slot IS, and the whole point of trimming here rather than in
+     * DataPointUtil is that the rows, the categorical axis and the
+     * annotation indexes are built from one array.
+     */
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter(data);
+    const lastLabel: string = formatter(lastInterval);
+
+    /*
+     * A slot's DATE and the bucket it collects into are not the same thing.
+     * The walk starts at the window's own start, so on most charts the grid
+     * is anchored mid-bucket: a "last 7 days" axis stepping a day from
+     * 28 Aug 14:42 ends on a slot dated 4 Sep 14:42, which the formatter
+     * floors to the label "4 Sep" — the bucket [4 Sep 00:00, 5 Sep 00:00),
+     * of which the window covers nearly fifteen hours.
+     *
+     * Coverage can therefore only be measured off the slot's date when the
+     * slot IS its bucket's start, which is what this asks: a slot on a
+     * boundary has a different label one millisecond before it. When the
+     * grid is anchored mid-bucket the window necessarily spans everything
+     * from the bucket's real start up to the window end, which is most of
+     * it, so the slot stays — the conservative answer, and the one that
+     * keeps an empty "today" bar on a daily count chart.
+     *
+     * The alert snapshot is the aligned case (MetricView floors the window
+     * start onto the bucket grid), which is exactly when the slot date is
+     * the bucket start and the coverage measured below is the real one.
+     */
+    const isSlotOnBucketBoundary: boolean =
+      formatter(new Date(lastInterval.getTime() - 1)) !== lastLabel;
+    if (!isSlotOnBucketBoundary) {
+      return intervals;
+    }
+
+    const windowEndInMs: number =
+      typeof data.xAxisMax === "number"
+        ? data.xAxisMax
+        : OneUptimeDate.fromString(data.xAxisMax).getTime();
+    const coverage: number =
+      (windowEndInMs - lastInterval.getTime()) / bucketWidthInMs;
+    if (coverage >= XAxisUtil.MIN_TRAILING_BUCKET_COVERAGE) {
+      return intervals;
+    }
+
+    const slotLabels: Set<string> = new Set<string>(
+      intervals.map((interval: Date) => {
+        return formatter(interval);
+      }),
+    );
+
+    let hasAnyData: boolean = false;
+    for (const series of data.seriesPoints) {
+      for (const point of series.data) {
+        const label: string = formatter(point.x);
+        if (label === lastLabel) {
+          // The trailing bucket is populated — it stays.
+          return intervals;
+        }
+        if (!hasAnyData && slotLabels.has(label)) {
+          hasAnyData = true;
+        }
+      }
+    }
+
+    /*
+     * A chart with nothing on it anywhere keeps its full grid, so an empty
+     * chart still draws an axis spanning the window the user asked for
+     * instead of one silently a bucket short.
+     */
+    if (!hasAnyData) {
+      return intervals;
+    }
+
+    return intervals.slice(0, intervals.length - 1);
+  }
+
   public static getFormatter(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): (value: Date) => string {
     const precision: XAxisPrecision = XAxisUtil.getPrecision(data);