tune readme

Author: sgratzl

README.md

@@ -1,4 +1,4 @@
-# Chart.js Venn and Euler Diagram Chart
+# Chart.js Word Clouds
 
 [![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url]
 
@@ -28,11 +28,13 @@ or at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/TODO)
 const config = {
   type: 'wordCloud',
   data: {
-    labels: [],
+    // text
+    labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
     datasets: [
       {
-        label: 'A',
-        data: [],
+        label: 'DS',
+        // size in pixel
+        data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
       },
     ],
   },

src/controllers/WordCloudController.spec.ts

@@ -16,7 +16,7 @@ describe('venn', () => {
       datasets: [
         {
           label: '',
-          data: words.map(() => 10 + Math.random() * 90),
+          data: words.map((_, i) => 10 + (i / words.length) * 90),
         },
       ],
     };

src/controllers/WordCloudController.ts

@@ -185,6 +185,10 @@ export interface IWordCloudControllerDatasetOptions
   extends IControllerDatasetOptions,
     ScriptableAndArrayOptions<IWordElementOptions>,
     ScriptableAndArrayOptions<ICommonHoverOptions> {
+  /**
+   * whether to fit the word cloud to the map, by scaling to the actual bounds
+   * @default true
+   */
   fit: boolean;
 }
 

src/controllers/__image_snapshots__/word-cloud-controller-spec-ts-venn-default-1-snap.png

@@ -1,15 +1,38 @@
 import { Element, IFontSpec, IVisualElement, ScriptableAndArrayOptions, toFont } from '@sgratzl/chartjs-esm-facade';
 
 export interface IWordElementOptions extends IFontSpec {
+  /**
+   * rotation of the word
+   * @default undefined then it will be randomly derived given the other constraints
+   */
   rotate: number;
+  /**
+   * number of rotation steps between min and max rotation
+   * @default 2
+   */
   rotationSteps: number;
+  /**
+   * angle in degree for the min rotation
+   * @default -90
+   */
   minRotation: number;
+  /**
+   * angle in degree for the max rotation
+   * @default 0
+   */
   maxRotation: number;
+  /**
+   * padding around each word while doing the layout
+   * @default 1
+   */
   padding: number;
 }
 
 export interface IWordElementHoverOptions {
   hoverColor: string;
+  hoverSize: number;
+  hoverStyle: string;
+  hoverWeight: string;
 }
 
 export interface IWordElementProps {
@@ -34,7 +57,7 @@ export class WordElement extends Element<IWordElementProps, IWordElementOptions>
       const v = ctx.dataPoint.y;
       return v;
     },
-    hoverWeight: '500',
+    hoverColor: '#ababab',
   } as Partial<ScriptableAndArrayOptions<IWordElementOptions>>;
 
   static readonly defaultRoutes = {