Add test for 0 case and fix LegendThreshold

packages/visx-legend/src/legends/Threshold.tsx

@@ -42,7 +42,7 @@ function defaultTransform<Scale extends AnyThresholdScale>({
       if (d0 == null && typeof d1 === 'number') {
         // lower threshold e.g., [undefined, number]
         delimiter = labelLower || delimiter;
-        value = d1 - 2 * Math.abs(d1); // guarantees a value smaller than the lower threshold
+        value = d1 - Math.abs(2 * d1 - 1); // guarantees a value smaller than the lower threshold
         text = `${delimiter}${formatZero(labelFormat(d1, i))}`;
       } else if (d0 != null && d1 != null) {
         // threshold step
@@ -51,7 +51,7 @@ function defaultTransform<Scale extends AnyThresholdScale>({
       } else if (typeof d0 === 'number' && d1 == null) {
         // upper threshold e.g., [number, undefined]
         delimiter = labelUpper || delimiter;
-        value = d0 + 2 * Math.abs(d0); // // guarantees a value larger than the upper threshold
+        value = d0 + Math.abs(2 * d0 + 1); // // guarantees a value larger than the upper threshold
         text = `${delimiter}${formatZero(labelFormat(d0, i))}`;
       }
 

packages/visx-legend/test/LegendThreshold.test.tsx

@@ -32,7 +32,7 @@ describe('<LegendThreshold />', () => {
     });
   });
 
-  it('should render LegendShape with the correct color in a negitive domain', () => {
+  it('should render LegendShape with the correct color with a negitive domain', () => {
     const domain = [-3, -1];
     const range = ['green', 'purple', 'blue'];
     const thresholdScale1 = scaleThreshold({
@@ -54,4 +54,27 @@ describe('<LegendThreshold />', () => {
       expect(legendShape?.querySelector('div')).toHaveStyle(`background: ${color}`);
     });
   });
+
+  it('should render LegendShape with the correct color with 0', () => {
+    const domain = [0, 1, 4];
+    const range = ['green', 'purple', 'blue', 'pink'];
+    const thresholdScale1 = scaleThreshold({
+      domain,
+      range,
+    });
+
+    const { getAllByTestId } = render(
+      <svg>
+        <LegendThreshold scale={thresholdScale1} data-testid="thresholdLegend" />
+      </svg>,
+    );
+
+    const thresholdLegend = getAllByTestId('thresholdLegend');
+
+    range.forEach((color, index) => {
+      const legendItem = thresholdLegend[index];
+      const legendShape = legendItem?.querySelector('.visx-legend-shape');
+      expect(legendShape?.querySelector('div')).toHaveStyle(`background: ${color}`);
+    });
+  });
 });