From e4882dd9496efa6ee960b12c7b0a814589b1e204 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 17:50:35 -0800
Subject: [PATCH 01/18] New HAnnotations chart primitive

---
 .../chart-primitives/h-annotations.hbs        | 17 ++++++++
 .../chart-primitives/h-annotations.js         | 40 +++++++++++++++++++
 .../chart-primitives/v-annotations.hbs        |  2 +-
 ui/app/styles/charts/chart-annotation.scss    | 30 +++++++++++++-
 4 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 ui/app/components/chart-primitives/h-annotations.hbs
 create mode 100644 ui/app/components/chart-primitives/h-annotations.js

diff --git a/ui/app/components/chart-primitives/h-annotations.hbs b/ui/app/components/chart-primitives/h-annotations.hbs
new file mode 100644
index 000000000..feefe542b
--- /dev/null
+++ b/ui/app/components/chart-primitives/h-annotations.hbs
@@ -0,0 +1,17 @@
+<div data-test-annotations class="line-chart-annotations" style={{this.chartAnnotationsStyle}} ...attributes>
+  {{#each this.processed key=@key as |annotation|}}
+    <div data-test-annotation class="chart-horizontal-annotation" style={{annotation.style}}>
+      <button
+        type="button"
+        title={{annotation.a11yLabel}}
+        class="indicator {{if (or
+          (and @key (eq-by @key annotation.annotation @activeAnnotation))
+          (and (not @key) (eq annotation.annotation @activeAnnotation))
+        ) "is-active"}}"
+        {{on "click" (fn this.selectAnnotation annotation.annotation)}}>
+        {{annotation.label}}
+      </button>
+      <div class="line" />
+    </div>
+  {{/each}}
+</div>
diff --git a/ui/app/components/chart-primitives/h-annotations.js b/ui/app/components/chart-primitives/h-annotations.js
new file mode 100644
index 000000000..293cb667e
--- /dev/null
+++ b/ui/app/components/chart-primitives/h-annotations.js
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { action } from '@ember/object';
+import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
+
+export default class ChartPrimitiveVAnnotations extends Component {
+  @styleString
+  get chartAnnotationsStyle() {
+    return {
+      width: this.args.width,
+      left: this.args.left,
+    };
+  }
+
+  get processed() {
+    const { scale, prop, annotations, format, labelProp } = this.args;
+
+    if (!annotations || !annotations.length) return null;
+
+    let sortedAnnotations = annotations.sortBy(prop).reverse();
+
+    return sortedAnnotations.map(annotation => {
+      const y = scale(annotation[prop]);
+      const x = 0;
+      const formattedY = format()(annotation[prop]);
+
+      return {
+        annotation,
+        style: htmlSafe(`transform:translate(${x}px,${y}px)`),
+        label: annotation[labelProp],
+        a11yLabel: `${annotation[labelProp]} at ${formattedY}`,
+      };
+    });
+  }
+
+  @action
+  selectAnnotation(annotation) {
+    if (this.args.annotationClick) this.args.annotationClick(annotation);
+  }
+}
diff --git a/ui/app/components/chart-primitives/v-annotations.hbs b/ui/app/components/chart-primitives/v-annotations.hbs
index f7b13a1d1..1a2a80399 100644
--- a/ui/app/components/chart-primitives/v-annotations.hbs
+++ b/ui/app/components/chart-primitives/v-annotations.hbs
@@ -1,6 +1,6 @@
 <div data-test-annotations class="line-chart-annotations" style={{this.chartAnnotationsStyle}} ...attributes>
   {{#each this.processed key=@key as |annotation|}}
-    <div data-test-annotation class="chart-annotation {{annotation.iconClass}} {{annotation.staggerClass}}" style={{annotation.style}}>
+    <div data-test-annotation class="chart-vertical-annotation {{annotation.iconClass}} {{annotation.staggerClass}}" style={{annotation.style}}>
       <button
         type="button"
         title={{annotation.label}}
diff --git a/ui/app/styles/charts/chart-annotation.scss b/ui/app/styles/charts/chart-annotation.scss
index 958027271..f88ecb283 100644
--- a/ui/app/styles/charts/chart-annotation.scss
+++ b/ui/app/styles/charts/chart-annotation.scss
@@ -1,4 +1,4 @@
-.chart-annotation {
+.chart-vertical-annotation {
   position: absolute;
   height: 100%;
 
@@ -53,3 +53,31 @@
     z-index: -1;
   }
 }
+
+.chart-horizontal-annotation {
+  position: absolute;
+  width: 100%;
+
+  .indicator {
+    transform: translateY(-50%);
+    display: block;
+    border: none;
+    border-radius: 100px;
+    background: $red;
+    color: $white;
+    font-weight: $weight-semibold;
+    font-size: $size-7;
+    margin-left: 10px;
+    pointer-events: auto;
+  }
+
+  .line {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 1px;
+    width: 100%;
+    background: $red;
+    z-index: -1;
+  }
+}

From 78942408cc12c1bf7868f591342e49a4abb1530b Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 17:50:59 -0800
Subject: [PATCH 02/18] Yield HAnnotations through LineChart

---
 ui/app/components/line-chart.js            | 8 +++++++-
 ui/app/templates/components/line-chart.hbs | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index ec8d88852..8a200416f 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -188,7 +188,7 @@ export default class LineChart extends Component {
       .axisRight()
       .scale(this.yScale)
       .tickValues(ticks)
-      .tickSize(-this.yAxisOffset)
+      .tickSize(-this.canvasDimensions.width)
       .tickFormat('');
   }
 
@@ -216,6 +216,12 @@ export default class LineChart extends Component {
     return Math.max(0, this.width - this.yAxisWidth);
   }
 
+  get canvasDimensions() {
+    const [left, right] = this.xScale.range();
+    const [top, bottom] = this.yScale.range();
+    return { left, width: right - left, top, height: bottom - top };
+  }
+
   @action
   onInsert(element) {
     this.element = element;
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 361baba3e..5c4843a3b 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -40,6 +40,12 @@
         scale=this.xScale
         prop=this.xProp
         height=this.xAxisOffset)
+      HAnnotations=(component "chart-primitives/h-annotations"
+        format=this.yFormat
+        scale=this.yScale
+        prop=this.yProp
+        left=this.canvasDimensions.left
+        width=this.canvasDimensions.width)
     ) to="after"}}
   {{/if}}
   <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>

From 1d62065c189ff6f55aac4e315b5a8499f11d5014 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 17:51:29 -0800
Subject: [PATCH 03/18] Document HAnnotations + LineChart with a story

---
 ui/stories/charts/line-chart.stories.js | 46 ++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index 4f1f9219f..0632c30cc 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -176,7 +176,7 @@ export let Gaps = () => {
   };
 };
 
-export let Annotations = () => {
+export let VerticalAnnotations = () => {
   return {
     template: hbs`
       <h5 class="title is-5">Line Chart data with annotations</h5>
@@ -278,6 +278,50 @@ export let Annotations = () => {
   };
 };
 
+export let HorizontalAnnotations = () => {
+  return {
+    template: hbs`
+      <div class="block" style="height:250px">
+        {{#if (and this.data this.annotations)}}
+          <LineChart
+            class="with-annotations"
+            @timeseries={{true}}
+            @xProp="x"
+            @yProp="y"
+            @data={{this.data}}>
+            <:svg as |c|>
+              <c.Area @data={{this.data}} @annotationClick={{action (mut this.activeAnnotation)}} />
+            </:svg>
+            <:after as |c|>
+              <c.HAnnotations @annotations={{this.annotations}} @labelProp="info" />
+            </:after>
+          </LineChart>
+        {{/if}}
+      </div>
+    `,
+    context: {
+      data: DelayedArray.create(
+        new Array(180).fill(null).map((_, idx) => ({
+          y: Math.sin((idx * 4 * Math.PI) / 180) * 100 + 200,
+          x: moment()
+            .add(idx, 'd')
+            .toDate(),
+        }))
+      ),
+      annotations: [
+        {
+          y: 300,
+          info: 'High',
+        },
+        {
+          y: 100,
+          info: 'Low',
+        },
+      ],
+    },
+  };
+};
+
 export let StepLine = () => {
   return {
     template: hbs`

From 9c67253e025413fcedbe85684cf674820be1e14f Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 19:30:55 -0800
Subject: [PATCH 04/18] Add chart color scales in scss

---
 ui/app/styles/charts/line-chart.scss      | 28 +++++++++++++++++++++++
 ui/app/styles/utils/structure-colors.scss | 14 ++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/ui/app/styles/charts/line-chart.scss b/ui/app/styles/charts/line-chart.scss
index 3f447c58a..798beba6c 100644
--- a/ui/app/styles/charts/line-chart.scss
+++ b/ui/app/styles/charts/line-chart.scss
@@ -1,3 +1,17 @@
+@mixin standard-gradient($class, $color) {
+  linearGradient.#{$class} {
+    > .start {
+      stop-color: $color;
+      stop-opacity: 0.6;
+    }
+
+    > .end {
+      stop-color: $color;
+      stop-opacity: 0.05;
+    }
+  }
+}
+
 .chart.line-chart {
   display: block;
   height: 100%;
@@ -82,4 +96,18 @@
       }
     }
   }
+
+  @each $name, $scale in $chart-scales {
+    @include standard-gradient($name, nth($scale, -1));
+    .area.#{$name} .line {
+      stroke: nth($scale, -1);
+    }
+
+    @each $color in $scale {
+      @include standard-gradient((#{$name}-#{index($scale, $color)}), $color);
+      .area.#{$name}-#{index($scale, $color)} .line {
+        stroke: $color;
+      }
+    }
+  }
 }
diff --git a/ui/app/styles/utils/structure-colors.scss b/ui/app/styles/utils/structure-colors.scss
index 270379ccc..a4b148e64 100644
--- a/ui/app/styles/utils/structure-colors.scss
+++ b/ui/app/styles/utils/structure-colors.scss
@@ -8,9 +8,15 @@ $ui-gray-800: #373a42;
 $ui-gray-900: #1f2124;
 
 $red-500: #c73445;
+$red-400: #d15866;
 $red-300: #db7d88;
 $red-200: #e5a2aa;
 
+$blue-500: #1563ff;
+$blue-400: #387aff;
+$blue-300: #5b92ff;
+$blue-200: #8ab1ff;
+
 $teal-500: #25ba81;
 $teal-300: #74d3ae;
 $teal-200: #9bdfc5;
@@ -25,3 +31,11 @@ $yellow-400: #face30;
 $yellow-700: #a07d02;
 
 $green-500: #2eb039;
+
+// Chart Color Scales
+$chart-reds: $red-500, $red-400, $red-300, $red-200;
+$chart-blues: $blue-500, $blue-400, $blue-300, $blue-200;
+$chart-scales: (
+  'reds': $chart-reds,
+  'blues': $chart-blues,
+);

From b6a0fe6a0f98d2cd435d68dc952f6747a7c1c5e6 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 19:32:28 -0800
Subject: [PATCH 05/18] Support multi-dimensional data in LineChart

When a @dataProp is provided, the LineChart component assumes data is an
array of data series. It will map by the data prop and flatten to
compute the domains of the data.
---
 ui/app/components/line-chart.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index 8a200416f..bd58d5a1c 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -82,7 +82,11 @@ export default class LineChart extends Component {
     return this.args.yProp || 'value';
   }
   get data() {
-    return this.args.data || [];
+    if (!this.args.data) return [];
+    if (this.args.dataProp) {
+      return this.args.data.mapBy(this.args.dataProp).flat();
+    }
+    return this.args.data;
   }
   get curve() {
     return this.args.curve || 'linear';

From a2b2ba816adeee034d611048ecb0b03adcf3ea5a Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 19:34:05 -0800
Subject: [PATCH 06/18] Don't deal with color classes at all in LineChart

Expect this to be set on the visual yielded components directly
---
 ui/app/components/chart-primitives/area.js |  5 ++++-
 ui/app/templates/components/line-chart.hbs |  1 -
 ui/stories/charts/line-chart.stories.js    | 15 +++++++--------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/app/components/chart-primitives/area.js b/ui/app/components/chart-primitives/area.js
index 07d02de1e..c8e033ae6 100644
--- a/ui/app/components/chart-primitives/area.js
+++ b/ui/app/components/chart-primitives/area.js
@@ -5,7 +5,10 @@ import uniquely from 'nomad-ui/utils/properties/uniquely';
 
 export default class ChartPrimitiveArea extends Component {
   get colorClass() {
-    return this.args.colorClass || `${this.args.colorScale}-${this.args.index}`;
+    if (this.args.colorClass) return this.args.colorClass;
+    if (this.args.colorScale && this.args.index != null)
+      return `${this.args.colorScale} ${this.args.colorScale}-${this.args.index + 1}`;
+    return 'is-primary';
   }
 
   @uniquely('area-mask') maskId;
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 5c4843a3b..1ec523bbf 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -18,7 +18,6 @@
     {{#if this.ready}}
       {{yield (hash
         Area=(component "chart-primitives/area"
-          colorClass=this.chartClass
           curve="linear"
           xScale=this.xScale
           yScale=this.yScale
diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index 0632c30cc..be79e4fcf 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -49,9 +49,9 @@ export let Standard = () => {
       </div>
       <div class="block" style="height:100px; width: 400px;">
         {{#if this.lineChartMild}}
-          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-info">
+          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartMild}} />
+              <c.Area @data={{this.lineChartMild}} @colorClass="is-info" />
             </:svg>
           </LineChart>
         {{/if}}
@@ -70,18 +70,18 @@ export let FluidWidth = () => {
       <h5 class="title is-5">Fluid-width Line Chart</h5>
       <div class="block" style="height:250px;">
         {{#if this.lineChartData}}
-          <LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value" @chartClass="is-danger">
+          <LineChart @data={{this.lineChartData}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartData}} />
+              <c.Area @data={{this.lineChartData}} @colorClass="is-danger" />
             </:svg>
           </LineChart>
         {{/if}}
       </div>
       <div class="block" style="height:250px;">
         {{#if this.lineChartMild}}
-          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-warning">
+          <LineChart @data={{this.lineChartMild}} @xProp="year" @yProp="value">
             <:svg as |c|>
-              <c.Area @data={{this.lineChartMild}} />
+              <c.Area @data={{this.lineChartMild}} @colorClass="is-warning" />
             </:svg>
           </LineChart>
         {{/if}}
@@ -106,7 +106,6 @@ export let LiveData = () => {
             @xProp="ts"
             @yProp="val"
             @timeseries={{true}}
-            @chartClass="is-primary"
             @xFormat={{this.controller.secondsFormat}}>
             <:svg as |c|>
               <c.Area @data={{this.controller.lineChartLive}} />
@@ -152,7 +151,7 @@ export let Gaps = () => {
       <h5 class="title is-5">Line Chart data with gaps</h5>
       <div class="block" style="height:250px">
         {{#if this.lineChartGapData}}
-          <LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value" @chartClass="is-primary">
+          <LineChart @data={{this.lineChartGapData}} @xProp="year" @yProp="value">
             <:svg as |c|>
               <c.Area @data={{this.lineChartGapData}} />
             </:svg>

From 8e586a932bb91aea89ae0850e636e495cc2c2e88 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 25 Feb 2021 19:35:00 -0800
Subject: [PATCH 07/18] New Multi Line LineChart story

---
 ui/stories/charts/line-chart.stories.js | 50 +++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index be79e4fcf..fa2c95aaa 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -354,3 +354,53 @@ export let StepLine = () => {
     },
   };
 };
+
+export let MultiLine = () => ({
+  template: hbs`
+      <h5 class="title is-5">Multiple Lines on One Chart</h5>
+      <div class="block" style="height:250px">
+        {{#if this.data}}
+          <LineChart
+            @xProp="x"
+            @yProp="y"
+            @dataProp="data"
+            @data={{this.data}}>
+            <:svg as |c|>
+              {{#each this.data as |series idx|}}
+                <c.Area @data={{series.data}} @colorScale="reds" @index={{idx}} />
+              {{/each}}
+            </:svg>
+          </LineChart>
+          <p>{{this.activeAnnotation.info}}</p>
+        {{/if}}
+      </div>
+  `,
+  context: {
+    data: DelayedArray.create([
+      {
+        name: 'Series 1',
+        data: [
+          { x: 1, y: 5 },
+          { x: 2, y: 1 },
+          { x: 3, y: 2 },
+          { x: 4, y: 2 },
+          { x: 5, y: 9 },
+          { x: 6, y: 3 },
+          { x: 7, y: 4 },
+        ],
+      },
+      {
+        name: 'Series 2',
+        data: [
+          { x: 3, y: 7 },
+          { x: 4, y: 5 },
+          { x: 5, y: 8 },
+          { x: 6, y: 9 },
+          { x: 7, y: 10 },
+          { x: 8, y: 8 },
+          { x: 9, y: 6 },
+        ],
+      },
+    ]),
+  },
+});

From c209cb86f24b106304294441234e42664f3862af Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 10:28:54 -0800
Subject: [PATCH 08/18] Use chart scales to generate tooltip swatch options

---
 ui/app/styles/charts/colors.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/app/styles/charts/colors.scss b/ui/app/styles/charts/colors.scss
index dce0a3ddf..50f370607 100644
--- a/ui/app/styles/charts/colors.scss
+++ b/ui/app/styles/charts/colors.scss
@@ -58,6 +58,18 @@ $lost: $dark;
     }
   }
 
+  @each $name, $scale in $chart-scales {
+    &.swatch-#{$name} {
+      background: nth($scale, -1);
+    }
+
+    @each $color in $scale {
+      &.swatch-#{$name}-#{index($scale, $color)} {
+        background: $color;
+      }
+    }
+  }
+
   &.queued {
     box-shadow: inset 0 0 0 1px rgba($black, 0.3);
     background: $queued;

From 57da27c148cfcbbef6785fa578d59a2b6b8b67c8 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 10:31:48 -0800
Subject: [PATCH 09/18] Factor the tooltip out of line-chart and into a
 primitive

---
 .../components/chart-primitives/tooltip.hbs   |  7 ++
 ui/app/components/line-chart.js               | 73 +++++++++++++------
 ui/app/templates/components/line-chart.hbs    | 24 +++---
 ui/stories/charts/line-chart.stories.js       | 32 +++++---
 4 files changed, 93 insertions(+), 43 deletions(-)
 create mode 100644 ui/app/components/chart-primitives/tooltip.hbs

diff --git a/ui/app/components/chart-primitives/tooltip.hbs b/ui/app/components/chart-primitives/tooltip.hbs
new file mode 100644
index 000000000..172735192
--- /dev/null
+++ b/ui/app/components/chart-primitives/tooltip.hbs
@@ -0,0 +1,7 @@
+<div class="chart-tooltip {{if @active "active" "inactive"}}" style={{@style}} ...attributes>
+  <ol>
+    {{#each @data as |props|}}
+      {{yield props.series  props.datum (inc props.index)}}
+    {{/each}}
+  </ol>
+</div>
diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index bd58d5a1c..21271bc7e 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -68,6 +68,7 @@ export default class LineChart extends Component {
   @tracked height = 0;
   @tracked isActive = false;
   @tracked activeDatum = null;
+  @tracked activeData = [];
   @tracked tooltipPosition = null;
   @tracked element = null;
   @tracked ready = false;
@@ -251,37 +252,65 @@ export default class LineChart extends Component {
     canvas.on('mouseleave', () => {
       run.schedule('afterRender', this, () => (this.isActive = false));
       this.activeDatum = null;
+      this.activeData = [];
     });
   }
 
   updateActiveDatum(mouseX) {
-    const { xScale, xProp, yScale, yProp, data } = this;
+    if (!this.data || !this.data.length) return;
 
-    if (!data || !data.length) return;
+    const { xScale, xProp, yScale, yProp } = this;
+    let { dataProp, data } = this.args;
 
-    // Map the mouse coordinate to the index in the data array
-    const bisector = d3Array.bisector(d => d[xProp]).left;
-    const x = xScale.invert(mouseX);
-    const index = bisector(data, x, 1);
-
-    // The data point on either side of the cursor
-    const dLeft = data[index - 1];
-    const dRight = data[index];
-
-    let datum;
-
-    // If there is only one point, it's the activeDatum
-    if (dLeft && !dRight) {
-      datum = dLeft;
-    } else {
-      // Pick the closer point
-      datum = x - dLeft[xProp] > dRight[xProp] - x ? dRight : dLeft;
+    if (!dataProp) {
+      dataProp = 'data';
+      data = [{ data: this.data }];
     }
 
-    this.activeDatum = datum;
+    // Map screen coordinates to data domain
+    const bisector = d3Array.bisector(d => d[xProp]).left;
+    const x = xScale.invert(mouseX);
+
+    // Find the closest datum to the cursor for each series
+    const activeData = data.map((series, seriesIndex) => {
+      const dataset = series[dataProp];
+      const index = bisector(dataset, x, 1);
+
+      // The data point on either side of the cursor
+      const dLeft = dataset[index - 1];
+      const dRight = dataset[index];
+
+      let datum;
+
+      // If there is only one point, it's the activeDatum
+      if (dLeft && !dRight) {
+        datum = dLeft;
+      } else {
+        // Pick the closer point
+        datum = x - dLeft[xProp] > dRight[xProp] - x ? dRight : dLeft;
+      }
+
+      // TODO: Preformat numbers
+      return { series, datum, index: seriesIndex };
+    });
+
+    // Of the selected data, determine which is closest
+    const closestDatum = activeData.sort(
+      (a, b) => Math.abs(a.datum[xProp] - x) - Math.abs(b.datum[xProp] - x)
+    )[0];
+
+    // If any other selected data are beyond a distance threshold, drop them from the list
+    // xScale is used here to measure distance in screen-space rather than data-space.
+    const dist = Math.abs(xScale(closestDatum.datum[xProp]) - mouseX);
+    const filteredData = activeData.filter(
+      d => Math.abs(xScale(d.datum[xProp]) - mouseX) < dist + 10
+    );
+
+    this.activeData = filteredData;
+    this.activeDatum = closestDatum.datum;
     this.tooltipPosition = {
-      left: xScale(datum[xProp]),
-      top: yScale(datum[yProp]) - 10,
+      left: xScale(this.activeDatum[xProp]),
+      top: yScale(this.activeDatum[yProp]) - 10,
     };
   }
 
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 1ec523bbf..37d8619f0 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -45,15 +45,21 @@
         prop=this.yProp
         left=this.canvasDimensions.left
         width=this.canvasDimensions.width)
+      Tooltip=(component "chart-primitives/tooltip"
+        active=this.activeData.length
+        style=this.tooltipStyle
+        data=this.activeData)
     ) to="after"}}
   {{/if}}
-  <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
-    <p>
-      <span class="label">
-        <span class="color-swatch {{this.chartClass}}" />
-        {{this.activeDatumLabel}}
-      </span>
-      <span class="value">{{this.activeDatumValue}}</span>
-    </p>
-  </div>
+  {{#unless @dataProp}}
+    <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
+      <p>
+        <span class="label">
+          <span class="color-swatch {{this.chartClass}}" />
+          {{this.activeDatumLabel}}
+        </span>
+        <span class="value">{{this.activeDatumValue}}</span>
+      </p>
+    </div>
+  {{/unless}}
 </div>
diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index fa2c95aaa..32e6a1bef 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -370,6 +370,14 @@ export let MultiLine = () => ({
                 <c.Area @data={{series.data}} @colorScale="reds" @index={{idx}} />
               {{/each}}
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum index|>
+                <li>
+                  <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
+                  <span class="value">{{datum.y}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
           <p>{{this.activeAnnotation.info}}</p>
         {{/if}}
@@ -379,18 +387,6 @@ export let MultiLine = () => ({
     data: DelayedArray.create([
       {
         name: 'Series 1',
-        data: [
-          { x: 1, y: 5 },
-          { x: 2, y: 1 },
-          { x: 3, y: 2 },
-          { x: 4, y: 2 },
-          { x: 5, y: 9 },
-          { x: 6, y: 3 },
-          { x: 7, y: 4 },
-        ],
-      },
-      {
-        name: 'Series 2',
         data: [
           { x: 3, y: 7 },
           { x: 4, y: 5 },
@@ -401,6 +397,18 @@ export let MultiLine = () => ({
           { x: 9, y: 6 },
         ],
       },
+      {
+        name: 'Series 2',
+        data: [
+          { x: 1, y: 5 },
+          { x: 2, y: 1 },
+          { x: 3, y: 2 },
+          { x: 4, y: 2 },
+          { x: 5, y: 9 },
+          { x: 6, y: 3 },
+          { x: 7, y: 4 },
+        ],
+      },
     ]),
   },
 });

From f7358ed17e63dcdfb98ec273fa4716e3be0ab4e8 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 12:39:02 -0800
Subject: [PATCH 10/18] New storybook CSS helpers (hover region, multiples
 variations)

---
 ui/app/styles/storybook.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/ui/app/styles/storybook.scss b/ui/app/styles/storybook.scss
index 4362e8fd2..e14d7c167 100644
--- a/ui/app/styles/storybook.scss
+++ b/ui/app/styles/storybook.scss
@@ -122,6 +122,17 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
+
+    &.with-spacing {
+      > * {
+        margin-right: 1em;
+        margin-bottom: 1em;
+      }
+    }
+
+    &.is-left-aligned {
+      justify-content: flex-start;
+    }
   }
 
   .chart-container {
@@ -162,4 +173,17 @@
       }
     }
   }
+
+  .mock-hover-region {
+    width: 200px;
+    height: 100px;
+    position: relative;
+    border-radius: $radius;
+    margin: 1em 0;
+    padding: 1em;
+    border: 1px solid $grey-blue;
+    background: $white-ter;
+    color: $grey;
+    font-weight: $weight-bold;
+  }
 }

From 2ba041f8018113588de8958178a3b08e450effe3 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 12:40:38 -0800
Subject: [PATCH 11/18] Unify the distribution bar tooltip and the line chart
 tooltip styles/patterns

---
 ui/app/styles/charts/tooltip.scss               | 17 ++++++++---------
 .../templates/components/distribution-bar.hbs   |  4 ++--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/app/styles/charts/tooltip.scss b/ui/app/styles/charts/tooltip.scss
index 82f74958b..81a727b18 100644
--- a/ui/app/styles/charts/tooltip.scss
+++ b/ui/app/styles/charts/tooltip.scss
@@ -67,8 +67,7 @@
     }
   }
 
-  ol > li,
-  p {
+  ol > li {
     display: flex;
     flex-flow: row;
     flex-wrap: nowrap;
@@ -93,14 +92,18 @@
     .value {
       padding-left: 1em;
     }
+
+    + li {
+      border-top: 1px solid $grey-light;
+    }
   }
 
-  ol > li {
-    .label {
+  &.with-active-datum {
+    li .label {
       color: rgba($black, 0.6);
     }
 
-    &.active {
+    li.is-active {
       color: $black;
       background: $white-ter;
 
@@ -108,9 +111,5 @@
         color: $black;
       }
     }
-
-    + li {
-      border-top: 1px solid $grey-light;
-    }
   }
 }
diff --git a/ui/app/templates/components/distribution-bar.hbs b/ui/app/templates/components/distribution-bar.hbs
index 5b366a0ef..9f42b9c7c 100644
--- a/ui/app/templates/components/distribution-bar.hbs
+++ b/ui/app/templates/components/distribution-bar.hbs
@@ -12,10 +12,10 @@
     activeDatum=this.activeDatum
   )}}
 {{else}}
-  <div class="chart-tooltip {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
+  <div class="chart-tooltip with-active-datum {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
     <ol>
       {{#each this._data as |datum index|}}
-        <li class="{{if (eq datum.label this.activeDatum.label) "active"}}">
+        <li class="{{if (eq datum.label this.activeDatum.label) "is-active"}}">
           <span class="label {{if (eq datum.value 0) "is-empty"}}">
             <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
             {{datum.label}}

From 659090bf81501e5d0f7aab195e87f2ff101c04ee Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 12:41:11 -0800
Subject: [PATCH 12/18] Bring the ordinal color sequence from chart-colors to
 the new color-scales construct

This also required re-ordering the SCSS imports since this depends on
colors introduced by bulma.
---
 ui/app/styles/core.scss                   | 3 ++-
 ui/app/styles/utils/structure-colors.scss | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index db9fdb95d..786e83e1c 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -2,7 +2,6 @@
 @import './utils/reset.scss';
 @import './utils/z-indices';
 @import './utils/product-colors';
-@import './utils/structure-colors';
 @import './utils/bumper';
 @import './utils/layout';
 
@@ -15,6 +14,8 @@
 // Bring in the rest of Bulma
 @import 'bulma/bulma';
 
+@import './utils/structure-colors';
+
 // Override Bulma details where appropriate
 @import './core/buttons';
 @import './core/breadcrumb';
diff --git a/ui/app/styles/utils/structure-colors.scss b/ui/app/styles/utils/structure-colors.scss
index a4b148e64..b62158fa7 100644
--- a/ui/app/styles/utils/structure-colors.scss
+++ b/ui/app/styles/utils/structure-colors.scss
@@ -35,7 +35,9 @@ $green-500: #2eb039;
 // Chart Color Scales
 $chart-reds: $red-500, $red-400, $red-300, $red-200;
 $chart-blues: $blue-500, $blue-400, $blue-300, $blue-200;
+$chart-ordinal: $orange, $yellow, $green, $turquoise, $blue, $purple, $red;
 $chart-scales: (
   'reds': $chart-reds,
   'blues': $chart-blues,
+  'ordinal': $chart-ordinal,
 );

From 6de9e4f0897b06e8e33280859e1852ff9da4de05 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 12:41:58 -0800
Subject: [PATCH 13/18] Document all the tooltip variations

Under a new Charts/Primitives section in Storybook
---
 ui/app/templates/components/line-chart.hbs | 16 ++---
 ui/stories/charts/primitives.stories.js    | 68 ++++++++++++++++++++++
 2 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 ui/stories/charts/primitives.stories.js

diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index 37d8619f0..b68ad7c24 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -53,13 +53,15 @@
   {{/if}}
   {{#unless @dataProp}}
     <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
-      <p>
-        <span class="label">
-          <span class="color-swatch {{this.chartClass}}" />
-          {{this.activeDatumLabel}}
-        </span>
-        <span class="value">{{this.activeDatumValue}}</span>
-      </p>
+      <ol>
+        <li>
+          <span class="label">
+            <span class="color-swatch {{this.chartClass}}" />
+            {{this.activeDatumLabel}}
+          </span>
+          <span class="value">{{this.activeDatumValue}}</span>
+        </li>
+      </ol>
     </div>
   {{/unless}}
 </div>
diff --git a/ui/stories/charts/primitives.stories.js b/ui/stories/charts/primitives.stories.js
new file mode 100644
index 000000000..ef05d8468
--- /dev/null
+++ b/ui/stories/charts/primitives.stories.js
@@ -0,0 +1,68 @@
+import hbs from 'htmlbars-inline-precompile';
+
+export default {
+  title: 'Charts|Primitives',
+};
+
+export let Tooltip = () => ({
+  template: hbs`
+    <h5 class="title is-5">Single Entry</h5>
+    <div class="mock-hover-region" style="width:300px;height:100px">
+      <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{this.dataSingle}} as |series|>
+        <li>
+          <span class="label"><span class="color-swatch swatch-reds" />{{series.name}}</span>
+          <span class="value">{{series.value}}</span>
+        </li>
+      </ChartPrimitives::Tooltip>
+    </div>
+
+    <h5 class="title is-5">Multiple Entries</h5>
+    <div class="mock-hover-region" style="width:300px;height:100px">
+      <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{take 4 this.dataMultiple}} as |series datum index|>
+        <li>
+          <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
+          <span class="value">{{datum.value}}</span>
+        </li>
+      </ChartPrimitives::Tooltip>
+    </div>
+
+    <h5 class="title is-5">Active Entry</h5>
+    <div class="mock-hover-region" style="width:300px;height:100px">
+      <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{take 4 this.dataMultiple}} class="with-active-datum" as |series datum index|>
+        <li class="{{if (eq series.name "Three") "is-active"}}">
+          <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
+          <span class="value">{{datum.value}}</span>
+        </li>
+      </ChartPrimitives::Tooltip>
+    </div>
+
+    <h5 class="title is-5">Color Scales</h5>
+    <div class="multiples is-left-aligned with-spacing">
+      {{#each this.scales as |scale|}}
+        <div class="mock-hover-region" style="width:300px;height:200px">
+          {{scale}}
+          <ChartPrimitives::Tooltip @active={{true}} @style="left:70%;top:75%" @data={{this.dataMultiple}} as |series datum index|>
+            <li>
+              <span class="label"><span class="color-swatch swatch-{{scale}} swatch-{{scale}}-{{index}}" />{{series.name}}</span>
+              <span class="value">{{datum.value}}</span>
+            </li>
+          </ChartPrimitives::Tooltip>
+        </div>
+      {{/each}}
+    </div>
+  `,
+  context: {
+    style: 'left:70%;top:50%;',
+    dataSingle: [{ series: { name: 'Example', value: 12 } }],
+    dataMultiple: [
+      { series: { name: 'One' }, datum: { value: 12 }, index: 0 },
+      { series: { name: 'Two' }, datum: { value: 24 }, index: 1 },
+      { series: { name: 'Three' }, datum: { value: 36 }, index: 2 },
+      { series: { name: 'Four' }, datum: { value: 48 }, index: 3 },
+      { series: { name: 'Five' }, datum: { value: 60 }, index: 4 },
+      { series: { name: 'Six' }, datum: { value: 72 }, index: 5 },
+      { series: { name: 'Seven' }, datum: { value: 84 }, index: 6 },
+    ],
+    scales: ['reds', 'blues', 'ordinal'],
+  },
+});

From 2eff475be6db2807b94739aec09532d5e2d5c3a2 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 15:40:24 -0800
Subject: [PATCH 14/18] Pre format x and y values for the yielded tooltip
 component in line chart

---
 ui/app/components/line-chart.js         | 19 +++++++++++++------
 ui/stories/charts/line-chart.stories.js |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index 21271bc7e..5637e50c4 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -290,24 +290,31 @@ export default class LineChart extends Component {
         datum = x - dLeft[xProp] > dRight[xProp] - x ? dRight : dLeft;
       }
 
-      // TODO: Preformat numbers
-      return { series, datum, index: seriesIndex };
+      return {
+        series,
+        datum: {
+          formattedX: this.xFormat()(datum[xProp]),
+          formattedY: this.yFormat()(datum[yProp]),
+          datum,
+        },
+        index: seriesIndex,
+      };
     });
 
     // Of the selected data, determine which is closest
     const closestDatum = activeData.sort(
-      (a, b) => Math.abs(a.datum[xProp] - x) - Math.abs(b.datum[xProp] - x)
+      (a, b) => Math.abs(a.datum.datum[xProp] - x) - Math.abs(b.datum.datum[xProp] - x)
     )[0];
 
     // If any other selected data are beyond a distance threshold, drop them from the list
     // xScale is used here to measure distance in screen-space rather than data-space.
-    const dist = Math.abs(xScale(closestDatum.datum[xProp]) - mouseX);
+    const dist = Math.abs(xScale(closestDatum.datum.datum[xProp]) - mouseX);
     const filteredData = activeData.filter(
-      d => Math.abs(xScale(d.datum[xProp]) - mouseX) < dist + 10
+      d => Math.abs(xScale(d.datum.datum[xProp]) - mouseX) < dist + 10
     );
 
     this.activeData = filteredData;
-    this.activeDatum = closestDatum.datum;
+    this.activeDatum = closestDatum.datum.datum;
     this.tooltipPosition = {
       left: xScale(this.activeDatum[xProp]),
       top: yScale(this.activeDatum[yProp]) - 10,
diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index 32e6a1bef..638591ced 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -374,7 +374,7 @@ export let MultiLine = () => ({
               <c.Tooltip class="is-snappy" as |series datum index|>
                 <li>
                   <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
-                  <span class="value">{{datum.y}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
                 </li>
               </c.Tooltip>
             </:after>

From db1a1286595c854b05d402bfb1f07516f30706ea Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 20:22:01 -0800
Subject: [PATCH 15/18] Integration test coverage for horizontal annotations
 and tooltips

---
 .../components/chart-primitives/tooltip.hbs   |   2 +-
 ui/app/templates/components/line-chart.hbs    |   2 +-
 .../integration/components/line-chart-test.js | 116 +++++++++++++++++-
 3 files changed, 117 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/chart-primitives/tooltip.hbs b/ui/app/components/chart-primitives/tooltip.hbs
index 172735192..e1718c27d 100644
--- a/ui/app/components/chart-primitives/tooltip.hbs
+++ b/ui/app/components/chart-primitives/tooltip.hbs
@@ -1,4 +1,4 @@
-<div class="chart-tooltip {{if @active "active" "inactive"}}" style={{@style}} ...attributes>
+<div data-test-chart-tooltip class="chart-tooltip {{if @active "active" "inactive"}}" style={{@style}} ...attributes>
   <ol>
     {{#each @data as |props|}}
       {{yield props.series  props.datum (inc props.index)}}
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index b68ad7c24..c97e2a986 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -29,7 +29,7 @@
     {{/if}}
     <g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g>
     <g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g>
-    <rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
+    <rect data-test-hover-target class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
   </svg>
   {{#if this.ready}}
     {{yield (hash
diff --git a/ui/tests/integration/components/line-chart-test.js b/ui/tests/integration/components/line-chart-test.js
index fb74f07c6..16d9fa77e 100644
--- a/ui/tests/integration/components/line-chart-test.js
+++ b/ui/tests/integration/components/line-chart-test.js
@@ -1,4 +1,4 @@
-import { findAll, click, render } from '@ember/test-helpers';
+import { find, findAll, click, render, triggerEvent } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
@@ -160,4 +160,118 @@ module('Integration | Component | line-chart', function(hooks) {
 
     await componentA11yAudit(this.element, assert);
   });
+
+  test('horizontal annotations render in order', async function(assert) {
+    const annotations = [
+      { y: 2, label: 'label one' },
+      { y: 9, label: 'label three' },
+      { y: 2.4, label: 'label two' },
+    ];
+    this.setProperties({
+      annotations,
+      data: [
+        { x: 1, y: 1 },
+        { x: 10, y: 10 },
+      ],
+    });
+
+    await render(hbs`
+      <LineChart
+        @xProp="x"
+        @yProp="y"
+        @data={{this.data}}>
+        <:after as |c|>
+          <c.HAnnotations @annotations={{this.annotations}} @labelProp="label" />
+        </:after>
+      </LineChart>
+    `);
+
+    const annotationEls = findAll('[data-test-annotation]');
+    annotations
+      .sortBy('y')
+      .reverse()
+      .forEach((annotation, index) => {
+        assert.equal(annotationEls[index].textContent.trim(), annotation.label);
+      });
+  });
+
+  test('the tooltip includes information on the data closest to the mouse', async function(assert) {
+    const series1 = [
+      { x: 1, y: 2 },
+      { x: 3, y: 3 },
+      { x: 5, y: 4 },
+    ];
+    const series2 = [
+      { x: 2, y: 10 },
+      { x: 4, y: 9 },
+      { x: 6, y: 8 },
+    ];
+    this.setProperties({
+      data: [
+        { series: 'One', data: series1 },
+        { series: 'Two', data: series2 },
+      ],
+    });
+
+    await render(hbs`
+      <div style="width:500px;margin-top:100px">
+        <LineChart
+          @xProp="x"
+          @yProp="y"
+          @dataProp="data"
+          @data={{this.data}}>
+          <:svg as |c|>
+            {{#each this.data as |series idx|}}
+              <c.Area @data={{series.data}} @colorScale="blues" @index={{idx}} />
+            {{/each}}
+          </:svg>
+          <:after as |c|>
+            <c.Tooltip as |series datum index|>
+              <li>
+                <span class="label"><span class="color-swatch swatch-blues swatch-blues-{{index}}" />{{series.series}}</span>
+                <span class="value">{{datum.formattedY}}</span>
+              </li>
+            </c.Tooltip>
+          </:after>
+        </LineChart>
+      </div>
+    `);
+
+    // All tooltip events are attached to the hover target
+    const hoverTarget = find('[data-test-hover-target]');
+
+    // Mouse to data mapping happens based on the clientX of the MouseEvent
+    const bbox = hoverTarget.getBoundingClientRect();
+    // The MouseEvent needs to be translated based on the location of the hover target
+    const xOffset = bbox.x;
+    // An interval here is the width between x values given the fixed dimensions of the line chart
+    // and the domain of the data
+    const interval = bbox.width / 5;
+
+    // MouseEnter triggers the tooltip visibility
+    await triggerEvent(hoverTarget, 'mouseenter');
+    // MouseMove positions the tooltip and updates the active datum
+    await triggerEvent(hoverTarget, 'mousemove', { clientX: xOffset + interval * 1 + 5 });
+    assert.equal(findAll('[data-test-chart-tooltip] li').length, 1);
+    assert.equal(find('[data-test-chart-tooltip] .label').textContent.trim(), this.data[1].series);
+    assert.equal(
+      find('[data-test-chart-tooltip] .value').textContent.trim(),
+      series2.find(d => d.x === 2).y
+    );
+
+    // When the mouse falls between points and each series has points with different x values,
+    // points will only be shown in the tooltip if they are close enough to the closest point
+    // to the cursor.
+    // This event is intentionally between points such that both points are within proximity.
+    const expected = [
+      { label: this.data[0].series, value: series1.find(d => d.x === 3).y },
+      { label: this.data[1].series, value: series2.find(d => d.x === 2).y },
+    ];
+    await triggerEvent(hoverTarget, 'mousemove', { clientX: xOffset + interval * 1.5 + 5 });
+    assert.equal(findAll('[data-test-chart-tooltip] li').length, 2);
+    findAll('[data-test-chart-tooltip] li').forEach((tooltipEntry, index) => {
+      assert.equal(tooltipEntry.querySelector('.label').textContent.trim(), expected[index].label);
+      assert.equal(tooltipEntry.querySelector('.value').textContent.trim(), expected[index].value);
+    });
+  });
 });

From 8a9d2abc4d741e42c0ab4b9282d29db6a6f8d08e Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 21:01:57 -0800
Subject: [PATCH 16/18] No longer include an automatic tooltip in LineChart

It is now required to use the one yielded by the :after named block.
---
 ui/app/components/line-chart.js                    |  2 +-
 ui/app/templates/components/line-chart.hbs         | 13 -------------
 ui/app/templates/components/scale-events-chart.hbs |  6 ++++++
 ui/app/templates/components/stats-time-series.hbs  |  8 ++++++++
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/ui/app/components/line-chart.js b/ui/app/components/line-chart.js
index 5637e50c4..995df3f81 100644
--- a/ui/app/components/line-chart.js
+++ b/ui/app/components/line-chart.js
@@ -293,7 +293,7 @@ export default class LineChart extends Component {
       return {
         series,
         datum: {
-          formattedX: this.xFormat()(datum[xProp]),
+          formattedX: this.xFormat(this.args.timeseries)(datum[xProp]),
           formattedY: this.yFormat()(datum[yProp]),
           datum,
         },
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index c97e2a986..7927fe2c6 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -51,17 +51,4 @@
         data=this.activeData)
     ) to="after"}}
   {{/if}}
-  {{#unless @dataProp}}
-    <div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
-      <ol>
-        <li>
-          <span class="label">
-            <span class="color-swatch {{this.chartClass}}" />
-            {{this.activeDatumLabel}}
-          </span>
-          <span class="value">{{this.activeDatumValue}}</span>
-        </li>
-      </ol>
-    </div>
-  {{/unless}}
 </div>
diff --git a/ui/app/templates/components/scale-events-chart.hbs b/ui/app/templates/components/scale-events-chart.hbs
index 7a60a1803..20d188d52 100644
--- a/ui/app/templates/components/scale-events-chart.hbs
+++ b/ui/app/templates/components/scale-events-chart.hbs
@@ -9,6 +9,12 @@
       @data={{this.data}} />
   </:svg>
   <:after as |c|>
+    <c.Tooltip class="is-snappy" as |series datum|>
+      <li>
+        <span class="label"><span class="color-swatch is-primary" />{{datum.formattedX}}</span>
+        <span class="value">{{datum.formattedY}}</span>
+      </li>
+    </c.Tooltip>
     <c.VAnnotations
       @annotations={{this.annotations}}
       @key="event.uid"
diff --git a/ui/app/templates/components/stats-time-series.hbs b/ui/app/templates/components/stats-time-series.hbs
index 461efc3d8..c9fd15cfd 100644
--- a/ui/app/templates/components/stats-time-series.hbs
+++ b/ui/app/templates/components/stats-time-series.hbs
@@ -13,4 +13,12 @@
   <:svg as |c|>
     <c.Area @data={{@data}} @colorClass={{@chartClass}} />
   </:svg>
+  <:after as |c|>
+    <c.Tooltip class="is-snappy" as |series datum|>
+      <li>
+        <span class="label"><span class="color-swatch {{@chartClass}}" />{{datum.formattedX}}</span>
+        <span class="value">{{datum.formattedY}}</span>
+      </li>
+    </c.Tooltip>
+  </:after>
 </LineChart>

From 945ad592a51e90202a4dc7521c99e23e37158218 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 8 Mar 2021 21:02:40 -0800
Subject: [PATCH 17/18] Update LineChart stories to use new tooltip pattern

Some charts intentionally don't yield a tooltip to show the possibility.
---
 ui/stories/charts/line-chart.stories.js | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
index 638591ced..d4ca1792f 100644
--- a/ui/stories/charts/line-chart.stories.js
+++ b/ui/stories/charts/line-chart.stories.js
@@ -44,6 +44,14 @@ export let Standard = () => {
             <:svg as |c|>
               <c.Area @data={{this.lineChartData}} />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-primary" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
         {{/if}}
       </div>
@@ -53,6 +61,14 @@ export let Standard = () => {
             <:svg as |c|>
               <c.Area @data={{this.lineChartMild}} @colorClass="is-info" />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-info" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
         {{/if}}
       </div>
@@ -74,6 +90,14 @@ export let FluidWidth = () => {
             <:svg as |c|>
               <c.Area @data={{this.lineChartData}} @colorClass="is-danger" />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-danger" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
         {{/if}}
       </div>
@@ -83,6 +107,14 @@ export let FluidWidth = () => {
             <:svg as |c|>
               <c.Area @data={{this.lineChartMild}} @colorClass="is-warning" />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-warning" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
         {{/if}}
       </div>
@@ -155,6 +187,14 @@ export let Gaps = () => {
             <:svg as |c|>
               <c.Area @data={{this.lineChartGapData}} />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-primary" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
         {{/if}}
       </div>
@@ -217,6 +257,12 @@ export let VerticalAnnotations = () => {
                 @annotations={{this.annotations}}
                 @annotationClick={{action (mut this.activeAnnotation)}}
                 @activeAnnotation={{this.activeAnnotation}} />
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-primary" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
             </:after>
           </LineChart>
         {{/if}}
@@ -334,6 +380,14 @@ export let StepLine = () => {
             <:svg as |c|>
               <c.Area @data={{this.data}} @curve="stepAfter" />
             </:svg>
+            <:after as |c|>
+              <c.Tooltip class="is-snappy" as |series datum|>
+                <li>
+                  <span class="label"><span class="color-swatch is-primary" />{{datum.formattedX}}</span>
+                  <span class="value">{{datum.formattedY}}</span>
+                </li>
+              </c.Tooltip>
+            </:after>
           </LineChart>
           <p>{{this.activeAnnotation.info}}</p>
         {{/if}}

From 53f9b47c72b0e35f846b88006d2bd0168eabb84a Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 9 Mar 2021 16:46:49 -0800
Subject: [PATCH 18/18] Move complex annotation hbs logic into JS

As @backspace pointed out, we're processing a bunch of other stuff
anyway, so might as well process the active state there too where it's
more likely to be expected.
---
 ui/app/components/chart-primitives/h-annotations.hbs |  5 +----
 ui/app/components/chart-primitives/h-annotations.js  | 11 ++++++++++-
 ui/app/components/chart-primitives/v-annotations.hbs |  5 +----
 ui/app/components/chart-primitives/v-annotations.js  | 12 +++++++++++-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/ui/app/components/chart-primitives/h-annotations.hbs b/ui/app/components/chart-primitives/h-annotations.hbs
index feefe542b..78999e2b4 100644
--- a/ui/app/components/chart-primitives/h-annotations.hbs
+++ b/ui/app/components/chart-primitives/h-annotations.hbs
@@ -4,10 +4,7 @@
       <button
         type="button"
         title={{annotation.a11yLabel}}
-        class="indicator {{if (or
-          (and @key (eq-by @key annotation.annotation @activeAnnotation))
-          (and (not @key) (eq annotation.annotation @activeAnnotation))
-        ) "is-active"}}"
+        class="indicator {{if annotation.isActive "is-active"}}"
         {{on "click" (fn this.selectAnnotation annotation.annotation)}}>
         {{annotation.label}}
       </button>
diff --git a/ui/app/components/chart-primitives/h-annotations.js b/ui/app/components/chart-primitives/h-annotations.js
index 293cb667e..e189fc23c 100644
--- a/ui/app/components/chart-primitives/h-annotations.js
+++ b/ui/app/components/chart-primitives/h-annotations.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
 import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
 
 export default class ChartPrimitiveVAnnotations extends Component {
@@ -29,10 +29,19 @@ export default class ChartPrimitiveVAnnotations extends Component {
         style: htmlSafe(`transform:translate(${x}px,${y}px)`),
         label: annotation[labelProp],
         a11yLabel: `${annotation[labelProp]} at ${formattedY}`,
+        isActive: this.annotationIsActive(annotation),
       };
     });
   }
 
+  annotationIsActive(annotation) {
+    const { key, activeAnnotation } = this.args;
+    if (!activeAnnotation) return false;
+
+    if (key) return get(annotation, key) === get(activeAnnotation, key);
+    return annotation === activeAnnotation;
+  }
+
   @action
   selectAnnotation(annotation) {
     if (this.args.annotationClick) this.args.annotationClick(annotation);
diff --git a/ui/app/components/chart-primitives/v-annotations.hbs b/ui/app/components/chart-primitives/v-annotations.hbs
index 1a2a80399..7b50ec745 100644
--- a/ui/app/components/chart-primitives/v-annotations.hbs
+++ b/ui/app/components/chart-primitives/v-annotations.hbs
@@ -4,10 +4,7 @@
       <button
         type="button"
         title={{annotation.label}}
-        class="indicator {{if (or
-          (and @key (eq-by @key annotation.annotation @activeAnnotation))
-          (and (not @key) (eq annotation.annotation @activeAnnotation))
-        ) "is-active"}}"
+        class="indicator {{if annotation.isActive "is-active"}}"
         {{on "click" (fn this.selectAnnotation annotation.annotation)}}>
         {{x-icon annotation.icon}}
       </button>
diff --git a/ui/app/components/chart-primitives/v-annotations.js b/ui/app/components/chart-primitives/v-annotations.js
index f05481778..a49c0f268 100644
--- a/ui/app/components/chart-primitives/v-annotations.js
+++ b/ui/app/components/chart-primitives/v-annotations.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
 import styleString from 'nomad-ui/utils/properties/glimmer-style-string';
 
 const iconFor = {
@@ -51,10 +51,20 @@ export default class ChartPrimitiveVAnnotations extends Component {
         iconClass: iconClassFor[annotation.type],
         staggerClass: prevHigh ? 'is-staggered' : '',
         label: `${annotation.type} event at ${formattedX}`,
+        isActive: this.annotationIsActive(annotation),
       };
     });
   }
 
+  annotationIsActive(annotation) {
+    const { key, activeAnnotation } = this.args;
+    console.log(key, activeAnnotation, annotation);
+    if (!activeAnnotation) return false;
+
+    if (key) return get(annotation, key) === get(activeAnnotation, key);
+    return annotation === activeAnnotation;
+  }
+
   @action
   selectAnnotation(annotation) {
     if (this.args.annotationClick) this.args.annotationClick(annotation);