diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx index b4a6a1d9d..dfa7d1134 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx @@ -378,7 +378,7 @@ const DataCard = ({ }: React.HTMLAttributes & { type?: EntityName; }) => { - const [tabActive, setTabActive] = useState(0); + const [tabActive, setTabActive] = useState(1); const [selected, setSelected] = useState(["1"]); const [selectedPolygonUuid, setSelectedPolygonUuid] = useState("0"); const basename = useBasename(); @@ -624,7 +624,7 @@ const DataCard = ({ - + diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx index 7f315ba4c..06c6f42b8 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx @@ -57,7 +57,7 @@ const RestorationMetrics = ({ tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP} showTreesRestoredGraph={false} /> - + ); diff --git a/src/components/elements/Toggle/Toggle.tsx b/src/components/elements/Toggle/Toggle.tsx index 6e8da9ae2..873ae97f6 100644 --- a/src/components/elements/Toggle/Toggle.tsx +++ b/src/components/elements/Toggle/Toggle.tsx @@ -14,12 +14,19 @@ export interface ToggleProps { disabledIndexes?: number[]; variant?: ToggleVariants; onChangeActiveIndex?: (index: number) => void; + defaultActiveIndex?: number; } const Toggle = (props: ToggleProps) => { - const { items, disabledIndexes = [], variant = VARIANT_TOGGLE_PRIMARY, onChangeActiveIndex } = props; + const { + items, + disabledIndexes = [], + variant = VARIANT_TOGGLE_PRIMARY, + onChangeActiveIndex, + defaultActiveIndex = 0 + } = props; - const [activeIndex, setActiveIndex] = useState(0); + const [activeIndex, setActiveIndex] = useState(defaultActiveIndex); const [width, setWidth] = useState(0); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); diff --git a/src/pages/dashboard/charts/CustomBarJobsCreated.tsx b/src/pages/dashboard/charts/CustomBarJobsCreated.tsx index 4df4fe024..3446ea1f0 100644 --- a/src/pages/dashboard/charts/CustomBarJobsCreated.tsx +++ b/src/pages/dashboard/charts/CustomBarJobsCreated.tsx @@ -10,6 +10,9 @@ interface CustomBarProps { export const CustomBar: React.FC = ({ fill, x, y, width, height }) => { const radius = 5; + if (width === 0 || height === 0) { + return null; + } const path = ` M${x},${y + height} L${x},${y + radius} diff --git a/src/pages/dashboard/charts/CustomTooltip.tsx b/src/pages/dashboard/charts/CustomTooltip.tsx index 9cd396ee0..73313bcf7 100644 --- a/src/pages/dashboard/charts/CustomTooltip.tsx +++ b/src/pages/dashboard/charts/CustomTooltip.tsx @@ -2,13 +2,23 @@ import React from "react"; export const CustomTooltip: React.FC = ({ active, payload, label }) => { if (!active || !payload || !payload.length) return null; + const value = payload[0].value; + const total = payload[0].payload.total; + const percentage = (value / total) * 100; + + const formattedValue = value.toLocaleString("en-US", { + minimumFractionDigits: 1, + maximumFractionDigits: 1 + }); + + const formattedPercentage = percentage.toFixed(0); + return (

{label}

{payload.map((item: any, index: number) => (

- {item.name}: - {item.value.toLocaleString()} +

{`${formattedValue}ha (${formattedPercentage}%)`}

))}
diff --git a/src/pages/dashboard/charts/SimpleBarChart.tsx b/src/pages/dashboard/charts/SimpleBarChart.tsx index 4b83266f3..73a5a5423 100644 --- a/src/pages/dashboard/charts/SimpleBarChart.tsx +++ b/src/pages/dashboard/charts/SimpleBarChart.tsx @@ -17,12 +17,14 @@ type ResturationStrategy = { type FormattedData = { name: string; Value: number; + total: number; }; -const SimpleBarChart = ({ data }: { data: ResturationStrategy[] }) => { +const SimpleBarChart = ({ data, total }: { data: ResturationStrategy[]; total?: number }) => { const formattedData: FormattedData[] = data.map(item => ({ name: item.label.split(",").join(" + ").replace(/-/g, " "), - Value: item.value + Value: item.value, + total: total ?? 0 })); return ( diff --git a/src/pages/dashboard/components/GraphicIconDashboard.tsx b/src/pages/dashboard/components/GraphicIconDashboard.tsx index 942dac62e..0ead992d1 100644 --- a/src/pages/dashboard/components/GraphicIconDashboard.tsx +++ b/src/pages/dashboard/components/GraphicIconDashboard.tsx @@ -83,12 +83,12 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp className="shadow-md fixed z-10 w-auto rounded border border-darkCustom bg-white p-2" style={{ left: `${tooltip.x}px`, - top: `${tooltip.y - 50}px`, + top: `${tooltip.y - 65}px`, transform: "translateX(-50%)" }} > - {`${t(tooltip.label)} `} - {t(tooltip.text)} +

{`${t(tooltip.label)} `}

+ {t(tooltip.text)} )}
diff --git a/src/utils/dashboardUtils.ts b/src/utils/dashboardUtils.ts index 22632fce1..d3b339c61 100644 --- a/src/utils/dashboardUtils.ts +++ b/src/utils/dashboardUtils.ts @@ -482,7 +482,7 @@ export const parsePolygonsIndicatorDataForLandUse = ( return { label, value: adjustedValue as number, - valueText: `${Math.round(value as number)} ha ${percentage.toFixed(2)}%` + valueText: `${Math.round(value as number)}ha (${percentage.toFixed(0)}%)` }; }); @@ -524,12 +524,10 @@ export const parsePolygonsIndicatorDataForStrategies = (polygonsIndicator: Polyg } }); - return Object.entries(totals) - .filter(([_, value]) => value > 0) - .map(([label, value]) => ({ - label, - value: Number(value.toFixed(2)) - })); + return Object.entries(totals).map(([label, value]) => ({ + label, + value: Number(value.toFixed(2)) + })); }; export const parsePolygonsIndicatorDataForEcoRegion = (polygons: PolygonIndicator[]): ParsedResult => {