diff --git a/frontend/package.json b/frontend/package.json index 18c3c97c61..8160756921 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,13 +29,13 @@ "admin-lte": "^3.1.0", "bootstrap": "^4.6.0", "bootstrap-vue": "^2.21.2", + "chart.js": "^3.0.2", "icheck-bootstrap": "^3.0.1", "jquery-ui": "^1.12.1", "leaflet": "^1.7.1", "overlayscrollbars": "^1.13.1", "sortablejs": "^1.13.0", "v-calendar": "^2.3.0", - "vue-chartjs": "^3.5.1", "vue-typeahead-bootstrap": "^2.8.0", "vue2-leaflet": "^2.7.0" } diff --git a/frontend/src/components/charts/DataConverter.vue b/frontend/src/components/charts/DataConverter.vue index e867404ad4..c7ccbee79b 100644 --- a/frontend/src/components/charts/DataConverter.vue +++ b/frontend/src/components/charts/DataConverter.vue @@ -32,20 +32,20 @@ export default { convertChart(dataSet) { this.dataSet = dataSet; this.newDataSet = { - count: 0, + //count: 0, labels: [], datasets: [] } this.getLabels(); this.getDataSets(); - this.newDataSet.count = this.newDataSet.datasets.length; + //this.newDataSet.count = this.newDataSet.datasets.length; return this.newDataSet; }, colorizeBarData(dataSet) { this.dataSet = dataSet; this.newDataSet = { - count: 0, + //count: 0, labels: [], datasets: [] }; @@ -79,7 +79,7 @@ export default { //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; + //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]; @@ -94,7 +94,7 @@ export default { colorizeLineData(dataSet) { this.dataSet = dataSet; this.newDataSet = { - count: 0, + //count: 0, labels: [], datasets: [] }; @@ -128,10 +128,10 @@ export default { //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; + //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]; + let dataset = this.dataSet.datasets[setKey]; dataset.fill = false; dataset.backgroundColor = dataset.borderColor = fillColors[setKey]; this.newDataSet.datasets.push(dataset); @@ -168,7 +168,7 @@ export default { newSet.type = oldSet.type; newSet.currency_symbol = oldSet.currency_symbol; newSet.currency_code = oldSet.currency_code; - newSet.yAxisID = oldSet.yAxisID; + //newSet.yAxisID = oldSet.yAxisID; newSet.data = []; for (const entryLabel in oldSet.entries) { if (oldSet.entries.hasOwnProperty(entryLabel)) { diff --git a/frontend/src/components/charts/DefaultLineOptions.vue b/frontend/src/components/charts/DefaultLineOptions.vue index 4d0a901719..e82e869b6a 100644 --- a/frontend/src/components/charts/DefaultLineOptions.vue +++ b/frontend/src/components/charts/DefaultLineOptions.vue @@ -79,67 +79,95 @@ export default { return sections; }, getDefaultOptions() { - var self = this; return { - legend: { - display: false, - }, - animation: { - duration: 0, - }, responsive: true, maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + animations: false, + elements: { line: { cubicInterpolationMode: 'monotone' } }, scales: { - xAxes: [ - { - gridLines: { - display: false - }, - ticks: { - // break ticks when too long - callback: function (value, index, values) { - // date format - let dateObj = new Date(value); - let options = {year: 'numeric', month: 'long', day: 'numeric'}; - let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj); - //console.log(); - //return self.formatLabel(value, 20); - return self.formatLabel(str, 20); - } + x: { + //type: 'linear' + grid: { + display: false, + }, + ticks: { + callback: function (value, index, values) { + //return this.getLabelForValue(value); + let dateObj = new Date(this.getLabelForValue(value)); + let options = {year: 'numeric', month: 'long', day: 'numeric'}; + let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj); + return str; + // // //console.log(); + // // //return self.formatLabel(value, 20); + // // return self.formatLabel(str, 20); } } - ], - 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(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue); - }, - beginAtZero: true - } + }, + y: { + suggestedMin: 0 - }] - }, - tooltips: { - mode: 'index', - 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(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel) - - return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString; - } + //type: 'linear' } - } + }, + + // scales: { + // xAxes: [ + // { + // gridLines: { + // display: false + // }, + // ticks: { + // // break ticks when too long + // callback: function (value, index, values) { + // return value; + // // date format + // // let dateObj = new Date(value); + // // let options = {year: 'numeric', month: 'long', day: 'numeric'}; + // // let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj); + // // //console.log(); + // // //return self.formatLabel(value, 20); + // // return self.formatLabel(str, 20); + // } + // } + // } + // ], + // yAxes: [{ + // display: true, + // ticks: { + // callback: function (tickValue) { + // "use strict"; + // return tickValue; + // // let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR'; + // // return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue); + // }, + // beginAtZero: true + // } + // + // }] + // }, + // tooltips: { + // mode: 'index', + // // 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(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel) + // // + // // return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString; + // // } + // // } + // } }; } diff --git a/frontend/src/components/dashboard/MainAccount.vue b/frontend/src/components/dashboard/MainAccount.vue index f63b39a6eb..cfa734faa9 100644 --- a/frontend/src/components/dashboard/MainAccount.vue +++ b/frontend/src/components/dashboard/MainAccount.vue @@ -24,8 +24,8 @@

{{ $t('firefly.yourAccounts') }}

-
- +
+
@@ -33,6 +33,9 @@
+
+ {{ $t('firefly.timezone_difference', {local: localTimeZone, system: systemTimeZone}) }} +