Use react-virtualized-auto-sizer for responsive charts

cypress/src/components/bar/Bar.cy.tsx

@@ -1,18 +1,35 @@
-import { Bar } from '@nivo/bar'
+import { ResponsiveProps } from '@nivo/core'
+import { Bar, ResponsiveBar, BarDatum, BarSvgProps } from '@nivo/bar'
+import { testChartResponsiveness } from '../../helpers/responsive'
 
-describe('<Bar />', () => {
+const defaultData: BarDatum[] = [
+    { id: 'one', value: 10 },
+    { id: 'two', value: 20 },
+    { id: 'three', value: 30 },
+]
+
+const defaultResponsiveProps: ResponsiveProps<BarSvgProps<BarDatum>> = {
+    data: defaultData,
+    animate: false,
+    role: 'chart',
+}
+
+const defaultProps: BarSvgProps<BarDatum> = {
+    ...defaultResponsiveProps,
+    width: 500,
+    height: 300,
+}
+
+describe('Bar', () => {
     it('should render a bar chart', () => {
-        cy.mount(
-            <Bar
-                width={500}
-                height={300}
-                data={[
-                    { id: 'one', value: 10 },
-                    { id: 'two', value: 20 },
-                    { id: 'three', value: 30 },
-                ]}
-                animate={false}
-            />
-        )
+        cy.mount(<Bar {...defaultProps} />, { strict: true })
     })
+
+    testChartResponsiveness(defaults => (
+        <ResponsiveBar
+            {...defaultResponsiveProps}
+            defaultWidth={defaults?.[0]}
+            defaultHeight={defaults?.[1]}
+        />
+    ))
 })

cypress/src/components/bar/BarCanvas.cy.tsx

@@ -1,6 +1,7 @@
-import { BarCanvas } from '@nivo/bar'
+import { BarCanvas, ResponsiveBarCanvas } from '@nivo/bar'
+import { testChartResponsiveness } from '../../helpers/responsive'
 
-describe('<BarCanvas />', () => {
+describe('BarCanvas', () => {
     it('should render a bar chart', () => {
         cy.mount(
             <BarCanvas
@@ -14,4 +15,18 @@ describe('<BarCanvas />', () => {
             />
         )
     })
+
+    testChartResponsiveness(defaults => (
+        <ResponsiveBarCanvas
+            data={[
+                { id: 'one', value: 10 },
+                { id: 'two', value: 20 },
+                { id: 'three', value: 30 },
+            ]}
+            role="chart"
+            pixelRatio={1}
+            defaultWidth={defaults?.[0]}
+            defaultHeight={defaults?.[1]}
+        />
+    ))
 })

cypress/src/components/boxplot/BoxPlot.cy.tsx

@@ -0,0 +1,53 @@
+import { ResponsiveProps } from '@nivo/core'
+import { BoxPlot, ResponsiveBoxPlot, BoxPlotSvgProps } from '@nivo/boxplot'
+import { testChartResponsiveness } from '../../helpers/responsive'
+
+// dataset with two groups
+const dataGroups = [
+    { group: 'Alpha', value: 1 },
+    { group: 'Alpha', value: 5 },
+    { group: 'Beta', value: 2 },
+    { group: 'Beta', value: 10 },
+]
+
+type SingleGroupDatum = (typeof dataGroups)[number]
+
+// dataset with two groups and two subgroups
+const dataSubGroups = [
+    { group: 'Alpha', type: 'A', value: 10 },
+    { group: 'Alpha', type: 'A', value: 10.5 },
+    { group: 'Alpha', type: 'B', value: 11 },
+    { group: 'Alpha', type: 'B', value: 11.5 },
+]
+
+const defaultResponsiveProps: ResponsiveProps<BoxPlotSvgProps<any>> = {
+    data: dataGroups,
+    margin: {
+        top: 0,
+        right: 0,
+        bottom: 24,
+        left: 24,
+    },
+    animate: false,
+    role: 'chart',
+}
+
+const defaultProps: BoxPlotSvgProps<any> = {
+    ...defaultResponsiveProps,
+    width: 500,
+    height: 300,
+}
+
+describe('BoxPlot', () => {
+    it('should render a boxplot chart', () => {
+        cy.mount(<BoxPlot<SingleGroupDatum> {...defaultProps} />)
+    })
+
+    testChartResponsiveness(defaults => (
+        <ResponsiveBoxPlot<SingleGroupDatum>
+            defaultWidth={defaults?.[0]}
+            defaultHeight={defaults?.[1]}
+            {...defaultResponsiveProps}
+        />
+    ))
+})

cypress/src/components/bullet/Bullet.cy.tsx

@@ -0,0 +1,55 @@
+import { ResponsiveProps } from '@nivo/core'
+import { Bullet, ResponsiveBullet, BulletSvgProps } from '@nivo/bullet'
+import { testChartResponsiveness } from '../../helpers/responsive'
+
+const defaultData = [
+    {
+        id: 'A',
+        ranges: [10, 20, 40],
+        measures: [30],
+        markers: [20],
+    },
+    {
+        id: 'B',
+        ranges: [100],
+        measures: [20, 50],
+        markers: [80],
+    },
+    {
+        id: 'C',
+        ranges: [50],
+        measures: [10],
+    },
+]
+
+const defaultResponsiveProps: ResponsiveProps<BulletSvgProps> = {
+    data: defaultData,
+    margin: {
+        top: 0,
+        right: 24,
+        bottom: 24,
+        left: 24,
+    },
+    animate: false,
+    role: 'chart',
+}
+
+const defaultProps: BulletSvgProps = {
+    ...defaultResponsiveProps,
+    width: 500,
+    height: 300,
+}
+
+describe('Bullet', () => {
+    it('should render a bullet chart', () => {
+        cy.mount(<Bullet {...defaultProps} />)
+    })
+
+    testChartResponsiveness(defaults => (
+        <ResponsiveBullet
+            defaultWidth={defaults?.[0]}
+            defaultHeight={defaults?.[1]}
+            {...defaultResponsiveProps}
+        />
+    ))
+})

cypress/src/components/bump/AreaBump.cy.tsx

@@ -0,0 +1,106 @@
+import { ResponsiveProps } from '@nivo/core'
+import { AreaBump, ResponsiveAreaBump, AreaBumpSvgProps } from '@nivo/bump'
+import { testChartResponsiveness } from '../../helpers/responsive'
+
+interface Datum {
+    x: number
+    y: number
+}
+
+const defaultData = [
+    {
+        id: 'A',
+        data: [
+            {
+                x: 2000,
+                y: 9,
+            },
+            {
+                x: 2001,
+                y: 9,
+            },
+            {
+                x: 2002,
+                y: 2,
+            },
+            {
+                x: 2003,
+                y: 4,
+            },
+        ],
+    },
+    {
+        id: 'B',
+        data: [
+            {
+                x: 2000,
+                y: 8,
+            },
+            {
+                x: 2001,
+                y: 3,
+            },
+            {
+                x: 2002,
+                y: 1,
+            },
+            {
+                x: 2003,
+                y: 7,
+            },
+        ],
+    },
+    {
+        id: 'C',
+        data: [
+            {
+                x: 2000,
+                y: 12,
+            },
+            {
+                x: 2001,
+                y: 4,
+            },
+            {
+                x: 2002,
+                y: 5,
+            },
+            {
+                x: 2003,
+                y: 6,
+            },
+        ],
+    },
+]
+
+const defaultResponsiveProps: ResponsiveProps<AreaBumpSvgProps<Datum, {}>> = {
+    data: defaultData,
+    margin: {
+        top: 24,
+        right: 40,
+        bottom: 24,
+        left: 40,
+    },
+    animate: false,
+    role: 'chart',
+}
+
+const defaultProps: AreaBumpSvgProps<Datum, {}> = {
+    ...defaultResponsiveProps,
+    width: 500,
+    height: 300,
+}
+
+describe('AreaBump', () => {
+    it('should render an area-bump chart', () => {
+        cy.mount(<AreaBump {...defaultProps} />)
+    })
+
+    testChartResponsiveness(defaults => (
+        <ResponsiveAreaBump
+            defaultWidth={defaults?.[0]}
+            defaultHeight={defaults?.[1]}
+            {...defaultResponsiveProps}
+        />
+    ))
+})