From 2544687ab3a527a5e545fd3d470f0000a8ab9c48 Mon Sep 17 00:00:00 2001 From: 18alantom <2.alan.tom@gmail.com> Date: Fri, 28 Jan 2022 00:37:43 +0530 Subject: [PATCH] fix(ui): tune charts a bit --- src/components/Charts/BarChart.vue | 23 ++++++++++++----------- src/components/Charts/LineChart.vue | 7 ++++--- src/pages/Dashboard/Cashflow.vue | 4 +++- src/pages/Dashboard/ProfitAndLoss.vue | 10 ++++++++-- src/utils.js | 8 ++++++++ 5 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/components/Charts/BarChart.vue b/src/components/Charts/BarChart.vue index 0dcc57cd..1945bd7d 100644 --- a/src/components/Charts/BarChart.vue +++ b/src/components/Charts/BarChart.vue @@ -50,7 +50,7 @@ :x="xs[i - 1]" text-anchor="middle" > - {{ xLabels[i - 1] || '' }} + {{ j % skipXLabel === 0 ? formatX(xLabels[i - 1] || '') : '' }} @@ -121,7 +121,7 @@ class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2" :style="{ borderColor: activeColor }" > - {{ xi > -1 ? xLabels[xi] : '' }} + {{ xi > -1 ? xLabels[xi] : '' }} – {{ yi > -1 ? format(points[yi][xi]) : '' }} @@ -132,6 +132,7 @@ import Tooltip from '../Tooltip.vue'; export default { props: { + skipXLabel: { type: Number, default: 2 }, colors: { type: Array, default: () => [] }, xLabels: { type: Array, default: () => [] }, yLabelDivisions: { type: Number, default: 4 }, @@ -139,27 +140,27 @@ export default { drawAxis: { type: Boolean, default: false }, drawXGrid: { type: Boolean, default: true }, viewBoxHeight: { type: Number, default: 500 }, - aspectRatio: { type: Number, default: 1.75 }, + aspectRatio: { type: Number, default: 2.1 }, axisPadding: { type: Number, default: 30 }, - pointsPadding: { type: Number, default: 24 }, - xLabelOffset: { type: Number, default: 5 }, - yLabelOffset: { type: Number, default: 5 }, + pointsPadding: { type: Number, default: 40 }, + xLabelOffset: { type: Number, default: 20 }, + yLabelOffset: { type: Number, default: 0 }, gridColor: { type: String, default: 'rgba(0, 0, 0, 0.2)' }, zeroLineColor: { type: String, default: 'rgba(0, 0, 0, 0.2)' }, axisColor: { type: String, default: 'rgba(0, 0, 0, 0.5)' }, - thickness: { type: Number, default: 5 }, axisThickness: { type: Number, default: 1 }, gridThickness: { type: Number, default: 0.5 }, yMin: { type: Number, default: null }, yMax: { type: Number, default: null }, format: { type: Function, default: (n) => n.toFixed(1) }, formatY: { type: Function, default: prefixFormat }, - fontSize: { type: Number, default: 18 }, + formatX: { type: Function, default: (v) => v }, + fontSize: { type: Number, default: 25 }, fontColor: { type: String, default: '#415668' }, bottom: { type: Number, default: 0 }, - width: { type: Number, default: 30 }, - left: { type: Number, default: 55 }, - radius: { type: Number, default: 15 }, + width: { type: Number, default: 34 }, + left: { type: Number, default: 65 }, + radius: { type: Number, default: 17 }, extendGridX: { type: Number, default: -20 }, tooltipDispDistThreshold: { type: Number, default: 20 }, drawZeroLine: { type: Boolean, default: true }, diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue index 2f440543..2daf6d6e 100644 --- a/src/components/Charts/LineChart.vue +++ b/src/components/Charts/LineChart.vue @@ -41,7 +41,7 @@ :x="xs[i - 1]" text-anchor="middle" > - {{ xLabels[i - 1] || '' }} + {{ formatX(xLabels[i - 1] || '') }} @@ -119,7 +119,7 @@ class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-l-2" :style="{ borderColor: colors[yi] }" > - {{ xi > -1 ? xLabels[xi] : '' }} + {{ xi > -1 ? xLabels[xi] : '' }} – {{ yi > -1 ? format(points[yi][xi]) : '' }} @@ -140,7 +140,7 @@ export default { aspectRatio: { type: Number, default: 3.5 }, axisPadding: { type: Number, default: 30 }, pointsPadding: { type: Number, default: 24 }, - xLabelOffset: { type: Number, default: 5 }, + xLabelOffset: { type: Number, default: 20 }, yLabelOffset: { type: Number, default: 5 }, gridColor: { type: String, default: 'rgba(0, 0, 0, 0.2)' }, axisColor: { type: String, default: 'rgba(0, 0, 0, 0.5)' }, @@ -151,6 +151,7 @@ export default { yMax: { type: Number, default: null }, format: { type: Function, default: (n) => n.toFixed(1) }, formatY: { type: Function, default: prefixFormat }, + formatX: { type: Function, default: (v) => v }, fontSize: { type: Number, default: 18 }, fontColor: { type: String, default: '#415668' }, bottom: { type: Number, default: 0 }, diff --git a/src/pages/Dashboard/Cashflow.vue b/src/pages/Dashboard/Cashflow.vue index b8392a68..63106243 100644 --- a/src/pages/Dashboard/Cashflow.vue +++ b/src/pages/Dashboard/Cashflow.vue @@ -22,6 +22,7 @@ :points="chartData.points" :x-labels="chartData.xLabels" :format="chartData.format" + :format-x="chartData.formatX" :y-max="chartData.yMax" /> @@ -102,6 +103,7 @@ import Cashflow from '../../../reports/Cashflow/Cashflow'; import { getDatesAndPeriodicity } from './getDatesAndPeriodicity'; import LineChart from '@/components/Charts/LineChart.vue'; import { getYMax } from '@/components/Charts/chartUtils'; +import { formatXLabels } from '@/utils'; export default { name: 'Cashflow', @@ -134,7 +136,7 @@ export default { const colors = ['#2490EF', '#B7BFC6']; const format = (value) => frappe.format(value ?? 0, 'Currency'); const yMax = getYMax(points); - return { points, xLabels, colors, format, yMax }; + return { points, xLabels, colors, format, yMax, formatX:formatXLabels }; }, }, methods: { diff --git a/src/pages/Dashboard/ProfitAndLoss.vue b/src/pages/Dashboard/ProfitAndLoss.vue index 82f543e7..1f89f8cd 100644 --- a/src/pages/Dashboard/ProfitAndLoss.vue +++ b/src/pages/Dashboard/ProfitAndLoss.vue @@ -15,6 +15,7 @@ :points="chartData.points" :x-labels="chartData.xLabels" :format="chartData.format" + :format-x="chartData.formatX" :y-max="chartData.yMax" :y-min="chartData.yMin" /> @@ -33,6 +34,7 @@ import ProfitAndLoss from '../../../reports/ProfitAndLoss/ProfitAndLoss'; import { getDatesAndPeriodicity } from './getDatesAndPeriodicity'; import BarChart from '@/components/Charts/BarChart.vue'; import { getYMax, getYMin } from '@/components/Charts/chartUtils'; +import { formatXLabels } from '@/utils'; export default { name: 'ProfitAndLoss', @@ -50,22 +52,26 @@ export default { this.setData(); }, watch: { - period: 'render', + period: 'setData', }, computed: { chartData() { const points = [this.periodList.map((p) => this.data[p])]; + console.log(this.period); + console.log(this.data, this.periodList); + console.log(points); const colors = [{ positive: '#2490EF', negative: '#B7BFC6' }]; const format = (value) => frappe.format(value ?? 0, 'Currency'); const yMax = getYMax(points); const yMin = getYMin(points); return { - xLabels: this.periodList.map((p) => p.split(' ')[0]), + xLabels: this.periodList, points, format, colors, yMax, yMin, + formatX: formatXLabels, }; }, hasData() { diff --git a/src/utils.js b/src/utils.js index 3c6ff756..15d72a42 100644 --- a/src/utils.js +++ b/src/utils.js @@ -404,3 +404,11 @@ export function convertPesaValuesToFloat(obj) { obj[key] = obj[key].float; }); } + +export function formatXLabels(label) { + // Format: Mmm YYYY -> Mm YY + let [month, year] = label.split(' '); + year = year.slice(2); + + return `${month} ${year}`; +}