Yield histogram plot data to children

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,6 +131,8 @@ class HistogramChart extends PureComponent<Props, State> {
             />
           </g>
         </svg>
+        <div className="histogram-chart--overlays">
+          {!!children && children(renderPropArgs)}
           {hoverData && (
             <HistogramChartTooltip
               data={hoverData}
@@ -120,7 +140,8 @@ class HistogramChart extends PureComponent<Props, State> {
               colors={colors}
             />
           )}
-      </>
+        </div>
+      </div>
     )
   }
 

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;
+}

ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap

@@ -176,6 +176,9 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
   height={400}
   sortBarGroups={[Function]}
   width={600}
+>
+  <div
+    className="histogram-chart"
   >
     <svg
       className="histogram-chart"
@@ -419,5 +422,9 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
         </HistogramChartBars>
       </g>
     </svg>
+    <div
+      className="histogram-chart--overlays"
+    />
+  </div>
 </HistogramChart>
 `;