Merge pull request #166 from hshoff/harry-thresh-legend

[legend] fix legend threshold. fixes #157
airbnb · Oct 6, 2017 · 52c1d7c · 52c1d7c
2 parents 7b845ac + ef8c585
commit 52c1d7c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/vx-demo/components/tiles/legends.js b/packages/vx-demo/components/tiles/legends.js
@@ -62,15 +62,16 @@ const ordinalShape = scaleOrdinal({
       left={50 / 6}
       fill="#df905f"
     />,
-    props =>
+    props => (
       <text fontSize="12" dy="1em" dx=".33em" fill="#e0a346">
         $
-      </text>,
+      </text>
+    ),
   ],
 });
 
 const threshold = scaleThreshold({
-  domain: [0.02, 0.04, 0.06, 0.08, 0.1],
+  domain: [0.01, 0.02, 0.04, 0.06, 0.08, 0.1],
   range: [
     '#f2f0f7',
     '#dadaeb',
@@ -103,7 +104,7 @@ function LegendDemo({ title, children }) {
       {children}
       <style jsx>{`
         .legend {
-          line-height: .9em;
+          line-height: 0.9em;
           color: #efefef;
           font-size: 10px;
           font-family: arial;

diff --git a/packages/vx-legend/src/legends/Threshold.js b/packages/vx-legend/src/legends/Threshold.js
@@ -48,17 +48,24 @@ function defaultTransform({
 }) {
   return ({ scale, labelFormat }) => {
     function format(labelFormat, value, i) {
-      return labelFormat(value, i) || '';
+      const formattedValue = labelFormat(value, i);
+      if (formattedValue === 0) return '0';
+      return formattedValue || '';
     }
     return (d, i) => {
       let [x0, x1] = scale.invertExtent(d);
       let delimiter = ` ${labelDelimiter} `;
-      let value = x1;
-      if (!x0) {
+      let value;
+      if (x0 !== 0 && !x0 && (x1 === 0 || !!x1)) {
+        // lower threshold
+        value = x1 - 1;
         delimiter = labelLower;
-      }
-      if (!x1) {
+      } else if ((x0 === 0 || !!x0) && (x1 === 0 || !!x1)) {
+        // threshold step
         value = x0;
+      } else if (!x1 && (x0 === 0 || !!x0)) {
+        // upper threshold
+        value = x0 + scale.domain()[1];
         x1 = x0;
         x0 = undefined;
         delimiter = labelUpper;