-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TM-1425] reload and no data for monitored charts (#747)
* [TM-1425] add loader and no data div for monitored charts * [TM-1425] fix overflow chart TreeLossBarChart * [TM-1425] add dropdown with polygon filtering --------- Co-authored-by: Dotty <[email protected]>
- Loading branch information
1 parent
5f2d873
commit bbc3a18
Showing
7 changed files
with
244 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React from "react"; | ||
| import { ReactNode } from "react"; | ||
| import { When } from "react-if"; | ||
|
|
||
| import SimpleBarChart from "@/pages/dashboard/charts/SimpleBarChart"; | ||
| import GraphicIconDashboard from "@/pages/dashboard/components/GraphicIconDashboard"; | ||
| import SecDashboard from "@/pages/dashboard/components/SecDashboard"; | ||
| import { TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP } from "@/pages/dashboard/constants/tooltips"; | ||
|
|
||
| import EcoRegionDoughnutChart from "./EcoRegionDoughnutChart"; | ||
| import { LoadingState } from "./MonitoredLoading"; | ||
| import { NoDataState } from "./NoDataState"; | ||
| import TreeLossBarChart from "./TreesLossBarChart"; | ||
|
|
||
| const ChartContainer = ({ | ||
| children, | ||
| isLoading, | ||
| hasNoData | ||
| }: { | ||
| children: ReactNode; | ||
| isLoading: boolean; | ||
| hasNoData: boolean; | ||
| }): JSX.Element | null => { | ||
| if (isLoading) { | ||
| return <LoadingState />; | ||
| } | ||
|
|
||
| if (hasNoData) { | ||
| return <NoDataState />; | ||
| } | ||
|
|
||
| return <>{children}</>; | ||
| }; | ||
|
|
||
| interface RecordType { | ||
| total_hectares_restored_sum: number; | ||
| } | ||
|
|
||
| const RestorationMetrics = ({ | ||
| record, | ||
| totalHectaresRestoredGoal, | ||
| strategiesData | ||
| }: { | ||
| record: RecordType; | ||
| totalHectaresRestoredGoal: number; | ||
| strategiesData: any[]; | ||
| }) => ( | ||
| <div className="flex w-full flex-col gap-6 lg:ml-[35px]"> | ||
| <SecDashboard | ||
| title="Total Hectares Under Restoration" | ||
| data={{ | ||
| value: record.total_hectares_restored_sum, | ||
| totalValue: totalHectaresRestoredGoal | ||
| }} | ||
| className="w-full place-content-center pl-8" | ||
| tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP} | ||
| showTreesRestoredGraph={false} | ||
| /> | ||
| <SimpleBarChart data={strategiesData} /> | ||
| </div> | ||
| ); | ||
|
|
||
| interface MonitoredChartsProps { | ||
| selected: React.Key[]; | ||
| isLoadingIndicator: boolean; | ||
| parsedData: any[]; | ||
| ecoRegionData: any; | ||
| strategiesData: any[]; | ||
| landUseData: any; | ||
| record: RecordType; | ||
| totalHectaresRestoredGoal: number; | ||
| } | ||
|
|
||
| const MonitoredCharts = ({ | ||
| selected, | ||
| isLoadingIndicator, | ||
| parsedData, | ||
| ecoRegionData, | ||
| strategiesData, | ||
| landUseData, | ||
| record, | ||
| totalHectaresRestoredGoal | ||
| }: MonitoredChartsProps) => { | ||
| const renderChart = (chartId: React.Key) => { | ||
| switch (chartId) { | ||
| case "1": | ||
| case "2": | ||
| return ( | ||
| <ChartContainer isLoading={isLoadingIndicator} hasNoData={!parsedData?.length}> | ||
| <TreeLossBarChart data={parsedData} className="flex flex-col" /> | ||
| </ChartContainer> | ||
| ); | ||
|
|
||
| case "3": | ||
| return ( | ||
| <ChartContainer isLoading={isLoadingIndicator} hasNoData={!ecoRegionData?.chartData?.length}> | ||
| <EcoRegionDoughnutChart data={ecoRegionData} /> | ||
| </ChartContainer> | ||
| ); | ||
|
|
||
| case "4": | ||
| return ( | ||
| <ChartContainer isLoading={isLoadingIndicator} hasNoData={!strategiesData?.length}> | ||
| <RestorationMetrics | ||
| record={record} | ||
| totalHectaresRestoredGoal={totalHectaresRestoredGoal} | ||
| strategiesData={strategiesData} | ||
| /> | ||
| </ChartContainer> | ||
| ); | ||
|
|
||
| case "5": | ||
| return ( | ||
| <ChartContainer isLoading={isLoadingIndicator} hasNoData={!landUseData?.graphicTargetLandUseTypes?.length}> | ||
| <div className="w-full pt-12"> | ||
| <GraphicIconDashboard data={landUseData.graphicTargetLandUseTypes} maxValue={totalHectaresRestoredGoal} /> | ||
| </div> | ||
| </ChartContainer> | ||
| ); | ||
|
|
||
| default: | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex w-full flex-col gap-6"> | ||
| {selected.map( | ||
| (id: React.Key | null | undefined) => | ||
| id != null && ( | ||
| <When key={id} condition={selected.includes(id)}> | ||
| {renderChart(id)} | ||
| </When> | ||
| ) | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MonitoredCharts; |
9 changes: 9 additions & 0 deletions
9
src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredLoading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from "react"; | ||
|
|
||
| import Loader from "@/components/generic/Loading/Loader"; | ||
|
|
||
| export const LoadingState = () => ( | ||
| <div className="flex w-full items-start justify-center"> | ||
| <Loader /> | ||
| </div> | ||
| ); |
22 changes: 22 additions & 0 deletions
22
src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from "react"; | ||
|
|
||
| import Text from "@/components/elements/Text/Text"; | ||
| import Tooltip from "@/components/elements/Tooltip/Tooltip"; | ||
| import Icon from "@/components/extensive/Icon/Icon"; | ||
| import { IconNames } from "@/components/extensive/Icon/Icon"; | ||
|
|
||
| export const NoDataState = () => ( | ||
| <div className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000"> | ||
| <Text variant="text-32-semibold" className="text-blueCustom"> | ||
| No Data to Display | ||
| </Text> | ||
| <div className="flex items-center gap-1"> | ||
| <Text variant="text-14" className="text-darkCustom"> | ||
| RUN ANALYSIS ON PROJECT POLYGONS TO SEE DATA | ||
| </Text> | ||
| <Tooltip content="Tooltip"> | ||
| <Icon name={IconNames.IC_INFO} className="h-4 w-4" /> | ||
| </Tooltip> | ||
| </div> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.