-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add Vue linting Turns out the .vue files were not linted at all, so I added that as well as re-indented the file to 2-space and fixed all reasonable issues that cam up except one case of a unintended side effect for which I have no idea how to fix it, so the rule was disabled. * misc tweaks * update lockfile * use overrides to include .vue files * treat warnings as errors on lint-frontend * also treat stylelint warnings as errors * use equal sign syntax Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
- Loading branch information
3 people
authored
Nov 7, 2020
1 parent
ed47da2
commit 7c47e24
Showing
7 changed files
with
294 additions
and
242 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,71 @@ | ||
| <template> | ||
| <div> | ||
| <div v-show="isLoading"> | ||
| <slot name="loading"></slot> | ||
| </div> | ||
| <h4 class="total-contributions" v-if="!isLoading"> | ||
| {{ totalContributions }} total contributions in the last 12 months | ||
| </h4> | ||
| <calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/> | ||
| <div> | ||
| <div v-show="isLoading"> | ||
| <slot name="loading"/> | ||
| </div> | ||
| <h4 v-if="!isLoading" class="total-contributions"> | ||
| {{ values.length }} total contributions in the last 12 months | ||
| </h4> | ||
| <calendar-heatmap | ||
| v-show="!isLoading" | ||
| :locale="locale" | ||
| :no-data-text="locale.no_contributions" | ||
| :tooltip-unit="locale.contributions" | ||
| :end-date="endDate" | ||
| :values="values" | ||
| :range-color="colorRange" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import {CalendarHeatmap} from 'vue-calendar-heatmap'; | ||
| const {AppSubUrl, heatmapUser} = window.config; | ||
| export default { | ||
| name: "ActivityHeatmap", | ||
| components: { | ||
| CalendarHeatmap | ||
| }, | ||
| data() { | ||
| return { | ||
| isLoading: true, | ||
| colorRange: [], | ||
| endDate: null, | ||
| values: [], | ||
| totalContributions: 0, | ||
| suburl: AppSubUrl, | ||
| user: heatmapUser, | ||
| locale: { | ||
| contributions: 'contributions', | ||
| no_contributions: 'No contributions', | ||
| }, | ||
| }; | ||
| name: 'ActivityHeatmap', | ||
| components: {CalendarHeatmap}, | ||
| data: () => ({ | ||
| isLoading: true, | ||
| colorRange: [], | ||
| endDate: null, | ||
| values: [], | ||
| suburl: AppSubUrl, | ||
| user: heatmapUser, | ||
| locale: { | ||
| contributions: 'contributions', | ||
| no_contributions: 'No contributions', | ||
| }, | ||
| mounted() { | ||
| this.colorRange = [ | ||
| this.getColor(0), | ||
| this.getColor(1), | ||
| this.getColor(2), | ||
| this.getColor(3), | ||
| this.getColor(4), | ||
| this.getColor(5) | ||
| ]; | ||
| this.endDate = new Date(); | ||
| this.loadHeatmap(this.user); | ||
| }, | ||
| methods: { | ||
| loadHeatmap(userName) { | ||
| const self = this; | ||
| $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => { | ||
| const chartData = []; | ||
| for (let i = 0; i < chartRawData.length; i++) { | ||
| self.totalContributions += chartRawData[i].contributions; | ||
| chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions}; | ||
| } | ||
| self.values = chartData; | ||
| self.isLoading = false; | ||
| }); | ||
| }, | ||
| getColor(idx) { | ||
| const el = document.createElement('div'); | ||
| el.className = `heatmap-color-${idx}`; | ||
| document.body.appendChild(el); | ||
| const color = getComputedStyle(el).backgroundColor; | ||
| document.body.removeChild(el); | ||
| return color; | ||
| } | ||
| }), | ||
| mounted() { | ||
| this.colorRange = [ | ||
| this.getColor(0), | ||
| this.getColor(1), | ||
| this.getColor(2), | ||
| this.getColor(3), | ||
| this.getColor(4), | ||
| this.getColor(5) | ||
| ]; | ||
| this.endDate = new Date(); | ||
| this.loadHeatmap(this.user); | ||
| }, | ||
| methods: { | ||
| async loadHeatmap(userName) { | ||
| const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`); | ||
| const data = await res.json(); | ||
| this.values = data.map(({contributions, timestamp}) => { | ||
| return {date: new Date(timestamp * 1000), count: contributions}; | ||
| }); | ||
| this.isLoading = false; | ||
| }, | ||
| } | ||
| getColor(idx) { | ||
| const el = document.createElement('div'); | ||
| el.className = `heatmap-color-${idx}`; | ||
| document.body.appendChild(el); | ||
| const color = getComputedStyle(el).backgroundColor; | ||
| document.body.removeChild(el); | ||
| return color; | ||
| } | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| </style> | ||
| <style scoped/> |
Oops, something went wrong.