diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/VerticalStackedChartScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/VerticalStackedChartScope.js deleted file mode 100644 index 8274b5af8..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/VerticalStackedChartScope.js +++ /dev/null @@ -1,422 +0,0 @@ -import merge from "deepmerge"; - -import Scope from "./Scope"; - -import theme from "@/climatemappedafrica/theme"; - -export default function VerticalStackedChartScope( - primaryData, - metadata, - config, - secondaryData, - primaryParentData, - secondaryParentData, - isCompare, -) { - const { parentLabel } = config; - - const { primary_group: primaryGroup } = metadata; - const stackedField = config.stacked_field; - - return merge( - Scope( - primaryData, - metadata, - config, - secondaryData, - primaryParentData, - secondaryParentData, - "stacked", - [ - { - type: "stack", - groupby: [primaryGroup], - field: { signal: "datatype[Units]" }, - }, - ], - ), - { - height: isCompare && secondaryData?.length > 1 ? 620 : 310, - signals: [ - { - name: "height", - value: isCompare && secondaryData?.length > 1 ? 620 : 310, - }, - { - name: "isCompare", - value: isCompare, - }, - { - name: "stackedField", - value: stackedField, - }, - ], - scales: [ - { - name: "xscale", - type: "band", - domain: { data: "primary_formatted", field: primaryGroup }, - range: [0, { signal: "width" }], - padding: 0.15, - }, - { - name: "yscale", - type: "linear", - domain: { data: "primary_formatted", field: "y1" }, - domainMin: { signal: "domainMin" }, - domainMax: { signal: "domainMax" }, - range: [ - { - signal: - "isCompare && data('secondary').length > 1 ? height/2: height", - }, - 0, - ], - zero: true, - // nice: true, - }, - { - name: "s_xscale", - type: "band", - domain: { data: "secondary_formatted", field: primaryGroup }, - range: [0, { signal: "width" }], - padding: 0.15, - }, - { - name: "s_yscale", - type: "linear", - domain: { data: "secondary_formatted", field: "y1" }, - domainMin: { signal: "domainMin" }, - domainMax: { signal: "domainMax" }, - range: [ - { - signal: - "isCompare && data('secondary').length > 1 ? height/2: height", - }, - 0, - ], - zero: true, - // nice: true, - }, - { - name: "secondary_color", - type: "ordinal", - range: "secondary", - domain: { - data: "secondary_formatted", - field: stackedField, - }, - }, - { - name: "color", - type: "ordinal", - range: "category", - domain: { - data: "primary_formatted", - field: stackedField, - }, - }, - { - name: "parent_color_scale", - type: "ordinal", - range: "category", - domain: [parentLabel], - }, - ], - marks: [ - { - type: "group", - name: "primary_stacked_bars", - encode: { - update: { - x: { value: 0 }, - y: { signal: "chartY" }, - height: { - signal: - "isCompare && data('secondary').length > 1 ? height/2: height", - }, - }, - }, - axes: [ - { - orient: "left", - scale: "yscale", - domainOpacity: 0.5, - tickSize: 0, - grid: true, - labelPadding: 6, - zindex: 1, - format: { signal: "numberFormat[Units]" }, - }, - { - orient: "bottom", - scale: "xscale", - bandPosition: 0, - domainOpacity: 0.5, - tickSize: 0, - labels: false, - }, - ], - legends: [ - { - fill: "color", - orient: "top", - direction: "horizontal", - strokeColor: "transparent", - labelFont: theme.typography.fontFamily, - encode: { - labels: { - interactive: true, - update: { - fontSize: { value: 11 }, - fill: { value: theme.palette.chart.text.primary }, - }, - }, - symbols: { - update: { - stroke: { value: "transparent" }, - }, - }, - }, - }, - ], - marks: [ - { - name: "bars", - from: { data: "primary_formatted" }, - type: "rect", - encode: { - update: { - x: { scale: "xscale", field: { signal: "mainGroup" } }, - width: { scale: "xscale", band: 1 }, - y: { scale: "yscale", field: "y0" }, - y2: { scale: "yscale", field: "y1" }, - fill: { scale: "color", field: stackedField }, - fillOpacity: { value: 1 }, - tooltip: { - signal: - "{'group': datum[mainGroup], 'count': format(datum.count, numberFormat.value), 'category': datum[stackedField]}", - }, - }, - }, - }, - ], - }, - { - type: "group", - name: "primary_parent_rule", - encode: { - update: { - x: { value: 0 }, - y: { signal: "chartY" }, - height: { - signal: - "isCompare && data('secondary').length > 1 ? height/2: height", - }, - }, - }, - legends: - primaryParentData?.length > 1 - ? [ - { - fill: "parent_color_scale", - orient: "none", - legendX: { signal: "width - 90" }, - legendY: { value: -40 }, - labelFont: theme.typography.fontFamily, - labelColor: theme.palette.chart.text.primary, - encode: { - symbols: { - shape: { value: "stroke" }, - update: { - shape: { value: "stroke" }, - size: { value: 500 }, - stroke: { value: theme.palette.chart.text.primary }, - strokeDash: { value: [2, 2] }, - }, - }, - }, - }, - ] - : null, - marks: [ - { - from: { data: "primary_parent_formatted" }, - type: "rule", - encode: { - update: { - x: { scale: "xscale", field: { signal: "mainGroup" } }, - x2: { - scale: "xscale", - field: { signal: "mainGroup" }, - offset: { signal: "width/domain('xscale').length - 10" }, - }, - y: { scale: "yscale", field: "y1" }, - y2: { scale: "yscale", field: "y1" }, - stroke: { - signal: - "datum.primary && (datum[datatype[Units]] > datum.primary[datatype[Units]]) ? grey_mark: white_mark", - }, - strokeWidth: { value: 1 }, - strokeDash: { value: [2, 2] }, - }, - }, - }, - ], - }, - { - type: "group", - name: "secondary_stacked_bars", - encode: { - update: { - x: { - value: 0, - }, - y: { - signal: - "data('secondary').length > 1 ? height/2 + 60: height + 40", - }, - height: { - signal: "data('secondary').length > 1 ? height/2: 0", - }, - }, - }, - axes: - secondaryData?.length > 1 - ? [ - { - orient: "left", - scale: "s_yscale", - domainOpacity: 0.5, - tickSize: 0, - grid: true, - labelPadding: 6, - zindex: 1, - format: { signal: "numberFormat[Units]" }, - }, - { - orient: "bottom", - scale: "s_xscale", - bandPosition: 0, - domainOpacity: 0.5, - tickSize: 0, - labels: false, - }, - ] - : null, - legends: - secondaryData?.length > 1 - ? [ - { - fill: "secondary_color", - orient: "top", - direction: "horizontal", - strokeColor: "transparent", - labelFont: theme.typography.fontFamily, - encode: { - labels: { - interactive: true, - update: { - fontSize: { value: 11 }, - fill: { value: theme.palette.chart.text.primary }, - }, - }, - symbols: { - update: { - stroke: { value: "transparent" }, - }, - }, - }, - }, - ] - : null, - marks: [ - { - name: "secondary_bars", - from: { data: "secondary_formatted" }, - type: "rect", - encode: { - update: { - x: { scale: "s_xscale", field: { signal: "mainGroup" } }, - width: { scale: "s_xscale", band: 1 }, - y: { scale: "s_yscale", field: "y0" }, - y2: { scale: "s_yscale", field: "y1" }, - fill: { scale: "secondary_color", field: stackedField }, - fillOpacity: { value: 1 }, - tooltip: { - signal: - "{'group': datum[mainGroup], 'count': format(datum.count, numberFormat.value), 'category': datum[stackedField]}", - }, - }, - }, - }, - ], - }, - { - type: "group", - name: "secondary_parent_rule", - encode: { - update: { - x: { value: 0 }, - y: { - signal: - "data('secondary').length > 1 ? height/2 + 30: data('secondary').length > 1 ? chartY: height + 40", - }, - height: { - signal: "data('secondary').length > 1 ? height/2: 0", - }, - }, - }, - legends: - secondaryParentData?.length > 1 - ? [ - { - fill: "parent_color_scale", - orient: "none", - legendX: { signal: "width - 90" }, - legendY: { value: -10 }, - labelFont: theme.typography.fontFamily, - labelColor: theme.palette.chart.text.primary, - encode: { - symbols: { - shape: { value: "stroke" }, - update: { - shape: { value: "stroke" }, - size: { value: 500 }, - stroke: { value: theme.palette.chart.text.primary }, - strokeDash: { value: [2, 2] }, - }, - }, - }, - }, - ] - : null, - marks: [ - { - from: { data: "secondary_parent_formatted" }, - type: "rule", - encode: { - update: { - x: { scale: "s_xscale", field: { signal: "mainGroup" } }, - x2: { - scale: "s_xscale", - field: { signal: "mainGroup" }, - offset: { signal: "width/domain('xscale').length - 10" }, - }, - y: { scale: "s_yscale", field: "y1" }, - y2: { scale: "s_yscale", field: "y1" }, - stroke: { - signal: - "datum.secondary && (datum[datatype[Units]] > datum.secondary[datatype[Units]]) ? grey_mark: white_mark", - }, - strokeWidth: { value: 1 }, - strokeDash: { value: [2, 2] }, - }, - }, - }, - ], - }, - ], - }, - ); -} diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js index 477b08915..35efd87ff 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/configureScope.js @@ -1,7 +1,6 @@ import { Scope } from "@hurumap/core"; import StackedChartScope from "./StackedChartScope"; -import VerticalStackedChartScope from "./VerticalStackedChartScope"; import { hurumapArgs } from "@/climatemappedafrica/config"; import theme from "@/climatemappedafrica/theme"; @@ -13,6 +12,7 @@ const { MultiLineChartScope, TreemapChartScope, VerticalBarChartScope, + VerticalStackedChartScope, } = Scope; export default function configureScope( @@ -64,15 +64,7 @@ export default function configureScope( break; case "stacked": if (isMobile) { - vegaSpec = VerticalStackedChartScope( - indicator?.data, - indicator?.metadata, - configuration, - secondaryIndicator?.data ?? null, - showParent ? indicator?.parentData : null, - showParent ? secondaryIndicator?.parentData : null, - isCompare, - ); + vegaSpec = VerticalStackedChartScope(scopeOptions); } else { vegaSpec = StackedChartScope( indicator?.data, diff --git a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js index b0bd09799..cdd9f2436 100644 --- a/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js +++ b/apps/pesayetu/src/components/HURUmap/Chart/configureScope.js @@ -1,7 +1,6 @@ import { Scope } from "@hurumap/core"; import StackedChartScope from "./StackedChartScope"; -import VerticalStackedChartScope from "./VerticalStackedChartScope"; import { hurumapArgs } from "@/pesayetu/config"; import theme from "@/pesayetu/theme"; @@ -13,6 +12,7 @@ const { MultiLineChartScope, TreemapChartScope, VerticalBarChartScope, + VerticalStackedChartScope, } = Scope; export default function configureScope( @@ -64,15 +64,7 @@ export default function configureScope( break; case "stacked": if (isMobile) { - vegaSpec = VerticalStackedChartScope( - indicator?.data, - indicator?.metadata, - configuration, - secondaryIndicator?.data ?? null, - showParent ? indicator?.parentData : null, - showParent ? secondaryIndicator?.parentData : null, - isCompare, - ); + vegaSpec = VerticalStackedChartScope(scopeOptions); } else { vegaSpec = StackedChartScope( indicator?.data, diff --git a/apps/pesayetu/src/components/HURUmap/Chart/VerticalStackedChartScope.js b/packages/hurumap-core/src/Scope/VerticalStackedChartScope.js similarity index 98% rename from apps/pesayetu/src/components/HURUmap/Chart/VerticalStackedChartScope.js rename to packages/hurumap-core/src/Scope/VerticalStackedChartScope.js index 9047eafaa..4e5c3a54e 100644 --- a/apps/pesayetu/src/components/HURUmap/Chart/VerticalStackedChartScope.js +++ b/packages/hurumap-core/src/Scope/VerticalStackedChartScope.js @@ -2,9 +2,7 @@ import merge from "deepmerge"; import Scope from "./Scope"; -import theme from "@/pesayetu/theme"; - -export default function VerticalStackedChartScope( +export default function VerticalStackedChartScope({ primaryData, metadata, config, @@ -12,29 +10,33 @@ export default function VerticalStackedChartScope( primaryParentData, secondaryParentData, isCompare, -) { + theme, + args, +}) { const { parentLabel } = config; const { primary_group: primaryGroup } = metadata; const stackedField = config.stacked_field; return merge( - Scope( + Scope({ primaryData, metadata, config, secondaryData, primaryParentData, secondaryParentData, - "stacked", - [ + chartType: "stacked", + transform: [ { type: "stack", groupby: [primaryGroup], field: { signal: "datatype[Units]" }, }, ], - ), + args, + theme, + }), { height: isCompare && secondaryData?.length > 1 ? 620 : 310, signals: [ diff --git a/packages/hurumap-core/src/Scope/index.js b/packages/hurumap-core/src/Scope/index.js index 3d54a20d3..442a5d0ff 100644 --- a/packages/hurumap-core/src/Scope/index.js +++ b/packages/hurumap-core/src/Scope/index.js @@ -5,6 +5,7 @@ import MultiLineChartScope from "./MultiLineChartScope"; import Scope from "./Scope"; import TreemapChartScope from "./TreemapChartScope"; import VerticalBarChartScope from "./VerticalBarChartScope"; +import VerticalStackedChartScope from "./VerticalStackedChartScope"; export default { Scope, @@ -13,5 +14,6 @@ export default { LineChartScope, MultiLineChartScope, VerticalBarChartScope, + VerticalStackedChartScope, TreemapChartScope, };