kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-09-21 11:45:14 +00:00
Code Issues Projects Releases Wiki Activity

More layout stuff

Browse Source
This commit is contained in:
James Cole
2020-06-21 18:29:23 +02:00
parent 00440f282b
commit 1c74db30ed
11 changed files with 211 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/bootstrap.js vendored
View File

@@ -19,6 +19,15 @@ if (token) {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
// locale
let localeToken = document.head.querySelector('meta[name="locale"]');
if (localeToken) {
window.localeValue = localeToken.content;
} else {
window.localeValue = 'en_US';
}
// admin stuff
require('jquery-ui');
require('bootstrap');

67
frontend/src/components/charts/DataConverter.vue
View File

@@ -1,7 +1,3 @@
<template>
</template>
<script>
export default {
name: "DataConverter",
@@ -24,6 +20,64 @@
this.newDataSet.count = this.newDataSet.datasets.length;
return this.newDataSet;
},
colorizeData(dataSet) {
this.dataSet = dataSet;
this.newDataSet = {
count: 0,
labels: [],
datasets: []
};
// colors
let colourSet = [
[53, 124, 165],
[0, 141, 76], // green
[219, 139, 11],
[202, 25, 90], // paars rood-ish #CA195A
[85, 82, 153],
[66, 133, 244],
[219, 68, 55], // red #DB4437
[244, 180, 0],
[15, 157, 88],
[171, 71, 188],
[0, 172, 193],
[255, 112, 67],
[158, 157, 36],
[92, 107, 192],
[240, 98, 146],
[0, 121, 107],
[194, 24, 91]
];
let fillColors = [];
//let strokePointHighColors = [];
for (let i = 0; i < colourSet.length; i++) {
fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
}
this.newDataSet.labels = this.dataSet.labels;
this.newDataSet.count = this.dataSet.count;
for (let setKey in this.dataSet.datasets) {
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
var dataset = this.dataSet.datasets[setKey];
dataset.fill = false;
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
this.newDataSet.datasets.push(dataset);
}
}
return this.newDataSet;
},
convertLabelsToDate(dataSet) {
for (let labelKey in dataSet.labels) {
if (dataSet.labels.hasOwnProperty(labelKey)) {
const unixTimeZero = Date.parse(dataSet.labels[labelKey]);
dataSet.labels[labelKey] = new Intl.DateTimeFormat(window.localeValue).format(unixTimeZero);
}
}
return dataSet;
},
getLabels() {
let firstSet = this.dataSet[0];
for (const entryLabel in firstSet.entries) {
@@ -40,6 +94,7 @@
newSet.label = oldSet.label;
newSet.type = oldSet.type;
newSet.currency_symbol = oldSet.currency_symbol;
newSet.currency_code = oldSet.currency_code;
newSet.yAxisID = oldSet.yAxisID;
newSet.data = [];
for (const entryLabel in oldSet.entries) {
@@ -54,7 +109,3 @@
}
}
</script>
<style scoped>
</style>

127
frontend/src/components/charts/DefaultLineOptions.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
</template>
<script>
export default {
name: "DefaultLineOptions",
data() {
return {}
},
methods: {
/**
* Takes a string phrase and breaks it into separate phrases no bigger than 'maxwidth', breaks are made at complete words.
* https://stackoverflow.com/questions/21409717/chart-js-and-long-labels
*
* @param str
* @param maxwidth
* @returns {Array}
*/
formatLabel(str, maxwidth) {
var sections = [];
str = String(str);
var words = str.split(" ");
var temp = "";
words.forEach(function (item, index) {
if (temp.length > 0) {
var concat = temp + ' ' + item;
if (concat.length > maxwidth) {
sections.push(temp);
temp = "";
} else {
if (index === (words.length - 1)) {
sections.push(concat);
return;
} else {
temp = concat;
return;
}
}
}
if (index === (words.length - 1)) {
sections.push(item);
return;
}
if (item.length < maxwidth) {
temp = item;
} else {
sections.push(item);
}
});
return sections;
},
getDefaultOptions() {
console.log('getDefaultOptions()');
return {
legend: {
display: false,
},
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
// break ticks when too long.
callback: function (value, index, values) {
//return this.formatLabel(value, 20);
return value;
}
}
}
],
yAxes: [{
display: true,
ticks: {
callback: function (tickValue) {
"use strict";
let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
},
beginAtZero: true
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
let nrString =
new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
}
}
}
};
}
}
}
</script>
<style scoped>
</style>

9
frontend/src/components/dashboard/MainAccount.vue
View File

@@ -17,6 +17,7 @@
<script>
import MainAccountChart from "./MainAccountChart";
import DataConverter from "../charts/DataConverter";
import DefaultLineOptions from "../charts/DefaultLineOptions";
export default {
components: {
@@ -30,15 +31,15 @@
}
},
mounted() {
this.chartOptions = {
responsive: true,
maintainAspectRatio: false
};
this.chartOptions = DefaultLineOptions.methods.getDefaultOptions();
this.loaded = false;
axios.get('./api/v1/chart/account/overview?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.chartData = DataConverter.methods.convertChart(response.data);
this.chartData = DataConverter.methods.colorizeData(this.chartData);
this.chartData = DataConverter.methods.convertLabelsToDate(this.chartData);
console.log(this.chartData);
this.loaded = true
});

7
frontend/src/components/dashboard/MainAccountChart.vue
View File

@@ -1,11 +1,12 @@
<script>
import { Line } from 'vue-chartjs'
import {Line} from 'vue-chartjs'
export default {
extends: Line,
props: ['options'],
props: ['options', 'chartData'],
mounted () {
mounted() {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)