@hestia-earth/ui-components 0.32.63 → 0.32.64

package/chart/plugins/afterBarDraw.plugin.d.ts

@@ -1,12 +1,13 @@
+import Chart from 'chart.js';
 import { ChartPlugin } from './models';
 export declare const defaultBarDrawSettings: {
-    xPosFn: (x: number, index: number, width: number) => number;
-    yPosFn: (y: number, index: number) => number;
-    colorFn: (m: any, index: number) => string;
+    xPosFn: (x: number, index: number, width: number, chart: Chart) => number;
+    yPosFn: (y: number, index: number, height: number, chart: Chart) => number;
+    colorFn: (m: any, index: number, chart: Chart) => string;
     textFn: (m: {
         label: string;
         data: number;
-    }, index: number) => string | [string, string];
+    }, index: number, chart: Chart) => string | [string, string];
     font: string;
     maxWidth: number;
 };

package/fesm2022/hestia-earth-ui-components.mjs

@@ -1059,21 +1059,22 @@ function isMouseInsideCircle(event, circleCenter, circleRadius) {
 }
 
 const defaultBarDrawSettings = {
-    xPosFn: (x, index, width) => x + 10,
-    yPosFn: (y, index) => y + 3,
-    colorFn: (m, index) => 'black',
-    textFn: (m, index) => `${m.label} - ${toPrecision(m.data)} kg`,
+    xPosFn: (x, index, width, chart) => x + 10,
+    yPosFn: (y, index, height, chart) => y + 3,
+    colorFn: (m, index, chart) => 'black',
+    textFn: (m, index, chart) => `${m.label} - ${toPrecision(m.data)} kg`,
     font: '14px Lato',
     maxWidth: 90
 };
 const afterBarDrawPlugin = settings => ({
-    afterDraw: chart => {
+    afterDraw: (chart) => {
         if (!chart.data.datasets?.length) {
             return;
         }
         const { xPosFn, yPosFn, colorFn, textFn, maxWidth, font } = { ...defaultBarDrawSettings, ...(settings ?? {}) };
         const { ctx } = chart;
         ctx.save();
+        const height = chart.chartArea.bottom - chart.chartArea.top;
         const width = chart.chartArea.right - chart.chartArea.left;
         chart
             .getDatasetMeta(0)
@@ -1086,11 +1087,11 @@ const afterBarDrawPlugin = settings => ({
             if (typeof data !== 'number') {
                 return;
             }
-            const xPos = xPosFn(x, index, width);
-            const yPos = yPosFn(y, index);
-            const text = textFn({ label, data }, index);
+            const xPos = xPosFn(x, index, width, chart);
+            const yPos = yPosFn(y, index, height, chart);
+            const text = textFn({ label, data }, index, chart);
             ctx.font = font;
-            ctx.fillStyle = colorFn(_view, index);
+            ctx.fillStyle = colorFn(_view, index, chart);
             if (Array.isArray(text)) {
                 ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
                 ctx.fillText(text[1], xPos, yPos + 5, maxWidth);