Merge branch 'improvement/barchart-multiline-tick-labels' into q/1.0

Author: bert-e

src/lib/components/charts/common/SharedComponents.tsx

@@ -31,6 +31,22 @@ const TickContainer = styled.div`
   justify-content: center;
 `;
 
+// Stacks a multi-line tick label (e.g. time + date on a midnight crossover)
+// tightly. The reduced line-height keeps the two lines visually grouped; each
+// line stays its own ConstrainedText so it truncates independently.
+const MultilineTickContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  & span {
+    line-height: 1.1;
+  }
+`;
+
+// Extra height granted per wrapped line so a second line is not clipped.
+const TICK_LINE_HEIGHT = 12;
+
 interface ChartLoadingOrErrorProps {
   height: number;
 }
@@ -158,42 +174,57 @@ export const CustomTick = ({
       1000
       : 0;
 
+  const tooltipStyle = {
+    backgroundColor: theme.backgroundLevel1,
+    padding: spacing.r10,
+    borderRadius: spacing.r8,
+    border: `1px solid ${theme.border}`,
+    position: 'absolute' as const,
+  };
+
+  const labelLine = (content: React.ReactNode, key?: React.Key) => (
+    <ConstrainedText
+      key={key}
+      color="textSecondary"
+      text={<Text variant="Smaller">{content}</Text>}
+      centered
+      tooltipStyle={tooltipStyle}
+    />
+  );
+
+  // A category label may carry a second line (e.g. a date on a midnight
+  // crossover) separated by "\n"; those lines are stacked tightly.
+  const lines = type.type === 'time' ? [] : String(payload.value).split('\n');
+  const isMultiline = lines.length > 1;
+
+  const content =
+    type.type === 'time' ? (
+      labelLine(
+        <FormattedDateTime
+          format={formatXAxisDate(duration)}
+          value={new Date(payload.value)}
+        />,
+      )
+    ) : isMultiline ? (
+      <MultilineTickContainer>
+        {lines.map((line, index) => labelLine(line, index))}
+      </MultilineTickContainer>
+    ) : (
+      labelLine(String(payload.value))
+    );
+
   return (
     <foreignObject
       x={centerX}
       y={numY - 10}
       width={tickWidth}
-      height={30}
+      height={30 + (isMultiline ? (lines.length - 1) * TICK_LINE_HEIGHT : 0)}
       style={{
         overflow: 'visible',
         pointerEvents: 'none',
       }}
     >
-      <TickContainer>
-        <ConstrainedText
-          color="textSecondary"
-          text={
-            <Text variant="Smaller">
-              {type.type === 'time' ? (
-                <FormattedDateTime
-                  format={formatXAxisDate(duration)}
-                  value={new Date(payload.value)}
-                />
-              ) : (
-                String(payload.value)
-              )}
-            </Text>
-          }
-          centered
-          tooltipStyle={{
-            backgroundColor: theme.backgroundLevel1,
-            padding: spacing.r10,
-            borderRadius: spacing.r8,
-            border: `1px solid ${theme.border}`,
-            position: 'absolute',
-          }}
-        />
-      </TickContainer>
+      <TickContainer>{content}</TickContainer>
     </foreignObject>
   );
 };

src/lib/components/date/FormattedDateTime.tsx

@@ -74,6 +74,17 @@ export const DAY_MONTH_ABBREVIATED = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Day month abbreviated as a plain string, with the locale comma
+ * stripped and "Sept" normalised to the 3-letter "Sep". Shared by the
+ * `day-month-abbreviated` formatter case and chart label helpers.
+ * @example 06 Jun
+ */
+export const formatDayMonthAbbreviated = (value: Date): string =>
+  DAY_MONTH_ABBREVIATED.format(value)
+    .replace(',', '')
+    .replace(/Sept/g, 'Sep');
+
 /**
  * @description Day month abbreviated formatter. Used for describing long term date.
  * @example 06 Oct 25
@@ -339,13 +350,7 @@ export const FormattedDateTime = ({
         </>
       );
     case 'day-month-abbreviated':
-      return (
-        <>
-          {DAY_MONTH_ABBREVIATED.format(value)
-            .replace(',', '')
-            .replace(/Sept/g, 'Sep')}
-        </>
-      );
+      return <>{formatDayMonthAbbreviated(value)}</>;
     case 'chart-long-term-date':
       return (
         <>

src/lib/index.ts

@@ -72,7 +72,11 @@ export { Icon } from './components/icon/Icon.component';
 export { StatusWrapper } from './components/statuswrapper/Statuswrapper.component';
 export { Stack, Wrap, spacing } from './spacing';
 export { Form, FormSection, FormGroup } from './components/form/Form.component';
-export { FormattedDateTime } from './components/date/FormattedDateTime';
+export {
+  FormattedDateTime,
+  TIME_FORMATER,
+  formatDayMonthAbbreviated,
+} from './components/date/FormattedDateTime';
 export { getDateDaysDiff } from './components/date/dateDiffer';
 export { IconHelp } from './components/iconhelper/IconHelper';
 export { Dropzone } from './components/dropzone/Dropzone';

stories/BarChart/barchart.stories.tsx

@@ -986,6 +986,53 @@ export const Histogram: Story = {
   },
 };
 
+/**
+ * A bucket label may contain a `"\n"` to render on two lines — here the bucket
+ * that crosses midnight shows the date (`02 Jun`) on a second line. The caller
+ * supplies these strings; the chart renders them as-is via `CustomTick`'s
+ * multi-line support.
+ */
+export const HistogramWithMultilineLabels: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const labels = [
+      '11:00',
+      '14:00',
+      '17:00',
+      '20:00',
+      '23:00',
+      '02:00\n02 Jun',
+      '05:00',
+      '08:00',
+    ];
+    const values = [12, 30, 45, 50, 42, 20, 15, 25];
+    const histogramData = [
+      {
+        label: 'Requests',
+        data: labels.map(
+          (label, i) => [label, values[i]] as [string, number],
+        ),
+      },
+    ];
+    return (
+      <div style={{ width: '50%', padding: spacing.r16 }}>
+        <ChartLegendWrapper
+          colorSet={{
+            Requests: theme.statusHealthy,
+          }}
+        >
+          <Barchart
+            type={{ type: 'category', gap: 0 }}
+            bars={histogramData}
+            title="Requests over 24h"
+          />
+          <ChartLegend shape="rectangle" />
+        </ChartLegendWrapper>
+      </div>
+    );
+  },
+};
+
 export const ModernPreset: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;