diff --git a/InteractiveBO/src/components/PolicyPlot.vue b/InteractiveBO/src/components/PolicyPlot.vue index 221ca05..e9d88a0 100644 --- a/InteractiveBO/src/components/PolicyPlot.vue +++ b/InteractiveBO/src/components/PolicyPlot.vue @@ -14,46 +14,52 @@ 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); +// 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) - .fill(0) - .map((_, i) => i); + const policy_x = store.getPolicy; + const policy_y = store.getPolicy_y; + + const policy_xy = []; + + for (let i = 0; i < policy_x.length; i += 1) { + policy_xy[policy_xy.length] = { x: policy_x[i], y: policy_y[i] }; + } + const RewardPlot = { + type: "scatter", data: { datasets: [ { type: "line", xAxisID: "x", yAxisID: "y", - data: policy, + data: policy_xy, borderColor: "#3DC47A", borderWidth: 2, - pointRadius: 0, + pointRadius: 0.1, }, ], }, @@ -67,9 +73,9 @@ function buildChart() { legend: { display: false, }, - verticalLinePlugin: { - xValue: rlstore.getCurrentTime, - }, + // verticalLinePlugin: { + // xValue: rlstore.getCurrentTime, + // }, }, lineTension: 0, tooltip: { @@ -77,19 +83,18 @@ function buildChart() { }, scales: { x: { + display: true, grid: { display: false, }, - labels: policy_labels, - ticks: { - autoSkip: true, - }, + min: -1, + max: 1, }, y: { type: "linear", - ticks: { - beginAtZero: true, - }, + display: true, + min: -1, + max: 1, }, }, }, @@ -106,13 +111,18 @@ onMounted(() => { watch( () => rlstore.current_time, () => { - const policy = store.getPolicy; - chartHandle.options.scales.x.labels = Array(policy.length) - .fill(0) - .map((_, i) => i); - chartHandle.data.datasets[0].data = policy; - chartHandle.options.plugins.verticalLinePlugin.xValue = - rlstore.current_time; + const policy_x = store.getPolicy; + const policy_y = store.getPolicy_y; + + const policy_xy = []; + + for (let i = 0; i < policy_x.length; i += 1) { + policy_xy[policy_xy.length] = { x: policy_y[i], y: policy_x[i] }; + } + + chartHandle.data.datasets[0].data = policy_xy; + // chartHandle.options.plugins.verticalLinePlugin.xValue = + // rlstore.current_time; chartHandle.update(); } @@ -120,15 +130,20 @@ watch( watch( () => store.getTrigger, () => { - const policy = computeRbfCurve(store.getMaxSteps, store.getWeights); - store.setPolicy(policy); + const policy_x = computeRbfCurve(store.getMaxSteps, store.getWeights); + store.setPolicy(policy_x); + const policy_y = computeRbfCurve(store.getMaxSteps, store.getWeights_y); + store.setPolicy_y(policy_y); - chartHandle.options.scales.x.labels = Array(policy.length) - .fill(0) - .map((_, i) => i); - chartHandle.data.datasets[0].data = policy; - chartHandle.options.plugins.verticalLinePlugin.xValue = - rlstore.current_time; + const policy_xy = []; + + for (let i = 0; i < policy_x.length; i += 1) { + policy_xy[policy_xy.length] = { x: policy_y[i], y: policy_x[i] }; + } + + chartHandle.data.datasets[0].data = policy_xy; + // chartHandle.options.plugins.verticalLinePlugin.xValue = + // rlstore.current_time; chartHandle.update(); } diff --git a/InteractiveBO/src/components/WeightTunerVertical.vue b/InteractiveBO/src/components/WeightTunerVertical.vue index 1869421..85cbaed 100644 --- a/InteractiveBO/src/components/WeightTunerVertical.vue +++ b/InteractiveBO/src/components/WeightTunerVertical.vue @@ -1,7 +1,7 @@