add demo page

apinet · Feb 26, 2024 · bf0883e · bf0883e
1 parent 218d847
commit bf0883e
Show file tree

Hide file tree

Showing 3 changed files with 319 additions and 0 deletions.
diff --git a/demo/demo-app.ts 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`
+          <header>
+            <span class="logo">&lt;lit-line/&gt;</span>
+          </header>
+
+          <h1>
+            <strong>{small, fast, responsive, interactive}</strong> svg line chart web component for
+            <strong>modern website</strong>. That's it.
+          </h1>
+
+          <main>
+            <nav class="nav">
+              ${this.selection === null
+                ? html`
+                    <button
+                      class="item"
+                      ?selected=${this.selectedView === View.HighDensity}
+                      @click=${() => this.selectView(View.HighDensity)}
+                    >
+                      Random data
+                    </button>
+                    <button
+                      class="item"
+                      ?selected=${this.selectedView === View.MultiLines}
+                      @click=${() => this.selectView(View.MultiLines)}
+                    >
+                      Multi lines
+                    </button>
+                  `
+                : html`
+                    <span class="item">
+                      index:
+                      <span class="time">${Math.round(this.selection.time)}</span>
+                      | values:
+                      ${this.selection.values.map(
+                        (value, i) =>
+                          html`<span class="value" style=${styleMap({ color: this.data[i].color })}
+                            >${value ? Math.round(value) : "--"}</span
+                          >`
+                      )}
+                    </span>
+                  `}
+            </nav>
+
+            <lit-line
+              @lit-line:selected=${(e: CustomEvent) => this.onSelection(e)}
+              .data=${this.data}
+            ></lit-line>
+          </main>
+
+          <footer>
+            <span>
+              <a href="https://twitter.com/AdrienForward">Adrien Pinet</a>
+            </span>
+          </footer>
+
+          <style>
+            :host {
+              display: flex;
+              flex-flow: column;
+              justify-content: space-between;
+              padding: 1em;
+              min-height: calc(100vh - 2em);
+              font-size: 1em;
+            }
+
+            .icon {
+              height: 1em;
+              width: 1em;
+            }
+
+            a {
+              text-decoration: none;
+              font-weight: 600;
+              color: inherit;
+            }
+
+            a .icon {
+              margin-right: 0.4em;
+            }
+
+            button {
+              display: flex;
+              align-items: center;
+            }
+
+            header {
+              display: flex;
+              justify-content: space-between;
+              font-size: 1.4em;
+            }
+
+            header > .logo {
+              font-weight: 600;
+            }
+
+            header > .github {
+              color: #445;
+            }
+
+            header > .github:hover {
+              color: #112;
+            }
+
+            h1 {
+              padding-left: 0.2em;
+              color: #224;
+              font-size: 1em;
+              font-weight: 300;
+            }
+
+            nav {
+              display: flex;
+              flex-flow: row;
+              justify-content: center;
+              align-items: center;
+              font-size: 1em;
+              min-height: 3em;
+              padding: 1em 0;
+              margin-top: 2em 0 1em 0;
+            }
+
+            .nav > .item {
+              background-color: transparent;
+              border: 2px solid transparent;
+              padding: 0.5em;
+              font-size: 1em;
+            }
+
+            .nav > .item > .time,
+            .nav > .item > .value {
+              padding: 0.2em 0.4em;
+              border-radius: 0.2em;
+              font-weight: 600;
+            }
+
+            .nav > .item > .value {
+              color: white;
+              margin: 0 0.2em;
+            }
+
+            .nav > .item[selected] {
+              border-color: black;
+              font-weight: 600;
+            }
+
+            .nav > .item:not([selected]) {
+              cursor: pointer;
+            }
+
+            lit-line {
+              width: 100%;
+              height: 25vh;
+              --lit-line-selected-time--color: #53a0e8;
+              --lit-line-selected-time--width: 3;
+            }
+
+            footer {
+              display: flex;
+              padding: 2em 0;
+              font-size: 0.8em;
+              justify-content: flex-end;
+              color: #556;
+            }
+
+            @media (min-height: 400px) {
+              lit-line {
+                height: 50vh;
+              }
+            }
+            @media (min-height: 600px) {
+              lit-line {
+                height: 40vh;
+              }
+            }
+          </style>
+        `,
+        this.shadowRoot
+      );
+  }
+}
+
+window.customElements.define("demo-app", DemoApp);
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"
+    />
+    <base href="/" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      class="js-site-favicon"
+      type="image/svg+xml"
+      href="https://github.githubassets.com/favicons/favicon.svg"
+    />
+    <title>LitLine Demo - Adrien Pinet</title>
+    <meta
+      name="description"
+      content="SVG line chart web component based on lit-html. fast, small, reactive, responsive. Made with love by Adrien Pinet."
+    />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: "Nunito", "SF Pro Text", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+          Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        color: #113;
+      }
+    </style>
+  </head>
+
+  <body>
+    <demo-app></demo-app>
+  </body>
+
+  <script type="module" src="./demo-app.js"></script>
+</html>
diff --git 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"