diff --git a/examples/readme.md b/examples/readme.md index 823cd4d..951d424 100644 --- a/examples/readme.md +++ b/examples/readme.md @@ -5,6 +5,7 @@ MongoDB Charts allows you to create visualizations of your MongoDB data using a 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). This directory contains example applications making use of both unauthenticated and authenticated utilizations of the SDK. They are provided as a reference to kick start your development process. To run these examples, simply clone the directory, and run the following commands: + - `npm install` - `npm start` @@ -13,10 +14,13 @@ in the example directory of your choosing. The [Unauthenticated](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/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. Our **authenticated** examples are great references if you need help getting started creating Authenticated Embedded Charts. We have three examples, each tailored for the three Authentication Providers now available in MongoDB Charts. The three examples are: - - [Custom JWT](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-custom-jwt) - - [MongoDB Realm](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-realm) - - [Google](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-google) + +- [Custom JWT](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-custom-jwt) +- [MongoDB Realm](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-realm) +- [Google](https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples/authenticated-google) + +There is also an [example](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/timeline-charts-example) of how to build an animated timeline chart. We hope these resources help, and as always, -Happy Charting! 🚀📈 \ No newline at end of file +Happy Charting! 🚀📈 diff --git a/examples/timeline-charts-example/README.md b/examples/timeline-charts-example/README.md index 27791aa..e7898b9 100644 --- a/examples/timeline-charts-example/README.md +++ b/examples/timeline-charts-example/README.md @@ -8,6 +8,8 @@ The example code in this directory is building a small react app, implementing a What the application is doing is showing the distribution of Olympic medals through the years. +![timeline-retina-960x438-500ms](https://user-images.githubusercontent.com/51065986/89610627-5df5d800-d8be-11ea-954b-6d92086d9f58.gif) + 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. diff --git a/examples/timeline-charts-example/package.json b/examples/timeline-charts-example/package.json index 71754f6..29c8394 100644 --- a/examples/timeline-charts-example/package.json +++ b/examples/timeline-charts-example/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.9.12", - "@mongodb-js/charts-embed-dom": "^1.1.2", + "@mongodb-js/charts-embed-dom": "^1.1.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" diff --git a/examples/timeline-charts-example/src/App.css b/examples/timeline-charts-example/src/App.css index 22a9c36..51ba591 100644 --- a/examples/timeline-charts-example/src/App.css +++ b/examples/timeline-charts-example/src/App.css @@ -58,7 +58,7 @@ button { border-radius: 4px; } -#columnChart { +#barChart { width: 42%; max-height: 850px; } diff --git a/examples/timeline-charts-example/src/Dashboard.jsx b/examples/timeline-charts-example/src/Dashboard.jsx index 1fb2cd6..7d33720 100644 --- a/examples/timeline-charts-example/src/Dashboard.jsx +++ b/examples/timeline-charts-example/src/Dashboard.jsx @@ -12,7 +12,7 @@ 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({ +const barChart = sdk.createChart({ chartId: "ff518bbb-923c-4c2c-91f5-4a2b3137f312", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog }); @@ -21,7 +21,7 @@ const geoChart = sdk.createChart({ }); export default function Dashboard() { - const refColumnChart = useRef(null); + const refBarChart = useRef(null); const refGeoChart = useRef(null); const [year, setYear] = useState(lastOlympicsYear); const [playing, setPlaying] = useState(false); @@ -32,9 +32,9 @@ export default function Dashboard() { const timerIdRef = React.useRef(); const replayRef = React.useRef(false); - const renderColumnChart = useCallback(async (ref) => { + const renderBarChart = useCallback(async (ref) => { try { - await columnChart.render(ref); + await barChart.render(ref); } catch (e) { console.error(e); } @@ -48,15 +48,15 @@ export default function Dashboard() { } }, []); - const setRefColumnChart = useCallback( + const setRefBarChart = useCallback( (ref) => { if (ref) { - renderColumnChart(ref); + renderBarChart(ref); } // Save a reference to the node - refColumnChart.current = ref; + refBarChart.current = ref; }, - [renderColumnChart] + [renderBarChart] ); const setRefGeoChart = useCallback( @@ -91,7 +91,7 @@ export default function Dashboard() { return Promise.all([ geoChart.setFilter(filter), - columnChart.setFilter(filter), + barChart.setFilter(filter), ]); }; @@ -163,7 +163,7 @@ export default function Dashboard() {
-
+