More layout stuff

frontend/src/bootstrap.js

@@ -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');

frontend/src/components/charts/DataConverter.vue

@@ -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>

frontend/src/components/charts/DefaultLineOptions.vue

@@ -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>

frontend/src/components/dashboard/MainAccount.vue

@@ -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 = {
+            this.chartOptions = DefaultLineOptions.methods.getDefaultOptions();
-                responsive: true,
+
-                maintainAspectRatio: false
-            };
 
             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
                 });

frontend/src/components/dashboard/MainAccountChart.vue

@@ -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)

resources/views/v2/layout/default.twig

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ trans('config.html_language') }}">
 <head>
     <base href="{{ route('index') }}/">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="locale" content="{{ locale|replace({'_':'-'}) }}">
     <meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>

resources/views/v2/partials/layout/sidebar.twig

@@ -1,7 +1,7 @@
 <aside class="main-sidebar sidebar-dark-primary elevation-4">
     <!-- Brand Logo -->
     <a href="{{ route('index') }}" class="brand-link">
-        <img src="v2/dist/img/firefly-iii-logo.png" alt="Firefly III" class="brand-image"
+        <img src="v2/images/firefly-iii-logo.png" alt="Firefly III" class="brand-image"
              style="opacity: .8"> <!--  img-circle elevation-3 -->
         <span class="brand-text font-weight-light">Firefly III</span>
     </a>