diff --git a/demo/demo-app.ts b/demo/demo-app.ts
new file mode 100644
index 0000000..6be70e5
--- /dev/null
+++ b/demo/demo-app.ts
@@ -0,0 +1,270 @@
+import { html, render } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
+
+import { Serie } from "../src/lit-line";
+import "../src/lit-line";
+
+enum View {
+ None,
+ HighDensity,
+ MultiLines,
+}
+
+export class DemoApp extends HTMLElement {
+ private selection: { time: number; values: (number | null)[] } | null;
+ private data: Serie[];
+ private selectedView: View;
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this.selection = null;
+ this.data = this.createDataSet();
+ this.selectedView = View.None;
+
+ this.render();
+ }
+
+ connectedCallback() {
+ this.selectView(View.HighDensity);
+ }
+
+ disconnectedCallback() {}
+
+ selectView(view: View) {
+ this.selectedView = view;
+
+ switch (view) {
+ case View.HighDensity:
+ this.data = [{ color: "#fe7142", points: this.createRandom(500) }];
+ break;
+ case View.MultiLines:
+ this.data = [
+ { color: "#68bb79", points: this.createSinusoid(300, 0) },
+ { color: "#9a57e8", points: this.createSinusoid(300, Math.PI) },
+ ];
+ break;
+ }
+
+ this.render();
+ }
+
+ createDataSet() {
+ const points = Array.from({ length: 300 }, (_, i) => {
+ return {
+ time: i,
+ value: 10 * Math.sin(0.1 * i), //Math.floor(Math.random() * 40)
+ };
+ });
+
+ return [{ unit: "usd", color: "#591", points }];
+ }
+
+ createRandom(length: number) {
+ return Array.from({ length }, (_, i) => {
+ return {
+ time: i,
+ value: Math.floor(Math.random() * 40),
+ };
+ });
+ }
+
+ createSinusoid(length: number, phase: number) {
+ return Array.from({ length }, (_, i) => {
+ return {
+ time: i,
+ value: 10 * Math.sin(0.04 * i + phase),
+ };
+ });
+ }
+
+ onSelection(e: CustomEvent) {
+ this.selection = e.detail;
+ this.render();
+ }
+
+ render() {
+ this.shadowRoot &&
+ render(
+ html`
+
+
+
+ {small, fast, responsive, interactive} svg line chart web component for
+ modern website. That's it.
+
+
+
+
+
+ this.onSelection(e)}
+ .data=${this.data}
+ >
+
+
+
+
+
+ `,
+ this.shadowRoot
+ );
+ }
+}
+
+window.customElements.define("demo-app", DemoApp);
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..95f6354
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+ LitLine Demo - Adrien Pinet
+
+
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 2c7d2c2..14fd265 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"scripts": {
"clean": "rm -fr dist cdn",
"test": "npm run clean && esbuild test/*.spec.ts --outdir=dist --bundle && karma start karma.conf.cjs",
+ "demo": "npm run clean && mkdir dist && cp ./demo/index.html dist && esbuild ./demo/demo-app.ts --bundle --outdir=dist --servedir=dist",
"build:cdn": "node ./build.cdn.js",
"build:dist": "tsc",
"build": "npm run clean && npm run build:cdn && npm run build:dist"