Added chart type selector.

web-app/src/pages/home/AnalyticsModule.vue

@@ -19,6 +19,17 @@ const balanceTimeSeriesData = ref<BalanceTimeSeriesAnalytics>()
 const currency = ref<Currency>()
 const timeFrame = ref<TimeFrame>({})
 
+interface AnalyticsChartType {
+  id: string
+  name: string
+}
+
+const AnalyticsChartTypes: AnalyticsChartType[] = [
+  { id: 'balance-time-series', name: 'Account Balances' },
+]
+
+const selectedChart = ref<AnalyticsChartType>(AnalyticsChartTypes[0])
+
 const availableCurrencies = computed(() => {
   const currencies: Currency[] = []
   for (const acc of accounts.value) {
@@ -64,9 +75,19 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <HomeModule title="Analytics">
-    <BalanceTimeSeriesChart v-if="currency && balanceTimeSeriesData" title="Account Balances" :currency="currency"
-      :time-frame="timeFrame" :data="accountBalancesData" />
+  <HomeModule title="Analytics" style="max-width: 800px;">
+    <FormGroup>
+      <FormControl label="Chart">
+        <select v-model="selectedChart">
+          <option v-for="ct in AnalyticsChartTypes" :key="ct.id" :value="ct">
+            {{ ct.name }}
+          </option>
+        </select>
+      </FormControl>
+    </FormGroup>
+
+    <BalanceTimeSeriesChart v-if="currency && balanceTimeSeriesData && selectedChart.id === 'balance-time-series'"
+      title="Account Balances" :currency="currency" :time-frame="timeFrame" :data="accountBalancesData" />
 
     <FormGroup>
       <FormControl label="Currency">