Fix status chart clipping

Author: Raytimz

docs/css/style.css

@@ -133,7 +133,7 @@ input[type="range"] {
 #chart-hourly { height: 110px; width: 100%; display: block; }
 #chart-sog    { height: 90px;  width: 100%; display: block; }
 #chart-types  { height: 160px; width: 100%; display: block; }
-#chart-status { height: 110px; width: 100%; display: block; }
+#chart-status { height: 130px; width: 100%; display: block; }
 
 
 .vessel-popup { min-width: 160px; }

docs/js/charts.js

@@ -6,7 +6,7 @@ const Charts = (() => {
     d3.select(el).selectAll("*").remove();
   }
 
-  const CHART_HEIGHTS = { "chart-hourly": 110, "chart-sog": 90, "chart-types": 160, "chart-status": 110 };
+  const CHART_HEIGHTS = { "chart-hourly": 110, "chart-sog": 90, "chart-types": 160, "chart-status": 130 };
 
   function getSize(el) {
     const r = el.getBoundingClientRect();
@@ -158,8 +158,8 @@ const Charts = (() => {
     const el = sel("chart-status");
     clearSvg(el);
     const { w, h } = getSize(el);
-    const r = Math.min(w / 2, h) * 0.82;
-    const cx = w * 0.35;
+    const r = Math.min(w * 0.22, h * 0.42);
+    const cx = r + 6;
     const cy = h / 2;
 
     const STATUS_COLORS = {