Visual Map.

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

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

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "tag": "sy-heatmap",
      "id": "chart-target",
      "props": {
        "data": [
          {
            "x": 0,
            "y": 0,
            "value": 10
          },
          {
            "x": 1,
            "y": 0,
            "value": 27
          },
          {
            "x": 2,
            "y": 0,
            "value": 44
          },
          {
            "x": 3,
            "y": 0,
            "value": 61
          },
          {
            "x": 4,
            "y": 0,
            "value": 78
          },
          {
            "x": 5,
            "y": 0,
            "value": 95
          },
          {
            "x": 0,
            "y": 1,
            "value": 22
          },
          {
            "x": 1,
            "y": 1,
            "value": 39
          },
          {
            "x": 2,
            "y": 1,
            "value": 56
          },
          {
            "x": 3,
            "y": 1,
            "value": 73
          },
          {
            "x": 4,
            "y": 1,
            "value": 90
          },
          {
            "x": 5,
            "y": 1,
            "value": 17
          },
          {
            "x": 0,
            "y": 2,
            "value": 34
          },
          {
            "x": 1,
            "y": 2,
            "value": 51
          },
          {
            "x": 2,
            "y": 2,
            "value": 68
          },
          {
            "x": 3,
            "y": 2,
            "value": 85
          },
          {
            "x": 4,
            "y": 2,
            "value": 12
          },
          {
            "x": 5,
            "y": 2,
            "value": 29
          },
          {
            "x": 0,
            "y": 3,
            "value": 46
          },
          {
            "x": 1,
            "y": 3,
            "value": 63
          },
          {
            "x": 2,
            "y": 3,
            "value": 80
          },
          {
            "x": 3,
            "y": 3,
            "value": 97
          },
          {
            "x": 4,
            "y": 3,
            "value": 24
          },
          {
            "x": 5,
            "y": 3,
            "value": 41
          },
          {
            "x": 0,
            "y": 4,
            "value": 58
          },
          {
            "x": 1,
            "y": 4,
            "value": 75
          },
          {
            "x": 2,
            "y": 4,
            "value": 92
          },
          {
            "x": 3,
            "y": 4,
            "value": 19
          },
          {
            "x": 4,
            "y": 4,
            "value": 36
          },
          {
            "x": 5,
            "y": 4,
            "value": 53
          }
        ],
        "height": 280,
        "width": 640
      }
    },
    {
      "id": "example-chart",
      "tag": "sy-visual-map",
      "props": {
        "for": "chart-target",
        "type": "continuous",
        "dimension": "value",
        "min": 0,
        "max": 100,
        "calculable": true,
        "color": ["#eee6ff", "#8263d9", "#34265d"],
        "width": 640,
        "height": 64
      }
    }
  ];
  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', 'visual-map 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('rangeChange', event.detail);
  };
  chart.addEventListener('rangeChange', 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('rangeChange', onEvent);
    container.replaceChildren();
  }
</script>