diff --git a/client/components/charts/balance-chart.js b/client/components/charts/balance-chart.js index dc86222975132f622aa371f47ad5d55b6d0a3ca4..02e3bf75755a80ae9524ffe2509003e025337b23 100644 --- a/client/components/charts/balance-chart.js +++ b/client/components/charts/balance-chart.js @@ -48,7 +48,20 @@ function createChartBalance(chartId, account, operations) { /* eslint-disable no-new */ // Create the chart - new Dygraph(document.querySelector(chartId), csv); + new Dygraph(document.querySelector(chartId), csv, { + axes: { + x: { + axisLabelFormatter: date => { + // Undefined means the default locale + let defaultLocale; + return date.toLocaleDateString(defaultLocale, { + year: '2-digit', + month: 'short' + }); + } + } + } + }); /* eslint-enable no-new */ } diff --git a/client/components/charts/in-out-chart.js b/client/components/charts/in-out-chart.js index 86575d962319ba6225e0c00c3414913a7932a211..b1f58a426b9728073270c9e38ef57115940e7605 100644 --- a/client/components/charts/in-out-chart.js +++ b/client/components/charts/in-out-chart.js @@ -1,7 +1,7 @@ import React from 'react'; import c3 from 'c3'; -import { translate as $t, round2 } from '../../helpers'; +import { translate as $t, round2, wellsColors } from '../../helpers'; import ChartComponent from './chart-base'; @@ -20,6 +20,9 @@ function createChartPositiveNegative(chartId, operations) { const POS = 0, NEG = 1, BAL = 2; + // Type -> color + let colorMap = {}; + // Month -> [Positive amount, Negative amount, Diff] let map = new Map; // Datekey -> Date @@ -44,7 +47,7 @@ function createChartPositiveNegative(chartId, operations) { dates.sort((a, b) => a[1] - b[1]); let series = []; - function addSerie(name, mapIndex) { + function addSerie(name, mapIndex, color) { let data = []; for (let j = 0; j < dates.length; j++) { let dk = dates[j][0]; @@ -52,11 +55,12 @@ function createChartPositiveNegative(chartId, operations) { } let serie = [name].concat(data); series.push(serie); + colorMap[name] = color; } - addSerie($t('client.charts.received'), POS); - addSerie($t('client.charts.spent'), NEG); - addSerie($t('client.charts.saved'), BAL); + addSerie($t('client.charts.received'), POS, wellsColors.RECEIVED); + addSerie($t('client.charts.spent'), NEG, wellsColors.SPENT); + addSerie($t('client.charts.saved'), BAL, wellsColors.SAVED); let categories = []; for (let i = 0; i < dates.length; i++) { @@ -82,7 +86,8 @@ function createChartPositiveNegative(chartId, operations) { data: { columns: series, - type: 'bar' + type: 'bar', + colors: colorMap }, bar: { @@ -125,6 +130,10 @@ function createChartPositiveNegative(chartId, operations) { size: { height: SUBCHART_SIZE } + }, + + zoom: { + rescale: true } }); } diff --git a/client/components/operations/amount-well.js b/client/components/operations/amount-well.js index af3a8c4e911640badbbb26ce4b209e83921d1889..dc7310488070ddc4cee42223701f834b26cdf4d3 100644 --- a/client/components/operations/amount-well.js +++ b/client/components/operations/amount-well.js @@ -10,11 +10,11 @@ export default props => { assertHas(props, 'subtitle'); assertHas(props, 'content'); - let style = `well ${props.backgroundColor}`; - return (
-
+
diff --git a/client/components/operations/index.js b/client/components/operations/index.js index 437cef6865674021a85fe30e7c210029bb07c535..7a11ae66afffa6201ffcc09f79115c6333074fc1 100644 --- a/client/components/operations/index.js +++ b/client/components/operations/index.js @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; -import { translate as $t } from '../../helpers'; +import { translate as $t, wellsColors } from '../../helpers'; import { get } from '../../store'; @@ -148,7 +148,7 @@ class OperationsComponent extends React.Component { ref="wells"> { return (
+

+ + { $t('client.settings.weboob_description')} +

+