diff --git a/ui/src/shared/components/HistogramChartAxes.tsx b/ui/src/shared/components/HistogramChartAxes.tsx index 1923750bd..346352c02 100644 --- a/ui/src/shared/components/HistogramChartAxes.tsx +++ b/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 diff --git a/ui/src/shared/components/HistogramChartBars.tsx b/ui/src/shared/components/HistogramChartBars.tsx index bbf388d47..451042798 100644 --- a/ui/src/shared/components/HistogramChartBars.tsx +++ b/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 { diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss index fa194b789..a07992e50 100644 --- a/ui/src/style/components/dygraphs.scss +++ b/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; } } diff --git a/ui/src/style/components/histogram-chart.scss b/ui/src/style/components/histogram-chart.scss index c04e41a99..853c81aff 100644 --- a/ui/src/style/components/histogram-chart.scss +++ b/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;