fix: Negative values display BarChart (#783)

* fix: renderShape function for negative values
tremorlabs · Oct 30, 2023 · 6ca2f4b · 6ca2f4b
1 parent bfe64c3
commit 6ca2f4b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 6 deletions.
diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -12,7 +12,6 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { AxisDomain } from "recharts/types/util/types";
 
 import BaseChartProps from "../common/BaseChartProps";
 import ChartLegend from "../common/ChartLegend";
@@ -21,9 +20,24 @@ import NoData from "../common/NoData";
 import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
 
 import { BaseColors, defaultValueFormatter, themeColorRange } from "lib";
+import { AxisDomain } from "recharts/types/util/types";
 
-const renderShape = (props: any, activeBar: any | undefined, activeLegend: string | undefined) => {
-  const { x, y, width, height, fillOpacity, name, payload, value } = props;
+const renderShape = (
+  props: any,
+  activeBar: any | undefined,
+  activeLegend: string | undefined,
+  layout: string,
+) => {
+  const { fillOpacity, name, payload, value } = props;
+  let { x, width, y, height } = props;
+
+  if (layout === "horizontal" && height < 0) {
+    y += height;
+    height = Math.abs(height); // height must be a positive number
+  } else if (layout === "vertical" && width < 0) {
+    x += width;
+    width = Math.abs(width); // width must be a positive number
+  }
 
   return (
     <rect
@@ -128,7 +142,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
         {data?.length ? (
           <ReChartsBarChart
             data={data}
-            stackOffset={relative ? "expand" : "none"}
+            stackOffset={stack ? "sign" : relative ? "expand" : "none"}
             layout={layout === "vertical" ? "vertical" : "horizontal"}
             onClick={
               hasOnValueChange && (activeLegend || activeBar)
@@ -311,7 +325,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 fill=""
                 isAnimationActive={showAnimation}
                 animationDuration={animationDuration}
-                shape={(props) => renderShape(props, activeBar, activeLegend)}
+                shape={(props) => renderShape(props, activeBar, activeLegend, layout)}
                 onClick={onBarClick}
               />
             ))}

diff --git a/src/components/list-elements/List/ListItem.tsx b/src/components/list-elements/List/ListItem.tsx
@@ -15,7 +15,7 @@ const ListItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElem
           className={tremorTwMerge(
             makeListItemClassName("root"),
             // common
-            "w-full flex justify-between items-center truncate tabular-nums text-tremor-default",
+            "w-full flex justify-between items-center truncate text-tremor-default",
             spacing.sm.paddingY,
             className,
           )}

diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -11,6 +11,7 @@ import {
   singleAndMultipleData,
   longBaseChartData,
   longIndexBaseChartData,
+  simpleBaseChartWithNegativeValues,
 } from "./helpers/testData";
 import { valueFormatter } from "./helpers/utils";
 
@@ -28,6 +29,12 @@ export const Default: Story = {
   args: {},
 };
 
+export const DefaultNegativeValues: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+  },
+};
+
 export const Stacked: Story = {
   args: {
     stack: true,

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
@@ -10,6 +10,7 @@ import {
   singleAndMultipleData,
   longBaseChartData,
   longIndexBaseChartData,
+  simpleBaseChartWithNegativeValues,
 } from "./helpers/testData";
 
 const meta: Meta<typeof BarChart> = {
@@ -26,6 +27,34 @@ export const Default: Story = {
   args: {},
 };
 
+export const DefaultNegativeValues: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+  },
+};
+
+export const DefaultNegativeValuesVertical: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+    layout: "vertical",
+  },
+};
+
+export const DefaultNegativeValuesStacked: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+    stack: true,
+  },
+};
+
+export const DefaultNegativeValuesVerticalStacked: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+    layout: "vertical",
+    stack: true,
+  },
+};
+
 export const Stacked: Story = {
   args: { stack: true },
 };

diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
@@ -11,6 +11,7 @@ import {
   singleAndMultipleData,
   longBaseChartData,
   longIndexBaseChartData,
+  simpleBaseChartWithNegativeValues,
 } from "./helpers/testData";
 import { valueFormatter } from "./helpers/utils";
 
@@ -28,6 +29,12 @@ export const Default: Story = {
   args: {},
 };
 
+export const DefaultNegativeValues: Story = {
+  args: {
+    data: simpleBaseChartWithNegativeValues,
+  },
+};
+
 export const ValueFormatter: Story = {
   args: { valueFormatter: valueFormatter, yAxisWidth: 60 },
 };

diff --git a/src/stories/chart-elements/helpers/testData.tsx b/src/stories/chart-elements/helpers/testData.tsx
@@ -1663,6 +1663,44 @@ export const simpleBaseChartDataWithNulls = [
   },
 ];
 
+export const simpleBaseChartWithNegativeValues = [
+  {
+    month: "Jan 21",
+    Sales: 4000,
+    "Successful Payments": 3000,
+  },
+  {
+    month: "Feb 21",
+    Sales: 3000,
+    "Successful Payments": 2000,
+  },
+  {
+    month: "Mar 21",
+    Sales: 2000,
+    "Successful Payments": 1700,
+  },
+  {
+    month: "Apr 21",
+    Sales: 2780,
+    "Successful Payments": -2500,
+  },
+  {
+    month: "May 21",
+    Sales: 1890,
+    "Successful Payments": -1890,
+  },
+  {
+    month: "Jun 21",
+    Sales: 2390,
+    "Successful Payments": -2000,
+  },
+  {
+    month: "Jul 21",
+    Sales: 100,
+    "Successful Payments": -3000,
+  },
+];
+
 export const simpleSingleCategoryData = [
   {
     city: "New York",