Improves docs.
This commit is contained in:
78
README.md
78
README.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user