From a9486b7a8199f0dc0f800996e5d9187da4cc866d Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Mon, 10 Jan 2022 19:02:38 +0900
Subject: [PATCH] feat(heatmap): define a default legend config to prevent a
 crash when adding a new one on the interactive demo

---
 .../src/components/controls/ControlsGroup.tsx | 11 +++++++++++
 website/src/data/components/heatmap/props.ts  | 19 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/website/src/components/controls/ControlsGroup.tsx b/website/src/components/controls/ControlsGroup.tsx
index 2b3b094227..6f7f8a346a 100644
--- a/website/src/components/controls/ControlsGroup.tsx
+++ b/website/src/components/controls/ControlsGroup.tsx
@@ -36,6 +36,8 @@ import {
     QuantizeColorsControl,
 } from './colors'
 
+// add some extra logic to render properties conditionally
+// depending on the current settings.
 export const shouldRenderProperty = (property: ChartProperty, currentSettings: any) => {
     if (typeof property.when !== 'function') return true
     return property.when(currentSettings)
@@ -80,9 +82,17 @@ const ControlSwitcher = memo(
         }
 
         let shouldRenderControl = controlConfig !== undefined
+
+        // the property is not available for the current flavor
         if (Array.isArray(property.flavors) && !property.flavors.includes(currentFlavor)) {
             shouldRenderControl = false
         }
+
+        // the control is only available for certain flavors in the UI
+        // while being available for usage, this is typically used for
+        // `width` & `height` properties, which cannot be set for the demos
+        // as we use the responsive version of the charts, but has to bed defined
+        // when using the HTTP API.
         if (
             Array.isArray(property.enableControlForFlavors) &&
             !property.enableControlForFlavors.includes(currentFlavor)
@@ -102,6 +112,7 @@ const ControlSwitcher = memo(
             )
         }
 
+        // every property which has a control should have a value
         if (value === undefined) {
             throw new Error(`no value defined for property: ${property.name}`)
         }
diff --git a/website/src/data/components/heatmap/props.ts b/website/src/data/components/heatmap/props.ts
index 7c48dca1cc..5240c10e26 100644
--- a/website/src/data/components/heatmap/props.ts
+++ b/website/src/data/components/heatmap/props.ts
@@ -52,7 +52,7 @@ const props: ChartProperty[] = [
     ...chartDimensions(allFlavors),
     {
         key: 'forceSquare',
-        help: 'Force square cells (width = height).',
+        help: 'Force square cells (width = height), please note that **padding is ignored**.',
         defaultValue: defaults.forceSquare,
         type: 'boolean',
         control: { type: 'switch' },
@@ -229,11 +229,28 @@ const props: ChartProperty[] = [
     {
         key: 'legends',
         group: 'Legends',
+        help: 'Please note that **legends are ignored when using a custom function** for `colors`.',
         type: `ContinuousColorsLegendProps[]`,
         control: {
             type: 'array',
             shouldCreate: true,
             shouldRemove: true,
+            defaults: {
+                anchor: 'center',
+                translateX: 0,
+                translateY: 0,
+                length: 320,
+                thickness: 8,
+                direction: 'row',
+                tickPosition: 'after',
+                tickSize: 3,
+                tickSpacing: 4,
+                tickOverlap: false,
+                tickFormat: { format: '>-.2s', enabled: true },
+                title: 'New Legend',
+                titleAlign: 'start',
+                titleOffset: 4,
+            },
             props: [
                 {
                     key: 'anchor',