From 627579e33ae7ee3bcbc6b295cf20e89fc6e40aca Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 8 Aug 2024 10:57:58 +0300 Subject: [PATCH 01/10] Heatmap init --- .../hurumap-core/src/Scope/HeatMapScope.js | 93 +++++++++++++++++++ packages/hurumap-core/src/Scope/index.js | 2 + 2 files changed, 95 insertions(+) create mode 100644 packages/hurumap-core/src/Scope/HeatMapScope.js diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js new file mode 100644 index 000000000..4ad81060a --- /dev/null +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -0,0 +1,93 @@ +import merge from "deepmerge"; + +import Scope from "./Scope"; + +export default function HeatMapScope(props) { + console.log("HeatMapScope props: ", props); + + const { + primaryData, + metadata, + config, + secondaryData, + primaryParentData, + secondaryParentData, + // profileNames, + // isCompare, + theme, + args, + } = props; + // const { parentLabel } = config; + + const { primary_group: primaryGroup } = metadata; + + return merge( + Scope({ + primaryData, + metadata, + config, + secondaryData, + primaryParentData, + secondaryParentData, + chartType: "heatmap", + theme, + args, + }), + { + width: 800, + height: 500, + padding: 5, + signals: [], + scales: [ + { + name: "x", + type: "time", + domain: { + data: "primary_formatted", + field: primaryGroup, + }, + range: "width", + }, + { + name: "y", + type: "band", + domain: { + data: "primary_formatted", + field: { signal: "datatype[Units]" }, + }, + range: "height", + }, + { + name: "color", + type: "linear", + range: { + scheme: theme.palette.primary.main, + }, + domain: { + data: "primary_formatted", + field: { signal: "datatype[Units]" }, + }, + }, + ], + marks: [ + { + type: "rect", + from: { + data: "primary_formatted", + }, + encode: { + enter: { + y: { scale: "yscale", field: { signal: "mainGroup" } }, + height: { scale: "yscale", band: 1 }, + x: { scale: "xscale", field: { signal: "datatype[Units]" } }, + width: { value: 1 }, + }, + update: { + fill: { value: theme.palette.primary.main }, + }, + }, + }, + ], + }, + ); +} diff --git a/packages/hurumap-core/src/Scope/index.js b/packages/hurumap-core/src/Scope/index.js index 3d54a20d3..768b15ccb 100644 --- a/packages/hurumap-core/src/Scope/index.js +++ b/packages/hurumap-core/src/Scope/index.js @@ -1,5 +1,6 @@ import BarChartScope from "./BarChartScope"; import DonutChartScope from "./DonutChartScope"; +import HeatMapScope from "./HeatMapScope"; import LineChartScope from "./LineChartScope"; import MultiLineChartScope from "./MultiLineChartScope"; import Scope from "./Scope"; @@ -10,6 +11,7 @@ export default { Scope, BarChartScope, DonutChartScope, + HeatMapScope, LineChartScope, MultiLineChartScope, VerticalBarChartScope, From e9589349e02472da237c02f7d49ab7b87ea1d01d Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 8 Aug 2024 10:58:24 +0300 Subject: [PATCH 02/10] Heatmap init --- .../pesayetu/src/components/HURUmap/Chart/configureScope.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js index b0bd09799..dcb3757ef 100644 --- a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js +++ b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js @@ -13,6 +13,7 @@ const { MultiLineChartScope, TreemapChartScope, VerticalBarChartScope, + HeatMapScope, } = Scope; export default function configureScope( @@ -86,11 +87,16 @@ export default function configureScope( ); } break; + case "heatmap": + vegaSpec = HeatMapScope(scopeOptions); + console.log("HeatMapScope", vegaSpec); + break; default: if (isMobile) { vegaSpec = VerticalBarChartScope(scopeOptions); } else { vegaSpec = BarChartScope(scopeOptions); + console.log("BarChartScope", vegaSpec); } break; } From 2ed87a0edc86223b959e58400fe9fe73e99444b2 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 9 Aug 2024 12:54:54 +0300 Subject: [PATCH 03/10] WOrking heatmap --- .../HURUmap/Chart/configureScope.js | 4 + .../hurumap-core/src/Scope/HeatMapScope.js | 78 ++++++++++++++----- 2 files changed, 62 insertions(+), 20 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js index 477b08915..b2a22a2d8 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js @@ -13,6 +13,7 @@ const { MultiLineChartScope, TreemapChartScope, VerticalBarChartScope, + HeatMapScope, } = Scope; export default function configureScope( @@ -62,6 +63,9 @@ export default function configureScope( case "treemap": vegaSpec = TreemapChartScope(scopeOptions); break; + case "heatmap": + vegaSpec = HeatMapScope(scopeOptions); + break; case "stacked": if (isMobile) { vegaSpec = VerticalStackedChartScope( diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index 4ad81060a..9e9757af4 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -12,12 +12,11 @@ export default function HeatMapScope(props) { secondaryData, primaryParentData, secondaryParentData, - // profileNames, - // isCompare, + isCompare, + isMobile, theme, args, } = props; - // const { parentLabel } = config; const { primary_group: primaryGroup } = metadata; @@ -34,14 +33,30 @@ export default function HeatMapScope(props) { args, }), { - width: 800, - height: 500, - padding: 5, - signals: [], + signals: [ + { + name: "height", + value: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310, + }, + { + name: "isMobile", + value: isMobile, + }, + { + name: "isCompare", + value: isCompare, + }, + ], + width: { + signal: "isMobile ? 300 : 600", + }, + height: { + signal: "height", + }, scales: [ { name: "x", - type: "time", + type: "band", domain: { data: "primary_formatted", field: primaryGroup, @@ -51,18 +66,16 @@ export default function HeatMapScope(props) { { name: "y", type: "band", - domain: { - data: "primary_formatted", - field: { signal: "datatype[Units]" }, - }, + // domain: { + // data: "primary_formatted", + // field: { signal: "datatype[Units]" }, + // }, range: "height", }, { name: "color", type: "linear", - range: { - scheme: theme.palette.primary.main, - }, + range: [theme.palette.primary.main, theme.palette.primary.light], domain: { data: "primary_formatted", field: { signal: "datatype[Units]" }, @@ -77,17 +90,42 @@ export default function HeatMapScope(props) { }, encode: { enter: { - y: { scale: "yscale", field: { signal: "mainGroup" } }, - height: { scale: "yscale", band: 1 }, - x: { scale: "xscale", field: { signal: "datatype[Units]" } }, - width: { value: 1 }, + x: { scale: "x", field: primaryGroup }, + y: { scale: "y", field: { signal: "datatype[Units]" } }, + height: { scale: "y", band: 1 }, + width: { scale: "x", band: 1 }, + tooltip: { + signal: `datum.${primaryGroup} + " : " + format(datum.count, ',')`, + }, }, update: { - fill: { value: theme.palette.primary.main }, + fill: { scale: "color", field: { signal: "datatype[Units]" } }, }, }, }, ], + axes: [ + { + orient: "bottom", + scale: "x", + title: primaryGroup, + }, + { + orient: "left", + scale: "y", + title: { signal: "datatype[Units]" }, + }, + ], + legends: [ + { + fill: "color", + title: { signal: "datatype[Units]" }, + type: "gradient", + titleFontSize: 12, + titlePadding: 4, + gradientLength: { signal: "height - 16" }, + }, + ], }, ); } From e7c101168c69e96ab4a33c484bd5a72c675f8672 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 9 Aug 2024 16:44:12 +0300 Subject: [PATCH 04/10] Add step transform Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../hurumap-core/src/Scope/HeatMapScope.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index 9e9757af4..8567d246d 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -18,8 +18,20 @@ export default function HeatMapScope(props) { args, } = props; + const { stepDivider = null } = config; + const { primary_group: primaryGroup } = metadata; + const transform = []; + + if (stepDivider !== null) { + transform.push({ + type: "formula", + as: "stepTransform", + expr: `floor(datum.year / ${stepDivider}) * ${stepDivider}`, + }); + } + return merge( Scope({ primaryData, @@ -28,6 +40,7 @@ export default function HeatMapScope(props) { secondaryData, primaryParentData, secondaryParentData, + transform, chartType: "heatmap", theme, args, @@ -59,17 +72,13 @@ export default function HeatMapScope(props) { type: "band", domain: { data: "primary_formatted", - field: primaryGroup, + field: stepDivider !== null ? "stepTransform" : primaryGroup, }, range: "width", }, { name: "y", type: "band", - // domain: { - // data: "primary_formatted", - // field: { signal: "datatype[Units]" }, - // }, range: "height", }, { @@ -90,7 +99,10 @@ export default function HeatMapScope(props) { }, encode: { enter: { - x: { scale: "x", field: primaryGroup }, + x: { + scale: "x", + field: stepDivider !== null ? "stepTransform" : primaryGroup, + }, y: { scale: "y", field: { signal: "datatype[Units]" } }, height: { scale: "y", band: 1 }, width: { scale: "x", band: 1 }, From 6d19c7494ff483969aead1c55404620f1e33a9ad Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:19:54 +0300 Subject: [PATCH 05/10] Working Heatmap Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/ChartTooltip/ChartTooltip.js | 2 +- .../hurumap-core/src/Scope/HeatMapScope.js | 128 ++++++++++++------ 2 files changed, 85 insertions(+), 45 deletions(-) diff --git a/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js b/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js index 7f7d45be0..977231561 100644 --- a/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js +++ b/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js @@ -3,7 +3,7 @@ import { StyledEngineProvider } from "@mui/material/styles"; import React, { useEffect } from "react"; import ReactDOM from "react-dom"; -import Tooltip from "./Tooltip"; // Import your ChartTooltip component +import Tooltip from "./Tooltip"; function ChartTooltip({ id, diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index 8567d246d..168402ed9 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -18,20 +18,8 @@ export default function HeatMapScope(props) { args, } = props; - const { stepDivider = null } = config; - const { primary_group: primaryGroup } = metadata; - const transform = []; - - if (stepDivider !== null) { - transform.push({ - type: "formula", - as: "stepTransform", - expr: `floor(datum.year / ${stepDivider}) * ${stepDivider}`, - }); - } - return merge( Scope({ primaryData, @@ -40,7 +28,6 @@ export default function HeatMapScope(props) { secondaryData, primaryParentData, secondaryParentData, - transform, chartType: "heatmap", theme, args, @@ -59,83 +46,136 @@ export default function HeatMapScope(props) { name: "isCompare", value: isCompare, }, + { name: "stripeWidth", update: "width/length(data('primary'))" }, + { + name: "selectedStripeTemp", + value: 0, + on: [ + { events: "@stripe:pointerover", update: "datum.count" }, + { events: "@stripe:pointerout", update: "0" }, + ], + }, ], width: { - signal: "isMobile ? 300 : 600", + signal: "isMobile ? 400 : 800", }, height: { signal: "height", }, scales: [ { - name: "x", - type: "band", + name: "scaleX", + type: "linear", domain: { - data: "primary_formatted", - field: stepDivider !== null ? "stepTransform" : primaryGroup, + data: "primary", + field: primaryGroup, }, - range: "width", - }, - { - name: "y", - type: "band", - range: "height", + range: [0, { signal: "width" }], + zero: false, }, { name: "color", type: "linear", - range: [theme.palette.primary.main, theme.palette.primary.light], domain: { - data: "primary_formatted", - field: { signal: "datatype[Units]" }, + data: "primary", + field: "count", }, + range: [theme.palette.primary.main, theme.palette.primary.light], + reverse: true, + }, + { + name: "scaleYForLegendTick", + type: "linear", + domain: { data: "primary", field: "count" }, + range: [0, { signal: "height" }], + zero: false, + reverse: true, }, ], marks: [ { + name: "stripe", type: "rect", + interactive: true, from: { - data: "primary_formatted", + data: "primary", }, encode: { enter: { - x: { - scale: "x", - field: stepDivider !== null ? "stepTransform" : primaryGroup, + xc: { + scale: "scaleX", + field: primaryGroup, }, - y: { scale: "y", field: { signal: "datatype[Units]" } }, - height: { scale: "y", band: 1 }, - width: { scale: "x", band: 1 }, - tooltip: { - signal: `datum.${primaryGroup} + " : " + format(datum.count, ',')`, + fill: { + scale: "color", + field: "count", }, + // TODO: check why tooltip is not working correctly + // tooltip: [ + // { + // signal: `datum.${primaryGroup} + ' : ' + datum.count` + // } + // ] }, update: { - fill: { scale: "color", field: { signal: "datatype[Units]" } }, + y: { + signal: 0, + }, + height: { + signal: "height", + }, + width: { + signal: "stripeWidth", + }, + }, + hover: { + y: { + value: -4, + }, + height: { + signal: "height + 8", + }, }, }, }, ], axes: [ { + scale: "scaleX", orient: "bottom", - scale: "x", - title: primaryGroup, + domain: false, + format: ".4", + labelColor: "black", }, { - orient: "left", - scale: "y", - title: { signal: "datatype[Units]" }, + scale: "scaleYForLegendTick", + orient: "right", + domain: false, + labels: false, + ticks: true, + tickColor: "black", + offset: 45, + encode: { + ticks: { + update: { + x: { value: -7 }, + x2: { value: 13 }, + y: { + scale: "scaleYForLegendTick", + signal: "selectedStripeTemp", + }, + }, + }, + }, }, ], legends: [ { fill: "color", - title: { signal: "datatype[Units]" }, type: "gradient", titleFontSize: 12, titlePadding: 4, - gradientLength: { signal: "height - 16" }, + gradientLength: { signal: "height-16" }, }, ], }, From 2dd4254cc594f3b0d4c151382e113ce03983ea6e Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:29:58 +0300 Subject: [PATCH 06/10] Remove hardcoded fields Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../hurumap-core/src/Scope/HeatMapScope.js | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index 168402ed9..dcf2c379d 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -51,7 +51,12 @@ export default function HeatMapScope(props) { name: "selectedStripeTemp", value: 0, on: [ - { events: "@stripe:pointerover", update: "datum.count" }, + { + events: "@stripe:pointerover", + update: { + signal: "datatype[Units]", + }, + }, { events: "@stripe:pointerout", update: "0" }, ], }, @@ -78,15 +83,22 @@ export default function HeatMapScope(props) { type: "linear", domain: { data: "primary", - field: "count", + field: { + signal: "datatype[Units]", + }, }, - range: [theme.palette.primary.main, theme.palette.primary.light], + range: [theme.palette.secondary.main, theme.palette.primary.main], reverse: true, }, { name: "scaleYForLegendTick", type: "linear", - domain: { data: "primary", field: "count" }, + domain: { + data: "primary", + field: { + signal: "datatype[Units]", + }, + }, range: [0, { signal: "height" }], zero: false, reverse: true, @@ -108,7 +120,9 @@ export default function HeatMapScope(props) { }, fill: { scale: "color", - field: "count", + field: { + signal: "datatype[Units]", + }, }, // TODO: check why tooltip is not working correctly // tooltip: [ From 30fac09262157a6e97aeead8d7bcd54212e042da Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:34:36 +0300 Subject: [PATCH 07/10] Remove console.log statement Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- apps/pesayetu/src/components/HURUmap/Chart/configureScope.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js index e47d186e6..c798a58e9 100644 --- a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js +++ b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js @@ -71,7 +71,6 @@ export default function configureScope( break; case "heatmap": vegaSpec = HeatMapScope(scopeOptions); - console.log("HeatMapScope", vegaSpec); break; default: if (isMobile) { From a4f44a9d7cff6dfdc9aa19b8d2dbc9cfda6aeb72 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:50:11 +0300 Subject: [PATCH 08/10] Add tooltip Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- packages/hurumap-core/src/Scope/HeatMapScope.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index dcf2c379d..b57936a1f 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -125,11 +125,11 @@ export default function HeatMapScope(props) { }, }, // TODO: check why tooltip is not working correctly - // tooltip: [ - // { - // signal: `datum.${primaryGroup} + ' : ' + datum.count` - // } - // ] + tooltip: [ + { + signal: `datum.${primaryGroup} + ' : ' + + datatype[Units]`, + }, + ], }, update: { y: { From 055b0175b52d565b55dcdd0479637465ef09c2a6 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:59:18 +0300 Subject: [PATCH 09/10] Fix Tooltip Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/HURUmap/Chart/configureScope.js | 1 - packages/hurumap-core/src/Scope/HeatMapScope.js | 11 +++-------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js index c798a58e9..e27ef8128 100644 --- a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js +++ b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js @@ -77,7 +77,6 @@ export default function configureScope( vegaSpec = VerticalBarChartScope(scopeOptions); } else { vegaSpec = BarChartScope(scopeOptions); - console.log("BarChartScope", vegaSpec); } break; } diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index b57936a1f..517caca92 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -3,8 +3,6 @@ import merge from "deepmerge"; import Scope from "./Scope"; export default function HeatMapScope(props) { - console.log("HeatMapScope props: ", props); - const { primaryData, metadata, @@ -124,12 +122,6 @@ export default function HeatMapScope(props) { signal: "datatype[Units]", }, }, - // TODO: check why tooltip is not working correctly - tooltip: [ - { - signal: `datum.${primaryGroup} + ' : ' + + datatype[Units]`, - }, - ], }, update: { y: { @@ -141,6 +133,9 @@ export default function HeatMapScope(props) { width: { signal: "stripeWidth", }, + tooltip: { + signal: "{'group': datum[mainGroup], 'count': datum.count}", + }, }, hover: { y: { From 00d48beddfff931575fe647256555384d0c20ec0 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 12 Aug 2024 16:21:23 +0300 Subject: [PATCH 10/10] Remove unused signals Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../hurumap-core/src/Scope/HeatMapScope.js | 56 +------------------ 1 file changed, 2 insertions(+), 54 deletions(-) diff --git a/packages/hurumap-core/src/Scope/HeatMapScope.js b/packages/hurumap-core/src/Scope/HeatMapScope.js index 517caca92..8dbcac705 100644 --- a/packages/hurumap-core/src/Scope/HeatMapScope.js +++ b/packages/hurumap-core/src/Scope/HeatMapScope.js @@ -31,6 +31,7 @@ export default function HeatMapScope(props) { args, }), { + height: isMobile && isCompare && secondaryData?.length > 1 ? 620 : 310, signals: [ { name: "height", @@ -45,26 +46,7 @@ export default function HeatMapScope(props) { value: isCompare, }, { name: "stripeWidth", update: "width/length(data('primary'))" }, - { - name: "selectedStripeTemp", - value: 0, - on: [ - { - events: "@stripe:pointerover", - update: { - signal: "datatype[Units]", - }, - }, - { events: "@stripe:pointerout", update: "0" }, - ], - }, ], - width: { - signal: "isMobile ? 400 : 800", - }, - height: { - signal: "height", - }, scales: [ { name: "scaleX", @@ -88,19 +70,6 @@ export default function HeatMapScope(props) { range: [theme.palette.secondary.main, theme.palette.primary.main], reverse: true, }, - { - name: "scaleYForLegendTick", - type: "linear", - domain: { - data: "primary", - field: { - signal: "datatype[Units]", - }, - }, - range: [0, { signal: "height" }], - zero: false, - reverse: true, - }, ], marks: [ { @@ -156,27 +125,6 @@ export default function HeatMapScope(props) { format: ".4", labelColor: "black", }, - { - scale: "scaleYForLegendTick", - orient: "right", - domain: false, - labels: false, - ticks: true, - tickColor: "black", - offset: 45, - encode: { - ticks: { - update: { - x: { value: -7 }, - x2: { value: 13 }, - y: { - scale: "scaleYForLegendTick", - signal: "selectedStripeTemp", - }, - }, - }, - }, - }, ], legends: [ { @@ -184,7 +132,7 @@ export default function HeatMapScope(props) { type: "gradient", titleFontSize: 12, titlePadding: 4, - gradientLength: { signal: "height-16" }, + gradientLength: { signal: "height" }, }, ], },