Miss any of our Open RFC calls?Watch the recordings here! »

@hediet/visualization-core

0.2.0 • Public • Published

Visualization Core

Installation

You can use yarn to install this library:

yarn add @hediet/visualization-core

You may want to install @hediet/visualization-bundle for the actual visualizations too!

Usage

Use globalVisualizationFactory to visualize some data:

import { globalVisualizationFactory } from "@hediet/visualization-core";
 
const data = {
    kind: { graph: true as true },
    nodes: [
        { id: "1", label: "1" },
        { id: "2", label: "2", color: "orange" },
        { id: "3", label: "3" },
    ],
    edges: [
        { from: "1", to: "2", color: "red" },
        { from: "1", to: "3" },
    ],
};
 
const visualizations = globalVisualizationFactory.getVisualizations(
    data,
    /* preferred visualization id */ undefined
);
// `visualizations.bestVisualization` is the visualization that is best suited to visualize the data.
// `visualiztaions.allVisualizations` contains all suitable visualizations.

If you use react, you can use the VisualizationView component to render a visualization:

import { VisualizationView, Theme } from "@hediet/visualization-core";
 
// const visualizations = ...
 
function App() {
    if (!visualizations.bestVisualization) {
        return null;
    }
    return (
        <VisualizationView
            theme={Theme.light}
            visualization={visualizations.bestVisualization}
        />
    );
}

Architecture

Install

npm i @hediet/visualization-core

DownloadsWeekly Downloads

2

Version

0.2.0

License

MIT

Unpacked Size

40.3 kB

Total Files

45

Last publish

Collaborators

  • avatar