done (#2936)

recharts · Aug 18, 2022 · 3edc3a6 · 3edc3a6
1 parent 6be367c
commit 3edc3a6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx
@@ -746,6 +746,8 @@ export interface CategoricalChartProps {
   cy?: number | string;
   innerRadius?: number | string;
   outerRadius?: number | string;
+  title?: string;
+  desc?: string;
 }
 
 export const generateCategoricalChart = ({
@@ -2091,7 +2093,7 @@ export const generateCategoricalChart = ({
         return null;
       }
 
-      const { children, className, width, height, style, compact, ...others } = this.props;
+      const { children, className, width, height, style, compact, title, desc, ...others } = this.props;
       const attrs = filterProps(others);
       const map = {
         CartesianGrid: { handler: this.renderGrid, once: true },
@@ -2119,7 +2121,7 @@ export const generateCategoricalChart = ({
       // The "compact" mode is mainly used as the panorama within Brush
       if (compact) {
         return (
-          <Surface {...attrs} width={width} height={height}>
+          <Surface {...attrs} width={width} height={height} title={title} desc={desc}>
             {this.renderClipPath()}
             {renderByOrder(children, map)}
           </Surface>
@@ -2136,7 +2138,7 @@ export const generateCategoricalChart = ({
             this.container = node;
           }}
         >
-          <Surface {...attrs} width={width} height={height}>
+          <Surface {...attrs} width={width} height={height} title={title} desc={desc}>
             {this.renderClipPath()}
             {renderByOrder(children, map)}
           </Surface>

diff --git a/src/container/Surface.tsx b/src/container/Surface.tsx
@@ -17,6 +17,8 @@ interface SurfaceProps {
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
+  title?: string;
+  desc?: string;
 }
 
 export type Props = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & SurfaceProps;
@@ -36,6 +38,8 @@ export function Surface(props: Props) {
       viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`}
       version="1.1"
     >
+      <title>{props.title}</title>
+      <desc>{props.desc}</desc>
       {children}
     </svg>
   );

diff --git a/test/specs/chart/LineChartSpec.js b/test/specs/chart/LineChartSpec.js
@@ -36,6 +36,16 @@ describe('<LineChart />', () => {
     expect(wrapper.find('.recharts-line .recharts-line-curve').length).to.equal(1);
   });
 
+  it('Sets title and description correctly', () => {
+    const wrapper = mount(
+      <LineChart title="Chart title" desc="Chart description" width={400} height={400} data={data}>
+        <Line type="monotone" dataKey="uv" />
+      </LineChart>,
+    );
+    expect(wrapper.find('title').text()).to.equal('Chart title');
+    expect(wrapper.find('desc').text()).to.equal('Chart description');
+  });
+
   it('Render smooth curve when type of Line is monotone', () => {
     const wrapper = render(
       <LineChart width={400} height={400} data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>