//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//
//!    Arrange large sequences of data into grids to simplify navigation.

import KeyLines from "keylines";
import { data } from "./packandstack-data.js";

let chart;

const optionsDiv = document.querySelector(".cicontent");
const inputs = optionsDiv && optionsDiv.querySelectorAll('input[type="radio"]');

function runLayout() {
  const stacking = document.querySelector(
    'input[name="multi-row-grid"]:checked'
  ).value;
  const packing = document.querySelector('input[name="packing"]:checked').value;
  const stretchType = document.querySelector(
    'input[name="stretchType"]:checked'
  ).value;

  const layoutOpts = {
    stacking: {
      arrange: stacking,
    },
    stretchType,
    packing,
    linkShape: "curved",
  };

  chart.layout("sequential", layoutOpts);
}

function initChart() {
  chart.load(data);
  runLayout();
}

async function startKeyLines() {
  const options = {
    handMode: true,
    minZoom: 0.001,
  };

  chart = await KeyLines.create({ container: "klchart", options });

  initChart();

  inputs.forEach((input) => {
    input.addEventListener("change", runLayout);
  });
}

window.addEventListener("DOMContentLoaded", startKeyLines);

<!DOCTYPE html>
<html lang="en" style="background-color: #2d383f;">
  <head>
    <meta charset="UTF-8">
    <title>Navigate Large Hierarchies</title>
    <link rel="stylesheet" type="text/css" href="/css/keylines.css">
    <link rel="stylesheet" type="text/css" href="/css/minimalsdk.css">
    <link rel="stylesheet" type="text/css" href="/css/sdk-layout.css">
    <link rel="stylesheet" type="text/css" href="/css/demo.css">
    <script src="/vendor/jquery.js" defer type="text/javascript"></script>
    <script id="keylines" src="/public/keylines.umd.cjs" defer type="text/javascript"></script>
    <script src="/vendor/webfontloader.js" defer type="text/javascript"></script>
    <script src="/packandstack.js" crossorigin="use-credentials" type="module"></script>
  </head>
  <body>
    <div class="chart-wrapper demo-cols">
      <div class="tab-content-panel flex1" id="lhs" data-tab-group="rhs">
        <div class="toggle-content is-visible" id="lhsVisual" style="width:100%; height: 100%;">
          <div class="klchart" id="klchart">
          </div>
        </div>
      </div>
      <div class="rhs citext closed" id="demorhscontent">
        <div class="title-bar">
          <svg viewBox="0 0 360 60" style="max-width: 360px; max-height: 60px; font-size: 24px; font-family: Raleway; flex: 1;">
            <text x="0" y="38" style="width: 100%;">Navigate Large Hierarchies</text>
          </svg>
        </div>
        <div class="tab-content-panel" data-tab-group="rhs">
          <div class="toggle-content is-visible tabcontent" id="controlsTab">
            <p>Transform the challenging dataset into an efficient layout with grids and component packing.</p>
            <form autocomplete="off" onsubmit="return false" id="rhsForm">
              <div class="cicontent">
                <fieldset>
                  <legend>Layout Options</legend>
                  <h5 style="margin-top:1px">Group stacking</h5>
                  <label class="radio">
                    <input type="radio" name="multi-row-grid" value="none"> None
                  </label>
                  <label class="radio">
                    <input type="radio" name="multi-row-grid" value="grid" checked="checked"> Grid
                  </label>
                  <h5 style="margin-top:1px">Component packing</h5>
                  <label class="radio">
                    <input type="radio" name="packing" value="aligned"> Aligned
                  </label>
                  <label class="radio">
                    <input type="radio" name="packing" value="rectangle" checked="checked"> Rectangle
                  </label>
                  <h5 style="margin-top:1px">Stretch type</h5>
                  <label class="radio">
                    <input type="radio" name="stretchType" value="auto"> Auto
                  </label>
                  <label class="radio">
                    <input type="radio" name="stretchType" value="equal" checked="checked"> Equal
                  </label>
                </fieldset>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div id="moreParent">
      <div id="moreContainer">
      </div>
    </div>
    <div id="lazyScripts">
    </div>
  </body>
</html>
Loading source