feat: CHARTS-6392 Add Dashboard Embedding examples (#59)

* feat: Render unauthenticated embedded dashboard in example

* feat: Add theme toggle for unauthenticated dashboard example

* feat: Add height/width mode select

* feat: Add charts background colour select

* style: Prettify buttons and dropdowns

* feat: Add refresh and max data age to unauthenticated dashboard example

* feat: Add embedded authenticated custom JWT dashboard example

* feat: Add embedded authenticated google  dashboard example

* feat: Add embedded authenticated realm dashboard example

* chore: Update dashboard examples with latest charts-embed-dom package

* chore: Replace Embed Chart comment with Embed Dashboard

* style: Remove unused font from unauthenticated dashboard example

* feat: Create basic unauthenticated embedded dashboard to use getAllCharts method

* feat: Refresh a single chart that you request for

* feat: Display clicked element information

* chore: Replace charts link with prod example links for authenticated examples

* chore: Replace charts link with prod example links for unauthenticated examples

* refactor: Replace mentions of refresh interval with max data age

* doc: Add README for unauthenticated embedded dashboard

* doc: Add README for unauthenticated embedded dashboard using getAllCharts and getChart methods

* doc: Add README files for all authenticated dashboard examples

* doc: Remove links to code sandbox for authenticated examples that do not work

* doc: Add links to dashboard embedding documentation

* feat: Flip theme text for unauthenticated embedded dashboard

* doc: Clear up max data age documentation in README

* Updated sdk version 2.2.0

* doc: Add links to embedded dashboard examples on main README

Co-authored-by: Muthukrishnan Krishnamurthy <muthukrish.k@M-C02DQ489MD6M.modem>

Author: khanguslee

README.md

@@ -38,3 +38,11 @@ yarn add @mongodb-js/charts-embed-dom
 - [Getting started with click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)
 - [Interactive filtering using click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)
 - [Programmatic highlighting](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/programmatic-highlighting)
+
+### Embedded Dashboard Guides
+
+- [Embedding an unauthenticated dashboard](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)
+- [Dashboard embedding with custom JWT authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-custom-jwt)
+- [Dashboard embedding with Realm authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm)
+- [Dashboard embedding with Google authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-google)
+- [Accessing a Chart instance via Dashboard class](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)

examples/README.md

@@ -11,7 +11,7 @@ This directory contains example applications making use of both unauthenticated
 
 in the example directory of your choosing.
 
----
+## Embedded Charts
 
 The [Unauthenticated](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) example is the best place to see all the current SDK features being used. Since it doesn't require authentication, it's the easiest example to set up and follow along with.
 
@@ -28,6 +28,24 @@ If you'd like to build **interactive** charts, we have two examples showing this
 
 There is also an [example](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/timeline-charts-example) of how to build an animated timeline chart.
 
+## Embedded Dashboard
+
+The embedded dashboards are very similar to the embedded charts examples, but with a few differences that are highlighted in each example.
+
+The easiest method of embedding a dashboard is by following the [unauthenticated example](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated). 
+
+For interactive purposes, you can also look at the [unauthenticated get chart example](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart) where you can attach a click event listener to individual charts on an embedded dashboard.
+
+If your dashboard needs some privacy, you can look at our authenticated examples which uses the same authentication providers as the embedded chart examples too.
+
+
+- [Custom JWT](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-custom-jwt)
+- [MongoDB Realm](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm)
+- [Google](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-google)
+
+
+---
+
 We hope these resources help, and as always,
 
 Happy Charting! 🚀 📈

examples/charts/authenticated-google/README.md

@@ -4,8 +4,6 @@
 
 📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_
 
-🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-google)_
-
 MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application.
 
 Charts can be embedded either using a simple IFRAME snippet, or by using the Charts Embedding SDK from your JavaScript code. When using the SDK, embedded charts can be either unauthenticated (meaning anyone who has the embed code can view the chart), or authenticated (whereby the user can only view the chart if they have an active authentication session linked to a Charts authentication provider).
@@ -85,7 +83,6 @@ Once you gain an understanding of the API, consider the following
 - Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure.
 
   - For example, consider the following injected filter
-  -
 
   ```javascript
   // Reject tokens that aren't from example.com domain

examples/charts/unauthenticated/README.md

@@ -17,10 +17,8 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica
 - Render an embedded chart on a web page
 - Set the charts theme to either `'light'` or `'dark'`
 - Get the charts current theme
-- Set the charts refresh interval
-  - Note, the default interval is 0, implying that after rendering, the chart will never refresh.
-  - The minimum refresh interval is 10 seconds.
-- Get the charts current refresh interval
+- Set the charts max data age to various values
+- Get the charts current max data age
 - Manually refresh the chart
 - Set the charts current filter
   - Note, filtering on a chart requires setting up white listed fields in MongoDB Charts. We have done this for our sample data.

examples/charts/unauthenticated/index.html

@@ -24,8 +24,8 @@
           <button id="refresh">⟳</button>
         </label>
         <label
-          ><span>REFRESH INTERVAL </span>
-          <select id="refresh-interval">
+          ><span>MAX DATA AGE </span>
+          <select id="maxDataAge">
             <option value="-1">None</option>
             <option value="10">10 Seconds</option>
             <option value="60"><span>1 Minute</span></option>
@@ -61,8 +61,8 @@
           <h3 class="chart-title">CHART DATA</h3>
           <table>
             <tr>
-              <th>Current Refresh Interval (in secs)</th>
-              <td id="currentRefreshInterval">3600</td>
+              <th>Current Max Data Age (in secs)</th>
+              <td id="currentMaxDataAge">3600</td>
             </tr>
             <tr>
               <th>Current Theme</th>

examples/charts/unauthenticated/src/index.js

@@ -27,19 +27,19 @@ async function renderChart() {
 
     chart.getMaxDataAge()
     Returns a number pertaining to the charts current
-    refresh interval.
+    max data age.
    */
   document
-    .getElementById("refresh-interval")
+    .getElementById("maxDataAge")
     .addEventListener("change", async (e) => {
-      var refreshInterval = e.target.value;
-      refreshInterval
-        ? chart.setMaxDataAge(Number(refreshInterval))
+      var maxDataAge = e.target.value;
+      maxDataAge
+        ? chart.setMaxDataAge(Number(maxDataAge))
         : chart.setMaxDataAge(3600);
 
-      var currentRefreshInterval = await chart.getMaxDataAge();
-      document.getElementById("currentRefreshInterval").innerText =
-        currentRefreshInterval;
+      var currentMaxDataAge = await chart.getMaxDataAge();
+      document.getElementById("currentMaxDataAge").innerText =
+        currentMaxDataAge;
     });
 
   /*

examples/dashboard/authenticated-custom-jwt/README.md

@@ -0,0 +1,34 @@
+# MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Custom JWT)
+
+## Background
+
+📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_
+
+The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method.
+
+This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Custom JWT as the authentication provider.
+
+_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._
+
+## Highlighted Features
+
+In this example, you should be able to:
+
+- Render an authenticated embedded dashboard
+- Render a dashboard to valid users only
+- Custom JWT authentication via the `jsonwebtoken` package
+
+## Quick Start
+
+_The following steps presume the use of npm, though yarn works as well._
+
+1. Ensure you have Node installed. You can confirm with `node --version`. On some operating systems, Node is available as the `nodejs` binary instead.
+
+2. Clone the Git repository or download the code to your computer.
+
+3. Run `npm install` to install the package dependencies.
+
+4. Run `npm start` to start the application. This will utilise parcel.js
+   - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is
+
+This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample.

examples/dashboard/authenticated-custom-jwt/app.js

@@ -0,0 +1,35 @@
+const express = require("express");
+const bodyParser = require("body-parser");
+const cors = require("cors");
+const jwt = require("jsonwebtoken");
+const config = require("./config.js");
+
+const app = express();
+const port = 8000;
+
+// Configuring body parser middleware
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json());
+app.use(cors());
+
+app.post("/login", (req, res) => {
+  const loginDetails = req.body;
+  // mock a check against the database
+  let mockedUsername = "admin";
+  let mockedPassword = "password";
+
+  if (
+    loginDetails &&
+    loginDetails.username === mockedUsername &&
+    loginDetails.password === mockedPassword
+  ) {
+    let token = jwt.sign({ username: loginDetails.username }, config.secret, {
+      expiresIn: "12h" // expires in 12 hours
+    });
+    res.json({ bearerToken: token });
+  } else {
+    res.status(401).send(false);
+  }
+});
+
+app.listen(port, () => console.log(`Example app listening on port ${port}!`));

examples/dashboard/authenticated-custom-jwt/assets/styles.css

@@ -0,0 +1,109 @@
+#dashboard {
+  border-top: none;
+  background-color: #f9fbfa;
+  flex-grow: 1;
+  height: 100%;
+  box-shadow: grey 0px 0px 10px 1px;
+  visibility: hidden;
+}
+
+.dashboard-container {
+  height: 80vh;
+  width: 80vw;
+  margin: auto;
+  text-align: center;
+}
+
+body.logged-in #login-page {
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+
+body.logged-in #lock::before {
+  content: "🔐";
+}
+
+body #lock::before {
+  content: "🔒";
+}
+
+body.logged-in #dashboard {
+  visibility: visible;
+}
+
+.hideLogin {
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+
+.main {
+  box-sizing: border-box;
+  padding: 1rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-page {
+  width: 360px;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #ffffff;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Heebo", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Heebo", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #13aa52;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #ffffff;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,
+.form button:active,
+.form button:focus {
+  background: #109246;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #13aa52;
+  text-decoration: none;
+}
+
+body {
+  background: #e7eeec; /* fallback for old browsers */
+  font-family: "Heebo", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}

examples/dashboard/authenticated-custom-jwt/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  secret: "topsecret"
+};