From b7cd2d4c0626041342b67b924b1708b3e3d163b7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 16 Dec 2021 23:33:27 +0000
Subject: [PATCH] :sparkles: Builds a widget for CodeStats

---
 docs/widgets.md                       |  29 +++
 src/components/Widgets/CodeStats.vue  | 244 ++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |   9 +
 src/utils/MiscHelpers.js              |  12 ++
 src/utils/defaults.js                 |   1 +
 5 files changed, 295 insertions(+)
 create mode 100644 src/components/Widgets/CodeStats.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index d65a0f52..c444c16e 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -11,6 +11,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Crypto Price History](#crypto-token-price-history)
   - [RSS Feed](#rss-feed)
   - [XKCD Comics](#xkcd-comics)
+  - [Code Stats](#code-stats)
   - [TFL Status](#tfl-status)
   - [Exchange Rates](#exchange-rates)
   - [Stock Price History](#stock-price-history)
@@ -229,6 +230,34 @@ Have a laugh with the daily comic from [XKCD](https://xkcd.com/). A classic webc
 
 ---
 
+### Code Stats
+
+Display your coding summary. [Code::Stats](https://codestats.net/) is a free and open source app that aggregates statistics about your programming activity. Dashy supports both the public instance, as well as self-hosted versions.
+
+<p align="center"><img width="400" src="https://i.ibb.co/dc0DTBW/code-stats.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`username`** | `string` |  Required | Your CodeStats username
+**`hostname`** | `string` |  _Optional_ | If your self-hosting CodeStats, then supply the host name. By default it will use the public hosted instance
+**`monthsToShow`** | `number` |  _Optional_ | Specify the number of months to render in the historical data chart. Defaults to `6`
+**`hideMeta`** | `boolean` |  _Optional_ | Optionally hide the meta section (username, level, all-time and recent XP)
+**`hideHistory`** | `boolean` |  _Optional_ | Optionally hide the historical calendar heat map
+**`hideLanguages`** | `boolean` |  _Optional_ | Optionally hide the programming languages pie chart
+**`hideMachines`** | `boolean` |  _Optional_ | Optionally hide the machines percentage chart
+
+##### Example
+
+```yaml
+- type: code-stats
+  options:
+    username: alicia
+```
+
+---
+
 ### TFL Status
 
 Shows real-time tube status of the London Underground. All options are optional.
diff --git a/src/components/Widgets/CodeStats.vue b/src/components/Widgets/CodeStats.vue
new file mode 100644
index 00000000..61c3ae69
--- /dev/null
+++ b/src/components/Widgets/CodeStats.vue
@@ -0,0 +1,244 @@
+<template>
+<div class="code-stats-wrapper">
+  <!-- User Info -->
+  <div class="user-meta" v-if="basicInfo && !hideMeta">
+    <div class="user-info-wrap">
+      <p class="username">{{ basicInfo.username }}</p>
+      <p class="user-level">{{ basicInfo.level }}</p>
+    </div>
+    <div class="total-xp-wrap">
+      <p class="total-xp">{{ basicInfo.totalXp | formatTotalXp }}</p>
+      <p class="new-xp">{{ basicInfo.newXp | formatNewXp }}</p>
+    </div>
+  </div>
+  <!-- XP History Heatmap -->
+  <div :id="`xp-history-${chartId}`" class="xp-heat-chart"></div>
+  <!-- Language Breakdown -->
+  <div :id="`languages-${chartId}`" class="language-pie-chart"></div>
+  <!-- Machines Percentage -->
+  <div :id="`machines-${chartId}`" class="machine-percentage-chart"></div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { putCommasInBigNum, showNumAsThousand } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  data() {
+    return {
+      basicInfo: null,
+    };
+  },
+  computed: {
+    /* The username to fetch data from - REQUIRED */
+    username() {
+      if (!this.options.username) this.error('You must specify a username');
+      return this.options.username;
+    },
+    /* Optionally override hostname, if using a self-hosted instance */
+    hostname() {
+      if (this.options.hostname) return this.options.hostname;
+      return widgetApiEndpoints.codeStats;
+    },
+    hideMeta() {
+      return this.options.hideMeta || false;
+    },
+    hideHistory() {
+      return this.options.hideHistory || false;
+    },
+    hideLanguages() {
+      return this.options.hideLanguages || false;
+    },
+    hideMachines() {
+      return this.options.hideMachines || false;
+    },
+    monthsToShow() {
+      return this.options.monthsToShow || 5;
+    },
+    endpoint() {
+      return `${this.hostname}/api/users/${this.username}`;
+    },
+    chartStartDate() {
+      const now = new Date();
+      return new Date((now.setMonth(now.getMonth() - this.monthsToShow)));
+    },
+  },
+  filters: {
+    formatTotalXp(bigNum) {
+      return showNumAsThousand(bigNum);
+    },
+    formatNewXp(newXp) {
+      return `+${putCommasInBigNum(newXp)} XP`;
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data from CodeStats.net', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      // Make basic info data
+      if (!this.hideMeta) {
+        this.basicInfo = {
+          username: data.user,
+          level: this.makeLevel(data.total_xp),
+          totalXp: data.total_xp,
+          newXp: data.new_xp,
+        };
+      }
+      // Make language breakdown pie chart data
+      if (!this.hideLanguages) {
+        const langLabels = [];
+        const langXpValues = [];
+        Object.keys(data.languages).forEach((lang) => {
+          langLabels.push(lang);
+          langXpValues.push(data.languages[lang].xps);
+        });
+        const languagesPieData = {
+          labels: langLabels,
+          datasets: [{ values: langXpValues }],
+        };
+        this.drawLanguagePieChart(languagesPieData);
+      }
+      // Make day-by-day historical XP heat chart data
+      if (!this.hideHistory) {
+        const xpHistoryChartData = {};
+        Object.keys(data.dates).forEach((date) => {
+          const timestamp = Math.round(new Date(date).getTime() / 1000);
+          xpHistoryChartData[timestamp] = data.dates[date];
+        });
+        this.drawXpHistoryChart(xpHistoryChartData);
+      }
+      // Make machine proportion percentage chart data
+      if (!this.hideMachines) {
+        const machinesLabels = [];
+        const machinesXpValues = [];
+        Object.keys(data.machines).forEach((machine) => {
+          machinesLabels.push(machine);
+          machinesXpValues.push(data.machines[machine].xps);
+        });
+        const machinesPercentageData = {
+          labels: machinesLabels,
+          datasets: [{ values: machinesXpValues }],
+        };
+        this.drawMachinesPercentageChart(machinesPercentageData);
+      }
+    },
+    drawLanguagePieChart(languagesPieData) {
+      return new this.Chart(`#languages-${this.chartId}`, {
+        title: 'Languages',
+        type: 'donut',
+        data: languagesPieData,
+        height: 250,
+        strokeWidth: 15,
+        tooltipOptions: {
+          formatTooltipY: d => showNumAsThousand(d),
+        },
+      });
+    },
+    drawXpHistoryChart(xpHistoryData) {
+      return new this.Chart(`#xp-history-${this.chartId}`, {
+        title: 'Historical XP',
+        type: 'heatmap',
+        data: {
+          dataPoints: xpHistoryData,
+          start: this.chartStartDate,
+          end: new Date(),
+        },
+        discreteDomains: 0,
+        radius: 2,
+        colors: ['#caf0f8', '#48cae4', '#0077b6', '#023e8a', '#090a79'],
+      });
+    },
+    drawMachinesPercentageChart(machineChartData) {
+      return new this.Chart(`#machines-${this.chartId}`, {
+        title: 'Machines',
+        type: 'percentage',
+        data: machineChartData,
+        height: 180,
+        strokeWidth: 15,
+        tooltipOptions: {
+          formatTooltipY: d => showNumAsThousand(d),
+        },
+        colors: ['#f9c80e', '#43bccd', '#ea3546', '#662e9b', '#f86624'],
+      });
+    },
+    /* Given a users XP score, return text level */
+    makeLevel(xp) {
+      if (xp < 100) return 'New Joiner';
+      if (xp < 1000) return 'Noob';
+      if (xp < 10000) return 'Intermediate';
+      if (xp < 50000) return 'Code ninja in the making';
+      if (xp < 100000) return 'Expert Developer';
+      if (xp < 500000) return 'Ultra Expert Developer';
+      if (xp < 1000000) return 'Code Super Hero';
+      if (xp < 1500000) return 'Super Epic Code Hero';
+      if (xp >= 15000000) return 'God Level';
+      return xp;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.code-stats-wrapper {
+  p {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--widget-text-color);
+  }
+  .user-meta {
+    display: flex;
+    margin: 0.5rem;
+    padding: 0.5rem 0;
+    border-bottom: 1px dashed var(--widget-text-color);
+    justify-content: space-between;
+    .user-info-wrap {
+      .username {
+        font-size: 1.4rem;
+        text-transform: capitalize;
+      }
+      .user-level {
+        font-size: 0.8rem;
+        text-transform: capitalize;
+        opacity: var(--dimming-factor);
+        color: var(--widget-text-color);
+      }
+    }
+    .total-xp-wrap {
+      display: flex;
+      align-items: flex-start;
+      .total-xp {
+        font-size: 1.4rem;
+        font-family: var(--font-monospace);
+      }
+      .new-xp {
+        font-size: 0.8rem;
+        margin: 0 0 0 0.5rem;
+        color: var(--success);
+        font-family: var(--font-monospace);
+      }
+    }
+  }
+  .xp-heat-chart,
+  .language-pie-chart,
+  .machine-percentage-chart {
+    &:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 1b7ac5d2..416a3220 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -39,6 +39,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <CodeStats
+        v-else-if="widgetType === 'code-stats'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <EmbedWidget
         v-else-if="widgetType === 'embed'"
         :options="widgetOptions"
@@ -162,6 +169,7 @@ import LoadingAnimation from '@/assets/interface-icons/loader.svg';
 import Clock from '@/components/Widgets/Clock.vue';
 import CryptoPriceChart from '@/components/Widgets/CryptoPriceChart.vue';
 import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
+import CodeStats from '@/components/Widgets/CodeStats.vue';
 import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
 import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
 import Flights from '@/components/Widgets/Flights.vue';
@@ -188,6 +196,7 @@ export default {
     LoadingAnimation,
     // Register widget components
     Clock,
+    CodeStats,
     CryptoPriceChart,
     CryptoWatchList,
     EmbedWidget,
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index 3591b7cd..0f83fed7 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -79,3 +79,15 @@ export const findCurrencySymbol = (currencyCode) => {
   if (currencies[code]) return currencies[code];
   return code;
 };
+
+/* Given a large number, will add commas to make more readable */
+export const putCommasInBigNum = (bigNum) => {
+  const strNum = Number.isNaN(bigNum) ? bigNum : String(bigNum);
+  return strNum.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+};
+
+/* Given a large number, will convert 1000 into k for readability */
+export const showNumAsThousand = (bigNum) => {
+  if (bigNum < 1000) return bigNum;
+  return `${Math.round(bigNum / 1000)}k`;
+};
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 5373ab69..19da9cbd 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -217,6 +217,7 @@ module.exports = {
     jokes: 'https://v2.jokeapi.dev/joke/',
     flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
     rssToJson: 'https://api.rss2json.com/v1/api.json',
+    codeStats: 'https://codestats.net/',
   },
   /* URLs for web search engines */
   searchEngineUrls: {