Ogma styles

This is a repositiory of style presets for Ogma graph visualisation library. You can use them in your prototypes and applications.

Demo

How to use

Install

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/[email protected]/dist/index.min.js"></script>
...
<script>
  // themes are globally exposed as `ogmaStyles`
  const themes = ogmaStyles;
</script>

Usage

import Ogma from '@linkurious/ogma';
import { midsummerNight as theme } from '@linkurious/ogma-styles'

const ogma = new Ogma({ ... });
ogma.styles.setTheme(theme);

"Midsummer night" 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'

Additional variables

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: {}

Color palette

Compose your own style

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.

"Afternoon nap" theme

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

"Morning breeze" theme

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

Copyright

Linkurious SAS © 2021