feat: Legend position (#28)

* add legend position to areachart * Add legend left padding
tremorlabs · May 31, 2024 · dc37ad8 · dc37ad8
1 parent 9c2977e
commit dc37ad8
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 3 deletions.
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -318,6 +318,8 @@ const ChartLegend = (
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
   enableLegendSlider?: boolean,
+  legendPosition?: "left" | "center" | "right",
+  yAxisWidth?: number,
 ) => {
   const legendRef = React.useRef<HTMLDivElement>(null)
 
@@ -329,8 +331,20 @@ const ChartLegend = (
 
   const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
+  const paddingLeft =
+    legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0
+
   return (
-    <div ref={legendRef} className="flex items-center justify-end">
+    <div
+      ref={legendRef}
+      style={{ paddingLeft: paddingLeft }}
+      className={cx(
+        "flex items-center",
+        { "justify-center": legendPosition === "center" },
+        { "justify-start": legendPosition === "left" },
+        { "justify-end": legendPosition === "right" },
+      )}
+    >
       <Legend
         categories={filteredPayload.map((entry: any) => entry.value)}
         colors={filteredPayload.map((entry: any) =>
@@ -494,6 +508,7 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   xAxisLabel?: string
   yAxisLabel?: string
   type?: "default" | "stacked" | "percent"
+  legendPosition?: "left" | "center" | "right"
 }
 
 const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
@@ -524,6 +539,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
       xAxisLabel,
       yAxisLabel,
       type = "default",
+      legendPosition = "right",
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -724,6 +740,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
                           onCategoryClick(clickedLegendItem)
                       : undefined,
                     enableLegendSlider,
+                    legendPosition,
+                    yAxisWidth,
                   )
                 }
               />

diff --git a/src/components/AreaChart/areachart.stories.tsx b/src/components/AreaChart/areachart.stories.tsx
@@ -193,6 +193,18 @@ export const AllColors: Story = {
   },
 }
 
+export const WithLegendLeft: Story = {
+  args: {
+    legendPosition: "left",
+  },
+}
+
+export const WithLegendCenter: Story = {
+  args: {
+    legendPosition: "center",
+  },
+}
+
 export const WithLegendSlider: Story = {
   args: {
     className: "max-w-md",

diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx
@@ -317,6 +317,8 @@ const ChartLegend = (
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
   enableLegendSlider?: boolean,
+  legendPosition?: "left" | "center" | "right",
+  yAxisWidth?: number,
 ) => {
   const legendRef = React.useRef<HTMLDivElement>(null)
 
@@ -328,8 +330,20 @@ const ChartLegend = (
 
   const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
+  const paddingLeft =
+    legendPosition === "left" && yAxisWidth ? yAxisWidth - 8 : 0
+
   return (
-    <div ref={legendRef} className="flex items-center justify-end">
+    <div
+      ref={legendRef}
+      style={{ paddingLeft: paddingLeft }}
+      className={cx(
+        "flex items-center",
+        { "justify-center": legendPosition === "center" },
+        { "justify-start": legendPosition === "left" },
+        { "justify-end": legendPosition === "right" },
+      )}
+    >
       <Legend
         categories={filteredPayload.map((entry: any) => entry.value)}
         colors={filteredPayload.map((entry: any) =>
@@ -492,6 +506,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   connectNulls?: boolean
   xAxisLabel?: string
   yAxisLabel?: string
+  legendPosition?: "left" | "center" | "right"
 }
 
 const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
@@ -521,6 +536,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
       tickGap = 5,
       xAxisLabel,
       yAxisLabel,
+      legendPosition = "right",
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -714,6 +730,8 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
                           onCategoryClick(clickedLegendItem)
                       : undefined,
                     enableLegendSlider,
+                    legendPosition,
+                    yAxisWidth,
                   )
                 }
               />

diff --git a/src/components/LineChart/linechart.stories.tsx b/src/components/LineChart/linechart.stories.tsx
@@ -128,7 +128,11 @@ const chartdata = [
 const meta: Meta<typeof LineChart> = {
   title: "visualization/LineChart",
   component: LineChart,
-  args: { data: chartdata, index: "date", categories: ["SolarCells", "Glass"] },
+  args: {
+    data: chartdata,
+    index: "date",
+    categories: ["SolarCells", "Glass"],
+  },
 }
 
 export default meta
@@ -193,6 +197,18 @@ export const AllColors: Story = {
   },
 }
 
+export const WithLegendLeft: Story = {
+  args: {
+    legendPosition: "left",
+  },
+}
+
+export const WithLegendCenter: Story = {
+  args: {
+    legendPosition: "center",
+  },
+}
+
 export const WithLegendSlider: Story = {
   args: {
     className: "max-w-md",