Skip to content

Commit

Permalink
migrated electricity dashboard to svelte 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@JinIgarashi
JinIgarashi committed Dec 27, 2024
1 parent f8c6733 commit f5498a4
Show file tree
Hide file tree
Showing 10 changed files with 338 additions and 377 deletions.
365 changes: 199 additions & 166 deletions sites/geohub/src/routes/(map)/dashboards/electricity/+page.svelte
View file

Large diffs are not rendered by default.

40 changes: 29 additions & 11 deletions sites/geohub/src/routes/(map)/dashboards/electricity/components/AnalyzeBivariate.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,24 @@
import { map } from '../stores';
import { loadAdmin, reloadAdmin } from '../utils/adminLayer';
import { UNDP_DASHBOARD_RASTER_LAYER_ID } from './TimeSlider.svelte';
export let loadAdminLabels = true;
export let propertyA = `hrea_2020`;
export let propertyB = `hrea_2012`;
export let selectedRow = null;
export let selectedCol = null;
export let showLegend = true;
interface Props {
loadAdminLabels?: boolean;
propertyA?: string;
propertyB?: string;
selectedRow?: number | null;
selectedCol?: number | null;
showLegend?: boolean;
}
let {
loadAdminLabels = true,
propertyA = `hrea_2020`,
propertyB = `hrea_2012`,
selectedRow = $bindable(null),
selectedCol = $bindable(null),
showLegend = $bindable(true)
}: Props = $props();
const tippyTooltip = initTooltipTippy();
Expand All @@ -23,9 +35,14 @@
['#FFFFFF', '#BFEFFF', '#80E0FF', '#40D0FF', '#00C0FF']
];
let colorExpression;
let colorExpression = $state();
const updateColorExpression = (propertyA, propertyB, selectedRow, selectedCol) => {
const updateColorExpression = (
propertyA: string,
propertyB: string,
selectedRow: number | null | undefined,
selectedCol: number | null | undefined
) => {
let expression;
expression = [];
for (let row = 0; row < colorGrid.length; row++) {
Expand Down Expand Up @@ -62,7 +79,6 @@
reloadAdmin(undefined, loadAdminLabels, colorExpression);
return colorExpression;
};
$: colorExpression = updateColorExpression(propertyA, propertyB, selectedRow, selectedCol);
const gridSelectHandler = (rowIndex: number, colIndex: number) => {
if (selectedRow === rowIndex && selectedCol === colIndex) {
Expand All @@ -72,6 +88,7 @@
selectedRow = rowIndex;
selectedCol = colIndex;
}
colorExpression = updateColorExpression(propertyA, propertyB, selectedRow, selectedCol);
};
onMount(() => {
Expand All @@ -86,6 +103,7 @@
loadAdmin(true);
reloadAdmin(undefined, loadAdminLabels, colorExpression);
colorExpression = updateColorExpression(propertyA, propertyB, selectedRow, selectedCol);
});
</script>

Expand All @@ -95,7 +113,7 @@
? 'mb-4 clicked'
: ''}"
type="button"
on:click={() => (showLegend = !showLegend)}>Legend</button
onclick={() => (showLegend = !showLegend)}>Legend</button
>

{#if showLegend}
Expand All @@ -120,7 +138,7 @@
content: `Wealth: ${20 * (5 - rowIndex - 1)}-${20 * (5 - rowIndex)}%, E.A.: ${20 * colIndex}-${20 * (colIndex + 1)}%`
}}
aria-label="legend"
on:click={() => gridSelectHandler(rowIndex, colIndex)}
onclick={() => gridSelectHandler(rowIndex, colIndex)}
></button>
{/each}
</div>
Expand Down
62 changes: 13 additions & 49 deletions sites/geohub/src/routes/(map)/dashboards/electricity/components/Charts.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/state';
import { getBase64EncodedUrl } from '$lib/helper';
import { LineChart, ScaleTypes, type LineChartOptions } from '@carbon/charts-svelte';
import '@carbon/charts-svelte/styles.css';
import { Notification, type SegmentButton } from '@undp-data/svelte-undp-components';
import { format } from 'd3-format';
import { Notification } from '@undp-data/svelte-undp-components';
import { getContext, onMount } from 'svelte';
import { admin, hrea, map } from '../stores';
import {
Expand All @@ -16,14 +15,12 @@
ELECTRICITY_DATATYPE_CONTEXT_KEY
);
let minYear = electricityDataType[0];
let maxYear = electricityDataType[1];
let minYear = $state(electricityDataType[0]);
let maxYear = $state(electricityDataType[1]);
const titilerUrl = $page.data.titilerUrl;
const titilerUrl = page.data.titilerUrl;
const HREA_ID = 'HREA';
const HOVER = 'hover';
const CLICK = 'click';
const HREA_NODATA = 254;
Expand Down Expand Up @@ -73,20 +70,15 @@
},
height: '310px'
};
const interactChoices: SegmentButton[] = [{ value: CLICK, title: CLICK }];
let interactSelected = interactChoices[0].value;
let controller = new AbortController();
let adminBarValues = [];
let pointBarValues = [];
let carbonChartData = [];
let adminLocation = '';
let pointLocation = '';
let adminBarValues: number[] = [];
let pointBarValues: number[] = [];
let carbonChartData = $state([]);
let pointLocation = $state('');
$: interactSelected, loadInteraction();
const loadInteraction = () => {
if (!$map) return;
if (interactSelected === HOVER) adminInteraction();
else pointInteraction();
};
Expand All @@ -96,14 +88,6 @@
return getBase64EncodedUrl(url);
};
const adminInteraction = () => {
adminBarValues = [];
carbonChartData = [];
adminLocation = '';
$map.off('click', onPointClick);
$map.on('mousemove', renderAdminCharts);
};
const pointInteraction = () => {
pointBarValues = [];
carbonChartData = [];
Expand Down Expand Up @@ -163,9 +147,6 @@
};
const renderAdminCharts = () => {
adminLocation = [$admin.adm2_name, $admin.adm1_name, $admin.adm0_name]
.filter(Boolean)
.join(', ');
adminBarValues = [];
carbonChartData = [];
for (let i = maxYear; i >= minYear; i--) {
Expand Down Expand Up @@ -202,21 +183,10 @@
</script>

{#if carbonChartData?.length > 0}
{#if interactSelected === HOVER}
<br />
<div class="title-text">Population fully electrified in</div>
<div class="title-text stats-location">{adminLocation}</div>
<LineChart data={carbonChartData} options={carbonChartOptions} style="height: 310px;" />
<div class="subtitle-text">
Population in 2022: {format('.3~s')($admin.pop).replace(/NaN.*/, '').replace('G', 'B')}
</div>
{/if}
{#if interactSelected === CLICK}
<br />
<div class="title-text">Likelihood of full electrification at</div>
<div class="title-text stats-location">{pointLocation}</div>
<LineChart data={carbonChartData} options={carbonChartOptions} style="height: 310px;" />
{/if}
<br />
<div class="title-text">Likelihood of full electrification at</div>
<div class="title-text stats-location">{pointLocation}</div>
<LineChart data={carbonChartData} options={carbonChartOptions} style="height: 310px;" />
{:else}
<div class="mt-2">
<Notification type="info" showCloseButton={false}
Expand All @@ -235,10 +205,4 @@
color: rgb(1, 1, 1, 0.6);
font-weight: normal;
}
.subtitle-text {
font-size: 14px;
color: #808080;
font-weight: normal;
}
</style>
48 changes: 8 additions & 40 deletions sites/geohub/src/routes/(map)/dashboards/electricity/components/ElectricityControl.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,29 @@
<script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
import {
ELECTRICITY_DATATYPE_CONTEXT_KEY,
electricityDataTypes,
type ElectricityDataTypeStore
} from '../stores/electricityDataType';
import ElectricityLegend from './ElectricityLegend.svelte';
import { electricityDataTypes } from '../stores/electricityDataType';
const dispatch = createEventDispatcher();
const electricityDataType: ElectricityDataTypeStore = getContext(
ELECTRICITY_DATATYPE_CONTEXT_KEY
);
const HREA_ID = 'HREA';
export let electricitySelected = HREA_ID;
let rasterColorMapName = 'pubu';
function updateRasterColorMap(event) {
rasterColorMapName = event.detail.rasterColorMapName;
dispatch('change', {
colormapName: rasterColorMapName
});
interface Props {
electricityDataType: number[];
}
let { electricityDataType = $bindable() }: Props = $props();
</script>

<div>
<div class="button-container mt-2">
{#each electricityDataTypes as choice}
<button
class="button data-option pl-3 {`${choice.value === $electricityDataType ? 'is-active' : ''}`}"
on:click={() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
$electricityDataType = choice.value;
class="button data-option pl-3 {`${JSON.stringify(choice.value) === JSON.stringify(electricityDataType) ? 'is-active' : ''}`}"
onclick={() => {
electricityDataType = choice.value as number[];
}}
>
<span class="is-size-7">{choice.title}</span>
</button>
{/each}
</div>

<ElectricityLegend bind:electricitySelected on:onRasterColorMapChange={updateRasterColorMap} />
</div>

<style lang="scss">
.data-title {
background-color: #edf5fd;
}
.button-container {
display: flex;
flex-direction: column;
Expand All @@ -67,9 +40,4 @@
}
}
}
.raster-time-slider {
padding-top: 1em;
padding-bottom: 1em;
}
</style>
57 changes: 0 additions & 57 deletions sites/geohub/src/routes/(map)/dashboards/electricity/components/ElectricityLegend.svelte
View file

This file was deleted.

11 changes: 7 additions & 4 deletions sites/geohub/src/routes/(map)/dashboards/electricity/components/ExploreEvolution.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@
import { onMount } from 'svelte';
import { loadAdmin, reloadAdmin } from '../utils/adminLayer';
export let showMapLabels: boolean;
let colorMapNameStore: string = $state('pubu');
interface Props {
showMapLabels: boolean;
scaleColorList?: string[];
}
let colorMapNameStore: string = 'pubu';
export let scaleColorList: string[] = [];
let { showMapLabels = $bindable(), scaleColorList = $bindable([]) }: Props = $props();
let isReverse: boolean = false;
const showLabelsHandler = () => {
Expand Down Expand Up @@ -37,7 +40,7 @@
<p class="mb-2">Electricity access</p>
<ColorMapPicker colorMapName={colorMapNameStore} on:change={colorPickerChangeHandler} />
<label class="checkbox mt-2">
<input type="checkbox" on:change={showLabelsHandler} checked={showMapLabels} />
<input type="checkbox" onchange={showLabelsHandler} checked={showMapLabels} />
Show Labels
</label>
</div>
Loading

0 comments on commit f5498a4

Please sign in to comment.