fix: CHARTS-6412 Update timeline example to wait for rendering (#58)

Author: khanguslee

examples/charts/authenticated-realm/README.md

@@ -12,7 +12,7 @@ Charts can be embedded either using a simple IFRAME snippet, or by using the Cha
 
 This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **MongoDB Realm** as an authentication provider. The sample app is already set up to authenticate with a Realm Application hosted by the Charts Development team.
 
-This sample also demonstrates data filtering by role, thanks to Realm's extensive rules system. See more details [here](https://docs.mongodb.com/stitch/mongodb/define-roles-and-permissions/). Simply login with either australianEmployee@mongodb.com or canadianEmployee@mongodb.com, and take note of the different results!
+This sample also demonstrates data filtering by role, thanks to Realm's extensive rules system. See more details [here](https://docs.mongodb.com/realm/mongodb/define-roles-and-permissions/). Simply login with either australianEmployee@mongodb.com or canadianEmployee@mongodb.com, and take note of the different results!
 
 #### The features included in this demo are as follows:
 
@@ -83,7 +83,7 @@ Choose or create a Realm Cloud app which will be used to authenticate users who
 
 ### Optionally, Prepare your Dataset
 
-If you want to use your Realm app to filter data for each user, (Like we have done in our sample) set up an [Atlas service](https://www.mongodb.com/cloud/atlas) and corresponding [Rules](https://docs.mongodb.com/stitch/mongodb/define-roles-and-permissions/) that filter the data as desired. Injected Filters and [Dashboard filtering](https://www.mongodb.com/blog/post/filter-your-dashboards-with-mongodb-charts) are other Charts features one can use to attain similar functionality.
+If you want to use your Realm app to filter data for each user, (Like we have done in our sample) set up an [Atlas service](https://www.mongodb.com/cloud/atlas) and corresponding [Rules](https://docs.mongodb.com/realm/mongodb/define-roles-and-permissions/) that filter the data as desired. Injected Filters and [Dashboard filtering](https://www.mongodb.com/blog/post/filter-your-dashboards-with-mongodb-charts) are other Charts features one can use to attain similar functionality.
 
 ### Prepare MongoDB Charts
 

examples/charts/timeline-charts-example/README.md

@@ -4,6 +4,8 @@
 
 📄 _[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/timeline-charts-example)_
+
 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.

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

@@ -48,6 +48,14 @@ button {
   background-image: url("/pause.png");
 }
 
+.show {
+  visibility: visible;
+}
+
+.hide {
+  visibility: hidden;
+}
+
 .charts {
   height: 100%;
   max-height: 850px;

examples/charts/timeline-charts-example/src/Dashboard.jsx

@@ -23,6 +23,9 @@ const geoChart = sdk.createChart({
 export default function Dashboard() {
   const refBarChart = useRef(null);
   const refGeoChart = useRef(null);
+
+  const [isBarChartRendered, setIsBarChartRendered] = useState(false);
+  const [isGeoChartRendered, setIsGeoChartRendered] = useState(false);
   const [year, setYear] = useState(lastOlympicsYear);
   const [playing, setPlaying] = useState(false);
 
@@ -32,9 +35,12 @@ export default function Dashboard() {
   const timerIdRef = React.useRef();
   const replayRef = React.useRef(false);
 
+  const chartsRendered = isBarChartRendered & isGeoChartRendered;
+
   const renderBarChart = useCallback(async (ref) => {
     try {
       await barChart.render(ref);
+      setIsBarChartRendered(true);
     } catch (e) {
       console.error(e);
     }
@@ -43,6 +49,7 @@ export default function Dashboard() {
   const renderGeoChart = useCallback(async (ref) => {
     try {
       await geoChart.render(ref);
+      setIsGeoChartRendered(true);
     } catch (e) {
       console.error(e);
     }
@@ -137,7 +144,7 @@ export default function Dashboard() {
 
   const buttonClass = `action-button ${
     playing ? "pause-button" : "play-button"
-  }`;
+  } ${chartsRendered ? "show" : "hide"}`;
 
   return (
     <>
@@ -150,7 +157,8 @@ export default function Dashboard() {
         <div className="slider">
           <PrettySlider
             valueLabelDisplay="on"
-            aria-label="pretto slider"
+            aria-label="pretty slider"
+            disabled={!chartsRendered}
             min={firstOlympicsYear}
             max={lastOlympicsYear}
             step={4}