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