feat: save chart period in store and local storage (ArkEcosystemArchi…

…ve#570)

* feat: save chart period in store and local storage

* test: chart wrapper

build/webpack.prod.conf.js

@@ -76,13 +76,14 @@ const createWebpackConfig = (baseUrl, network, networkConfig, routerMode) => {
           path.join(__dirname, './../src/**/*.js')
         ]),
         whitelist: [
-          'tooltip', 'tooltip-inner', 'tooltip-arrow',
+          'border-theme-page-background',
           'table-component__th--sort-asc', 'table-component__th--sort-desc',
-          'tr', 'td'
+          'tooltip', 'tooltip-inner', 'tooltip-arrow',
+          'tr', 'td',
+          'v-spinner'
         ],
         whitelistPatterns: [
-          /^tooltip-bg-/,
-          /^border-theme-page-background/
+          /^tooltip-bg-/
         ],
         extractors: [{
           extractor: TailwindExtractor,

networks/mainnet.json

@@ -48,6 +48,7 @@
       "name": "USD",
       "symbol": "$"
     },
-    "priceChart": true
+    "priceChart": true,
+    "priceChartPeriod": "day"
   }
 }

src/App.vue

@@ -81,6 +81,11 @@ export default {
       localStorage.getItem('priceChart') || network.defaults.priceChart
     )
 
+    this.$store.dispatch(
+      'ui/setPriceChartPeriod',
+      localStorage.getItem('priceChartPeriod') || network.defaults.priceChartPeriod
+    )
+
     this.updateI18n()
     this.updateLocale()
     this.updateCurrencyRate()

src/components/ChartWrapper.vue

@@ -4,21 +4,25 @@
       <p class="mb-4">
         {{ $t('The chart data could not be loaded') }}
       </p>
-      <button @click="renderChart" :disabled="isLoading" class="mt-4 pager-button items-center">
-        <span>{{ !isLoading ? $t('Reload chart') : $t('Loading...') }}</span>
+      <button @click="renderChart()" :disabled="isLoading" class="mt-4 pager-button items-center">
+        <span v-if="!isLoading">{{ $t('Reload chart') }}</span>
+        <loader v-else :data="null" />
       </button>
     </div>
 
     <div :key="componentKey" :class="{ 'blur': hasError }">
-
       <div class="flex justify-between items-center px-10 py-8">
         <h2 class="text-white m-0 text-xl font-normal">{{ $t("Price in") }} {{ currencyName }}</h2>
         <div>
-          <button @click="period('day')"  :class="{ 'chart-tab-active': type === 'day' }" class="chart-tab">{{ $t("Day") }}</button>
-          <button @click="period('week')"  :class="{ 'chart-tab-active': type === 'week' }" class="chart-tab">{{ $t("Week") }}</button>
-          <button @click="period('month')"  :class="{ 'chart-tab-active': type === 'month' }" class="chart-tab">{{ $t("Month") }}</button>
-          <button @click="period('quarter')"  :class="{ 'chart-tab-active': type === 'quarter' }" class="chart-tab">{{ $t("Quarter") }}</button>
-          <button @click="period('year')"  :class="{ 'chart-tab-active': type === 'year' }" class="chart-tab">{{ $t("Year") }}</button>
+          <template v-for="period in ['day', 'week', 'month', 'quarter', 'year']">
+            <button
+              @click="setPeriod(period)"
+              :class="{ 'chart-tab-active': currentPeriod === period }"
+              class="chart-tab"
+            >
+              {{ $t(capitalize(period)) }}
+            </button>
+          </template>
         </div>
       </div>
 
@@ -41,7 +45,6 @@ export default {
   data: () => ({
     error: null,
     isLoading: false,
-    type: 'day',
     componentKey: 0,
     labels: [],
     datasets: [],
@@ -139,6 +142,7 @@ export default {
   computed: {
     ...mapGetters('currency', { currencyName: 'name' }),
     ...mapGetters('network', ['token']),
+    ...mapGetters('ui', { currentPeriod: 'priceChartPeriod' }),
 
     chartData() {
       return {
@@ -165,30 +169,33 @@ export default {
 
   mounted() {
     window.addEventListener('resize', this.handleResize)
-    this.prepareComponent()
+    this.renderChart()
   },
 
-  methods: {
-    prepareComponent() {
+  watch: {
+    token() {
       this.renderChart()
-
-      this.watchCurrencyName()
-      this.watchNetworkToken()
     },
 
-    period(type) {
-      this.type = type
+    currencyName() {
+      this.renderChart()
+    }
+  },
+
+  methods: {
+    setPeriod(period) {
+      this.$store.dispatch('ui/setPriceChartPeriod', period)
 
       if (!!this.token) {
         this.renderChart()
       }
     },
 
-    async renderChart(type) {
+    async renderChart(delay = false) {
       this.isLoading = true
 
       try {
-        const response = await CryptoCompareService[this.type]()
+        const response = await CryptoCompareService[this.currentPeriod]()
         this.labels = response.labels
         this.datasets = response.datasets
 
@@ -203,14 +210,6 @@ export default {
       }
     },
 
-    watchCurrencyName() {
-      this.$store.watch((state) => state.currency.name, (value) => this.renderChart())
-    },
-
-    watchNetworkToken() {
-      this.$store.watch((state) => state.network.token, (value) => this.renderChart())
-    },
-
     handleResize() {
       // trick to re-mount the chart on resize
       // https://stackoverflow.com/questions/47459837/how-to-re-mount-a-component

src/components/header/ToggleChart.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    @click="$store.dispatch('ui/setPriceChart', !priceChart)"
+    @click="toggleChart()"
     :class="[
       priceChart ? 'text-chart-active' : 'text-chart-inactive',
       'px-2 py-4 hidden md:flex flex-none items-center border-b-2 margin-t-2 border-transparent hover:border-red hover:text-blue transition'
@@ -21,5 +21,11 @@ export default {
   computed: {
     ...mapGetters('ui', ['priceChart']),
   },
+
+  methods: {
+    toggleChart() {
+      this.$store.dispatch('ui/setPriceChart', !this.priceChart)
+    }
+  }
 }
 </script>

src/services/crypto-compare.js

@@ -32,16 +32,17 @@ class CryptoCompareService {
 
   async sendRequest(type, limit, dateTimeFormat) {
     const date = Math.round(new Date().getTime() / 1000)
+    const token = store.getters['network/token']
 
     let targetCurrency = 'USD'
-    if (store.getters['currency/name'] !== store.getters['network/token']) {
+    if (store.getters['currency/name'] !== token) {
       targetCurrency = store.getters['currency/name']
     }
 
     const response = await axios
       .get(`https://min-api.cryptocompare.com/data/histo${type}`, {
         params: {
-          fsym: store.getters['network/token'],
+          fsym: token,
           tsym: targetCurrency,
           toTs: date,
           limit

src/store/modules/ui.js

@@ -7,6 +7,7 @@ export default {
     locale: navigator.language || 'en-gb',
     nightMode: false,
     priceChart: true,
+    priceChartPeriod: 'day',
     headerType: null,
     menuVisible: false
   },
@@ -29,6 +30,9 @@ export default {
     [types.SET_UI_PRICE_CHART](state, payload) {
       state.priceChart = payload.value
     },
+    [types.SET_UI_PRICE_CHART_PERIOD](state, payload) {
+      state.priceChartPeriod = payload.value
+    },
   },
   actions: {
     setLanguage: ({ commit }, value) => {
@@ -82,10 +86,16 @@ export default {
     setPriceChart: ({ commit }, value) => {
       localStorage.setItem('priceChart', value)
 
-      value = JSON.parse(value)
-
       commit({
         type: types.SET_UI_PRICE_CHART,
+        value: JSON.parse(value),
+      })
+    },
+    setPriceChartPeriod: ({ commit }, value) => {
+      localStorage.setItem('priceChartPeriod', value)
+
+      commit({
+        type: types.SET_UI_PRICE_CHART_PERIOD,
         value,
       })
     },
@@ -95,6 +105,7 @@ export default {
     locale: state => state.locale,
     nightMode: state => state.nightMode,
     priceChart: state => state.priceChart,
+    priceChartPeriod: state => state.priceChartPeriod,
     headerType: state => state.headerType,
     menuVisible: state => state.menuVisible,
   },

src/store/mutation-types.js

@@ -11,6 +11,7 @@ export const SET_UI_NIGHT_MODE = 'SET_UI_NIGHT_MODE'
 export const SET_UI_HEADER_TYPE = 'SET_UI_HEADER_TYPE'
 export const SET_UI_MENU_VISIBLE = 'SET_UI_MENU_VISIBLE'
 export const SET_UI_PRICE_CHART = 'SET_UI_PRICE_CHART'
+export const SET_UI_PRICE_CHART_PERIOD = 'SET_UI_PRICE_CHART_PERIOD'
 
 // Delegates.js
 export const SET_DELEGATES = 'SET_DELEGATES'