templates/iai_default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}IAI{% endblock %}
  5. {% block body %}
  7. {# dump(response) #}
  9.     {#<div class="tutorial">
  10.         <a href="javascript:void(0);" id="startTutBtn">Start Tutorial</a>
  11.     </div>#}
  13.     <div class="container-fluid">
  14.         <form name="form" method="post" id="filterForm">
  15.         <div class="row">
  16.             <div class="col-12">
  17.                 <h1 id="title"><span class="primary-title">ALUMINIUM SECTOR TRADE FLOWS</span></h1>
  19.                     <h2 id="sectitle"><span class="secondary-title">{{ title }}</span></h2>
  20.             </div>
  21.             <div class="col-9">
  22.                 <canvas id="canvas"></canvas>
  23.                 
  24.                 <div class="products row fboxProducts" style="border-width: 1px; border-style: solid; border-color: #495057; margin-left: 12px; padding: 12px; border-radius: 15px;">
  25.                     <div class="col-2"><span class="contextTitle">Products</span>
  26.                         <a href="javascript:;" class="selectall">Select All</a>
  27.                         <a href="javascript:;" class="deselectall">Deselect All</a>
  28.                     </div>
  29.                     <div id="legend-container" class="col-8">
  30.                         {#
  31.                         <a href="javascript:;" data-name="Alumina" data-id="7601" class="picon alumina activated"></a>
  32.                         <a href="javascript:" data-name="Aluminium" data-id="7602" class="picon aluminium activated active"></a>
  33.                         <a href="javascript:" data-name="Bauxite" data-id="7603" class="picon bauxite activated"></a>
  34.                         <a href="javascript:" data-name="Extrusion" class="picon extrusion activated"></a>
  35.                         <a href="javascript:" data-name="Foil" class="picon foil3 activated"></a>
  36.                         <a href="javascript:" data-name="Rolled" class="picon rolled_products activated"></a>
  37.                         <a href="javascript:" data-name="Scrap" class="picon scrap activated"></a>
  38.                         #}
  39.                     </div>
  40.                     <div class="col-2">
  41.                         <span class="desc_right">Please select the product icon/s that you would like to see data for. Greyed out product icon/s do not have a data set available.</span>
  42.                     </div>
  43.                 </div>
  44.                 <br /><br />
  45.                 <span style="font-size: 12px;">Trade Flow Visualization provided by the <a href="https://www.international-aluminium.org" target="_blank">International Aluminium Institute</a> | Data source: <a href="https://comtrade.un.org/" target="_blank">UNComtrade and International Trade Centre</a>.</span>
  46.             </div>
  47.             <div class="col-3 contextCol">                
  48.                 <div class="fboxTradeVisu">
  49.                     <span class="contextTitle">Trade Visualization  
  50.                         <a href="#" id="tradeTglr" class="qicon popover-toggle" title="Trade Visualization"><i class="bi bi-question-circle-fill"></i></a>
  51.                         <div id="tradeContent" style="display: none">
  52.                             This visualisation aims to increase transparency of aluminium specific trade between countries. The data is shown in kilograms for bauxite, alumina, aluminium, scrap, rolled products, extrusions and foil. Annual data is based on <a class="popoverlink" href="https://comtrade.un.org/" target="_blank">UN Comtrade Database</a> and monthly data on <a href="https://www.trademap.org" class="popoverlink" target="_blank">International Trade Centre</a>. 
  53.                         </div>
  54.                     </span>
  55.                     <div class="filterbox tradeVisu">
  56.                         <div class="row iconRow">
  57.                             {#<div class="col-2">
  58.                                 <a href="" class="chartIcon">
  59.                                     <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-bar-chart-steps" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  60.                                     <path fill-rule="evenodd" d="M.5 0a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 .5 0z"/>
  61.                                     <rect width="5" height="2" x="2" y="1" rx=".5"/>
  62.                                     <rect width="8" height="2" x="4" y="5" rx=".5"/>
  63.                                     <path d="M6 9.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-1zm2 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-1z"/>
  64.                                     </svg>                
  65.                                 </a>
  66.                             </div>#}
  67.                             <div class="col-2">
  68.                                 <a href="" class="chartIcon active">
  69.                                     <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-bar-chart-line" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  70.                                         <path fill-rule="evenodd" d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
  71.                                     </svg>                        
  72.                                 </a>
  73.                             </div>
  74.                             <!--div class="col-4">
  75.                                 Treemap                    
  76.                             </div-->
  78.                         </div>
  79.                     </div>
  80.                 </div>
  81.                 <div class="fboxImportExport">
  82.                     <span class="contextTitle">Import/Export</span>
  83.                     <div class="filterbox filterbox-noborder imexport">
  84.                         <div data-toggle="buttons">
  85.                             <label class="btn btn-secondary">
  86.                                 {{ form_widget(filterForm.export) }}
  87.                             </label>
  88.                             <label class="btn btn-secondary">
  89.                                 {{ form_widget(filterForm.import) }}
  90.                             </label>
  91.                             <label class="btn btn-secondary">
  92.                                 {{ form_widget(filterForm.nettrade) }}
  93.                             </label>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.                 <div class="fboxInterval">
  98.                     <div class="filterbox filterbox-noborder interval">
  99.                         <span class="contextTitle">Interval</span>
  100.                         <div class="filterbox monthanu">
  101.                             {{ form_widget(filterForm.monthly_annual, { 'disabled': 'disabled' }) }}
  102.                         </div>        
  103.                     </div>    
  104.                 </div>
  105.                 
  106.                 <div class="filterbox filterbox-noborder country fboxCountry">
  107.                     <span class="contextTitle">Country 
  108.                         <a href="#" id="countryTglr" class="qicon popover-toggle" title="Country"><i class="bi bi-question-circle-fill"></i></a>
  109.                         <div id="countryContent" style="display: none">
  110.                             To view, please follow these steps: 
  111.                             <ol>
  112.                                 <li>chose the country you would like to visualise the trade for;</li>
  113.                                 <li>chose the trading partner; and</li>
  114.                                 <li>chose whether you would like the data reported by the country you are visualising or its trading partner. </li>
  115.                             </ol>
  116.                         </div>
  117.                     </span>
  118.                     <div class="filterbox country">
  119.                         <div class="selectfilterbox">
  120.                             {{ form_label(filterForm.reporter) }}
  121.                             {{ form_widget(filterForm.reporter) }}
  122.                         </div>
  124.                         <div class="selectfilterbox">
  125.                             {{ form_label(filterForm.tradingpartner) }}
  126.                             {{ form_widget(filterForm.tradingpartner) }}
  127.                         </div>
  129.                         <div class="selectfilterbox">
  130.                             {{ form_label(filterForm.reportingcountry) }}
  131.                             {{ form_widget(filterForm.reportingcountry) }}
  132.                         </div>
  134.                     </div>
  135.                 </div>
  137.                 <div class="filterbox filterbox-noborder period fboxPeriod">
  138.                     <span class="contextTitle">Period 
  139.                         <a href="#" id="periodTglr" class="qicon popover-toggle" title="Country"><i class="bi bi-question-circle-fill"></i></a>
  140.                         <div id="periodContent" style="display: none">
  141.                             Chose a period for the data.
  142.                         </div>
  143.                     </span>
  144.                     <div class="filterbox period">
  145.                         <div class="selectfilterbox">
  146.                             <div class="input-group input-daterange">
  147.                                 {{ form_widget(filterForm.periodFrom ) }} {# { 'disabled': 'disabled' } #}
  148.                                 <span class="input-group-addon">to</span>
  149.                                 {{ form_widget(filterForm.periodTo ) }} {# { 'disabled': 'disabled' } #}
  150.                             </div>
  151.                         </div>
  153.                         {#<div class="selectfilterbox disabled">
  154.                             {{ form_label(filterForm.to) }}
  155.                             {{ form_widget(filterForm.to, { 'disabled': 'disabled' }) }}
  156.                         </div>#}
  158.                     </div>
  159.                 </div>
  161.                 <div class="filterbox filterbox-noborder country fboxDownload">
  162.                     <span class="contextTitle">Data Download 
  163.                         <a href="#" id="downloadTglr" class="qicon popover-toggle" title="Data Download"><i class="bi bi-question-circle-fill"></i></a>
  164.                         <div id="downloadContent" style="display: none">
  165.                             Download the filtered data as CSV to use it in Excel.
  166.                         </div>
  167.                     </span>
  168.                     <div class="filterbox download">
  169.                         {{ form_widget(filterForm.download, { 'attr': {'class': 'btn-secondary'} }) }}
  170.                     </div>
  171.                 </div>
  172.             </div>
  174.         </div>
  175.         </form>
  176.     </div>
  177.     <div style="clear: both;"></div>
  178.     <style>
  179.         canvas {
  180.             -moz-user-select: none;
  181.             -webkit-user-select: none;
  182.             -ms-user-select: none;
  183.         }
  184.         {% if isFirstRequest %}
  185.             canvas, .products.row {
  186.                 opacity: 0.4;
  187.             }
  188.         {% endif %}
  190.     </style>
  191.     {#<script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/Chart_3.4.1.js"></script>#}
  192.     {#<script src="/members/trade/public/js/Chart_2.9.4.js"></script>#}
  193.     {#<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>#}
  194.     {#<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.0/dist/chart.min.js"></script>#}
  195.     {#<script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/d3.min.js"></script>#}
  196.     
  197.     
  199. {# dump(filterForm.vars.value.import ) #}
  200.     <script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/data.js"></script>
  201.     {#<script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/data_test.js"></script>#}
  202.     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  203.     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  205.     <script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/chart.js-3.9.0/dist/chart.js"></script>
  206.     <script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>
  207.     <script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/moment-with-locales.js"></script>
  208.     
  210.     <script src="{{ app.request.getSchemeAndHttpHost() }}/members/trade/public/js/app.js"></script>
  213.     {% block javascript %}
  215.     <script>
  216.         let filters = JSON.parse('{{ defaults | json_encode | raw }}');
  217.         let isFirstRequest = {{ isFirstRequest }};
  219.         let myOptions = [];
  220.         myOptions['title'] = "";
  222.         {% if isFirstRequest == 0 %}
  223.             var firstRequest = 0;
  224.             {#  var barChartData = {{ response|raw }};  #}
  225.             var reportingCountry = "{{ reportingCountry }}";
  226.             var reporter = "{{ reporter }}";
  227.             var tradingpartner = "{{ tradingpartner }}";
  228.         {% else %}
  229.         var firstRequest = 1;
  230.             var reportingCountry = "";
  231.             var reporter = "{{ reporter }}";
  232.             var tradingpartner = "{{ tradingpartner }}";
  233.         {% endif %}
  235.         var barChartData = {{ data|raw }};
  237.     </script>
  238.     {% endblock %}
  239. {% endblock %}