feat: setting for enabling/disabling the market chart on the dashboar…

…d and better price format (#750)

* feat: setting for enabling/disabling the market chart on the dashboard

* improvement: use the most appropriate number of fraction digits to display the price on the market chart

* fix: only show when the market is enabled

src/renderer/components/App/AppSidemenu/AppSidemenuSettings.vue

@@ -81,6 +81,25 @@
         </div>
       </MenuOptionsItem>
 
+      <MenuOptionsItem
+        v-if="isMarketEnabled"
+        :title="$t('APP_SIDEMENU.SETTINGS.IS_MARKET_CHART_ENABLED')"
+        @click="toggleSelect('show-market-chart')"
+      >
+        <div
+          slot="controls"
+          class="pointer-events-none"
+        >
+          <ButtonSwitch
+            ref="show-market-chart"
+            :is-active="sessionIsMarketChartEnabled"
+            class="theme-dark"
+            background-color="#414767"
+            @change="setIsMarketChartEnabled"
+          />
+        </div>
+      </MenuOptionsItem>
+
       <MenuOptionsItem
         :title="$t('APP_SIDEMENU.SETTINGS.RESET_DATA.TITLE')"
         class="text-grey-light"
@@ -139,6 +158,9 @@ export default {
       // You can find the possible options here: https://nodejs.org/api/os.html#os_os_platform
       return os.platform() !== 'darwin' && os.platform() !== 'win32'
     },
+    isMarketEnabled () {
+      return this.session_network && this.session_network.market && this.session_network.market.enabled
+    },
     currencies () {
       return this.$store.getters['market/currencies']
     },
@@ -154,18 +176,30 @@ export default {
       },
       set (currency) {
         this.$store.dispatch('session/setCurrency', currency)
-        var profile = clone(this.session_profile)
+        const profile = clone(this.session_profile)
         profile.currency = currency
         this.$store.dispatch('profile/update', profile)
       }
     },
+    sessionIsMarketChartEnabled: {
+      get () {
+        return this.$store.getters['session/isMarketChartEnabled']
+      },
+      set (isMarketChartEnabled) {
+        this.$store.dispatch('session/setIsMarketChartEnabled', isMarketChartEnabled)
+        this.$store.dispatch('profile/update', {
+          ...this.session_profile,
+          isMarketChartEnabled
+        })
+      }
+    },
     sessionTheme: {
       get () {
         return this.$store.getters['session/theme']
       },
       set (theme) {
         this.$store.dispatch('session/setTheme', theme)
-        var profile = clone(this.session_profile)
+        const profile = clone(this.session_profile)
         profile.theme = theme
         this.$store.dispatch('profile/update', profile)
       }
@@ -184,7 +218,7 @@ export default {
       },
       set (update) {
         this.$store.dispatch('session/setBackgroundUpdateLedger', update)
-        var profile = clone(this.session_profile)
+        const profile = clone(this.session_profile)
         profile.backgroundUpdateLedger = update
         this.$store.dispatch('profile/update', profile)
       }
@@ -208,6 +242,10 @@ export default {
       this.sessionBackgroundUpdateLedger = update
     },
 
+    setIsMarketChartEnabled (isEnabled) {
+      this.sessionIsMarketChartEnabled = isEnabled
+    },
+
     toggleSelect (name) {
       this.$refs[name].toggle()
     },

src/renderer/components/MarketChart/MarketChart.vue

@@ -164,7 +164,18 @@ export default {
                 callback: (value, index) => {
                   if (index % 2 === 0) return
 
-                  return this.currency_format(value / scaleCorrection, { currency: this.currency })
+                  const formatConfig = { currency: this.currency }
+                  const price = value / scaleCorrection
+
+                  if (price < 1e-4) {
+                    formatConfig.maximumFractionDigits = 8
+                  } else if (price < 1e-2) {
+                    formatConfig.maximumFractionDigits = 5
+                  } else {
+                    formatConfig.maximumFractionDigits = 3
+                  }
+
+                  return this.currency_format(price, formatConfig)
                 }
               }
             }

src/renderer/i18n/locales/en-US.js

@@ -181,15 +181,16 @@ export default {
     CURRENT_PROFILE: 'Your current profile is "{profileName}"',
     DASHBOARD: 'Dashboard',
     NETWORK: 'Network',
-    NETWORK_OVERVIEW: 'Network Overview',
+    NETWORK_OVERVIEW: 'Network overview',
     SETTINGS: {
       CURRENCY: 'Currency',
       DARK_MODE: 'Dark mode',
       SCREENSHOT_PROTECTION: 'Screenshot protection',
-      BACKGROUND_UPDATE_LEDGER: 'Update Ledger in Background',
+      BACKGROUND_UPDATE_LEDGER: 'Update Ledger in background',
+      IS_MARKET_CHART_ENABLED: 'Chart on the dashboard',
       TITLE: 'Current settings',
       RESET_DATA: {
-        TITLE: 'Reset Data',
+        TITLE: 'Reset data',
         QUESTION: 'Are you sure you want to wipe your data?',
         NOTE: 'All your data, including profiles, wallets, networks and contacts will be removed from the app and reset to default. The data, such as transactions, that are on the blockchain cannot be removed.'
       }

src/renderer/models/profile.js

@@ -21,13 +21,17 @@ export default new BaseModel({
       minLength: 3,
       maxLength: 3
     },
+    isMarketChartEnabled: {
+      type: 'boolean',
+      format: data => data.isMarketChartEnabled !== undefined ? data.isMarketChartEnabled : true
+    },
     language: {
       type: 'string',
       minLength: 1
     },
     bip39Language: {
       type: ['string', 'null'],
-      format: (data) => data.bip39Language || null
+      format: data => data.bip39Language || null
     },
     name: {
       type: 'string',
@@ -41,11 +45,11 @@ export default new BaseModel({
     },
     backgroundUpdateLedger: {
       type: 'boolean',
-      format: (data) => data.backgroundUpdateLedger !== undefined ? data.backgroundUpdateLedger : true
+      format: data => data.backgroundUpdateLedger !== undefined ? data.backgroundUpdateLedger : true
     },
     ledgerCache: {
       type: 'boolean',
-      format: (data) => data.ledgerCache || false
+      format: data => data.ledgerCache || false
     }
   },
   required: ['avatar', 'background', 'currency', 'language', 'name', 'networkId', 'theme']

src/renderer/pages/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="Dashboard relative flex flex-row h-full w-full">
     <main class="bg-theme-feature rounded-lg lg:mr-4 flex-1 w-full flex-col overflow-y-auto">
       <div
-        v-if="isMarketEnabled"
+        v-if="isChartEnabled && isMarketEnabled"
         class="bg-theme-chart-background pt-10 px-10 pb-4 rounded-t-lg"
       >
         <MarketChart :is-active="isMarketEnabled">
@@ -64,6 +64,9 @@ export default {
   },
 
   computed: {
+    isChartEnabled () {
+      return this.$store.getters['session/isMarketChartEnabled']
+    },
     isMarketEnabled () {
       return this.session_network && this.session_network.market && this.session_network.market.enabled
     }

src/renderer/store/modules/session.js

@@ -9,6 +9,7 @@ export default {
     background: null,
     currency: null,
     language: null,
+    isMarketChartEnabled: true,
     name: null,
     profileId: null,
     theme: null,
@@ -44,6 +45,7 @@ export default {
     avatar: state => state.avatar,
     background: state => state.background,
     currency: state => state.currency,
+    isMarketChartEnabled: state => state.isMarketChartEnabled,
     theme: state => state.theme,
     language: state => state.language,
     bip39Language: state => state.bip39Language,
@@ -67,6 +69,10 @@ export default {
       state.currency = currency
     },
 
+    SET_IS_MARKET_CHART_ENABLED (state, isEnabled) {
+      state.isMarketChartEnabled = isEnabled
+    },
+
     SET_LANGUAGE (state, language) {
       state.language = language
     },
@@ -103,6 +109,7 @@ export default {
       state.avatar = 'pages/new-profile-avatar.svg'
       state.background = null
       state.currency = MARKET.defaultCurrency
+      state.isMarketChartEnabled = true
       state.language = I18N.defaultLocale
       state.bip39Language = 'english'
       state.name = null
@@ -121,6 +128,7 @@ export default {
       dispatch('setAvatar', profile.avatar)
       dispatch('setBackground', profile.background)
       dispatch('setCurrency', profile.currency)
+      dispatch('setIsMarketChartEnabled', profile.isMarketChartEnabled)
       dispatch('setName', profile.name)
       dispatch('setLanguage', profile.language)
       dispatch('setBip39Language', profile.bip39Language)
@@ -147,6 +155,10 @@ export default {
       commit('SET_CURRENCY', value)
     },
 
+    setIsMarketChartEnabled ({ commit }, value) {
+      commit('SET_IS_MARKET_CHART_ENABLED', value)
+    },
+
     setLanguage ({ commit }, value) {
       commit('SET_LANGUAGE', value)
       i18n.locale = value