From 51aad407f54d3b7941bb16305ebbd8e1c904cca9 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Fri, 13 Jul 2018 12:54:30 -0700
Subject: [PATCH] Yield histogram plot data to children

---
 ui/src/shared/components/HistogramChart.tsx   |  39 +-
 ui/src/style/components/histogram-chart.scss  |   7 +
 .../HistogramChart.test.tsx.snap              | 477 +++++++++---------
 3 files changed, 279 insertions(+), 244 deletions(-)

diff --git a/ui/src/shared/components/HistogramChart.tsx b/ui/src/shared/components/HistogramChart.tsx
index b58ba6fc98..190329ce1c 100644
--- a/ui/src/shared/components/HistogramChart.tsx
+++ b/ui/src/shared/components/HistogramChart.tsx
@@ -26,6 +26,14 @@ const PADDING_TOP = 0.2
 const DIGIT_WIDTH = 7
 const PERIOD_DIGIT_WIDTH = 4
 
+interface RenderPropArgs {
+  xScale: ScaleTime<number, number>
+  yScale: ScaleLinear<number, number>
+  adjustedWidth: number
+  adjustedHeight: number
+  margins: Margins
+}
+
 interface Props {
   data: HistogramData
   width: number
@@ -34,6 +42,7 @@ interface Props {
   colorScale: ColorScale
   onBarClick?: (time: string) => void
   sortBarGroups: SortFn
+  children?: (args: RenderPropArgs) => JSX.Element
 }
 
 interface State {
@@ -56,6 +65,7 @@ class HistogramChart extends PureComponent<Props, State> {
       colors,
       onBarClick,
       sortBarGroups,
+      children,
     } = this.props
     const {margins} = this
 
@@ -76,8 +86,16 @@ class HistogramChart extends PureComponent<Props, State> {
     const {hoverData} = this.state
     const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this
 
+    const renderPropArgs = {
+      xScale,
+      yScale,
+      adjustedWidth,
+      adjustedHeight,
+      margins,
+    }
+
     return (
-      <>
+      <div className="histogram-chart">
         <svg width={width} height={height} className="histogram-chart">
           <defs>
             <clipPath id="histogram-chart--bars-clip">
@@ -113,14 +131,17 @@ class HistogramChart extends PureComponent<Props, State> {
             />
           </g>
         </svg>
-        {hoverData && (
-          <HistogramChartTooltip
-            data={hoverData}
-            colorScale={colorScale}
-            colors={colors}
-          />
-        )}
-      </>
+        <div className="histogram-chart--overlays">
+          {!!children && children(renderPropArgs)}
+          {hoverData && (
+            <HistogramChartTooltip
+              data={hoverData}
+              colorScale={colorScale}
+              colors={colors}
+            />
+          )}
+        </div>
+      </div>
     )
   }
 
diff --git a/ui/src/style/components/histogram-chart.scss b/ui/src/style/components/histogram-chart.scss
index e7483ef225..08eebf9a21 100644
--- a/ui/src/style/components/histogram-chart.scss
+++ b/ui/src/style/components/histogram-chart.scss
@@ -1,5 +1,6 @@
 .histogram-chart {
   user-select: none;
+  position: relative;
 }
 
 .histogram-chart-bars--bar {
@@ -64,3 +65,9 @@
 .histogram-chart-tooltip--column:first-child {
   margin-right: 12px;
 }
+
+.histogram-chart--overlays {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
diff --git a/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap b/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
index a1f6ef7171..c658797a4f 100644
--- a/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
+++ b/ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
@@ -177,247 +177,254 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
   sortBarGroups={[Function]}
   width={600}
 >
-  <svg
+  <div
     className="histogram-chart"
-    height={400}
-    width={600}
   >
-    <defs>
-      <clipPath
-        id="histogram-chart--bars-clip"
-      >
-        <rect
-          height={375}
-          width={575}
-          x="0"
-          y="0"
-        />
-      </clipPath>
-    </defs>
-    <g
-      className="histogram-chart--axes"
+    <svg
+      className="histogram-chart"
+      height={400}
+      width={600}
     >
-      <HistogramChartAxes
-        height={400}
-        margins={
-          Object {
-            "bottom": 20,
-            "left": 25,
-            "right": 0,
-            "top": 5,
+      <defs>
+        <clipPath
+          id="histogram-chart--bars-clip"
+        >
+          <rect
+            height={375}
+            width={575}
+            x="0"
+            y="0"
+          />
+        </clipPath>
+      </defs>
+      <g
+        className="histogram-chart--axes"
+      >
+        <HistogramChartAxes
+          height={400}
+          margins={
+            Object {
+              "bottom": 20,
+              "left": 25,
+              "right": 0,
+              "top": 5,
+            }
           }
-        }
-        width={600}
-        xScale={[Function]}
-        yScale={[Function]}
-      >
-        <line
-          className="y-tick"
-          key="0-25-625-380"
-          x1={25}
-          x2={625}
-          y1={380}
-          y2={380}
-        />
-        <line
-          className="y-tick"
-          key="0.5-25-625-301.875"
-          x1={25}
-          x2={625}
-          y1={301.875}
-          y2={301.875}
-        />
-        <line
-          className="y-tick"
-          key="1-25-625-223.75"
-          x1={25}
-          x2={625}
-          y1={223.75}
-          y2={223.75}
-        />
-        <line
-          className="y-tick"
-          key="1.5-25-625-145.625"
-          x1={25}
-          x2={625}
-          y1={145.625}
-          y2={145.625}
-        />
-        <line
-          className="y-tick"
-          key="2-25-625-67.5"
-          x1={25}
-          x2={625}
-          y1={67.5}
-          y2={67.5}
-        />
-        <text
-          className="y-label"
-          key="0-25-625-380"
-          x={18}
-          y={380}
+          width={600}
+          xScale={[Function]}
+          yScale={[Function]}
         >
-          0
-        </text>
-        <text
-          className="y-label"
-          key="0.5-25-625-301.875"
-          x={18}
-          y={301.875}
-        >
-          0.5
-        </text>
-        <text
-          className="y-label"
-          key="1-25-625-223.75"
-          x={18}
-          y={223.75}
-        >
-          1
-        </text>
-        <text
-          className="y-label"
-          key="1.5-25-625-145.625"
-          x={18}
-          y={145.625}
-        >
-          1.5
-        </text>
-        <text
-          className="y-label"
-          key="2-25-625-67.5"
-          x={18}
-          y={67.5}
-        >
-          2
-        </text>
-        <text
-          className="x-label"
-          key=".001-287.5-388"
-          x={287.5}
-          y={388}
-        >
-          .001
-        </text>
-        <text
-          className="x-label"
-          key=".002-575-388"
-          x={575}
-          y={388}
-        >
-          .002
-        </text>
-      </HistogramChartAxes>
-    </g>
-    <g
-      className="histogram-chart--bars"
-      clipPath="url(#histogram-chart--bars-clip)"
-      transform="translate(25, 5)"
-    >
-      <HistogramChartBars
-        colorScale={[Function]}
-        colors={Array []}
-        data={
-          Array [
-            Object {
-              "group": "a",
-              "key": "0",
-              "time": 0,
-              "value": 0,
-            },
-            Object {
-              "group": "a",
-              "key": "1",
-              "time": 1,
-              "value": 1,
-            },
-            Object {
-              "group": "b",
-              "key": "2",
-              "time": 2,
-              "value": 2,
-            },
-          ]
-        }
-        height={375}
-        onHover={[Function]}
-        sortBarGroups={[Function]}
-        width={575}
-        xScale={[Function]}
-        yScale={[Function]}
-      >
-        <g
-          className="histogram-chart-bars--bars"
-          data-key="1-1-193.5"
-          key="1-1-193.5"
-          onClick={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-        >
-          <defs>
-            <clipPath
-              id="histogram-chart-bars--clip-1-1-193.5"
-            >
-              <rect
-                height={159.25}
-                rx={3}
-                ry={3}
-                width={188}
-                x={193.5}
-                y={218.75}
-              />
-            </clipPath>
-          </defs>
-          <rect
-            className="histogram-chart-bars--bar"
-            clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
-            data-group="a"
-            data-key="1"
-            fill="#0000ff"
-            height={156.25}
-            key="1"
-            width={188}
-            x={193.5}
-            y={218.75}
+          <line
+            className="y-tick"
+            key="0-25-625-380"
+            x1={25}
+            x2={625}
+            y1={380}
+            y2={380}
           />
-        </g>
-        <g
-          className="histogram-chart-bars--bars"
-          data-key="2-2-481"
-          key="2-2-481"
-          onClick={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-        >
-          <defs>
-            <clipPath
-              id="histogram-chart-bars--clip-2-2-481"
-            >
-              <rect
-                height={315.5}
-                rx={3}
-                ry={3}
-                width={188}
-                x={481}
-                y={62.5}
-              />
-            </clipPath>
-          </defs>
-          <rect
-            className="histogram-chart-bars--bar"
-            clipPath="url(#histogram-chart-bars--clip-2-2-481)"
-            data-group="b"
-            data-key="2"
-            fill="#0000ff"
-            height={312.5}
-            key="2"
-            width={188}
-            x={481}
-            y={62.5}
+          <line
+            className="y-tick"
+            key="0.5-25-625-301.875"
+            x1={25}
+            x2={625}
+            y1={301.875}
+            y2={301.875}
           />
-        </g>
-      </HistogramChartBars>
-    </g>
-  </svg>
+          <line
+            className="y-tick"
+            key="1-25-625-223.75"
+            x1={25}
+            x2={625}
+            y1={223.75}
+            y2={223.75}
+          />
+          <line
+            className="y-tick"
+            key="1.5-25-625-145.625"
+            x1={25}
+            x2={625}
+            y1={145.625}
+            y2={145.625}
+          />
+          <line
+            className="y-tick"
+            key="2-25-625-67.5"
+            x1={25}
+            x2={625}
+            y1={67.5}
+            y2={67.5}
+          />
+          <text
+            className="y-label"
+            key="0-25-625-380"
+            x={18}
+            y={380}
+          >
+            0
+          </text>
+          <text
+            className="y-label"
+            key="0.5-25-625-301.875"
+            x={18}
+            y={301.875}
+          >
+            0.5
+          </text>
+          <text
+            className="y-label"
+            key="1-25-625-223.75"
+            x={18}
+            y={223.75}
+          >
+            1
+          </text>
+          <text
+            className="y-label"
+            key="1.5-25-625-145.625"
+            x={18}
+            y={145.625}
+          >
+            1.5
+          </text>
+          <text
+            className="y-label"
+            key="2-25-625-67.5"
+            x={18}
+            y={67.5}
+          >
+            2
+          </text>
+          <text
+            className="x-label"
+            key=".001-287.5-388"
+            x={287.5}
+            y={388}
+          >
+            .001
+          </text>
+          <text
+            className="x-label"
+            key=".002-575-388"
+            x={575}
+            y={388}
+          >
+            .002
+          </text>
+        </HistogramChartAxes>
+      </g>
+      <g
+        className="histogram-chart--bars"
+        clipPath="url(#histogram-chart--bars-clip)"
+        transform="translate(25, 5)"
+      >
+        <HistogramChartBars
+          colorScale={[Function]}
+          colors={Array []}
+          data={
+            Array [
+              Object {
+                "group": "a",
+                "key": "0",
+                "time": 0,
+                "value": 0,
+              },
+              Object {
+                "group": "a",
+                "key": "1",
+                "time": 1,
+                "value": 1,
+              },
+              Object {
+                "group": "b",
+                "key": "2",
+                "time": 2,
+                "value": 2,
+              },
+            ]
+          }
+          height={375}
+          onHover={[Function]}
+          sortBarGroups={[Function]}
+          width={575}
+          xScale={[Function]}
+          yScale={[Function]}
+        >
+          <g
+            className="histogram-chart-bars--bars"
+            data-key="1-1-193.5"
+            key="1-1-193.5"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <defs>
+              <clipPath
+                id="histogram-chart-bars--clip-1-1-193.5"
+              >
+                <rect
+                  height={159.25}
+                  rx={3}
+                  ry={3}
+                  width={188}
+                  x={193.5}
+                  y={218.75}
+                />
+              </clipPath>
+            </defs>
+            <rect
+              className="histogram-chart-bars--bar"
+              clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
+              data-group="a"
+              data-key="1"
+              fill="#0000ff"
+              height={156.25}
+              key="1"
+              width={188}
+              x={193.5}
+              y={218.75}
+            />
+          </g>
+          <g
+            className="histogram-chart-bars--bars"
+            data-key="2-2-481"
+            key="2-2-481"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <defs>
+              <clipPath
+                id="histogram-chart-bars--clip-2-2-481"
+              >
+                <rect
+                  height={315.5}
+                  rx={3}
+                  ry={3}
+                  width={188}
+                  x={481}
+                  y={62.5}
+                />
+              </clipPath>
+            </defs>
+            <rect
+              className="histogram-chart-bars--bar"
+              clipPath="url(#histogram-chart-bars--clip-2-2-481)"
+              data-group="b"
+              data-key="2"
+              fill="#0000ff"
+              height={312.5}
+              key="2"
+              width={188}
+              x={481}
+              y={62.5}
+            />
+          </g>
+        </HistogramChartBars>
+      </g>
+    </svg>
+    <div
+      className="histogram-chart--overlays"
+    />
+  </div>
 </HistogramChart>
 `;