diff --git a/ActiveBOWeb/src/components/PolicyPlot.vue b/ActiveBOWeb/src/components/PolicyPlot.vue index 71333d8..df0f1a8 100644 --- a/ActiveBOWeb/src/components/PolicyPlot.vue +++ b/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)