Improved robustness of charting

.gitignore

@@ -8,3 +8,4 @@ yarn.lock
 yarn-error.log
 *.psd
 env/
+.idea/

app/static/assets/myartiqox.js

@@ -1,27 +1,62 @@
-var coingeckocharts = document.getElementsByClassName("coingecko-line-chart");
+Array.from(document.getElementsByClassName('coingecko-line-chart')).forEach(chart => {
+    const coinName = chart.dataset.coin;
+    const vs_currency = coinName === 'bitcoin' ? 'usd' : "btc";
 
-for (var ii = 0; ii < coingeckocharts.length; ii++) {
-let coinname = coingeckocharts[ii]["id"];
-var vs_currency = "btc";
-if (coinname == "bitcoin") {vs_currency = "usd"; }
-const fetchPromise = fetch('https://api.coingecko.com/api/v3/coins/'+coinname+'/market_chart?vs_currency='+vs_currency+'&days=7');
-const datadiv = document.getElementById("div-data-for-coingecko-line-chart-"+coinname);
-fetchPromise.then(response => {
-  return response.json();
-}).then(market_charts_data => {
-  var chart_styles = [";rgba(237, 231, 246, 0.5);deep-purple-500;deep-purple-700;2", ";rgba(232, 245, 233, 0.5);blue-500;blue-700;2",";rgba(233, 241, 243, 0.5);red-500;red-700;2"];
-  var styles_index = 0;
-  var my_div_with_data_text = "";
-  for (var key in market_charts_data) {
-    var array_with_ts = [];
-    var array_with_data = [];
-    my_div_with_data_text += "<input type='text' class='chart_serie_data' id='"+key+chart_styles[styles_index]+"' value='";
-    for (var newindex = 0; newindex < market_charts_data[key].length; ++newindex) {var tempts = new Date(parseInt(market_charts_data[key][newindex][0]));array_with_ts.push(tempts.toISOString());array_with_data.push(market_charts_data[key][newindex][1]);}
-    my_div_with_data_text += array_with_data.toString()+"'>";
+    fetch(`https://api.coingecko.com/api/v3/coins/${coinName}/market_chart?vs_currency=${vs_currency}&days=7`)
+        .then(response => response.json())
+        .then(({prices, total_volumes, market_caps}) => {
+            const data = {
+                datasets: [
+                    {
+                        label: 'Prices',
+                        data: prices.map(x => x[1]),
+                        backgroundColor: ['rgba(233, 241, 243, 0.5)'],
+                        borderColor: ['rgb(0, 0, 255, 0.5)'],
+                        borderWidth: 2
+                    },
+                    {
+                        label: 'Total Volumes',
+                        data: total_volumes.map(x => x[1]),
+                        backgroundColor: ['rgba(233, 241, 243, 0.5)'],
+                        borderColor: ['rgb(255, 0, 0, 0.5)'],
+                        borderWidth: 2
+                    },
+                    {
+                        label: 'Market caps',
+                        data: market_caps.map(x => x[1]),
+                        backgroundColor: ['rgba(233, 241, 243, 0.5)'],
+                        borderColor: ['rgb(0, 255, 0, 0.5)'],
+                        borderWidth: 2
+                    },
+                ],
+                labels: prices.map(x => x[0]) // assume all three data buckets have the same time-values; just pick those from the 1st one
+            };
 
-    styles_index++;
-  }
-  my_div_with_data_text += "<input type='text' class='chart_labels' id='chart_labels' value='"+array_with_ts.toString()+"'>";
-  datadiv.innerHTML = my_div_with_data_text;
+            const options = {
+                scales: {
+                    xAxes: [{
+                        type: 'time',
+                        time: {
+                            displayFormats: {
+                                hour: 'DDD MMM - h a'
+                            }
+                        }
+                    }],
+                    yAxes: [
+                        {
+                            ticks: {
+                                beginAtZero: true
+                            }
+                        }
+                    ]
+                }
+            };
+
+            const ctx = document.getElementById(`coingecko-line-chart-${coinName}`).getContext('2d');
+            new Chart(ctx, {
+                type: 'line',
+                data,
+                options,
+            });
+        });
 });
-}

app/templates/pages/index.html

@@ -32,8 +32,7 @@ <h5 class="modal-title" id="exampleModalLabel2">{{ coin }}</h5>
                           <h6 class="lh-1">{{ coin }}</h6>
                         </div>
                         <div class="layer w-100 p-20">
-                          <canvas height="420" class="line-chart" id="coingecko-line-chart-{{ coin }}"><div style="display: none;" class="div-data-for-coingecko-line-chart" id="div-data-for-coingecko-line-chart-{{ coin }}"></div><div style="display: none;" class="coingecko-line-chart" id="{{ coin }}"></div>
-                          </canvas>
+                            <canvas height="420" class="line-chart coingecko-line-chart" id="coingecko-line-chart-{{ coin }}" data-coin="{{ coin }}"></canvas>
                         </div>
 
                       </div>