From a13defdb07f5a8d688a160101015046bb9911346 Mon Sep 17 00:00:00 2001 From: Adam Midlik Date: Tue, 14 May 2024 15:02:44 +0100 Subject: [PATCH] Merge Heatmap.createEmpty with Heatmap.create --- CHANGELOG.md | 2 +- docs/README.md | 4 ++-- src/heatmap-component/demo.ts | 4 +++- src/heatmap-component/heatmap.ts | 16 +++------------- 4 files changed, 9 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 56b2a47..1945e26 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index f1b2289..264ebfc 100644 --- a/docs/README.md +++ b/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)). diff --git a/src/heatmap-component/demo.ts b/src/heatmap-component/demo.ts index 4c0e290..af244a1 100644 --- a/src/heatmap-component/demo.ts +++ b/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 + const data = DataDescription.createRandomWithGradient(2e5, 20); + const hm = Heatmap.create(data); // Heatmap hm.setVisualParams({ xGapRelative: 0, yGapRelative: 0 }); // hm.setColor(createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00'])); hm.setColor(createColorScale('Magma', [0, 1])); diff --git a/src/heatmap-component/heatmap.ts b/src/heatmap-component/heatmap.ts index bccd4ee..eea4f77 100644 --- a/src/heatmap-component/heatmap.ts +++ b/src/heatmap-component/heatmap.ts @@ -29,8 +29,9 @@ export class Heatmap extends HeatmapCore { zoom?: Behavior, } = {}; - /** Create a new `Heatmap` and set `data` */ - static create(data: DataDescription): Heatmap { + /** Create a new `Heatmap` and optionaly set `data`. + * If you omit the `data` parameter, you add data later via `.setData(data)`. */ + static create(data: DataDescription = DataDescription.empty()): Heatmap { const heatmap = new this(data); heatmap.extensions.marker = heatmap.registerExtension(MarkerExtension) as MarkerBehavior; @@ -41,17 +42,6 @@ export class Heatmap extends HeatmapCore { return heatmap; } - /** Create a new `Heatmap` without data (can add later via `.setData()`) */ - static createEmpty(): Heatmap { - const data: DataDescription = DataDescription.empty(); - return this.create(data); - } - - /** Create a new `Heatmap` with dummy data */ - static createDummy(nColumns: number = 20, nRows: number = 20): Heatmap { - 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`.) */