Mercurial > code > home > repos > light9

comparison web/calibrate/XyPlot.ts @ 2417:ae4b90efb55a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start calibration tool
author drewp@bigasterisk.com
date Mon, 20 May 2024 01:28:12 -0700
parents
children e3af0ac507c8
comparison
equal deleted inserted replaced
2416:61dc5bc8ce2e 2417:ae4b90efb55a
1 import debug from "debug";
2 import * as echarts from "echarts";
3 import { css, html, LitElement, PropertyValueMap } from "lit";
4 import { customElement, property } from "lit/decorators.js";
5 debug.enable("*");
6 const log = debug("calibrate");
7
8 @customElement("xy-plot")
9 export class XyPlot extends LitElement {
10 static styles = [
11 css`
12 #chart {
13 width: 800px;
14 height: 300px;
15 }
16 `,
17 ];
18 chart!: echarts.ECharts;
19 @property() label: string = "";
20 @property() data: number[][] = [];
21
22 render() {
23 return html`
24 <fieldset>
25 <legend>${this.label}</legend>
26 <div id="chart"></div>
27 </fieldset>
28 `;
29 }
30
31 protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
32 var chartDom = this.shadowRoot!.getElementById("chart")!;
33 this.chart = echarts.init(chartDom);
34 this.chart.setOption({
35 animation: false,
36 xAxis: {
37 type: "value",
38 },
39 yAxis: {
40 type: "value",
41 },
42 series: [
43 {
44 name: "d",
45 data: [],
46 type: "line",
47 },
48 ],
49 });
50 }
51
52 clear() {
53 this.data.length = 0;
54 }
55
56 insertPoint(x: number, y: number) {
57 this.data.push([x, y]);
58 this.data.sort((a, b) => a[0] - b[0]);
59 this.chart.setOption({ series: [{ name: "d", data: this.data }] });
60 }
61 }