feat(charts): add Sankey chart

Author: dlabrecq

jest.config.ts

@@ -19,9 +19,9 @@ const config: Config = {
     '^.+\\.m?[jt]sx?$': 'babel-jest',
     '^.+\\.svg$': 'jest-transform-stub'
   },
-  setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/packages/testSetup.ts', 'jest-canvas-mock'],
   testPathIgnorePatterns: ['<rootDir>/packages/react-integration/'],
-  transformIgnorePatterns: ['node_modules/victory-*/', '/node_modules/(?!(case-anything)/)'],
+  transformIgnorePatterns: ['/node_modules/victory-*/', '/node_modules/(?!(chart\\.js|echarts|zrender)).*\\.js$'],
   coveragePathIgnorePatterns: ['/dist/'],
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/packages/react-styles/__mocks__/styleMock.js'

packages/react-charts/package.json

@@ -7,6 +7,9 @@
   "types": "dist/esm/index.d.ts",
   "typesVersions": {
     "*": {
+      "echarts": [
+        "dist/esm/echarts/index.d.ts"
+      ],
       "victory": [
         "dist/esm/victory/index.d.ts"
       ]
@@ -42,7 +45,13 @@
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
+  "devDependencies": {
+    "@types/lodash": "^4.17.15",
+    "fs-extra": "^11.3.0",
+    "jest-canvas-mock": "^2.5.2"
+  },
   "peerDependencies": {
+    "echarts": "^5.6.0",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "victory-area": "^37.3.6",
@@ -64,6 +73,9 @@
     "victory-zoom-container": "^37.3.6"
   },
   "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    },
     "victory-area": {
       "optional": true
     },
@@ -120,9 +132,5 @@
     "clean": "rimraf dist echarts victory",
     "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.17.15",
-    "fs-extra": "^11.3.0"
   }
 }

packages/react-charts/single-packages.config.json

@@ -1,4 +1,4 @@
 {
   "packageName": "@patternfly/react-charts",
-  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+  "exclude": ["dist/esm/deprecated/index.js"]
 }

packages/react-charts/src/echarts/__mocks__/echarts.ts

@@ -0,0 +1,6 @@
+const echarts: any = jest.createMockFromModule('echarts');
+echarts.init = jest.fn(() => ({
+  setOption: jest.fn(),
+  dispose: jest.fn()
+}));
+module.exports = echarts;

packages/react-charts/src/echarts/components/charts/Line/Line.tsx

@@ -0,0 +1,13 @@
+import defaultsDeep from 'lodash/defaultsDeep';
+
+import { ThemeDefinition } from '../../themes/Theme';
+
+export const getLineSeries = (serie: any, theme: ThemeDefinition, isSkeleton: boolean) => {
+  const defaults = {
+    emphasis: {
+      ...(isSkeleton ? { disabled: true } : { focus: 'adjacency' })
+    },
+    type: 'line'
+  };
+  return defaultsDeep(serie, defaults);
+};

packages/react-charts/src/echarts/components/charts/Line/__tests__/Line.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { setupJestCanvasMock } from 'jest-canvas-mock';
+import { render, screen } from '@testing-library/react';
+import { PatternflyECharts } from '@patternfly/react-charts/echarts';
+
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+
+// Register required components
+echarts.use([GridComponent, LineChart, SVGRenderer, TitleComponent, TooltipComponent]);
+
+beforeEach(() => {
+  jest.resetAllMocks();
+  jest.mock('echarts');
+  setupJestCanvasMock();
+});
+
+const props: any = {
+  height: 400,
+  id: 'line-chart',
+  option: {
+    xAxis: {
+      type: 'category',
+      data: ['2015', '2016', '2017', '2018']
+    },
+    yAxis: {
+      axisLabel: {
+        formatter: (value) => (value !== 0 ? `${value}` : '')
+      },
+      splitNumber: 3,
+      type: 'value'
+    },
+    series: [
+      {
+        data: [1, 2, 5, 3],
+        name: 'Cats',
+        type: 'line'
+      },
+      {
+        data: [2, 1, 7, 4],
+        name: 'Dogs',
+        lineStyle: {
+          type: 'dashed'
+        },
+        type: 'line'
+      },
+      {
+        data: [3, 4, 9, 5],
+        name: 'Birds',
+        type: 'line'
+      },
+      {
+        data: [3, 3, 8, 7],
+        name: 'Mice',
+        type: 'line'
+      }
+    ],
+    title: {
+      text: 'This is a Line chart'
+    }
+  },
+  width: 800
+};
+
+// Remove dynamic _echarts_instance_ ID
+const removeInstanceID = (fragment) => {
+  fragment.getElementById('line-chart').removeAttribute('_echarts_instance_');
+  return fragment;
+};
+
+test('renders component', () => {
+  const { asFragment } = render(<PatternflyECharts {...props} />);
+  expect(removeInstanceID(asFragment())).toMatchSnapshot();
+});
+
+test('renders title', async () => {
+  render(<PatternflyECharts {...props} />);
+
+  const title = await screen.findByText(props.option.title.text);
+  expect(title).toMatchSnapshot();
+});
+
+test('renders height and width', async () => {
+  const { asFragment } = render(<PatternflyECharts {...props} />);
+
+  const svg = asFragment().querySelector('svg');
+  expect(svg).toHaveAttribute('height', `${props.height}`);
+  expect(svg).toHaveAttribute('width', `${props.width}`);
+});