Flow Lines.

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-flow-lines.js';
  define0();

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-flow-lines",
      "props": {
        "data": {
          "locations": [
            {
              "id": "seoul",
              "label": "서울",
              "longitude": 126.98,
              "latitude": 37.57
            },
            {
              "id": "tokyo",
              "label": "도쿄",
              "longitude": 139.69,
              "latitude": 35.68
            },
            {
              "id": "taipei",
              "label": "타이베이",
              "longitude": 121.56,
              "latitude": 25.03
            },
            {
              "id": "singapore",
              "label": "싱가포르",
              "longitude": 103.82,
              "latitude": 1.35
            }
          ],
          "flows": [
            {
              "id": "s-t",
              "from": "seoul",
              "to": "tokyo",
              "value": 80
            },
            {
              "id": "s-p",
              "from": "seoul",
              "to": "taipei",
              "value": 45
            },
            {
              "id": "p-s",
              "from": "taipei",
              "to": "singapore",
              "value": 30
            }
          ]
        },
        "mapRegion": "asia",
        "mapBackground": "natural-earth",
        "routePath": "great-circle",
        "locationLabels": "show",
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'flow-lines 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>