address review feedback on bounce rate / visit duration charts

- BarChart: add yMax and ySuggestedMax props that wire through to the
  Chart.js y scale, so consumers can actually cap or hint the axis.
- MetricSeriesChart: pass yMax=100 to BarChart for the bouncerate kind so
  the axis is reliably bounded to 0-100 percent (previously yMax was
  attached to chartData and silently ignored by Chart.tsx).
- MetricSeriesChart: drop locale from the chartData useMemo dependency
  array since only dateLocale is referenced inside the callback.
- MetricSeriesChart: type the data prop as nullable to match the actual
  shape passed by WebsiteChart while loading.

Author: yancat160

src/components/charts/BarChart.tsx

@@ -31,6 +31,8 @@ export interface BarChartProps extends ChartProps {
   renderTooltipValue?: (raw: { x: any; y: number }, datasetLabel: string) => string;
   XAxisType?: string;
   YAxisType?: string;
+  yMax?: number;
+  ySuggestedMax?: number;
   minDate?: Date;
   maxDate?: Date;
 }
@@ -49,6 +51,8 @@ function BarChartComponent({
   unit,
   XAxisType = 'timeseries',
   YAxisType = 'linear',
+  yMax,
+  ySuggestedMax,
   stacked = false,
   minDate,
   maxDate,
@@ -90,6 +94,8 @@ function BarChartComponent({
           type: YAxisType,
           min: 0,
           beginAtZero: true,
+          ...(yMax !== undefined && { max: yMax }),
+          ...(ySuggestedMax !== undefined && { suggestedMax: ySuggestedMax }),
           stacked: !!stacked,
           grid: {
             color: colors.chart.line,
@@ -115,6 +121,8 @@ function BarChartComponent({
     locale,
     XAxisType,
     YAxisType,
+    yMax,
+    ySuggestedMax,
   ]);
 
   const handleTooltip = useCallback(

src/components/metrics/MetricSeriesChart.tsx

@@ -10,10 +10,12 @@ import { formatShortTime } from '@/lib/format';
 export type MetricSeriesKind = 'bouncerate' | 'visitduration';
 
 export interface MetricSeriesChartProps extends BarChartProps {
-  data: {
-    series: { x: string; y: number }[];
-    compare?: { x: string; y: number }[];
-  };
+  data:
+    | {
+        series: { x: string; y: number }[];
+        compare?: { x: string; y: number }[];
+      }
+    | null;
   unit: string;
   kind: MetricSeriesKind;
   label: string;
@@ -43,11 +45,8 @@ export function MetricSeriesChart({
   const chartData: any = useMemo(() => {
     if (!data) return;
 
-    const yMaxBaseline = kind === 'bouncerate' ? 100 : undefined;
-
     return {
       __id: Date.now(),
-      yMax: yMaxBaseline,
       datasets: [
         {
           type: 'bar',
@@ -74,7 +73,7 @@ export function MetricSeriesChart({
           : []),
       ],
     };
-  }, [data, locale, kind, label, comparePreviousLabel, colors, minDate, maxDate, unit, dateLocale]);
+  }, [data, kind, label, comparePreviousLabel, colors, minDate, maxDate, unit, dateLocale]);
 
   const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
   const renderYLabel = useCallback((value: any) => formatY(Number(value)), [formatY]);
@@ -83,6 +82,8 @@ export function MetricSeriesChart({
     [formatY],
   );
 
+  const yMax = kind === 'bouncerate' ? 100 : undefined;
+
   return (
     <BarChart
       {...props}
@@ -93,6 +94,7 @@ export function MetricSeriesChart({
       renderXLabel={renderXLabel}
       renderYLabel={renderYLabel}
       renderTooltipValue={renderTooltipValue}
+      yMax={yMax}
       height="400px"
     />
   );