Metro Network Hub

import React from 'react';
import { TreeChart } from 'treecharts-react';

// Train station network - all-direction metro system
const trainStationData = {
  value: "Central Station",
  child: [
    {
      value: "East Junction",
      edgeText: "5 min",
      child: [
        {
          value: "Shopping Mall",
          edgeText: "3 min",
          child: [
            {
              value: "Science Park",
              edgeText: "4 min",
              child: [],
            },
          ],
        },
      ],
    },
    {
      value: "South Terminal",
      edgeText: "4 min",
      nodeConfig: {
        color: "orange",
        fontColor: "white",
        fontSize: 10,
      },
      child: [
        {
          value: "B District",
          edgeText: "3 min",
          nodeConfig: {
            color: "orange",
            fontColor: "white",
            fontSize: 10,
          },
          child: [],
        },
      ],
    },
    {
      value: "West Junction",
      edgeText: "6 min",
      child: [
        {
          value: "Airport Express",
          edgeText: "8 min",
          child: [
            {
              value: "Financial Plaza",
              edgeText: "2 min",
              child: [],
            },
          ],
        },
      ],
    },
    {
      value: "North Terminal",
      edgeText: "3 min",
      nodeConfig: {
        color: "green",
        fontColor: "white",
        fontSize: 10,
      },
      child: [
        {
          value: "University District",
          edgeText: "2 min",
          nodeConfig: {
            color: "green",
            fontColor: "white",
            fontSize: 10,
          },
          child: [],
        },
      ],
    },
  ],
};

export default function TrainStationExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={trainStationData}
        type="all-direction"
        nodeConfig={{
          height: 30,
          color: "blue",
          fontColor: "white",
          fontSize: 10,
        }}
        edgeConfig={{
          color: "blue",
          width: 6,
        }}
        titleConfig={{
          title: "Metro Network Hub",
        }}
      />
    </div>
  );
}