[#10776] Make "ALL" bold & Remove total if stack is false

pinpoint-apm · Oct 8, 2024 · 56898af · 56898af
1 parent bfe316e
commit 56898af
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 15 deletions.
diff --git a/.../src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx b/.../src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryChartCommon.tsx
@@ -53,7 +53,7 @@ export const OpenTelemetryChartCommon = ({
         }
         {...restTooltipConfig}
       />
-      <ChartLegend className="block overflow-hidden" content={<ChartLegendContent />} />
+      <ChartLegend content={<ChartLegendContent />} />
     </>
   );
 };
diff --git a/...rc/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx b/...rc/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
@@ -45,7 +45,7 @@ export const OpenTelemetryMetricFetcher = ({
     });
   }, [metricDefinition]);
 
-  const { stack, showTotal = true } = metricDefinition;
+  const { stack, showTotal = false } = metricDefinition;
 
   const dataSets =
     data?.metricValues.reduce(
@@ -101,7 +101,7 @@ export const OpenTelemetryMetricFetcher = ({
           },
         }}
         tooltipConfig={{
-          showTotal,
+          showTotal: showTotal || stack,
         }}
       />
     )

diff --git a/...ain/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx b/...ain/v3/packages/ui/src/components/OpenTelemetry/definition/MeticDefinitionFormFetcher.tsx
@@ -508,7 +508,7 @@ export const MetricDefinitionFormFetcher = ({
                           }}
                         />
                         <FormLabel className="text-sm font-normal" htmlFor="all">
-                          ALL{' '}
+                          <span className="font-bold">ALL</span>
                           <span className="text-muted-foreground">{`(Select all ${primaryForFieldAndTagRelation === 'tag' ? 'field' : 'tag'})`}</span>
                         </FormLabel>
                       </FormItem>

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ui/chart.tsx
@@ -261,8 +261,7 @@ const ChartLegendContent = React.forwardRef<
         <div
           ref={ref}
           className={cn(
-            'flex items-center justify-center gap-4',
-            verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+            `flex justify-center gap-1 flex-wrap ${verticalAlign === 'top' ? 'pb-3' : 'pt-3'}`,
             className,
           )}
         >
@@ -273,13 +272,7 @@ const ChartLegendContent = React.forwardRef<
             return (
               <React.Fragment key={item.value}>
                 <TooltipTrigger asChild>
-                  <div
-                    key={item.value}
-                    className={cn(
-                      'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
-                      'justify-center',
-                    )}
-                  >
+                  <div key={item.value} className={cn('inline-flex max-w-full items-center gap-1')}>
                     <>
                       {itemConfig?.icon && !hideIcon ? (
                         <itemConfig.icon />
@@ -291,9 +284,9 @@ const ChartLegendContent = React.forwardRef<
                           }}
                         />
                       )}
-                      <span className="text-ellipsis overflow-hidden whitespace-nowrap">
+                      <div className="text-ellipsis overflow-hidden whitespace-nowrap">
                         {itemConfig?.label}
-                      </span>
+                      </div>
                     </>
                   </div>
                 </TooltipTrigger>