mirror of https://github.com/Lissy93/dashy.git
✨ Builds a widget for CodeStats
This commit is contained in:
Alicia Sykes
parent
599a5cc8d2
commit
b7cd2d4c06
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue