history output selectable by button

src/pages/wizard/history.vue

@@ -1,6 +1,14 @@
 <template>
   <div>History</div>
-  <container class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]">
+  <div class="flex flex-row justify-center gap-2">
+    <button @click="setGraph = 'total'">Total</button>
+    <button @click="setGraph = 'table'">Table</button>
+    <button @click="setGraph = 'cumulative'">cumulative</button>
+  </div>
+  <container
+    class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
+    v-if="setGraph == 'table'"
+  >
     <div class="font-semibold">
       <div class="firstLine">Round</div>
       <div v-for="(item, index) in store.getRoundNumber" :key="index">
@@ -18,14 +26,16 @@
       </div>
     </div>
   </container>
-  <historychart></historychart>
+  <historychart :graph-type="<graphType><unknown>setGraph"></historychart>
 </template>
 
 <script setup lang="ts">
 import { useScoreStore } from "./store";
 import container from "../../components/container.vue";
-import historychart from "./historychart.vue";
+import historychart, { Props as graphType } from "./historychart.vue";
+import { ref } from "vue";
 
+const setGraph = ref<"total" | "cumulative" | "table" | undefined>("total");
 const store = useScoreStore();
 </script>
 

src/pages/wizard/historychart.vue

@@ -1,18 +1,15 @@
 <template>
   <div>Chart</div>
-  <div class="flex flex-row justify-center gap-2">
-    <button @click="setGraph = 'total'">Total</button>
-    <button @click="setGraph = 'cumulative'">cumulative</button>
-  </div>
+
   <Bar
     :data="myDataTotal.data"
     :options="myDataTotal.options"
-    v-if="setGraph == 'total'"
+    v-if="props.graphType == 'total'"
   />
   <Line
     :data="myDataCumulative.data"
     :options="myDataCumulative.options"
-    v-if="setGraph == 'cumulative'"
+    v-if="props.graphType == 'cumulative'"
   />
   {{ store.getScore(1) }}
 </template>
@@ -33,9 +30,13 @@ import {
 import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
 import { useScoreStore } from "./store";
-import { ref } from "vue";
 
-const setGraph = ref("cumulative");
+export type Props = {
+  graphType: "total" | "cumulative" | undefined;
+};
+const props = withDefaults(defineProps<Props>(), {
+  graphType: "total",
+});
 
 const store = useScoreStore();