Mining Stats Module

[7alip]

Mining Module

1. Included dependencies

{
  "dependencies": {
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "vue-chartjs": "^3.5.1",
    "vue-dialog-drag": "^0.1.29"
  },
  "optionalDependencies": {
    "bufferutil": "^4.0.3",
    "utf-8-validate": "^5.0.5"
  }
}

2. Initial State

export default function () {
  return {
    rskOverBtcHashrate: {},
    difficultyOverTime: null,
    hashrateDistribution: null,
    hashrateDistributionOverTime: null,
    lastBtcBlocks: null,
    lastRskBlocks: null,
    miningSummary: null,
    dataRange: {
      rskOverBtcHashrate: 'oneDay',
      difficultyOverTime: 'oneHour',
      hashrateDistribution: 'oneHour',
      hashrateDistributionOverTime: 'oneHour',
      lastRskBlocks: 'oneHour',
      lastBtcBlocks: 'oneHour',
      miningSummary: 'oneHour'
    }
  }
}

3. Mining Socket

• Socket Plugin
  (src/store/plugins/miningSocketPlugin.js)

  [
    "summary",
    "lastRskBlocks",
    "lastBtcBlocks",
    "hashrateDistribution",
    "hashrateDistributionOverTime",
    "difficultyOverTime",
    "rskOverBtcOverTime"
  ]

• Socket endpoint env variable

  // env.development
  WS_M_URL=ws://localhost:3002`
  
  // vue.config.js
  const props = ['WS_URL', 'WS_M_URL', 'STATS_URL', 'GA_TAG', 'HOTJAR_ID', 'STREAM_MITM_URL']
  

4. Mock Socket Data

test/__mocks__/difficultyOverTime.json
test/__mocks__/hashrataDistributionOverTime.json
test/__mocks__/hashrateDistribution.json
test/__mocks__/lastBtcBlocks.json
test/__mocks__/lastRskBlocks.json
test/__mocks__/rskOverBtcHashrate.json
test/__mocks__/summary.json

Summary

  type SummaryType = {
    btc: {
      bestBlock: number
      hashrate: string
    }
    rsk: {
      bestBlock: number
      hashrate: string
    }
    rskOverBtcHasrate: string
  }

Difficulty Over Time

  type DifficultyType = {
    oneHour: {
      time: string; 
      data: {
        value: number; 
        unit: "EH"
      }
    }[]
    ...
  }

Hashrate Distribution Over Time

  type DistributionType = {
    oneHour: {
      time: string; 
      data: {
        minerName: string; 
        hashrateInRskNetwork: number
        hashingPower: number
        hashratePercentageInRskNetwork: number
        hashrateInRskNetworkUnit: string
      }
    }[]
    ...
  }

Hashrate Distribution

  type HashrateOverTimeType = {
    oneHour: {
      minerName: string; 
      hashrateInRskNetwork: number
      hashingPower: number
      hashratePercentageInRskNetwork: number
      hashrateInRskNetworkUnit: string
    }[],
    ...
  }

Last BTC Blocks

  type LastBtcBlocksType = {
    {
      height: number
      hash: string
      timestamp: 1625284081,
      minerName: string
      rskTag: string
      rskHeight: number
      status: string
    }[]
  }

Last RSK Blocks

  type LastRskBlocksType = {
    {
      height: number
      hash: string
      difficulty: string
      timestamp: 1625284081,
      minerAddress: string
      rskTag: string
      rskNodeVersion: string
      minerName: string
      blockInBtc: any
      numberOfUncles: number
    }[]
  }

RSK Over BTC Hashrate Over Time

  type RskOverBtcType = {
    oneHour: {
      time: string; 
      data: {
        rskHashrate: {
          value: number
          unit: "EHs"
        }
        btcHashrate: {
          value: number
          unit: "EHs"
        }
        rskObjectiveHashrate: {
          value: number
          unit: "EHs"
        }
      }
    }[]
    ...
  }

5. Mapping socket data to chart data

(src/lib/js/mining)

These mapping functions basically take raw websocket data from store for a specific time range ("hour", "day", "week") and map the data to appropriate format for ChartJS component.

mapDifficultyToChartData           = (colors, data, activeTab)               => ({ labels, datasets })
mapHashrateDistributionToChartData = (colors, data, activeTab)               => ({ labels, datasets })
mapHashrateOverTimeToChartData     = (colors, data, activeTab, isPercentage) => ({ labels, datasets })
mapRskOverBtcToChartData           = (colors, data, activeTab)               => ({ labels, datasets })

6. Config

• N/A Filter
  (src/filters/NumberFilters.js)
  In mining tables (LastRskBlocks, LastBtcBlocks) show N/A string if socket data doesn't exist for a specific cell

export const notApplicable = Vue.filter('not-applicable-locale', (value) => {
  if (!value) {
    return 'N/A'
  }
  const format = d3.format(',d')
  return format(value)
})

• Mining Entity
  (src/config/entities/mining)

• Field Types

  miningBtcBlock: {
    icon: 'btc',
    titleIcon: true,
    hideTitle: true,
    link: 'https://btc.com/block/',
    filters: ['not-applicable-locale']
  },
  miningRskBlock: {
    icon: 'rsk',
    titleIcon: true,
    hideTitle: true,
    link: `/${r.block}/`,
    filters: ['not-applicable-locale']
  },
  pool: {
    default: POOL_UNKNOWN_NAME,
    trim: 'auto',
    filters: addressFilters
  }

7. External Link in Data Field

(src/components/DataField.vue)

template(v-if='trim && !options.noTrim')
  tool-tip.field-value(:value='filteredValue || value' :trim='trim' :options='trimOptions' :router-link='link')
template(v-else)
  // External links
  template(v-if='link' :to='link')
    a(v-if='link[0] !== "/"' :href="link" target="_blank")
       .field-value {{ filteredValue || field.default }}
    router-link(v-else :to='link')
      .field-value {{ filteredValue || field.default }}
  .field-value(v-else) {{ filteredValue || field.default }}

8. Mining Page Component

<template lang="pug">
  .mining-page
    .cols
      mining-summary
    .cols
      .col-a
        hashrate-distribution(:data='getRangeData("hashrateDistribution")')
      .col-b
        hashrate-over-time(:data='getRangeData("hashrateDistributionOverTime")')
    .cols
      .col-a
        difficulty-over-time(:data='getRangeData("difficultyOverTime")')
      .col-b
        rsk-over-btc-hashrate(:data='getRangeData("rskOverBtcHashrate")')
    last-btc-blocks(:lastBtcBlocks='miningState.lastBtcBlocks')
    last-rsk-blocks(:lastRskBlocks='miningState.lastRskBlocks')
</template>

<script>
export default {
  components: {
    HashrateDistribution,
    HashrateOverTime,
    DifficultyOverTime,
    RskOverBtcHashrate,
    LastBtcBlocks,
    LastRskBlocks,
    MiningSummary
  },
  computed: {
    ...mapState({
      range: state => state.mining.dataRange,
      miningState: state => state.mining
    })
  },
  methods: {
    getRangeData (module) {
      return this.miningState[module][this.range[module]]
    }
  }
}
</script>

[lgtm-com]

This pull request introduces 1 alert when merging 33b980a into 1847101 - view on LGTM.com

new alerts:

• 1 for Superfluous trailing arguments