add demo page

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);

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>

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"