Add disclaimer

kausaltech · Nov 22, 2024 · 7edd694 · 7edd694
1 parent b78eb5a
commit 7edd694
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git 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})`}
       </h5>
       <Table bordered size="sm" responsive>
+        {disclaimer && <caption>{disclaimer}</caption>}
         <thead>
           <tr>
             <th>{t('table-year')}</th>

diff --git 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>{disclaimer}</Disclaimer>}
       </div>
 
       {withTools && (

diff --git 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 fü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}
         />
       ) : (
         <h5>
@@ -190,6 +198,7 @@ const OutcomeNodeContent = ({
             separateYears ? separateYears[separateYears.length - 1] : endYear
           }
           colorChange={separateYears ? 1.75 : 0}
+          disclaimer={endYear === 2023 ? disclaimer : undefined}
         />
       </div>
     ),
@@ -353,6 +362,7 @@ const OutcomeNodeContent = ({
                 color={color}
                 startYear={startYear}
                 endYear={endYear}
+                disclaimer={disclaimer}
               />
             </ContentWrapper>
           )}