From 699d26708bf59eebd6878440bb5aa088573d56cc Mon Sep 17 00:00:00 2001 From: Vitalii Date: Fri, 16 Feb 2024 15:07:07 +0200 Subject: [PATCH] web/satellite: implemented Emissions dialog for project dashboard Added new dialog to show detailed info about emission impact calculations. Dialog is shown on emission-related cards click on project dashboard. Issue: https://github.com/storj/storj/issues/6694 https://github.com/storj/storj/issues/6793 Change-Id: Iac287d75dae84df9b33c94023ed45d5452bc0fec --- web/satellite/src/assets/icon-color-globe.svg | 12 ++ .../src/components/CardStatsComponent.vue | 41 ++---- .../components/dialogs/EmissionsDialog.vue | 119 ++++++++++++++++++ web/satellite/src/views/Dashboard.vue | 87 +++++++------ 4 files changed, 189 insertions(+), 70 deletions(-) create mode 100644 web/satellite/src/assets/icon-color-globe.svg create mode 100644 web/satellite/src/components/dialogs/EmissionsDialog.vue diff --git a/web/satellite/src/assets/icon-color-globe.svg b/web/satellite/src/assets/icon-color-globe.svg new file mode 100644 index 000000000000..229c7ddc6868 --- /dev/null +++ b/web/satellite/src/assets/icon-color-globe.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/satellite/src/components/CardStatsComponent.vue b/web/satellite/src/components/CardStatsComponent.vue index c13f2d5bcb96..ff541efa162c 100644 --- a/web/satellite/src/components/CardStatsComponent.vue +++ b/web/satellite/src/components/CardStatsComponent.vue @@ -2,47 +2,24 @@ // See LICENSE for copying information. diff --git a/web/satellite/src/components/dialogs/EmissionsDialog.vue b/web/satellite/src/components/dialogs/EmissionsDialog.vue new file mode 100644 index 000000000000..367994a1a7b2 --- /dev/null +++ b/web/satellite/src/components/dialogs/EmissionsDialog.vue @@ -0,0 +1,119 @@ +// Copyright (C) 2024 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue index 94cd7d98057d..6d9004567630 100644 --- a/web/satellite/src/views/Dashboard.vue +++ b/web/satellite/src/views/Dashboard.vue @@ -36,62 +36,48 @@ - + - + - + - + - + - + @@ -286,7 +272,7 @@ import { } from 'vuetify/components'; import { ComponentPublicInstance } from '@vue/runtime-core'; import { useRouter } from 'vue-router'; -import { mdiChevronRight, mdiInformationOutline } from '@mdi/js'; +import { mdiInformationOutline } from '@mdi/js'; import { useUsersStore } from '@/store/modules/usersStore'; import { useProjectsStore } from '@/store/modules/projectsStore'; @@ -300,7 +286,6 @@ import { ChartUtils } from '@/utils/chart'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { useNotify } from '@/utils/hooks'; import { useAppStore } from '@/store/modules/appStore'; -import { LocalData } from '@/utils/localData'; import { ProjectMembersPage } from '@/types/projectMembers'; import { AccessGrantsPage } from '@/types/accessGrants'; import { useConfigStore } from '@/store/modules/configStore'; @@ -318,7 +303,6 @@ import StorageChart from '@/components/StorageChart.vue'; import BucketsDataTable from '@/components/BucketsDataTable.vue'; import EditProjectLimitDialog from '@/components/dialogs/EditProjectLimitDialog.vue'; import CreateBucketDialog from '@/components/dialogs/CreateBucketDialog.vue'; -import ManagePassphraseDialog from '@/components/dialogs/ManagePassphraseDialog.vue'; import IconCloud from '@/components/icons/IconCloud.vue'; import IconArrowDown from '@/components/icons/IconArrowDown.vue'; import LimitWarningBanners from '@/components/LimitWarningBanners.vue'; @@ -327,6 +311,12 @@ import IconUpgrade from '@/components/icons/IconUpgrade.vue'; import IconCirclePlus from '@/components/icons/IconCirclePlus.vue'; import NextStepsContainer from '@/components/onboarding/NextStepsContainer.vue'; import TeamPassphraseBanner from '@/components/TeamPassphraseBanner.vue'; +import EmissionsDialog from '@/components/dialogs/EmissionsDialog.vue'; + +type ValueUnit = { + value: number + unit: string +} const appStore = useAppStore(); const usersStore = useUsersStore(); @@ -352,13 +342,24 @@ const isDatePicker = ref(false); const datePickerModel = ref([]); /** - * Returns calculated and formatted CO2 savings info. + * Returns formatted CO2 estimated info. */ -const co2Savings = computed(() => { - let saved = emission.value.hyperscalerImpact - emission.value.storjImpact; - if (saved < 0) saved = 0; +const co2Estimated = computed(() => { + const formatted = getValueAndUnit(emission.value.storjImpact); - return `${saved.toLocaleString(undefined, { maximumFractionDigits: 3 })} kg CO2e`; + return `${formatted.value.toLocaleString(undefined, { maximumFractionDigits: 0 })} ${formatted.unit} CO₂e`; +}); + +/** + * Returns formatted CO2 save info. + */ +const co2Saved = computed(() => { + let value = emission.value.hyperscalerImpact - emission.value.storjImpact; + if (value < 0) value = 0; + + const formatted = getValueAndUnit(value); + + return `${formatted.value.toLocaleString(undefined, { maximumFractionDigits: 0 })} ${formatted.unit} CO₂e`; }); /** @@ -589,6 +590,16 @@ const emission = computed(() => { return projectsStore.state.emission; }); +/** + * Returns adjusted value and unit. + */ +function getValueAndUnit(value: number): ValueUnit { + const unitUpgradeThreshold = 999999; + const [newValue, unit] = value > unitUpgradeThreshold ? [value / 1000, 't'] : [value, 'kg']; + + return { value: newValue, unit }; +} + /** * Returns formatted amount. */