\r\n
\r\n
{t('lbl_choose_country')} \r\n
\r\n
\r\n (this._countrySelectCP = c)} className=\"countrySelect\"\r\n isSearchable=\"true\"\r\n value={this.state.selectedCountry}\r\n onChange={this.handleChangeCountry}\r\n options={this.props.countries}\r\n placeholder={t('lbl_select')}\r\n />\r\n
\r\n
\r\n
\r\n
Trade Map \r\n
\r\n
\r\n
\r\n
\r\n {t('tool_desc_tm')}\r\n
\r\n
{t('tool_data_type_tm')} \r\n\r\n {(this.props.tradeMapAgg && this.props.tradeMapAgg.importedValue ? (\r\n
\r\n USD \r\n {MoneyFormat(this.props.tradeMapAgg.importedValue, 2)}{t('tool_data_tm_of')} \r\n {t('tool_data_tm_imports')} {t('tool_data_tm_in')} \r\n {this.props.tradeMapAgg.year} {(this.props.tradeMapAgg.directMirror === 'MIRROR' ? '(mirror)' : '')}\r\n ) : '')}\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Market Access Map \r\n
\r\n
\r\n
\r\n
\r\n {t('tool_desc_mm')}\r\n
\r\n
{t('tool_data_type_mm')} \r\n\r\n {(this.props.macMapAgg ? this.props.macMapAgg.map(item => (\r\n
\r\n\r\n {FormatPercentage(item.Tariff, 2)} {t('tool_of_mm')} \r\n {item.Agreement} {t('tool_in_mm')} \r\n {item.Year} \r\n \r\n )) : \"\")}\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Export Potential Map \r\n
\r\n
\r\n
\r\n
\r\n\r\n
{t('tool_data_type_epm')} \r\n
${(this.props.epmAgg ? this.props.epmAgg.Value : \"N/A\")} \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Rules of Origin \r\n
\r\n
\r\n
\r\n
\r\n {t('tool_desc_roo')}\r\n
\r\n
{t('tool_data_type_roo')} \r\n\r\n
\r\n\r\n {(this.props.rooAgg ? this.props.rooAgg.Value : \"N/A\")} \r\n {t('tool_agg_roo')} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
Investment Map \r\n
\r\n
\r\n
\r\n
\r\n {t('tool_desc_im')}\r\n
\r\n
{t('tool_data_type_im')} \r\n {(this.props.investmentAgg && this.props.investmentAgg.inFlow ? (\r\n
\r\n USD \r\n {MoneyFormat(this.props.investmentAgg.inFlow, 2)} in \r\n {this.props.investmentAgg.year} \r\n \r\n ) : '')}\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
E-PING \r\n
\r\n
\r\n
\r\n
\r\n {t('tool_desc_eping')}\r\n
\r\n
{t('tool_data_type_eping')} \r\n\r\n\r\n
\r\n {(this.props.ePing ? this.props.ePing.totalCount : \"N/A\")}\r\n \r\n\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const {users, authentication} = state;\r\n const {user} = authentication;\r\n\r\n return {\r\n user,\r\n users,\r\n countries: state.countries.countries,\r\n tradeMapAgg: state.countryProfile.tradeMapAgg,\r\n macMapAgg: state.countryProfile.macMapAgg,\r\n epmAgg: state.countryProfile.epmAgg,\r\n rooAgg: state.countryProfile.rooAgg,\r\n investmentAgg: state.countryProfile.investmentAgg,\r\n procurementAgg: state.countryProfile.procurementAgg,\r\n ePing: state.countryProfile.ePing\r\n };\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n fetchCountries: () => dispatch(fetchCountries()),\r\n fetchTradeMapAggregated: (countryIds) => dispatch(fetchTradeMapAggregated(countryIds)),\r\n fetchMacMapAggregated: (countryIds) => dispatch(fetchMacMapAggregated(countryIds)),\r\n fetchEPMAggregated: (countryIds) => dispatch(fetchEPMAggregated(countryIds)),\r\n fetchROOAggregated: (countryIds) => dispatch(fetchROOAggregated(countryIds)),\r\n fetchInvestmentMapAggregated: (countryIds) => dispatch(fetchInvestmentMapAggregated(countryIds)),\r\n fetchProcurementMapAggregated: (countryIds) => dispatch(fetchProcurementMapAggregated(countryIds)),\r\n fetchEPing: (countryIds) => dispatch(fetchEPing(countryIds)),\r\n ...userActions\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CountryProfile)\r\n","import React from 'react'\r\nimport YouTube from 'react-youtube';\r\nimport { t } from '../services/i18n'\r\nimport { locales } from '../config/i18n'\r\nimport LocalizedLink from '../containers/LocalizedLink'\r\nimport { Link } from 'react-router-dom'\r\nimport {\r\n Nav,\r\n Navbar,\r\n NavItem,\r\n Collapse,\r\n DropdownMenu,\r\n NavbarToggler,\r\n DropdownToggle,\r\n UncontrolledDropdown,\r\n} from 'reactstrap'\r\nimport Collapsible from 'react-collapsible';\r\n\r\nexport default class VideoCourses extends React.Component {\r\n constructor() {\r\n super();\r\n\r\n //this.state = Open_Weather_Interface;\r\n }\r\n\r\n opts = {\r\n height: '350',\r\n width: '500',\r\n origin: window.location.origin,\r\n playerVars: { // https://developers.google.com/youtube/player_parameters\r\n autoplay: 0\r\n }\r\n };\r\n _onReady = (event) => {\r\n // access to player in all event handlers via event.target\r\n //event.target.pauseVideo();\r\n } \r\n\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
{ t('section_data_videos')} \r\n
\r\n\t\t\t\t\t\t\t
\r\n
\r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n
\r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n
\r\n
\r\n\t\t\t\t\t\t\t\r\n
\r\n\t\t\t\t\t\t\t
\r\n
\r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n
\r\n
\r\n \r\n\t\t\t\t\t\t\t
\r\n
\r\n \r\n\t\t\t\t\t
\r\n );\r\n }\r\n}","import React from 'react'\r\nimport { t } from '../services/i18n'\r\n\r\nexport default () => (\r\n
\r\n \r\n
\r\n { t('section_join_us_desc')} \r\n \r\n
\r\n
\r\n\r\n)","import React from 'react'\r\nimport {t} from '../services/i18n'\r\nimport itc_comp_bklt_img from '../img/itc-2021-Comprehensive-Booklet.png';\r\nimport itc_comp_bklt_pdf from '../static/ITC-TMI-2021-Comprehensive-Booklet.pdf';\r\n\r\n\r\n\r\nexport default () => (\r\n
\r\n \r\n
{t('section_booklet')} \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n {t('section_booklet_desc')}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n\r\n)","import React from 'react'\r\nimport {t} from '../services/i18n'\r\nimport postcard_img_en from '../img/postcard-en.png'\r\nimport postcard_pdf_en from '../static/ITC-TMI-2021-MarketAnalysisTools-PostCard-English.pdf'\r\nimport postcard_img_fr from '../img/postcard-fr.png'\r\nimport postcard_pdf_fr from '../static/ITC-TMI-2021-MarketAnalysisTools-PostCard-French.pdf'\r\nimport postcard_img_es from '../img/postcard-es.png'\r\nimport postcard_pdf_es from '../static/ITC-TMI-2021-MarketAnalysisTools-PostCard-Spanish.pdf'\r\n\r\nexport default () => (\r\n
\r\n \r\n
{t('section_post_cards')} \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n\r\n\r\n
\r\n\r\n)","import React from 'react'\r\nimport {t} from '../services/i18n'\r\nimport LocalizedLink from '../containers/LocalizedLink'\r\nimport embed_button_img_en from '../img/embed-button-en.jpg'\r\nimport embed_button_img_fr from '../img/embed-button-fr.jpg'\r\nimport embed_button_img_es from '../img/embed-button-es.jpg'\r\n\r\nexport default () => (\r\n
\r\n \r\n
{t('section_embed_button')} \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n <a href="http://marketanalysis.intracen.org/en" target="_blank"><img src="http://marketanalysis.intracen.org/en/static/media/embed-button-en.3fae765f.jpg" style="margin-top:10px; margin-bottom:10px;" /></a>\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n <a href="http://marketanalysis.intracen.org/fr" target="_blank"><img src="http://marketanalysis.intracen.org/en/static/media/embed-button-fr.9a85f526.jpg" style="margin-top:10px; margin-bottom:10px;" /></a>\r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n <a href="http://marketanalysis.intracen.org/es" target="_blank"><img src="http://marketanalysis.intracen.org/en/static/media/embed-button-es.14b93dbe.jpg" style="margin-top:10px; margin-bottom:10px;" /></a>\r\n \r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{t('section_how_to')}
\r\n
\r\n 1.\t{t('section_how_to_step_1')} {t('lbl_mat')} . \r\n 2.\t{t('section_how_to_step_2')} \r\n 3.\t{t('section_how_to_step_3')} \r\n 4.\t{t('section_how_to_step_4')} {t('lbl_mat')} , {t('section_how_to_step_4_1')} marketanalysis@intracen.org . {t('section_how_to_step_4_2')} \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n\r\n
\r\n\r\n)","import {connect} from 'react-redux'\r\nimport React, {Component} from 'react'\r\n\r\nimport {t} from '../services/i18n'\r\nimport {userActions} from '../actions'\r\nimport DataVideos from '../components/DataVideos'\r\nimport Social from '../components/Social'\r\nimport Newsletters from '../components/Newsletters'\r\nimport Joinus from '../components/JoinUs'\r\nimport Booklet from '../components/Booklet'\r\nimport PostCards from '../components/PostCards'\r\nimport EmbeddedButtons from '../components/EmbedButton'\r\nimport \"../styles/JoinUs.css\"\r\n\r\nclass JoinUs extends Component {\r\n\r\n componentDidMount() {\r\n\r\n this.props.getAllUsers();\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n {t('section_join_us')} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {\r\n this.props.ajaxLoading ?\r\n
Loading...
\r\n :\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n {/*
*/}\r\n
\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const {users, authentication} = state;\r\n const {user} = authentication;\r\n return {\r\n user,\r\n users\r\n\r\n };\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n\r\n ...userActions\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(JoinUs)\r\n","import React, { Component, useEffect } from 'react';\r\nimport * as d3 from \"d3v4\";\r\nimport $ from 'jquery'\r\nimport { t } from '../../services/i18n'\r\n\r\n\r\nclass TreemapChart extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.myTreemapChart = React.createRef();\r\n\r\n }\r\n componentWillMount() {\r\n\r\n }\r\n\r\n componentDidMount() {\r\n const { options } = this.props;\r\n const { type } = this.props;\r\n this.drawChart2(options.data, type)\r\n }\r\n componentDidUpdate() {\r\n\r\n }\r\n\r\n drawChart(data, type) {\r\n\r\n var sectiondata = null;\r\n\r\n var view = this.myTreemapChart.current;\r\n var div = $(this.myTreemapChart.current);\r\n var margin = { top: 10, right: 25, bottom: 65, left: 1 },\r\n width = $('.treemap').width(),\r\n height = 500;\r\n var formatValue = d3.format(\",d\");\r\n\r\n var box = d3.select(\"body\").append(\"div\").attr(\"id\", \"box-treemap\")\r\n .attr(\"class\", \"box\")\r\n .style(\"opacity\", 0);\r\n\r\n const map = new Map();\r\n if (type == \"currentExports\") {\r\n map.set(data.children[0].section, \"#002b54\")\r\n map.set(data.children[1].section, \"#971779\")\r\n map.set(data.children[2].section, \"#e03375\")\r\n map.set(data.children[3].section, \"#009de8\")\r\n map.set(data.children[4].section, \"#a1cdf3\")\r\n map.set(data.children[5].section, \"#fdd69b\")\r\n map.set(data.children[6].section, \"#fa9805\")\r\n map.set(data.children[7].section, \"#ef99ba\")\r\n map.set(data.children[8].section, \"#d6dde4\")\r\n map.set(data.children[9].section, \"#c8c8c8\")\r\n map.set(data.children[10].section, \"#7b7b7b\")\r\n map.set(data.children[11].section, \"#7dd5f0\")\r\n map.set(data.children[12].section, \"#798ea4\")\r\n map.set(data.children[13].section, \"#e1a851\")\r\n map.set(data.children[14].section, \"#d88b16\")\r\n map.set(data.children[15].section, \"#fa7b05\")\r\n map.set(data.children[16].section, \"#dc6d06\")\r\n map.set(data.children[17].section, \"#d95784\")\r\n map.set(data.children[18].section, \"#a3174d\")\r\n map.set(data.children[19].section, \"#9eaebe\")\r\n map.set(data.children[20].section, \"#8095a9\")\r\n\r\n }\r\n else if (type == \"productsExported\") {\r\n map.set(0, \"#002b54\")\r\n map.set(1, \"#971779\")\r\n map.set(2, \"#e03375\")\r\n map.set(3, \"#009de8\")\r\n map.set(4, \"#a1cdf3\")\r\n map.set(5, \"#fdd69b\")\r\n map.set(6, \"#fa9805\")\r\n map.set(7, \"#ef99ba\")\r\n map.set(8, \"#d6dde4\")\r\n map.set(9, \"#c8c8c8\")\r\n map.set(10, \"#7b7b7b\")\r\n map.set(11, \"#7dd5f0\")\r\n map.set(12, \"#798ea4\")\r\n map.set(13, \"#e1a851\")\r\n map.set(14, \"#d88b16\")\r\n map.set(15, \"#fa7b05\")\r\n map.set(16, \"#dc6d06\")\r\n map.set(17, \"#d95784\")\r\n map.set(18, \"#a3174d\")\r\n map.set(19, \"#9eaebe\")\r\n map.set(20, \"#8095a9\")\r\n }\r\n\r\n var svg = d3.select(view)\r\n .append(\"svg\")\r\n .attr(\"width\", width)\r\n .attr(\"height\", height)\r\n .append(\"g\")\r\n .attr(\"transform\",\r\n \"translate(\" + margin.left + \",\" + 0 + \")\");\r\n\r\n\r\n var treemap = null;\r\n var root = null;\r\n if (type == \"currentExports\") {\r\n root = d3.hierarchy(data).sum(function (d) { return d.value }).sort((a, b) => b.height - a.height || b.value - a.value);\r\n treemap = d3.treemap().size([width, height]).padding(1);\r\n } else if (type == \"productsExported\") {\r\n root = d3.hierarchy(data).sum(function (d) { return d.exportedValue });\r\n treemap = d3.treemap().size([width, height]).padding(4);\r\n }\r\n const tree = treemap(root);\r\n\r\n const rects = [];\r\n svg\r\n .selectAll(\"rect\")\r\n .data(root.leaves())\r\n .enter()\r\n .append(\"rect\")\r\n .attr('x', function (d) { return d.x0; })\r\n .attr('y', function (d) { return d.y0; })\r\n .attr('width', function (d) { return d.x1 - d.x0; })\r\n .attr('height', function (d) { return d.y1 - d.y0; })\r\n .attr('margin', '2%')\r\n //.style(\"stroke\", \"black\")\r\n .style(\"fill\", function (d, i) {\r\n switch (type) {\r\n case 'currentExports':\r\n return map.get(d.parent.data.section)\r\n break;\r\n case 'productsExported':\r\n //return '#002b54';\r\n //console.log(d);\r\n return map.get(i)\r\n break;\r\n }\r\n })\r\n .on(\"mouseover\", function (d, i) {\r\n d3.select(this).transition().duration('50').style('opacity', '.50');\r\n box.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1);\r\n if (window.innerWidth >= 380) {\r\n box.html(divMouseOverContent(d))\r\n .style(\"top\", d3.event.pageY + 30 + \"px\")\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"display\", \"inline-block\");\r\n }\r\n\r\n })\r\n .on(\"mouseout\", function (d, i) {\r\n d3.select(this).transition().duration('50').style('opacity', '1');\r\n box.transition()\r\n .duration(200)\r\n .style(\"opacity\", 0);\r\n })\r\n //.on(\"click\", function (d, i) {\r\n // console.log(d);\r\n //})\r\n .each(function (d) {\r\n var w = d3.select(this)._groups[0][0].attributes[2].value,\r\n h = d3.select(this)._groups[0][0].attributes[3].value;\r\n rects.push({ w, h, d });\r\n });\r\n svg\r\n .selectAll(\"text\")\r\n .data(root.leaves())\r\n .enter()\r\n .append(\"text\")\r\n .attr(\"width\", function (d2) {\r\n switch (type) {\r\n case 'currentExports':\r\n var rect = rects.find(x => x.d.data.code == d2.data.code)\r\n var p_width = parseInt(rect.w)\r\n //return rect.d.x1 - rect.d.x0 - 10;\r\n return 50;\r\n break;\r\n case 'productsExported':\r\n var rect = rects.find(x => x.d.data.productCode == d2.data.productCode)\r\n var p_width = parseInt(rect.w)\r\n return rect.d.x1 - rect.d.x0 - 10;\r\n break;\r\n }\r\n\r\n })\r\n .attr(\"x\", function (d) { return d.x0 + 10 })\r\n .attr(\"y\", function (d) { return d.y0 + 20 })\r\n .text(function (d2, i) {\r\n var label = null;\r\n var rect = null;\r\n\r\n switch (type) {\r\n case 'currentExports':\r\n rect = rects.find(x => x.d.data.code == d2.data.code)\r\n label = d2.data.name;\r\n\r\n break;\r\n case 'productsExported':\r\n rect = rects.find(x => x.d.data.productCode == d2.data.productCode)\r\n label = d2.data.productLabel;\r\n\r\n break;\r\n }\r\n\r\n var p_width = parseInt(rect.w)\r\n var p_height = parseInt(rect.h)\r\n\r\n var pt_px = 0.75, // convert font size in pt into pixels\r\n font_size = 14, // or whatever it is set to in the stylesheet\r\n averageLetterWidth = 0.58344, // average character width for Arial\r\n letterWidth = 5.09;\r\n\r\n\r\n var label_space = label.length * (averageLetterWidth * font_size)\r\n var rect_space = p_width / (averageLetterWidth * font_size)\r\n var firstWord = label.replace(/ .*/, '');\r\n\r\n if (p_height >= 70) {\r\n if (p_width >= 200) {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 20).split(\" \").slice(0, -1).join(\" \") + \"...\" == \"...\") {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 20).split(\" \").slice(0, -1).join(\" \").length < 1) {\r\n return label.split(\" \")[0];\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 10).split(\" \").slice(0, -1).join(\" \") + \"...\"\r\n }\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 20).split(\" \").slice(0, -1).join(\" \") + \"...\";\r\n }\r\n }\r\n else if (p_width >= 160 && p_width < 200) {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\" == \"...\") {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \").length < 1) {\r\n return label.split(\" \")[0];\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 10).split(\" \").slice(0, -1).join(\" \") + \"...\"\r\n }\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\";\r\n }\r\n }\r\n else if (p_width >= 100 && p_width < 160) {\r\n d3.select(this).style(\"font-size\", \"12px\");\r\n\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\" == \"...\") {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \").length < 1) {\r\n return label.split(\" \")[0];\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 10).split(\" \").slice(0, -1).join(\" \") + \"...\"\r\n }\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\";\r\n }\r\n }\r\n else if (p_width >= 70 && p_width < 100) {\r\n d3.select(this).style(\"font-size\", \"12px\");\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\" == \"...\") {\r\n if ($.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \").length < 1) {\r\n return label.split(\" \")[0];\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 10).split(\" \").slice(0, -1).join(\" \") + \"...\"\r\n }\r\n } else {\r\n return $.trim(label).substring(0, (p_width / letterWidth) - 15).split(\" \").slice(0, -1).join(\" \") + \"...\";\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n })\r\n .attr(\"font-size\", \"14px\")\r\n .attr(\"font-weight\", \"bold\")\r\n .attr(\"fill\", \"white\");\r\n\r\n function wrapText(selection) {\r\n selection.each(function () {\r\n const node = d3.select(this);\r\n const rectWidth = +node.attr('data-width');\r\n let word;\r\n const words = node.text().split(' ').reverse();\r\n let line = [];\r\n let lineNumber = 0;\r\n const x = node.attr('x');\r\n const y = node.attr('y');\r\n let tspan = node.text('').append('tspan').attr('x', x).attr('y', y);\r\n while (words.length > 1) {\r\n word = words.pop();\r\n line.push(word);\r\n tspan.text(line.join(' '));\r\n const tspanLength = tspan.node().getComputedTextLength();\r\n if (tspanLength > rectWidth && line.length !== 1) {\r\n line.pop();\r\n tspan.text(line.join(' '));\r\n line = [word];\r\n tspan = addTspan(word);\r\n }\r\n }\r\n addTspan(words.pop());\r\n\r\n function addTspan(text) {\r\n lineNumber += 1;\r\n return node\r\n .append('tspan')\r\n .attr('x', x)\r\n .attr('y', y)\r\n .attr('dy', `${lineNumber * 12}px`)\r\n .text(text);\r\n }\r\n });\r\n }\r\n\r\n\r\n\r\n\r\n var divMouseOverContent = function (d) {\r\n var content;\r\n var total_value = 0;\r\n\r\n if (type == \"currentExports\") {\r\n for (var i in d.parent.data.children) {\r\n total_value += parseFloat(d.parent.data.children[i].value);\r\n }\r\n\r\n content = \"
\" + d.parent.data.section + \" \" +\r\n \"
\" + d.parent.data.name + \" \" +\r\n \"
\" + \"Total Section: US$ \" + formatValue(total_value) + t('chart_thousand') + \" \";\r\n content += \"
\" + d.data.code + \"- \" + d.data.name + \" \" +\r\n \"
US$ \" + formatValue(d.data.value) + t('chart_thousand') + \" \";\r\n\r\n sectiondata = d;\r\n } else if (type == \"productsExported\") {\r\n content =\r\n \"
\" + d.data.productLabel + \" \" +\r\n \"
US$ \" + formatValue(d.data.exportedValue) + t('chart_thousand') + \"\";\r\n }\r\n\r\n\r\n return content;\r\n\r\n }\r\n\r\n\r\n\r\n\r\n }\r\n\r\n drawChart2(data, type) {\r\n\r\n var sectiondata = null;\r\n\r\n var view = this.myTreemapChart.current;\r\n var div = $(this.myTreemapChart.current);\r\n var margin = { top: 10, right: 25, bottom: 65, left: 1 },\r\n width = $('.treemap').width(),\r\n height = 500;\r\n var formatValue = d3.format(\",d\");\r\n\r\n var formatUnitValue = function (value) {\r\n\r\n value = value.toString();\r\n\r\n if (value.includes('.')) {\r\n value = value.substring(0, value.indexOf('.'));\r\n }\r\n\r\n var valueChanged = null;\r\n if (value.length < 6) {\r\n valueChanged = formatValue(value) + \"K\";\r\n }\r\n if (value.length == 6) {\r\n valueChanged = formatValue(value).substring(0, 3) + \"M\";\r\n }\r\n if (value.length >= 7) {\r\n valueChanged = formatValue(value).substring(0, formatValue(value).indexOf(',')) + \"B\";\r\n }\r\n return valueChanged;\r\n }\r\n\r\n\r\n\r\n const clearColor = ['rgb(161, 205, 243)', 'rgb(253, 214, 155)', 'rgb(214, 221, 228)', 'rgb(200, 200, 200)'];\r\n const map = new Map();\r\n if (type == \"currentExports\") {\r\n map.set(data.children[0].section, \"#002b54\")\r\n map.set(data.children[1].section, \"#971779\")\r\n map.set(data.children[2].section, \"#e03375\")\r\n map.set(data.children[3].section, \"#009de8\")\r\n map.set(data.children[4].section, \"#a1cdf3\")\r\n map.set(data.children[5].section, \"#fdd69b\")\r\n map.set(data.children[6].section, \"#fa9805\")\r\n map.set(data.children[7].section, \"#ef99ba\")\r\n map.set(data.children[8].section, \"#d6dde4\")\r\n map.set(data.children[9].section, \"#c8c8c8\")\r\n map.set(data.children[10].section, \"#7b7b7b\")\r\n map.set(data.children[11].section, \"#7dd5f0\")\r\n map.set(data.children[12].section, \"#798ea4\")\r\n map.set(data.children[13].section, \"#e1a851\")\r\n map.set(data.children[14].section, \"#d88b16\")\r\n map.set(data.children[15].section, \"#fa7b05\")\r\n map.set(data.children[16].section, \"#dc6d06\")\r\n map.set(data.children[17].section, \"#d95784\")\r\n map.set(data.children[18].section, \"#a3174d\")\r\n map.set(data.children[19].section, \"#9eaebe\")\r\n map.set(data.children[20].section, \"#8095a9\")\r\n\r\n }\r\n else if (type == \"productsExported\") {\r\n map.set(0, \"#002b54\")\r\n map.set(1, \"#971779\")\r\n map.set(2, \"#e03375\")\r\n map.set(3, \"#009de8\")\r\n map.set(4, \"#a1cdf3\")\r\n map.set(5, \"#fdd69b\")\r\n map.set(6, \"#fa9805\")\r\n map.set(7, \"#ef99ba\")\r\n map.set(8, \"#d6dde4\")\r\n map.set(9, \"#c8c8c8\")\r\n map.set(10, \"#7b7b7b\")\r\n map.set(11, \"#7dd5f0\")\r\n map.set(12, \"#798ea4\")\r\n map.set(13, \"#e1a851\")\r\n map.set(14, \"#d88b16\")\r\n map.set(15, \"#fa7b05\")\r\n map.set(16, \"#dc6d06\")\r\n map.set(17, \"#d95784\")\r\n map.set(18, \"#a3174d\")\r\n map.set(19, \"#9eaebe\")\r\n map.set(20, \"#8095a9\")\r\n }\r\n\r\n const div2 = d3.select(view).append(\"div\")\r\n .style(\"position\", \"relative\")\r\n .style(\"width\", (width + margin.left + margin.right) + \"px\")\r\n .style(\"height\", (height + margin.top + margin.bottom) + \"px\")\r\n .style(\"left\", margin.left + \"px\")\r\n .style(\"top\", margin.top + \"px\")\r\n ;\r\n\r\n var box = d3.select(\"body\").append(\"div\").attr(\"id\", \"box-treemap\")\r\n .attr(\"class\", \"box\")\r\n .style(\"opacity\", 0)\r\n ;\r\n\r\n var root = null;\r\n var treemap = null;\r\n if (type == \"currentExports\") {\r\n root = d3.hierarchy(data).sum(function (d) { return d.value }).sort((a, b) => b.height - a.height || b.value - a.value);\r\n treemap = d3.treemap().size([width, height]).padding(1);\r\n } else if (type == \"productsExported\") {\r\n root = d3.hierarchy(data).sum(function (d) { return d.exportedValue });\r\n treemap = d3.treemap().size([width, height]).padding(4);\r\n }\r\n const tree = treemap(root);\r\n\r\n const treemap_product = div2.datum(root).selectAll(\".treemap-product\")\r\n .data(tree.leaves())\r\n .enter().append(\"div\")\r\n .attr(\"class\", \"treemap-product\")\r\n .style(\"left\", (d) => d.x0 + \"px\")\r\n .style(\"top\", (d) => d.y0 + \"px\")\r\n .style(\"width\", (d) => Math.max(0, d.x1 - d.x0 - 1) + \"px\")\r\n .style(\"height\", (d) => Math.max(0, d.y1 - d.y0 - 1) + \"px\")\r\n .style(\"background\", function (d, i) {\r\n switch (type) {\r\n case 'currentExports':\r\n return map.get(d.parent.data.section)\r\n break;\r\n case 'productsExported':\r\n return map.get(i)\r\n break;\r\n }\r\n })\r\n .on(\"mouseover\", function (d, i) {\r\n d3.select(this).transition().duration('50').style('opacity', '.50');\r\n box.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1);\r\n if (window.innerWidth >= 380) {\r\n box.html(divMouseOverContent(d))\r\n .style(\"top\", d3.event.pageY + 30 + \"px\")\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"display\", \"inline-block\");\r\n //fillHSCodeTooltip(d);\r\n }\r\n })\r\n .on(\"mouseout\", function () {\r\n d3.select(this).transition().duration('50').style('opacity', '1');\r\n box.transition()\r\n .style(\"opacity\", 0);\r\n\r\n })\r\n .append(\"p\").text(function (d) {\r\n\r\n var label = null;\r\n switch (type) {\r\n case 'currentExports':\r\n label = d.data.name;\r\n break;\r\n case 'productsExported':\r\n label = d.data.productLabel;\r\n break;\r\n }\r\n var p_width = $(this).width();\r\n var p_height = $(this).parent().height();\r\n\r\n return trimText(this, label, p_width, p_height);\r\n }).style(\"font-family\", \"Maven Pro\").style(\"font-size\", \"14px\").style(\"color\", \"#fff\");\r\n\r\n function trimText(this_p, label, width, height) {\r\n var letterWidth = 7.5,\r\n letterHeight = 22.00;\r\n\r\n label = $.trim(label);\r\n\r\n if (width * height < 12000) {\r\n //console.log(this_p, width, height);\r\n d3.select(this_p).attr(\"class\", \"small-p-treemap\");\r\n letterWidth = 6.5;\r\n }\r\n if (clearColor.includes($(this_p).closest('div').css(\"background-color\"))) {\r\n d3.select(this_p).attr(\"class\", \"p-treemap-dark\");\r\n }\r\n\r\n var lettersPerLine = Math.floor(width / letterWidth);\r\n var maxLines = Math.floor(height / letterHeight);\r\n\r\n var firstWord = label.split(\" \")[0];\r\n if (firstWord.length > lettersPerLine) {\r\n return \"\";\r\n }\r\n else {\r\n var lines = label.length / (width / letterWidth);\r\n if (lines > maxLines) {\r\n //truncate lines\r\n\r\n var words = label.split(\" \");\r\n var i = 0, j = 0;\r\n var lines = [];\r\n do {\r\n var newLine = \"\";\r\n if (lines[j] != null)\r\n newLine = lines[j] + \" \" + words[i];\r\n else\r\n newLine = words[i];\r\n if (newLine.length > lettersPerLine) {\r\n j++;\r\n newLine = words[i];\r\n }\r\n lines[j] = newLine;\r\n i++;\r\n }\r\n while (lines.length < maxLines);\r\n return lines.join(\" \") + \" ...\";\r\n }\r\n else {\r\n return label;\r\n }\r\n }\r\n }\r\n\r\n var divMouseOverContent = function (d) {\r\n var sectiondata = null;\r\n var content;\r\n var total_value = 0;\r\n\r\n if (type == \"currentExports\") {\r\n for (var i in d.parent.data.children) {\r\n total_value += parseFloat(d.parent.data.children[i].value);\r\n }\r\n content = \"\" + d.parent.data.section + \": \" + d.parent.data.name + \" \" +\r\n \"\" + \"Total Section: US$ \" + formatUnitValue(total_value) + \" \";\r\n content += \"\" + d.data.code + \"- \" + d.data.name + \" \" +\r\n \"US$ \" + formatUnitValue(d.data.value) + \" \";\r\n\r\n sectiondata = d;\r\n } else if (type == \"productsExported\") {\r\n content =\r\n \"\" + d.data.productLabel + \" \" +\r\n \"US$ \" + formatUnitValue(d.data.exportedValue) + \" \";\r\n }\r\n\r\n return content;\r\n\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return \r\n }\r\n}\r\n\r\nexport default TreemapChart\r\n\r\n","import React, { Component, useEffect } from 'react';\r\nimport * as d3 from \"d3v4\";\r\nimport $ from 'jquery'\r\nimport { t } from '../../services/i18n'\r\nimport { getPossessiveName } from '../../services/i18n/util';\r\n\r\nclass BarChart extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.myBarChart = React.createRef();\r\n\r\n }\r\n componentWillMount() {\r\n\r\n }\r\n\r\n componentDidMount() {\r\n const { options } = this.props;\r\n const { type } = this.props;\r\n const { region } = this.props;\r\n const { lang } = this.props;\r\n const { size } = this.props;\r\n //const { isload } = this.props;\r\n this.drawChart(options ? options : options.data, type, region, lang, size)\r\n }\r\n componentDidUpdate() {\r\n\r\n }\r\n\r\n drawChart(data, type, region, lang, size) {\r\n if (data.data != undefined) {\r\n data = data.data;\r\n } else {\r\n data = data.tradeMapPartnersData;\r\n }\r\n //GLOBAL \r\n var countryList = null;\r\n var restofWorld = null;\r\n var entityLabel = null;\r\n var entityCode = null;\r\n var totalExportedValue = null;\r\n\r\n //TRADE PARTNERS COUNTRY VARIABLES & //TRADE PARTNERS REGION VARIABLES\r\n var shareValue = null;\r\n var maxShare = null; \r\n\r\n //PRODUCT EXPORTERS VARIABLES\r\n var maxExportedValue = null;\r\n\r\n if (type == \"productExporters\") {\r\n countryList = data.countries;\r\n entityLabel = data.productLabel;\r\n totalExportedValue = data.worldExportedValue;\r\n maxExportedValue = countryList[0].exportedValue;\r\n\r\n } else if (type == \"tradePartners\") {\r\n //console.log(data.bilateral);\r\n countryList = data.bilateral;\r\n restofWorld = data.bilateral;\r\n entityLabel = data.countryLabel;\r\n entityCode = data.countryCode;\r\n shareValue = data.share;\r\n totalExportedValue = data.exportedValue;\r\n maxShare = Math.max(...data.bilateral.map(c => c.share));//countryList[0].share;\r\n // console.log(restofWorld);\r\n }\r\n else if (type == \"tradePartnersRegion\") {\r\n countryList = data.bilateral;\r\n restofWorld = data.bilateral;\r\n entityLabel = region.regionLabel;\r\n entityCode = region.regionCode;\r\n shareValue = data.share;\r\n totalExportedValue = data.exportedValue;\r\n maxShare = Math.max(...countryList.map(c => c.share));\r\n }\r\n var formatCommaValue = d3.format(\",d\");\r\n var formatShare = d3.format(\".3n\");\r\n var margin = { top: 50, right: 30, bottom: 70, left: 90 }, width = $('.barchart').width() - margin.left - margin.right;\r\n var height = 350 - margin.top - margin.bottom;\r\n\r\n function formatValue(labelValue) {\r\n if (labelValue) {\r\n // Nine Zeroes for Billions\r\n return Math.abs(Number(labelValue)) >= 1.0e+9\r\n\r\n ? formatCommaValue((Math.abs(Number(labelValue)) / 1.0e+9).toFixed(2)) + \" B\"\r\n // Six Zeroes for Millions \r\n : Math.abs(Number(labelValue)) >= 1.0e+6\r\n\r\n ? formatCommaValue((Math.abs(Number(labelValue)) / 1.0e+6).toFixed(2)) + \" M\"\r\n // Three Zeroes for Thousands\r\n : Math.abs(Number(labelValue)) >= 1.0e+3\r\n\r\n ? formatCommaValue((Math.abs(Number(labelValue)) / 1.0e+3).toFixed(2)) + \" K\"\r\n\r\n : Math.abs(Number(labelValue));\r\n }\r\n\r\n }\r\n\r\n //if (size.xxs || size.xs) {\r\n // height = 350 - margin.top - margin.bottom;\r\n //} else {\r\n // height = 350 - margin.top - margin.bottom;\r\n //} \r\n\r\n var box = d3.select(\"body\").append(\"div\").attr(\"id\", \"box-tradepartners\")\r\n .attr(\"class\", \"box-tradepartners\")\r\n .style(\"opacity\", 0);\r\n\r\n var svg = d3.select(this.myBarChart.current)\r\n .append(\"svg\")\r\n .attr(\"width\", width + margin.left + margin.right)\r\n .attr(\"height\", height + margin.top + margin.bottom)\r\n .append(\"g\")\r\n .attr(\"transform\", () => {\r\n if (size.xxs || size.xs) {\r\n return \"translate(135,10)\";\r\n } else {\r\n return \"translate(135,30)\";\r\n }\r\n });\r\n \r\n switch (type) {\r\n case 'tradePartners':\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n if (size.xxs || size.xs) {\r\n return -80;\r\n } else {\r\n return width / 4;\r\n }\r\n \r\n })\r\n .attr(\"y\", 2)\r\n .style(\"font-size\", \"14px\")\r\n .style(\"fill\", \"#002b54\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(getPossessiveName(entityLabel) + t('figure_title_traderpartners_end'));\r\n break;\r\n case 'tradePartnersRegion':\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n if (size.xxs || size.xs) {\r\n return -80;\r\n } else {\r\n return width / 4;\r\n }\r\n\r\n })\r\n .attr(\"y\", 2)\r\n .style(\"font-size\", \"14px\")\r\n .style(\"fill\", \"#002b54\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(getPossessiveName(entityLabel) + t('figure_title_traderpartners_end'));\r\n break;\r\n case 'productExporters':\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n if (size.xxs || size.xs) {\r\n return -80;\r\n } else {\r\n return 0 /*width / 4*/;\r\n }\r\n\r\n })\r\n .attr(\"y\", 2)\r\n .style(\"font-size\", \"14px\")\r\n .style(\"fill\", \"#002b54\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(t('figure_title_productexporters_start') + entityLabel.substring(0, 50) + ' (' + t('figure_title_productexporters_end') + ')');\r\n break;\r\n }\r\n \r\n\r\n // Add X axis\r\n var x = null;\r\n if (type == \"tradePartners\" || type == \"tradePartnersRegion\") {\r\n x = d3.scaleLinear()\r\n .domain([0, Math.ceil(maxShare)])\r\n .range([0, width - margin.right]);\r\n\r\n }\r\n else if (type == \"productExporters\") {\r\n x = d3.scaleLinear()\r\n .domain([0, Math.ceil(maxExportedValue) / 2, Math.ceil(maxExportedValue)])\r\n .range([0, (width - margin.right) / 2, width - margin.right]);\r\n\r\n }\r\n \r\n svg\r\n .append(\"g\")\r\n .attr(\"transform\", \"translate(0,\" + 230 + \")\")\r\n .call(d3.axisBottom(x))\r\n .selectAll(\"text\")\r\n .style(\"text-anchor\", \"end\")\r\n .text(function (d) {\r\n switch (type) {\r\n case 'tradePartners':\r\n return d;\r\n break;\r\n case 'tradePartnersRegion':\r\n return d;\r\n break;\r\n case 'productExporters':\r\n if (d !== 0) {\r\n var val = d / 1000000;\r\n return val.toString();\r\n } else {\r\n return d.toString();\r\n }\r\n break;\r\n }\r\n \r\n });\r\n \r\n // Y axis\r\n var y = d3.scaleBand()\r\n .range([20, 230])\r\n .domain(countryList.map(function (d) {\r\n switch(type){\r\n case 'tradePartners':\r\n return d.partnerLabel;\r\n break;\r\n case 'tradePartnersRegion':\r\n return d.partnerLabel;\r\n break;\r\n case 'productExporters':\r\n return d.countryLabel;\r\n break;\r\n }\r\n }))\r\n .padding(.1);\r\n\r\n svg.append(\"g\").attr(\"class\", \"axis\")\r\n .call(d3.axisLeft(y));\r\n\r\n //Bars\r\n svg.selectAll(\"myRect\")\r\n .data(countryList)\r\n .enter()\r\n .append(\"rect\")\r\n .attr(\"x\", x(0))\r\n .attr(\"y\", function (d, i) {\r\n switch (type) {\r\n case 'tradePartners':\r\n return y(d.partnerLabel);\r\n break;\r\n case 'tradePartnersRegion':\r\n return y(d.partnerLabel);\r\n break;\r\n case 'productExporters':\r\n return y(d.countryLabel);\r\n break;\r\n }\r\n \r\n })\r\n .attr(\"width\", function (d) {\r\n switch (type) {\r\n case 'tradePartners':\r\n return x(d.share);\r\n break;\r\n case 'tradePartnersRegion':\r\n return x(d.share);\r\n break;\r\n case 'productExporters':\r\n return x(d.exportedValue);\r\n break;\r\n }\r\n \r\n })\r\n .attr(\"height\", y.bandwidth())\r\n .attr(\"fill\", \"#002b54\")\r\n .on(\"mouseover\", function (d) {\r\n d3.select(this).transition().duration('50').style('fill', '#009de8');\r\n box.transition()\r\n .duration(200)\r\n .style(\"opacity\", 1);\r\n if (window.innerWidth >= 380) {\r\n box.html(divMouseOverContent(d))\r\n .style(\"top\", d3.event.pageY + 30 + \"px\")\r\n .style(\"left\", d3.event.pageX - 50 + \"px\")\r\n .style(\"display\", \"inline-block\");\r\n }\r\n })\r\n .on(\"mouseout\", function (d) {\r\n d3.select(this).transition().duration('50').style('fill', '#002b54');\r\n box.transition()\r\n .duration(200)\r\n .style(\"opacity\", 0);\r\n });\r\n\r\n //Figure Exported Value Title\r\n svg \r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n\r\n if (size.xxs || size.xs) {\r\n return -100;\r\n } else if (size.sm)\r\n {\r\n return -60;\r\n } else {\r\n return 10;\r\n }\r\n\r\n })\r\n .attr(\"y\", () => {\r\n if (size.xxs || size.xs) {\r\n return height + 45;\r\n } else {\r\n return height + 50;\r\n }\r\n })\r\n .style(\"font-size\", \"14px\")\r\n .style(\"fill\", \"#002b54\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(() => {\r\n switch (type) {\r\n case 'tradePartners':\r\n return t('chart_exported_value') + ' (USD)'\r\n //if (lang != 'en') {\r\n // return t('chart_exported_value') \r\n //} else {\r\n // return t('chart_exported_value') + t('chart_thousand') + \" USD\"\r\n //} \r\n break;\r\n case 'tradePartnersRegion':\r\n return t('figure_title_traderpartners_region_value') + ' (USD)'\r\n break;\r\n case 'productExporters':\r\n return t('figure_title_traderpartners_value') + ' (USD)'\r\n break;\r\n }\r\n \r\n }\r\n \r\n );\r\n //Figure Exported Value\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n\r\n if (size.xxs || size.xs) {\r\n return -100;\r\n } else if (size.sm) {\r\n return -60;\r\n } else {\r\n return 10;\r\n }\r\n })\r\n .attr(\"y\", () => {\r\n if (size.xxs || size.xs) {\r\n return height + 65\r\n } else {\r\n return height + 80\r\n }\r\n \r\n })\r\n .style(\"font-size\", () => {\r\n\r\n if (size.xxs || size.xs) {\r\n return \"16px\";\r\n } else {\r\n return \"20px\"\r\n }\r\n\r\n })\r\n .style(\"font-weight\", \"bold\")\r\n .style(\"fill\", \"#b8014c\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(function () {\r\n switch (type) {\r\n case 'tradePartners':\r\n return formatValue(totalExportedValue * 1000)\r\n break;\r\n case 'tradePartnersRegion':\r\n return formatValue(totalExportedValue * 1000)\r\n break;\r\n case 'productExporters':\r\n return formatValue(totalExportedValue * 1000)\r\n break;\r\n }\r\n \r\n });\r\n\r\n if (type == 'tradePartners') {\r\n //Figures Share Title\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => { \r\n\r\n if (size.xxs || size.xs) {\r\n return -100;\r\n } else if (size.sm) {\r\n return 200;\r\n }else {\r\n return 280\r\n }\r\n\r\n })\r\n .attr(\"y\", () => {\r\n if (size.xxs || size.xs) {\r\n return height + 90\r\n } else {\r\n return height + 50\r\n }\r\n\r\n })\r\n .style(\"font-size\", \"14px\")\r\n .style(\"fill\", \"#002b54\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(t('figure_title_traderpartners_proportion'));\r\n\r\n //Figures Share Value\r\n svg\r\n .append(\"text\")\r\n .attr(\"x\", () => {\r\n\r\n if (size.xxs || size.xs) {\r\n return -100;\r\n } else if (size.sm) {\r\n return 200;\r\n } else {\r\n return 280\r\n }\r\n })\r\n .attr(\"y\", () => {\r\n if (size.xxs || size.xs) {\r\n return height + 105\r\n } else {\r\n return height + 80\r\n }\r\n\r\n })\r\n .style(\"font-size\", () => {\r\n\r\n if (size.xxs || size.xs) {\r\n return \"16px\";\r\n } else {\r\n return \"20px\"\r\n }\r\n })\r\n .style(\"font-weight\", \"bold\")\r\n .style(\"fill\", \"#b8014c\")\r\n .style(\"font-family\", \"Public Sans\")\r\n .text(function () { return shareValue + \" %\" });\r\n\r\n \r\n }\r\n var divMouseOverContent = function (d) {\r\n var content;\r\n switch (type) {\r\n case 'tradePartners':\r\n if (lang != 'en') { \r\n content = \"\" + d.partnerLabel + \" \" +\r\n \"\" + t('chart_share_in') + t('chart_exports') + entityLabel + \": \" + formatShare(d.share) + \"%\" + \" \"\r\n } else {\r\n content = \"\" + d.partnerLabel + \" \" +\r\n \"\" + t('chart_share_in') + entityLabel + t('chart_exports') + formatShare(d.share) + \"%\" + \" \"\r\n }\r\n \r\n break;\r\n case 'tradePartnersRegion':\r\n if (lang != 'en') {\r\n content = \"\" + d.partnerLabel + \" \" +\r\n \"\" + t('chart_share_in') + t('chart_exports') + entityLabel + \": \" + formatShare(d.share) + \"%\" + \" \"\r\n } else {\r\n content = \"\" + d.partnerLabel + \" \" +\r\n \"\" + t('chart_share_in') + entityLabel + t('chart_exports') + formatShare(d.share) + \"%\" + \" \"\r\n }\r\n \r\n break;\r\n case 'productExporters':\r\n content = \"\" + d.countryLabel + \" \" +\r\n \"\" + t('chart_exported_value') + formatValue(d.exportedValue) + \" USD \"\r\n break;\r\n }\r\n\r\n\r\n return content;\r\n\r\n }\r\n \r\n \r\n }\r\n\r\n\r\n render() {\r\n return \r\n }\r\n}\r\n\r\nexport default BarChart\r\n\r\n","import React, { Component, useState, useEffect } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { connect } from 'react-redux';\r\nimport $ from 'jquery';\r\nimport { t } from '../../services/i18n';\r\nimport DropdownButton from 'react-bootstrap/DropdownButton';\r\nimport Dropdown from 'react-bootstrap/Dropdown';\r\nimport Nav from 'react-bootstrap/Nav';\r\nimport Tab from 'react-bootstrap/Tab';\r\nimport Row from 'react-bootstrap/Row';\r\nimport Col from 'react-bootstrap/Col';\r\nimport Popup from 'reactjs-popup';\r\nimport Highcharts from 'highcharts';\r\nimport HighchartsReact from 'highcharts-react-official';\r\nimport addHighchartsMore from 'highcharts/highcharts-more';\r\nimport addExportModule from 'highcharts/modules/exporting';\r\nimport addTreemapModule from 'highcharts/modules/treemap';\r\nimport { MoneyFormat } from '../../services/util';\r\nimport {\r\n fetchCountries,\r\n fetchEpmChart,\r\n fetchMacMapChart,\r\n fetchTradeMapExportsChart,\r\n fetchTradeMapPartnersChart,\r\n fetchROOAggregated,\r\n fetchInvestmentMapAggregated,\r\n fetchProcurementMapAvailability,\r\n fetchCountryKeyData,\r\n fetchEpmRefYear,\r\n} from '../../actions';\r\nimport TreemapChart from '../../constants/Embedded/treemap';\r\nimport BarChart from '../../constants/Embedded/barchart';\r\n\r\naddTreemapModule(Highcharts);\r\naddHighchartsMore(Highcharts);\r\naddExportModule(Highcharts);\r\n\r\nclass CountryProfileEmbedded extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n selectedCountry: null,\r\n size: { xxs: false, xs: false, sm: false, md: false, lg: false, xl: false },\r\n width: 0,\r\n height: 0,\r\n pageLoaded: false,\r\n mobileDropDownSelected: t('tab_title_tradepartners'),\r\n tabSelected: 'tm',\r\n selectedCountry: null,\r\n tmChartLoadTrigger: true,\r\n ceChartLoadTrigger: false,\r\n };\r\n this.country = null;\r\n\r\n this.parameters = {\r\n countryCode: null,\r\n lang: null,\r\n };\r\n this.epmChartIframe = null;\r\n }\r\n componentWillMount() {\r\n this.parameters.countryCode = this.getParamValue('countryCode') ? this.getParamValue('countryCode') : null;\r\n if (this.parameters.countryCode == '356') {\r\n this.parameters.countryCode = '699';\r\n }\r\n if (this.parameters.countryCode == '711') {\r\n this.parameters.countryCode = '710';\r\n }\r\n this.parameters.lang = this.props.uiTranslationsLoaded.locale;\r\n //http://epm.tmitest.ovh/ -- DEV\r\n //https://exportpotential.intracen.org/ --PROD\r\n this.epmChartIframe =\r\n 'https://exportpotential.intracen.org/' +\r\n this.parameters.lang +\r\n '/products/tree-map?fromMarker=i&exporter=' +\r\n this.parameters.countryCode +\r\n '&toMarker=w&market=w&whatMarker=k&embed=true&embedmode=chartonly&chartHeight=400';\r\n }\r\n componentDidMount(props) {\r\n const tabs = $('#Tabs');\r\n window.addEventListener('resize', this.updateDimensions);\r\n this.setSize(this.state.size);\r\n this.state.pageLoaded = true;\r\n this.props.fetchCountries().then(() => {\r\n this.country = this.props.countries.filter((c) => c.value === this.parameters.countryCode);\r\n this.loadChartsData(this.country[0]);\r\n });\r\n }\r\n componentDidUpdate() {}\r\n\r\n getChart = (chart) => {\r\n //\tthis.chart = chart;\r\n chart.plotHeight = 732;\r\n chart.plotSizeY = 732;\r\n chart.chartHeight = 800;\r\n chart.plotBox.height = 732;\r\n //chart.reflow();\r\n };\r\n getChartMini = (chart) => {\r\n //\tthis.chart = chart;\r\n chart.plotHeight = 332;\r\n chart.plotSizeY = 332;\r\n chart.chartHeight = 400;\r\n chart.plotBox.height = 332;\r\n\r\n chart.plotWidth = 300;\r\n chart.plotSizeX = 300;\r\n chart.chartWidth = 340;\r\n chart.plotBox.width = 300;\r\n\r\n chart.reflow();\r\n };\r\n setHeight() {\r\n if (this.state.size.xxs) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2055);\r\n $('#country-profile-embedded-content').height(821);\r\n } else {\r\n $('.section').height(3098);\r\n $('#country-profile-embedded-content').height(1866);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2126);\r\n $('#country-profile-embedded-content').height(875);\r\n } else {\r\n $('.section').height(3454);\r\n $('#country-profile-embedded-content').height(2206);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(896);\r\n } else {\r\n $('.section').height(3465);\r\n $('#country-profile-embedded-content').height(2217);\r\n }\r\n\r\n break;\r\n }\r\n }\r\n if (this.state.size.xs) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2055);\r\n $('#country-profile-embedded-content').height(821);\r\n } else {\r\n $('.section').height(2920);\r\n $('#country-profile-embedded-content').height(1681);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2126);\r\n $('#country-profile-embedded-content').height(875);\r\n } else {\r\n $('.section').height(3454);\r\n $('#country-profile-embedded-content').height(2206);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(896);\r\n } else {\r\n $('.section').height(3439);\r\n $('#country-profile-embedded-content').height(2189);\r\n }\r\n\r\n break;\r\n }\r\n }\r\n if (this.state.size.sm) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1608);\r\n $('#country-profile-embedded-content').height(765);\r\n } else {\r\n $('.section').height(2320);\r\n $('#country-profile-embedded-content').height(1477);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1659);\r\n $('#country-profile-embedded-content').height(792);\r\n } else {\r\n $('.section').height(2507);\r\n $('#country-profile-embedded-content').height(1640);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1659);\r\n $('#country-profile-embedded-content').height(792);\r\n } else {\r\n $('.section').height(2508);\r\n $('#country-profile-embedded-content').height(1641);\r\n }\r\n break;\r\n }\r\n }\r\n if (this.state.size.md) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1435);\r\n $('#country-profile-embedded-content').height(740);\r\n } else {\r\n $('.section').height(2020);\r\n $('#country-profile-embedded-content').height(1325);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1461);\r\n $('#country-profile-embedded-content').height(766);\r\n } else {\r\n $('.section').height(2155);\r\n $('#country-profile-embedded-content').height(1460);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1482);\r\n $('#country-profile-embedded-content').height(766);\r\n } else {\r\n $('.section').height(2212);\r\n $('#country-profile-embedded-content').height(1486);\r\n }\r\n break;\r\n }\r\n }\r\n if (this.state.size.lg) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1186);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1490);\r\n $('#country-profile-embedded-content').height(786);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1186);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1586);\r\n $('#country-profile-embedded-content').height(889);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1636);\r\n $('#country-profile-embedded-content').height(939);\r\n }\r\n break;\r\n }\r\n }\r\n if (this.state.size.xl) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1341);\r\n $('#country-profile-embedded-content').height(635);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1463);\r\n $('#country-profile-embedded-content').height(764);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(482);\r\n } else {\r\n $('.section').height(1500);\r\n $('#country-profile-embedded-content').height(803);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n //iPhone 5\r\n if (window.innerWidth <= 320) {\r\n switch (this.parameters.lang) {\r\n case 'en':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2055);\r\n $('#country-profile-embedded-content').height(821);\r\n } else {\r\n $('.section').height(3282);\r\n $('#country-profile-embedded-content').height(2050);\r\n }\r\n break;\r\n case 'fr':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(2126);\r\n $('#country-profile-embedded-content').height(875);\r\n } else {\r\n $('.section').height(3454);\r\n $('#country-profile-embedded-content').height(2206);\r\n }\r\n break;\r\n case 'es':\r\n if (this.state.mobileDropDownSelected != t('tab_title_otherdata') || this.state.tabSelected != 'others') {\r\n $('.section').height(1181);\r\n $('#country-profile-embedded-content').height(896);\r\n } else {\r\n $('.section').height(3465);\r\n $('#country-profile-embedded-content').height(2217);\r\n }\r\n\r\n break;\r\n }\r\n }\r\n }\r\n setSize(s) {\r\n var width = window.innerWidth;\r\n var tabsElement = $('#Tabs');\r\n var dropDownElement = $('#DropDown');\r\n\r\n if (width <= 425) {\r\n s.xxs = true;\r\n this.state.size.xs = false;\r\n this.state.size.sm = false;\r\n this.state.size.md = false;\r\n this.state.size.lg = false;\r\n this.state.size.xl = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n this.setHeight();\r\n }\r\n if (width >= 426 && width <= 576) {\r\n s.xs = true;\r\n this.state.size.xxs = false;\r\n this.state.size.sm = false;\r\n this.state.size.md = false;\r\n this.state.size.lg = false;\r\n this.state.size.xl = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n this.setHeight();\r\n }\r\n if (width >= 577 && width <= 767) {\r\n s.sm = true;\r\n this.state.size.xxs = false;\r\n this.state.size.xs = false;\r\n this.state.size.md = false;\r\n this.state.size.lg = false;\r\n this.state.size.xl = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n this.setHeight();\r\n }\r\n if (width >= 768 && width <= 991) {\r\n s.md = true;\r\n this.state.size.xxs = false;\r\n this.state.size.xs = false;\r\n this.state.size.sm = false;\r\n this.state.size.lg = false;\r\n this.state.size.xl = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.show();\r\n dropDownElement.hide();\r\n }\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n this.setHeight();\r\n }\r\n if (width >= 992 && width <= 1199) {\r\n s.lg = true;\r\n this.state.size.xxs = false;\r\n this.state.size.xs = false;\r\n this.state.size.sm = false;\r\n this.state.size.md = false;\r\n this.state.size.xl = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.show();\r\n dropDownElement.hide();\r\n }\r\n if (this.parameters.lang == 'fr' || this.parameters.lang == 'es') {\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n }\r\n this.setHeight();\r\n }\r\n if (width >= 1200) {\r\n s.xl = true;\r\n this.state.size.xxs = false;\r\n this.state.size.xs = false;\r\n this.state.size.sm = false;\r\n this.state.size.md = false;\r\n this.state.size.lg = false;\r\n if (!this.state.pageLoaded) {\r\n tabsElement.show();\r\n dropDownElement.hide();\r\n }\r\n if (this.parameters.lang == 'fr' || this.parameters.lang == 'es') {\r\n if (tabsElement[0].clientHeight > 70) {\r\n //console.log(tabsElement[0].clientHeight);\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n }\r\n this.setHeight();\r\n }\r\n\r\n return s;\r\n }\r\n removeCharts = () => {\r\n this.setState({ tmChartLoadTrigger: false });\r\n this.setState({ ceChartLoadTrigger: false });\r\n };\r\n loadCharts = () => {\r\n if (this.state.tabSelected == 'tm' || this.state.mobileDropDownSelected == t('tab_title_tradepartners')) {\r\n this.setState({ tmChartLoadTrigger: true });\r\n }\r\n if (this.state.tabSelected == 'ce' || this.state.mobileDropDownSelected == t('tab_title_currentexports')) {\r\n this.setState({ ceChartLoadTrigger: true });\r\n }\r\n };\r\n\r\n updateDimensions = () => {\r\n this.setState({ width: window.innerWidth, height: window.innerHeight });\r\n\r\n var tabsElement = $('#Tabs');\r\n var dropDownElement = $('#DropDown');\r\n\r\n if (tabsElement[0].clientHeight > 70) {\r\n tabsElement.hide();\r\n dropDownElement.show();\r\n }\r\n if (this.state.width <= 425 && this.state.size.xxs === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.hide();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.show();\r\n /*console.log(this.state.size);*/\r\n }\r\n if (this.state.width >= 426 && this.state.width < 577 && this.state.size.xs === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.hide();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.show();\r\n /*console.log(this.state.size);*/\r\n }\r\n if (this.state.width >= 576 && this.state.width < 768 && this.state.size.sm === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.hide();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.show();\r\n /*console.log(this.state.size);*/\r\n }\r\n if (this.state.width >= 768 && this.state.width < 992 && this.state.size.md === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.show();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.hide();\r\n /*console.log(this.state.size);*/\r\n }\r\n if (this.state.width >= 992 && this.state.width < 1200 && this.state.size.lg === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.show();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.hide();\r\n /*console.log(this.state.size);*/\r\n }\r\n if (this.state.width >= 1200 && this.state.size.xl === false) {\r\n this.removeCharts();\r\n this.state.size = this.setSize(this.state.size);\r\n tabsElement.show();\r\n\r\n this.loadCharts();\r\n //API CALL to be grouped into dedicated function\r\n //this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n //this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n dropDownElement.hide();\r\n /*console.log(this.state.size);*/\r\n }\r\n };\r\n\r\n handleTabs = (e) => {\r\n switch (e) {\r\n case 'tm':\r\n /*console.log(this.state.tmChartLoadTrigger)*/\r\n\r\n this.setState({ tmChartLoadTrigger: true });\r\n this.setState({ ceChartLoadTrigger: false });\r\n //this.setState({\r\n // mobileDropDownSelected: t('tab_title_tradepartners'),\r\n // tabSelected: 'tm',\r\n //});\r\n this.state.mobileDropDownSelected = t('tab_title_tradepartners');\r\n this.state.tabSelected = 'tm';\r\n this.setHeight();\r\n this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n /*console.log(this.state.tmChartLoadTrigger)*/\r\n\r\n break;\r\n case 'ce':\r\n /*console.log(this.state.ceChartLoadTrigger)*/\r\n this.setState({ ceChartLoadTrigger: true });\r\n this.setState({ tmChartLoadTrigger: false });\r\n //this.setState({\r\n // mobileDropDownSelected: t('tab_title_currentexports'),\r\n // tabSelected: 'ce',\r\n //});\r\n this.state.mobileDropDownSelected = t('tab_title_currentexports');\r\n this.state.tabSelected = 'ce';\r\n this.setHeight();\r\n this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n /*console.log(this.state.ceChartLoadTrigger)*/\r\n break;\r\n case 'epm':\r\n //this.setState({\r\n // mobileDropDownSelected: t('tab_title_exportpotential'),\r\n // tabSelected: 'epm',\r\n //});\r\n this.state.mobileDropDownSelected = t('tab_title_exportpotential');\r\n this.state.tabSelected = 'epm';\r\n this.setHeight();\r\n break;\r\n case 'macmap':\r\n //this.setState({\r\n // mobileDropDownSelected: t('tab_title_marketaccess'),\r\n // tabSelected: 'macmap',\r\n //});\r\n this.state.mobileDropDownSelected = t('tab_title_marketaccess');\r\n this.state.tabSelected = 'macmap';\r\n this.setHeight();\r\n break;\r\n case 'others':\r\n //this.setState({\r\n // mobileDropDownSelected: t('tab_title_otherdata'),\r\n // tabSelected: 'others',\r\n //});\r\n this.state.mobileDropDownSelected = t('tab_title_otherdata');\r\n this.state.tabSelected = 'others';\r\n this.setHeight();\r\n break;\r\n }\r\n };\r\n handleSelect = (e) => {\r\n $('#tm').removeClass('active show');\r\n $('#ce').removeClass('active show');\r\n $('#epm').removeClass('active show');\r\n $('#macmap').removeClass('active show');\r\n $('#others').removeClass('active show');\r\n\r\n switch (e) {\r\n case 'tm':\r\n this.setState({ tmChartLoadTrigger: true });\r\n this.setState({ ceChartLoadTrigger: false });\r\n this.setState({\r\n mobileDropDownSelected: t('tab_title_tradepartners'),\r\n tabSelected: 'tm',\r\n });\r\n this.state.mobileDropDownSelected = t('tab_title_tradepartners');\r\n this.state.tabSelected = 'tm';\r\n this.setHeight();\r\n $('#' + e).removeClass('fade');\r\n this.props.fetchTradeMapPartnersChart(this.state.selectedCountry.value);\r\n $('#' + e).addClass('active show');\r\n break;\r\n case 'ce':\r\n this.setState({ ceChartLoadTrigger: true });\r\n this.setState({ tmChartLoadTrigger: false });\r\n this.setState({\r\n mobileDropDownSelected: t('tab_title_currentexports'),\r\n tabSelected: 'ce',\r\n });\r\n this.state.mobileDropDownSelected = t('tab_title_currentexports');\r\n this.state.tabSelected = 'ce';\r\n this.setHeight();\r\n $('#' + e).removeClass('fade');\r\n this.props.fetchTradeMapExportsChart(this.state.selectedCountry.value);\r\n $('#' + e).addClass('active show');\r\n break;\r\n case 'epm':\r\n this.setState({\r\n mobileDropDownSelected: t('tab_title_exportpotential'),\r\n tabSelected: 'epm',\r\n });\r\n this.state.mobileDropDownSelected = t('tab_title_exportpotential');\r\n this.state.tabSelected = 'epm';\r\n this.setHeight();\r\n $('#' + e).removeClass('fade');\r\n $('#' + e).addClass('active show');\r\n break;\r\n case 'macmap':\r\n this.setState({\r\n mobileDropDownSelected: t('tab_title_marketaccess'),\r\n tabSelected: 'macmap',\r\n });\r\n this.state.mobileDropDownSelected = t('tab_title_marketaccess');\r\n this.state.tabSelected = 'macmap';\r\n this.setHeight();\r\n $('#' + e).removeClass('fade');\r\n $('#' + e).addClass('active show');\r\n break;\r\n case 'others':\r\n this.setState({\r\n mobileDropDownSelected: t('tab_title_otherdata'),\r\n tabSelected: 'others',\r\n });\r\n this.state.mobileDropDownSelected = t('tab_title_otherdata');\r\n this.state.tabSelected = 'others';\r\n this.setHeight();\r\n $('#' + e).removeClass('fade');\r\n $('#' + e).addClass('active show');\r\n break;\r\n }\r\n };\r\n loadChartsData(selectedCountry) {\r\n if (selectedCountry) {\r\n this.setState({ selectedCountry: selectedCountry });\r\n this.props.fetchCountryKeyData(selectedCountry.value);\r\n this.props.fetchMacMapChart(selectedCountry.value);\r\n this.props.fetchTradeMapPartnersChart(selectedCountry.value);\r\n this.props.fetchEpmChart(selectedCountry.value);\r\n this.props.fetchEpmRefYear();\r\n this.props.fetchROOAggregated(selectedCountry.value);\r\n this.props.fetchInvestmentMapAggregated(selectedCountry.value);\r\n this.props.fetchProcurementMapAvailability(selectedCountry.value);\r\n }\r\n }\r\n getParamValue = (paramName) => {\r\n var url = window.location.search.substring(1);\r\n var qArray = url.split('&');\r\n for (var i = 0; i < qArray.length; i++) {\r\n var pArr = qArray[i].split('=');\r\n if (pArr[0] === paramName) return pArr[1];\r\n }\r\n };\r\n\r\n formatValueGDP(labelValue) {\r\n if (labelValue) {\r\n // Nine Zeroes for Billions\r\n return Math.abs(Number(labelValue)) >= 1.0e6\r\n ? Math.abs(Number(labelValue)) / 1.0e6 + ' B'\r\n : // Six Zeroes for Millions\r\n Math.abs(Number(labelValue)) >= 1.0e6\r\n ? Math.abs(Number(labelValue)) / 1.0e3 + ' M'\r\n : // Three Zeroes for Thousands\r\n Math.abs(Number(labelValue)) >= 1.0\r\n ? Math.abs(Number(labelValue)) / 1.0 + ' K'\r\n : Math.abs(Number(labelValue));\r\n }\r\n }\r\n\r\n formatValue(labelValue) {\r\n if (labelValue) {\r\n // Nine Zeroes for Billions\r\n return Math.abs(Number(labelValue)) >= 1.0e9\r\n ? (Math.abs(Number(labelValue)) / 1.0e9).toFixed(2) + ' B'\r\n : // Six Zeroes for Millions\r\n Math.abs(Number(labelValue)) >= 1.0e6\r\n ? (Math.abs(Number(labelValue)) / 1.0e6).toFixed(2) + ' M'\r\n : // Three Zeroes for Thousands\r\n Math.abs(Number(labelValue)) >= 1.0e3\r\n ? (Math.abs(Number(labelValue)) / 1.0e3).toFixed(2) + ' K'\r\n : Math.abs(Number(labelValue));\r\n }\r\n }\r\n\r\n render() {\r\n const TradeMapExportsChartOptions = {\r\n ...this.props.tradeMapExportsData,\r\n };\r\n const TradeMapPartnersChartOptions = {\r\n ...this.props.tradeMapPartnersData,\r\n };\r\n const MacMapChartOptions = {\r\n chart: {\r\n type: 'column',\r\n height: 400,\r\n width: 300,\r\n },\r\n colors: ['#002b54', '#009de8'],\r\n legend: {\r\n layout: 'horizontal',\r\n backgroundColor: '#FFFFFF',\r\n\r\n labelFormatter: function () {\r\n return this.name == 'minValue' ? t('mfn') : t('applied_tariff');\r\n },\r\n },\r\n\r\n title: {\r\n text: null,\r\n },\r\n\r\n yAxis: {\r\n min: 0,\r\n title: {\r\n text: t('tariff') + ' (%)',\r\n },\r\n },\r\n tooltip: {\r\n /*headerFormat: '{point.key} ',*/\r\n formatter: function () {\r\n let pt_series_name = '';\r\n\r\n if (this.point.series.name == 'minValue') pt_series_name = t('mfn');\r\n else pt_series_name = t('applied_tariff');\r\n\r\n return (\r\n '' +\r\n this.point.category +\r\n ' ' +\r\n pt_series_name +\r\n ': ' +\r\n this.point.y +\r\n '
'\r\n );\r\n },\r\n\r\n shared: false,\r\n useHTML: true,\r\n },\r\n plotOptions: {\r\n column: {\r\n pointPadding: 0.2,\r\n borderWidth: 0,\r\n },\r\n },\r\n xAxis: {\r\n categories: [t('allproducts'), t('Industrial'), t('Agricultural')],\r\n crosshair: true,\r\n title: {\r\n text: t('Products'),\r\n },\r\n },\r\n\r\n series: this.props.macMapChartData,\r\n\r\n exporting: {\r\n enabled: false,\r\n },\r\n };\r\n const CountryKeyData = {\r\n ...this.props.countryKeyData,\r\n };\r\n const MacMapYearChartData = {\r\n ...this.props.macMapYearChartData,\r\n };\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {t('countrykey_title_pop')} \r\n {this.formatValue(CountryKeyData.population)} \r\n ({CountryKeyData.year}) \r\n Source: {t('countrykey_title_un')} \r\n
\r\n
\r\n
\r\n
\r\n
{t('countrykey_title_gdp')} \r\n
{this.formatValueGDP(CountryKeyData.gdp)} \r\n
\r\n
USD \r\n ({CountryKeyData.year}) \r\n \r\n
Source: {t('countrykey_title_imf')} \r\n
\r\n
\r\n
\r\n
\r\n
{t('countrykey_title_gdpcapita')} \r\n
{this.formatValue(CountryKeyData.gdpPerCapita)} \r\n
\r\n
USD \r\n ({CountryKeyData.year}) \r\n \r\n
Source: {t('countrykey_title_imf')} \r\n
\r\n
\r\n
\r\n
\r\n {t('countrykey_title_unempl')} \r\n {this.formatValue(CountryKeyData.unemployment)} % \r\n ({CountryKeyData.year}) \r\n Source: {t('countrykey_title_ilo')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {t('tab_title_tradepartners')} \r\n \r\n \r\n {t('tab_title_currentexports')} \r\n \r\n \r\n {t('tab_title_exportpotential')} \r\n \r\n \r\n {t('tab_title_marketaccess')} \r\n \r\n \r\n {t('tab_title_otherdata')} \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.props.tradeMapPartnersData && this.state.tmChartLoadTrigger ? (\r\n
\r\n ) : null}\r\n \r\n
\r\n
\r\n \r\n {this.country && this.props.tradeMapPartnersData ? (\r\n
\r\n {t('chart_title_tradepartners')} {this.country[0].label} ({TradeMapPartnersChartOptions.data.year}){' '}\r\n \r\n ) : (\r\n Trade Map - Top trade partners \r\n )}\r\n Market analysis \r\n \r\n
\r\n\r\n
\r\n {t('tab_description_trademap')}
\r\n \r\n
\r\n
\r\n \r\n {t('chart_link_explore')}\r\n \r\n \r\n {t('chart_link_tool')}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.tradeMapExportsData && this.state.ceChartLoadTrigger ? (\r\n
\r\n
\r\n
\r\n \r\n {this.country && this.props.tradeMapPartnersData ? (\r\n
\r\n {t('chart_title_currentexports')} {this.country[0].label} ({TradeMapPartnersChartOptions.data.year}){' '}\r\n \r\n ) : (\r\n Trade Map - Current exports \r\n )}\r\n Market analysis \r\n \r\n
\r\n
\r\n {t('tab_description_trademap')}
\r\n \r\n
\r\n
\r\n \r\n {t('chart_link_explore')}\r\n \r\n \r\n {t('chart_link_tool')}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n {this.country && this.props.epmRefYear ? (\r\n
\r\n {t('chart_title_exportpotential')} {this.country[0].label} ({this.props.epmRefYear}){' '}\r\n \r\n ) : (\r\n Export Potential Map - Export potential \r\n )}\r\n Market analysis \r\n \r\n
\r\n
\r\n {t('tab_description_epm')}
\r\n \r\n
\r\n
\r\n \r\n {t('chart_link_explore')}\r\n \r\n \r\n {t('chart_link_tool')}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {this.country && this.props.macMapChartData ? (\r\n
\r\n
\r\n
\r\n
\r\n \r\n {this.country && this.props.macMapYearChartData ? (\r\n
\r\n {t('chart_title_marketaccess')} {this.country[0].label} (\r\n {MacMapYearChartData[0] ? MacMapYearChartData[0].refyear : ''}){' '}\r\n \r\n ) : (\r\n Market Access Map - Tariff averages \r\n )}\r\n Market analysis \r\n \r\n
\r\n
\r\n {t('tab_description_macmap')}
\r\n \r\n
\r\n
\r\n \r\n {t('chart_link_explore')}\r\n \r\n \r\n {t('chart_link_tool')}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n
\r\n {t('figure_title_roo')} \r\n {this.props.rooAgg ? (\r\n {this.props.rooAgg.Value} \r\n ) : (\r\n N/A \r\n )}\r\n {t('tool_agg_roo')} \r\n
\r\n
\r\n {t('tab_description_roo')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {t('view_more_roo')}\r\n \r\n \r\n
\r\n
\r\n
\r\n {t('figure_title_im')} \r\n {this.props.investmentAgg && this.props.investmentAgg.inFlow ? (\r\n \r\n
\r\n {MoneyFormat(this.props.investmentAgg.inFlow, 2)} \r\n USD \r\n \r\n \r\n in \r\n {this.props.investmentAgg.year} \r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n
\r\n {t('tab_description_im')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {t('view_more_im')}\r\n \r\n \r\n
\r\n
\r\n
\r\n {t('figure_title_pm')} \r\n {this.props.procurementMapAvailabilityData ? (\r\n \r\n {this.props.procurementMapAvailabilityData.countries[0].nbTenders}\r\n \r\n ) : null}\r\n
\r\n
\r\n \r\n {t('tab_description_pm')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {t('view_more_pm')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {t('embedded_visit_bottom_link')}\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {t('tab_title_tradepartners')} \r\n \r\n \r\n {t('tab_title_currentexports')} \r\n \r\n \r\n {t('tab_title_activetenders')} \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.props.tradeMapPartnersData && this.state.tmChartLoadTrigger ?
: null}\r\n \r\n
\r\n
\r\n \r\n {this.region ?
Trade Map - {t('chart_title_tradepartners')} {this.regionLabel} : Trade Map - Top trade partners }\r\n Market analysis \r\n \r\n
\r\n\r\n
\r\n {t('tab_description_trademap')}
\r\n \r\n
\r\n
\r\n {t('chart_link_explore')} {t('chart_link_tool')} \r\n \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n {this.props.tradeMapExportsData && this.state.ceChartLoadTrigger ?
\r\n
\r\n
\r\n \r\n {this.region ?
Trade Map - {t('chart_title_currentexports')} {this.regionLabel} : Trade Map - Current exports }\r\n Market analysis \r\n \r\n
\r\n
\r\n {t('tab_description_trademap')}
\r\n \r\n
\r\n
\r\n {t('chart_link_explore')} {t('chart_link_tool')} \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n
\r\n {t('figure_title_pm')} \r\n {(this.props.procurementMapAvailabilityData ? {this.props.procurementMapAvailabilityData.totalTenders} : null)}\r\n
\r\n
\r\n {t('tab_description_pm')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {t('tab_title_topexporters')} \r\n \r\n \r\n {t('tab_title_productsexported')} \r\n \r\n \r\n {t('tab_title_activetenders')} \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.props.tradeMapProductExportersData && this.state.teChartLoadTrigger ?
: null}\r\n \r\n
\r\n
\r\n \r\n
Trade Map - {t('tab_title_topexporters')} \r\n Market analysis \r\n \r\n
\r\n
\r\n {t('tab_description_trademap')}
\r\n \r\n
\r\n
\r\n {t('chart_link_explore')} {t('chart_link_tool')} \r\n \r\n
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n {this.props.tradeMapProductsExportedData && this.state.peChartLoadTrigger ?
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n {t('figure_title_pm')} \r\n {(this.props.procurementMapAvailabilityData ? {this.props.procurementMapAvailabilityData.countries[0].nbTenders} : null)}\r\n
\r\n
\r\n {t('tab_description_pm')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Hi {user.firstName}! \r\n
You're logged in with React & JWT!!
\r\n
Merchants from secure api end point: \r\n {users.loading &&
Loading users... }\r\n {users.error &&
ERROR: {users.error} }\r\n {users.items &&\r\n
\r\n {users.items.map((user, index) =>\r\n \r\n {user.firstName + ' ' + user.lastName}\r\n \r\n )}\r\n \r\n }\r\n \r\n\r\n\r\n
\r\n
\r\n
\r\n
{t('lbl_sponsors')} \r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n\r\n {/*
*/}\r\n
\r\n
© 2019 INTERNATIONAL TRADE CENTRE - {t('lbl_tc')} \r\n
Trade & Market Intelligence Section ● marketanalysis@intracen.org ● Tel.: +41 (0)22 730 05 46 ● Fax: +41 (0)22 730 05 77
\r\n
\r\n\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n )\r\n }\r\n\r\n }\r\n \r\n}\r\nexport default (AppFooter)","import React from 'react'\r\nimport {\r\n \r\n withRouter\r\n } from 'react-router-dom'\r\nimport { t } from '../services/i18n'\r\nimport { locales } from '../config/i18n'\r\nimport LocalizedLink from '../containers/LocalizedLink'\r\nimport Popup from \"reactjs-popup\";\r\nimport LoginPage from \"../containers/LoginPage\"\r\n\r\n// Because we pass our component to withRouter\r\n// our component will be passed `history` as a prop.\r\n\r\n//const AuthButton = withRouter(({ history }) => (\r\nexport const AuthButtonModal = withRouter(({ history }) => ( \r\n localStorage.getItem('user') ? (\r\n \r\n { \r\n localStorage.removeItem('user');\r\n history.push('/');\r\n }}>{t('logout')} \r\n \r\n \r\n ) : (\r\n {t('login')} } \r\n modal>\r\n {\r\n \r\n localStorage.removeItem('user');\r\n history.push('/');\r\n }}>{t('logout')} \r\n \r\n \r\n ) : (\r\n {\r\n window.previousLocation = history.entries[history.index - 1].pathname;\r\n }} \r\n >{t('login')} \r\n \r\n )\r\n ));\r\n\r\n\r\n ","import React , { Component } from 'react'\r\n\r\nimport { t } from '../services/i18n'\r\nimport { locales } from '../config/i18n'\r\nimport LocalizedLink from '../containers/LocalizedLink'\r\nimport {AuthButtonModal} from './AuthButtonModal'\r\nimport { AuthButton } from './AuthButton'\r\nimport { Link } from 'react-router-dom'\r\n\r\nimport { history } from '../helpers'\r\nimport ITClogo from '../img/ITC_Logo.png'\r\nimport $ from \"jquery\"\r\nimport i18next from 'i18next';\r\n\r\nclass AppHeader extends Component {\r\n\r\n componentDidMount() {\r\n \r\n $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {\r\n var $el = $( this );\r\n var $parent = $( this ).offsetParent( \".dropdown-menu\" );\r\n if ( !$( this ).next().hasClass( 'show' ) ) {\r\n $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( \"show\" );\r\n }\r\n var $subMenu = $( this ).next( \".dropdown-menu\" );\r\n $subMenu.toggleClass( 'show' );\r\n \r\n $( this ).parent( \"li\" ).toggleClass( 'show' );\r\n \r\n $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {\r\n $( '.dropdown-menu .show' ).removeClass( \"show\" );\r\n } );\r\n \r\n if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {\r\n $el.next().css( { \"top\": $el[0].offsetTop, \"left\": $parent.outerWidth() - 0 } );\r\n }\r\n \r\n return false;\r\n } ); \r\n \r\n }\r\n render() {\r\n if (window.location.pathname.match(\"/embedded/\")) {\r\n return null\r\n }\r\n else {\r\n return (\r\n\r\n \r\n\r\n \r\n
\r\n\r\n \r\n\r\n
\r\n\r\n
\r\n \r\n\r\n
MARKET ANALYSIS TOOLS PORTAL \r\n
{t('app_sub_title')} \r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n {t('menu_lbl_home')} \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n\r\n {t('countryprofile')} {t('learning')} {t('APItest')} \r\n\r\n\r\n \r\n \r\n {t('data_availability')} {t('news')} {t('sub_menu_about_join')} \r\n \r\n\r\n \r\n
\r\n\r\n\r\n\r\n\r\n
\r\n\r\n
\r\n
\r\n )\r\n }\r\n \r\n \r\n }\r\n}\r\nexport default (AppHeader)","import React from 'react';\r\nimport { Route, Redirect } from 'react-router-dom';\r\n\r\nexport const PrivateRoute = ({ component: Component, ...rest }) => (\r\n (\r\n localStorage.getItem('user')\r\n ? \r\n \r\n \r\n {/*alert.message &&\r\n
{alert.message}
\r\n */}\r\n\r\n {alert.message && this.notify(alert.message,alert.type)}\r\n
\r\n\r\n
\r\n \r\n \r\n {\r\n this.props.uiTranslationsLoaded &&\r\n \r\n
\r\n \r\n {/*\r\n {/* \r\n \r\n \r\n \r\n
\r\n ,\r\n document.getElementById('root')\r\n)\r\n","module.exports = __webpack_public_path__ + \"static/media/postcard-en.2fb5ca61.png\";","module.exports = __webpack_public_path__ + \"static/media/2024-Q1-Market_Analysis_Services_Update.5b05b03c.htm\";","module.exports = __webpack_public_path__ + \"static/media/2024-Q2-Market_Analysis_Services_Update.22afdadb.htm\";","module.exports = __webpack_public_path__ + \"static/media/2024-Q3-Market_Analysis_Services_Update.0fab7098.htm\";","module.exports = __webpack_public_path__ + \"static/media/2024-Q4-Market_Analysis_Services_Update.c45f072a.htm\";","module.exports = __webpack_public_path__ + \"static/media/ITC-TMI-2021-MarketAnalysisTools-PostCard-English.48e79122.pdf\";","module.exports = __webpack_public_path__ + \"static/media/embed-button-en.3fae765f.jpg\";","module.exports = __webpack_public_path__ + \"static/media/embed-button-fr.9a85f526.jpg\";","module.exports = __webpack_public_path__ + \"static/media/embed-button-es.14b93dbe.jpg\";","module.exports = __webpack_public_path__ + \"static/media/2020-MAT Survey Results.85616298.pdf\";","module.exports = __webpack_public_path__ + \"static/media/2019-MAT Survey Results.268fee61.pdf\";","module.exports = __webpack_public_path__ + \"static/media/2018-MAT Survey Results.3eb47069.pdf\";","module.exports = __webpack_public_path__ + \"static/media/2017-MAT Survey Results.c832801a.pdf\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2019.97fa8fb3.jpg\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2020.43226948.png\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2021.5a2bc987.png\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2022.21698680.png\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2023.42956254.png\";","module.exports = __webpack_public_path__ + \"static/media/WTP_2024.4f00cbeb.png\";","module.exports = __webpack_public_path__ + \"static/media/2021-Q1-Market_Analysis_Services_Update.6a4e4c42.htm\";","module.exports = __webpack_public_path__ + \"static/media/2021-Q2-Market_Analysis_Services_Update.bd2ff6e0.htm\";","module.exports = __webpack_public_path__ + \"static/media/2021-Q3-Market_Analysis_Services_Update.702eb267.htm\";","module.exports = __webpack_public_path__ + \"static/media/2021-Q4-Market_Analysis_Services_Update.bd20a0f9.htm\";","module.exports = __webpack_public_path__ + \"static/media/2022-Q1-Market_Analysis_Services_Update.136ac8c3.htm\";","module.exports = __webpack_public_path__ + \"static/media/2022-Q2-Market_Analysis_Services_Update.efa220e4.htm\";","module.exports = __webpack_public_path__ + \"static/media/2022-Q3-Market_Analysis_Services_Update.42445601.htm\";","module.exports = __webpack_public_path__ + \"static/media/2022-Q4-Market_Analysis_Services_Update.ddcb1289.htm\";","module.exports = __webpack_public_path__ + \"static/media/2023-Q1-Market_Analysis_Services_Update.413846f0.htm\";","module.exports = __webpack_public_path__ + \"static/media/2023-Q2-Market_Analysis_Services_Update.321094e9.htm\";","module.exports = __webpack_public_path__ + \"static/media/2023-Q3-Market_Analysis_Services_Update.7c8a7ac2.htm\";","module.exports = __webpack_public_path__ + \"static/media/2023-Q4-Market_Analysis_Services_Update.0ca4f218.htm\";","module.exports = __webpack_public_path__ + \"static/media/itc-2021-Comprehensive-Booklet.cb98c32b.png\";","module.exports = __webpack_public_path__ + \"static/media/ITC-TMI-2021-Comprehensive-Booklet.5f02a3c0.pdf\";","module.exports = __webpack_public_path__ + \"static/media/itc.0eacbd1c.png\";","module.exports = __webpack_public_path__ + \"static/media/eu.9c78e65d.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAAA5CAYAAAAVzJh1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTkzM0EzNzk1QzIyMTFFOEE5QjU5NzI1MTRCMEYxNzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTkzM0EzN0E1QzIyMTFFOEE5QjU5NzI1MTRCMEYxNzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OTMzQTM3NzVDMjIxMUU4QTlCNTk3MjUxNEIwRjE3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OTMzQTM3ODVDMjIxMUU4QTlCNTk3MjUxNEIwRjE3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvYMd9MAAAgnSURBVHja7J1dTFRHFMdnV9yKgghI2kIsGkj1ASM+QJO2oq2N0r4ID22EJsrqi1WThjRp0qTf7VON0Qe1PgmmKdq+sCRNq02siK0P0KYYfFALEWpAjQgiFHD9mPK/OmT27v2Ye3fu3SU7/2TDstw7e3fOb8+cOXPmEqCUEhkamHhIi7MyAkRpziooo5Hw73doedsNcnEkSlWXpjEMAKH5nwlyN/qYbPjllgIiXWFgIDB5AcTE8Q46uPYj+nhsUkGWqjDoQfACCIBwu+EoiXYPkBsbviIKiBSEwQwEmUAwEJgUECkIQ2PnqCUIMoDQg6CASFEYGkoXkSUhsdPcAGEGggIiRWCIPnhE8cDzNXmhQPubz3oChB0ICogkwwAIWi9cJXh4CYQoCEpJgoGBMDw2qT28AsIpCKHyYvJ8+yckmLNQZTwlKmCWjuZB4LU0ZyGpfflFEpo/TzMEjAsjw9giAjyj7y4LKBDmiGcwAwFK1EMcfClXeYS54hmsQEjUQzSvyyfbS7MCCgT5mp6epj09PWRwcGjmMRj399LSUrJ6dRkpLCyM67/R0VE6NTUVD0PkwlU6ODwudAFOgOBBgJBixqzADQiN3zTRhi2vkTUrlzsGo6uri3Z2djk6p7KyglRUVGjvNTQ0RFtbI74Zec+e3ZafEddz7lwH4T9TUVHRjPFLSGZmpvY7DN3b26dBkpeXR6qrN81+Huj06V9pb28vydA3/mrZMhL54wq5/+CR7YWyIWMGCAogng4ZcUDoQYBgXEwP7YDQgxD++BBtbjtLmiNnSXvTl9QpEOgMfEtYJ6EjzQDAsewcJtaxfHs41kww0sjICPcNLZl9f73Qdk/PpZjjrTzBqVOnY64fbdfX15Hc3FzDPoEHwDktLSdxXZQdyzyJYQA5fG+KigJh5yGMQGBCnsAKCDMQZoPR7EUAwpWHYOroOB/3TYdx6+q2GrbZ19dHDx06oj2H292xI2z53ocPH6E8PNXVm8nmzZsCVkZG+8xABw7sD9gdA9XW1pCqqnVC/QBvAiAA3c6dYYK2AJJh1Ld0cWag5pWV5Jn584Q6dHzyPrk3FZ39nQWVkY0FpiBo0euMkWFsGN0pCNp0dfw/siH8Kbl4pd918qmoqDDuNRjZTnDB+GbJ1oIFCwIwkJX0IAAwURAgxA179+7WvBoDG8CaTgEAxFuVJbYNAxiAg+P51wHElhfsgz0jIERAkAUExlcjQ4vEETCcF3ECXLfZ0BOJtFEeBHyjrTyNFXT19VvFk06F+dmBjWuXOwLhi29/pGMTztLEPBBOQJABhFuDiniPRGTUPgsWecEruBU8BA+dbXJg1bJ8QyCMQIDhPj/yg2YYt0A4BYEHQvRYGSopKfF0iss8FoI+9hqCP/0xiV4HD5NQpkgPhBkIzBjdl6+5BsINCBCmmgc+DHueg4ABMN56LQwVeB82ZAEKzDT0Q5WM92HgCS9hMyDsQGByAsS1m3dnV0UhnNN9pd8RCE1f7/UlGYVhxWuvwHsfNozpQWDxgswhyVE9A4DY9sZqWxCcAHH5+h36c2dfTIo7J2thAFPG8lUrUgqEZArZRaMxX0bbDCrHxS0slyDqyq2AAAhn/u6PSWA5ASJdQGBTPy+8Ahv6EDu4L4h1MKYDiIPf/WQKgj6jKQJEOoGAWYTXQx+mp0GvQWCG++y9dwJWIDgBIp1AgJCmFsmPJKqgHyDwhrMCQQSIdAPBTCKJMafK8BOE8amoLQh6INgi2FMgKH4SJU8U9AsEKDszZJnRFPEQymRPJLKy6QkMiYCAlcnJtr+oWQLLKRBKSYQhURCwRH2rZr9W2aSAcD/1i4dhVOpspbHxAxr0GgRWq4ASNwWE+6mfHgh4BtQ1yGifrYIGvYoR2IZZXgoI9zJKMqFUTYZYQivoCQjho3Qy8qfhsQoId1q/viruNaP1Cqd6Ukh7yRgGGSBMNHdYnqOAcC6jghfUV/JL3G6E+giW1Ar6DQIPxMOBYQWEA2H9QJ9samk5kZBX4ItlgskAASpo3kUyipfG5A3SAQij1LIT76AvVcN4j6JeN+0BJP56gskCIWt7lWECyW8gUO3sJwxGG1ycqKysLA4IVHc7AQIe4cSJk1qswHub4MDQbRr5rTNpIBzvnaC531+n/IZcP4EwSt7ICMxYp+uXnmXkB7ABhq+CYkAcO9ZE7WIIbCLat2+/9hlRhY3VShaLaPsmUEiKmgPUEfoNQsP5O9pz7NVEeT2qqtnfRRa1eOn3b1gJnYapWWtrW5zrRifX1m7RNruYbUgR8TgYj43AQudjdpBocQob8/kgEELlEvIS2AaAz8K23OFacBzeHx6BfTYknQDI7CYaOyC8BIHJDyCwlUxfWCoSuImUo+s3zMhu33p62KMZG4Y38nbIUwAQQGgGeMyOKjMg/ABBJhDY77HiuSW+L2rhG+YmQMRmFrceSKbittfpgfATBBlAINZAzEGUEoeBB6Lm9UqpILT9O0lrztwWOtcNEAoED2CAMMsoLiyQOn10c5cXUSAUCB7CEJMtlJhH8AIIBYIc2dYzYCla9KYadiBAMm4MxuchFAg+ewa7+yiIgpCIh4D093pATSVK6ZQZfYRBBAgnIMgEQikJMFgBkX9wG1n8frUrA+E/2GCG0T0SFT6n/+0iov7rTRJihpiDDW6skdVQ5RoECEZFDFGeFxL2DAqEFPAMeg8BKAqadkkxzFj0sTZkWHkINUSkIAxeyQoIBUKKDRNeKycUNBwyFAhpCIMREAqENB0m9ENG+81pInLHOCU5+l+AAQCfCl+oI55lqQAAAABJRU5ErkJggg==\""],"sourceRoot":""}
![](\"../img/MAT)
\r\n ![\"Download](\"../img/icon.svg\"){kind=icon}
\r\n\t\t\t\t\t\t\t\t\t\t\t\t![](\"../img/preloader.gif\")