added vertical line plugin in policyplot

ActiveBOWeb/src/components/PolicyPlot.vue

@@ -7,11 +7,37 @@ import { onMounted, watch } from "vue";
 import { usePStore } from "@/store/PolicyStore";
 import { Chart } from "chart.js/auto";
 import { computeRbfCurve } from "@/js_funs/online_rbf_policy";
+import { useRLStore } from "@/store/RLStore";
 
 const store = usePStore();
+const rlstore = useRLStore();
 
 let chartHandle;
 
+let verticalLinePlugin = {
+  id: "verticalLinePlugin",
+  afterDraw: function (chart, args, options) {
+    let y_Scale = chart.scales["y"];
+    let x_Scale = chart.scales["x"];
+
+    let ctx = chart.ctx;
+    let xValue = options.xValue;
+    let x = x_Scale.getPixelForValue(xValue);
+    let top = y_Scale.top;
+    let bottom = y_Scale.bottom;
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(x, top);
+    ctx.lineTo(x, bottom);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = "#00ff00";
+    ctx.stroke();
+    ctx.restore();
+  },
+};
+Chart.register(verticalLinePlugin);
+
 function buildChart() {
   const policy = store.getPolicy;
   const policy_labels = Array(policy.length)
@@ -41,6 +67,9 @@ function buildChart() {
         legend: {
           display: false,
         },
+        verticalLinePlugin: {
+          xValue: rlstore.current_time,
+        },
       },
       lineTension: 0,
       tooltip: {
@@ -75,7 +104,7 @@ onMounted(() => {
 });
 
 watch(
-  () => store.getPolicy,
+  () => rlstore.current_time,
   () => {
     const policy = store.getPolicy;
     chartHandle.options.scales.x.labels = Array(policy.length)