React Sankey Diagram – Interactive Data Flow Visualization

import { SankeyComponent, SankeyNodesCollectionDirective, SankeyNodeDirective, SankeyLinksCollectionDirective, SankeyLinkDirective, SankeyLegend, Inject } from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public nodes: any[] = [
    { id: 'Female', label: 'Female (58%)' },
    { id: 'Male', label: 'Male (42%)' },
    { id: 'Tablet', label: 'Tablet (12%)' },
    { id: 'Mobile', label: 'Mobile (40%)' },
    { id: 'Desktop', label: 'Desktop (48%)' },
    { id: '< 18', label: '< 18 years (8%)' },
    { id: '18-26', label: '18-26 years (35%)' },
    { id: '27-40', label: '27-40 years (38%)' },
    { id: '> 40', label: '> 40 years (19%)' }
  ];
 
  public links: any[] = [
    { source: 'Female', target: 'Tablet', value: 12 },
    { source: 'Female', target: 'Mobile', value: 14 },
    { source: 'Female', target: 'Desktop', value: 32 },
    { source: 'Male', target: 'Mobile', value: 26 },
    { source: 'Male', target: 'Desktop', value: 16 },
    { source: 'Tablet', target: '< 18', value: 4 },
    { source: 'Tablet', target: '> 40', value: 8 },
    { source: 'Mobile', target: '< 18', value: 4 },
    { source: 'Mobile', target: '18-26', value: 24 },
    { source: 'Mobile', target: '27-40', value: 10 },
    { source: 'Mobile', target: '> 40', value: 2 },
    { source: 'Desktop', target: '18-26', value: 11 },
    { source: 'Desktop', target: '27-40', value: 28 },
    { source: 'Desktop', target: '> 40', value: 9 }
  ];

  public render() {
    return <SankeyComponent id="sankey" title="Device Usage" nodeStyle=
      linkStyle= legendSettings=>
            <Inject services={[SankeyLegend]} />
            <SankeyNodesCollectionDirective>
              {this.nodes.map((node) => (
                <SankeyNodeDirective key={node.id} id={node.id} label=>
                </SankeyNodeDirective>
              ))}
            </SankeyNodesCollectionDirective>
            <SankeyLinksCollectionDirective>
              {this.links.map((link, i) => (
                <SankeyLinkDirective key={`${link.sourceId}-${link.targetId}-${i}`} sourceId={link.source} targetId={link.target} value={link.value}>
                </SankeyLinkDirective>
              ))}
            </SankeyLinksCollectionDirective>
          </SankeyComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('sankey') as HTMLElement);