KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Activity page subscribes to store & more css variables

Browse Source
This commit is contained in:
Kevin
2022-01-13 00:27:09 +01:00
parent dc2359ff6a
commit 3c72bdf3c2
3 changed files with 201 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/components/ActivityPage.vue
View File

@@ -1,24 +1,28 @@
<template> <template>
<div class="wrapper" v-if="hasPlexUser"> <div class="wrapper" v-if="plexId">
<h1>Your watch activity</h1> <h1>Your watch activity</h1>
<div class="filter"> <div style="display: flex; flex-direction: row">
<h2>Filter</h2> <label class="filter">
<span>Days:</span>
<div class="filter-item"> <input
<label class="desktop-only">Days:</label> class="dayinput"
<input class="dayinput"
v-model="days" v-model="days"
placeholder="number of days" placeholder="number of days"
type="number" type="number"
pattern="[0-9]*" pattern="[0-9]*"
:style="{maxWidth: `${3 + (0.5 * days.length)}rem`}"/> :style="{ maxWidth: `${3 + 0.5 * days.length}rem` }"
<!-- <datalist id="days"> />
<option v-for="index in 1500" :value="index" :key="index"></option> </label>
</datalist> -->
</div>
<toggle-button class="filter-item" :options="chartTypes" :selected.sync="selectedChartDataType" /> <label class="filter">
<span>Data sorted by:</span>
<toggle-button
class="filter-item"
:options="chartTypes"
:selected.sync="selectedChartDataType"
/>
</label>
</div> </div>
<div class="chart-section"> <div class="chart-section">
@@ -39,128 +43,137 @@
</template> </template>
<script> <script>
import store from '@/store' import { mapGetters } from "vuex";
import ToggleButton from '@/components/ui/ToggleButton'; import ToggleButton from "@/components/ui/ToggleButton";
import { fetchChart } from '@/api' import { fetchChart } from "@/api";
var Chart = require('chart.js'); var Chart = require("chart.js");
Chart.defaults.global.elements.point.radius = 0 Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hitRadius = 10 Chart.defaults.global.elements.point.hitRadius = 10;
Chart.defaults.global.elements.point.pointHoverRadius = 10 Chart.defaults.global.elements.point.pointHoverRadius = 10;
Chart.defaults.global.elements.point.hoverBorderWidth = 4 Chart.defaults.global.elements.point.hoverBorderWidth = 4;
export default { export default {
components: { ToggleButton }, components: { ToggleButton },
data() { data() {
return { return {
days: 30, days: 30,
selectedChartDataType: 'plays', selectedChartDataType: "plays",
charts: [{ charts: [
name: 'Watch activity', {
ref: 'activityCanvas', name: "Watch activity",
ref: "activityCanvas",
data: null, data: null,
urlPath: '/plays_by_day', urlPath: "/plays_by_day",
graphType: 'line' graphType: "line"
}, { },
name: 'Plays by day of week', {
ref: 'playsByDayOfWeekCanvas', name: "Plays by day of week",
ref: "playsByDayOfWeekCanvas",
data: null, data: null,
urlPath: '/plays_by_dayofweek', urlPath: "/plays_by_dayofweek",
graphType: 'bar' graphType: "bar"
}],
chartData: [{
type: 'plays',
tooltipLabel: 'Play count',
},{
type: 'duration',
tooltipLabel: 'Watched duration',
valueConvertFunction: this.convertSecondsToHumanReadable
}],
gridColor: getComputedStyle(document.documentElement).getPropertyValue('--text-color-5')
} }
],
chartData: [
{
type: "plays",
tooltipLabel: "Play count"
},
{
type: "duration",
tooltipLabel: "Watched duration",
valueConvertFunction: this.convertSecondsToHumanReadable
}
],
gridColor: getComputedStyle(document.documentElement).getPropertyValue(
"--text-color-5"
)
};
}, },
computed: { computed: {
hasPlexUser() { ...mapGetters("user", ["plexId"]),
return store.getters['userModule/plex_userid'] != null ? true : false
},
chartTypes() { chartTypes() {
return this.chartData.map(chart => chart.type) return this.chartData.map(chart => chart.type);
}, },
selectedChartType() { selectedChartType() {
return this.chartData.filter(data => data.type == this.selectedChartDataType)[0] return this.chartData.filter(
data => data.type == this.selectedChartDataType
)[0];
} }
}, },
watch: { watch: {
hasPlexUser(newValue, oldValue) {
if (newValue != oldValue && newValue == true) {
this.fetchChartData(this.charts)
}
},
days(newValue) { days(newValue) {
if (newValue !== '') { if (newValue !== "") {
this.fetchChartData(this.charts) this.fetchChartData(this.charts);
} }
}, },
selectedChartDataType(selectedChartDataType) { selectedChartDataType(selectedChartDataType) {
this.fetchChartData(this.charts) this.fetchChartData(this.charts);
} }
}, },
beforeMount() { beforeMount() {
if (typeof(this.days) == 'number') { if (typeof this.days == "number") {
this.days = this.days.toString() this.days = this.days.toString();
} }
}, },
methods: { methods: {
fetchChartData(charts) { fetchChartData(charts) {
if (this.hasPlexUser == false) { if (!this.plexId) {
return console.log("NF plexID:", this.plexId);
return;
} }
for (let chart of charts) { for (let chart of charts) {
fetchChart(chart.urlPath, this.days, this.selectedChartType.type).then(
data => {
this.series = data.data.series.filter(
fetchChart(chart.urlPath, this.days, this.selectedChartType.type) group => group.name === "TV"
.then(data => { )[0].data; // plays pr date in groups (movie/tv/music)
this.series = data.data.series.filter(group => group.name === 'TV')[0].data; // plays pr date in groups (movie/tv/music)
this.categories = data.data.categories; // dates this.categories = data.data.categories; // dates
const x_labels = data.data.categories.map(date => { const x_labels = data.data.categories.map(date => {
if (date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) { if (date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
const [year, month, day] = date.split('-') const [year, month, day] = date.split("-");
return `${day}.${month}` return `${day}.${month}`;
} }
return date return date;
}) });
let y_activityMovies = data.data.series.filter(group => group.name === 'Movies')[0].data let y_activityMovies = data.data.series.filter(
let y_activityTV = data.data.series.filter(group => group.name === 'TV')[0].data group => group.name === "Movies"
)[0].data;
let y_activityTV = data.data.series.filter(
group => group.name === "TV"
)[0].data;
const datasets = [{ const datasets = [
{
label: `Movies watch last ${this.days} days`, label: `Movies watch last ${this.days} days`,
data: y_activityMovies, data: y_activityMovies,
backgroundColor: 'rgba(54, 162, 235, 0.2)', backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: 'rgba(54, 162, 235, 1)', borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1 borderWidth: 1
}, },
{ {
label: `Shows watch last ${this.days} days`, label: `Shows watch last ${this.days} days`,
data: y_activityTV, data: y_activityTV,
backgroundColor: 'rgba(255, 159, 64, 0.2)', backgroundColor: "rgba(255, 159, 64, 0.2)",
borderColor: 'rgba(255, 159, 64, 1)', borderColor: "rgba(255, 159, 64, 1)",
borderWidth: 1 borderWidth: 1
} }
] ];
if (chart.data == null) { if (chart.data == null) {
this.generateChart(chart, x_labels, datasets) this.generateChart(chart, x_labels, datasets);
} else { } else {
chart.data.clear(); chart.data.clear();
chart.data.data.labels = x_labels; chart.data.data.labels = x_labels;
chart.data.data.datasets = datasets; chart.data.data.datasets = datasets;
chart.data.update(); chart.data.update();
} }
}) }
);
} }
}, },
generateChart(chart, labels, datasets) { generateChart(chart, labels, datasets) {
@@ -175,48 +188,58 @@ export default {
maintainAspectRatio: false, maintainAspectRatio: false,
tooltips: { tooltips: {
callbacks: { callbacks: {
title: (tooltipItem, data) => `Watch date: ${tooltipItem[0].label}`, title: (tooltipItem, data) =>
`Watch date: ${tooltipItem[0].label}`,
label: (tooltipItem, data) => { label: (tooltipItem, data) => {
let label = data.datasets[tooltipItem.datasetIndex].label let label = data.datasets[tooltipItem.datasetIndex].label;
let value = tooltipItem.value; let value = tooltipItem.value;
let text = 'Duration watched' let text = "Duration watched";
const context = label.split(' ')[0] const context = label.split(" ")[0];
if (context) { if (context) {
text = `${context} ${this.selectedChartType.tooltipLabel.toLowerCase()}` text = `${context} ${this.selectedChartType.tooltipLabel.toLowerCase()}`;
} }
if (this.selectedChartType.valueConvertFunction) { if (this.selectedChartType.valueConvertFunction) {
value = this.selectedChartType.valueConvertFunction(tooltipItem.value) value = this.selectedChartType.valueConvertFunction(
tooltipItem.value
);
} }
return ` ${text}: ${value}` return ` ${text}: ${value}`;
} }
} }
}, },
scales: { scales: {
yAxes: [{ yAxes: [
{
gridLines: { gridLines: {
color: this.gridColor color: this.gridColor
}, },
stacked: chart.graphType === 'bar', stacked: chart.graphType === "bar",
ticks: { ticks: {
// suggestedMax: 10000, // suggestedMax: 10000,
callback: (value, index, values) => { callback: (value, index, values) => {
if (this.selectedChartType.valueConvertFunction) { if (this.selectedChartType.valueConvertFunction) {
return this.selectedChartType.valueConvertFunction(value, values) return this.selectedChartType.valueConvertFunction(
value,
values
);
} }
return value return value;
}, },
beginAtZero: true beginAtZero: true
} }
}],
xAxes: [{
stacked: chart.graphType === 'bar',
gridLines: {
display: false,
} }
}] ],
xAxes: [
{
stacked: chart.graphType === "bar",
gridLines: {
display: false
}
}
]
} }
} }
}); });
@@ -230,34 +253,34 @@ export default {
if (highestValue < 3600) { if (highestValue < 3600) {
const minutes = Math.floor(value / 60); const minutes = Math.floor(value / 60);
value = `${minutes} m` value = `${minutes} m`;
} }
// hours and minutes // hours and minutes
else if (highestValue > 3600 && highestValue < 86400) { else if (highestValue > 3600 && highestValue < 86400) {
const hours = Math.floor(value / 3600); const hours = Math.floor(value / 3600);
const minutes = Math.floor(value % 3600 / 60); const minutes = Math.floor((value % 3600) / 60);
value = hours != 0 ? `${hours} h ${minutes} m` : `${minutes} m` value = hours != 0 ? `${hours} h ${minutes} m` : `${minutes} m`;
} }
// days and hours // days and hours
else if (highestValue > 86400 && highestValue < 31557600) { else if (highestValue > 86400 && highestValue < 31557600) {
const days = Math.floor(value / 86400); const days = Math.floor(value / 86400);
const hours = Math.floor(value % 86400 / 3600); const hours = Math.floor((value % 86400) / 3600);
value = days != 0 ? `${days} d ${hours} h` : `${hours} h` value = days != 0 ? `${days} d ${hours} h` : `${hours} h`;
} }
// years and days // years and days
else if (highestValue > 31557600) { else if (highestValue > 31557600) {
const years = Math.floor(value / 31557600); const years = Math.floor(value / 31557600);
const days = Math.floor(value % 31557600 / 86400); const days = Math.floor((value % 31557600) / 86400);
value = years != 0 ? `${years} y ${days} d` : `${days} d` value = years != 0 ? `${years} y ${days} d` : `${days} d`;
} }
return value return value;
}
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -272,30 +295,55 @@ export default {
} }
.filter { .filter {
display: flex; margin-top: 0.5rem;
flex-direction: row; display: inline-flex;
flex-wrap: wrap; flex-direction: column;
align-items: center;
margin-bottom: 2rem;
h2 {
margin-bottom: 0.5rem;
width: 100%;
font-weight: 400;
}
&-item:not(:first-of-type) {
margin-left: 1rem;
}
.dayinput {
font-size: 1.2rem; font-size: 1.2rem;
&:not(:first-of-type) {
margin-left: 1.25rem;
}
input {
width: 100%;
font-size: inherit;
max-width: 3rem; max-width: 3rem;
background-color: $background-ui; background-color: $background-ui;
color: $text-color; color: $text-color;
} }
span {
font-size: inherit;
line-height: 1;
margin: 0.5rem 0;
font-weight: 300;
} }
}
// .filter {
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// align-items: center;
// margin-bottom: 2rem;
// h2 {
// margin-bottom: 0.5rem;
// width: 100%;
// font-weight: 400;
// }
// &-item:not(:first-of-type) {
// margin-left: 1rem;
// }
// .dayinput {
// font-size: 1.2rem;
// max-width: 3rem;
// background-color: $background-ui;
// color: $text-color;
// }
// }
.chart-section { .chart-section {
display: flex; display: flex;
@@ -312,5 +360,4 @@ export default {
font-weight: 300; font-weight: 300;
} }
} }
</style> </style>

8
src/scss/main.scss
View File

@@ -1,4 +1,3 @@
.noselect { .noselect {
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
@@ -8,13 +7,6 @@
user-select: none; /* Non-prefixed version, currently */ user-select: none; /* Non-prefixed version, currently */
} }
.end-section {
display: flex;
justify-content: center;
width: 100%;
margin: 1rem 0;
}
.button--group { .button--group {
display: flex; display: flex;

13
src/scss/variables.scss
View File

@@ -5,8 +5,10 @@
:root { :root {
color-scheme: light; color-scheme: light;
--text-color: #081c24; --text-color: #081c24;
--text-color-90: rgba(8, 28, 36, 0.9);
--text-color-70: rgba(8, 28, 36, 0.7); --text-color-70: rgba(8, 28, 36, 0.7);
--text-color-50: rgba(8, 28, 36, 0.5); --text-color-50: rgba(8, 28, 36, 0.5);
--text-color-10: rgba(8, 28, 36, 0.1);
--text-color-5: rgba(8, 28, 36, 0.05); --text-color-5: rgba(8, 28, 36, 0.05);
--text-color-secondary: orange; --text-color-secondary: orange;
--background-color: #f8f8f8; --background-color: #f8f8f8;
@@ -40,16 +42,18 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--text-color: #fff; --text-color: #fff;
--text-color-90: rgba(255, 255, 255, 0.9);
--text-color-70: rgba(255, 255, 255, 0.7); --text-color-70: rgba(255, 255, 255, 0.7);
--text-color-50: rgba(255, 255, 255, 0.5); --text-color-50: rgba(255, 255, 255, 0.5);
--text-color-10: rgba(255, 255, 255, 0.1);
--text-color-5: rgba(255, 255, 255, 0.05); --text-color-5: rgba(255, 255, 255, 0.05);
--text-color-secondary: orange; --text-color-secondary: orange;
--background-color: rgba(17, 17, 17, 1); --background-color: rgba(17, 17, 17, 1);
--background-color-secondary: rgba(6, 7, 8, 1); --background-color-secondary: rgba(6, 7, 8, 1);
--background-ui: #202125; --background-ui: #202125;
--background-95: rgba(17, 17, 17, 0.95); --background-95: rgba(6, 7, 8, 0.95);
--background-70: rgba(17, 17, 17, 0.8); --background-70: rgba(6, 7, 8, 0.7);
--background-40: rgba(17, 17, 17, 0.4); --background-40: rgba(6, 7, 8, 0.4);
} }
} }
@@ -72,6 +76,7 @@ $white: #fff;
$white-80: rgba(255, 255, 255, 0.8); $white-80: rgba(255, 255, 255, 0.8);
$text-color: var(--text-color) !default; $text-color: var(--text-color) !default;
$text-color-90: var(--text-color-90) !default;
$text-color-70: var(--text-color-70) !default; $text-color-70: var(--text-color-70) !default;
$text-color-50: var(--text-color-50) !default; $text-color-50: var(--text-color-50) !default;
$text-color-5: var(--text-color-5) !default; $text-color-5: var(--text-color-5) !default;
@@ -100,6 +105,7 @@ $color-error-highlight: var(--color-error-highlight) !default;
.dark { .dark {
--text-color: #fff; --text-color: #fff;
--text-color-90: rgba(255, 255, 255, 0.9);
--text-color-70: rgba(255, 255, 255, 0.7); --text-color-70: rgba(255, 255, 255, 0.7);
--text-color-50: rgba(255, 255, 255, 0.5); --text-color-50: rgba(255, 255, 255, 0.5);
--text-color-5: rgba(255, 255, 255, 0.05); --text-color-5: rgba(255, 255, 255, 0.05);
@@ -114,6 +120,7 @@ $color-error-highlight: var(--color-error-highlight) !default;
.light { .light {
--text-color: #081c24; --text-color: #081c24;
--text-color-90: rgba(8, 28, 36, 0.9);
--text-color-70: rgba(8, 28, 36, 0.7); --text-color-70: rgba(8, 28, 36, 0.7);
--text-color-50: rgba(8, 28, 36, 0.5); --text-color-50: rgba(8, 28, 36, 0.5);
--text-color-5: rgba(8, 28, 36, 0.05); --text-color-5: rgba(8, 28, 36, 0.05);