103 lines
2.8 KiB
Markdown
103 lines
2.8 KiB
Markdown
# Visualization Bundle
|
|
|
|
This package registers various visualizations. If you have an idea for a cool visualization, add it here!
|
|
|
|
## Installation
|
|
|
|
You can use yarn to install this library:
|
|
|
|
```
|
|
yarn add @hediet/visualization-bundle
|
|
```
|
|
|
|
Install `@hediet/visualization-core` before!
|
|
|
|
## Usage
|
|
|
|
Import `@hediet/visualization-bundle` to register all default visualizations to `globalVisualizationFactory` of `@hediet/visualization-core`:
|
|
|
|
```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";
|
|
```
|
|
|
|
You will need to configure webpack
|
|
|
|
- to compile scss files:
|
|
|
|
```js
|
|
{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" },
|
|
```
|
|
|
|
- to compile less files:
|
|
|
|
```js
|
|
{ test: /\.less$/, loaders: ["style-loader", "css-loader", "less-loader"] }
|
|
```
|
|
|
|
- to register monaco workers
|
|
|
|
```js
|
|
plugins: [
|
|
// ...
|
|
new MonacoWebpackPlugin({
|
|
languages: ["typescript", "json"],
|
|
}),
|
|
];
|
|
```
|
|
|
|
See docs of `@hediet/visualization-core` for how to find and render visualizations!
|
|
|
|
## Supported Visualizations
|
|
|
|
You can find a playground that demonstrates all visualizations [here](https://hediet.github.io/visualization/).
|
|
|
|
### Source Visualizations
|
|
|
|
- Tree Visualizer
|
|
- AST Visualizer (+ Monaco Source Code View)
|
|
- Grid Visualizer
|
|
- SVG Visualizer
|
|
- Image Visualizer
|
|
- Simple Text Visualizer
|
|
|
|
### Integrated Visualization Libraries
|
|
|
|
- Plotly Visualizer
|
|
- Perspective JS Visualizer
|
|
- VisJS Visualizer
|
|
- Graphviz Graph Visualizer
|
|
- Graphviz Dot Visualizer
|
|
- Vis.js Visualizer
|
|
- Monaco Editor Source Code Visualizer
|
|
|
|
## Setup Local Development Copy
|
|
|
|
- Clone this repository.
|
|
- Run `yarn` in the root folder.
|
|
- Run `yarn dev` in the `visualization-bundle` folder to start tsc in watch mode.
|
|
- Edit [./playground/src/visualization.ts](../playground/src/visualizations.ts) to your needs to improve webpack performance. This is highly recommended, but not required.
|
|
- Run `yarn dev` in the `playground` folder to start the playground where you can debug your visualization.
|
|
|
|
Any changes to the source are now reflected in the playground!
|
|
|
|
## Implementing New Visualizations
|
|
|
|
First, setup your local development copy.
|
|
|
|
You can use the [`simple-text-visualizer`](./src/visualizers/simple-text-visualizer/index.tsx) as starting point!
|
|
Just copy the folder, rename the ids and names, export it [here](./src/visualizers/index.ts) and read through all the comments of the simple-text-visualizer!
|
|
|
|
Use the "open" button in the playground to debug your new visualization!
|
|
|
|
## Machine Readable Documents
|
|
|
|
- [TypeScript Declarations](https://hediet.github.io/visualization/docs/visualization-data.ts)
|
|
- [JSON Schema](https://hediet.github.io/visualization/docs/visualization-data-schema.json)
|