diff --git a/components/paths/graphs/DataTable.tsx b/components/paths/graphs/DataTable.tsx index 58ba4aa9..987bf33b 100644 --- a/components/paths/graphs/DataTable.tsx +++ b/components/paths/graphs/DataTable.tsx @@ -13,6 +13,7 @@ interface DataTableProps { endYear: number; separateYears?: number[]; goalName?: string; + disclaimer?: string; } const TableWrapper = Styled.div` @@ -29,7 +30,15 @@ const TableWrapper = Styled.div` `; const DataTable = (props: DataTableProps) => { - const { node, subNodes, startYear, endYear, separateYears, goalName } = props; + const { + node, + subNodes, + startYear, + endYear, + separateYears, + goalName, + disclaimer, + } = props; const t = useTranslations(); const totalHistoricalValues = node.metric.historicalValues.filter((value) => separateYears @@ -79,6 +88,7 @@ const DataTable = (props: DataTableProps) => { {separateYears ? '' : ` (${startYear} - ${endYear})`} + {disclaimer && } diff --git a/components/paths/graphs/DimensionalNodePlot.tsx b/components/paths/graphs/DimensionalNodePlot.tsx index 739db37a..97e76129 100644 --- a/components/paths/graphs/DimensionalNodePlot.tsx +++ b/components/paths/graphs/DimensionalNodePlot.tsx @@ -53,6 +53,13 @@ const Tools = styled.div` } `; +const Disclaimer = styled.p` + margin-right: 1.25rem; + font-size: ${({ theme }) => theme.fontSizeSm}; + color: ${({ theme }) => theme.textColor.secondary}; + text-align: right; +`; + function formatHover( name: string, color: string, @@ -159,6 +166,7 @@ type DimensionalNodePlotProps = { color?: string | null; withControls?: boolean; withTools?: boolean; + disclaimer?: string; }; export default function DimensionalNodePlot({ @@ -170,6 +178,7 @@ export default function DimensionalNodePlot({ withTools = true, endYear, baselineForecast, + disclaimer, }: DimensionalNodePlotProps) { const t = useTranslations(); const activeGoal = useReactiveVar(activeGoalVar); @@ -179,6 +188,7 @@ export default function DimensionalNodePlot({ : null; const cube = useMemo(() => new DimensionalMetric(metric), [metric]); + console.log('plot cube', cube); const lastMetricYear = metric.years.slice(-1)[0]; const usableEndYear = lastMetricYear && endYear > lastMetricYear ? lastMetricYear : endYear; @@ -793,6 +803,7 @@ export default function DimensionalNodePlot({ config={plotConfig} debug={true} /> + {disclaimer && {disclaimer}} {withTools && ( diff --git a/components/paths/outcome/OutcomeNodeContent.tsx b/components/paths/outcome/OutcomeNodeContent.tsx index 4c9fbd41..e4aec0cb 100644 --- a/components/paths/outcome/OutcomeNodeContent.tsx +++ b/components/paths/outcome/OutcomeNodeContent.tsx @@ -137,11 +137,18 @@ const OutcomeNodeContent = ({ const paths = usePaths(); const activeGoal = useReactiveVar(activeGoalVar); + // We have a different group for indirect emissions (hack) const separateYears = activeGoal?.dimensions[0].groups[0] === 'indirect' ? [1990, 2010, 2015, 2020, 2022, 2023] : null; - + console.log('current node', node); + // We have a disclaimer for the mobility node for 2023 (hack) + const showDisclaimer = + startYear <= 2023 && endYear >= 2023 && node.id === 'net_emissions'; + const disclaimer = showDisclaimer + ? 'Die Werte für den Bereich Mobilität 2023 sind provisorisch (schraffierte Fläche)' + : undefined; const instance = paths?.instance; if (!instance) return null; const showDistribution = subNodes.length > 1; @@ -172,6 +179,7 @@ const OutcomeNodeContent = ({ baselineForecast={node.metric?.baselineForecastValues ?? undefined} withReferenceYear withTools={false} + disclaimer={disclaimer} /> ) : (
@@ -190,6 +198,7 @@ const OutcomeNodeContent = ({ separateYears ? separateYears[separateYears.length - 1] : endYear } colorChange={separateYears ? 1.75 : 0} + disclaimer={endYear === 2023 ? disclaimer : undefined} /> ), @@ -353,6 +362,7 @@ const OutcomeNodeContent = ({ color={color} startYear={startYear} endYear={endYear} + disclaimer={disclaimer} /> )}
{disclaimer}
{t('table-year')}