feat(echarts): sankey

packages/react-charts/.gitignore

@@ -0,0 +1,2 @@
+/next
+/components

packages/react-charts/package.json

@@ -5,6 +5,13 @@
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "next": [
+        "dist/esm/next/index.d.ts"
+      ]
+    }
+  },
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -30,6 +37,7 @@
   "dependencies": {
     "@patternfly/react-styles": "workspace:^",
     "@patternfly/react-tokens": "workspace:^",
+    "echarts": "^5.5.1",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4.17.21",
     "tslib": "^2.6.3",
@@ -56,10 +64,12 @@
     "react-dom": "^17 || ^18"
   },
   "scripts": {
-    "clean": "rimraf dist",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json"
+    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "clean": "rimraf dist components next",
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "devDependencies": {
+    "@types/echarts": "^4.9.22",
     "@types/lodash": "^4.17.6",
     "fs-extra": "^11.2.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/next/components/Sankey/Sankey.test.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+// import * as echarts from 'echarts';
+import { render } from '@testing-library/react';
+import { Sankey } from './Sankey';
+
+const data = [
+  {
+    name: 'a'
+  },
+  {
+    name: 'b'
+  },
+  {
+    name: 'a1'
+  },
+  {
+    name: 'a2'
+  },
+  {
+    name: 'b1'
+  },
+  {
+    name: 'c'
+  }
+];
+
+const links = [
+  {
+    source: 'a',
+    target: 'a1',
+    value: 5
+  },
+  {
+    source: 'a',
+    target: 'a2',
+    value: 3
+  },
+  {
+    source: 'b',
+    target: 'b1',
+    value: 8
+  },
+  {
+    source: 'a',
+    target: 'b1',
+    value: 3
+  },
+  {
+    source: 'b1',
+    target: 'a1',
+    value: 1
+  },
+  {
+    source: 'b1',
+    target: 'c',
+    value: 2
+  }
+];
+
+let spy: any;
+
+// beforeAll(() => {
+//   console.log(`*** TEST 1`);
+//   spy = jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(
+//     () =>
+//       ({
+//         hideLoading: jest.fn(),
+//         setOption: jest.fn(),
+//         showLoading: jest.fn()
+//       }) as any
+//   );
+// });
+//
+// afterAll(() => {
+//   console.log(`*** TEST 2`);
+//   spy.mockRestore();
+// });
+
+// See https://stackoverflow.com/questions/54921743/testing-echarts-react-component-with-jest-echartelement-is-null
+xtest('renders component data', () => {
+  const { asFragment } = render(<Sankey opts={{ renderer: 'svg' }} series={[{ data, links }]} />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-charts/src/next/components/Sankey/Sankey.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { useRef } from 'react';
+// import { BarChart, SankeyChart } from 'echarts/charts';
+// import { CanvasRenderer } from 'echarts/renderers';
+
+// import {
+//   TitleComponent,
+//   TooltipComponent,
+//   GridComponent,
+//   DatasetComponent,
+//   TransformComponent
+// } from 'echarts/components';
+
+// Register the required components
+// echarts.use([
+//   BarChart,
+//   SankeyChart,
+//   TitleComponent,
+//   TooltipComponent,
+//   GridComponent,
+//   DatasetComponent,
+//   TransformComponent,
+//   LabelLayout,
+//   UniversalTransition,
+//   CanvasRenderer
+// ]);
+
+import { theme } from './theme';
+
+/**
+ */
+export interface SankeyProps {
+  height?: number;
+  id?: string;
+  lineStyle?: any;
+  opts?: any;
+  series: any[];
+  title?: any;
+  tooltip?: any;
+  width?: number;
+}
+
+export const Sankey: React.FunctionComponent<SankeyProps> = ({
+  height,
+  id,
+  lineStyle = {
+    color: 'source',
+    opacity: 0.6
+  },
+  opts,
+  series,
+  title,
+  tooltip = {
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  width
+}: SankeyProps) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const echart = useRef<echarts.ECharts>();
+
+  React.useEffect(() => {
+    echarts.registerTheme('pf-v5-sankey', theme);
+    echart.current = echarts.init(containerRef.current, 'pf-v5-sankey', opts); // renderer: 'svg'
+
+    const newSeries = series.map((serie: any) => ({
+      emphasis: {
+        focus: 'adjacency'
+      },
+      layout: 'none',
+      lineStyle,
+      type: 'sankey',
+      ...serie
+    }));
+
+    echart.current?.setOption({
+      series: newSeries,
+      title,
+      tooltip
+    });
+  }, [containerRef, lineStyle, opts, series, title, tooltip]);
+
+  React.useEffect(() => {
+    echart.current?.resize();
+  }, [height, width]);
+
+  const getSize = () => ({
+    ...(height && { height: `${height}px` }),
+    ...(width && { width: `${width}px` })
+  });
+
+  return <div id={id} ref={containerRef} style={getSize()} />;
+};
+Sankey.displayName = 'Sankey';

packages/react-charts/src/next/components/Sankey/examples/Basic.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Sankey } from '@patternfly/react-charts/next';
+import { getResizeObserver } from '@patternfly/react-core';
+
+export const FormBasic: React.FunctionComponent = () => {
+  const data = [
+    {
+      name: 'a'
+    },
+    {
+      name: 'b'
+    },
+    {
+      name: 'a1'
+    },
+    {
+      name: 'a2'
+    },
+    {
+      name: 'b1'
+    },
+    {
+      name: 'c'
+    }
+  ];
+
+  const links = [
+    {
+      source: 'a',
+      target: 'a1',
+      value: 5
+    },
+    {
+      source: 'a',
+      target: 'a2',
+      value: 3
+    },
+    {
+      source: 'b',
+      target: 'b1',
+      value: 8
+    },
+    {
+      source: 'a',
+      target: 'b1',
+      value: 3
+    },
+    {
+      source: 'b1',
+      target: 'a1',
+      value: 1
+    },
+    {
+      source: 'b1',
+      target: 'c',
+      value: 2
+    }
+  ];
+
+  // let observer = () => {};
+  const containerRef = React.useRef<HTMLDivElement>();
+  const [width, setWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current && containerRef.current.clientWidth) {
+        setWidth(containerRef.current.clientWidth);
+      }
+    };
+    let observer = () => {};
+    observer = getResizeObserver(containerRef.current, handleResize);
+
+    return () => {
+      observer();
+    };
+  }, [containerRef, width]);
+
+  return (
+    <div ref={containerRef}>
+      <Sankey
+        height={400}
+        series={[{ data, links }]}
+        title={{
+          subtext: 'This is a Sankey chart',
+          left: 'center'
+        }}
+        width={width}
+      />
+    </div>
+  );
+};

packages/react-charts/src/next/components/Sankey/examples/Sankey.md

@@ -0,0 +1,23 @@
+---
+id: Sankey
+section: charts
+propComponents: [
+  'Sankey',
+]
+hideDarkMode: true
+beta: true
+---
+
+import { Sankey } from '@patternfly/react-charts/next';
+
+## Introduction
+Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
+
+PatternFly React charts are based on the [Apache ECharts](https://echarts.apache.org/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
+
+## Examples
+### Basic
+
+```ts file="./Basic.tsx"
+
+```

packages/react-charts/src/next/components/Sankey/index.ts

@@ -0,0 +1 @@
+export * from './Sankey';