Appearance
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.
ts
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;
}