fix(ui): tune charts a bit

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] || '') : '' }}
         </text>
       </template>
 
@@ -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]) : '' }}
     </Tooltip>
   </div>
@@ -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 },

src/components/Charts/LineChart.vue

@@ -41,7 +41,7 @@
           :x="xs[i - 1]"
           text-anchor="middle"
         >
-          {{ xLabels[i - 1] || '' }}
+          {{ formatX(xLabels[i - 1] || '') }}
         </text>
       </template>
 
@@ -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]) : '' }}
     </Tooltip>
   </div>
@@ -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 },

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"
       />
     </template>
@@ -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: {

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() {

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}`;
+}