Merge pull request #8 from yoshixmk/develop

Develop

Author: yoshixmk

.node-version

@@ -1 +1 @@
-14.15.0
+14.15.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "f3",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "private": false,
   "description": "Facilitating conversations using Fist to Five.",
   "author": "yoshixmk",
@@ -23,41 +23,41 @@
     "start:server": "node dist/server/index.js"
   },
   "dependencies": {
-    "apexcharts": "3.22.1",
-    "axios": "0.21.0",
-    "bootstrap": "5.0.0-alpha2",
+    "@popperjs/core": "2.6.0",
+    "apexcharts": "3.23.0",
+    "axios": "0.21.1",
+    "bootstrap": "5.0.0-beta1",
     "cors": "2.8.5",
-    "popper.js": "1.16.1",
-    "vue": "3.0.2",
-    "vuex": "4.0.0-rc.1"
+    "vue": "3.0.4",
+    "vue3-apexcharts": "1.1.1",
+    "vuex": "4.0.0-rc.2"
   },
   "devDependencies": {
-    "@types/cors": "2.8.8",
-    "@types/node": "14.14.6",
-    "@typescript-eslint/eslint-plugin": "4.6.1",
-    "@typescript-eslint/parser": "4.6.1",
-    "@vue/compiler-sfc": "3.0.2",
+    "@types/cors": "2.8.9",
+    "@types/node": "14.14.16",
+    "@typescript-eslint/eslint-plugin": "4.11.0",
+    "@typescript-eslint/parser": "4.11.0",
     "concurrently": "5.3.0",
     "dotenv": "8.2.0",
-    "eslint": "7.12.1",
-    "eslint-plugin-vue": "7.1.0",
+    "eslint": "7.16.0",
+    "eslint-plugin-vue": "7.3.0",
     "express": "4.17.1",
     "rimraf": "3.0.2",
     "rome": "10.0.4-beta",
-    "sass": "1.28.0",
-    "ts-node": "9.0.0",
-    "ts-node-dev": "1.0.0",
-    "typescript": "4.0.5",
-    "vite": "1.0.0-rc.9",
-    "vue-eslint-parser": "7.1.1"
+    "sass": "1.30.0",
+    "ts-node": "9.1.1",
+    "ts-node-dev": "1.1.1",
+    "typescript": "4.1.3",
+    "vite": "1.0.0-rc.13",
+    "vue-eslint-parser": "7.3.0"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/yoshixmk/f3"
   },
   "engines": {
-    "node": ">= 14.13.0",
+    "node": ">= 14.15.0",
     "npm": "npm is not supported"
   },
   "engineStrict": true

src/components/molecules/ResetButton.vue

@@ -1,30 +1,88 @@
 <template>
   <user-info :fingers="fingers" />
-  <result-bar-chart
-    :fingers="fingers"
+  <apexchart
+    height="350"
+    type="bar"
+    :options="options"
+    :series="series"
+    :tooltip="tooltip"
   />
-  <br>
-  <reset-button />
 </template>
 
 <script lang="ts">
 import UserInfo from "./UserInfo.vue";
-import ResultBarChart from "../molecules/ResultBarChart.vue";
-import ResetButton from "../molecules/ResetButton.vue";
 import { Fingers } from "../../domains/fingers";
 import { defineComponent, PropType } from "vue";
 
+type GroupedByUsers = {
+  [key: number]: Fingers | undefined;
+};
+
 export default defineComponent({
   components: {
     UserInfo,
-    ResetButton,
-    ResultBarChart,
   },
   props: {
     fingers: {
       type: Object as PropType<Fingers>,
       default: [],
     },
   },
+  data() {
+    return {
+      options: {
+        chart: {
+          id: 'f3-chart'
+        },
+        xaxis: {
+          categories: [1, 2, 3, 4, 5]
+        }
+      },
+    }
+  },
+  computed: {
+    series() {
+      const data: GroupedByUsers = this.getUsersGroupBy();
+      return [
+          {
+            name: "vote",
+            data: [
+              // Number of people
+              data[1]?.length ?? 0,
+              data[2]?.length ?? 0,
+              data[3]?.length ?? 0,
+              data[4]?.length ?? 0,
+              data[5]?.length ?? 0,
+            ],
+          },
+        ]
+    },
+    tooltip() {
+        const data: GroupedByUsers = this.getUsersGroupBy();
+        return {
+          custom: function ({ dataPointIndex }: { dataPointIndex: number }) {
+            const index = dataPointIndex ?? 0;
+            return (
+              '<div class="arrow_box p-1">' +
+                "<span>" +
+                data[index + 1]?.map((d) => d.name)?.join("<br>") ??
+              "" + "</span>" + "</div>"
+            );
+          }
+        }
+      },
+  },
+  methods: {
+    getUsersGroupBy(): GroupedByUsers {
+      const result = this.fingers?.reduce(
+        (h, obj) =>
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          Object.assign(h, { [obj.value]: ((h as any)[obj.value] || []).concat(obj) }),
+        {}
+      );
+      console.log(result);
+      return result;
+    },
+  }
 });
 </script>

src/components/molecules/ResultBarChart.vue

@@ -3,10 +3,11 @@ import store from "./store";
 
 import VoteApp from "./VoteApp.vue";
 import FacilitatorApp from "./FacilitatorApp.vue";
-import "popper.js";
+import "@popperjs/core";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { axiosPlugin } from "./plugins/useAxios";
+import VueApexCharts from "vue3-apexcharts";
 
 const NotFoundComponent = { template: "<p>Page not found</p>" };
 
@@ -31,4 +32,8 @@ export const router = {
   },
 };
 
-createApp(router).use(store).use(axiosPlugin).mount("#app");
+createApp(router)
+  .use(store)
+  .use(axiosPlugin)
+  .use(VueApexCharts)
+  .mount("#app");