Improves docs.

visualization-bundle/README.md

@@ -1,11 +1,17 @@
 # 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`:
@@ -50,7 +56,9 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 
 ## Supported Visualizations
 
-### Origin 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)
@@ -59,7 +67,7 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 -   Image Visualizer
 -   Simple Text Visualizer
 
-### Integrated Visualizations
+### Integrated Visualization Libraries
 
 -   Plotly Visualizer
 -   Perspective JS Visualizer
@@ -69,6 +77,12 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 -   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.
+-   Run `yarn dev` in the `playground` folder to start the playground where you can debug your visualization.
+
+Please use the [`simple-text-visualizer`](./src/visualizers/simple-text-visualizer/index.tsx) as starting point!

visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx

@@ -8,27 +8,53 @@ import {
 import { visualizationNs } from "../../consts";
 
 export const simpleTextVisualizer = createVisualizer({
+	// The id must be unique
 	id: "simple-text",
+	// The name can be some display text
 	name: "Simple Text",
+	// Here you can define the schema for the data that this visualizer can handle.
+	// You must have a kind property of type object whose properties must be `true`.
 	serializer: sOpenObject({
 		kind: sOpenObject({
 			text: sLiteral(true),
 		}),
 		text: sString(),
-	}).defineAs(visualizationNs("SimpleTextVisualizationData")),
-	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 100 }, () => (
-			<pre
-				className="visualizer-simple-text"
-				style={{
-					margin: 0,
-					padding: 10,
-					color: "var(--visualizer-simple-text-color)",
-				}}
-			>
-				{data.text}
-			</pre>
-		)),
+	}).defineAs(
+		// This name is important for schema and code generation of the interface types.
+		// Make sure it is unique. It should end with "VisualizationData".
+		visualizationNs("SimpleTextVisualizationData")
+	),
+	getVisualization: (
+		/* The type of data is specified by the serializer above. */ data,
+		self
+	) =>
+		// If you want to use react, this is the way to go.
+		// Return your own implementation if you want to render directly to the DOM.
+		new ReactVisualization(
+			self,
+			{
+				// The priority is used for automatically selecting the best visualization
+				// if multiple visualizations can handle the data.
+				priority: 100,
+			},
+			() => (
+				<pre
+					className="visualizer-simple-text"
+					style={{
+						margin: 0,
+						padding: 10,
+						// Use css vars for theming.
+						// See ./style.scss.
+						color: "var(--visualizer-simple-text-color)",
+					}}
+				>
+					{data.text}
+				</pre>
+			)
+		),
 });
 
+// This registers the visualizer for automatic discovery.
+// Make sure to import this file in "../index.ts" so that it gets loaded when
+// someone imports "@hediet/visualization-bundle"!
 globalVisualizationFactory.addVisualizer(simpleTextVisualizer);

visualization-bundle/src/visualizers/simple-text-visualizer/style.scss

@@ -1,3 +1,5 @@
+// Provide default colors for both the dark and light theme here!
+
 .theme-dark {
 	--visualizer-simple-text-color: white;
 }