[#10776] OpenTelemetry > Apply text ellipsis to chart tooltip

Author: jihea-park

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChart.tsx

@@ -65,15 +65,21 @@ export const OpenTelemetryChart = ({
     return chartDataConfig[dataKey].stack ? uniqueId : undefined;
   };
 
+  const chartContainerRef = React.useRef<HTMLDivElement>(null);
+
   return (
-    <ChartContainer config={chartDataConfig} className="w-full h-full p-1.5 aspect-auto">
+    <ChartContainer
+      config={chartDataConfig}
+      className="w-full h-full p-1.5 aspect-auto"
+      ref={chartContainerRef}
+    >
       <ChartComponent
         accessibilityLayer
         data={chartData}
         margin={{ right: 12 }}
         syncId={dashboardId}
       >
-        {OpenTelemetryChartCommon(chartCommonProps)}
+        {OpenTelemetryChartCommon(chartCommonProps, chartContainerRef)}
         {dataKeys.map((key) => (
           <ChartChildComponent
             key={key}

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx

@@ -19,13 +19,12 @@ export interface OpenTelemetryChartCommonProps {
   tooltipConfig?: TooltipProps<number, string> & { showTotal?: boolean };
 }
 
-export const OpenTelemetryChartCommon = ({
-  gridConfig,
-  xAxisConfig,
-  yAxisConfig,
-  tooltipConfig,
-}: OpenTelemetryChartCommonProps) => {
+export const OpenTelemetryChartCommon = (
+  { gridConfig, xAxisConfig, yAxisConfig, tooltipConfig }: OpenTelemetryChartCommonProps,
+  chartContainerRef: React.RefObject<HTMLDivElement>,
+) => {
   const { showTotal, ...restTooltipConfig } = tooltipConfig || {};
+  const chartWidth = chartContainerRef?.current?.offsetWidth || 392;
 
   return (
     <>
@@ -50,6 +49,7 @@ export const OpenTelemetryChartCommon = ({
             labelFormatter={(label) => xAxisConfig?.tickFormatter?.(label, 0) || ''}
             formatter={yAxisConfig?.tickFormatter}
             showTotal={showTotal}
+            chartWidth={chartWidth}
           />
         }
         {...restTooltipConfig}

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartTooltipContent.tsx

@@ -12,6 +12,7 @@ type CustomChartTooltipContentProps = Omit<
 > & {
   formatter?: (value: number, index: number) => string;
   showTotal?: boolean;
+  chartWidth?: number;
 };
 export interface OpenTelemetryChartTooltipContentProps extends CustomChartTooltipContentProps {}
 
@@ -25,6 +26,7 @@ export const OpenTelemetryChartTooltipContent = ({
   labelFormatter = (label) => format(label, 'HH:mm:ss'),
   formatter = (value) => `${value}`,
   showTotal = false,
+  chartWidth,
 }: OpenTelemetryChartTooltipContentProps) => {
   const renderTooltipLabel = () => {
     if (hideLabel || !payload?.length) {
@@ -54,9 +56,14 @@ export const OpenTelemetryChartTooltipContent = ({
 
   return (
     active && (
-      <div className="grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl w-max">
+      <div
+        className="grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl"
+        style={{
+          maxWidth: chartWidth ? chartWidth * 0.8 : 300,
+        }}
+      >
         {renderTooltipLabel()}
-        <div className="grid gap-1.5">
+        <div className="overflow-hidden">
           {tooltipPayload?.map((item, index) => {
             const indicatorColor = item.color;
             // const nestLabel = payload.length === 1 && indicator !== 'dot';
@@ -65,44 +72,39 @@ export const OpenTelemetryChartTooltipContent = ({
               <div
                 key={item.dataKey}
                 className={cn(
-                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                  'flex whitespace-nowrap w-full gap-1.5 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground items-center',
                   indicator === 'dot' && 'items-center',
                 )}
               >
-                <>
-                  <div
-                    className={cn(
-                      'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                      {
-                        'h-2.5 w-2.5': indicator === 'dot',
-                        'w-1': indicator === 'line',
-                        'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
-                        'my-0.5': indicator === 'dashed',
-                      },
-                    )}
-                    style={
-                      {
-                        '--color-bg': indicatorColor,
-                        '--color-border': indicatorColor,
-                      } as React.CSSProperties
-                    }
-                  />
-                  <div
-                    className={cn(
-                      'flex flex-1 justify-between leading-none',
-                      // nestLabel ? 'items-end' : 'items-center',
-                    )}
-                  >
-                    <div className="grid gap-1.5">
-                      <span className="text-muted-foreground">{item.name}</span>
-                    </div>
-                    {item.value && (
-                      <span className="font-mono font-medium tabular-nums text-foreground">
-                        {formatter(item.value as number, index)}
-                      </span>
-                    )}
+                <div
+                  className={cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
+                    'h-2.5 w-2.5': indicator === 'dot',
+                    'w-1 h-3': indicator === 'line',
+                    'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                    'my-0.5': indicator === 'dashed',
+                  })}
+                  style={
+                    {
+                      '--color-bg': indicatorColor,
+                      '--color-border': indicatorColor,
+                    } as React.CSSProperties
+                  }
+                />
+                <div
+                  className={cn(
+                    'inline-flex overflow-hidden w-full',
+                    // nestLabel ? 'items-end' : 'items-center',
+                  )}
+                >
+                  <div className="overflow-hidden text-ellipsis mr-auto">
+                    <span className="text-muted-foreground">{item.name}</span>
                   </div>
-                </>
+                  {item.value && (
+                    <span className="font-mono font-medium tabular-nums text-foreground">
+                      {formatter(item.value as number, index)}
+                    </span>
+                  )}
+                </div>
               </div>
             );
           })}

web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryTick.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const OpenTelemetryTick = (props: any) => {
   const { payload, tickFormatter, x, y } = props;
   const tickString = tickFormatter?.(payload?.value) || '';