accel chart

ActiveBOWeb/package.json

@@ -16,7 +16,7 @@
     "roslib": "^1.3.0",
     "vue": "^3.2.45",
     "vue-resource": "^1.5.3",
-    "vue-slider-component": "^3.2.24",
+    "vue-slider-component": "^4.1.0-beta.7",
     "vue3-slider": "^1.8.0",
     "vuetify": "^3.1.4"
   },

ActiveBOWeb/src/components/PolicyPlot.vue

@@ -1,11 +1,81 @@
 <template>
-
+  <div>
+    <canvas id="policy-chart"/>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "PolicyPlot"
+<script setup>
+import { onMounted, watch } from "vue";
+import { usePStore } from "@/store/PolicyStore";
+import { Chart } from 'chart.js/auto';
+
+const store = usePStore();
+
+let chartHandle;
+
+function buildChart() {
+  const policy = store.getPolicy();
+  const policy_labels = Array(policy.length).fill(0).map((_, i) => i);
+  const RewardPlot = {
+    data: {
+      datasets: [
+        {
+          label: 'Reward',
+          type: 'line',
+          xAxisID: 'x',
+          yAxisID: 'y',
+          data: policy,
+          borderColor: '#3DC47A',
+          borderWidth: 2,
+          pointRadius: 0,
+        },
+      ],
+    },
+    options: {
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+        duration: 0,
+      },
+      lineTension: 0,
+      tooltip: {
+        mode: 'label',
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+          },
+          labels: policy_labels,
+          ticks: {
+            autoSkip: true,
+          },
+        },
+        y:
+            {
+              type: 'linear',
+              ticks: {
+                beginAtZero: true,
+              },
+            },
+      },
+    },
+  };
+  const ctx = document.getElementById('policy-chart');
+  // eslint-disable-next-line no-new
+  chartHandle = new Chart(ctx, RewardPlot);
 }
+
+onMounted(() => {
+  buildChart();
+});
+
+watch(() => store.getPolicy(), () => {
+  chartHandle.data.dataset[0].data = store.getPolicy();
+
+  chartHandle.update();
+});
+
 </script>
 
 <style scoped>

ActiveBOWeb/src/components/RewardPlot.vue

@@ -2,7 +2,6 @@
   <div>
     <canvas id="reward-chart"/>
   </div>
-
 </template>
 
 <script setup>

ActiveBOWeb/src/components/SubLayout.vue

@@ -1,9 +1,11 @@
 <template>
 <weight-tuner/>
+  <reward-plot/>
 </template>
 
 <script setup>
 import WeightTuner from "@/components/WeightTuner.vue";
+import RewardPlot from "@/components/RewardPlot.vue";
 </script>
 
 <style scoped>

ActiveBOWeb/src/components/WeightTuner.vue

@@ -1,21 +1,16 @@
 <template>
- <v-card height="200px">
-   <v-row>
-     <v-col v-for="(_, idx) in store.weights" align-self="center">
-<!--       <Vue3Slider v-model="weights[idx]"-->
-<!--                   :min="-1"-->
-<!--                   :max="1"-->
-<!--                   :step="0.01"-->
-<!--                   orientation="vertical"-->
-<!--                   class="weight-slider"-->
-<!--       />-->
-<!--       <v-slider v-model="weights[idx]"-->
-<!--                 direction="vertical"-->
-<!--                 :label="idx.toString()"-->
-<!--                 min="-1" max="1"-->
-<!--                 :step="0.01"-->
-<!--                 style="max-height: 200px"-->
-<!--                 density="comfortable"/>-->
+ <v-card class="weight-tuner">
+   <v-row no-gutters justify="center">
+     <v-col v-for="(_, idx) in weights">
+       <div class="weight-container">
+         <vue-slider v-model="weights[idx]"
+                     direction="btt"
+                     :height="100"
+                     :min="-1"
+                     :max="1"
+                     :interval="0.01"
+         />
+       </div>
      </v-col>
    </v-row>
  </v-card>
@@ -23,22 +18,24 @@
 
 <script setup>
 import { usePStore } from "@/store/PolicyStore";
+
 import VueSlider from "vue-slider-component";
+import 'vue-slider-component/theme/default.css';
 
 const store = usePStore()
 
 const weights = store.weights;
 
-
 </script>
 
 <style scoped>
-.weight-slider.vue3-slider.vertical {
-  height: 150px;
-  width: 8px;
+.weight-tuner {
+  height: 140px;
 }
-.weight-slider {
-  vertical-align: middle;
+.weight-container {
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
 </style>