Make histogram axis labels match dygraphs axis labels

ui/src/shared/components/HistogramChartAxes.tsx

@@ -4,7 +4,7 @@ import {ScaleLinear, ScaleTime} from 'd3-scale'
 import {Margins} from 'src/types/histogram'
 
 const Y_TICK_COUNT = 5
-const Y_TICK_PADDING_RIGHT = 5
+const Y_TICK_PADDING_RIGHT = 7
 const X_TICK_COUNT = 10
 const X_TICK_PADDING_TOP = 8
 

ui/src/shared/components/HistogramChartBars.tsx

@@ -4,7 +4,7 @@ import {ScaleLinear, ScaleTime} from 'd3-scale'
 
 import {HistogramData, HistogramDatum} from 'src/types/histogram'
 
-const BAR_BORDER_RADIUS = 4
+const BAR_BORDER_RADIUS = 3
 const BAR_PADDING_SIDES = 4
 
 interface Props {

ui/src/style/components/dygraphs.scss

@@ -48,13 +48,13 @@
 }
 .dygraph-axis-label-y {
   padding: 0 9px 0 0 !important;
-  text-align: left !important;
+  text-align: right !important;
   left: 0 !important;
   user-select: none;
 }
 .dygraph-axis-label-y2 {
   padding: 0 0 0 9px !important;
-  text-align: right !important;
+  text-align: left !important;
   user-select: none;
 }
 
@@ -84,10 +84,10 @@
 
 .graph--hasYLabel {
   .dygraph-axis-label-y {
-    padding: 0 1px 0 16px !important;
+    padding: 0 4px 0 0 !important;
   }
   .dygraph-axis-label-y2 {
-    padding: 0 16px 0 1px !important;
+    padding: 0 0 0 4px !important;
   }
 }
 

ui/src/style/components/histogram-chart.scss

@@ -37,15 +37,15 @@
   shape-rendering: crispEdges;
   fill: $c-amethyst;
   opacity: 1;
-  pointer: cursor;
+  cursor: pointer;
   shape-rendering: crispEdges;
 }
 
 .histogram-chart--axes, .histogram-chart-skeleton {
   .x-label, .y-label {
-    fill: $g13-mist;
-    font-size: 12px;
-    font-weight: bold;
+    fill: $g11-sidewalk;
+    font-size: 11px;
+    font-weight: 600;
   }
 
   .x-label {
@@ -83,7 +83,7 @@
 .histogram-chart-tooltip {
   padding: 8px;
   background-color: $g0-obsidian;
-  border-radius: 3px;
+  border-radius: $radius-small;
   @extend %drop-shadow;
   font-size: 12px;
   font-weight: 600;