Styling, export and integration

Vue adapter

A component that owns a canvas and nothing else

plotscope-vue is a component, PlotCanvas, and the composable it is built on, usePlot. It makes the plot when it mounts, sizes it to its element, destroys it when it unmounts and hands the page everything in between. The chart above is this component:

import { ref } from "vue";
import { PlotCanvas } from "plotscope-vue";
import type { PlotControls } from "plotscope-vue";
import type { Plot, PlotEvent } from "plotscope";

const said = ref("Move over the chart.");

function fill(plot: Plot, controls: PlotControls) {
  // Your licence key. Without one the plot draws the same, with a mark.
  plot.activate(KEY);
  // Uploaded onto the plot, not passed as a prop: Vue never sees the arrays.
  const x = plot.uploadBuffer(Float64Array.from({ length: 300 }, (_, i) => i / 10));
  const y = plot.uploadBuffer(Float32Array.from({ length: 300 }, (_, i) => Math.sin(i / 20)));
  plot.setCharts({ charts: [{ series: [{ x, y, label: "signal" }] }] });
  // Through the controls, which also hand over the events the frame produced.
  controls.render();
}

function show(events: PlotEvent[]) {
  for (const event of events) {
    if (event.type === "hover") said.value = `point ${event.index}: ${event.y.toFixed(3)} at ${event.x.toFixed(1)}`;
  }
}

template

<PlotCanvas height="340px" animate :theme="theme" @ready="fill" @events="show" />

npm install plotscope plotscope-vue

Data never goes in as a prop

The component takes no data. It emits ready with the plot, and the page uploads onto it with the same calls it would make without Vue.

A prop is reactive state, and a buffer the GPU already holds is not something Vue should be watching. Props carry configuration: theme, height and animate, which are small and worth being reactive. The plot itself is kept out of Vue's reactivity by the component, so a call on it is a plain call.

Draw through the controls

ready hands over the plot and its controls. controls.render() draws a frame, delivers the events that frame produced through events, and notices a GPU device that has gone away. plot.render() only draws, so a page that calls it directly never hears a hover.

A plot whose data changes only when something happens draws on demand, as above. A live one sets animate and writes its buffers from the frame event, which fires just before each frame is drawn.

What it emits

Event	When
`ready`	The plot exists. Upload and set documents here
`frame`	A frame is about to be drawn. Only with `animate`
`events`	What the charts reported on a frame: hovers, clicks, a changed view
`error`	The plot could not start, which is how a browser without WebGPU shows up
`lost`	The GPU device went away, with the browser's reason

Several plots, or a canvas of your own

usePlot is the same lifecycle without the element, for a component that already has a canvas or wants several plots created and destroyed together.

Vue adapter ​

A component that owns a canvas and nothing else ​

Data never goes in as a prop ​

Draw through the controls ​