Timeline charts example (#13)

* Add the timeline code example

* Nicer name for this function please

* Use caret for sdk package version

* Move the slider to a separate component

* Use refs for timerId and replay options

* Remove favicon link

* Improve readme and remove gitgnore

Author: kristinamongo

examples/timeline-charts-example/README.md

@@ -0,0 +1,64 @@
+# MongoDB Charts Embedding Example - Timeline Chart
+
+## Background
+
+📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_
+
+The example code in this directory is building a small react app, implementing a chart timeline using the Charts Embedding SDK.
+
+What the application is doing is showing the distribution of Olympic medals through the years.
+
+We are using a [filter](https://docs.mongodb.com/charts/saas/filter-embedded-charts/#filter-data-on-charts-embedded-with-the-sdk) on the Olympic year, changing the filter every few seconds to turn it into a timelapse.
+
+The idea is this - for every Olympic year we are filtering all data from the beginning of the Olympic games to the current year.
+
+Example:
+
+- First Olympic Year: in this case it's just the data for the first year
+- Second Olympic Year: all data from First Olympic Year to Second Olympic Year
+- Third Olympic Year: all data from First Olympic Year to Third Olympic Year
+- ....
+- Last Olympic Year: all data from First Olympic Year to Last Olympic Year, which in this case is all the data
+
+The idea of doing this application was to show you some interactivity you can accomplish with the embedding SDK.
+Doing timeline charts is not really a feature of the embedding SDK but it shows you that with a little bit of code you can do different things with your charts.
+
+## Quickstart
+
+_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`.
+
+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. It will open directly in the browser at this address `http://localhost:3000`.
+
+## Preparing your Chart for Embedding
+
+This sample is preconfigured to render specific charts. You can run the sample as-is, or you can modify it to render your own charts by completing the following steps:
+
+1. Log onto MongoDB Charts
+
+2. If you haven't done so already, create a chart on any dashboard that you would like to embed.
+
+3. Go to the Data Sources tab, find the data source that you are using on the chart, and choose External Sharing Options from the (...) menu. Make sure that embedding is enabled for this data source and select '**Unauthenticated or Verified Signature**'
+
+4. Find the chart you want to embed, click the **(...)** menu and select **Embed Chart**
+
+5. Ensure the Unauthenticated tab is selected and turn on '**Enable unauthenticated access**'
+
+6. Ensure that you whitelist all fields that you want to use filters for.
+
+7. Select the **Javascript SDK** option
+
+8. Note the Chart ID and the Chart Base URL, as you will need them for running the demo.
+
+## Running this Sample with your data
+
+1. If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding,
+   - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`)
+   - Replace the `baseUrl` string on with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments)
+   - Replace the `chartId` string on with the chart ID you copied from the MongoDB Charts Embedded Chart menu. The example code shows 2 charts. (look for "\~REPLACE\~" in the comments)
+   - Change the filter to whatever makes sense for your project. Currently the filter gets the data between two years and is using the "Year" field for filtering.

examples/timeline-charts-example/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "timeline-chart",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.9.12",
+    "@mongodb-js/charts-embed-dom": "^1.1.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/timeline-charts-example/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" style="height: 100%;"></div>
+  </body>
+</html>

examples/timeline-charts-example/public/pause.png

@@ -0,0 +1,69 @@
+.App {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #ebf1f5;
+}
+
+.slider {
+  margin: 50px 50px 0;
+}
+
+.charts {
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid lightgray;
+}
+
+button {
+  background-color: transparent;
+}
+
+.actions {
+  margin: 1% 3%;
+}
+
+.action-button {
+  border: 0;
+  cursor: pointer;
+  background-size: cover;
+  margin-left: 20px;
+  width: 50px;
+  height: 50px;
+  outline: none;
+}
+
+.play-button {
+  background-image: url("/play.png");
+}
+
+.pause-button {
+  background-image: url("/pause.png");
+}
+
+.charts {
+  height: 100%;
+  max-height: 850px;
+  background-color: white;
+  margin: 1% 3%;
+  display: flex;
+  justify-content: space-around;
+  border-radius: 4px;
+}
+
+#columnChart {
+  width: 42%;
+  max-height: 850px;
+}
+
+#geoChart {
+  width: 55%;
+  max-height: 850px;
+}

examples/timeline-charts-example/public/play.png

@@ -0,0 +1,14 @@
+import React from "react";
+import "./App.css";
+
+import Dashboard from "./Dashboard";
+
+function App() {
+  return (
+    <div className="App">
+      <Dashboard />
+    </div>
+  );
+}
+
+export default App;

examples/timeline-charts-example/src/App.css

@@ -0,0 +1,171 @@
+import React, { useRef, useCallback, useState } from "react";
+
+import PrettySlider from "./PrettySlider";
+import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
+import { useEffect } from "react";
+
+const firstOlympicsYear = 1896;
+const lastOlympicsYear = 2016;
+const timelineInterval = 2000; //ms
+
+const sdk = new ChartsEmbedSDK({
+  baseUrl: "https://charts.mongodb.com/charts-data-science-project-aygif", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
+});
+
+const columnChart = sdk.createChart({
+  chartId: "ff518bbb-923c-4c2c-91f5-4a2b3137f312", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
+});
+
+const geoChart = sdk.createChart({
+  chartId: "b1983061-ee44-40ad-9c45-4bb1d4e74884", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
+});
+
+export default function Dashboard() {
+  const refColumnChart = useRef(null);
+  const refGeoChart = useRef(null);
+  const [year, setYear] = useState(lastOlympicsYear);
+  const [playing, setPlaying] = useState(false);
+
+  const yearRef = React.useRef(year);
+  yearRef.current = year;
+
+  const timerIdRef = React.useRef();
+  const replayRef = React.useRef(false);
+
+  const renderColumnChart = useCallback(async (ref) => {
+    try {
+      await columnChart.render(ref);
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const renderGeoChart = useCallback(async (ref) => {
+    try {
+      await geoChart.render(ref);
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  const setRefColumnChart = useCallback(
+    (ref) => {
+      if (ref) {
+        renderColumnChart(ref);
+      }
+      // Save a reference to the node
+      refColumnChart.current = ref;
+    },
+    [renderColumnChart]
+  );
+
+  const setRefGeoChart = useCallback(
+    (ref) => {
+      if (ref) {
+        renderGeoChart(ref);
+      }
+      // Save a reference to the node
+      refGeoChart.current = ref;
+    },
+    [renderGeoChart]
+  );
+
+  const handleChange = (_event, newValue) => {
+    setYear(newValue);
+  };
+
+  const handleChangeCommitted = (_event, newValue) => {
+    setYear(newValue);
+    getDataFromAllPreviousYears(newValue);
+  };
+
+  // This function is creating the filter that will be executed on the data.
+  // If you wish to run this example on your data, change it to accomodate your idea or make sure you have a "Year" field in your data source
+  const getDataFromAllPreviousYears = (endYear) => {
+    let filter = {
+      $and: [
+        { Year: { $gte: firstOlympicsYear } },
+        { Year: { $lte: endYear } },
+      ],
+    };
+
+    return Promise.all([
+      geoChart.setFilter(filter),
+      columnChart.setFilter(filter),
+    ]);
+  };
+
+  const play = () => {
+    let currentYear = yearRef.current + 4;
+
+    if (currentYear > lastOlympicsYear) {
+      if (replayRef.current) {
+        currentYear = firstOlympicsYear;
+        replayRef.current = false;
+      } else {
+        clearInterval(timerIdRef.current);
+        setPlaying(false);
+        return;
+      }
+    }
+    getDataFromAllPreviousYears(currentYear);
+    setYear(currentYear);
+  };
+
+  const setTimelineInterval = () => {
+    if (playing) {
+      // we do this because the first play with setInterval is after the time specified
+      // and the first filter should be instantaneous
+      play();
+      timerIdRef.current = setInterval(play, timelineInterval);
+    } else {
+      clearInterval(timerIdRef.current);
+    }
+  };
+
+  const actionTimeline = () => {
+    if (yearRef.current === lastOlympicsYear) {
+      replayRef.current = true;
+    }
+
+    setPlaying(!playing);
+  };
+
+  useEffect(() => {
+    setTimelineInterval();
+  }, [playing]);
+
+  const buttonClass = `action-button ${
+    playing ? "pause-button" : "play-button"
+  }`;
+
+  return (
+    <>
+      <header className="header">
+        <h1>Building timeline charts with Charts Embedding SDK (MongoDB)</h1>
+        <button className={buttonClass} onClick={actionTimeline}></button>
+      </header>
+
+      <div className="actions">
+        <div className="slider">
+          <PrettySlider
+            valueLabelDisplay="on"
+            aria-label="pretto slider"
+            min={firstOlympicsYear}
+            max={lastOlympicsYear}
+            step={4}
+            onChangeCommitted={handleChangeCommitted}
+            onChange={handleChange}
+            value={year}
+            defaultValue={lastOlympicsYear}
+          />
+        </div>
+      </div>
+
+      <div className="charts">
+        <div id="columnChart" ref={setRefColumnChart}></div>
+        <div id="geoChart" ref={setRefGeoChart}></div>
+      </div>
+    </>
+  );
+}