@balena/ui-shared-components 12.2.0-build-add-horizontal-bar-chart-d6011a8905d18b98afdadfd7fd669fd599a42369-1 → 12.2.0-build-add-horizontal-bar-chart-a33ee389063b822f47c870ee754354c0372aa9b0-1

package/dist/components/HorizontalBarChart/index.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, styled, Tooltip, Typography } from '@mui/material';
 import { token } from '../../utils/token';
+import { useTranslation } from '../../hooks/useTranslations';
 const Bar = styled('div', {
     name: 'Bar',
     slot: 'bar',
 })({
     width: '100%',
-    height: 30,
+    height: 24,
     display: 'flex',
     borderRadius: token('shape.borderRadius.sm'),
     overflow: 'hidden',
@@ -37,9 +38,17 @@ const LegendItem = styled('li')({
     },
 });
 export const HorizontalBarChart = ({ items }) => {
+    const { t } = useTranslation();
     const total = items.reduce((partialSum, a) => partialSum + a.count, 0);
-    return (_jsxs(Stack, { sx: { gap: token('spacing.2') }, children: [_jsx(Bar, { children: items.map((item) => (_jsx(Tooltip, { title: `${item.title}: ${item.count} devices`, children: _jsx(BarItem, { sx: {
+    const getTotalDevicesLabel = (count) => count > 1
+        ? t('labels.total_devices_other', { count })
+        : t('labels.total_devices_one', { count });
+    return (_jsxs(Stack, { sx: { gap: token('spacing.2') }, children: [_jsx(Bar, { children: items
+                    .filter((item) => item.count > 0)
+                    .map((item) => (_jsx(Tooltip, { title: `${item.title}: ${getTotalDevicesLabel(item.count)}`, children: _jsx(BarItem, { sx: {
                             backgroundColor: item.color,
                             width: `${(item.count / total) * 100}%`,
-                        } }) }, item.title))) }), _jsx(Legend, { children: items.map((item) => (_jsx(Tooltip, { title: `${item.count} devices`, children: _jsx(LegendItem, { style: { color: item.color }, children: _jsx(Typography, { variant: "bodySm", color: token('color.text.subtle'), children: item.title }) }) }, item.title))) })] }));
+                        } }) }, item.title))) }), _jsx(Legend, { children: items
+                    .filter((item) => item.count > 0)
+                    .map((item) => (_jsx(Tooltip, { title: getTotalDevicesLabel(item.count), children: _jsx(LegendItem, { style: { color: item.color }, children: _jsx(Typography, { variant: "bodySm", color: token('color.text.subtle'), children: item.title }) }) }, item.title))) })] }));
 };

package/dist/hooks/useTranslations.js

@@ -59,6 +59,8 @@ const translationMap = {
     'labels.views': 'Views',
     'labels.filter_one': 'Filter',
     'labels.filter_other': 'Filters',
+    'labels.total_devices_one': '{{count}} device',
+    'labels.total_devices_other': '{{count}} devices',
     'labels.save_current_view': 'Save current view',
     'aria_labels.remove_view': 'Delete the selected view',
     'aria_labels.create_view': 'Create named view',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.2.0-build-add-horizontal-bar-chart-d6011a8905d18b98afdadfd7fd669fd599a42369-1",
+  "version": "12.2.0-build-add-horizontal-bar-chart-a33ee389063b822f47c870ee754354c0372aa9b0-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-10T19:39:24.632Z"
+    "publishedAt": "2025-04-10T20:36:44.104Z"
   }
 }