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