Merge Heatmap.createEmpty with Heatmap.create

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file, following t
 
 ## [Unreleased]
 
--   Support for `Heatmap.createEmpty()` and setting data later
+-   `Heatmap.create` callable without `data` parameter
 -   Can manipulate markers via `hm.extensions.marker?.drawMarkers({...})`
 -   Default coloring is "everything gray", even for numeric values
 

docs/README.md

@@ -83,11 +83,11 @@ Create a heatmap instance using the prepared data.
 const heatmap = HeatmapComponent.Heatmap.create(data);
 ```
 
-Alternatives to `create` are `createEmpty`, which returns a new heatmap instance without data (you can add data later via `heatmap.setData(data)`), or `createDummy`, which uses random numerical data.
+You can also call `create()` with no argument and add data later via `heatmap.setData(data)`.
 
 ### Step 5: Customize
 
-Customize the heatmap instance as needed. Typically, you'll want to specify coloring. This is done by calling `setColor` method and providing a coloring function, which takes a datum and returns a color (can be a CSS color, e.g. `'green'`, `'#f00000'`, `'rgba(255,0,0,0.5)'`, or a package-specific `Color` type (encoding each color as a 32-bit unsigned interger for better performance TODO: link to details)). The coloring function can also take multiple parameters, being datum, column name, row name, column index, row index.
+Customize the heatmap instance as needed. Typically, you'll want to specify coloring (default coloring assigns gray color to any datum). This is done by calling `setColor` method and providing a coloring function, which takes a datum and returns a color (can be a CSS color, e.g. `'green'`, `'#f00000'`, `'rgba(255,0,0,0.5)'`, or a package-specific `Color` type (encoding each color as a 32-bit unsigned interger for better performance TODO: link to details)). The coloring function can also take multiple parameters, being datum, column name, row name, column index, row index.
 
 Use `HeatmapComponent.createColorScale` to create continuous color scales (details [here](./color-scales.md)).
 

src/heatmap-component/demo.ts

@@ -1,4 +1,5 @@
 import { Heatmap, createColorScale } from '../main';
+import { DataDescription } from './data/data-description';
 
 
 /** Demo showing small data with a lot of customizations */
@@ -86,7 +87,8 @@ function setTextContent(elementSelector: string, content: unknown): void {
 
 /** Demo showing a big data example (200_000 x 20) */
 export function demo2(divElementOrId: HTMLDivElement | string) {
-    const hm = Heatmap.createDummy(2e5, 20); // Heatmap<number, number, number>
+    const data = DataDescription.createRandomWithGradient(2e5, 20);
+    const hm = Heatmap.create(data); // Heatmap<number, number, number>
     hm.setVisualParams({ xGapRelative: 0, yGapRelative: 0 });
     // hm.setColor(createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
     hm.setColor(createColorScale('Magma', [0, 1]));

src/heatmap-component/heatmap.ts

@@ -29,8 +29,9 @@ export class Heatmap<TX, TY, TItem> extends HeatmapCore<TX, TY, TItem> {
         zoom?: Behavior<ZoomExtensionParams>,
     } = {};
 
-    /** Create a new `Heatmap` and set `data` */
-    static create<TX, TY, TItem>(data: DataDescription<TX, TY, TItem>): Heatmap<TX, TY, TItem> {
+    /** Create a new `Heatmap` and optionaly set `data`.
+     * If you omit the `data` parameter, you add data later via `.setData(data)`. */
+    static create<TX, TY, TItem>(data: DataDescription<TX, TY, TItem> = DataDescription.empty()): Heatmap<TX, TY, TItem> {
         const heatmap = new this(data);
 
         heatmap.extensions.marker = heatmap.registerExtension(MarkerExtension) as MarkerBehavior;
@@ -41,17 +42,6 @@ export class Heatmap<TX, TY, TItem> extends HeatmapCore<TX, TY, TItem> {
         return heatmap;
     }
 
-    /** Create a new `Heatmap` without data (can add later via `.setData()`) */
-    static createEmpty<TX, TY, TItem>(): Heatmap<TX, TY, TItem> {
-        const data: DataDescription<TX, TY, TItem> = DataDescription.empty();
-        return this.create(data);
-    }
-
-    /** Create a new `Heatmap` with dummy data */
-    static createDummy(nColumns: number = 20, nRows: number = 20): Heatmap<number, number, number> {
-        return this.create(DataDescription.createRandomWithGradient(nColumns, nRows));
-    }
-
     /** Replace current data by new data.
      * (If the new data are of different type, this method effectively changes the generic type parameters of `this`!
      * Returns re-typed `this`.) */