UI fix on d3 chart y axis format and kg chart default height (#264)

- Show original number when y tick is less than 1 to avoid showing 0.5 as 500m.
- Make default "show more" height larger so the "show more" box is hidden in chart view.

static/js/chart/draw.ts

@@ -134,7 +134,12 @@ function addYAxis(
             yticks[1] - yticks[0],
             yticks[yticks.length - 1]
           );
-          const tText = d3.formatPrefix(`.${p}`, yScale.domain()[1])(d);
+          let tText = String(d);
+          // When the y value is less than one, use the original value.
+          // Otherwise 0.3 is formatted into 300m which is confusing to 300M.
+          if (d > 1) {
+            tText = d3.formatPrefix(`.${p}`, yScale.domain()[1])(d);
+          }
           const dollar = unit === "$" ? "$" : "";
           const percent = unit === "%" ? "%" : "";
           return `${dollar}${tText}${percent}`;

static/js/shared/util.js

@@ -20,7 +20,7 @@ const POPULATION = "StatisticalPopulation";
 const OBSERVATION = "Observation";
 const COMPARATIVE_OBSERVATION = "ComparativeObservation";
 
-const MAX_CARD_HEIGHT = 400;
+const MAX_CARD_HEIGHT = 450;
 
 const /** !Array<string> */ STATS = [
     "measuredValue",