This is a repositiory of style presets for Ogma graph visualisation library. You can use them in your prototypes and applications.
npm install -S @linkurious/ogma-styles
# or
yarn add @linkurious/ogma-styles
Alternatively, you can use the CDN-hosted version
<script src="https://cdn.jsdelivr.net/npm/@linkurious/ogma-styles@0.0.4/dist/index.min.js"></script>
...
<script>
// themes are globally exposed as `ogmaStyles`
const themes = ogmaStyles;
</script>
import Ogma from '@linkurious/ogma';
import { midsummerNight as theme } from '@linkurious/ogma-styles'
const ogma = new Ogma({ ... });
ogma.styles.setTheme(theme);
import Ogma from '@linkurious/ogma';
import { midsummerNight as theme } from '@linkurious/ogma-styles'
const ogma = new Ogma({
...
});
ogma.styles.setTheme(theme);
// you can also use the theme's colors for your UI
console.log(theme.colors.red); // '#df162e'
midsummer-night
exports several constants for you to apply when you need conditional styling.
edgeOutlineWidth: 2,
edgeHaloWidth: 8,
nodeHaloWidth: 20,
// you can also use different colors for the nodes and edges
colors: {}
You can follow the examples in src
to create your own theme.
The repositiory uses TypeScript for checking the types of attributes, so you will not get lost. You can always try out your theme in Ogma playground
If you want to share it, send us a pull request and we will check and publish it.
import Ogma from '@linkurious/ogma';
import { afternoonNap as theme } from '@linkurious/ogma-styles'
const ogma = new Ogma({
...
});
ogma.styles.setTheme(theme);
// you can also use the theme's constants for your UI
console.log(theme.colors.nodeHaloWidth); // 40
import Ogma from '@linkurious/ogma';
import { morningBreeze as theme } from '@linkurious/ogma-styles'
const ogma = new Ogma({
...
});
ogma.styles.setTheme(theme);
// you can also use the theme's constants for your UI
console.log(theme.colors.nodeHaloWidth); // 40
Linkurious SAS © 2021