fix progress bar text alignment and missing translations (#19249)

frontend/src/metabase/static-viz/components/ProgressBar/ProgressBar.tsx

 import React from "react";
+import { t } from "ttag";
 import { scaleLinear } from "@visx/scale";
 import { Group } from "@visx/group";
 import { ClipPath } from "@visx/clip-path";
@@ -111,7 +112,7 @@ const ProgressBar = ({
               color="white"
               x={layout.iconSize + 16}
               y={layout.barHeight / 2}
-              dominantBaseline="central"
+              verticalAnchor="middle"
               fill="white"
             >
               {barText}
@@ -144,7 +145,7 @@ const ProgressBar = ({
           {formatNumber(0, format)}
         </Text>
         <Text fontSize={layout.fontSize} textAnchor="end" x={xMax}>
-          {`Goal ${formatNumber(data.goal, format)}`}
+          {t`Goal ${formatNumber(data.goal, format)}`}
         </Text>
       </Group>
     </svg>

frontend/src/metabase/static-viz/components/ProgressBar/utils.ts

 import Color from "color";
+import { t } from "ttag";
 import { measureText } from "metabase/static-viz/lib/text";
 import { ProgressBarData } from "./types";
 
@@ -31,9 +32,9 @@ export const getColors = (
 
 export const getBarText = ({ value, goal }: ProgressBarData) => {
   if (value === goal) {
-    return "Goal met";
+    return t`Goal met`;
   } else if (value > goal) {
-    return "Goal exceeded";
+    return t`Goal exceeded`;
   }
 
   return null;