@hestia-earth/ui-components 0.33.15 → 0.33.16

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

@@ -1,15 +1,16 @@
 import Chart from 'chart.js';
 import { ChartPlugin } from './models';
 export declare const defaultBarDrawSettings: {
-    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;
+    xPosFn: (x: number, index: number, width: number, chart: Chart, data?: number) => number;
+    yPosFn: (y: number, index: number, height: number, chart: Chart, data?: number) => number;
+    colorFn: (m: any, index: number, chart: Chart, data?: number) => string;
     textFn: (m: {
         label: string;
         data: number;
     }, index: number, chart: Chart) => string | [string, string];
     font: string;
     maxWidth: number;
+    emptyValueLabel: string;
 };
 export type BarDrawSettings = Partial<typeof defaultBarDrawSettings>;
 export declare const afterBarDrawPlugin: (settings?: BarDrawSettings) => ChartPlugin;

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

@@ -1074,19 +1074,23 @@ function isMouseInsideCircle(event, circleCenter, circleRadius) {
 }
 
 const defaultBarDrawSettings = {
-    xPosFn: (x, index, width, chart) => x + 10,
-    yPosFn: (y, index, height, chart) => y + 3,
-    colorFn: (m, index, chart) => 'black',
+    xPosFn: (x, index, width, chart, data) => x + 10,
+    yPosFn: (y, index, height, chart, data) => y + 3,
+    colorFn: (m, index, chart, data) => 'black',
     textFn: (m, index, chart) => `${m.label} - ${toPrecision(m.data)} kg`,
     font: '14px Lato',
-    maxWidth: 90
+    maxWidth: 90,
+    emptyValueLabel: 'No data'
 };
 const afterBarDrawPlugin = settings => ({
     afterDraw: (chart) => {
         if (!chart.data.datasets?.length) {
             return;
         }
-        const { xPosFn, yPosFn, colorFn, textFn, maxWidth, font } = { ...defaultBarDrawSettings, ...(settings ?? {}) };
+        const { xPosFn, yPosFn, colorFn, textFn, maxWidth, font, emptyValueLabel } = {
+            ...defaultBarDrawSettings,
+            ...(settings ?? {})
+        };
         const { ctx } = chart;
         ctx.save();
         const height = chart.chartArea.bottom - chart.chartArea.top;
@@ -1098,21 +1102,19 @@ const afterBarDrawPlugin = settings => ({
             const { x, y } = _view;
             const label = _model.label;
             const data = chart.data.datasets[_datasetIndex].data[_index];
-            //data should be a number
-            if (typeof data !== 'number') {
-                return;
-            }
-            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, chart);
-            if (Array.isArray(text)) {
-                ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
-                ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
-            }
-            else {
-                ctx.fillText(text, xPos, yPos, maxWidth);
+            const xPos = xPosFn(x, index, width, chart, data);
+            const yPos = yPosFn(y, index, height, chart, data);
+            const text = typeof data === 'number' ? textFn({ label, data }, index, chart) : emptyValueLabel;
+            if (text) {
+                ctx.font = font;
+                ctx.fillStyle = colorFn(_view, index, chart, data);
+                if (Array.isArray(text)) {
+                    ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
+                    ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
+                }
+                else {
+                    ctx.fillText(text, xPos, yPos, maxWidth);
+                }
             }
         });
     }