Improves docs.

This commit is contained in:
Henning Dieterichs
2020-08-29 13:44:40 +02:00
parent 2c8ac3977c
commit 3cdbd1d9b1
5 changed files with 73 additions and 87 deletions

View File

@@ -1,76 +1,16 @@
# Visualization Framework
## Installation
This repository contains two packages.
You can use yarn to install the core library:
## @hediet/visualization-core
```
yarn add @hediet/visualization-core
```
This package provides basic infrastructure for implementing visualizations.
See its readme [here](./visualization-core/README.md).
If you want to use the existing visualizations, add the bundle library:
## @hediet/visualization-bundle
```
yarn add @hediet/visualization-bundle
```
This package bundles all the visualizations.
See its readme [here](./visualization-bundle/README.md).
## Usage
Import `@hediet/visualization-bundle` to register all default visualizations:
```tsx
// This registers all visualizations
import "@hediet/visualization-bundle";
```
Don't forget to import the styles in your scss file:
```scss
@import "~@hediet/visualization-bundle/style.scss";
```
Use `globalVisualizationFactory` to visualize some data:
```tsx
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:
```tsx
import { VisualizationView, Theme } from "@hediet/visualization-core";
// const visualizations = ...
function App() {
if (!visualizations.bestVisualization) {
return null;
}
return (
<VisualizationView
theme={Theme.light}
visualization={visualizations.bestVisualization}
/>
);
}
```
If you want to add your own visualization to this project, visualization-bundle is the right place!
The readme documents how to implement your own visualization.