feat: custom width / fully-responsive charts

src/Components/Charts/BentoBarChart.tsx

@@ -1,13 +1,11 @@
 import React, { useCallback } from 'react';
-import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps } from 'recharts';
+import { BarChart, Bar, Cell, XAxis, YAxis, Tooltip, Label, BarProps, ResponsiveContainer } from 'recharts';
 import {
   TOOL_TIP_STYLE,
   COUNT_STYLE,
   LABEL_STYLE,
-  CHART_WRAPPER_STYLE,
   MAX_TICK_LABEL_CHARS,
   TITLE_STYLE,
-  ASPECT_RATIO,
   TICKS_SHOW_ALL_LABELS_BELOW,
   UNITS_LABEL_OFFSET,
   TICK_MARGIN,
@@ -17,6 +15,7 @@ import type { BarChartProps, CategoricalChartDataItem, TooltipPayload } from '..
 import { useChartTheme, useChartTranslation } from '../../ChartConfigProvider';
 import NoData from '../NoData';
 import { useTransformedChartData } from '../../util/chartUtils';
+import ChartWrapper from './ChartWrapper';
 
 const tickFormatter = (tickLabel: string) => {
   if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
@@ -25,7 +24,9 @@ const tickFormatter = (tickLabel: string) => {
   return `${tickLabel.substring(0, MAX_TICK_LABEL_CHARS)}...`;
 };
 
-const BentoBarChart = ({ height, units, title, onClick, colorTheme = 'default', ...params }: BarChartProps) => {
+const BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
+
+const BentoBarChart = ({ height, width, units, title, onClick, colorTheme = 'default', ...params }: BarChartProps) => {
   const t = useChartTranslation();
   const { fill: chartFill, missing } = useChartTheme().bar[colorTheme];
 
@@ -53,32 +54,34 @@ const BentoBarChart = ({ height, units, title, onClick, colorTheme = 'default',
   //  on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
   //    - David L, 2023-01-03
   return (
-    <div style={CHART_WRAPPER_STYLE}>
+    <ChartWrapper>
       <div style={TITLE_STYLE}>{title}</div>
-      <BarChart width={height * ASPECT_RATIO} height={height} data={data} margin={{ top: 10, bottom: 100, right: 20 }}>
-        <XAxis
-          dataKey="x"
-          height={20}
-          angle={-45}
-          ticks={data.length ? undefined : ['']}
-          tickFormatter={tickFormatter}
-          tickMargin={TICK_MARGIN}
-          textAnchor="end"
-          interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
-        >
-          <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
-        </XAxis>
-        <YAxis>
-          <Label value={t['Count']} offset={-10} position="left" angle={270} />
-        </YAxis>
-        <Tooltip content={<BarTooltip totalCount={totalCount} />} />
-        <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
-          {data.map((entry) => (
-            <Cell key={entry.x} fill={fill(entry)} />
-          ))}
-        </Bar>
-      </BarChart>
-    </div>
+      <ResponsiveContainer width={width ?? "100%"} height={height}>
+        <BarChart data={data} margin={BAR_CHART_MARGINS}>
+          <XAxis
+            dataKey="x"
+            height={20}
+            angle={-45}
+            ticks={data.length ? undefined : ['']}
+            tickFormatter={tickFormatter}
+            tickMargin={TICK_MARGIN}
+            textAnchor="end"
+            interval={data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd'}
+          >
+            <Label value={units} offset={UNITS_LABEL_OFFSET} position="insideBottom" />
+          </XAxis>
+          <YAxis>
+            <Label value={t['Count']} offset={-10} position="left" angle={270} />
+          </YAxis>
+          <Tooltip content={<BarTooltip totalCount={totalCount} />} />
+          <Bar dataKey="y" isAnimationActive={false} onClick={onClick} onMouseEnter={onHover}>
+            {data.map((entry) => (
+              <Cell key={entry.x} fill={fill(entry)} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartWrapper>
   );
 };
 

src/Components/Charts/BentoPie.tsx

@@ -1,15 +1,23 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { PieChart, Pie, Cell, Curve, Tooltip, Sector, PieProps, PieLabelRenderProps } from 'recharts';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Curve,
+  Tooltip,
+  Sector,
+  PieProps,
+  PieLabelRenderProps,
+  ResponsiveContainer,
+} from 'recharts';
 import type CSS from 'csstype';
 
 import {
   TOOL_TIP_STYLE,
   LABEL_STYLE,
   COUNT_STYLE,
   CHART_MISSING_FILL,
-  CHART_WRAPPER_STYLE,
   RADIAN,
-  CHART_ASPECT_RATIO,
   LABEL_THRESHOLD,
   COUNT_TEXT_STYLE,
   TEXT_STYLE,
@@ -23,6 +31,7 @@ import {
 } from '../../ChartConfigProvider';
 import { polarToCartesian, useTransformedChartData } from '../../util/chartUtils';
 import NoData from '../NoData';
+import ChartWrapper from './ChartWrapper';
 
 const labelShortName = (name: string, maxChars: number) => {
   if (name.length <= maxChars) {
@@ -32,11 +41,9 @@ const labelShortName = (name: string, maxChars: number) => {
   return `${name.substring(0, maxChars - 3)}\u2026`;
 };
 
-const OUTER_RADIUS_REDUCTION_FACTOR = 3.75; // originally from 300 / 80
-const INNER_RADIUS_REDUCTION_FACTOR = 8.5; // roughly originally from 300 / 35
-
 const BentoPie = ({
   height,
+  width,
   onClick,
   sort = true,
   colorTheme = 'default',
@@ -97,37 +104,39 @@ const BentoPie = ({
   }, []);
 
   return (
-    <div style={CHART_WRAPPER_STYLE}>
-      <PieChart height={height} width={height * CHART_ASPECT_RATIO}>
-        <Pie
-          data={data}
-          dataKey="value"
-          cx="50%"
-          cy="50%"
-          innerRadius={height / INNER_RADIUS_REDUCTION_FACTOR}
-          outerRadius={height / OUTER_RADIUS_REDUCTION_FACTOR}
-          label={renderLabel(maxLabelChars)}
-          labelLine={false}
-          isAnimationActive={false}
-          onMouseEnter={onEnter}
-          onMouseLeave={onLeave}
-          onMouseOver={onHover}
-          activeIndex={activeIndex}
-          activeShape={RenderActiveLabel}
-          onClick={onClick}
-        >
-          {data.map((entry, index) => {
-            const fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
-            return <Cell key={index} fill={fill} />;
-          })}
-        </Pie>
-        <Tooltip
-          content={<CustomTooltip totalCount={sum} />}
-          isAnimationActive={false}
-          allowEscapeViewBox={{ x: true, y: true }}
-        />
-      </PieChart>
-    </div>
+    <ChartWrapper>
+      <ResponsiveContainer width={width ?? "100%"} height={height}>
+        <PieChart>
+          <Pie
+            data={data}
+            dataKey="value"
+            cx="50%"
+            cy="50%"
+            innerRadius="25%"
+            outerRadius="55%"
+            label={renderLabel(maxLabelChars)}
+            labelLine={false}
+            isAnimationActive={false}
+            onMouseEnter={onEnter}
+            onMouseLeave={onLeave}
+            onMouseOver={onHover}
+            activeIndex={activeIndex}
+            activeShape={RenderActiveLabel}
+            onClick={onClick}
+          >
+            {data.map((entry, index) => {
+              const fill = entry.name.toLowerCase() === 'missing' ? CHART_MISSING_FILL : theme[index % theme.length];
+              return <Cell key={index} fill={fill} />;
+            })}
+          </Pie>
+          <Tooltip
+            content={<CustomTooltip totalCount={sum} />}
+            isAnimationActive={false}
+            allowEscapeViewBox={{ x: true, y: true }}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </ChartWrapper>
   );
 };
 

src/Components/Charts/ChartWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
+
+interface ChartWrapperProps {
+  children: ReactNode;
+}
+
+const ChartWrapper = forwardRef(({children}: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div style={CHART_WRAPPER_STYLE} ref={ref}>
+    {children}
+  </div>
+));
+ChartWrapper.displayName = "ChartWrapper";
+
+export default ChartWrapper;

src/constants/chartConstants.ts

@@ -83,6 +83,8 @@ export const CHART_WRAPPER_STYLE: CSS.Properties = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  overflowX: 'auto',
+  overflowY: 'hidden',
 };
 
 // bar chart
@@ -104,14 +106,12 @@ export const COUNT_TEXT_STYLE: CSS.Properties = {
 
 // ################### CHART CONSTANTS ###################
 // bar chart
-export const ASPECT_RATIO = 1.2;
 export const MAX_TICK_LABEL_CHARS = 15;
 export const UNITS_LABEL_OFFSET = -75;
 export const TICKS_SHOW_ALL_LABELS_BELOW = 11; // Below this # of X-axis ticks, force-show all labels
 export const TICK_MARGIN = 5; // vertical spacing between tick line and tick label
 
 // pie chart
-export const CHART_ASPECT_RATIO = 1.4;
 export const LABEL_THRESHOLD = 0.05;
 
 // ################### UTIL CONSTANTS ###################

src/types/chartTypes.ts

@@ -62,6 +62,9 @@ export interface CategoricalChartDataWithTransforms {
 // ###################  COMPONENT PROPS #####################
 export interface BaseChartComponentProps {
   height: number;
+  // Width is useful to have, to force re-render / force a specific width, but it is optional.
+  // Otherwise, it will be set to 100%.
+  width?: number | string;
 }
 
 export interface BaseCategoricalChartProps extends BaseChartComponentProps, CategoricalChartDataWithTransforms {}

test/js/TestBarChart.tsx

@@ -1,16 +1,27 @@
 import React from 'react';
+import { Typography } from 'antd';
 import { BarChart } from '../../src/index';
 
 const TestBarChart = () => (
-  <BarChart
-    data={[{x: "AB", y: 50}, {x: "NB", y: 75}, {x: "SB", y: 60}]}
-    units="management units"
-    onClick={(f) => {
-      console.log(f);
-      alert(JSON.stringify(f, null, 2));
-    }}
-    height={600}
-  />
+  <>
+    <Typography.Title level={2}>Responsive bar chart:</Typography.Title>
+    <BarChart
+      data={[{x: "AB", y: 50}, {x: "NB", y: 75}, {x: "SB", y: 60}, {x: "AU", y: 30}, {x: "XA", y: 80}]}
+      units="management units"
+      height={600}
+    />
+    <Typography.Title level={2}>Fixed-width bar chart:</Typography.Title>
+    <BarChart
+      data={[{x: "AB", y: 50}, {x: "NB", y: 75}, {x: "SB", y: 60}]}
+      units="management units"
+      onClick={(f) => {
+        console.log(f);
+        alert(JSON.stringify(f, null, 2));
+      }}
+      height={600}
+      width={960}
+    />
+  </>
 );
 
 export default TestBarChart;