Search

Styling Charts

Styling

Get the perfect look and feel for your network.

Styling Charts
View live example →

This demo shows the level of customisation available with KeyLines. You can adapt almost every aspect of a chart to fit the style or theme of your application.

Each view uses a combination of chart, time bar and layout options to produce a wide variety of chart styles.

Take a look at the different results to see just how versatile KeyLines can be.

Key functions used:

import KeyLines from "keylines";
import styles from "./stylingcharts-styles.js";

let selectedStyle;
let chart;
let timebar;
let timeBarShown = false;
let previousSelection = [];
let lightMonochromeSelection = {};
let customNav = [];
// Highlight the selected nodes activity in the timebar
function showSelection() {
  const items = [];
  const selectedIds = chart.selection();
  let neighbouringNodes = [];

  selectedIds.forEach((id, index) => {
    const item = chart.getItem(id);
    let links = [];
    if (item.type === "node") {
      const neighbours = chart.graph().neighbours(id, { all: true });
      links = neighbours.links;
      neighbouringNodes = neighbours.nodes;
    } else {
      links.push(id);
      neighbouringNodes.push(item.id1, item.id2);
    }
    items.push({
      id: links,
      index,
      c: selectedStyle.name === "minimalist" ? "#333" : "#ddd",
    });
  });

  timebar.selection(items);
}
// synchronise the timebar and chart displayed data
function onTimeBarChange() {
  chart.filter(timebar.inRange, { animate: false, type: "link" });
}

// Toggle timeBar visibility
let range = {};
async function toggleTimeBar() {
  timeBarShown = !timeBarShown;
  // If the timebar is hidden update the chart height
  // remove all the events linked to the hidden timebar and save the selected range.
  // Follow the oposite procedure when loading the timebar
  const container = document.getElementById("klchart").parentNode;
  if (timeBarShown) {
    container.classList.remove("timeBarHidden");
    chart.on("selection-change", showSelection);
    if (document.fullscreenElement) {
      const { dt1, dt2 } = range;
      timebar.range(dt1, dt2);
    }
    timebar.on("change", onTimeBarChange);
  } else {
    container.classList.add("timeBarHidden");
    chart.off("selection-change", showSelection);
    range = timebar.range();
    timebar.off("change");
  }
}

function onFontIconSelectionChange() {
  const selectedStyling = previousSelection || [];
  previousSelection = [];
  chart.selection().forEach((selectedId) => {
    const selectedItem = chart.getItem(selectedId);
    if (selectedItem.type === "node") {
      const isActor = selectedItem.d.type === "actor";
      const styleSelected = {
        id: selectedId,
        fi: {
          t: selectedItem.fi.t,
          ff: selectedItem.fi.ff,
          c: "#3A474E",
        },
      };
      const revertStyling = {
        id: selectedId,
        fi: {
          t: selectedItem.fi.t,
          ff: selectedItem.fi.ff,
          c: isActor ? "#e0f2f1" : "#f0f4c3",
        },
      };
      selectedStyling.push(styleSelected);
      previousSelection.push(revertStyling);
    }
  });
  chart.setProperties(selectedStyling);
}

function toggleNodeLabel({ id, modifierKeys }) {
  if (id === "_overviewIcon") return;
  if (!id || (chart.getItem(id).type === "link" && !modifierKeys.shift)) {
    Object.keys(lightMonochromeSelection).forEach((key) => {
      chart.setProperties({ id: key, t: undefined });
    });
    lightMonochromeSelection = {};
    return;
  }

  if (lightMonochromeSelection[id] && !chart.selection().includes(id)) {
    chart.setProperties({ id, t: undefined });
    delete lightMonochromeSelection[id];
  } else {
    lightMonochromeSelection[id] = true;
    chart.setProperties({ id, t: chart.getItem(id).d?.labelText });
  }
}

async function loadNewstyle() {
  // Load the chart & timebar options
  if (selectedStyle.styleOptions.chartOptions) {
    if (selectedStyle.styleOptions.timebarDisplayed) {
      timebar.options(selectedStyle.styleOptions.timeBarOptions);
    }
    chart.options(selectedStyle.styleOptions.chartOptions);
  }

  // Load the style data for both chart and timebar
  if (selectedStyle.styleOptions.data) {
    const promises = [];
    if (selectedStyle.styleOptions.timebarDisplayed) {
      timebar.load(selectedStyle.styleOptions.data);
      promises.push(timebar.zoom("fit"));
    }
    chart.load(selectedStyle.styleOptions.data);
    promises.push(chart.zoom("fit"));
    await Promise.all(promises);
  }

  // Remove previous used events
  chart.off("selection-change", onFontIconSelectionChange);
  chart.off("click", toggleNodeLabel);
  const props = [];
  const nodeColors = {};
  // Set the styling properties as defined by the style for the nodes & links
  if (selectedStyle.styleOptions.nodes) {
    chart.each({ type: "node" }, (item) => {
      const nodeStyles = Object.assign(
        {},
        selectedStyle.styleOptions.nodes.mainStyle,
        selectedStyle.styleOptions.nodes[item.d.type] || {}
      );
      props.push(Object.assign({ id: item.id }, nodeStyles));
      if (selectedStyle.styleOptions.links.gradient) {
        nodeColors[item.id] = nodeStyles.fi.c;
      }
    });
  }
  if (selectedStyle.styleOptions.links) {
    chart.each({ type: "link" }, (item) => {
      const linkStyles = selectedStyle.styleOptions.links.gradient
        ? Object.assign(selectedStyle.styleOptions.links, {
            c: nodeColors[item.id1],
            c2: nodeColors[item.id2],
          })
        : selectedStyle.styleOptions.links;
      props.push(Object.assign({ id: item.id }, linkStyles));
    });
  }
  // Show the custom style navigation controls
  if (selectedStyle.styleOptions.customNavigation) {
    customNav = document.getElementsByClassName(selectedStyle.name);
    for (let i = 0; i < customNav.length; i++) {
      customNav[i].style.display = "block";
    }
    // Update the colour of the custom navigation for the minimalist dark style
    if (selectedStyle.name.indexOf("minimalist") === 0) {
      document.getElementById("timeBar").style.color =
        selectedStyle.name === "minimalistDark" ? "#ddd" : "black";
    }
  }
  // Attach style specific events
  if (selectedStyle.name === "awesomeGloom") {
    chart.on("selection-change", onFontIconSelectionChange);
  }

  if (selectedStyle.name === "lightMonochrome") {
    chart.on("click", toggleNodeLabel);
  }

  chart.setProperties(props);

  // Load the layout and its options
  await chart.layout(
    selectedStyle.styleOptions.layout.name,
    selectedStyle.styleOptions.layout.layoutOptions
  );

  // Run custom style donut animation
  if (selectedStyle.name === "popArt") {
    chart.each({ type: "node" }, (node) => {
      props.push({
        id: node.id,
        donut: {
          w: 10,
          bw: 2,
        },
      });
    });
    chart.animateProperties(props, { time: 300, easing: "cubic" });
  }
  if (selectedStyle.styleOptions.timebarDisplayed && !timeBarShown) {
    await toggleTimeBar();
  }
  return true;
}

async function hidePreviousstyleControls(event) {
  // hide previous style description
  document.getElementById(`${selectedStyle.name}Descr`).style.display = "none";
  // hide previous custom navigation
  if (selectedStyle.styleOptions.customNavigation) {
    for (let i = 0; i < customNav.length; i++) {
      customNav[i].style.display = "none";
    }
  }
  // hide timebar if you leave a minimalist style
  if (selectedStyle.styleOptions.timebarDisplayed && timeBarShown) {
    if (!styles[event.value].styleOptions.timebarDisplayed) {
      await toggleTimeBar();
    }
  }
  // update the selected style
  selectedStyle = styles[event.value];
  // show the new style description
  document.getElementById(`${selectedStyle.name}Descr`).style.display = "block";

  return true;
}

async function hidePreviousData() {
  const chartItems = chart.serialize().items;
  // get all the ids of the serialized data
  const itemIds = chartItems.map((elem) => elem.id);
  // hide the items with animation
  await chart.hide(itemIds, { animate: true, time: 1000 });
  // remove the data from the timebar
  if (timeBarShown) {
    timebar.clear();
  }
}

async function applystyle() {
  await hidePreviousstyleControls(this);
  await hidePreviousData();
  await loadNewstyle();
  return true;
}

function doZoom(name) {
  chart.zoom(name, { animate: true, time: 350 });
}

// Attach the custom interactions used in all the styles
function intialiseInteractions() {
  document.getElementById("style-choice").addEventListener("change", applystyle);
  document.getElementById("home").addEventListener("click", () => {
    doZoom("fit");
  });
  document.getElementById("zoomIn").addEventListener("click", () => {
    doZoom("in");
  });
  document.getElementById("zoomOut").addEventListener("click", () => {
    doZoom("out");
  });
  document.getElementById("timeBar").addEventListener("click", toggleTimeBar);
  document.getElementById("timeBarZoom").addEventListener("click", () => {
    timebar.zoom("fit");
  });
}

// Load the initial minimalist style on both chart and timebar
async function klReady(loadedChart) {
  chart = loadedChart[0];
  timebar = loadedChart[1];
  selectedStyle = styles.minimalist;
  await loadNewstyle();
  intialiseInteractions();
}

async function startKeyLines() {
  const options = {
    chartOptions: {
      iconFontFamily: "Font Awesome 5 Free",
      navigation: {
        shown: false,
      },
    },
    timeBarOptions: {
      showControlBar: false,
      sliders: "none",
    },
  };

  chart = await KeyLines.create([
    {
      container: "klchart",
      type: "chart",
      options: options.chartOptions,
    },
    {
      container: "kltimebar",
      type: "timebar",
      options: options.timeBarOptions,
    },
  ]);
  klReady(chart);
}

function loadAndStart() {
  document.fonts.load('24px "Font Awesome 5 Free"').then(startKeyLines);
}

window.addEventListener("DOMContentLoaded", loadAndStart);
import { data, shadows, donuts, matrix, lightStyle } from "./stylingcharts-data.js";

const styles = {};

function getImageAlignment() {
  const imageAlignment = {};
  const fontIconAlignmentDefinitions = {
    "fas fa-video": { e: 0.8 },
    "fas fa-desktop": { e: 0.9 },
  };
  // get a list of the font icon class names
  const icons = Object.keys(fontIconAlignmentDefinitions);
  icons.forEach((icon) => {
    // find the unicode value of each, and add to the imageAlignment object
    imageAlignment[icon] = fontIconAlignmentDefinitions[icon];
  });
  return imageAlignment;
}

// Generate random date data for the time bar styles for the minimalist styles
function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

data.items.forEach((item) => {
  const startDate = new Date(2018, 0, 1);
  const endDate = new Date();
  if (item.type === "link") {
    const dt1 = randomDate(startDate, endDate);
    // Choose an end up to 30 days after the start
    const dt2 = randomDate(dt1, new Date(dt1.getTime() + 1000 * 60 * 60 * 24 * 30));
    item.dt = { dt1, dt2 };
  }
});

// Minimalist definition
const minimalist = {
  name: "minimalist",
  styleOptions: {
    data,
    chartOptions: {
      arrows: "small",
      logo: false,
      navigation: {
        shown: false,
      },
      overview: {
        backColour: "white",
        borderColour: "lightgrey",
        icon: true,
      },
      backColour: "#fff",
      fontFamily: "sans-serif",
      selectedNode: {
        ha0: {
          r: 52,
          w: 8,
          c: "#ffcb00",
        },
        fbc: "rgba(0,0,0,0)",
        c: "#ffcb00",
      },
      selectedLink: {
        c: "#ffcb00",
        w: 5,
      },
    },
    timeBarOptions: {
      area: { colour: "#b3b3b3" },
      backColour: "#fff",
      fontColour: "#444",
      fontFamily: "sans-serif",
      maxRange: {
        units: "year",
        value: 3,
      },
      minScale: {
        units: "min",
      },
      scale: {
        highlightColour: "rgba(0,0,0,0)",
      },
      showControlBar: false,
      sliders: "none",
      type: "area",
    },
    nodes: {
      mainStyle: {
        c: "white",
        b: "#444",
        fbc: "rgba(0,0,0,0)",
        fc: "#444",
        fs: 22,
        tc: false,
        e: 1,
        bw: 1,
      },
    },
    links: {
      c: "#444",
      w: 1,
      a2: true,
    },
    layout: {
      name: "organic",
      layoutOptions: null,
    },
    customNavigation: true,
    timebarDisplayed: true,
  },
};

// Invert the colours of the minimalist style
// Minimalist Dark definition
const minimalistDark = {
  name: "minimalistDark",
  styleOptions: {
    data,
    chartOptions: {
      arrows: "normal",
      backColour: "#123",
      overview: { icon: false, shown: false },
      fontFamily: "georgia",
      selectedNode: {
        ha0: {
          r: 35,
          w: 5,
          c: "#f2f2f2",
        },
        fbc: "#f2f2f2",
        fc: "#123",
      },
      selectedLink: {
        c: "#f2f2f2",
        w: 5,
      },
    },
    timeBarOptions: {
      backColour: "#123",
      fontColour: "#ddd",
      fontFamily: "georgia",
      histogram: {
        colour: "#808c99",
        highlightColour: "#606B77",
      },
      maxRange: {
        units: "month",
        value: 24,
      },
      minScale: {
        units: "week",
        value: 2,
      },
      scale: {
        highlightColour: "#204060",
      },
      showControlBar: false,
      sliders: "free",
      sliderColour: "rgba(17, 34, 51, 0.6)",
      sliderLineColour: "#ddd",
      type: "histogram",
    },
    nodes: {
      mainStyle: {
        c: "#606B77",
        b: "#ddd",
        fc: "#ddd",
        fbc: "rgba(0,0,0,0)",
        fs: 22,
        tc: false,
        e: 1,
        bw: 1,
      },
    },
    links: {
      c: "#ddd",
      w: 1,
      a2: true,
    },
    layout: {
      name: "organic",
      layoutOptions: null,
    },
    customNavigation: true,
    timebarDisplayed: true,
  },
};

// Name Badges definition
// Create the two different types of glyphs displayed on the style

shadows.items.forEach((item) => {
  if (item.type === "node") {
    item.g = [
      { r: 45, w: true, b: "rgba(0,0,0,0)", t: item.d.fullName, fc: "#444", ff: "sans-serif" },
    ];
    if (item.t === "JP" || item.t === "DM") {
      item.g[0] = Object.assign(item.g[0], { p: 45, e: 1.5, c: "rgba(200,200,200,0.8)" });
      item.c = "#FFBF00";
      item.e = 2;
      item.fc = "#444";
    } else {
      item.g[0] = Object.assign(item.g[0], { p: 180, e: 2, c: "rgba(0,0,0,0)" });
      item.c = "#FF6352";
      item.fc = "white";
      item.e = 1;
    }
  }
});

const nameBadges = {
  name: "nameBadges",
  styleOptions: {
    data: shadows,
    chartOptions: {
      arrows: "normal",
      backColour: "#E8E8E8",
      overview: {
        backColour: "#CECECE",
        borderColour: "#888888",
        icon: true,
      },
      selectedNode: {
        bs: "dashed",
        b: "#FF7062",
        fb: "rgba(255, 112, 98,0.6)",
      },
      selectedLink: {
        c: "#FF7062",
        ls: "dashed",
      },
    },
    nodes: {
      mainStyle: {
        b: "white",
        fbc: "rgba(0,0,0,0)",
        fs: 22,
        tc: true,
        bw: 7,
        ha0: { c: "rgba(220,220,220,1)", r: 34, w: 1 },
        ha1: { c: "rgba(220,220,220,0.8)", r: 35, w: 1 },
        ha2: { c: "rgba(220,220,220,0.6)", r: 36, w: 1 },
        ha3: { c: "rgba(220,220,220,0.4)", r: 37, w: 1 },
        ha4: { c: "rgba(220,220,220,0.2)", r: 38, w: 1 },
        ff: "sans-serif",
      },
    },
    links: {
      c: "#888",
      t: "",
      off: 0,
      w: 3,
      a2: true,
    },
    layout: {
      name: "hierarchy",
      layoutOptions: {
        linkShape: "curved",
        top: ["343116", "343130"],
        tightness: 3.5,
      },
    },
    timebarDisplayed: false,
  },
};

// Pop Art definition
// Set random values for the donuts, glyphs and link width,
// assign levels for the sequential layout and set custon enlargment values
// for specific nodes.
donuts.items.forEach((item) => {
  if (item.type === "node") {
    item.donut = {
      c: ["#FFBF00", "#7F9FFF", "#FF9F7F", "#CFFFBF"],
      w: 0,
      b: "#112251",
      bw: 0,
      v: [Math.random() * 3, 2, Math.random() * 5, 3],
    };

    item.g = [
      {
        p: 0,
        r: 0,
        c: "white",
        b: "white",
        fc: "#444",
        e: 2.4,
        t: Math.round(Math.random() * 10, 1).toString(),
      },
    ];

    // Mid level node
    if (item.d.reports && donuts.items.find((donutItem) => donutItem.d.reports === item.t)) {
      item.d.level = 1;
      item.e = 2;
    } else {
      item.e = 1;
      // Top level node who reports to no one
      if (!item.d.reports) {
        item.d.level = 0;
      } else {
        item.d.level = 2;
      }
    }
  } else {
    item.w = Math.round(Math.random() * 20, 1);
  }
});

const popArt = {
  name: "popArt",
  styleOptions: {
    data: donuts,
    chartOptions: {
      arrows: "normal",
      backColour: "#112251",
      fontFamily: "American Typewriter",
      overview: { icon: false, shown: false },
      selectedNode: {
        ha0: {
          r: 45,
          w: 15,
          c: "#FF7062",
        },
        fbc: "#FF7062",
        fc: "white",
      },
      selectedLink: {
        c: "#FF7062",
        ls: "dotted",
      },
    },
    nodes: {
      mainStyle: {
        fc: "#FF9F7F",
        c: "white",
        b: "#444",
        fbc: "rgba(0,0,0,0)",
        fs: 22,
        tc: false,
        bw: 1,
      },
    },
    links: {
      c: "#eee",
      a2: true,
    },
    layout: {
      name: "sequential",
      layoutOptions: {
        top: [],
        level: "level",
        straighten: false,
        stretch: 1.5,
        linkShape: "curved",
      },
    },
    timebarDisplayed: false,
  },
};

// Aweseome Gloom definition
// Assign different font icons & font families depending on whether the node is an actor or
// a movie
const awesomeGloom = {
  name: "awesomeGloom",
  styleOptions: {
    data: matrix,
    chartOptions: {
      arrows: "normal",
      navigation: { shown: false },
      backColour: "#37474f",
      fontFamily: "sans-serif",
      overview: { icon: false, shown: false },
      selectedNode: {
        fs: 20,
        c: "#f0f4c3",
        fc: "#cfd8dc",
      },
      selectedLink: {
        c: "#f0f4c3",
      },
      imageAlignment: getImageAlignment(),
    },
    nodes: {
      mainStyle: {
        c: "rgba(0,0,0,0)",
        tc: false,
        fbc: "rgba(0,0,0,0)",
        fc: "#cfd8dc",
        fb: true,
        b: "#607d8b",
        bw: 1,
      },
      actor: {
        fs: 12,
        fi: {
          t: "far fa-user",
          ff: "Font Awesome 5 Free",
          c: "#e0f2f1",
        },
      },
      movie: {
        fs: 15,
        fi: { t: "fas fa-video", ff: "Font Awesome 5 Free", c: "#f0f4c3" },
      },
    },
    links: {
      w: 2,
      c: "#62727b",
    },
    layout: {
      name: "lens",
      layoutOptions: null,
    },
    customNavigation: true,
    timebarDisplayed: false,
  },
};

// Assign the appropriate styling depending on node type defined above and set link gradients
const lightMonochrome = {
  name: "lightMonochrome",
  styleOptions: {
    data: lightStyle,
    chartOptions: {
      arrows: "normal",
      backColour: "#fff",
      fontFamily: "sans-serif",
      overview: {
        backColour: "#fff",
        borderColour: "#df2020",
        icon: true,
      },
      selectedNode: {
        b: "#808080",
        c: "rgba(242,242,242,0.8)",
        fbc: "rgba(255,255,255,0.7)",
        fc: "#595959",
        fs: 20,
        e: 2.5,
        fb: true,
      },
      selectedLink: {
        c: "#333333",
        c2: "#333333",
        w: 10,
      },
      imageAlignment: getImageAlignment(),
    },
    nodes: {
      mainStyle: {
        fc: "rgba(0,0,0,0)",
        fbc: "rgba(0,0,0,0)",
        c: "rgba(0,0,0,0)",
      },
      server: {
        fi: {
          t: "fas fa-server",
          c: "#cc3333",
        },
      },
      service: {
        fi: {
          t: "fas fa-mobile-alt",
          c: "#a65959",
        },
      },
      business: {
        fi: {
          t: "fas fa-dollar-sign",
          c: "#808080",
        },
      },
      san: {
        fi: {
          t: "fas fa-globe",
          c: "#df2020",
        },
      },
      virtual: {
        fi: {
          t: "fas fa-desktop",
          c: "#b94646",
        },
      },
    },
    links: {
      w: 4,
      off: 0,
      a2: true,
      gradient: true,
    },
    layout: {
      name: "radial",
      layoutOptions: {
        top: ["141"],
        tightness: 0,
      },
    },
    customNavigation: true,
    timebarDisplayed: false,
  },
};

// Push the separately defined styles into the main styles object
const createdStyles = [
  minimalist,
  minimalistDark,
  nameBadges,
  popArt,
  awesomeGloom,
  lightMonochrome,
];
createdStyles.forEach((elem) => {
  const newStyle = {};
  newStyle[elem.name] = Object.assign({}, elem);
  Object.assign(styles, newStyle);
});

export default styles;
export const matrix = {
  type: "LinkChart",
  items: [
    {
      id: "movie/603",
      type: "node",
      t: "The Matrix",
      d: {
        _key: "603",
        _id: "movie/603",
        _rev: "_YrWXWPi--W",
        id: "603",
        releaseDate: "922831200000",
        title: "The Matrix",
        tagline: "Welcome to the Real World.",
        language: "en",
        lastModified: "1299968642000",
        studio: "Warner Bros. Pictures",
        genre: "Action",
        imdbId: "tt0133093",
        version: 324,
        runtime: 136,
        oscar: true,
        type: "movie",
      },
      e: 1.7,
    },
    {
      id: "actor/9372",
      type: "node",
      t: "Marcus Chong",
      d: {
        _key: "9372",
        _id: "actor/9372",
        _rev: "_YrWXWRq-Au",
        name: "Marcus Chong",
        id: "9372",
        lastModified: "1300090454000",
        version: 25,
        gender: "male",
        type: "actor",
      },
      e: 1,
    },
    {
      id: "links/793",
      type: "link",
      t: "",
      id1: "actor/9372",
      id2: "movie/603",
      d: {
        _key: "793",
        _id: "links/793",
        _from: "actor/9372",
        _to: "movie/603",
        _rev: "_YrWXWT2--l",
        name: "Tank",
        type: "acts_in",
      },
    },
    {
      id: "actor/9384",
      type: "node",
      t: "Marc Aden",
      d: {
        _key: "9384",
        _id: "actor/9384",
        _rev: "_YrWXWRq-A0",
        name: "Marc Aden",
        id: "9384",
        lastModified: "1300090407000",
        version: 24,
        birthplace: "",
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/815",
      type: "link",
      t: "",
      id1: "actor/9384",
      id2: "movie/603",
      d: {
        _key: "815",
        _id: "links/815",
        _from: "actor/9384",
        _to: "movie/603",
        _rev: "_YrWXWT2--w",
        name: "Choi",
        type: "acts_in",
      },
    },
    {
      id: "actor/9378",
      type: "node",
      t: "Anthony Ray Parker",
      d: {
        _key: "9378",
        _id: "actor/9378",
        _rev: "_YrWXWRq-Ax",
        name: "Anthony Ray Parker",
        id: "9378",
        lastModified: "1300090408000",
        version: 23,
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/809",
      type: "link",
      t: "",
      id1: "actor/9378",
      id2: "movie/603",
      d: {
        _key: "809",
        _id: "links/809",
        _from: "actor/9378",
        _to: "movie/603",
        _rev: "_YrWXWT2--t",
        name: "Dozer",
        type: "acts_in",
      },
    },
    {
      id: "actor/1331",
      type: "node",
      t: "Hugo Weaving",
      d: {
        _key: "1331",
        _id: "actor/1331",
        _rev: "_YrWXWRm-__",
        name: "Hugo Weaving",
        id: "1331",
        lastModified: "1299490766000",
        version: 176,
        birthday: "-307501200000",
        birthplace: "Ibadan, Nigeria",
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/791",
      type: "link",
      t: "",
      id1: "actor/1331",
      id2: "movie/603",
      d: {
        _key: "791",
        _id: "links/791",
        _from: "actor/1331",
        _to: "movie/603",
        _rev: "_YrWXWT2--k",
        name: "Agent Smith",
        type: "acts_in",
      },
    },
    {
      id: "actor/2975",
      type: "node",
      t: "Laurence Fishburne",
      d: {
        _key: "2975",
        _id: "actor/2975",
        _rev: "_YrWXWRq-_X",
        name: "Laurence Fishburne",
        id: "2975",
        lastModified: "1299689631000",
        version: 177,
        birthday: "-265856400000",
        birthplace: "Augusta, Georgia, United States",
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/779",
      type: "link",
      t: "",
      id1: "actor/2975",
      id2: "movie/603",
      d: {
        _key: "779",
        _id: "links/779",
        _from: "actor/2975",
        _to: "movie/603",
        _rev: "_YrWXWT2--e",
        name: "Morpheus",
        type: "acts_in",
      },
    },
    {
      id: "actor/7244",
      type: "node",
      t: "Julian Arahanga",
      d: {
        _key: "7244",
        _id: "actor/7244",
        _rev: "_YrWXWRq-AG",
        name: "Julian Arahanga",
        id: "7244",
        lastModified: "1299491788000",
        version: 26,
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/799",
      type: "link",
      t: "",
      id1: "actor/7244",
      id2: "movie/603",
      d: {
        _key: "799",
        _id: "links/799",
        _from: "actor/7244",
        _to: "movie/603",
        _rev: "_YrWXWT2--o",
        name: "Apoc",
        type: "acts_in",
      },
    },
    {
      id: "actor/532",
      type: "node",
      t: "Joe Pantoliano",
      d: {
        _key: "532",
        _id: "actor/532",
        _rev: "_YrWXWRm--c",
        name: "Joe Pantoliano",
        id: "532",
        lastModified: "1299791865000",
        version: 104,
        birthday: "-577674000000",
        birthplace: "Hoboken, NJ",
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/803",
      type: "link",
      t: "",
      id1: "actor/532",
      id2: "movie/603",
      d: {
        _key: "803",
        _id: "links/803",
        _from: "actor/532",
        _to: "movie/603",
        _rev: "_YrWXWT2--q",
        name: "Cypher",
        type: "acts_in",
      },
    },
    {
      id: "actor/530",
      type: "node",
      t: "Carrie-Anne Moss",
      d: {
        _key: "530",
        _id: "actor/530",
        _rev: "_YrWXWRm--b",
        name: "Carrie-Anne Moss",
        id: "530",
        lastModified: "1299490737000",
        version: 79,
        birthday: "-74653200000",
        birthplace: "Burnaby, British Columbia, Canada",
        gender: "female",
        type: "actor",
      },
    },
    {
      id: "links/773",
      type: "link",
      t: "",
      id1: "actor/530",
      id2: "movie/603",
      d: {
        _key: "773",
        _id: "links/773",
        _from: "actor/530",
        _to: "movie/603",
        _rev: "_YrWXWT2--b",
        name: "Trinity",
        type: "acts_in",
      },
    },
    {
      id: "actor/9374",
      type: "node",
      t: "Matt Doran",
      d: {
        _key: "9374",
        _id: "actor/9374",
        _rev: "_YrWXWRq-Av",
        name: "Matt Doran",
        id: "9374",
        lastModified: "1300090324000",
        version: 48,
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/807",
      type: "link",
      t: "",
      id1: "actor/9374",
      id2: "movie/603",
      d: {
        _key: "807",
        _id: "links/807",
        _from: "actor/9374",
        _to: "movie/603",
        _rev: "_YrWXWT2--s",
        name: "Mouse",
        type: "acts_in",
      },
    },
    {
      id: "actor/9380",
      type: "node",
      t: "Paul Goddard",
      d: {
        _key: "9380",
        _id: "actor/9380",
        _rev: "_YrWXWRq-Ay",
        name: "Paul Goddard",
        id: "9380",
        lastModified: "1300090400000",
        version: 28,
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/811",
      type: "link",
      t: "",
      id1: "actor/9380",
      id2: "movie/603",
      d: {
        _key: "811",
        _id: "links/811",
        _from: "actor/9380",
        _to: "movie/603",
        _rev: "_YrWXWT2--u",
        name: "Agent Brown",
        type: "acts_in",
      },
    },
    {
      id: "actor/9376",
      type: "node",
      t: "Belinda McClory",
      d: {
        _key: "9376",
        _id: "actor/9376",
        _rev: "_YrWXWRq-Aw",
        name: "Belinda McClory",
        id: "9376",
        lastModified: "1300090407000",
        version: 26,
        gender: "female",
        type: "actor",
      },
    },
    {
      id: "links/801",
      type: "link",
      t: "",
      id1: "actor/9376",
      id2: "movie/603",
      d: {
        _key: "801",
        _id: "links/801",
        _from: "actor/9376",
        _to: "movie/603",
        _rev: "_YrWXWT2--p",
        name: "Switch",
        type: "acts_in",
      },
    },
    {
      id: "actor/9364",
      type: "node",
      t: "Gloria Foster",
      d: {
        _key: "9364",
        _id: "actor/9364",
        _rev: "_YrWXWRq-At",
        name: "Gloria Foster",
        id: "9364",
        lastModified: "1300090344000",
        version: 31,
        gender: "female",
        type: "actor",
      },
    },
    {
      id: "links/797",
      type: "link",
      t: "",
      id1: "actor/9364",
      id2: "movie/603",
      d: {
        _key: "797",
        _id: "links/797",
        _from: "actor/9364",
        _to: "movie/603",
        _rev: "_YrWXWT2--n",
        name: "Oracle",
        type: "acts_in",
      },
    },
    {
      id: "actor/6384",
      type: "node",
      t: "Keanu Reeves",
      d: {
        _key: "6384",
        _id: "actor/6384",
        _rev: "_YrWXWRq-_8",
        name: "Keanu Reeves",
        id: "6384",
        lastModified: "1299880293000",
        version: 190,
        birthday: "-168224400000",
        birthplace: "Beirut, Lebanon",
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/765",
      type: "link",
      t: "",
      id1: "actor/6384",
      id2: "movie/603",
      d: {
        _key: "765",
        _id: "links/765",
        _from: "actor/6384",
        _to: "movie/603",
        _rev: "_YrWXWT2--X",
        name: "Neo",
        type: "acts_in",
      },
    },
    {
      id: "actor/9383",
      type: "node",
      t: "David Aston",
      d: {
        _key: "9383",
        _id: "actor/9383",
        _rev: "_YrWXWRq-Az",
        name: "David Aston",
        id: "9383",
        lastModified: "1300090394000",
        version: 24,
        gender: "male",
        type: "actor",
      },
    },
    {
      id: "links/813",
      type: "link",
      t: "",
      id1: "actor/9383",
      id2: "movie/603",
      d: {
        _key: "813",
        _id: "links/813",
        _from: "actor/9383",
        _to: "movie/603",
        _rev: "_YrWXWT2--v",
        name: "Rhineheart",
        type: "acts_in",
      },
    },
  ],
};

export const data = {
  type: "LinkChart",
  items: [
    { id: "343116-343246", type: "link", id1: "343116", id2: "343246", d: { count: 200 }, t: "" },
    { id: "343116-343244", type: "link", id1: "343116", id2: "343244", d: { count: 199 }, t: "" },
    { id: "343116-343229", type: "link", id1: "343116", id2: "343229", d: { count: 175 }, t: "" },
    { id: "343116-343213", type: "link", id1: "343116", id2: "343213", d: { count: 196 }, t: "" },
    { id: "343116-343212", type: "link", id1: "343116", id2: "343212", d: { count: 47 }, t: "" },
    { id: "343116-343178", type: "link", id1: "343116", id2: "343178", d: { count: 175 }, t: "" },
    { id: "343116-343175", type: "link", id1: "343116", id2: "343175", d: { count: 203 }, t: "" },
    { id: "343116-343149", type: "link", id1: "343116", id2: "343149", d: { count: 191 }, t: "" },
    { id: "343116-343200", type: "link", id1: "343116", id2: "343200", d: { count: 171 }, t: "" },
    { id: "343116-343115", type: "link", id1: "343116", id2: "343115", d: { count: 127 }, t: "" },
    { id: "343121-343116", type: "link", id1: "343121", id2: "343116", d: { count: 39 }, t: "" },
    { id: "343213-343116", type: "link", id1: "343213", id2: "343116", d: { count: 25 }, t: "" },
    { id: "343121-343130", type: "link", id1: "343121", id2: "343130", d: { count: 60 }, t: "" },
    { id: "343130-343169", type: "link", id1: "343130", id2: "343169", d: { count: 28 }, t: "" },
    { id: "343130-343119", type: "link", id1: "343130", id2: "343119", d: { count: 41 }, t: "" },
    { id: "343130-343121", type: "link", id1: "343130", id2: "343121", d: { count: 37 }, t: "" },
    { id: "343130-343266", type: "link", id1: "343130", id2: "343266", d: { count: 23 }, t: "" },
    { id: "343130-343203", type: "link", id1: "343130", id2: "343203", d: { count: 34 }, t: "" },
    { id: "343119-343130", type: "link", id1: "343119", id2: "343130", d: { count: 44 }, t: "" },
    { id: "343119-343121", type: "link", id1: "343119", id2: "343121", d: { count: 33 }, t: "" },
    { id: "343203-343130", type: "link", id1: "343203", id2: "343130", d: { count: 50 }, t: "" },
    { id: "343119-343129", type: "link", id1: "343119", id2: "343129", d: { count: 24 }, t: "" },
    { id: "343169-343130", type: "link", id1: "343169", id2: "343130", d: { count: 28 }, t: "" },
    {
      type: "node",
      id: "343115",
      t: "Maria Barker",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 4 },
    },
    {
      type: "node",
      id: "343116",
      t: "Justin Patel",
      d: { email: "[email protected]", sent: 311 },
    },
    {
      type: "node",
      id: "343119",
      t: "Denise Wheeler",
      d: { email: "[email protected]", reports: "Debbie McConnell", sent: 385 },
    },
    {
      type: "node",
      id: "343121",
      t: "Alicia Smith",
      d: { email: "[email protected]", reports: "Debbie McConnell", sent: 147 },
    },
    {
      type: "node",
      id: "343129",
      t: "Cindy Jenkins",
      d: { email: "[email protected]", reports: "Denise Wheeler", sent: 72 },
    },
    {
      type: "node",
      id: "343130",
      t: "Debbie McConnell",
      d: { email: "[email protected]", sent: 420 },
    },
    {
      type: "node",
      id: "343149",
      t: "Kristen Taylor",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 4 },
    },
    {
      type: "node",
      id: "343169",
      t: "Brandon Jackson",
      d: { email: "[email protected]", sent: 196 },
    },
    {
      type: "node",
      id: "343175",
      t: "Patrick Newman",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 34 },
    },
    {
      type: "node",
      id: "343178",
      t: "Rhonda Johnson",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 1 },
    },
    {
      type: "node",
      id: "343200",
      t: "Michael Smith",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 6 },
    },
    {
      type: "node",
      id: "343203",
      t: "Stephanie Bell",
      d: { email: "[email protected]", reports: "Joshua Cervantes", sent: 89 },
    },
    {
      type: "node",
      id: "343212",
      t: "Juan Rangel",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 1 },
    },
    {
      type: "node",
      id: "343213",
      t: "Kristin Cook",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 39 },
    },
    {
      type: "node",
      id: "343229",
      t: "Karen Brown",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 11 },
    },
    {
      type: "node",
      id: "343244",
      t: "Donald Hahn",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 23 },
    },
    {
      type: "node",
      id: "343246",
      t: "Jessica Wright",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 24 },
    },
    {
      type: "node",
      id: "343266",
      t: "Andrea Tucker",
      d: { email: "[email protected]", reports: "Richard Evans", sent: 66 },
    },
  ],
};

export const shadows = {
  type: "LinkChart",
  items: [
    { id: "343116-343246", type: "link", id1: "343116", id2: "343246", d: { count: 200 } },
    { id: "343116-343244", type: "link", id1: "343116", id2: "343244", d: { count: 199 } },
    { id: "343116-343229", type: "link", id1: "343116", id2: "343229", d: { count: 175 } },
    { id: "343116-343213", type: "link", id1: "343116", id2: "343213", d: { count: 196 } },
    { id: "343116-343178", type: "link", id1: "343116", id2: "343178", d: { count: 175 } },
    { id: "343116-343149", type: "link", id1: "343116", id2: "343149", d: { count: 191 } },
    { id: "343116-343200", type: "link", id1: "343116", id2: "343200", d: { count: 171 } },
    { id: "343116-343115", type: "link", id1: "343116", id2: "343115", d: { count: 127 } },
    { id: "343130-343169", type: "link", id1: "343130", id2: "343169", d: { count: 28 } },
    { id: "343130-343119", type: "link", id1: "343130", id2: "343119", d: { count: 41 } },
    { id: "343130-343266", type: "link", id1: "343130", id2: "343266", d: { count: 23 } },
    { id: "343130-343203", type: "link", id1: "343130", id2: "343203", d: { count: 34 } },
    { id: "343119-343129", type: "link", id1: "343119", id2: "343129", d: { count: 24 } },
    {
      type: "node",
      id: "343115",
      t: "MB",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 4,
        fullName: "Maria Barker",
      },
    },
    {
      type: "node",
      id: "343116",
      t: "JP",
      d: { email: "[email protected]", sent: 311, fullName: "Justin Patel" },
    },
    {
      type: "node",
      id: "343119",
      t: "DW",
      d: {
        email: "[email protected]",
        reports: "Debbie McConnell",
        sent: 385,
        fullName: "Denise Wheeler",
      },
    },
    {
      type: "node",
      id: "343129",
      t: "CJ",
      d: {
        email: "[email protected]",
        reports: "Denise Wheeler",
        sent: 72,
        fullName: "Cindy Jenkins",
      },
    },
    {
      type: "node",
      id: "343130",
      t: "DM",
      d: { email: "[email protected]", sent: 420, fullName: "Debbie McConnell" },
    },
    {
      type: "node",
      id: "343149",
      t: "KT",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 4,
        fullName: "Kristen Taylor",
      },
    },
    {
      type: "node",
      id: "343169",
      t: "BJ",
      d: { email: "[email protected]", sent: 196, fullName: "Brandon Jackson" },
    },
    {
      type: "node",
      id: "343178",
      t: "RJ",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 1,
        fullName: "Rhonda Johnson",
      },
    },
    {
      type: "node",
      id: "343200",
      t: "MS",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 6,
        fullName: "Michael Smith",
      },
    },
    {
      type: "node",
      id: "343203",
      t: "SB",
      d: {
        email: "[email protected]",
        reports: "JC",
        sent: 89,
        fullName: "Stephanie Bell",
      },
    },
    {
      type: "node",
      id: "343213",
      t: "KC",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 39,
        fullName: "Kristin Cook",
      },
    },
    {
      type: "node",
      id: "343229",
      t: "KB",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 11,
        fullName: "Karen Brown",
      },
    },
    {
      type: "node",
      id: "343244",
      t: "DH",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 23,
        fullName: "Donald Hahn",
      },
    },
    {
      type: "node",
      id: "343246",
      t: "JW",
      d: {
        email: "[email protected]",
        reports: "Justin Patel",
        sent: 24,
        fullName: "Jessica Wright",
      },
    },
    {
      type: "node",
      id: "343266",
      t: "AT",
      d: {
        email: "[email protected]",
        reports: "Richard Evans",
        sent: 66,
        fullName: "Andrea Tucker",
      },
    },
  ],
};

export const donuts = {
  type: "LinkChart",
  items: [
    { id: "343116-343229", type: "link", id1: "343116", id2: "343229", d: { count: 175 } },
    { id: "343116-343212", type: "link", id1: "343116", id2: "343212", d: { count: 47 } },
    { id: "343116-343178", type: "link", id1: "343116", id2: "343178", d: { count: 175 } },
    { id: "343116-343175", type: "link", id1: "343116", id2: "343175", d: { count: 203 } },
    { id: "343116-343149", type: "link", id1: "343116", id2: "343149", d: { count: 191 } },
    { id: "343116-343200", type: "link", id1: "343116", id2: "343200", d: { count: 171 } },
    { id: "343213-343116", type: "link", id1: "343213", id2: "343116", d: { count: 25 } },
    {
      type: "node",
      id: "343116",
      t: "Justin Patel",
      d: { email: "[email protected]", reports: "Kristin Cook", sent: 311 },
    },
    {
      type: "node",
      id: "343149",
      t: "Kristen Taylor",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 4 },
    },
    {
      type: "node",
      id: "343175",
      t: "Patrick Newman",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 34 },
    },
    {
      type: "node",
      id: "343178",
      t: "Rhonda Johnson",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 1 },
    },
    {
      type: "node",
      id: "343200",
      t: "Michael Smith",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 6 },
    },
    {
      type: "node",
      id: "343212",
      t: "Juan Rangel",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 1 },
    },
    {
      type: "node",
      id: "343213",
      t: "Kristin Cook",
      d: { email: "[email protected]", sent: 39 },
    },
    {
      type: "node",
      id: "343229",
      t: "Karen Brown",
      d: { email: "[email protected]", reports: "Justin Patel", sent: 11 },
    },
  ],
};

export const lightStyle = {
  type: "LinkChart",
  items: [
    {
      id: "4",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 42",
      },
    },
    {
      id: "8",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 2",
      },
    },
    {
      id: "9",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 36",
      },
    },
    {
      id: "20",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 18",
      },
    },
    {
      id: "24",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 7",
      },
    },
    {
      id: "26",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 1",
      },
    },
    {
      id: "27",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 92",
      },
    },
    {
      id: "31",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 7",
      },
    },
    {
      id: "37",
      type: "node",
      d: {
        type: "virtual",
        dependency: 2,
        labelText: "Virtual Host 97",
      },
    },
    {
      id: "40",
      type: "node",
      d: {
        type: "server",
        dependency: 6,
        labelText: "Server 3",
      },
      c: "#8dd3c7",
      fi: {
        t: "",
        c: "white",
      },
    },
    {
      id: "42",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 45",
      },
      c: "#fb8072",
      fi: {
        t: "",
        c: "white",
      },
    },
    {
      id: "44",
      type: "node",
      d: {
        type: "server",
        dependency: 2,
        labelText: "Server 8",
      },
      c: "#8dd3c7",
      fi: {
        t: "",
        c: "white",
      },
    },
    {
      id: "48",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 22",
      },
    },
    {
      id: "51",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 37",
      },
    },
    {
      id: "54",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 60",
      },
    },
    {
      id: "55",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 3",
      },
    },
    {
      id: "60",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 33",
      },
    },
    {
      id: "66",
      type: "node",
      d: {
        type: "server",
        dependency: 2,
        labelText: "Server 0",
      },
    },
    {
      id: "67",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 15",
      },
    },
    {
      id: "71",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 44",
      },
    },
    {
      id: "78",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 32",
      },
    },
    {
      id: "79",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 31",
      },
    },
    {
      id: "81",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 2",
      },
    },
    {
      id: "82",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 12",
      },
    },
    {
      id: "87",
      type: "node",
      d: {
        type: "service",
        dependency: 2,
        labelText: "Service 30",
      },
    },
    {
      id: "88",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 86",
      },
    },
    {
      id: "89",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 4",
      },
    },
    {
      id: "91",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 19",
      },
    },
    {
      id: "98",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 9",
      },
    },
    {
      id: "106",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 27",
      },
    },
    {
      id: "107",
      type: "node",
      d: {
        type: "service",
        dependency: 2,
        labelText: "Service 49",
      },
    },
    {
      id: "108",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 41",
      },
    },
    {
      id: "109",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 30",
      },
    },
    {
      id: "111",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 27",
      },
    },
    {
      id: "116",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 70",
      },
    },
    {
      id: "118",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 9",
      },
    },
    {
      id: "121",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 18",
      },
    },
    {
      id: "122",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 14",
      },
    },
    {
      id: "123",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 17",
      },
    },
    {
      id: "126",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 23",
      },
    },
    {
      id: "128",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 59",
      },
    },
    {
      id: "129",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 46",
      },
    },
    {
      id: "130",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 15",
      },
    },
    {
      id: "131",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 63",
      },
    },
    {
      id: "132",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 5",
      },
    },
    {
      id: "136",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 82",
      },
    },
    {
      id: "140",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 76",
      },
    },
    {
      id: "141",
      type: "node",
      d: {
        type: "san",
        dependency: 11,
        labelText: "SAN Unit 2",
      },
      e: 2,
    },
    {
      id: "144",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 29",
      },
    },
    {
      id: "146",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 52",
      },
    },
    {
      id: "151",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 74",
      },
    },
    {
      id: "152",
      type: "node",
      d: {
        type: "virtual",
        dependency: 3,
        labelText: "Virtual Host 29",
      },
    },
    {
      id: "153",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 47",
      },
    },
    {
      id: "154",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 37",
      },
    },
    {
      id: "155",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 61",
      },
    },
    {
      id: "157",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 95",
      },
    },
    {
      id: "161",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 21",
      },
    },
    {
      id: "170",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 16",
      },
    },
    {
      id: "174",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 18",
      },
    },
    {
      id: "177",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 43",
      },
    },
    {
      id: "187",
      type: "node",
      d: {
        type: "server",
        dependency: 4,
        labelText: "Server 17",
      },
    },
    {
      id: "189",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 20",
      },
    },
    {
      id: "197",
      type: "node",
      d: {
        type: "virtual",
        dependency: 2,
        labelText: "Virtual Host 35",
      },
    },
    {
      id: "204",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 98",
      },
    },
    {
      id: "207",
      type: "node",
      d: {
        type: "server",
        dependency: 2,
        labelText: "Server 11",
      },
    },
    {
      id: "211",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 40",
      },
    },
    {
      id: "214",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 1",
      },
    },
    {
      id: "215",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 81",
      },
    },
    {
      id: "222",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 22",
      },
    },
    {
      id: "232",
      type: "node",
      d: {
        type: "virtual",
        dependency: 1,
        labelText: "Virtual Host 28",
      },
    },
    {
      id: "245",
      type: "node",
      d: {
        type: "server",
        dependency: 1,
        labelText: "Server 14",
      },
    },
    {
      id: "246",
      type: "node",
      d: {
        type: "service",
        dependency: 1,
        labelText: "Service 0",
      },
    },
    {
      id: "247",
      type: "node",
      d: {
        type: "server",
        labelText: "Server 18",
      },
    },
    {
      id: "248",
      type: "node",
      d: {
        type: "service",
        labelText: "Service 13",
      },
    },
    {
      id: "254",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 6",
      },
    },
    {
      id: "258",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 16",
      },
    },
    {
      id: "259",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 6",
      },
    },
    {
      id: "262",
      type: "node",
      d: {
        type: "business",
        dependency: 1,
        labelText: "Business Function 12",
      },
    },
    {
      id: "266",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 43",
      },
    },
    {
      id: "275",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 10",
      },
    },
    {
      id: "278",
      type: "node",
      d: {
        type: "server",
        dependency: 1,
        labelText: "Server 15",
      },
    },
    {
      id: "290",
      type: "node",
      d: {
        type: "virtual",
        labelText: "Virtual Host 48",
      },
    },
    {
      id: "89-71",
      type: "link",
      id1: "89",
      id2: "71",
    },
    {
      id: "98-215",
      type: "link",
      id1: "98",
      id2: "215",
    },
    {
      id: "151-278",
      type: "link",
      id1: "151",
      id2: "278",
    },
    {
      id: "31-98",
      type: "link",
      id1: "31",
      id2: "98",
    },
    {
      id: "71-278",
      type: "link",
      id1: "71",
      id2: "278",
    },
    {
      id: "170-207",
      type: "link",
      id1: "170",
      id2: "207",
    },
    {
      id: "155-40",
      type: "link",
      id1: "155",
      id2: "40",
    },
    {
      id: "130-232",
      type: "link",
      id1: "130",
      id2: "232",
    },
    {
      id: "66-141",
      type: "link",
      id1: "66",
      id2: "141",
    },
    {
      id: "161-245",
      type: "link",
      id1: "161",
      id2: "245",
    },
    {
      id: "174-204",
      type: "link",
      id1: "174",
      id2: "204",
    },
    {
      id: "67-177",
      type: "link",
      id1: "67",
      id2: "177",
    },
    {
      id: "40-141",
      type: "link",
      id1: "40",
      id2: "141",
    },
    {
      id: "44-141",
      type: "link",
      id1: "44",
      id2: "141",
    },
    {
      id: "290-247",
      type: "link",
      id1: "290",
      id2: "247",
    },
    {
      id: "154-88",
      type: "link",
      id1: "154",
      id2: "88",
    },
    {
      id: "26-44",
      type: "link",
      id1: "26",
      id2: "44",
    },
    {
      id: "126-247",
      type: "link",
      id1: "126",
      id2: "247",
    },
    {
      id: "116-245",
      type: "link",
      id1: "116",
      id2: "245",
    },
    {
      id: "207-141",
      type: "link",
      id1: "207",
      id2: "141",
    },
    {
      id: "121-207",
      type: "link",
      id1: "121",
      id2: "207",
    },
    {
      id: "51-66",
      type: "link",
      id1: "51",
      id2: "66",
    },
    {
      id: "177-146",
      type: "link",
      id1: "177",
      id2: "146",
    },
    {
      id: "88-207",
      type: "link",
      id1: "88",
      id2: "207",
    },
    {
      id: "152-187",
      type: "link",
      id1: "152",
      id2: "187",
    },
    {
      id: "4-121",
      type: "link",
      id1: "4",
      id2: "121",
    },
    {
      id: "248-26",
      type: "link",
      id1: "248",
      id2: "26",
    },
    {
      id: "189-71",
      type: "link",
      id1: "189",
      id2: "71",
    },
    {
      id: "79-118",
      type: "link",
      id1: "79",
      id2: "118",
    },
    {
      id: "258-106",
      type: "link",
      id1: "258",
      id2: "106",
    },
    {
      id: "215-40",
      type: "link",
      id1: "215",
      id2: "40",
    },
    {
      id: "108-136",
      type: "link",
      id1: "108",
      id2: "136",
    },
    {
      id: "78-66",
      type: "link",
      id1: "78",
      id2: "66",
    },
    {
      id: "111-44",
      type: "link",
      id1: "111",
      id2: "44",
    },
    {
      id: "245-141",
      type: "link",
      id1: "245",
      id2: "141",
    },
    {
      id: "122-87",
      type: "link",
      id1: "122",
      id2: "87",
    },
    {
      id: "60-140",
      type: "link",
      id1: "60",
      id2: "140",
    },
    {
      id: "197-40",
      type: "link",
      id1: "197",
      id2: "40",
    },
    {
      id: "37-40",
      type: "link",
      id1: "37",
      id2: "40",
    },
    {
      id: "278-141",
      type: "link",
      id1: "278",
      id2: "141",
    },
    {
      id: "266-66",
      type: "link",
      id1: "266",
      id2: "66",
    },
    {
      id: "247-141",
      type: "link",
      id1: "247",
      id2: "141",
    },
    {
      id: "118-207",
      type: "link",
      id1: "118",
      id2: "207",
    },
    {
      id: "129-44",
      type: "link",
      id1: "129",
      id2: "44",
    },
    {
      id: "8-66",
      type: "link",
      id1: "8",
      id2: "66",
    },
    {
      id: "146-278",
      type: "link",
      id1: "146",
      id2: "278",
    },
    {
      id: "20-107",
      type: "link",
      id1: "20",
      id2: "107",
    },
    {
      id: "54-245",
      type: "link",
      id1: "54",
      id2: "245",
    },
    {
      id: "153-161",
      type: "link",
      id1: "153",
      id2: "161",
    },
    {
      id: "214-87",
      type: "link",
      id1: "214",
      id2: "87",
    },
    {
      id: "131-207",
      type: "link",
      id1: "131",
      id2: "207",
    },
    {
      id: "87-37",
      type: "link",
      id1: "87",
      id2: "37",
    },
    {
      id: "55-132",
      type: "link",
      id1: "55",
      id2: "132",
    },
    {
      id: "204-187",
      type: "link",
      id1: "204",
      id2: "187",
    },
    {
      id: "91-4",
      type: "link",
      id1: "91",
      id2: "4",
    },
    {
      id: "187-141",
      type: "link",
      id1: "187",
      id2: "141",
    },
    {
      id: "82-40",
      type: "link",
      id1: "82",
      id2: "40",
    },
    {
      id: "275-247",
      type: "link",
      id1: "275",
      id2: "247",
    },
    {
      id: "132-8",
      type: "link",
      id1: "132",
      id2: "8",
    },
    {
      id: "157-44",
      type: "link",
      id1: "157",
      id2: "44",
    },
    {
      id: "140-40",
      type: "link",
      id1: "140",
      id2: "40",
    },
    {
      id: "232-40",
      type: "link",
      id1: "232",
      id2: "40",
    },
    {
      id: "81-109",
      type: "link",
      id1: "81",
      id2: "109",
    },
    {
      id: "246-116",
      type: "link",
      id1: "246",
      id2: "116",
    },
    {
      id: "136-66",
      type: "link",
      id1: "136",
      id2: "66",
    },
    {
      id: "24-66",
      type: "link",
      id1: "24",
      id2: "66",
    },
    {
      id: "262-107",
      type: "link",
      id1: "262",
      id2: "107",
    },
    {
      id: "259-174",
      type: "link",
      id1: "259",
      id2: "174",
    },
    {
      id: "106-170",
      type: "link",
      id1: "106",
      id2: "170",
    },
    {
      id: "9-247",
      type: "link",
      id1: "9",
      id2: "247",
    },
    {
      id: "211-27",
      type: "link",
      id1: "211",
      id2: "27",
    },
    {
      id: "48-40",
      type: "link",
      id1: "48",
      id2: "40",
    },
    {
      id: "222-131",
      type: "link",
      id1: "222",
      id2: "131",
    },
    {
      id: "144-26",
      type: "link",
      id1: "144",
      id2: "26",
    },
    {
      id: "42-78",
      type: "link",
      id1: "42",
      id2: "78",
    },
    {
      id: "123-60",
      type: "link",
      id1: "123",
      id2: "60",
    },
    {
      id: "27-278",
      type: "link",
      id1: "27",
      id2: "278",
    },
    {
      id: "107-197",
      type: "link",
      id1: "107",
      id2: "197",
    },
    {
      id: "128-207",
      type: "link",
      id1: "128",
      id2: "207",
    },
    {
      id: "109-66",
      type: "link",
      id1: "109",
      id2: "66",
    },
    {
      id: "254-66",
      type: "link",
      id1: "254",
      id2: "66",
    },
  ],
};
<!doctype html>
<html lang="en" style="background-color: #2d383f">
  <head>
    <meta charset="utf-8" />
    <title>Styling Charts</title>
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="@fortawesome/[email protected]/css/fontawesome.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="@fortawesome/[email protected]/css/solid.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="@fortawesome/[email protected]/css/regular.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="klchart" class="klchart klchart-timebar">
      <div class="awesomeGloom">
        <ul>
          <li>
            <a class="awesomeGloomNav" id="zoomIn" rel="tooltip" title="Zoom in"
              ><i class="fa fa-plus-circle"></i
            ></a>
          </li>
          <li>
            <a class="awesomeGloomNav" id="zoomOut" rel="tooltip" title="Zoom out"
              ><i class="fa fa-minus-circle"></i
            ></a>
          </li>
        </ul>
      </div>
      <div class="lightMonochrome">
        <ul>
          <li>
            <a class="lightMonochromeNav" id="home" rel="tooltip" title="Home"
              ><i class="fa fa-home"></i
            ></a>
          </li>
        </ul>
      </div>
      <div class="minimalist minimalistDark">
        <a id="timeBar" rel="tooltip" title="Show/hide"><i class="fa fa-chart-bar"></i></a>
      </div>
    </div>
    <div id="kltimebar" class="kltimebar"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
#klchart {
  transition: height 1s;
  height: calc(100% - 130px);
}

#kltimebar {
  height: 130px;
  display: block;
}

.awesomeGloom {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0;
  margin: 0;
  font-size: 28px;
  z-index: 9001;
}

.awesomeGloom ul {
  list-style-type: none;
  margin-top: 18px;
  margin-left: 15px;
}

.awesomeGloom li {
  margin-bottom: 5px;
  text-align: center;
}

.awesomeGloom a i {
  text-decoration: none;
  cursor: pointer;
}

.awesomeGloomNav {
  color: #f0f4c3;
}

.awesomeGloomNav:hover {
  color: #d9e368;
}

.minimalist {
  position: absolute;
  font-size: 25px;
  right: 20px;
  top: 15px;
}

#timeBar {
  color: black;
  cursor: pointer;
}

.timeBarZoom {
  position: absolute;
  font-size: 20px;
  left: 20px;
  top: 15px;
  width: 24px;
  border-right: 2px solid black;
  border-left: 2px solid black;
}

#timeBarZoom {
  color: black;
  cursor: pointer;
}

.theme-descr {
  margin-top: 30px;
  display: block;
}

.form-inline {
  margin-bottom: 20px;
}
.lightMonochrome {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0;
  margin: 0;
  font-size: 28px;
  z-index: 9001;
}

.lightMonochrome ul {
  list-style-type: none;
  margin-top: 18px;
  margin-left: 15px;
}

.lightMonochrome li {
  margin-bottom: 5px;
  text-align: center;
}

.lightMonochrome a i {
  text-decoration: none;
  cursor: pointer;
}

.lightMonochromeNav {
  color: #cc3333;
}

.lightMonochromeNav:hover {
  color: #a65959;
}
.timeBarHidden #klchart {
  height: 100% !important;
}

.timeBarHidden #kltimebar {
  display: none;
}

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.