chore: Add react-circle-flags library for displaying country flags in…

… statistics
chain4travel · May 10, 2024 · 2c8a6a5 · 2c8a6a5
1 parent ca9c1e5
commit 2c8a6a5
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 24 deletions.
diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -73,7 +73,7 @@ jobs:
               
       
       - name: push and deploy docker
-        if: github.event_name == 'push'
+        if: ${{ (github.event_name == 'push') && (github.ref  == 'refs/heads/suite') }}
         run: |
           gcloud auth configure-docker --quiet europe-west3-docker.pkg.dev
           docker push ${{ steps.setDefaults.outputs.docker_image }}
@@ -113,4 +113,4 @@ jobs:
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
           git tag ${{ steps.createTag.outputs.suite_tag }}
-          git push --tags
+          git push --tags
diff --git a/package.json b/package.json
@@ -127,6 +127,7 @@
         "eslint-plugin-react": "^7.32.2",
         "ethers": "^6.0.2",
         "path": "^0.12.7",
+        "react-circle-flags": "^0.0.20",
         "react-datepicker": "^4.10.0"
     }
 }
diff --git a/src/app/components/ValidatorsMap/Statistics.tsx b/src/app/components/ValidatorsMap/Statistics.tsx
@@ -3,13 +3,27 @@ import HighchartsReact from 'highcharts-react-official'
 import React from 'react'
 import { IStatistics } from 'types/statistics'
 import flags from './json/flags.json'
+import { CircleFlag } from 'react-circle-flags'
+import { renderToStaticMarkup } from 'react-dom/server'
 
-const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
-    const getUrlFlag = (index: string) => {
-        let objFlag = nodesPerCountry[parseInt(index)]
-        let code = flags.find(flag => flag.code === objFlag.alpha2)
-        let url = `/assets/flags/${code?.code.toLowerCase()}.svg`
-        return url
+const Statistics: React.FC<IStatistics> = ({ nodesPerCountry, darkMode }) => {
+    const formatXAxisLabel = (obj: { pos: string; value: string }) => {
+        const index = parseInt(obj.pos)
+        const countryIdentifier = nodesPerCountry[index].alpha2
+        const flagCode = getUrlFlag(index) ?? '' // Provide a default value for flagCode
+        const flagSVG = renderToStaticMarkup(<CircleFlag countryCode={flagCode} height={15} />) // Render CircleFlag to SVG
+        return `
+            <div class="formatXAxisLabel" style="color: ${darkMode ? 'white' : 'black'}">
+                <span>${flagSVG}</span>
+                <span>${obj.value}</span>
+            </div>
+        `
+    }
+
+    const getUrlFlag = (index: number) => {
+        const objFlag = nodesPerCountry[index]
+        const code = flags.find(flag => flag.code === objFlag.alpha2)
+        return code?.code.toLowerCase()
     }
 
     const options = {
@@ -33,18 +47,10 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
             categories: nodesPerCountry.map(value => value.country),
             labels: {
                 useHTML: true,
-                formatter: function (obj: { pos: string; value: string }) {
-                    let index = obj.pos
-                    return `<span style="color:${
-                        darkMode === true ? 'white' : 'black'
-                    }"><img width="15" height="15" style="position: relative; top: 2px" src="${getUrlFlag(
-                        index,
-                    )}" /> ${obj.value}</span>`
-                },
+                formatter: formatXAxisLabel,
             },
             allowDecimals: false,
         },
-
         legend: {
             itemStyle: {
                 color: darkMode ? 'white' : 'black',
@@ -65,9 +71,7 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
                 lineColor: 'transparent', // make the line invisible
                 showInLegend: true,
                 events: {
-                    legendItemClick: function () {
-                        return false
-                    },
+                    legendItemClick: () => false,
                 },
             },
         ],
@@ -76,17 +80,16 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
         },
         tooltip: {
             useHTML: true,
-            formatter: function (obj: string) {
-                let objData: any = this
-                return '<b>' + objData.x + ':</b>' + objData.y
+            formatter: function (this: any) {
+                return `<b>${this.x}:</b>${this.y}`
             },
         },
     }
 
     return (
         <div>
             <br />
-            <HighchartsReact type="" highcharts={Highcharts} options={options} />
+            <HighchartsReact highcharts={Highcharts} options={options} />
         </div>
     )
 }

diff --git a/src/styles/datacharts.css b/src/styles/datacharts.css
@@ -1,4 +1,15 @@
 .MuiCardHeader-title{
     margin-left: 1rem !important;
     margin-bottom: -2rem !important;
+}
+
+.formatXAxisLabel {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.highcharts-axis-labels > span {
+    left: 0 !important;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -10728,6 +10728,11 @@ [email protected], react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-circle-flags@^0.0.20:
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/react-circle-flags/-/react-circle-flags-0.0.20.tgz#6aeffa5a74b435eb18ce3afa9f73115a7f2ccfdb"
+  integrity sha512-/Q18+veXCSA0lQWbnRo/AtR4G/NDRrukKyU6Cl7iLLXAG9KywjgFdPqHD2YJklicjfALXm2wLdbONRs0QKDITA==
+
 react-datepicker@^4.10.0:
   version "4.10.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.10.0.tgz"