Adding simulator to playground (#1131)

* Adding simulator to playground * adding graphs and remaining fields * fixing charts bug * undoing changes * Remove unrelated files from pr * Remove unrelated files from pr #2 * using vue-chartjs instead of chartjs * Converting FarmingProfile class into a vue component * fixing line chart * Removing props from charts' divs --------- Co-authored-by: MohamedElmdary <[email protected]>
threefoldtech · Oct 17, 2023 · 34fcc78 · 34fcc78
1 parent 74f83eb
commit 34fcc78
Show file tree

Hide file tree

Showing 8 changed files with 640 additions and 0 deletions.
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -31,6 +31,8 @@
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
     "web-ssh-keygen": "^0.1.2",
+    "chart.js": "^4.4.0",
+    "vue-chartjs": "^5.2.0",
     "moment": "^2.29.4"
   },
   "devDependencies": {
@@ -39,6 +41,7 @@
     "@types/marked": "^5.0.0",
     "@types/node": "^18.14.2",
     "@types/qrcode": "^1.5.0",
+    "@types/chart.js": "^2.9.38",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",

diff --git a/packages/playground/src/components/line_chart.vue b/packages/playground/src/components/line_chart.vue
@@ -0,0 +1,78 @@
+<template>
+  <ChLine :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+import { Line } from "vue-chartjs";
+ChartJS.register(...registerables);
+const props = defineProps<{
+  getTotalReward: (currentPrice: number) => number;
+  getRoi: (price: number) => number;
+  xs: number[];
+  isProfit: boolean;
+}>();
+const X = (20 - 0.15) / 19;
+const xs = [...Array.from({ length: 20 }).map((_, i) => 0.15 + X * i)];
+const data = computed(() => {
+  if (props.isProfit) {
+    return {
+      labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+      datasets: [
+        {
+          label: "ROI",
+          data: props.xs.map(x => props.getRoi(x) / 100),
+          backgroundColor: "rgb(26, 161, 143)",
+          borderColor: "rgba(26, 161, 143, 0.5)",
+          pointRadius: 3,
+        },
+      ],
+    };
+  }
+  return {
+    labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+    datasets: [
+      {
+        label: "Margin",
+        data: props.xs.map(x => props.getTotalReward(x)) || xs.map(x => props.getTotalReward(x)),
+        backgroundColor: "rgb(26, 161, 143)",
+        borderColor: "rgba(26, 161, 143, 0.5)",
+        pointRadius: 3,
+      },
+    ],
+  };
+});
+
+const options = computed(() => {
+  if (props.isProfit) {
+    return {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        title: {
+          display: true,
+          text: "Return (USD) / TFT price (USD)",
+        },
+      },
+    };
+  }
+  return {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      title: {
+        display: true,
+        text: "Return (USD) / TFT price (USD)",
+      },
+    },
+  };
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed } from "vue";
+
+export default {
+  name: "LineChart",
+  components: { ChLine: Line },
+};
+</script>
diff --git a/packages/playground/src/components/pie_chart.vue b/packages/playground/src/components/pie_chart.vue
@@ -0,0 +1,49 @@
+<template>
+  <ChDoughnut :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+ChartJS.register(...registerables);
+
+const props = defineProps<{
+  chartdata: any[];
+}>();
+
+const options = ref({
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "top",
+    },
+    title: {
+      position: "top",
+      display: true,
+      padding: 10,
+      text: "Reward for CU, SU & NU",
+    },
+  },
+});
+const data = computed(() => {
+  console.log("props.chartdata", props.chartdata);
+  return {
+    labels: ["NU", "CU", "SU"],
+    datasets: [
+      {
+        data: props.chartdata || [50, 100, 30],
+        backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
+        hoverOffset: 4,
+      },
+    ],
+  };
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed, ref } from "vue";
+import { Doughnut } from "vue-chartjs";
+
+export default {
+  name: "PieChart",
+  components: { ChDoughnut: Doughnut },
+};
+</script>