Browse Source

fix(vital-details): Chart labels should respect the type of the vital (#25853)

Chart labels on vital details page should respect the type of the vital.
Specifically, CLS is not a duration based vital like the others and should not
be formatted as a duration.
Tony Xiao 3 years ago
parent
commit
25855f5875
1 changed files with 5 additions and 4 deletions
  1. 5 4
      static/app/views/performance/vitalDetail/vitalChart.tsx

+ 5 - 4
static/app/views/performance/vitalDetail/vitalChart.tsx

@@ -87,7 +87,7 @@ class VitalChart extends Component<Props> {
 
     const vitalName = vitalNameFromLocation(location);
 
-    const yAxis = [`p75(${vitalName})`];
+    const yAxis = `p75(${vitalName})`;
 
     const legend = {
       right: 10,
@@ -166,15 +166,16 @@ class VitalChart extends Component<Props> {
       tooltip: {
         trigger: 'axis' as const,
         valueFormatter: (value: number, seriesName?: string) =>
-          tooltipFormatter(value, vitalName === WebVital.CLS ? seriesName : 'p75()'),
+          tooltipFormatter(value, vitalName === WebVital.CLS ? seriesName : yAxis),
       },
       yAxis: {
         min: 0,
         max: vitalPoor,
         axisLabel: {
           color: theme.chartLabel,
+          showMaxLabel: false,
           // coerces the axis to be time based
-          formatter: (value: number) => axisLabelFormatter(value, 'p75()'),
+          formatter: (value: number) => axisLabelFormatter(value, yAxis),
         },
       },
     };
@@ -210,7 +211,7 @@ class VitalChart extends Component<Props> {
                 showLoading={false}
                 query={query}
                 includePrevious={false}
-                yAxis={yAxis}
+                yAxis={[yAxis]}
                 partial
               >
                 {({timeseriesData: results, errored, loading, reloading}) => {