Added example pie chart

Author: djthorpe

npm/helloworld/package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "bootstrap-icons": "^1.13.1",
+        "echarts": "^5.6.0",
         "lit": "^3.3.0",
         "tslib": "^2.5.2"
     },

npm/helloworld/src/index.html

@@ -60,16 +60,17 @@
           <wc-button color="error">Error</wc-button>
           <wc-button disabled>Disabled</wc-button>
         </wc-content>
-        <wc-content>
-          BOTTOM CONTENT
+        <wc-content style="border: 1px solid red">
+          <wc-piechart></wc-piechart>
         </wc-content>
       </wc-content>
 
     </wc-content>
 
   </wc-canvas>
 
-  <wc-toast visible>HELLO</wc-toast>
+  <!-- Place a toast at the bottom of the page -->
+  <wc-toast></wc-toast>
 </body>
 
 </html>

npm/helloworld/src/index.ts

@@ -8,6 +8,8 @@ import './wc/core/GoogleAuth'
 
 // Import classes
 import { GoogleAuth } from './wc/core/GoogleAuth';
+import { Toast } from './wc/layout/Toast';
+import { Button } from './wc/layout/Button'
 
 // Initialize the app
 document.addEventListener("DOMContentLoaded", () => {
@@ -17,4 +19,17 @@ document.addEventListener("DOMContentLoaded", () => {
         Theme: 'outline',
         Size: 'small'
     };
+
+
+    const toast = document.querySelector('wc-toast') as Toast;
+    const buttons = document.querySelectorAll('wc-button');
+    buttons.forEach((button) => {
+        button.addEventListener('click', (evt) => {
+            const button = evt.target as Button;
+            toast.show(`Button clicked ${ button.textContent }`,{
+                duration: 3000,
+                color: button.color
+            });
+        });
+    });
 });

npm/helloworld/src/wc/charts/PieChart.ts

@@ -0,0 +1,89 @@
+import * as echarts from 'echarts/core';
+import { PieChart as ePieChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { LitElement, html, css, nothing, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+// Register the required components
+echarts.use([
+  ePieChart,
+  CanvasRenderer
+]);
+
+/**
+ * @class PieChart
+ *
+ * This class is a renders a pie chart, within a canvas or content element.
+ *
+ * @example
+ * <wc-canvas vertical>
+ *  <wc-nav>....</wc-nav>
+ *  <wc-piechart>....</wc-piechart>
+ * </wc-canvas>
+ */
+@customElement('wc-piechart')
+export class PieChart extends LitElement {
+  #chart: echarts.ECharts | null = null;
+  #node: HTMLDivElement | null = null;
+
+  protected firstUpdated(): void {    
+    this.#chart = echarts.init(this.shadowRoot.querySelector('div'));
+
+    // Set options for the chart
+    this.#chart.setOption({
+      series: [
+        {
+          type: 'pie',
+          label: {
+            "fontFamily": "IBM Plex Sans",
+          },
+          data: [
+            {
+              value: 335,
+              name: 'Direct Visit'
+            },
+            {
+              value: 234,
+              name: 'Union Ad'
+            },
+            {
+              value: 1548,
+              name: 'Search Engine'
+            }
+          ]
+        }
+      ]
+    });
+
+    // Set to resize the chart when the window is resized
+    window.addEventListener('resize', function () {
+      this.#chart.resize();
+    }.bind(this));
+  }
+
+
+  static get styles() {
+    return css`
+        :host {
+          flex: 1 0;
+      }
+
+      div {
+        display: flex;
+        flex: 1 0;
+        height: 100%;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <div class=${this.className || nothing}>${this.#node}</div>
+    `;
+  }
+
+  get className() {
+    const classes = [];
+    return classes.join(' ');
+  }
+}

npm/helloworld/src/wc/layout/Toast.ts

@@ -1,6 +1,14 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+interface ShowOptions {
+  /** The duration the toast is displayed for, in milliseconds. */
+  duration?: number;
+
+  /** The color of the button. */
+  color?: string;
+}
+
 /**
  * @class Toast
  *
@@ -13,7 +21,9 @@ import { customElement, property } from 'lit/decorators.js';
 @customElement('wc-toast')
 export class Toast extends LitElement {
   @property({ type: Boolean }) visible: boolean = false;
+  @property({ type: Number }) duration: number = 3000;
   @property({ type: String }) color?: string;
+  #timer: number | null = null;
 
   render() {
     return html`
@@ -23,34 +33,88 @@ export class Toast extends LitElement {
     `;
   }
 
+  show(message: string, opts = {} as ShowOptions) {
+    this.visible = true;
+    this.textContent = message;
+    this.color = opts.color || 'primary';
+
+    // Cancel any existing timer
+    if (this.#timer) {
+      clearTimeout(this.#timer);
+    }
+    // Set a new timer
+    this.#timer = setTimeout(() => {
+      this.visible = false;
+      this.#timer = null;
+    }, opts.duration || this.duration);
+  }
+
   static get styles() {
     return css`
       :host {
         position: fixed;
         z-index: 1000;
         right: 0;
         bottom: 0;
-
-        margin: var(--toast-margin);
-        background-color: var(--toast-background-color);
-        text-color: var(--toast-text-color);
       }
 
       :host div {
+        display: inline-flex;
+        margin: var(--toast-margin);
+        padding: var(--toast-padding);
+        border: var(--toast-border);
+        border-radius: var(--toast-border-radius);
         transition: visibility 0.2s, opacity 0.2s ease-in-out;
+        cursor: pointer;
+        user-select: none;
 
         &.visible {
-          display: block;
           visibility: visible;
           opacity: 1;
         }
 
         &:not(.visible) {
-          display: none;
           visibility: hidden;
           opacity: 0;
         }
       }
+
+      div.color-primary {
+        background-color: var(--primary-color);
+        color: var(--primary-opp-color);
+      }
+      div.color-secondary {
+        background-color: var(--secondary-color);
+        color: var(--secondary-opp-color);
+      }
+      div.color-light {
+        background-color: var(--light-color);
+        color: var(--light-opp-color);
+      }
+      div.color-dark {
+        background-color: var(--dark-color);
+        color: var(--dark-opp-color);
+      }
+      div.color-white {
+        background-color: var(--white-color);
+        color: var(--white-opp-color);
+      }
+      div.color-black {
+        background-color: var(--black-color);
+        color: var(--black-opp-color);
+      }
+      div.color-success {
+        background-color: var(--success-color);
+        color: var(--success-opp-color);
+      }
+      div.color-warning {
+        background-color: var(--warning-color);
+        color: var(--warning-opp-color);
+      }
+      div.color-error {
+        background-color: var(--error-color);
+        color: var(--error-opp-color);
+      }      
     `;
   }
 

npm/helloworld/src/wc/root.ts

@@ -11,3 +11,6 @@ import './layout/Nav'
 import './layout/NavItem'
 import './layout/NavSpace'
 import './layout/Toast'
+
+// Charts
+import './charts/PieChart'

npm/helloworld/src/wc/tokens.css

@@ -109,7 +109,10 @@ body {
 
 /* toast */
 :root {
+  --toast-margin: calc(var(--space-small) * 2) var(--space-small);
+  --toast-padding: var(--space-default) var(--space-default);
+  --toast-border: calc(var(--space-small) / 4) solid light-dark(var(--grey-50-color),var(--grey-50-color));
+  --toast-border-radius: calc(var(--space-small) / 2);
   --toast-background-color: light-dark(var(--grey-20-color),var(--grey-80-color));
   --toast-text-color: light-dark(var(--light-color),var(--dark-color));
-  --toast-margin: var(--space-default);
 }