CORE: add %

templates/sdg/charts/reChartBarChart.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   BarChart,
   Bar,
@@ -12,6 +12,7 @@ import {
 } from 'recharts'
 
 import styles from '../styles.module.css'
+import { GlobalContext } from '../../../store'
 
 import { formatNumber } from 'utils/helpers'
 
@@ -33,6 +34,47 @@ const ReChartBarChart = ({
     return formatNumber(value)
   }
 
+  const renderTooltip = ({ payload, label }) => {
+    if (!payload || !payload.length) return null
+
+    const { ...globalStore } = useContext(GlobalContext)
+    const globalCountMetadata =
+      globalStore.dataProvider?.statistics?.countMetadata || 1
+
+    return (
+      <div className={styles.barTooltip}>
+        <p>{label}</p>
+        {payload.map((entry, index) => {
+          const { value, color } = entry
+          if (toggle) {
+            const firstPercentage = (
+              (value / globalCountMetadata) *
+              100
+            ).toFixed(2)
+            const secondPercentage = ((value / totalOutputCount) * 100).toFixed(
+              2
+            )
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <p key={`item-${index}`} style={{ color }}>
+                {entry.name} (proportion of all papers with SDG):{' '}
+                {firstPercentage}%
+                <br />
+                {entry.name} (percentage of all papers): {secondPercentage}%
+              </p>
+            )
+          }
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <p key={`item-${index}`} style={{ color }}>
+              {entry.name}: {formatNumber(value)}
+            </p>
+          )
+        })}
+      </div>
+    )
+  }
+
   return (
     <div className={styles.chartWrapper}>
       <div className={styles.innerChartWrapper}>
@@ -58,7 +100,7 @@ const ReChartBarChart = ({
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="name" />
                 <YAxis />
-                <Tooltip />
+                <Tooltip content={renderTooltip} />
                 <Legend />
                 {sdgTypes
                   .filter((sdg) => visibleColumns.includes(sdg.id))

templates/sdg/styles.module.css

@@ -382,3 +382,8 @@
   padding: 24px;
   background: #fff;
 }
+
+.bar-tooltip {
+  padding: 10px;
+  background: #fff;
+}