Adding charting feature

docs/css/components.js

@@ -1544,6 +1544,9 @@ class ThemeToggle extends HTMLElement {
     static get observedAttributes() {
         return ['checked'];
     }
+    get theme() {
+        return this.hasTheme;
+    }
 
     daylight() {
         this.hasTheme = 'light';

docs/css/main.css

@@ -457,8 +457,8 @@ details[open] > summary .icon {
 
 strip-select {
   --gap: 0;
-  background-color: var(--accent-color--light);
+  background-color: rgba(var(--text-color), 0.06);
-  border-radius: 0.3rem;
+  border-radius: 0.2rem;
 }
 
 strip-option {
@@ -469,10 +469,10 @@ strip-option {
   --active-option-background-color: var(--accent-color);
 }
 strip-option:first-of-type {
-  --border-radius: 0.3rem 0 0 0.3rem;
+  --border-radius: 0.2rem 0 0 0.2rem;
 }
 strip-option:last-of-type {
-  --border-radius: 0 0.3rem 0.3rem 0;
+  --border-radius: 0 0.2rem 0.2rem 0;
 }
 
 sm-select,
@@ -1049,9 +1049,9 @@ sm-checkbox {
 
   #home {
     display: grid;
-    grid-template-columns: 12rem 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas: "header header" "nav .";
+    grid-template-areas: "header header" "nav pages";
   }
 
   #main_header {
@@ -1084,13 +1084,33 @@ sm-checkbox {
     background-color: rgba(var(--text-color), 0.06);
   }
 
+  #pages_container {
+    grid-area: pages;
+  }
+
+  .is-signed-in #exchange {
+    display: flex;
+    width: 100%;
+  }
   .is-signed-in #exchange_wrapper {
     display: grid;
+    width: 100%;
+    height: 100%;
     gap: 1.5rem;
-    grid-template-columns: 16rem 1fr;
+    grid-template-columns: 16rem minmax(0, 1fr);
     align-items: flex-start;
   }
 
+  #price_history_chart {
+    overflow: hidden;
+    border-radius: 0.5rem;
+    height: 20rem;
+  }
+
+  #asset_list_wrapper {
+    grid-row: 1/3;
+  }
+
   .listed-asset {
     padding: 1rem;
   }
@@ -1107,10 +1127,22 @@ sm-checkbox {
     background-color: var(--accent-color);
   }
 }
+@media screen and (max-width: 64rem) and (min-width: 40rem) {
+  .main_navbar__item .icon {
+    margin-right: 0;
+  }
+  .main_navbar__item .item__title {
+    display: none;
+  }
+}
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
+
+  .is-signed-in #exchange_wrapper {
+    grid-template-columns: 16rem minmax(0, 1fr) 20rem;
+  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {

docs/css/main.scss

@@ -443,8 +443,8 @@ details {
 }
 strip-select {
   --gap: 0;
-  background-color: var(--accent-color--light);
+  background-color: rgba(var(--text-color), 0.06);
-  border-radius: 0.3rem;
+  border-radius: 0.2rem;
 }
 strip-option {
   font-weight: 500;
@@ -453,10 +453,10 @@ strip-option {
   --active-option-color: rgba(var(--background-color), 1);
   --active-option-background-color: var(--accent-color);
   &:first-of-type {
-    --border-radius: 0.3rem 0 0 0.3rem;
+    --border-radius: 0.2rem 0 0 0.2rem;
   }
   &:last-of-type {
-    --border-radius: 0 0.3rem 0.3rem 0;
+    --border-radius: 0 0.2rem 0.2rem 0;
   }
 }
 sm-select,
@@ -973,9 +973,9 @@ sm-checkbox {
   }
   #home {
     display: grid;
-    grid-template-columns: 12rem 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas: "header header" "nav .";
+    grid-template-areas: "header header" "nav pages";
   }
   #main_header {
     grid-area: header;
@@ -1004,14 +1004,32 @@ sm-checkbox {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
+  #pages_container {
+    grid-area: pages;
+  }
   .is-signed-in {
+    #exchange {
+      display: flex;
+      width: 100%;
+    }
     #exchange_wrapper {
       display: grid;
+      width: 100%;
+      height: 100%;
       gap: 1.5rem;
-      grid-template-columns: 16rem 1fr;
+      grid-template-columns: 16rem minmax(0, 1fr);
       align-items: flex-start;
     }
   }
+  #price_history_chart {
+    overflow: hidden;
+    border-radius: 0.5rem;
+    height: 20rem;
+    // grid-column: 1/-1;
+  }
+  #asset_list_wrapper {
+    grid-row: 1/3;
+  }
   .listed-asset {
     padding: 1rem;
     &--active {
@@ -1028,12 +1046,25 @@ sm-checkbox {
     }
   }
 }
-@media screen and (max-width: 64rem) {
+@media screen and (max-width: 64rem) and (min-width: 40rem) {
+  .main_navbar__item {
+    .icon {
+      margin-right: 0;
+    }
+    .item__title {
+      display: none;
+    }
+  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
   }
+  .is-signed-in {
+    #exchange_wrapper {
+      grid-template-columns: 16rem minmax(0, 1fr) 20rem;
+    }
+  }
 }
 @media screen and (min-width: 120rem) {
   .page-layout {

docs/index.html

@@ -18,6 +18,7 @@
     <script src="scripts/floBlockchainAPI.js"></script>
     <script src="scripts/floTokenAPI.js"></script>
     <script src="scripts/floExchangeAPI.js"></script>
+    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
     <script>console.debug(floExchangeAPI);</script>
 </head>
 
@@ -54,7 +55,7 @@
                     <h4>RanchiMall Market</h4>
                 </div>
             </div>
-            <theme-toggle></theme-toggle>
+            <theme-toggle id="theme_toggle"></theme-toggle>
             <button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
@@ -93,10 +94,36 @@
                     <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
                 </sm-form>
                 <section id="exchange_wrapper">
-                    <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
+                    <div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
                         <h4>Tokens</h4>
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
+                    <div id="price_chart_wrapper" class="flex direction-column gap-0-5">
+                        <div class="flex align-center space-between" style="z-index: 5;">
+                            <h4 id="chart_asset"></h4>
+                            <div class="flex align-center justify-right gap-0-5">
+                                <sm-select>
+                                    <sm-option value="1">1</sm-option>
+                                    <sm-option value="2">2</sm-option>
+                                    <sm-option value="3">3</sm-option>
+                                    <sm-option value="4">4</sm-option>
+                                    <sm-option value="5">5</sm-option>
+                                    <sm-option value="6">6</sm-option>
+                                    <sm-option value="7">7</sm-option>
+                                </sm-select>
+                                <strip-select>
+                                    <strip-option value="day" selected>D</strip-option>
+                                    <strip-option value="week">W</strip-option>
+                                    <strip-option value="month">M</strip-option>
+                                    <strip-option value="year">Y</strip-option>
+                                    <strip-option value="all-time">ALL</strip-option>
+                                </strip-select>
+                            </div>
+                        </div>
+                        <div class="flex" style="position: relative;">
+                            <div id="price_history_chart"></div>
+                        </div>
+                    </div>
                     <sm-form id="trade_form" class="user-content hide hide-on-mobile">
                         <div class="flex space-between align-center">
                             <a href="#/exchange" class="button icon-only hide-on-desktop">
@@ -853,7 +880,48 @@
             lastPage: '',
             params: {}
         }
+        function getChartTheme() {
+            const theme = getRef('theme_toggle').value
+            const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
+            const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff'
+            return {
+                chart: {
+                    layout: {
+                        backgroundColor: `rgba(${textColor}, 0.01)`,
+                        lineColor: `rgba(${textColor}, 0.1)`,
+                        textColor: `rgba(${textColor}, 0.8)`,
+                    },
+                    watermark: {
+                        color: 'rgba(0, 0, 0, 0)',
+                    },
+                    crosshair: {
+                        color: '#758696',
+                    },
+                    grid: {
+                        vertLines: {
+                            color: '#2B2B43',
+                        },
+                        horzLines: {
+                            color: '#363C4E',
+                        },
+                    },
+                },
+                series: {
+                    color: accentColor
+                }
+            }
+        }
+        function setChartTheme(e) {
+            const themeToApply = getChartTheme()
+            chart.applyOptions(themeToApply.chart);
+            lineSeries.applyOptions(themeToApply.series);
+        }
 
+        document.addEventListener('themechange', setChartTheme)
+
+
+        let chart
+        let lineSeries
         async function showPage(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
@@ -896,6 +964,7 @@
                         if (getRef('listed_assets').querySelector('.listed-asset--active'))
                             getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
                         getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
+                        getRef('chart_asset').textContent = `${params.asset}/INR`
                         getRef('get_price').value = parseFloat(floGlobals.exchangeRates[params.asset].toFixed(4))
                         getRef('traded_asset').textContent = `Trade ${params.asset}`
                         getRef('trade_button').textContent = `${tradeType} ${params.asset}`
@@ -909,12 +978,37 @@
                         })
                     }
                     if (params.hasOwnProperty('asset') && params.asset !== '') {
-                        getRef('exchange_wrapper').children[0].classList.add('hide-on-mobile')
+                        getRef('asset_list_wrapper').classList.add('hide-on-mobile')
-                        getRef('exchange_wrapper').children[1].classList.remove('hide-on-mobile')
+                        getRef('trade_form').classList.remove('hide-on-mobile')
+
+                        if (firstLoad) {
+                            chart = LightweightCharts.createChart(getRef('price_history_chart'), {
+                                width: 800, height: 600,
+                                timeScale: {
+                                    timeVisible: true,
+                                },
+                            });
+                            lineSeries = chart.addLineSeries();
+                            setChartTheme()
+                        }
+                        floExchangeAPI.getRateHistory(params.asset, '2 weeks').then(data => {
+                            data = data.map(({ time, rate }) => {
+                                return {
+                                    time: new Date(time).getTime() / 1000,
+                                    value: rate
+                                }
+                            })
+                            lineSeries.setData(data);
+                            new ResizeObserver(entries => {
+                                const { width, height } = entries[0].contentRect;
+                                chart.applyOptions({ width, height });
+                            }).observe(getRef('price_history_chart').parentNode);
+                        })
                     } else {
-                        getRef('exchange_wrapper').children[1].classList.add('hide-on-mobile')
+                        getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
-                        getRef('exchange_wrapper').children[0].classList.remove('hide-on-mobile')
+                        getRef('trade_form').classList.add('hide-on-mobile')
                     }
+
                     break;
                 case 'my_orders':
                     break;