Excel

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

index.tsindex.htmlstyles.css

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

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

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

const randomGraph = async (ogma: Ogma, nodes: number, edges: number) => {
  const g: RawGraph<NodeData, EdgeData> = await ogma.generate.random({
    nodes,
    edges
  });

  for (let i = 0; i < nodes; i++) {
    const node = g.nodes[i];
    node.attributes = {
      text: {
        content: 'Node ' + i,
        minVisibleSize: 0,
        backgroundColor: '#0094ff',
        color: '#fff'
      },
      radius: 3 + Math.random() * 3,
      color: '#0094ff'
    };
    node.data = {
      properties: {
        aString: 'abc ' + i,
        aCrappyString: 'cr"p\n\r ',
        aBoolean: true,
        anInteger: i,
        aFloat: Math.random(),
        anArray: [1, 2, 3],
        aNull: null,
        anUndef: undefined,
        anObject: {},
        aFunction: argument => {}
      },
      categories: ['catA', 'catB']
    };
  }

  for (let i = 0; i < edges; i++) {
    const edge = g.edges[i];
    edge.attributes = {
      text: 'Edge ' + i,
      width: 1 + Math.random(),
      color: '#0094ff'
    };
    edge.data = {
      aString: 'abc ' + i,
      aBoolean: true,
      anInteger: i,
      aNull: null,
      anObject: {},
      aFunction: argument => {}
    };
  }

  return g;
};

const ogma = new Ogma<NodeData, EdgeData>({
  container: 'graph-container'
});

const graph = await randomGraph(ogma, 20, 20);
await ogma.setGraph(graph);
await ogma.layouts.force({ duration: 0, locate: true });
await ogma.export.xlsx({ filename: 'my-graph.xlsx' });

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.11.12/dist/xlsx.core.min.js"></script>

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

Excel ​

Excel