From 52d53f9b03ebc6d04f3882153e2d07bd515a499f Mon Sep 17 00:00:00 2001 From: khanguslee Date: Mon, 14 Feb 2022 13:58:31 +1100 Subject: [PATCH 1/3] doc: Replace references to stich to realm --- examples/charts/authenticated-realm/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/charts/authenticated-realm/README.md b/examples/charts/authenticated-realm/README.md index 58fdf80..b9fcb5a 100644 --- a/examples/charts/authenticated-realm/README.md +++ b/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 From 68fb9a8a17a80a20026093b3de4f80793d269010 Mon Sep 17 00:00:00 2001 From: khanguslee Date: Mon, 14 Feb 2022 13:59:59 +1100 Subject: [PATCH 2/3] fix: Disable interactive controls before charts have been rendered --- examples/charts/timeline-charts-example/src/App.css | 8 ++++++++ .../charts/timeline-charts-example/src/Dashboard.jsx | 12 ++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/examples/charts/timeline-charts-example/src/App.css b/examples/charts/timeline-charts-example/src/App.css index 51ba591..399cea1 100644 --- a/examples/charts/timeline-charts-example/src/App.css +++ b/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; diff --git a/examples/charts/timeline-charts-example/src/Dashboard.jsx b/examples/charts/timeline-charts-example/src/Dashboard.jsx index 7d33720..1d54c28 100644 --- a/examples/charts/timeline-charts-example/src/Dashboard.jsx +++ b/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() {
Date: Mon, 14 Feb 2022 15:20:16 +1100 Subject: [PATCH 3/3] doc: Add link to codesandbox for timeline example --- examples/charts/timeline-charts-example/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/charts/timeline-charts-example/README.md b/examples/charts/timeline-charts-example/README.md index 76cafd4..13c5b6d 100644 --- a/examples/charts/timeline-charts-example/README.md +++ b/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.