At Open Innovations, we've started using the Lume Static Site Generator to build data microsites for people. This gives us the benefits of a static HTML site, with associated manageability, efficiency, and maintainability benefits, whilst giving us a framework for extending.
To support some of the more complex visualisations we undertake, we've encapsulated a number of our charting libraries in this. With each visualisation type we aim to:
To use this in your Lume project, include the following in your Lume _config.js
or _config.ts
file.
WARNING! This is strictly a pre-release version, and interfaces are very likely to change.
You can include your config directly in your Lume _config.js
or _config.ts
file:
import oiLumeViz from "https://deno.land/x/oi_lume_viz@v0.15.12/mod.ts";
site.use(oiLumeViz({
assetPath: 'assets/oi',
componentNamespace: 'oi',
}));
Or move the OI Lume Viz config into an external file using:
import oiLumeViz from "https://deno.land/x/oi_lume_viz@v0.15.12/mod.ts";
import oiVizConfig from "./oi-viz-config.ts";
site.use(oiLumeViz(oiVizConfig));
Then, in oi-viz-config.ts
you'd include your config e.g.:
export default {
"assetPath": '/assets',
"componentNamespace": 'oi',
"colour": {
"names": {
"gold": "#F7AB3D",
"orange": "#E55912",
"turquoise": "#69C2C9",
"cherry": "#E52E36",
"chartreuse": "#C7B200",
"plum": "#7D2248",
"grey": "#B2B2B2",
"blue": "#005776",
"raisin": "#874245",
"rose": "#FF808B",
"forest": "#4A783C",
"richblack": "#000000",
},
"scales": {
"example": "#ff0000 0%, #0000ff 100%",
}
}
}
You can provide the following options:
assetPath
path to locate the Javascript assets that are loaded (default: /assets
)componentNamespace
namespace where the charts are accessible e.g. comp.oi.dashboard()
(default: oi
)colour
- site-wide colours by name, series, and scalefont
- site-wide fontsmap
- site-wide map tile layers.We have a variety of visualisation types available:
Run a test with the following command. Replace the file path with the tests you want to run. If you provide a directory path and Deno will find any test files in the directory and it's sub-directories.
deno test --unstable --allow-read --no-check components/chart/bar.test.ts
To make Deno continually run these tests, add the --watch
flag. This will then run each time the input files change.
deno test --unstable --allow-read --no-check --watch components/chart/bar.test.ts