added SprayGraph.vue

src/components/Details.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="details-site">
+    <div class="multi-kills">
+      <h3 class="text-center">Multi-Kills</h3>
+      <MultiKillsChart/>
+    </div>
+    <hr>
+    <div class="spray">
+      <h3 class="text-center">Spray</h3>
+      <SprayGraph :spray="data.spray"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultiKillsChart from "@/components/MultiKillsChart";
+import SprayGraph from "@/components/SprayGraph";
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+import {GetWeaponDmg} from "@/utils";
+
+export default {
+  name: "Details",
+  components: {SprayGraph, MultiKillsChart},
+  setup() {
+    const store = useStore()
+
+    const data = reactive({
+      spray: [],
+    })
+
+    const getWeaponDamage = async () => {
+      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      data.spray = resData.spray
+    }
+
+    onMounted(() => {
+      getWeaponDamage()
+    })
+
+    return {data}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.details-site {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h3 {
+    margin-bottom: 1rem;
+  }
+
+  hr {
+    width: 100%;
+    border: 1px solid white;
+  }
+
+  .multi-kills {
+    margin-top: 1rem;
+  }
+}
+</style>