CSV

This example shows how to export the graph data as CSV files. It uses the CSV export API, which provides a wide range of export options.

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';

await loadLanguage('csv');

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

interface NodeData {
  properties: {
    aString: string;
    aProblematicString: string;
    aFormulaInjectionString: string;
    aBoolean: boolean;
    anInteger: number;
    aFloat: number;
    anArray: number[];
    aNull: null;
    anUndef: undefined;
    anObject: object;
    aFunction: (argument: any) => any;
  };
  categories: string[];
}

interface EdgeData {
  aString: string;
  aBoolean: boolean;
  anInteger: number;
  aNull: null;
  anObject: object;
  aFunction: (argument: any) => any;
}

const addData = ({ nodes, edges }: RawGraph): RawGraph<NodeData, EdgeData> => {
  const N = nodes.length;
  const E = edges.length;
  for (let i = 0; i < N; i++) {
    nodes[i].data = {
      properties: {
        aString: 'abc ' + i,
        aProblematicString: 'cr"p\n\r ',
        aFormulaInjectionString: "%0A-3+3+cmd|' /C calc'!D2",
        aBoolean: true,
        anInteger: i,
        aFloat: Math.random(),
        anArray: [1, 2, 3],
        aNull: null,
        anUndef: undefined,
        anObject: {},
        // @ts-expect-error
        aFunction: argument => {}
      },
      categories: ['catA', 'catB']
    };
  }

  for (let i = 0; i < E; i++) {
    edges[i].data = {
      aString: 'abc ' + i,
      aBoolean: true,
      anInteger: i,
      aNull: null,
      anObject: {},
      // @ts-expect-error
      aFunction: argument => {}
    };
  }

  return { nodes, edges };
};

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

ogma.generate
  .random({ nodes: 10, edges: 10 })
  .then(addData)
  .then(ogma.setGraph)
  .then(() => ogma.layouts.force({ locate: true, duration: 0 }))
  .then(() => ['nodes', 'edges'].forEach(what => exportToCSV(what)));

function exportToCSV(what: string) {
  // Export to CSV and add the contents under the graph
  return ogma.export
    .csv({
      download: false,
      what: what as 'nodes' | 'edges',
      dataProperties: ['properties'],
      separator: ',',
      textSeparator: '"'
    })
    .then(csv => {
      highlight(document.getElementById('output-' + what)!, csv);
    });
}

html

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

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@speed-highlight/core@1.2.6/dist/themes/github-dark.css"
    />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <div>
      <code id="output-nodes"></code>
      <code id="output-edges"></code>
    </div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  height: 50%;
  left: 0;
  right: 0;
  position: absolute;
}

#output-nodes {
  top: 50%;
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: auto;
  font-size: 12px;
  line-height: 14px;
}

#output-edges {
  left: 50%;
  top: 50%;
  float: right;
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: auto;
  font-size: 12px;
  line-height: 14px;
  border-left: 2px solid #ccc;
}

CSV ​

CSV