Merge pull request #24 from mongabay/feature/MP-173-link-to-trase-but…

…ton-implementation

Create trase link

components/tool/trase-link/component.jsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { TRASE_API } from 'modules/tool/world-map/trase-api.js';
+import './style.scss';
+
+const TraseLink = ({ country, commodity, unit, year }) => {
+  const href = useMemo(() => {
+    const traseAppUpl = TRASE_API.split('/api')[0];
+    return `${traseAppUpl}/flows/data-view?toolLayout=1&countries=${country}&commodities=${commodity}&selectedYears=${year}&selectedYears=${year}&selectedResizeBy=${unit}`;
+  }, [commodity, country, unit, year]);
+
+  return (
+    <div className="c-tool-trase-link">
+      <a href={href} target="_blank" rel="noreferrer">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="19"
+          height="19"
+          viewBox="0 0 19 19"
+          fill="none"
+        >
+          <path
+            d="M9.29762 3.83333H3.125C2.56142 3.83333 2.02091 4.05722 1.6224 4.45573C1.22388 4.85425 1 5.39475 1 5.95833V15.875C1 16.4386 1.22388 16.9791 1.6224 17.3776C2.02091 17.7761 2.56142 18 3.125 18H13.0417C13.6053 18 14.1458 17.7761 14.5443 17.3776C14.9428 16.9791 15.1667 16.4386 15.1667 15.875V9.70238M5.25 13.75L18 1M18 1H13.0417M18 1V5.95833"
+            stroke="#444242"
+            strokeWidth="1.61905"
+            strokeLinecap="square"
+          />
+        </svg>
+        <span>Check data on Trase</span>
+      </a>
+    </div>
+  );
+};
+
+TraseLink.propTypes = {
+  country: PropTypes.string,
+  commodity: PropTypes.string,
+  unit: PropTypes.string,
+  year: PropTypes.number,
+  region: PropTypes.string,
+};
+
+export default TraseLink;

components/tool/trase-link/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+
+import { traseSelectors } from 'modules/tool';
+import Component from './component';
+
+export default connect(state => ({
+  country: traseSelectors.selectCountry(state),
+  commodity: traseSelectors.selectCommodity(state),
+  unit: traseSelectors.selectUnit(state),
+  year: traseSelectors.selectYear(state),
+}))(Component);

components/tool/trase-link/style.scss

@@ -0,0 +1,19 @@
+@import 'css/settings';
+
+.c-tool-trase-link {
+  margin-left: 16px;
+  margin-top: 32px;
+  width: 100%;
+  a {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    span {
+      color: #444242;
+      font-size: $font-size-m;
+      font-weight: 600;
+      text-decoration-line: underline;
+      text-decoration-color: rgba(black, 0.2);
+    }
+  }
+}

components/tool/world-map/component.jsx

@@ -19,6 +19,7 @@ import Attributions from '../attributions';
 
 import WORLD_GEOGRAPHIES from './WORLD.topo.json';
 import './style.scss';
+import TraseLink from '../trase-link';
 
 class WorldMap extends React.PureComponent {
   state = {
@@ -220,7 +221,10 @@ class WorldMap extends React.PureComponent {
                     <Lines>{this.renderLines()}</Lines>
                   </ZoomableGroup>
                 </ComposableMap>
-                <Ranking />
+                <div>
+                  <Ranking />
+                  {!exporting && <TraseLink />}
+                </div>
               </div>
             </Tooltip>
             <Attributions exporting={exporting} />

modules/tool/world-map/trase-api.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const TRASE_API = 'https://supplychains.trase.earth/api/v3';
+export const TRASE_API = 'https://supplychains.trase.earth/api/v3';
 
 export const fetchTraseContexts = () =>
   axios.get(`${TRASE_API}/contexts`).then(({ data }) => data?.data ?? []);