Merge pull request #227 from brainstormforce/responsive-line-chart

fix: Line chart and Table component responsive issues
brainstormforce · Dec 23, 2024 · ecf9376 · ecf9376
2 parents 4f86f28 + 5b04b4b
commit ecf9376
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 62 deletions.
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
@@ -5,6 +5,7 @@ import {
 	YAxis,
 	CartesianGrid,
 	Tooltip,
+	ResponsiveContainer,
 } from 'recharts';
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
@@ -64,10 +65,10 @@ interface LineChartProps {
 	yAxisFontColor?: string;
 
 	/** Width of the chart container. */
-	chartWidth?: number;
+	chartWidth?: number | string;
 
 	/** Height of the chart container. */
-	chartHeight?: number;
+	chartHeight?: number | string;
 
 	/** Determines whether dots are shown on each data point. */
 	withDots?: boolean;
@@ -124,56 +125,59 @@ const LineChart = ( {
 	}
 
 	return (
-		<LineChartWrapper
-			{ ...lineChartWrapperProps }
-			width={ chartWidth }
-			height={ chartHeight }
-			data={ data }
-		>
-			{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
-			{ showXAxis && (
-				<XAxis
-					dataKey={ xAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tickFormatter={ tickFormatter }
-					tick={ { fontSize: fontSizeVariant, fill: xAxisFontColor } }
-				/>
-			) }
-			{ showYAxis && (
-				<YAxis
-					dataKey={ yAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tick={ { fontSize: fontSizeVariant, fill: yAxisFontColor } }
-				/>
-			) }
-
-			{ showTooltip && (
-				<Tooltip
-					content={
-						<ChartTooltipContent
-							indicator={ tooltipIndicator }
-							labelKey={ tooltipLabelKey }
-						/>
-					}
-				/>
-			) }
-
-			{ dataKeys.map( ( key, index ) => (
-				<Line
-					key={ key }
-					type="natural"
-					dataKey={ key }
-					stroke={ appliedColors[ index ].stroke }
-					fill={ appliedColors[ index ].stroke }
-					strokeWidth={ 2 }
-					dot={ withDots }
-				/>
-			) ) }
-		</LineChartWrapper>
+		<ResponsiveContainer width={ chartWidth } height={ chartHeight }>
+			<LineChartWrapper { ...lineChartWrapperProps } data={ data }>
+				{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
+				{ showXAxis && (
+					<XAxis
+						dataKey={ xAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tickFormatter={ tickFormatter }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: xAxisFontColor,
+						} }
+					/>
+				) }
+				{ showYAxis && (
+					<YAxis
+						dataKey={ yAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: yAxisFontColor,
+						} }
+					/>
+				) }
+
+				{ showTooltip && (
+					<Tooltip
+						content={
+							<ChartTooltipContent
+								indicator={ tooltipIndicator }
+								labelKey={ tooltipLabelKey }
+							/>
+						}
+					/>
+				) }
+
+				{ dataKeys.map( ( key, index ) => (
+					<Line
+						key={ key }
+						type="natural"
+						dataKey={ key }
+						stroke={ appliedColors[ index ].stroke }
+						fill={ appliedColors[ index ].stroke }
+						strokeWidth={ 2 }
+						dot={ withDots }
+					/>
+				) ) }
+			</LineChartWrapper>
+		</ResponsiveContainer>
 	);
 };
 

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -216,16 +216,20 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="flow-root overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
-				<table
-					className={ cn(
-						'table-fixed min-w-full border-collapse border-spacing-0',
-						className
-					) }
-					{ ...props }
-				>
-					{ restChildren }
-				</table>
+			<div className="flow-root divide-y divide-x-0 divide-solid divide-border-subtle">
+				<div className="overflow-x-auto w-full">
+					<div className="relative">
+						<table
+							className={ cn(
+								'table-fixed min-w-full border-collapse border-spacing-0',
+								className
+							) }
+							{ ...props }
+						>
+							{ restChildren }
+						</table>
+					</div>
+				</div>
 				{ footer }
 			</div>
 		</TableContext.Provider>