From 7d5bdb4b6bdb48cd9287a68383b4880c2f2e1813 Mon Sep 17 00:00:00 2001 From: mwbernard Date: Fri, 12 Jan 2024 10:47:22 -0800 Subject: [PATCH] Add hover states and fix color assignment --- .../src/assets/img/negative-yield.svg | 3 + .../src/assets/img/positive-yield.svg | 3 + .../src/assets/img/reference-crop.svg | 3 + vacs-map-app/src/components/CardWrapper.vue | 57 +++++++-- vacs-map-app/src/components/ContentModal.vue | 2 +- vacs-map-app/src/components/CropCards.vue | 2 + .../components/CropGroupStackedBarChart.vue | 14 ++- .../src/components/ExploreSidebar.vue | 16 ++- vacs-map-app/src/components/GridOverlay.vue | 22 +++- .../src/components/MapLegendCropGroups.vue | 115 ++++++++++++++++-- vacs-map-app/src/components/MapTooltip.vue | 78 ++++++++++-- .../src/components/TooltipWrapper.vue | 2 + vacs-map-app/src/stores/colors.js | 40 +++++- vacs-map-app/src/stores/mapExplore.js | 7 +- vacs-map-app/src/stores/siteContent.js | 2 +- vacs-map-app/src/utils/colors.js | 11 +- 16 files changed, 321 insertions(+), 56 deletions(-) create mode 100644 vacs-map-app/src/assets/img/negative-yield.svg create mode 100644 vacs-map-app/src/assets/img/positive-yield.svg create mode 100644 vacs-map-app/src/assets/img/reference-crop.svg diff --git a/vacs-map-app/src/assets/img/negative-yield.svg b/vacs-map-app/src/assets/img/negative-yield.svg new file mode 100644 index 0000000..2394f35 --- /dev/null +++ b/vacs-map-app/src/assets/img/negative-yield.svg @@ -0,0 +1,3 @@ + + + diff --git a/vacs-map-app/src/assets/img/positive-yield.svg b/vacs-map-app/src/assets/img/positive-yield.svg new file mode 100644 index 0000000..fed3b27 --- /dev/null +++ b/vacs-map-app/src/assets/img/positive-yield.svg @@ -0,0 +1,3 @@ + + + diff --git a/vacs-map-app/src/assets/img/reference-crop.svg b/vacs-map-app/src/assets/img/reference-crop.svg new file mode 100644 index 0000000..10b6f8b --- /dev/null +++ b/vacs-map-app/src/assets/img/reference-crop.svg @@ -0,0 +1,3 @@ + + + diff --git a/vacs-map-app/src/components/CardWrapper.vue b/vacs-map-app/src/components/CardWrapper.vue index f67d330..b4088b4 100644 --- a/vacs-map-app/src/components/CardWrapper.vue +++ b/vacs-map-app/src/components/CardWrapper.vue @@ -7,11 +7,17 @@
-
- {{ title }} +
+ + {{ title }} + + {{ subtitle }}
+
+ {{ cropGroup }} reference crop +
{{ indicator.key }} {} @@ -84,8 +100,18 @@ const props = defineProps({ default: () => {} } }) -const { title, description, handleClick, indicator, isActive, isDynamic, showMoreInfo, boldTitle } = - toRefs(props) +const { + title, + description, + handleClick, + indicator, + isActive, + isDynamic, + showMoreInfo, + boldTitle, + referenceCrop, + cropGroup +} = toRefs(props) const colorStore = useColorStore() const { stopLight: stopLightScheme, colorblindFriendly } = storeToRefs(colorStore) @@ -170,30 +196,41 @@ const useDarkIndicatorText = computed(() => { padding-top: 0; } -.title { +.title-row { font-family: var(--font-family-h2); height: var(--title-height); font-size: 1.125rem; display: flex; gap: 0.5rem; - align-items: center; + align-items: baseline; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } -.title img { +.title-row img { margin-left: auto; } +.title-row.bold { + font-family: var(--font-family-header); + font-size: 1.375rem; +} + +.title { + height: 100%; + display: flex; + align-items: center; + gap: 0.5rem; +} + .subtitle { font-size: 0.875rem; font-family: var(--font-family-h3); } -.title.bold { - font-family: var(--font-family-header); - font-size: 1.375rem; +.reference-crop-message { + color: var(--dark-gray); } .indicator { diff --git a/vacs-map-app/src/components/ContentModal.vue b/vacs-map-app/src/components/ContentModal.vue index 3673ff8..10be85c 100644 --- a/vacs-map-app/src/components/ContentModal.vue +++ b/vacs-map-app/src/components/ContentModal.vue @@ -80,7 +80,7 @@ onClickOutside(contentInnerRef, () => emit('close')) .header { font-family: var(--font-family-h2); font-size: 1.875rem; - padding-bottom: 0.25rem; + padding-bottom: 0.75rem; line-height: 110%; } diff --git a/vacs-map-app/src/components/CropCards.vue b/vacs-map-app/src/components/CropCards.vue index 5dfe564..901d18c 100644 --- a/vacs-map-app/src/components/CropCards.vue +++ b/vacs-map-app/src/components/CropCards.vue @@ -7,6 +7,8 @@ :title="crop.label" :bold-title="true" :description="crop.description" + :reference-crop="!!crop.benchmark" + :crop-group="crop.crop_group" :handle-click="() => navigate(crop.id)" :indicator="{ key: cropSortBy, diff --git a/vacs-map-app/src/components/CropGroupStackedBarChart.vue b/vacs-map-app/src/components/CropGroupStackedBarChart.vue index 3d3937b..5dd4698 100644 --- a/vacs-map-app/src/components/CropGroupStackedBarChart.vue +++ b/vacs-map-app/src/components/CropGroupStackedBarChart.vue @@ -4,6 +4,10 @@ v-for="bar in bars" :key="bar.id" class="crop-bar" + :class="{ + highlighted: hoveredCrop === bar.id, + unhighlighted: hoveredCrop && hoveredCrop !== bar.id + }" :style="{ width: `${bar.gridShare}%`, background: bar.fill @@ -29,9 +33,9 @@ const mapExploreStore = useMapExploreStore() const { selectedCrop, selectedModel } = storeToRefs(filtersStore) const { data: cropInformation } = storeToRefs(cropInformationStore) -const { ordinal: ordinalScheme, noData: noDataFill } = storeToRefs(colorStore) +const { ordinal: ordinalScheme, noData: noDataFill, getCropColor } = storeToRefs(colorStore) const { data: cropYieldsData } = storeToRefs(cropYieldsStore) -const { showCropGroupMap, cropGroupMetric } = storeToRefs(mapExploreStore) +const { showCropGroupMap, cropGroupMetric, hoveredCrop } = storeToRefs(mapExploreStore) const selectedCropInfo = computed(() => { return cropInformation?.value?.find((d) => d.id === selectedCrop.value) @@ -65,7 +69,7 @@ const bars = computed(() => { return { id: crop.id, label: crop.label, - fill: ordinalScheme.value[i], + fill: colorStore.getCropColor(crop.id), gridShare } }) @@ -98,4 +102,8 @@ const bars = computed(() => { .crop-bar { height: 100%; } + +.unhighlighted { + opacity: 20%; +} diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue index ed84d9e..815ff25 100644 --- a/vacs-map-app/src/components/ExploreSidebar.vue +++ b/vacs-map-app/src/components/ExploreSidebar.vue @@ -29,15 +29,7 @@
- - How will {{ selectedCropInfo?.label }} yields change? - - + How will {{ selectedCropInfo?.label }} yields change?
emissions scenario +
diff --git a/vacs-map-app/src/components/GridOverlay.vue b/vacs-map-app/src/components/GridOverlay.vue index 5b7a15d..141a3fd 100644 --- a/vacs-map-app/src/components/GridOverlay.vue +++ b/vacs-map-app/src/components/GridOverlay.vue @@ -109,7 +109,7 @@ const { } = toRefs(props) const mapExploreStore = useMapExploreStore() -const { hoveredId } = storeToRefs(mapExploreStore) +const { hoveredId, hoveredCrop, showCropGroupMap } = storeToRefs(mapExploreStore) const colorStore = useColorStore() const { @@ -147,7 +147,7 @@ const addHoverListeners = () => { map.value.on('mousemove', id.value, (event) => { if (!event?.features?.length) return const feature = event?.features[0] - if (feature.properties.id) { + if (feature.id) { hoveredId.value = feature.properties.id } }) @@ -170,6 +170,18 @@ const updateHoveredFeatureState = (elementId, hovered) => { ) } +const updateHoveredCrop = (cropId) => { + if (!id.value || !showCropGroupMap.value) return + + let expression = ['case', ['boolean', ['feature-state', 'highlighted'], false], 0.5, 1] + + if (cropId) { + expression = ['case', ['==', ['get', cropGroupColumn.value], cropId], 1, 0.2] + } + + map.value.setPaintProperty(id.value, 'circle-opacity', expression) +} + const getCircleColorQuintiles = (quintiles) => { if (!quintiles) return 'gray' @@ -312,7 +324,7 @@ const getCircleColorByCrop = () => { .concat( cropGroupCrops.value .map((crop, i) => { - return [['==', ['get', cropGroupColumn.value], crop], ordinalScheme.value[i]] + return [['==', ['get', cropGroupColumn.value], crop], colorStore.getCropColor(crop)] }) .flat() ) @@ -382,6 +394,10 @@ watch(hoveredId, (current, prev) => { updateHoveredFeatureState(prev, false) updateHoveredFeatureState(current, true) }) + +watch(hoveredCrop, (current) => { + updateHoveredCrop(current) +}) diff --git a/vacs-map-app/src/components/MapLegendCropGroups.vue b/vacs-map-app/src/components/MapLegendCropGroups.vue index f802cd8..12befea 100644 --- a/vacs-map-app/src/components/MapLegendCropGroups.vue +++ b/vacs-map-app/src/components/MapLegendCropGroups.vue @@ -1,21 +1,44 @@ + diff --git a/vacs-map-app/src/components/TooltipWrapper.vue b/vacs-map-app/src/components/TooltipWrapper.vue index 774e7b3..d333a35 100644 --- a/vacs-map-app/src/components/TooltipWrapper.vue +++ b/vacs-map-app/src/components/TooltipWrapper.vue @@ -104,6 +104,8 @@ const setPosition = (px, py) => { z-index: 2000; display: flex; + flex-direction: column; + gap: 0.25rem; width: max-content; max-width: 200px; padding: 0.5rem; diff --git a/vacs-map-app/src/stores/colors.js b/vacs-map-app/src/stores/colors.js index 8f69dd2..a68f57e 100644 --- a/vacs-map-app/src/stores/colors.js +++ b/vacs-map-app/src/stores/colors.js @@ -1,6 +1,9 @@ import * as d3 from 'd3' import { ref, computed } from 'vue' -import { defineStore } from 'pinia' +import { defineStore, storeToRefs } from 'pinia' +import { useCropInformationStore } from '@/stores/cropInformation' +import { useFiltersStore } from '@/stores/filters' + import { divergingScheme, stopLightScheme, @@ -10,7 +13,9 @@ import { ordinalScheme, colorblindOrdinalScheme, noDataFill, - colorblindNoDataFill + colorblindNoDataFill, + selectedFill, + referenceFill } from '@/utils/colors' export const useColorStore = defineStore('colorStore', () => { @@ -32,5 +37,34 @@ export const useColorStore = defineStore('colorStore', () => { const noData = computed(() => (colorblindFriendly.value ? colorblindNoDataFill : noDataFill)) - return { colorblindFriendly, diverging, stopLight, fingerprint, ordinal, noData } + const filtersStore = useFiltersStore() + const cropInformationStore = useCropInformationStore() + const { selectedCrop } = storeToRefs(filtersStore) + const { data: cropInfo } = storeToRefs(cropInformationStore) + + const getCropColor = (cropId) => { + if (!selectedCrop.value || !cropId || !cropInfo.value || cropId === 'none') return noDataFill + if (cropId === selectedCrop.value) return selectedFill + const cropObj = cropInfo.value.find((d) => d.id === cropId) + if (cropObj.benchmark) return referenceFill + + const cropGroupCrops = cropInfo.value.filter((d) => d.crop_group === cropObj.crop_group) + const scheme = d3 + .scaleOrdinal() + .domain(cropGroupCrops.map((d) => d.id)) + .range(ordinal.value) + + return scheme(cropId) + } + + return { + colorblindFriendly, + diverging, + stopLight, + fingerprint, + ordinal, + noData, + + getCropColor + } }) diff --git a/vacs-map-app/src/stores/mapExplore.js b/vacs-map-app/src/stores/mapExplore.js index d7e41bd..9744649 100644 --- a/vacs-map-app/src/stores/mapExplore.js +++ b/vacs-map-app/src/stores/mapExplore.js @@ -2,12 +2,15 @@ import { ref } from 'vue' import { defineStore } from 'pinia' export const useMapExploreStore = defineStore('mapExplore', () => { + const mapPadding = ref(null) const selectedMap = ref('') + // hovered grid cell id const hoveredId = ref(null) - const mapPadding = ref(null) + // hovered crop for crop group + const hoveredCrop = ref(null) const showCropGroupMap = ref(false) const cropGroupMetric = ref('max') - return { selectedMap, mapPadding, hoveredId, showCropGroupMap, cropGroupMetric } + return { selectedMap, mapPadding, hoveredId, hoveredCrop, showCropGroupMap, cropGroupMetric } }) diff --git a/vacs-map-app/src/stores/siteContent.js b/vacs-map-app/src/stores/siteContent.js index b8f0c83..a979972 100644 --- a/vacs-map-app/src/stores/siteContent.js +++ b/vacs-map-app/src/stores/siteContent.js @@ -29,7 +29,7 @@ export const useContentStore = defineStore('siteContent', () => { dataDisclaimer: 'All data used in this application are preliminary results and subject to change', crop_group_map: - 'This map provides a summary view for a given crop group. Each grid cell is colored to represent the crop from the selected group with the highest projected yield increase, or decrease, based on the currently selected emissions scenario. Whether the map displays highest increase or decrease can be toggled using the legend. Grid cells labeled "None" are places where no crop in the selected group has a positive, or negative, projected yield change.' + 'This map displays the crop with the greatest increase at a given location. For example, a circle in blue for the cereal crop group indicates that maize increased in that area more than any other cereal crop. \n\n When no crop increases (i.e., the future yield is never projected to be higher than the historic yield), the area will be represented as “No increase”. \n\n Each crop group is viewable by both greatest increase and greatest decrease.' }) return { diff --git a/vacs-map-app/src/utils/colors.js b/vacs-map-app/src/utils/colors.js index b3f52f4..c9e27fd 100644 --- a/vacs-map-app/src/utils/colors.js +++ b/vacs-map-app/src/utils/colors.js @@ -19,15 +19,20 @@ export const stopLightScheme = { // need at least 7 for now export const ordinalScheme = [ - '#F7B300', // this is the color to use for the benchmark crop if not selected - '#5A7CB6', // this is the color to use for the selected crop '#BF4556', '#00A949', '#F66E09', '#AB7430', - '#9BA700' + '#9BA700', + '#0f0', //replace with better color + '#00f' //replace with better color ] +// this is the color to use for the selected crop +export const selectedFill = '#5A7CB6' +// this is the color to use for the benchmark crop if not selected +export const referenceFill = '#F7B300' + export const noDataFill = '#586163' // colorblind-friendly colors for use via toggle