@balena/ui-shared-components 12.2.2-build-renovate-major-7-react-router-dom-6a1be028886aeeefaed345cf0c1cc563fe73b1ba-1 → 12.3.0

package/dist/components/HorizontalBarChart/index.d.ts

@@ -0,0 +1,10 @@
+export interface HorizontalBarChartProps {
+    items: Array<{
+        color: string;
+        title: string;
+        count: number;
+    }>;
+    resourceLabel?: string;
+    resourceLabelPlural?: string;
+}
+export declare const HorizontalBarChart: ({ items, resourceLabel, resourceLabelPlural, }: HorizontalBarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HorizontalBarChart/index.js

@@ -0,0 +1,56 @@
+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';
+import { useMemo } from 'react';
+const Bar = styled('div')({
+    width: '100%',
+    height: 24,
+    display: 'flex',
+    borderRadius: token('shape.borderRadius.sm'),
+    overflow: 'hidden',
+    gap: 2,
+});
+const BarItem = styled('span')({
+    minWidth: 3,
+});
+const Legend = styled('ul')({
+    display: 'inline',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+});
+const LegendItem = styled('li')({
+    display: 'inline-flex',
+    marginRight: token('spacing.2'),
+    alignItems: 'center',
+    '&:before': {
+        content: '""',
+        backgroundColor: 'currentColor',
+        borderRadius: '50%',
+        width: '10px',
+        height: '10px',
+        display: 'inline-block',
+        marginRight: token('spacing.1'),
+    },
+});
+export const HorizontalBarChart = ({ items, resourceLabel, resourceLabelPlural, }) => {
+    const { t } = useTranslation();
+    const totalItems = useMemo(() => items.reduce((sum, item) => sum + item.count, 0), [items]);
+    const filteredItems = useMemo(() => items.filter((item) => item.count > 0), [items]);
+    const getTotalResourcesLabel = (count) => {
+        if (resourceLabel && resourceLabelPlural) {
+            return t('labels.total_resources', {
+                count,
+                resource: count > 1 ? resourceLabelPlural : resourceLabel,
+            });
+        }
+        else {
+            return count;
+        }
+    };
+    return (_jsxs(Stack, { sx: { gap: token('spacing.2') }, children: [_jsx(Bar, { children: filteredItems.map((item) => (_jsx(Tooltip, { title: `${item.title}: ${getTotalResourcesLabel(item.count)}`, children: _jsx(BarItem, { sx: {
+                            backgroundColor: item.color,
+                            width: `${Math.floor((item.count / totalItems) * 100)}%`,
+                        } }) }, item.title))) }), _jsx(Legend, { children: filteredItems.map((item) => (_jsx(Tooltip, { title: getTotalResourcesLabel(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,7 @@ const translationMap = {
     'labels.views': 'Views',
     'labels.filter_one': 'Filter',
     'labels.filter_other': 'Filters',
+    'labels.total_resources': '{{count}} {{resource}}',
     'labels.save_current_view': 'Save current view',
     'aria_labels.remove_view': 'Delete the selected view',
     'aria_labels.create_view': 'Create named view',

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { FileWidget } from './components/Form/Widgets/FileWidget';
 export type { OnFileReadParams } from './components/Form/Widgets/FileWidget';
 export { PasswordWidget } from './components/Form/Widgets/PasswordWidget';
 export { SelectWidget } from './components/Form/Widgets/SelectWidget';
+export { HorizontalBarChart } from './components/HorizontalBarChart';
 export { Code } from './components/Code';
 export { CookiesBanner } from './components/CookiesBanner';
 export type { CollapsedListProps } from './components/CollapsedList';

package/dist/index.js

@@ -7,6 +7,7 @@ export { RJSForm, Templates as RjsfTemplates } from './components/Form';
 export { FileWidget } from './components/Form/Widgets/FileWidget';
 export { PasswordWidget } from './components/Form/Widgets/PasswordWidget';
 export { SelectWidget } from './components/Form/Widgets/SelectWidget';
+export { HorizontalBarChart } from './components/HorizontalBarChart';
 export { Code } from './components/Code';
 export { CookiesBanner } from './components/CookiesBanner';
 export { CollapsedList } from './components/CollapsedList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.2.2-build-renovate-major-7-react-router-dom-6a1be028886aeeefaed345cf0c1cc563fe73b1ba-1",
+  "version": "12.3.0",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -44,7 +44,7 @@
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
     "react-markdown": "^10.0.0",
-    "react-router-dom": "^7.0.0",
+    "react-router-dom": "^6.28.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-15T16:00:18.395Z"
+    "publishedAt": "2025-04-16T08:30:07.754Z"
   }
 }