JSON

This example shows how to use the JSON export API to export the graph data as a JSON file. By default it will export all data and attributes but you can specify which data and attributes to export.

index.tsindex.htmlstyles.css

import Ogma, { RawGraph } from '@linkurious/ogma';

import {
  highlightElement,
  loadLanguage
} from 'https://cdn.jsdelivr.net/npm/@speed-highlight/core@1.2.6/dist/index.js';

loadLanguage('xml');
function highlight(element: HTMLElement, code: string) {
  element.textContent = code;
  highlightElement(element, 'json');
}

interface NodeData {
  properties: {
    aString: string;
    aProblematicString: string;
    aFormulaInjectionString: string;
    aBoolean: boolean;
    anInteger: number;
    aFloat: number;
    anArray: number[];
    aNull: null;
    anUndef: undefined;
    anObject: object;
  };
  categories: string[];
}

interface EdgeData {
  aString: string;
  aBoolean: boolean;
  anInteger: number;
  aNull: null;
  anObject: object;
}

const addData = ({ nodes, edges }: RawGraph): RawGraph<NodeData, EdgeData> => {
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].data = {
      properties: {
        aString: 'abc ' + i,
        aBoolean: true,
        anInteger: i,
        aFloat: Math.random(),
        anArray: [1, 2, 3],
        aNull: null,
        anObject: {}
      },
      categories: ['catA', 'catB']
    };
  }

  for (let i = 0; i < edges.length; i++) {
    edges[i].data = {
      aString: 'abc ' + i,
      aBoolean: true,
      anInteger: i,
      aNull: null,
      anObject: {}
    };
  }

  return { nodes, edges };
};

const ogma = new Ogma({
  container: 'graph-container'
});

const graph = addData(await ogma.generate.random({ nodes: 20, edges: 10 }));
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true, duration: 200 });
const json = await ogma.export.json({
  download: false,
  pretty: true
});

highlight(
  document.getElementById('output')!,
  JSON.stringify(json, undefined, 2)
);

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@speed-highlight/core@1.2.6/dist/themes/github-dark.css"
    />
  </head>
  <body>
    <div id="graph-container"></div>
    <pre id="output"></pre>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  height: 66%;
  left: 0;
  right: 0;
  position: absolute;
}
#output {
  top: 66%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  border-radius: 0;
  overflow: auto;
  font-size: 12px;
  line-height: 14px;
}

JSON ​

JSON