dashboard: add a light background color to charts (#36186)

GitOrigin-RevId: abe7f578edd90e2e2b747f59e9f8c0a495854dc7

Author: atrakh

npm-packages/dashboard-common/src/elements/BigChart.tsx

@@ -115,6 +115,9 @@ export function BigChart({
                         strokeWidth={1}
                         vertical={false}
                         verticalFill={[]}
+                        horizontalFill={[
+                          "rgba(var(--background-tertiary), 0.33)",
+                        ]}
                         syncWithTicks
                       />
                       <Tooltip

npm-packages/dashboard-common/src/features/functions/components/SingleGraph.tsx

@@ -102,6 +102,7 @@ export function SingleGraph({
                   horizontal
                   strokeWidth={1}
                   vertical={false}
+                  horizontalFill={["rgba(var(--background-tertiary), 0.33)"]}
                   verticalFill={[]}
                   syncWithTicks
                 />

npm-packages/dashboard-common/src/features/health/components/ChartForFunctionRate.tsx

@@ -198,7 +198,14 @@ export function ChartForFunctionRate({
                 strokeWidth={1}
                 vertical={false}
                 verticalFill={[]}
+                horizontalFill={["rgba(var(--background-tertiary), 0.33)"]}
                 syncWithTicks
+                horizontalValues={
+                  kind !== "schedulerStatus"
+                    ? // For some reason (likely due to the size of the chart), ticks don't appear at 75 if the value is exactly 75. So, get as close to 75 as possible
+                      [0, 25, 50, 74.999, 100]
+                    : undefined
+                }
               />
 
               {chartData.lineKeys.map((line) => {

npm-packages/dashboard/src/components/health/ChartForInsight.tsx

@@ -110,6 +110,7 @@ function InsightsLineChart<T extends Record<string, any>>({
                 strokeWidth={1}
                 vertical={false}
                 verticalFill={[]}
+                horizontalFill={["rgba(var(--background-tertiary), 0.33)"]}
                 syncWithTicks
               />