WIP: Vue+FastAPI+mocked integration with GH API.

Author: ArielMAJ

vue-front/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "plotly.js": "^1.44.4",
+    "vue": "^3.2.13",
+    "vuetify": "^3.4.8"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

vue-front/src/App.vue

@@ -1,14 +1,54 @@
 <template>
-  <HelloWorld />
+  <div id="app">
+    <v-container>
+      <v-row no-gutters alignContent="center" justify="space-between">
+        <v-col md="4">
+          <PlotlyChart :propData="plotInfo" divId="plot1" />
+        </v-col>
+        <v-col md="4">
+          <PlotlyChart :propData="plotInfo" divId="plot2" />
+        </v-col>
+        <v-col md="4">
+          <PlotlyChart :propData="plotInfo" divId="plot3" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
-
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import PlotlyChart from "./components/PlotlyChart.vue";
 
 export default {
-  name: "App",
+  name: "app",
   components: {
-    HelloWorld,
+    PlotlyChart,
+  },
+  data: function () {
+    return {
+      plotInfo: {
+        data: null,
+      },
+      loadingData: true,
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      try {
+        this.loadingData = true;
+        const response = await fetch(
+          process.env.VUE_APP_BACKEND_ROOT_ENDPOINT + "ArielMAJ/repos"
+        );
+        const data = await response.json();
+        this.plotInfo.data = data.forks;
+        console.log(this.plotInfo.data);
+        this.loadingData = false;
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    },
   },
 };
 </script>
@@ -20,10 +60,23 @@ export default {
 }
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  background-color: bisque;
+  min-height: 100vh;
+  min-width: 100vw;
+  max-width: 100vw;
+  position: absolute;
+}
+
+body {
+  scroll-behavior: smooth;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  min-width: 100vw;
+  max-width: 100vw;
 }
 </style>

vue-front/src/components/HelloWorld.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="plotly-chart"
+    ref="container"
+    :id="divId"
+    :style="{
+      height: height,
+      width: width,
+    }"
+  ></div>
+</template>
+
+<script>
+import Plotly from "plotly.js/dist/plotly";
+
+export default {
+  name: "Plotly-Chart",
+  props: {
+    propData: {
+      type: Object,
+      required: true,
+    },
+    divId: {
+      type: String,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+  },
+  data: function () {
+    return {};
+  },
+  mounted() {
+    this.newPlot();
+    this.bindEvents();
+  },
+  created() {
+    this.$watch("propData", this.update, { deep: true });
+  },
+  beforeUnmount() {
+    this.unbindEvents();
+  },
+  computed: {
+    plotDiv() {
+      return this.$refs.container;
+    },
+  },
+  methods: {
+    bindEvents() {
+      this.plotDiv.on("plotly_redraw", this.redraw);
+    },
+    unbindEvents() {
+      if (!this.plotDiv["off"]) return;
+      this.plotDiv.off("plotly_redraw", this.redraw);
+    },
+
+    // Redraw in plotly is a plot level event,
+    // so all that's published out is the plot's divId
+    redraw() {
+      this.$emit("redraw", this.divId);
+    },
+
+    newPlot() {
+      Plotly.newPlot(this.divId, this.propData.data, {
+        paper_bgcolor: "transparent",
+      });
+    },
+    update() {
+      Plotly.react(this.divId, this.propData.data, {
+        paper_bgcolor: "transparent",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.plotly-chart {
+  /* margin: 20px auto; */
+  border: 1px solid #ccc;
+  border-radius: 50px;
+  background-color: transparent;
+}
+</style>

vue-front/src/components/PlotlyChart.vue

@@ -1,4 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
 
-createApp(App).mount("#app");
+const vuetify = createVuetify({
+  components,
+  directives,
+});
+
+createApp(App).use(vuetify).mount("#app");