feat: CHARTS-6400 Add getData example to embedded unauthenticated chart example (#60)

* chore: Update charts embed sdk version

* style: Clean up CSS file to bunch up related selectors together

* chore: Add json-viewer package

* feat: Display chart data in JSON viewer on the unauthenticated chart embedding example

* doc: Add comment above get chart data event listener in example code

* doc: Place json viewer inline with chart info div

* Updated sdk version 2.2.0

Co-authored-by: Muthukrishnan Krishnamurthy <[email protected]>

Author: khanguslee

examples/charts/unauthenticated/assets/styles.css

@@ -1,17 +1,17 @@
+:root {
+  --bg-light-mode-color: #ffffff;
+  --bg-dark-mode-color: #21313c;
+  --font-dark-mode-color: #ffffff;
+}
 html,
 body {
   height: 100%;
   font-family: "Heebo";
   transition: background-color 0.5s ease;
 }
 
-.chart-title {
-  text-align: center;
-  color: #89989b;
-}
-
-.body-content {
-  display: flex;
+span {
+  white-space: pre;
 }
 
 th {
@@ -20,19 +20,10 @@ th {
   text-align: right;
 }
 
-.chartInfo {
-  font-size: 20px;
-  width: 520px;
-}
-
 td {
   padding-left: 20px;
 }
 
-.chartsContainer {
-  display: flex;
-}
-
 main {
   box-sizing: border-box;
   padding: 1rem;
@@ -41,6 +32,7 @@ main {
   flex-direction: column;
 }
 
+/* Navigation Bar */
 #nav {
   flex-shrink: 0;
   padding: 1rem;
@@ -58,31 +50,70 @@ main {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
+.theme-label {
+  line-height: 35px;
+  padding-left: 10px;
+}
+
+.dark-mode {
+  background-color: var(
+    --bg-dark-mode-color
+  ); /* to match the chart's background */
+  color: var(--font-dark-mode-color);
+}
+
+body span.theme-label::before {
+  content: "☀️";
+}
+
+body.dark-mode span.theme-label::before {
+  content: "🌙";
+}
+
+/* Body */
+.body-content {
+  display: flex;
+}
+
+/* Chart */
 #chart {
   border-top: none;
   flex-grow: 1;
   height: 100%;
   width: 80%;
 }
 
-.theme-label {
-  line-height: 35px;
-  padding-left: 10px;
+/* Chart Info */
+.chartInfo {
+  font-size: 20px;
+  width: 520px;
 }
 
-span {
-  white-space: pre;
+.chart-title {
+  text-align: center;
+  color: #89989b;
 }
 
-.dark-mode {
-  background-color: #21313c; /* to match the chart's background */
-  color: #ffffff;
+#chartDataButton {
+  margin-top: 1em;
+  padding: 0.5rem 1rem;
+  width: 100%;
 }
 
-body span.theme-label::before {
-  content: "☀️";
+/* JSON Viewer */
+#jsonViewer {
+  visibility: hidden;
+  transition: background-color 0.5s ease;
+  --background-color: var(--bg-light-mode-color);
+  --string-color: #00a35c;
+  --preview-color: #ffc010;
+  --property-color: #0498ec;
+  --number-color: #b45af2;
+  --boolean-color: #ef5752;
 }
 
-body.dark-mode span.theme-label::before {
-  content: "🌙";
+body.dark-mode #jsonViewer {
+  --background-color: var(--bg-dark-mode-color);
+  --string-color: #00ed64;
+  --preview-color: #ffec9e;
 }

examples/charts/unauthenticated/index.html

@@ -55,10 +55,11 @@
           <span id="themeEmoji" class="theme-label"></span>
         </label>
       </div>
+
       <div class="body-content">
         <div id="chart"></div>
         <div class="chartInfo">
-          <h3 class="chart-title">CHART DATA</h3>
+          <h3 class="chart-title">CHART OPTIONS</h3>
           <table>
             <tr>
               <th>Current Max Data Age (in secs)</th>
@@ -73,8 +74,15 @@ <h3 class="chart-title">CHART DATA</h3>
               <td id="currentFilter">None</td>
             </tr>
           </table>
+
+          <button id="chartDataButton">
+            <span id="chartDataButtonText">Show</span> Chart Data
+          </button>
+          
+          <json-viewer id="jsonViewer">{}</json-viewer>
         </div>
       </div>
+
     </main>
     <script src="src/index.js"></script>
   </body>

examples/charts/unauthenticated/package-lock.json

@@ -8,7 +8,8 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@mongodb-js/charts-embed-dom": "^2.1.0",
+    "@alenaksu/json-viewer": "^0.3.4",
+    "@mongodb-js/charts-embed-dom": "^2.2.0",
     "parcel": "^1.12.4"
   },
   "devDependencies": {