From f7a343a3acd271a62b0daf81ced4f96fcdaca182 Mon Sep 17 00:00:00 2001
From: Harsh Vitra <harshvitra@Harshs-MacBook-Pro.local>
Date: Thu, 28 Jan 2021 13:12:49 +0530
Subject: [PATCH] Tree counter widget

---
 package-lock.json              |  26 ++
 package.json                   |   1 +
 public/data/locales/de.json    |   5 +-
 public/data/locales/en.json    |   5 +-
 public/index.html              |  15 +-
 rollup.config.js               |   5 +-
 src/TreeCounter/App.svelte     | 499 +++++++++++++++++++++++++++++++++
 src/TreeCounter/treecounter.js |   3 +
 src/TreeMap/App.svelte         |  56 +++-
 9 files changed, 604 insertions(+), 11 deletions(-)
 create mode 100644 src/TreeCounter/App.svelte
 create mode 100644 src/TreeCounter/treecounter.js

diff --git a/package-lock.json b/package-lock.json
index 9279470..9a5603e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -110,6 +110,16 @@
         "@rollup/pluginutils": "^3.0.8"
       }
     },
+    "@rollup/plugin-multi-entry": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-multi-entry/-/plugin-multi-entry-4.0.0.tgz",
+      "integrity": "sha512-1Sw86rwFxrNS7ECY3iSZ7T940xKnruNGpmQDgSDVTp+VTa1g5cPXNzBgp+IoOer41CiVeGFLwYwvicVoJLHEDQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/plugin-virtual": "^2.0.3",
+        "matched": "^5.0.0"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-10.0.0.tgz",
@@ -134,6 +144,12 @@
         "magic-string": "^0.25.7"
       }
     },
+    "@rollup/plugin-virtual": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.3.tgz",
+      "integrity": "sha512-pw6ziJcyjZtntQ//bkad9qXaBx665SgEL8C8KI5wO8G5iU5MPxvdWrQyVaAvjojGm9tJoS8M9Z/EEepbqieYmw==",
+      "dev": true
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -620,6 +636,16 @@
         "vt-pbf": "^3.1.1"
       }
     },
+    "matched": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/matched/-/matched-5.0.1.tgz",
+      "integrity": "sha512-E1fhSTPRyhAlNaNvGXAgZQlq1hL0bgYMTk/6bktVlIhzUnX/SZs7296ACdVeNJE8xFNGSuvd9IpI7vSnmcqLvw==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "picomatch": "^2.2.1"
+      }
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index 1e4531e..719746b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-multi-entry": "^4.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "dotenv": "^8.2.0",
diff --git a/public/data/locales/de.json b/public/data/locales/de.json
index 46c3570..d9ec7a8 100644
--- a/public/data/locales/de.json
+++ b/public/data/locales/de.json
@@ -3,5 +3,8 @@
     "target":"Ziel",
     "plantTrees":"Bäume pflanzen",
     "viewProfile":"Profil anzeigen",
-    "poweredBy":"Powered by Plant-for-the-Planet"
+    "poweredBy":"Powered by Plant-for-the-Planet",
+    "treesPlantedBy":"trees planted by",
+    "and":"und",
+    "treesPlantedByComm":"trees planted by community."
 }
\ No newline at end of file
diff --git a/public/data/locales/en.json b/public/data/locales/en.json
index 5aad22b..aa41e35 100644
--- a/public/data/locales/en.json
+++ b/public/data/locales/en.json
@@ -3,5 +3,8 @@
     "target":"Target",
     "plantTrees":"Plant Trees",
     "viewProfile":"View Profile",
-    "poweredBy":"Powered by Plant-for-the-Planet"
+    "poweredBy":"Powered by Plant-for-the-Planet",
+    "treesPlantedBy":"trees planted by",
+    "and":"and",
+    "treesPlantedByComm":"trees planted by community."
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index dbd6296..f7dd4da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,8 +23,19 @@ <h2> TreeMap for Partners</h2>
 
 	<h2> TreeMap Variant 3</h2>
 	<p> Partner, theme="dark", community="false", locale="de" </p>
-	<tree-map user='prf_h6smcMDN23Qet1CP7BEplM60' theme="dark" community="false" locale="de"></tree-map>
-
+	<tree-map user='prf_h6smcMDN23Qet1CP7BEplM60' theme="dark" community=true locale="de"></tree-map>
+
+	<h2> TreeMap Variant 4</h2>
+	<p> User override - community </p>
+	<tree-map user='prf_h6smcMDN23Qet1CP7BEplM60' locale="de"></tree-map>
+	
+	<h2> Tree Counter Variant 1</h2>
+	<p> Default </p>
+	<tree-counter user='prf_h6smcMDN23Qet1CP7BEplM60'></tree-counter>
+
+	<h2> Tree Counter Variant 2</h2>
+	<p> Dark mode </p>
+	<tree-counter user='prf_h6smcMDN23Qet1CP7BEplM60' theme="dark"></tree-counter>
 </body>
 
 </html>
diff --git a/rollup.config.js b/rollup.config.js
index 54ba0b5..8f07df6 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,11 +3,11 @@ import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import livereload from "rollup-plugin-livereload";
 import { terser } from "rollup-plugin-terser";
-import css from "rollup-plugin-css-only";
 import json from "@rollup/plugin-json";
 import {config} from 'dotenv';
 import replace from '@rollup/plugin-replace';
 import gzipPlugin from 'rollup-plugin-gzip'
+import multi from '@rollup/plugin-multi-entry';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -37,7 +37,7 @@ function serve() {
 }
 
 export default {
-  input: "src/TreeMap/treemap.js",
+  input: ["src/TreeMap/treemap.js","src/TreeCounter/treecounter.js"],
   output: {
     sourcemap: true,
     format: "iife",
@@ -45,6 +45,7 @@ export default {
     file: "public/build/treemap.js",
   },
   plugins: [
+    multi(),
     gzipPlugin(),
     replace({
       // stringify the object       
diff --git a/src/TreeCounter/App.svelte b/src/TreeCounter/App.svelte
new file mode 100644
index 0000000..b67875c
--- /dev/null
+++ b/src/TreeCounter/App.svelte
@@ -0,0 +1,499 @@
+<svelte:options tag="tree-counter" immutable={true} />
+
+<script>
+    import UserProfileLoader from "../../utils/contentLoaders/UserProfileLoader.svelte";
+    import { getFormattedNumber } from "../../utils/formatNumber";
+    import mapboxgl from "mapbox-gl";
+    import styleJson from "../../public/data/styles/root.json";
+    import { fetchTiles } from "../../utils/mapUtils";
+    import getImageUrl from "../../utils/getImageUrl";
+    import enLocale from "./../../public/data/locales/en.json";
+    import deLocale from "./../../public/data/locales/de.json";
+
+    // Props that can be passed
+    export let user;
+    export let primaryColor = "#68b030";
+    export let circleBGColor;
+    export let theme = "light";
+    export let community = false;
+    export let locale = "en";
+
+    let counterBGColor = circleBGColor ? circleBGColor : theme === 'light' ? "#23519b" : "#2f3336";
+
+    let language;
+
+    switch (locale) {
+        case "en":
+            language = enLocale;
+            break;
+        case "de":
+            language = deLocale;
+            break;
+        default:
+            language = enLocale;
+            break;
+    }
+
+    let mapStyle;
+    let userpofiledata;
+    const fetchProfileData = (async () => {
+        const response = await fetch(`${__myapp.env.API_URL}/profiles/${user}`);
+        userpofiledata = await response.json();
+        fetchTiles(
+            styleJson,
+            "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer"
+        ).then((style) => {
+            if (style) {
+                mapStyle = style;
+            }
+        });
+        return userpofiledata;
+    })();
+
+    let radius = 140;
+    let size = 154;
+    let circumference = 2 * Math.PI * radius;
+
+    const fetchContributionsData = (async () => {
+        const response = await fetch(
+            `${__myapp.env.API_URL}/profiles/${user}/contributions`
+        );
+        return await response.json();
+    })();
+
+    // Function that gets called when the element is created.
+    // https://svelte.dev/tutorial/actions
+    // https://svelte.school/tutorials/introduction-to-actions
+    const createMap = async (domNode) => {
+        const map = new mapboxgl.Map({
+            container: domNode,
+            style: mapStyle, // stylesheet location
+            center: [-28.5, 36.96], // starting position [lng, lat]
+            zoom: 1, // starting zoom
+            height: "100%",
+            width: "100%",
+        });
+
+        map.on("load", () => {
+            fetchContributionsData.then((contributions) => {
+                if (contributions.length > 0) {
+                    contributions.map((contribution) => {
+                        if (contribution.geometry) {
+                            var el = document.createElement("div");
+                            var treeCount = document.createTextNode(
+                                contribution.properties.treeCount
+                            );
+
+                            el.appendChild(treeCount);
+
+                            var svgNS = "http://www.w3.org/2000/svg";
+                            var tree = document.createElementNS(svgNS, "svg");
+
+                            tree.setAttributeNS(null, "width", 10.5);
+                            tree.setAttributeNS(null, "height", 12.598);
+                            tree.setAttributeNS(
+                                null,
+                                "viewBox",
+                                "0 0 10.5 12.598"
+                            );
+
+                            var pathNS = "http://www.w3.org/2000/svg";
+                            var path = document.createElementNS(pathNS, "path");
+                            path.setAttributeNS(
+                                null,
+                                "d",
+                                "M9,15.1V12.235a2.9,2.9,0,0,1-1,.175,3.033,3.033,0,0,1-2.093-5.2,3.055,3.055,0,0,1-.24-1.19,3,3,0,0,1,5.5-1.68h.167a3.7,3.7,0,1,1-1,7.252v3.5Z"
+                            );
+                            path.setAttributeNS(
+                                null,
+                                "transform",
+                                "translate(-4.75 -2.75)"
+                            );
+                            path.setAttributeNS(null, "fill", primaryColor);
+                            path.setAttributeNS(null, "stroke", "#fff");
+                            path.setAttributeNS(null, "stroke-width", 0.5);
+                            tree.appendChild(path);
+                            el.appendChild(tree);
+
+                            el.className = "marker";
+
+                            // make a marker for each feature and add to the map
+                            new mapboxgl.Marker(el, {
+                                anchor: "bottom",
+                            })
+                                .setLngLat(contribution.geometry.coordinates)
+                                .addTo(map);
+                        }
+                    });
+                }
+            });
+        });
+    };
+</script>
+
+<div
+    class="treecounter"
+    style="--primary-color: {primaryColor};--counter-background-color: {counterBGColor}; --background-color: {theme ===
+    'light'
+        ? '#fff'
+        : '#2f3336'}"
+>
+    {#await fetchProfileData}
+        <UserProfileLoader />
+    {:then data}
+        <div class="treeCounterContainer">
+            <div class="treeCounterComponent">
+                <div class="treeCounter">
+                    <div class="textContainer">
+                        <p class={`treecount ${theme === 'dark' ? "planted" : ""}`}>
+                            {community
+                                ? getFormattedNumber(
+                                      data.score.personal + data.score.received,
+                                      locale
+                                  )
+                                : getFormattedNumber(
+                                      data.score.personal,
+                                      locale
+                                  )}
+                        </p>
+                        <p class={`treecountLabel ${theme === 'dark' ? "planted" : ""}`}>
+                            {language.treesPlanted}
+                        </p>
+                    </div>
+                    {#if data.score.target != 0}
+                        <div class="textContainer">
+                            <p class="treecount">
+                                {getFormattedNumber(data.score.target, locale)}
+                            </p>
+                            <p class="treecountLabel">{language.target}</p>
+                        </div>
+                    {/if}
+                </div>
+
+                <svg
+                    style={`width:${size * 2}px; height:${
+                        size * 2
+                    }px;position:absolute;`}
+                >
+                    <circle
+                        cx={size}
+                        cy={size}
+                        r={radius}
+                        stroke={primaryColor}
+                        stroke-linecap="round"
+                        stroke-width="16"
+                        transform={`rotate(-90,${size},${size})`}
+                        stroke-dasharray={circumference}
+                        stroke-dashoffset={circumference *
+                            (1 -
+                                (data.score.personal + data.score.received) /
+                                    data.score.target)}
+                        fill="transparent"
+                    />
+                </svg>
+            </div>
+            <a
+                href={`${__myapp.env.APP_URL}/s/${data.slug}`}
+                class="primaryButton"
+                on:click
+                target="_blank">{language.plantTrees}</a
+            >
+
+            <div class="imageHeader">
+                <a
+                    href={`https://www1.plant-for-the-planet.org/t/${data.slug}`}
+                    target="_blank"
+                >
+                    <img
+                        class="logo"
+                        src={getImageUrl("profile", "thumb", data.image)}
+                        alt={data.displayName}
+                        href="www.facebook.com"
+                    />
+                </a>
+                {#if data.hasLogoLicense}
+                    <div class="logoPlanet">
+                        <img
+                            src={`${__myapp.env.CDN_URL}/logo/svg/planet.svg`}
+                            alt="Powered by Plant-for-the-Planet"
+                        />
+                    </div>
+                {/if}
+            </div>
+
+            <div class="footer">
+                <a
+                    href={`https://www1.plant-for-the-planet.org/t/${data.slug}`}
+                    target="_blank"
+                    class="footerLink"
+                    >{language.viewProfile}
+                </a>
+                <a
+                    class="footerLinkBold"
+                    href={`https://www1.plant-for-the-planet.org/`}
+                    target="_blank"
+                    >| {language.poweredBy}
+                </a>
+                <div
+                    class="infoIcon"
+                    style={`color: ${theme === "dark" ? "#fff" : "#000"}`}
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        height="14"
+                        width="14"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            fill={"#6daff0"}
+                            d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"
+                        />
+                    </svg>
+                    <p class="infoText ">
+                        {getFormattedNumber(data.score.personal, locale)}
+                        {language.treesPlantedBy}
+                        {data.displayName}
+                        {community
+                            ? `${language.and} ${getFormattedNumber(
+                                  data.score.received,
+                                  locale
+                              )} ${language.treesPlantedByComm}`
+                            : ""}
+                    </p>
+                </div>
+            </div>
+        </div>
+    {:catch error}
+        <p>An error occurred!</p>
+    {/await}
+</div>
+<div class="marker" style="display:none">
+    <svg />
+</div>
+
+<style>
+    @import "https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css";
+    @import "https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap";
+
+    .treecounter {
+        width: 100%;
+        max-width: 420px;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid #d5d5d5;
+        vertical-align: baseline;
+        font-family: "Raleway", sans-serif;
+        text-decoration: none;
+        margin: 10px 0px 10px 0px;
+        background-color: var(--background-color);
+    }
+
+    .treeCounterContainer {
+        min-height: 420px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-top-right-radius: 10px;
+        border-top-left-radius: 10px;
+        max-width: 420px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+    .treeCounterComponent {
+        height: 295px;
+        width: 295px;
+        background-image: radial-gradient(white 0%, white 60%, #47a8dc 100%);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        margin-top: 100px;
+    }
+    .treeCounter {
+        height: 266px;
+        width: 266px;
+        border-radius: 50%;
+        background-color: var(--counter-background-color);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+    .treecount {
+        font-size: 48px;
+        font-weight: bold;
+        text-align: center;
+        color: white;
+        margin: 0px;
+    }
+    .treecountLabel {
+        font-size: 13px;
+        font-weight: bold;
+        text-align: center;
+        color: white;
+        margin: 0px;
+        margin-top: 6px;
+    }
+    .primaryButton {
+        color: white;
+        font-weight: bold;
+        background-image: linear-gradient(97deg, #68b030 4%, #007a49 116%);
+        height: 48px;
+        padding: 0px;
+        text-align: center;
+        border: 0px;
+        border-radius: 52px;
+        min-width: 205px;
+        margin-top: 24px;
+        margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition-duration: 0.5s;
+        transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+        text-decoration: none;
+    }
+    .primaryButton:hover {
+        transform: translateY(-7px);
+        cursor: pointer;
+    }
+    .footer {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        margin-bottom: 12px;
+    }
+    .footerLink {
+        color: #6daff0;
+        text-decoration: none;
+    }
+    .footerLinkBold {
+        color: #6daff0;
+        font-weight: bold;
+        margin-left: 4px;
+        text-decoration: none;
+    }
+
+    .imageHeader {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .logo {
+        border-radius: 50%;
+        height: 64px;
+        width: 64px;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
+    }
+
+    .logoPlanet {
+        height: 64px;
+        width: 64px;
+        background-color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
+        margin-left: 12px;
+    }
+
+    .logoPlanet > img {
+        height: 52px;
+        width: 52px;
+    }
+
+    @media screen and (min-width: 640px) {
+        .treeCounterContainer {
+            border-top-right-radius: 0px;
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+        }
+    }
+
+    @media screen and (min-width: 940px) {
+        .treeCounterContainer {
+            max-width: 420px;
+        }
+    }
+
+    .marker {
+        height: 30px;
+        min-width: 60px;
+        padding: 6px 8px;
+        background-color: var(--background-color);
+        border-radius: 7px;
+        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        color: var(--primary-color);
+        font-weight: bold;
+        font-size: 18px;
+    }
+
+    .marker::after {
+        content: "";
+        position: absolute;
+        left: 36%;
+        top: 100%;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid var(--background-color);
+        clear: both;
+    }
+
+    .marker > svg {
+        margin-left: 3px;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    .infoIcon{
+        margin-left: 4px;
+        position: relative;
+    }
+
+    .infoText{
+        background-color: var(--background-color);
+        margin:0px;
+        padding:8px;
+        position: absolute;
+        right: 0px;
+        bottom: 20px;
+        width:220px;
+        border-radius: 4px;
+        text-align: center;
+    }
+
+    .infoIcon > .infoText {
+        display: none;
+    }
+    .infoIcon:hover{
+        cursor:pointer
+    }
+    .infoIcon:hover > .infoText {
+        display: block;
+    }
+
+    .planted{
+        color: var(--primary-color)
+    }
+</style>
diff --git a/src/TreeCounter/treecounter.js b/src/TreeCounter/treecounter.js
new file mode 100644
index 0000000..d9774c0
--- /dev/null
+++ b/src/TreeCounter/treecounter.js
@@ -0,0 +1,3 @@
+import App from "./App.svelte";
+
+export default App;
diff --git a/src/TreeMap/App.svelte b/src/TreeMap/App.svelte
index 1f8768b..c2bcf5c 100644
--- a/src/TreeMap/App.svelte
+++ b/src/TreeMap/App.svelte
@@ -13,11 +13,12 @@
     // Props that can be passed
     export let user;
     export let primaryColor = "#68b030";
-    export let circleBGColor = "#23519b";
     export let theme = "light";
+    export let circleBGColor;
     export let community = false;
     export let locale= "en";
 
+    let counterBGColor = circleBGColor ? circleBGColor : theme === 'light' ? "#23519b" : "#2f3336";
 
     let language;
 
@@ -128,7 +129,7 @@
 
 <div
     class="treemap"
-    style="--primary-color: {primaryColor};--counter-background-color: {circleBGColor}; --background-color: {theme=== "light" ? "#fff" : "#2f3336"}"
+    style="--primary-color: {primaryColor};--counter-background-color: {counterBGColor}; --background-color: {theme=== "light" ? "#fff" : "#2f3336"}"
 >
     {#await fetchProfileData}
         <UserProfileLoader />
@@ -138,7 +139,7 @@
                 <div class="treeCounterComponent">
                     <div class="treeCounter">
                         <div class="textContainer">
-                            <p class="treecount">
+                            <p class={`treecount ${theme === 'dark' ? "planted" : ""}`}>
                                 {community
                                     ? getFormattedNumber(
                                           data.score.personal +
@@ -146,7 +147,7 @@
                                       )
                                     : getFormattedNumber(data.score.personal,locale)}
                             </p>
-                            <p class="treecountLabel">{language.treesPlanted}</p>
+                            <p class={`treecountLabel ${theme === 'dark' ? "planted" : ""}`}>{language.treesPlanted}</p>
                         </div>
                         {#if data.score.target != 0}
                             <div class="textContainer">
@@ -201,6 +202,22 @@
                         href={`https://www1.plant-for-the-planet.org/`}
                         target="_blank">| {language.poweredBy}
                     </a>
+                    <div class="infoIcon" style={`color: ${theme === 'dark' ? "#fff" : "#000"}`}>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="14" width="14" viewBox="0 0 512 512">
+                            <path
+                              fill={"#6daff0"}
+                              d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"
+                            />
+                          </svg>
+                          <p class="infoText ">
+                            
+                            {getFormattedNumber(data.score.personal,locale)} {language.treesPlantedBy} {data.displayName}
+                            {community
+                                ? `${language.and} ${getFormattedNumber(data.score.received, locale)} ${language.treesPlantedByComm}` 
+                                : ""}
+                          </p>
+                    </div>
+                    
                 </div>
                 <div class="imageHeader">
                     <a
@@ -302,6 +319,9 @@
         margin: 0px;
         margin-top: 6px;
     }
+    .planted{
+        color: var(--primary-color)
+    }
     .primaryButton {
         color: white;
         font-weight: bold;
@@ -444,7 +464,7 @@
         height: 0;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
-        border-top: 10px solid #fff;
+        border-top: 10px solid var(--background-color);
         clear: both;
     }
 
@@ -468,4 +488,30 @@
             border-bottom-right-radius: 10px;
         }
     }
+    .infoIcon{
+        margin-left: 4px;
+        position: relative;
+    }
+
+    .infoText{
+        background-color: var(--background-color);
+        margin:0px;
+        padding:8px;
+        position: absolute;
+        right: 0px;
+        bottom: 20px;
+        width:220px;
+        border-radius: 4px;
+        text-align: center;
+    }
+
+    .infoIcon > .infoText {
+        display: none;
+    }
+    .infoIcon:hover{
+        cursor:pointer
+    }
+    .infoIcon:hover > .infoText {
+        display: block;
+    }
 </style>