fix: broken analytics pages (#5052)

apps/frontend/src/components/ui/charts/Chart.client.vue

@@ -286,7 +286,7 @@ const flipLegend = (legend, newVal) => {
 }
 
 const resetChart = () => {
-	if (!chart.value) return
+	if (!chart.value?.chart) return
 	chart.value.updateSeries([...props.data])
 	chart.value.updateOptions({
 		xaxis: {

apps/frontend/src/components/ui/charts/CompactChart.client.vue

@@ -125,13 +125,14 @@ const chartOptions = {
 const chart = ref(null)
 
 const resetChart = () => {
-	chart.value?.updateSeries([...props.data])
+	if (!chart.value?.chart) return
-	chart.value?.updateOptions({
+	chart.value.updateSeries([...props.data])
+	chart.value.updateOptions({
 		xaxis: {
 			categories: props.labels,
 		},
 	})
-	chart.value?.resetSeries()
+	chart.value.resetSeries()
 }
 
 defineExpose({

apps/frontend/src/utils/analytics.js

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 // note: build step can miss unix import for some reason, so
 // we have to import it like this
@@ -7,10 +8,16 @@ import { computed, ref, watch } from 'vue'
 const { unix } = dayjs
 
 export function useCountryNames(style = 'long') {
-	const formattingOptions = { type: 'region', style }
+	const { locale } = useI18n()
-	const { formats } = useVIntl()
+	const displayNames = computed(
+		() => new Intl.DisplayNames([locale.value], { type: 'region', style }),
+	)
 	return function formatCountryName(code) {
-		return formats.displayName(code, formattingOptions)
+		try {
+			return displayNames.value.of(code) ?? code
+		} catch {
+			return code
+		}
 	}
 }