Network

import { ChartCard, NetworkChart } from "ztd-charts";

const data = [
  {"from":"Web","to":"Gateway","calls":42},
  {"from":"Mobile app","to":"Gateway","calls":36},
  {"from":"Gateway","to":"Auth","calls":30},
  {"from":"Gateway","to":"Search","calls":18},
  {"from":"Gateway","to":"Catalog","calls":22},
  {"from":"Gateway","to":"Cart","calls":14},
  // … 19 more rows
];

export function Example() {
  return (
    <ChartCard number="40" title="Network" subtitle="Calls per minute between services" takeaway="Payments talks to 7 services" level="advanced" replay>
      <NetworkChart
        data={data}
        source="from"
        target="to"
        value="calls"
        highlight="Payments"
        unit="K"
      />
    </ChartCard>
  );
}