Merge pull request #5322 from msupply-foundation/5137.4

5137.4

client/packages/common/src/intl/locales/en/common.json

@@ -528,7 +528,6 @@
   "label.age-months-count_other": "{{count}} months",
   "label.age-years_one": "{{count}} year",
   "label.age-years_other": "{{count}} years",
-  "label.all-requested-quantity": "Other requested",
   "label.allocated": "Allocated",
   "label.already-issued": "Issued",
   "label.amc": "AMC",
@@ -848,7 +847,9 @@
   "label.order-quantity": "Requested quantity",
   "label.order-type": "Order Type",
   "label.other-facility": "Other facility",
+  "label.other-requested-quantity": "Other requested",
   "label.our-soh": "Our SOH",
+  "label.our-stock": "Our Stock",
   "label.out-of-stock": "Out of stock",
   "label.outbound-shipment": "Outbound shipment",
   "label.outer-pack-size": "Outer pack size",

client/packages/common/src/intl/locales/es/common.json

@@ -404,7 +404,7 @@
   "label.age-months-and_other": "months {{count}}, ",
   "label.age-months-count_one": "{{count}} mes",
   "label.age-months-count_other": "{{count}} meses",
-  "label.all-requested-quantity": "Otro solicitado",
+  "label.other-requested-quantity": "Otro solicitado",
   "label.allocated": "Asignado",
   "label.already-issued": "Enviado",
   "label.amc": "AMC",

client/packages/common/src/intl/locales/fr/common.json

@@ -488,7 +488,7 @@
   "label.age-months-and_other": "{{count}} mois, ",
   "label.age-months-count_one": "{{count}} mois",
   "label.age-months-count_other": "{{count}} mois",
-  "label.all-requested-quantity": "Autres",
+  "label.other-requested-quantity": "Autres",
   "label.allocated": "Alloué(e)",
   "label.already-issued": "Livrés",
   "label.amc": "CMM",

client/packages/common/src/intl/locales/pt/common.json

@@ -362,7 +362,7 @@
   "label.age-months-count_other": "{{count}} meses",
   "label.age-months-from": "Idade a partir de (meses)",
   "label.age-months-to": "Idade em (meses)",
-  "label.all-requested-quantity": "Outro requisitado",
+  "label.other-requested-quantity": "Outro requisitado",
   "label.allocated": "Alocado",
   "label.already-issued": "Emitido",
   "label.amc": "CMM",

client/packages/common/src/intl/locales/ru/common.json

@@ -465,7 +465,7 @@
   "label.age-days_other": "{{count}} дней",
   "label.age-months-and_one": "{{count}} месяц, ",
   "label.age-months-and_other": "{{count}} месяцев, ",
-  "label.all-requested-quantity": "Другие запрашиваемые",
+  "label.other-requested-quantity": "Другие запрашиваемые",
   "label.allocated": "Выделено",
   "label.already-issued": "Выдано",
   "label.amc": "Среднее Месячное Потребление",

client/packages/common/src/intl/locales/tet/common.json

@@ -206,7 +206,7 @@
   "label.add-charges": "Aumenta Cobrancas",
   "label.add-new-line": "Aumenta lina foun",
   "label.address": "Enderesu",
-  "label.all-requested-quantity": "Pedidu seluk",
+  "label.other-requested-quantity": "Pedidu seluk",
   "label.allocated": "Aloka Ona",
   "label.amc": "AMC",
   "label.amount": "Montante",

client/packages/common/src/ui/components/charts/NewValueBar/NewValueBar.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { StoryFn, Meta } from '@storybook/react';
+import { NewValueBar } from './NewValueBar';
+
+const Template: StoryFn<typeof NewValueBar> = ({ value, total, colour }) => (
+  <Box display="flex" width="25%">
+    <NewValueBar value={value} total={total} colour={colour} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+export const NoDividers = Template.bind({});
+export const BothDividers = Template.bind({});
+
+Default.args = {
+  value: 10,
+  total: 20,
+  colour: 'gray.main',
+};
+
+NoDividers.args = {
+  value: 10,
+  total: 20,
+  colour: 'gray.main',
+};
+
+BothDividers.args = {
+  value: 10,
+  total: 20,
+  colour: 'gray.main',
+};
+
+export default {
+  title: 'Charts/ValueBar',
+  component: NewValueBar,
+} as Meta<typeof NewValueBar>;

client/packages/common/src/ui/components/charts/NewValueBar/NewValueBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, Typography } from '@openmsupply-client/common';
+import { useFormatNumber } from '@common/intl';
+
+const MIN_FLEX_BASIS_TO_SHOW_VALUE = 5;
+
+interface ValueBarProps {
+  value: number;
+  total: number;
+  colour: string;
+}
+
+export const NewValueBar = ({ value, total, colour }: ValueBarProps) => {
+  const formatNumber = useFormatNumber();
+  if (value === 0) return null;
+
+  const flexBasis = Math.min(Math.round((100 * value) / total), 100);
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" width="100%">
+        <Box flexBasis={`${flexBasis}%`} flexGrow={1}>
+          <Box sx={{ backgroundColor: colour, height: '20px' }}>
+            {flexBasis > MIN_FLEX_BASIS_TO_SHOW_VALUE ? (
+              <Typography
+                fontSize={12}
+                sx={{
+                  color: 'primary.contrastText',
+                  flex: 1,
+                  justifyContent: 'center',
+                  display: 'flex',
+                  fontWeight: 'bold',
+                }}
+                component="div"
+              >
+                {formatNumber.round(value)}
+              </Typography>
+            ) : null}
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+};

client/packages/common/src/ui/components/charts/NewValueBar/index.ts

@@ -0,0 +1 @@
+export * from './NewValueBar';

client/packages/common/src/ui/components/charts/index.ts

@@ -39,3 +39,4 @@ export {
 };
 
 export * from './ValueBar';
+export * from './NewValueBar';