From fc3d6fe05d9971912fca5856aa30d4ded207b9b2 Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Thu, 30 Mar 2023 10:32:30 +1100 Subject: [PATCH 1/7] docs: CHARTS-6059 leverage markdown-include pkg to include md files in each README.md chore: Fix use-own-data/ minor nits and remove extra desc in click event guides chore: Indendation nits and remove unused partial file chore: Remove /click-events partial files and misc fixes --- .../chart/authenticated-custom-jwt.md | 40 +++++++++ .../.md-config/chart/authenticated-google.md | 56 ++++++++++++ .../chart/authenticated-realm-deprecated.md | 43 +++++++++ .../chart/authenticated-realm-web.md | 40 +++++++++ .../.md-config/chart/click-events-basic.md | 88 +++++++++++++++++++ .../chart/click-events-filtering.md | 43 +++++++++ .../chart/programmatic-highlighting.md | 36 ++++++++ .../chart/timeline-charts-example.md | 49 +++++++++++ examples/.md-config/chart/unauthenticated.md | 47 ++++++++++ .../dashboard/authenticated-custom-jwt.md | 14 +++ .../dashboard/authenticated-google.md | 15 ++++ .../authenticated-realm-deprecated.md | 21 +++++ .../dashboard/authenticated-realm-web.md | 19 ++++ .../dashboard/unauthenticated-get-chart.md | 20 +++++ .../.md-config/dashboard/unauthenticated.md | 20 +++++ .../charts/authenticated-custom-jwt/README.md | 43 ++++----- .../authenticated-custom-jwt/markdown.json | 4 + .../charts/authenticated-google/README.md | 39 ++++---- .../charts/authenticated-google/markdown.json | 4 + .../authenticated-realm-deprecated/README.md | 47 +++++----- .../markdown.json | 4 + .../charts/authenticated-realm-web/README.md | 37 ++++---- .../authenticated-realm-web/markdown.json | 4 + examples/charts/click-events-basic/README.md | 28 +++--- .../charts/click-events-basic/markdown.json | 4 + .../charts/click-events-filtering/README.md | 21 ++--- .../click-events-filtering/markdown.json | 4 + .../programmatic-highlighting/README.md | 28 +++--- .../programmatic-highlighting/markdown.json | 4 + .../charts/timeline-charts-example/README.md | 22 ++--- .../timeline-charts-example/markdown.json | 4 + examples/charts/unauthenticated/README.md | 25 +++--- examples/charts/unauthenticated/markdown.json | 4 + .../authenticated-custom-jwt/README.md | 6 +- .../authenticated-custom-jwt/markdown.json | 4 + .../dashboard/authenticated-google/README.md | 6 +- .../authenticated-google/markdown.json | 4 + .../authenticated-realm-deprecated/README.md | 10 ++- .../markdown.json | 4 + .../authenticated-realm-web/README.md | 10 ++- .../authenticated-realm-web/markdown.json | 4 + .../unauthenticated-get-chart/README.md | 7 +- .../unauthenticated-get-chart/markdown.json | 4 + examples/dashboard/unauthenticated/README.md | 7 +- .../dashboard/unauthenticated/markdown.json | 4 + .../chart/background/desc-click-events.md | 1 + .../docs/chart/background/desc-extended.md | 1 + examples/docs/chart/background/desc-simple.md | 1 + .../background/features-authenticated.md | 4 + examples/docs/chart/background/start-block.md | 3 + examples/docs/chart/next-steps.md | 5 ++ .../create-authentication-provider-realm.md | 15 ++++ .../create-chart-to-embed.md | 9 ++ .../enable-authenticated-access.md | 25 ++++++ .../enable-unauthenticated-access.md | 19 ++++ examples/docs/chart/preparing-realm-app.md | 34 +++++++ .../docs/chart/using-own-data/end-block.md | 4 + .../chart/using-own-data/replace-block.md | 2 + .../docs/chart/using-own-data/start-block.md | 3 + examples/docs/dashboard/background-desc.md | 1 + examples/docs/dashboard/background-title.md | 3 + .../docs/dashboard/features-authenticated.md | 8 ++ .../dashboard/features-unauthenticated.md | 7 ++ examples/docs/happy-charting.md | 1 + examples/docs/quickstart-google.md | 16 ++++ examples/docs/quickstart.md | 14 +++ examples/docs/realm-credentials.md | 13 +++ 67 files changed, 978 insertions(+), 158 deletions(-) create mode 100644 examples/.md-config/chart/authenticated-custom-jwt.md create mode 100644 examples/.md-config/chart/authenticated-google.md create mode 100644 examples/.md-config/chart/authenticated-realm-deprecated.md create mode 100644 examples/.md-config/chart/authenticated-realm-web.md create mode 100644 examples/.md-config/chart/click-events-basic.md create mode 100644 examples/.md-config/chart/click-events-filtering.md create mode 100644 examples/.md-config/chart/programmatic-highlighting.md create mode 100644 examples/.md-config/chart/timeline-charts-example.md create mode 100644 examples/.md-config/chart/unauthenticated.md create mode 100644 examples/.md-config/dashboard/authenticated-custom-jwt.md create mode 100644 examples/.md-config/dashboard/authenticated-google.md create mode 100644 examples/.md-config/dashboard/authenticated-realm-deprecated.md create mode 100644 examples/.md-config/dashboard/authenticated-realm-web.md create mode 100644 examples/.md-config/dashboard/unauthenticated-get-chart.md create mode 100644 examples/.md-config/dashboard/unauthenticated.md create mode 100644 examples/charts/authenticated-custom-jwt/markdown.json create mode 100644 examples/charts/authenticated-google/markdown.json create mode 100644 examples/charts/authenticated-realm-deprecated/markdown.json create mode 100644 examples/charts/authenticated-realm-web/markdown.json create mode 100644 examples/charts/click-events-basic/markdown.json create mode 100644 examples/charts/click-events-filtering/markdown.json create mode 100644 examples/charts/programmatic-highlighting/markdown.json create mode 100644 examples/charts/timeline-charts-example/markdown.json create mode 100644 examples/charts/unauthenticated/markdown.json create mode 100644 examples/dashboard/authenticated-custom-jwt/markdown.json create mode 100644 examples/dashboard/authenticated-google/markdown.json create mode 100644 examples/dashboard/authenticated-realm-deprecated/markdown.json create mode 100644 examples/dashboard/authenticated-realm-web/markdown.json create mode 100644 examples/dashboard/unauthenticated-get-chart/markdown.json create mode 100644 examples/dashboard/unauthenticated/markdown.json create mode 100644 examples/docs/chart/background/desc-click-events.md create mode 100644 examples/docs/chart/background/desc-extended.md create mode 100644 examples/docs/chart/background/desc-simple.md create mode 100644 examples/docs/chart/background/features-authenticated.md create mode 100644 examples/docs/chart/background/start-block.md create mode 100644 examples/docs/chart/next-steps.md create mode 100644 examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md create mode 100644 examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md create mode 100644 examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md create mode 100644 examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md create mode 100644 examples/docs/chart/preparing-realm-app.md create mode 100644 examples/docs/chart/using-own-data/end-block.md create mode 100644 examples/docs/chart/using-own-data/replace-block.md create mode 100644 examples/docs/chart/using-own-data/start-block.md create mode 100644 examples/docs/dashboard/background-desc.md create mode 100644 examples/docs/dashboard/background-title.md create mode 100644 examples/docs/dashboard/features-authenticated.md create mode 100644 examples/docs/dashboard/features-unauthenticated.md create mode 100644 examples/docs/happy-charting.md create mode 100644 examples/docs/quickstart-google.md create mode 100644 examples/docs/quickstart.md create mode 100644 examples/docs/realm-credentials.md diff --git a/examples/.md-config/chart/authenticated-custom-jwt.md b/examples/.md-config/chart/authenticated-custom-jwt.md new file mode 100644 index 0000000..f93eb07 --- /dev/null +++ b/examples/.md-config/chart/authenticated-custom-jwt.md @@ -0,0 +1,40 @@ +# MongoDB Charts Embedding Example - Authenticated Embedded Chart + +#include "examples/docs/chart/background/start-block.md" + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-extended.md" + +This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via a custom jwt authentication. The sample app has its own authentication and token issuing logic. You may want to follow a similar approach if you are not integrating with an external authentication mechanism or your authentication is not based on JWTs. Alternatively, if you are using an existing authentication mechanism that issues JWTs, you can use those tokens to authenticate your chart rendering requests after configuring a Charts authentication provider that can validate the JWT. + +#include "examples/docs/chart/background/features-authenticated.md" +- 🔑 Custom JWT authentication via `jsonwebtoken` + +#include "examples/docs/quickstart.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" + + - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_ + - Provider: `Custom JSON Web Token` + - Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_ + - Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_ + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) +#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/docs/chart/using-own-data/end-block.md" +Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. + +The hard coded credentials used in this demo are: + +- Username : `admin` +- Password: `password` + +#include "examples/docs/chart/next-steps.md" +- Change the login logic to adapt to your project's security workflow. +- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-google.md b/examples/.md-config/chart/authenticated-google.md new file mode 100644 index 0000000..0d92c85 --- /dev/null +++ b/examples/.md-config/chart/authenticated-google.md @@ -0,0 +1,56 @@ +# MongoDB Charts Embedding Example - Google Authentication + +#include "examples/docs/chart/background/start-block.md" + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-extended.md" + +This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Google** as an authentication provider. The sample app is already set up to authenticate with a Google Client ID hosted by the Charts Development team. + +#include "examples/docs/chart/background/features-authenticated.md" +- 𝗚 Google authentication + +#include "examples/docs/quickstart-google.md" + +## Getting a Google Client ID + +This sample is pre-configured with a MongoDB-owned test Client ID. To use Google Sign-In in your own apps, you must create your own Client ID. + +Steps on how to configure a Project with Google and attain a Google Client ID can be found [here](https://developers.google.com/identity/sign-in/web/sign-in). You'll need to set the Origin and Redirect URIs to whatever you use in your application. In our sample, that is http://localhost:3000. + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" + + - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_ + - Provider: `Google` + - Google Client ID: _See above for + - This should be the entire string `.apps.googleusercontent.com` + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the `index.html` file +#include "examples/docs/chart/using-own-data/replace-block.md" + - **Optional** + - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) + +#include "examples/docs/chart/next-steps.md" +- Use Incognito Mode to see a pure login experience +- Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure. + + - For example, consider the following injected filter + + ```javascript + // Reject tokens that aren't from example.com domain + if (context.token.hd != "yourCompany.com") { + return false; + } + return true; + ``` + + - ![Screen Shot 2020-04-21 at 1 47 54 pm](https://user-images.githubusercontent.com/19422770/79823279-b9b35880-83d6-11ea-8370-774bcde80252.png) + - This will only allow users from your company domain to view the chart data 🔒 + +- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-deprecated.md b/examples/.md-config/chart/authenticated-realm-deprecated.md new file mode 100644 index 0000000..9867131 --- /dev/null +++ b/examples/.md-config/chart/authenticated-realm-deprecated.md @@ -0,0 +1,43 @@ +# MongoDB Charts Embedding Example - App Services Authentication [DEPRECATED] + +> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example. + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-deprecated)_ + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-extended.md" + +This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. + +This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! + +#include "examples/docs/chart/background/features-authenticated.md" +- 🔑 App Services authentication +- 🙋‍♂️ Data filtering by App Services User Role + +#include "examples/docs/quickstart.md" + +#include "examples/docs/realm-credentials.md" + +#include "examples/docs/chart/preparing-realm-app.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) + - Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) +#include "examples/docs/chart/using-own-data/replace-block.md" + - Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` + +#include "examples/docs/chart/next-steps.md" +- Play with App Services Rules system, and change how different accounts see your Chart. +- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-web.md b/examples/.md-config/chart/authenticated-realm-web.md new file mode 100644 index 0000000..2dfe4f1 --- /dev/null +++ b/examples/.md-config/chart/authenticated-realm-web.md @@ -0,0 +1,40 @@ +# MongoDB Charts Embedding Example - App Services Authentication + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)_ + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-extended.md" + +This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. + +This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! + +#include "examples/docs/chart/background/features-authenticated.md" +- 🔑 App Services authentication +- 🙋‍♂️ Data filtering by App Services User Role + +#include "examples/docs/quickstart.md" + +#include "examples/docs/realm-credentials.md" + +#include "examples/docs/chart/preparing-realm-app.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) + - Replace the Realm App ID string. `Realm.App({id: ''})` +#include "examples/docs/chart/using-own-data/replace-block.md" + +#include "examples/docs/chart/next-steps.md" +- Play with App Services Rules system, and change how different accounts see your Chart. +- Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-basic.md b/examples/.md-config/chart/click-events-basic.md new file mode 100644 index 0000000..f5e6aef --- /dev/null +++ b/examples/.md-config/chart/click-events-basic.md @@ -0,0 +1,88 @@ +# MongoDB Charts Embedding Example - Click Events + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)_ + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-click-events.md" +This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). + +#### The features included in this demo are as follows: + +- Adding a click event handler to a chart, using code similar to: + +```javascript +chart.addEventListener("click", callback); +``` + +- Highlighting the element clicked on the chart, using the following code: + +```javascript +chart.setHighlight(payload.selectionFilter) +``` + +- Parsing the payload returned to the callback event. A typical click event's payload will look something like this: + +```json +{ + "chartId": "c0774a27-3432-4207-b795-afeb56243652", + "event": { + "type": "click", + "altKey": false, + "ctrlKey": false, + "shiftKey": false, + "metaKey": false, + "offsetX": 152, + "offsetY": 176, + "clientX": 172, + "clientY": 241, + "pageX": 172, + "pageY": 241, + "screenX": 172, + "screenY": 312 + }, + "data": { + "y": { + "label": "unwind array 'genres'", + "value": "Adventure" + }, + "x": { + "label": "count ( _id )", + "value": 659 + }, + "color": { + "label": "year", + "value": "2000 - 2010", + "lowerBound": 2000, + "upperBound": 2010 + } + }, + "target": { + "type": "rect", + "role": "mark", + "fill": "#8CB6F2" + }, + "apiVersion": 1 +} +``` + +More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). + +#include "examples/docs/quickstart.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) +#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/docs/chart/using-own-data/end-block.md" + +#include "examples/docs/chart/next-steps.md" +- Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our + [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-filtering.md b/examples/.md-config/chart/click-events-filtering.md new file mode 100644 index 0000000..c3d30af --- /dev/null +++ b/examples/.md-config/chart/click-events-filtering.md @@ -0,0 +1,43 @@ +# MongoDB Charts Embedding Example - Interactive Filtering + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)_ + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-click-events.md" +This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. + +More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). + +#### The features included in this demo are as follows: + +- Adding a click event handler to a chart, using code similar to: + +```javascript +chart.addEventListener("click", callback, options); +``` + +- Adding an option to make just certain parts of the chart clickable (in this case only the bars) +- Obtaining an MQL filter document based on the data returned in the payload using `selectionFilter` +- Highlighting the clicked element on the first chart using `setHighlight` +- Filtering a second chart using the `setFilter` method + +#include "examples/docs/quickstart.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" + +11. In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample Movies dataset filters on `year` and `genres`. + + Furthermore, the filter related code in `src/index.js` will need to be updated to conform to the filter query you wish to apply. + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) +#include "examples/docs/chart/using-own-data/replace-block.md" + - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart +#include "examples/docs/chart/using-own-data/end-block.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/programmatic-highlighting.md b/examples/.md-config/chart/programmatic-highlighting.md new file mode 100644 index 0000000..fa624ee --- /dev/null +++ b/examples/.md-config/chart/programmatic-highlighting.md @@ -0,0 +1,36 @@ +# MongoDB Charts Embedding Example - Programmatic Highlighting + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/programmatic-highlighting)_ + +#include "examples/docs/chart/background/desc-simple.md" + +When you embed charts using the Embedding SDK, you are able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). + +More information regarding charts highlighting can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). + +#### The features included in this demo are as follows: + +- Adding chart highlighting: + +```javascript +chart.setHighlight({ field: { $expr }}); +``` + +- Highlighting two charts (one bar, one table) at the same time with the same filter expression +- Showing more complicated MQL filters with the drop down +- Allow custom filtering expressions by editing the textarea + +#include "examples/docs/quickstart.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) +#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/docs/chart/using-own-data/end-block.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/timeline-charts-example.md b/examples/.md-config/chart/timeline-charts-example.md new file mode 100644 index 0000000..1422589 --- /dev/null +++ b/examples/.md-config/chart/timeline-charts-example.md @@ -0,0 +1,49 @@ +# MongoDB Charts Embedding Example - Timeline Chart + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[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. + +![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. + +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`. + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fileds you want to use filters for. + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`) +#include "examples/docs/chart/using-own-data/replace-block.md" + - 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. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/chart/unauthenticated.md b/examples/.md-config/chart/unauthenticated.md new file mode 100644 index 0000000..23c1346 --- /dev/null +++ b/examples/.md-config/chart/unauthenticated.md @@ -0,0 +1,47 @@ +# MongoDB Charts Embedding Example - Unauthenticated Embedded Chart + +#include "examples/docs/chart/background/start-block.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated)_ + +#include "examples/docs/chart/background/desc-simple.md" + +#include "examples/docs/chart/background/desc-extended.md" + +This sample shows how to use the JavaScript Embedding SDK to render unauthenticated embedded charts, along with showing off the various ways your application can interact with charts using the SDK. + +#### The features included in this demo are as follows: + +- Render an embedded chart on a web page +- Set the charts theme to either `'light'` or `'dark'` +- Get the charts current theme +- Set the charts max data age to various values +- Get the charts current max data age +- Manually refresh the chart +- Set the charts current filter + - Note, filtering on a chart requires setting up white listed fields in MongoDB Charts. We have done this for our sample data. +- Get the current filter on a chart + +#include "examples/docs/quickstart.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" + +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" + +11. **Optional** + In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample AirBnB dataset filters on `address.country`. + + Furthermore, the filter related code in `src/index.js` will need to be updated to conform to the filter query you wish to run, and the options provided in `index.html` will need to be updated too. To be clear, + - Update the query **field** in `src/index.js` + - Update the query **values** in `index.html` + +#include "examples/docs/chart/using-own-data/start-block.md" + - Open the _index.js_ file (`src/index.js`) +#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/docs/chart/using-own-data/end-block.md" + +#include "examples/docs/chart/next-steps.md" +- Think whether an unauthenticated chart is the feature you're after. [Embedding iframes](https://docs.mongodb.com/charts/master/embedded-chart-options/) from Charts is a great way to showcase your data if you don't need the user to interact with the chart. +- Consider the data you're making available, and the queries you're allowing. If the data is sensitive and you need to ensure the charts can only be accessed by authorized people, you should look at using authenticated embedding. + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-custom-jwt.md b/examples/.md-config/dashboard/authenticated-custom-jwt.md new file mode 100644 index 0000000..ccb4124 --- /dev/null +++ b/examples/.md-config/dashboard/authenticated-custom-jwt.md @@ -0,0 +1,14 @@ +# MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Custom JWT) + +#include "examples/docs/dashboard/background-title.md" + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Custom JWT as the authentication provider. + +#include "examples/docs/dashboard/features-authenticated.md" +- Custom JWT authentication via the `jsonwebtoken` package + +#include "examples/docs/quickstart.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-google.md b/examples/.md-config/dashboard/authenticated-google.md new file mode 100644 index 0000000..94e88bd --- /dev/null +++ b/examples/.md-config/dashboard/authenticated-google.md @@ -0,0 +1,15 @@ +# MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Google Auth) + +#include "examples/docs/dashboard/background-title.md" + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Google as the authentication provider. + +#include "examples/docs/dashboard/features-authenticated.md" +- Integrate Google Sign-In to authenticate users + - You can follow [this tutorial](https://developers.google.com/identity/sign-in/web/sign-in) for more details + +#include "examples/docs/quickstart-google.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-deprecated.md b/examples/.md-config/dashboard/authenticated-realm-deprecated.md new file mode 100644 index 0000000..fec736e --- /dev/null +++ b/examples/.md-config/dashboard/authenticated-realm-deprecated.md @@ -0,0 +1,21 @@ +# MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Realm) [DEPRECATED] + +> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web) example. + +#include "examples/docs/dashboard/background-title.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. + +#include "examples/docs/dashboard/features-authenticated.md" +- App Services authentication +- Data filtering by App Services User Role + +#include "examples/docs/quickstart.md" + +#include "examples/docs/realm-credentials.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-web.md b/examples/.md-config/dashboard/authenticated-realm-web.md new file mode 100644 index 0000000..094d048 --- /dev/null +++ b/examples/.md-config/dashboard/authenticated-realm-web.md @@ -0,0 +1,19 @@ +# MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (App Services) + +#include "examples/docs/dashboard/background-title.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)_ + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. + +#include "examples/docs/dashboard/features-authenticated.md" +- Use App Services authentication +- Data filtering by App Services User Role + +#include "examples/docs/quickstart.md" + +#include "examples/docs/realm-credentials.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated-get-chart.md b/examples/.md-config/dashboard/unauthenticated-get-chart.md new file mode 100644 index 0000000..83af814 --- /dev/null +++ b/examples/.md-config/dashboard/unauthenticated-get-chart.md @@ -0,0 +1,20 @@ +# MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard with `getChart` and `getAllCharts` methods + +#include "examples/docs/dashboard/background-title.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)_ + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application and retrieve all or just one chart on a dashboard. + +#include "examples/docs/dashboard/features-unauthenticated.md" +- Manually refresh the dashboard (Refresh all charts within a dashboard) +- Get all the charts that are rendered on a dashboard via the SDK +- Manually refresh a chart instance that you have specified +- Adding/Removing click event listeners to a specific chart instance that you have specified +- Viewing the payload for a click event + +#include "examples/docs/quickstart.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated.md b/examples/.md-config/dashboard/unauthenticated.md new file mode 100644 index 0000000..343bf7e --- /dev/null +++ b/examples/.md-config/dashboard/unauthenticated.md @@ -0,0 +1,20 @@ +# MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard + +#include "examples/docs/dashboard/background-title.md" + +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)_ + +#include "examples/docs/dashboard/background-desc.md" + +This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application via the SDK. If you don't want to use the SDK but want an easier way to render your dashboard, you can use an [embedded iframe](https://dochub.mongodb.org/core/charts-embedding-dashboards-iframe) instead. + +#include "examples/docs/dashboard/features-unauthenticated.md" +- Manually refresh the dashboard (Refresh all charts within a dashboard) +- Set the whole dashboard theme to `'light'` or `'dark'` +- Set background colour of all charts shown on the dashboard. Note that this will overwrite the colour that has been set by the current theme +- Set the max data age of a chart on a dashboard +- Set the height and width mode to `'fixed'` or `'scale'`. + +#include "examples/docs/quickstart.md" + +#include "examples/docs/happy-charting.md" \ No newline at end of file diff --git a/examples/charts/authenticated-custom-jwt/README.md b/examples/charts/authenticated-custom-jwt/README.md index 4e2207f..ae70dcb 100644 --- a/examples/charts/authenticated-custom-jwt/README.md +++ b/examples/charts/authenticated-custom-jwt/README.md @@ -20,15 +20,17 @@ This sample shows how to use the JavaScript Embedding SDK to render **authentica _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`. On some operating systems, Node available as the `nodejs` binary instead. +1. Ensure you have Node installed. You can confirm with `node --version`. On some operating systems, Node is available as the `nodejs` binary instead. 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. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is +This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. + ## Preparing your Chart for Embedding This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: @@ -49,39 +51,38 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Enable chart for embedded access -6. Go to the Dashboards tab on the side panel, and select the dashboard that contains the chart you wish to embed. - -7. Click the **...** menu and select **Embed chart**. +6. Go to the **Dashboards** tab on the side panel, and select the dashboard that contains the chart you wish to embed. -8. Ensure the Authenticated tab is selected and turn on '**Enable authenticated access**'. +7. Find the chart you want to embed, click the **...** menu and select **Embed chart**. -9. Note the Chart ID and the Base URL, as you will need them for running the demo. +8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'. -10. Close the menu. +9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. ### Create authentication provider -11. Go to the Embedding tab on the side panel. +10. Go to the Embedding tab on the side panel. -12. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section. +11. Ensure the **Authentication Settings** tab is selected and press the **Add** button in the **Authentication providers** section. -13. Fill in the details like so: +12. Fill in the details like so: -- Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_ -- Provider: `Custom JSON Web Token` -- Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_ -- Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_ + - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_ + - Provider: `Custom JSON Web Token` + - Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_ + - Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_ ## 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, +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 _index.js_ file (`src/index.js`) - - Replace the `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu. (look for "\~REPLACE\~" in the comments) -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to start the application. + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) +2. Run `npm install` to install the package dependencies. +3. Run `npm start` to launch the sample application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. +This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. The hard coded credentials used in this demo are: diff --git a/examples/charts/authenticated-custom-jwt/markdown.json b/examples/charts/authenticated-custom-jwt/markdown.json new file mode 100644 index 0000000..10ea35c --- /dev/null +++ b/examples/charts/authenticated-custom-jwt/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/authenticated-custom-jwt/README.md", + "files" : ["examples/.md-config/chart/authenticated-custom-jwt.md"] +} diff --git a/examples/charts/authenticated-google/README.md b/examples/charts/authenticated-google/README.md index 24dffc3..fe8935c 100755 --- a/examples/charts/authenticated-google/README.md +++ b/examples/charts/authenticated-google/README.md @@ -26,7 +26,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. @@ -45,9 +45,9 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Create chart to embed -1. Log onto MongoDB Charts +1. Log onto MongoDB Charts. -2. If you haven't done so already, create a chart you would like to embed on any dashboard. +2. If you haven't done so already, create a chart on any dashboard that you would like to embed. ### Enable data source for authenticated access @@ -59,11 +59,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Enable chart for embedded access -6. Go to the Dashboards tab on the side panel, and select the dashboard that contains the chart you wish to embed. +6. Go to the **Dashboards** tab on the side panel, and select the dashboard that contains the chart you wish to embed. -7. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart**. -8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**' +8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'. 9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. @@ -71,26 +71,23 @@ This sample is preconfigured to render a specific chart. You can run the sample 10. Go to the Embedding tab on the side panel. -11. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section. +11. Ensure the **Authentication Settings** tab is selected and press the **Add** button in the **Authentication providers** section. -12. Go to the Admin Settings tab on the left navigation column. Under 'Embedding Authentication Providers', click 'Add New Provider'. +12. Fill in the details like so: -13. Fill in the details like so: - - - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_ - - Provider: `Google` - - Google Client ID: _See above for - - This should be the entire string `.apps.googleusercontent.com` + - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_ + - Provider: `Google` + - Google Client ID: _See above for + - This should be the entire string `.apps.googleusercontent.com` ## Running this Sample with your data -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 `index.html` file -- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -- **Optional** - - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) +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 `index.html` file + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - **Optional** + - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) ## Next Steps diff --git a/examples/charts/authenticated-google/markdown.json b/examples/charts/authenticated-google/markdown.json new file mode 100644 index 0000000..ce42a42 --- /dev/null +++ b/examples/charts/authenticated-google/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/authenticated-google/README.md", + "files" : ["examples/.md-config/chart/authenticated-google.md"] +} diff --git a/examples/charts/authenticated-realm-deprecated/README.md b/examples/charts/authenticated-realm-deprecated/README.md index 4de1198..fd342b0 100644 --- a/examples/charts/authenticated-realm-deprecated/README.md +++ b/examples/charts/authenticated-realm-deprecated/README.md @@ -14,14 +14,14 @@ 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 **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. -This sample also demonstrates data filtering by role, thanks to App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/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 the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/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: - 📈 Render an embedded chart on a web page - 🔒 Only render charts to valid users -- 🔑 Appp Serviecs authentication -- 🙋‍♂️ Data filtering by App Services User Role. +- 🔑 App Services authentication +- 🙋‍♂️ Data filtering by App Services User Role ## Quickstart @@ -33,7 +33,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -58,7 +58,7 @@ This sample is preconfigured to render, and more specifically, **authenticate** ### Prepare your App Services App -Choose or create a App which will be used to authenticate users who wish to view your chart. +Choose or create an App which will be used to authenticate users who wish to view your chart. 1. Log onto Atlas App Services @@ -87,15 +87,15 @@ Choose or create a App which will be used to authenticate users who wish to view If you want to use your 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://www.mongodb.com/docs/atlas/app-services/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 +## Preparing your Chart for Embedding This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: -## Create chart to embed +### Create chart to embed -1. Log onto MongoDB Charts +1. Log onto MongoDB Charts. -2. If you haven't done so already, create a chart you would like to embed on any dashboard. +2. If you haven't done so already, create a chart on any dashboard that you would like to embed. ### Enable data source for authenticated access @@ -107,11 +107,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Enable chart for embedded access -6. Go to the Dashboards tab on the left navigation column, and select the dashboard that contains the chart you wish to embed. +6. Go to the **Dashboards** tab on the side panel, and select the dashboard that contains the chart you wish to embed. -7. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart**. -8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**' +8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'. 9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. @@ -119,14 +119,14 @@ This sample is preconfigured to render a specific chart. You can run the sample 10. Go to the Embedding tab on the side panel. -11. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section. +11. Ensure the **Authentication Settings** tab is selected and press the **Add** button in the **Authentication providers** section. 12. Fill in the details like so: - - Name: `App Services Auth Provider` _Note, this is only for your convenience and can be named anything_ - - Provider: `Atlas App Services` - - Atlas Project: Select the Atlas project that contains the App Services Application you configured in the previous steps - - App ID: Select the ID of the App Services App you configured in the previous steps + - Name: `App Services Auth Provider` _Note, this is only for your convenience and can be named anything_ + - Provider: `Atlas App Services` + - Atlas Project: Select the Atlas project that contains the App Services Application you configured in the previous steps + - App ID: Select the ID of the App Services App you configured in the previous steps 13. Click "Save" @@ -141,13 +141,12 @@ This sample is preconfigured to render a specific chart. You can run the sample ## Running this Sample with your data -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 _index.js_ file (`src/index.js`) -- Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) -- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -- Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` +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 _index.js_ file (`src/index.js`) + - Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` ## Next Steps diff --git a/examples/charts/authenticated-realm-deprecated/markdown.json b/examples/charts/authenticated-realm-deprecated/markdown.json new file mode 100644 index 0000000..14fc329 --- /dev/null +++ b/examples/charts/authenticated-realm-deprecated/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/authenticated-realm-deprecated/README.md", + "files" : ["examples/.md-config/chart/authenticated-realm-deprecated.md"] +} diff --git a/examples/charts/authenticated-realm-web/README.md b/examples/charts/authenticated-realm-web/README.md index 2490baa..9ede557 100644 --- a/examples/charts/authenticated-realm-web/README.md +++ b/examples/charts/authenticated-realm-web/README.md @@ -19,7 +19,7 @@ This sample also demonstrates data filtering by role, thanks to the App Services - 📈 Render an embedded chart on a web page - 🔒 Only render charts to valid users - 🔑 App Services authentication -- 🙋‍♂️ Data filtering by App Services User Role. +- 🙋‍♂️ Data filtering by App Services User Role ## Quickstart @@ -31,7 +31,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -85,15 +85,15 @@ Choose or create an App which will be used to authenticate users who wish to vie If you want to use your 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://www.mongodb.com/docs/atlas/app-services/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 +## Preparing your Chart for Embedding This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: ### Create chart to embed -1. Log onto MongoDB Charts +1. Log onto MongoDB Charts. -2. If you haven't done so already, create a chart you would like to embed on any dashboard. +2. If you haven't done so already, create a chart on any dashboard that you would like to embed. ### Enable data source for authenticated access @@ -105,11 +105,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Enable chart for embedded access -6. Go to the Dashboards tab on the left navigation column, and select the dashboard that contains the chart you wish to embed. +6. Go to the **Dashboards** tab on the side panel, and select the dashboard that contains the chart you wish to embed. -7. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart**. -8. Ensure the **Authenticated** tab is selected and turn on '**Enable Authenticated access**' +8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'. 9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. @@ -117,14 +117,14 @@ This sample is preconfigured to render a specific chart. You can run the sample 10. Go to the Embedding tab on the side panel. -11. Ensure the "Authentication Settings" tab is selected and press the "Add" button in the Authentication providers section. +11. Ensure the **Authentication Settings** tab is selected and press the **Add** button in the **Authentication providers** section. 12. Fill in the details like so: - - Name: `App Services Auth Provider` _Note, this is only for your convenience and can be named anything_ - - Provider: `Atlas App Services` - - Atlas Project: Select the Atlas project that contains the App Services Application you configured in the previous steps - - App ID: Select the ID of the App Services App you configured in the previous steps + - Name: `App Services Auth Provider` _Note, this is only for your convenience and can be named anything_ + - Provider: `Atlas App Services` + - Atlas Project: Select the Atlas project that contains the App Services Application you configured in the previous steps + - App ID: Select the ID of the App Services App you configured in the previous steps 13. Click "Save" @@ -139,12 +139,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ## Running this Sample with your data -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 _index.js_ file (`src/index.js`) -- Replace the Realm App ID string. `Realm.App({id: ''})` -- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) +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 _index.js_ file (`src/index.js`) + - Replace the Realm App ID string. `Realm.App({id: ''})` + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) ## Next Steps diff --git a/examples/charts/authenticated-realm-web/markdown.json b/examples/charts/authenticated-realm-web/markdown.json new file mode 100644 index 0000000..e646b66 --- /dev/null +++ b/examples/charts/authenticated-realm-web/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/authenticated-realm-web/README.md", + "files" : ["examples/.md-config/chart/authenticated-realm-web.md"] +} diff --git a/examples/charts/click-events-basic/README.md b/examples/charts/click-events-basic/README.md index a2b87fe..1c438a8 100644 --- a/examples/charts/click-events-basic/README.md +++ b/examples/charts/click-events-basic/README.md @@ -2,11 +2,14 @@ ## Background +📄 _[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/click-events-basic)_ MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. -When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). +When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. +This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). #### The features included in this demo are as follows: @@ -79,7 +82,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -90,7 +93,7 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Create chart to embed -1. Log onto MongoDB Charts +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. @@ -102,24 +105,26 @@ This sample is preconfigured to render a specific chart. You can run the sample 5. Make sure the "External users can view data in this data source" option is toggled on and "Allow unauthenticated data access" has been selected. +6. 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**' + ### Enable chart for embedded access -6. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart** -7. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' +8. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' -8. Select the **Javascript SDK** option +9. Select the **Javascript SDK** option -9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. +10. Note the **Chart ID** and the **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 _index.js_ file (`src/index.js`) - - 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 (look for "\~REPLACE\~" in the comments) + - Open the _index.js_ file (`src/index.js`) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) 2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application +3. Run `npm start` to launch the sample application. This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -127,6 +132,7 @@ This should create a local server running the Charts demo. Open a web browser an Once you gain an understanding of the API, consider the following +- Take on the optional steps to prepare and manipulate your own data source rather than the sample. - Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example. diff --git a/examples/charts/click-events-basic/markdown.json b/examples/charts/click-events-basic/markdown.json new file mode 100644 index 0000000..1a0bb7f --- /dev/null +++ b/examples/charts/click-events-basic/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/click-events-basic/README.md", + "files" : ["examples/.md-config/chart/click-events-basic.md"] +} diff --git a/examples/charts/click-events-filtering/README.md b/examples/charts/click-events-filtering/README.md index 0e29985..4676051 100644 --- a/examples/charts/click-events-filtering/README.md +++ b/examples/charts/click-events-filtering/README.md @@ -2,11 +2,14 @@ ## Background +📄 _[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/click-events-filtering)_ MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. -When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. +When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. +This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -33,7 +36,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -44,7 +47,7 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Create chart to embed -1. Log onto MongoDB Charts +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. @@ -75,14 +78,12 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - 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 (look for "\~REPLACE\~" in the comments) - - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart - + - Open the _index.js_ file (`src/index.js`) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart 2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application +3. Run `npm start` to launch the sample application. This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. diff --git a/examples/charts/click-events-filtering/markdown.json b/examples/charts/click-events-filtering/markdown.json new file mode 100644 index 0000000..45a4ce3 --- /dev/null +++ b/examples/charts/click-events-filtering/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/click-events-filtering/README.md", + "files" : ["examples/.md-config/chart/click-events-filtering.md"] +} diff --git a/examples/charts/programmatic-highlighting/README.md b/examples/charts/programmatic-highlighting/README.md index 34c1d1b..6ef3420 100644 --- a/examples/charts/programmatic-highlighting/README.md +++ b/examples/charts/programmatic-highlighting/README.md @@ -2,11 +2,13 @@ ## Background +📄 _[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/programmatic-highlighting)_ MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. -When you embed charts using the Embedding SDK, you ae able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). +When you embed charts using the Embedding SDK, you are able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). More information regarding charts highlighting can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -32,7 +34,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -43,7 +45,7 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Create chart to embed -1. Log onto MongoDB Charts +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. @@ -55,26 +57,26 @@ This sample is preconfigured to render a specific chart. You can run the sample 5. Make sure the "External users can view data in this data source" option is toggled on and "Allow unauthenticated data access" has been selected. +6. 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**' + ### Enable chart for embedded access -6. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart** -7. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' +8. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' -8. Select the **Javascript SDK** option +9. Select the **Javascript SDK** option -9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. +10. Note the **Chart ID** and the **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 _index.js_ file (`src/index.js`) - - 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 (look for "\~REPLACE\~" in the comments) - + - Open the _index.js_ file (`src/index.js`) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) 2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application +3. Run `npm start` to launch the sample application. This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. diff --git a/examples/charts/programmatic-highlighting/markdown.json b/examples/charts/programmatic-highlighting/markdown.json new file mode 100644 index 0000000..929b995 --- /dev/null +++ b/examples/charts/programmatic-highlighting/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/programmatic-highlighting/README.md", + "files" : ["examples/.md-config/chart/programmatic-highlighting.md"] +} diff --git a/examples/charts/timeline-charts-example/README.md b/examples/charts/timeline-charts-example/README.md index e42c581..db4b9a0 100644 --- a/examples/charts/timeline-charts-example/README.md +++ b/examples/charts/timeline-charts-example/README.md @@ -41,11 +41,11 @@ _The following steps presume the use of npm, though yarn works as well._ ## 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: +This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: ### Create chart to embed -1. Log onto MongoDB Charts +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. @@ -57,24 +57,24 @@ This sample is preconfigured to render specific charts. You can run the sample a 5. Make sure the "External users can view data in this data source" option is toggled on and "Allow unauthenticated data access" has been selected. -### Enable chart for embedded access +6. 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**' -6. Find the chart you want to embed, click the **(...)** menu and select **Embed chart** +### Enable chart for embedded access -7. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' +7. Find the chart you want to embed, click the **...** menu and select **Embed chart** -8. Ensure that you whitelist all fields that you want to use filters for. +8. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' 9. Select the **Javascript SDK** option -10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. +10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. Ensure you have whitelisted all the fileds you want to use filters for. ## 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. + - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (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. Happy Charting! 🚀 📈 diff --git a/examples/charts/timeline-charts-example/markdown.json b/examples/charts/timeline-charts-example/markdown.json new file mode 100644 index 0000000..b7315c6 --- /dev/null +++ b/examples/charts/timeline-charts-example/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/timeline-charts-example/README.md", + "files" : ["examples/.md-config/chart/timeline-charts-example.md"] +} diff --git a/examples/charts/unauthenticated/README.md b/examples/charts/unauthenticated/README.md index f693c3b..eb5ebbe 100644 --- a/examples/charts/unauthenticated/README.md +++ b/examples/charts/unauthenticated/README.md @@ -34,7 +34,7 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. @@ -45,7 +45,7 @@ This sample is preconfigured to render a specific chart. You can run the sample ### Create chart to embed -1. Log onto MongoDB Charts +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. @@ -57,17 +57,19 @@ This sample is preconfigured to render a specific chart. You can run the sample 5. Make sure the "External users can view data in this data source" option is toggled on and "Allow unauthenticated data access" has been selected. +6. 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**' + ### Enable chart for embedded access -6. Find the chart you want to embed, click the **...** menu and select **Embed chart** +7. Find the chart you want to embed, click the **...** menu and select **Embed chart** -7. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' +8. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' -8. Select the **Javascript SDK** option +9. Select the **Javascript SDK** option -9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. +10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. -10. **Optional** +11. **Optional** In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample AirBnB dataset filters on `address.country`. Furthermore, the filter related code in `src/index.js` will need to be updated to conform to the filter query you wish to run, and the options provided in `index.html` will need to be updated too. To be clear, @@ -77,12 +79,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - 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 (look for "\~REPLACE\~" in the comments) - - Replace `address.country` in the `setFilter` code with your whitelisted field (look for "\~REPLACE\~" in the comments) + - Open the _index.js_ file (`src/index.js`) + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) 2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application +3. Run `npm start` to launch the sample application. This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. diff --git a/examples/charts/unauthenticated/markdown.json b/examples/charts/unauthenticated/markdown.json new file mode 100644 index 0000000..aa92021 --- /dev/null +++ b/examples/charts/unauthenticated/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/charts/unauthenticated/README.md", + "files" : ["examples/.md-config/chart/unauthenticated.md"] +} diff --git a/examples/dashboard/authenticated-custom-jwt/README.md b/examples/dashboard/authenticated-custom-jwt/README.md index 3aebf02..74bb0ac 100644 --- a/examples/dashboard/authenticated-custom-jwt/README.md +++ b/examples/dashboard/authenticated-custom-jwt/README.md @@ -18,7 +18,7 @@ In this example, you should be able to: - Render a dashboard to valid users only - Custom JWT authentication via the `jsonwebtoken` package -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -28,7 +28,9 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. + +Happy Charting! 🚀 📈 diff --git a/examples/dashboard/authenticated-custom-jwt/markdown.json b/examples/dashboard/authenticated-custom-jwt/markdown.json new file mode 100644 index 0000000..ab56355 --- /dev/null +++ b/examples/dashboard/authenticated-custom-jwt/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/authenticated-custom-jwt/README.md", + "files" : ["examples/.md-config/dashboard/authenticated-custom-jwt.md"] +} diff --git a/examples/dashboard/authenticated-google/README.md b/examples/dashboard/authenticated-google/README.md index 2422767..2ec449b 100644 --- a/examples/dashboard/authenticated-google/README.md +++ b/examples/dashboard/authenticated-google/README.md @@ -19,7 +19,7 @@ In this example, you should be able to: - Integrate Google Sign-In to authenticate users - You can follow [this tutorial](https://developers.google.com/identity/sign-in/web/sign-in) for more details -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -29,9 +29,11 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. Logging in with any valid Google account will allow you to render the chart. + +Happy Charting! 🚀 📈 diff --git a/examples/dashboard/authenticated-google/markdown.json b/examples/dashboard/authenticated-google/markdown.json new file mode 100644 index 0000000..a0f4378 --- /dev/null +++ b/examples/dashboard/authenticated-google/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/authenticated-google/README.md", + "files" : ["examples/.md-config/dashboard/authenticated-google.md"] +} diff --git a/examples/dashboard/authenticated-realm-deprecated/README.md b/examples/dashboard/authenticated-realm-deprecated/README.md index 1550a9d..530d438 100644 --- a/examples/dashboard/authenticated-realm-deprecated/README.md +++ b/examples/dashboard/authenticated-realm-deprecated/README.md @@ -21,9 +21,9 @@ In this example, you should be able to: - Render an authenticated embedded dashboard - Render a dashboard to valid users only - App Services authentication -- Data filtering by App Services User Role. +- Data filtering by App Services User Role -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -33,12 +33,11 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. - The two hard coded credentials used in this demo are: ``` @@ -52,3 +51,6 @@ password: password ``` And they will display localised data thanks to the configured App Services User Roles. + +Happy Charting! 🚀 📈 + diff --git a/examples/dashboard/authenticated-realm-deprecated/markdown.json b/examples/dashboard/authenticated-realm-deprecated/markdown.json new file mode 100644 index 0000000..67c03a8 --- /dev/null +++ b/examples/dashboard/authenticated-realm-deprecated/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/authenticated-realm-deprecated/README.md", + "files" : ["examples/.md-config/dashboard/authenticated-realm-deprecated.md"] +} diff --git a/examples/dashboard/authenticated-realm-web/README.md b/examples/dashboard/authenticated-realm-web/README.md index b30eb6e..d2edc8c 100644 --- a/examples/dashboard/authenticated-realm-web/README.md +++ b/examples/dashboard/authenticated-realm-web/README.md @@ -19,9 +19,9 @@ In this example, you should be able to: - Render an authenticated embedded dashboard - Render a dashboard to valid users only - Use App Services authentication -- Data filtering by App Services User Role. +- Data filtering by App Services User Role -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -31,12 +31,11 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. - The two hard coded credentials used in this demo are: ``` @@ -50,3 +49,6 @@ password: password ``` And they will display localised data thanks to the configured App Services User Roles. + +Happy Charting! 🚀 📈 + diff --git a/examples/dashboard/authenticated-realm-web/markdown.json b/examples/dashboard/authenticated-realm-web/markdown.json new file mode 100644 index 0000000..8ad7493 --- /dev/null +++ b/examples/dashboard/authenticated-realm-web/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/authenticated-realm-web/README.md", + "files" : ["examples/.md-config/dashboard/authenticated-realm-web.md"] +} diff --git a/examples/dashboard/unauthenticated-get-chart/README.md b/examples/dashboard/unauthenticated-get-chart/README.md index 84fab60..d95bbea 100644 --- a/examples/dashboard/unauthenticated-get-chart/README.md +++ b/examples/dashboard/unauthenticated-get-chart/README.md @@ -17,12 +17,13 @@ _Note that this is not an exhaustive list of all the features for the Dashboard In this example, you should be able to: - Render an unauthenticated embedded dashboard +- Manually refresh the dashboard (Refresh all charts within a dashboard) - Get all the charts that are rendered on a dashboard via the SDK - Manually refresh a chart instance that you have specified - Adding/Removing click event listeners to a specific chart instance that you have specified - Viewing the payload for a click event -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -32,7 +33,9 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. + +Happy Charting! 🚀 📈 diff --git a/examples/dashboard/unauthenticated-get-chart/markdown.json b/examples/dashboard/unauthenticated-get-chart/markdown.json new file mode 100644 index 0000000..b85409d --- /dev/null +++ b/examples/dashboard/unauthenticated-get-chart/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/unauthenticated-get-chart/README.md", + "files" : ["examples/.md-config/dashboard/unauthenticated-get-chart.md"] +} diff --git a/examples/dashboard/unauthenticated/README.md b/examples/dashboard/unauthenticated/README.md index be6346d..1073154 100644 --- a/examples/dashboard/unauthenticated/README.md +++ b/examples/dashboard/unauthenticated/README.md @@ -23,7 +23,7 @@ In this example, you should be able to: - Set the max data age of a chart on a dashboard - Set the height and width mode to `'fixed'` or `'scale'`. -## Quick Start +## Quickstart _The following steps presume the use of npm, though yarn works as well._ @@ -33,7 +33,10 @@ _The following steps presume the use of npm, though yarn works as well._ 3. Run `npm install` to install the package dependencies. -4. Run `npm start` to start the application. This will utilise parcel.js +4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. + +Happy Charting! 🚀 📈 + diff --git a/examples/dashboard/unauthenticated/markdown.json b/examples/dashboard/unauthenticated/markdown.json new file mode 100644 index 0000000..5c618df --- /dev/null +++ b/examples/dashboard/unauthenticated/markdown.json @@ -0,0 +1,4 @@ +{ + "build" : "examples/dashboard/unauthenticated/README.md", + "files" : ["examples/.md-config/dashboard/unauthenticated.md"] +} diff --git a/examples/docs/chart/background/desc-click-events.md b/examples/docs/chart/background/desc-click-events.md new file mode 100644 index 0000000..eada4ab --- /dev/null +++ b/examples/docs/chart/background/desc-click-events.md @@ -0,0 +1 @@ +When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. \ No newline at end of file diff --git a/examples/docs/chart/background/desc-extended.md b/examples/docs/chart/background/desc-extended.md new file mode 100644 index 0000000..ed28ba0 --- /dev/null +++ b/examples/docs/chart/background/desc-extended.md @@ -0,0 +1 @@ +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 access to the page where the chart is embedded 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). \ No newline at end of file diff --git a/examples/docs/chart/background/desc-simple.md b/examples/docs/chart/background/desc-simple.md new file mode 100644 index 0000000..00e7ea9 --- /dev/null +++ b/examples/docs/chart/background/desc-simple.md @@ -0,0 +1 @@ +MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. \ No newline at end of file diff --git a/examples/docs/chart/background/features-authenticated.md b/examples/docs/chart/background/features-authenticated.md new file mode 100644 index 0000000..956b34e --- /dev/null +++ b/examples/docs/chart/background/features-authenticated.md @@ -0,0 +1,4 @@ +#### The features included in this demo are as follows: + +- 📈 Render an embedded chart on a web page +- 🔒 Only render charts to valid users \ No newline at end of file diff --git a/examples/docs/chart/background/start-block.md b/examples/docs/chart/background/start-block.md new file mode 100644 index 0000000..f61b592 --- /dev/null +++ b/examples/docs/chart/background/start-block.md @@ -0,0 +1,3 @@ +## Background + +📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_ \ No newline at end of file diff --git a/examples/docs/chart/next-steps.md b/examples/docs/chart/next-steps.md new file mode 100644 index 0000000..38e34f1 --- /dev/null +++ b/examples/docs/chart/next-steps.md @@ -0,0 +1,5 @@ +## Next Steps + +Once you gain an understanding of the API, consider the following + +- Take on the optional steps to prepare and manipulate your own data source rather than the sample. \ No newline at end of file diff --git a/examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md b/examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md new file mode 100644 index 0000000..6fc2f13 --- /dev/null +++ b/examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md @@ -0,0 +1,15 @@ + - Name: `App Services Auth Provider` _Note, this is only for your convenience and can be named anything_ + - Provider: `Atlas App Services` + - Atlas Project: Select the Atlas project that contains the App Services Application you configured in the previous steps + - App ID: Select the ID of the App Services App you configured in the previous steps + +13. Click "Save" + + **Optional** + + - Turn on "Fetch data using App Services". + - This option should be turned on when you wish to delegate data fetching logic to your App. Specifically, if you have configured App Services Rules that apply to the users that are being authenticated, and you wish to have these rules enforced before the chart is rendered, turn this setting on. + - This setting should be left off if you only require App Services to authenticate valid users, and you have no desire to filter data by their role in your App. i.e, all valid users see the same chart, invalid users cannot see the chart. + - Enter the Service name that retrieves your data. To find the name of this, + - Navigate to "Linked Data Sources" on the left hand navigation panel. + - Look for the "Service Name" associated with your deployment. \ No newline at end of file diff --git a/examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md b/examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md new file mode 100644 index 0000000..062e87e --- /dev/null +++ b/examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md @@ -0,0 +1,9 @@ +## Preparing your Chart for Embedding + +This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: + +### Create chart to embed + +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. \ No newline at end of file diff --git a/examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md b/examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md new file mode 100644 index 0000000..00d8e07 --- /dev/null +++ b/examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md @@ -0,0 +1,25 @@ +### Enable data source for authenticated access + +3. Go to the Data Sources tab found on the side panel. + +4. Find the data source that you want to use on the chart by selecting the deployment, database and collection. Once found, click on the Manage button in the Data access section to access the Data source management page. + +5. Make sure the "External users can view data in this data source" option is toggled on and "Allow authenticated data access" has been selected. + +### Enable chart for embedded access + +6. Go to the **Dashboards** tab on the side panel, and select the dashboard that contains the chart you wish to embed. + +7. Find the chart you want to embed, click the **...** menu and select **Embed chart**. + +8. Ensure the **Authenticated** tab is selected and turn on '**Enable authenticated access**'. + +9. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. + +### Create authentication provider + +10. Go to the Embedding tab on the side panel. + +11. Ensure the **Authentication Settings** tab is selected and press the **Add** button in the **Authentication providers** section. + +12. Fill in the details like so: \ No newline at end of file diff --git a/examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md b/examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md new file mode 100644 index 0000000..2130732 --- /dev/null +++ b/examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md @@ -0,0 +1,19 @@ +### Enable data source for unauthenticated access + +3. Go to the Data Sources tab found on the side panel. + +4. Find the data source that you want to use on the chart by selecting the deployment, database and collection. Once found, click on the Manage button in the Data access section to access the Data source management page. + +5. Make sure the "External users can view data in this data source" option is toggled on and "Allow unauthenticated data access" has been selected. + +6. 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**' + +### Enable chart for embedded access + +7. Find the chart you want to embed, click the **...** menu and select **Embed chart** + +8. Ensure the **Unauthenticated** tab is selected and turn on '**Enable unauthenticated access**' + +9. Select the **Javascript SDK** option + +10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. \ No newline at end of file diff --git a/examples/docs/chart/preparing-realm-app.md b/examples/docs/chart/preparing-realm-app.md new file mode 100644 index 0000000..6ffb935 --- /dev/null +++ b/examples/docs/chart/preparing-realm-app.md @@ -0,0 +1,34 @@ +## Authenticate with your App Services App + +This sample is preconfigured to render, and more specifically, **authenticate** users who are verified to view a specific chart. You can run the sample as-is, or you can modify it to render and authenticate your own chart by completing the following steps: + +### Prepare your App Services App + +Choose or create an App which will be used to authenticate users who wish to view your chart. + +1. Log onto Atlas App Services + + - Create App Services App if you haven't already + +2. Click on Users on the left navigation column + +3. Click on Providers + +4. Set up a provider, or utilise and existing one. One of the easiest providers to setup is Email/Password + + 1. Click on Edit for the Email/Password Provider + 2. Enable the Provider + 3. Set User Confirmation to automatically confirm users + 4. Set Password Reset to send a reset email + 1. Set the reset URL to `http://localhost` + 2. You can also do this for confirming users if you prefer + 5. Save these settings. + 6. Deploy these changes + +5. Click the Users tab +6. Click Add New User +7. Fill out the new User details + +### Optionally, Prepare your Dataset + +If you want to use your 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://www.mongodb.com/docs/atlas/app-services/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. \ No newline at end of file diff --git a/examples/docs/chart/using-own-data/end-block.md b/examples/docs/chart/using-own-data/end-block.md new file mode 100644 index 0000000..20ed12a --- /dev/null +++ b/examples/docs/chart/using-own-data/end-block.md @@ -0,0 +1,4 @@ +2. Run `npm install` to install the package dependencies. +3. Run `npm start` to launch the sample application. + +This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. \ No newline at end of file diff --git a/examples/docs/chart/using-own-data/replace-block.md b/examples/docs/chart/using-own-data/replace-block.md new file mode 100644 index 0000000..07f3466 --- /dev/null +++ b/examples/docs/chart/using-own-data/replace-block.md @@ -0,0 +1,2 @@ + - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) + - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) \ No newline at end of file diff --git a/examples/docs/chart/using-own-data/start-block.md b/examples/docs/chart/using-own-data/start-block.md new file mode 100644 index 0000000..d72f1bc --- /dev/null +++ b/examples/docs/chart/using-own-data/start-block.md @@ -0,0 +1,3 @@ +## 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, \ No newline at end of file diff --git a/examples/docs/dashboard/background-desc.md b/examples/docs/dashboard/background-desc.md new file mode 100644 index 0000000..c81bf13 --- /dev/null +++ b/examples/docs/dashboard/background-desc.md @@ -0,0 +1 @@ +The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. \ No newline at end of file diff --git a/examples/docs/dashboard/background-title.md b/examples/docs/dashboard/background-title.md new file mode 100644 index 0000000..0864b9a --- /dev/null +++ b/examples/docs/dashboard/background-title.md @@ -0,0 +1,3 @@ +## Background + +📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ \ No newline at end of file diff --git a/examples/docs/dashboard/features-authenticated.md b/examples/docs/dashboard/features-authenticated.md new file mode 100644 index 0000000..461e79d --- /dev/null +++ b/examples/docs/dashboard/features-authenticated.md @@ -0,0 +1,8 @@ +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ + +## Highlighted Features + +In this example, you should be able to: + +- Render an authenticated embedded dashboard +- Render a dashboard to valid users only \ No newline at end of file diff --git a/examples/docs/dashboard/features-unauthenticated.md b/examples/docs/dashboard/features-unauthenticated.md new file mode 100644 index 0000000..d2a6806 --- /dev/null +++ b/examples/docs/dashboard/features-unauthenticated.md @@ -0,0 +1,7 @@ +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ + +## Highlighted Features + +In this example, you should be able to: + +- Render an unauthenticated embedded dashboard \ No newline at end of file diff --git a/examples/docs/happy-charting.md b/examples/docs/happy-charting.md new file mode 100644 index 0000000..acf77ff --- /dev/null +++ b/examples/docs/happy-charting.md @@ -0,0 +1 @@ +Happy Charting! 🚀 📈 diff --git a/examples/docs/quickstart-google.md b/examples/docs/quickstart-google.md new file mode 100644 index 0000000..c6fb854 --- /dev/null +++ b/examples/docs/quickstart-google.md @@ -0,0 +1,16 @@ +## 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`. On some operating systems, Node is available as the `nodejs` binary instead. + +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. This will utilise parcel.js. + - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is + +This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. + +Logging in with any valid Google account will allow you to render the chart. \ No newline at end of file diff --git a/examples/docs/quickstart.md b/examples/docs/quickstart.md new file mode 100644 index 0000000..b3d19b5 --- /dev/null +++ b/examples/docs/quickstart.md @@ -0,0 +1,14 @@ +## 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`. On some operating systems, Node is available as the `nodejs` binary instead. + +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. This will utilise parcel.js. + - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is + +This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. \ No newline at end of file diff --git a/examples/docs/realm-credentials.md b/examples/docs/realm-credentials.md new file mode 100644 index 0000000..9ec12c7 --- /dev/null +++ b/examples/docs/realm-credentials.md @@ -0,0 +1,13 @@ +The two hard coded credentials used in this demo are: + +``` +username: australianEmployee@mongodb.com +password: password +``` + +``` +username: canadianEmployee@mongodb.com +password: password +``` + +And they will display localised data thanks to the configured App Services User Roles. \ No newline at end of file From c6b0bcf68dc1671397f8a265806406b86c9a9d23 Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Thu, 4 May 2023 13:12:34 +1000 Subject: [PATCH 2/7] refactor: rename happy-charting.md to footer.md and fix a typo --- examples/.md-config/chart/authenticated-custom-jwt.md | 2 +- examples/.md-config/chart/authenticated-google.md | 2 +- examples/.md-config/chart/authenticated-realm-deprecated.md | 2 +- examples/.md-config/chart/authenticated-realm-web.md | 2 +- examples/.md-config/chart/click-events-basic.md | 2 +- examples/.md-config/chart/click-events-filtering.md | 2 +- examples/.md-config/chart/programmatic-highlighting.md | 2 +- examples/.md-config/chart/timeline-charts-example.md | 4 ++-- examples/.md-config/chart/unauthenticated.md | 2 +- examples/.md-config/dashboard/authenticated-custom-jwt.md | 2 +- examples/.md-config/dashboard/authenticated-google.md | 2 +- .../.md-config/dashboard/authenticated-realm-deprecated.md | 2 +- examples/.md-config/dashboard/authenticated-realm-web.md | 2 +- examples/.md-config/dashboard/unauthenticated-get-chart.md | 2 +- examples/.md-config/dashboard/unauthenticated.md | 2 +- examples/charts/timeline-charts-example/README.md | 2 +- examples/dashboard/authenticated-realm-deprecated/README.md | 1 - examples/dashboard/authenticated-realm-web/README.md | 1 - examples/dashboard/unauthenticated/README.md | 1 - examples/docs/{happy-charting.md => footer.md} | 0 20 files changed, 17 insertions(+), 20 deletions(-) rename examples/docs/{happy-charting.md => footer.md} (100%) diff --git a/examples/.md-config/chart/authenticated-custom-jwt.md b/examples/.md-config/chart/authenticated-custom-jwt.md index f93eb07..1361e1f 100644 --- a/examples/.md-config/chart/authenticated-custom-jwt.md +++ b/examples/.md-config/chart/authenticated-custom-jwt.md @@ -37,4 +37,4 @@ The hard coded credentials used in this demo are: - Change the login logic to adapt to your project's security workflow. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-google.md b/examples/.md-config/chart/authenticated-google.md index 0d92c85..5f1739c 100644 --- a/examples/.md-config/chart/authenticated-google.md +++ b/examples/.md-config/chart/authenticated-google.md @@ -53,4 +53,4 @@ Steps on how to configure a Project with Google and attain a Google Client ID ca - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-deprecated.md b/examples/.md-config/chart/authenticated-realm-deprecated.md index 9867131..0d08bc3 100644 --- a/examples/.md-config/chart/authenticated-realm-deprecated.md +++ b/examples/.md-config/chart/authenticated-realm-deprecated.md @@ -40,4 +40,4 @@ This sample also demonstrates data filtering by role, thanks to the App Services - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-web.md b/examples/.md-config/chart/authenticated-realm-web.md index 2dfe4f1..f698079 100644 --- a/examples/.md-config/chart/authenticated-realm-web.md +++ b/examples/.md-config/chart/authenticated-realm-web.md @@ -37,4 +37,4 @@ This sample also demonstrates data filtering by role, thanks to the App Services - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-basic.md b/examples/.md-config/chart/click-events-basic.md index f5e6aef..20f4ea8 100644 --- a/examples/.md-config/chart/click-events-basic.md +++ b/examples/.md-config/chart/click-events-basic.md @@ -85,4 +85,4 @@ More information regarding how to handle click events can be found in the [Chart - Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-filtering.md b/examples/.md-config/chart/click-events-filtering.md index c3d30af..2f54eb8 100644 --- a/examples/.md-config/chart/click-events-filtering.md +++ b/examples/.md-config/chart/click-events-filtering.md @@ -40,4 +40,4 @@ chart.addEventListener("click", callback, options); - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart #include "examples/docs/chart/using-own-data/end-block.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/programmatic-highlighting.md b/examples/.md-config/chart/programmatic-highlighting.md index fa624ee..1ceec1a 100644 --- a/examples/.md-config/chart/programmatic-highlighting.md +++ b/examples/.md-config/chart/programmatic-highlighting.md @@ -33,4 +33,4 @@ chart.setHighlight({ field: { $expr }}); #include "examples/docs/chart/using-own-data/replace-block.md" #include "examples/docs/chart/using-own-data/end-block.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/timeline-charts-example.md b/examples/.md-config/chart/timeline-charts-example.md index 1422589..ccae0fc 100644 --- a/examples/.md-config/chart/timeline-charts-example.md +++ b/examples/.md-config/chart/timeline-charts-example.md @@ -39,11 +39,11 @@ _The following steps presume the use of npm, though yarn works as well._ #include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fileds you want to use filters for. +#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fields you want to use filters for. #include "examples/docs/chart/using-own-data/start-block.md" - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`) #include "examples/docs/chart/using-own-data/replace-block.md" - 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. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/unauthenticated.md b/examples/.md-config/chart/unauthenticated.md index 23c1346..3b36843 100644 --- a/examples/.md-config/chart/unauthenticated.md +++ b/examples/.md-config/chart/unauthenticated.md @@ -44,4 +44,4 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica - Think whether an unauthenticated chart is the feature you're after. [Embedding iframes](https://docs.mongodb.com/charts/master/embedded-chart-options/) from Charts is a great way to showcase your data if you don't need the user to interact with the chart. - Consider the data you're making available, and the queries you're allowing. If the data is sensitive and you need to ensure the charts can only be accessed by authorized people, you should look at using authenticated embedding. -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-custom-jwt.md b/examples/.md-config/dashboard/authenticated-custom-jwt.md index ccb4124..a25dbad 100644 --- a/examples/.md-config/dashboard/authenticated-custom-jwt.md +++ b/examples/.md-config/dashboard/authenticated-custom-jwt.md @@ -11,4 +11,4 @@ This example, demonstrates how you might render an authenticated dashboard embed #include "examples/docs/quickstart.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-google.md b/examples/.md-config/dashboard/authenticated-google.md index 94e88bd..3a1f643 100644 --- a/examples/.md-config/dashboard/authenticated-google.md +++ b/examples/.md-config/dashboard/authenticated-google.md @@ -12,4 +12,4 @@ This example, demonstrates how you might render an authenticated dashboard embed #include "examples/docs/quickstart-google.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-deprecated.md b/examples/.md-config/dashboard/authenticated-realm-deprecated.md index fec736e..954f217 100644 --- a/examples/.md-config/dashboard/authenticated-realm-deprecated.md +++ b/examples/.md-config/dashboard/authenticated-realm-deprecated.md @@ -18,4 +18,4 @@ This example, demonstrates how you might render an authenticated dashboard embed #include "examples/docs/realm-credentials.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-web.md b/examples/.md-config/dashboard/authenticated-realm-web.md index 094d048..1e751fc 100644 --- a/examples/.md-config/dashboard/authenticated-realm-web.md +++ b/examples/.md-config/dashboard/authenticated-realm-web.md @@ -16,4 +16,4 @@ This example, demonstrates how you might render an authenticated dashboard embed #include "examples/docs/realm-credentials.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated-get-chart.md b/examples/.md-config/dashboard/unauthenticated-get-chart.md index 83af814..796cdc9 100644 --- a/examples/.md-config/dashboard/unauthenticated-get-chart.md +++ b/examples/.md-config/dashboard/unauthenticated-get-chart.md @@ -17,4 +17,4 @@ This example, demonstrates how you might render an unauthenticated dashboard emb #include "examples/docs/quickstart.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated.md b/examples/.md-config/dashboard/unauthenticated.md index 343bf7e..319f6c5 100644 --- a/examples/.md-config/dashboard/unauthenticated.md +++ b/examples/.md-config/dashboard/unauthenticated.md @@ -17,4 +17,4 @@ This example, demonstrates how you might render an unauthenticated dashboard emb #include "examples/docs/quickstart.md" -#include "examples/docs/happy-charting.md" \ No newline at end of file +#include "examples/docs/footer.md" \ No newline at end of file diff --git a/examples/charts/timeline-charts-example/README.md b/examples/charts/timeline-charts-example/README.md index db4b9a0..cfba3b9 100644 --- a/examples/charts/timeline-charts-example/README.md +++ b/examples/charts/timeline-charts-example/README.md @@ -67,7 +67,7 @@ This sample is preconfigured to render a specific chart. You can run the sample 9. Select the **Javascript SDK** option -10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. Ensure you have whitelisted all the fileds you want to use filters for. +10. Note the **Chart ID** and the **Base URL**, as you will need them for running the demo. Ensure you have whitelisted all the fields you want to use filters for. ## Running this Sample with your data diff --git a/examples/dashboard/authenticated-realm-deprecated/README.md b/examples/dashboard/authenticated-realm-deprecated/README.md index 530d438..da4825d 100644 --- a/examples/dashboard/authenticated-realm-deprecated/README.md +++ b/examples/dashboard/authenticated-realm-deprecated/README.md @@ -53,4 +53,3 @@ password: password And they will display localised data thanks to the configured App Services User Roles. Happy Charting! 🚀 📈 - diff --git a/examples/dashboard/authenticated-realm-web/README.md b/examples/dashboard/authenticated-realm-web/README.md index d2edc8c..c3653de 100644 --- a/examples/dashboard/authenticated-realm-web/README.md +++ b/examples/dashboard/authenticated-realm-web/README.md @@ -51,4 +51,3 @@ password: password And they will display localised data thanks to the configured App Services User Roles. Happy Charting! 🚀 📈 - diff --git a/examples/dashboard/unauthenticated/README.md b/examples/dashboard/unauthenticated/README.md index 1073154..9a8a421 100644 --- a/examples/dashboard/unauthenticated/README.md +++ b/examples/dashboard/unauthenticated/README.md @@ -39,4 +39,3 @@ _The following steps presume the use of npm, though yarn works as well._ This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. Happy Charting! 🚀 📈 - diff --git a/examples/docs/happy-charting.md b/examples/docs/footer.md similarity index 100% rename from examples/docs/happy-charting.md rename to examples/docs/footer.md From f119aff6c0241dc12aa40a486121cb0313fd442e Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Thu, 4 May 2023 13:18:12 +1000 Subject: [PATCH 3/7] chore: restructure directories to hide all snippets in the hidden folder --- .../config}/chart/authenticated-custom-jwt.md | 24 ++++++++-------- .../config}/chart/authenticated-google.md | 22 +++++++-------- .../chart/authenticated-realm-deprecated.md | 28 +++++++++---------- .../config}/chart/authenticated-realm-web.md | 28 +++++++++---------- .../config}/chart/click-events-basic.md | 22 +++++++-------- .../config}/chart/click-events-filtering.md | 20 ++++++------- .../chart/programmatic-highlighting.md | 18 ++++++------ .../config}/chart/timeline-charts-example.md | 12 ++++---- .../config}/chart/unauthenticated.md | 22 +++++++-------- .../dashboard/authenticated-custom-jwt.md | 10 +++---- .../config}/dashboard/authenticated-google.md | 10 +++---- .../authenticated-realm-deprecated.md | 12 ++++---- .../dashboard/authenticated-realm-web.md | 12 ++++---- .../dashboard/unauthenticated-get-chart.md | 10 +++---- .../config}/dashboard/unauthenticated.md | 10 +++---- .../chart/background/desc-click-events.md | 0 .../docs/chart/background/desc-extended.md | 0 .../docs/chart/background/desc-simple.md | 0 .../background/features-authenticated.md | 0 .../docs/chart/background/start-block.md | 0 .../{ => .markdown}/docs/chart/next-steps.md | 0 .../create-authentication-provider-realm.md | 0 .../create-chart-to-embed.md | 0 .../enable-authenticated-access.md | 0 .../enable-unauthenticated-access.md | 0 .../docs/chart/preparing-realm-app.md | 0 .../docs/chart/using-own-data/end-block.md | 0 .../chart/using-own-data/replace-block.md | 0 .../docs/chart/using-own-data/start-block.md | 0 .../docs/dashboard/background-desc.md | 0 .../docs/dashboard/background-title.md | 0 .../docs/dashboard/features-authenticated.md | 0 .../dashboard/features-unauthenticated.md | 0 examples/{ => .markdown}/docs/footer.md | 0 .../{ => .markdown}/docs/quickstart-google.md | 0 examples/{ => .markdown}/docs/quickstart.md | 0 .../{ => .markdown}/docs/realm-credentials.md | 0 .../authenticated-custom-jwt/markdown.json | 2 +- .../charts/authenticated-google/markdown.json | 2 +- .../markdown.json | 2 +- .../authenticated-realm-web/markdown.json | 2 +- .../charts/click-events-basic/markdown.json | 2 +- .../click-events-filtering/markdown.json | 2 +- .../programmatic-highlighting/markdown.json | 2 +- .../timeline-charts-example/markdown.json | 2 +- examples/charts/unauthenticated/markdown.json | 2 +- .../authenticated-custom-jwt/markdown.json | 2 +- .../authenticated-google/markdown.json | 2 +- .../markdown.json | 2 +- .../authenticated-realm-web/markdown.json | 2 +- .../unauthenticated-get-chart/markdown.json | 2 +- .../dashboard/unauthenticated/markdown.json | 2 +- 52 files changed, 145 insertions(+), 145 deletions(-) rename examples/{.md-config => .markdown/config}/chart/authenticated-custom-jwt.md (66%) rename examples/{.md-config => .markdown/config}/chart/authenticated-google.md (74%) rename examples/{.md-config => .markdown/config}/chart/authenticated-realm-deprecated.md (67%) rename examples/{.md-config => .markdown/config}/chart/authenticated-realm-web.md (59%) rename examples/{.md-config => .markdown/config}/chart/click-events-basic.md (74%) rename examples/{.md-config => .markdown/config}/chart/click-events-filtering.md (71%) rename examples/{.md-config => .markdown/config}/chart/programmatic-highlighting.md (69%) rename examples/{.md-config => .markdown/config}/chart/timeline-charts-example.md (80%) rename examples/{.md-config => .markdown/config}/chart/unauthenticated.md (72%) rename examples/{.md-config => .markdown/config}/dashboard/authenticated-custom-jwt.md (50%) rename examples/{.md-config => .markdown/config}/dashboard/authenticated-google.md (57%) rename examples/{.md-config => .markdown/config}/dashboard/authenticated-realm-deprecated.md (71%) rename examples/{.md-config => .markdown/config}/dashboard/authenticated-realm-web.md (58%) rename examples/{.md-config => .markdown/config}/dashboard/unauthenticated-get-chart.md (72%) rename examples/{.md-config => .markdown/config}/dashboard/unauthenticated.md (75%) rename examples/{ => .markdown}/docs/chart/background/desc-click-events.md (100%) rename examples/{ => .markdown}/docs/chart/background/desc-extended.md (100%) rename examples/{ => .markdown}/docs/chart/background/desc-simple.md (100%) rename examples/{ => .markdown}/docs/chart/background/features-authenticated.md (100%) rename examples/{ => .markdown}/docs/chart/background/start-block.md (100%) rename examples/{ => .markdown}/docs/chart/next-steps.md (100%) rename examples/{ => .markdown}/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md (100%) rename examples/{ => .markdown}/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md (100%) rename examples/{ => .markdown}/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md (100%) rename examples/{ => .markdown}/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md (100%) rename examples/{ => .markdown}/docs/chart/preparing-realm-app.md (100%) rename examples/{ => .markdown}/docs/chart/using-own-data/end-block.md (100%) rename examples/{ => .markdown}/docs/chart/using-own-data/replace-block.md (100%) rename examples/{ => .markdown}/docs/chart/using-own-data/start-block.md (100%) rename examples/{ => .markdown}/docs/dashboard/background-desc.md (100%) rename examples/{ => .markdown}/docs/dashboard/background-title.md (100%) rename examples/{ => .markdown}/docs/dashboard/features-authenticated.md (100%) rename examples/{ => .markdown}/docs/dashboard/features-unauthenticated.md (100%) rename examples/{ => .markdown}/docs/footer.md (100%) rename examples/{ => .markdown}/docs/quickstart-google.md (100%) rename examples/{ => .markdown}/docs/quickstart.md (100%) rename examples/{ => .markdown}/docs/realm-credentials.md (100%) diff --git a/examples/.md-config/chart/authenticated-custom-jwt.md b/examples/.markdown/config/chart/authenticated-custom-jwt.md similarity index 66% rename from examples/.md-config/chart/authenticated-custom-jwt.md rename to examples/.markdown/config/chart/authenticated-custom-jwt.md index 1361e1f..307a2d4 100644 --- a/examples/.md-config/chart/authenticated-custom-jwt.md +++ b/examples/.markdown/config/chart/authenticated-custom-jwt.md @@ -1,31 +1,31 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Chart -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/background/desc-extended.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via a custom jwt authentication. The sample app has its own authentication and token issuing logic. You may want to follow a similar approach if you are not integrating with an external authentication mechanism or your authentication is not based on JWTs. Alternatively, if you are using an existing authentication mechanism that issues JWTs, you can use those tokens to authenticate your chart rendering requests after configuring a Charts authentication provider that can validate the JWT. -#include "examples/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/background/features-authenticated.md" - 🔑 Custom JWT authentication via `jsonwebtoken` -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_ - Provider: `Custom JSON Web Token` - Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_ - Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_ -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) -#include "examples/docs/chart/using-own-data/replace-block.md" -#include "examples/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/end-block.md" Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. The hard coded credentials used in this demo are: @@ -33,8 +33,8 @@ The hard coded credentials used in this demo are: - Username : `admin` - Password: `password` -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Change the login logic to adapt to your project's security workflow. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-google.md b/examples/.markdown/config/chart/authenticated-google.md similarity index 74% rename from examples/.md-config/chart/authenticated-google.md rename to examples/.markdown/config/chart/authenticated-google.md index 5f1739c..c55a652 100644 --- a/examples/.md-config/chart/authenticated-google.md +++ b/examples/.markdown/config/chart/authenticated-google.md @@ -1,17 +1,17 @@ # MongoDB Charts Embedding Example - Google Authentication -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/background/desc-extended.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Google** as an authentication provider. The sample app is already set up to authenticate with a Google Client ID hosted by the Charts Development team. -#include "examples/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/background/features-authenticated.md" - 𝗚 Google authentication -#include "examples/docs/quickstart-google.md" +#include "examples/.markdown/docs/quickstart-google.md" ## Getting a Google Client ID @@ -19,22 +19,22 @@ This sample is pre-configured with a MongoDB-owned test Client ID. To use Google Steps on how to configure a Project with Google and attain a Google Client ID can be found [here](https://developers.google.com/identity/sign-in/web/sign-in). You'll need to set the Origin and Redirect URIs to whatever you use in your application. In our sample, that is http://localhost:3000. -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_ - Provider: `Google` - Google Client ID: _See above for - This should be the entire string `.apps.googleusercontent.com` -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the `index.html` file -#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - **Optional** - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Use Incognito Mode to see a pure login experience - Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure. @@ -53,4 +53,4 @@ Steps on how to configure a Project with Google and attain a Google Client ID ca - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-deprecated.md b/examples/.markdown/config/chart/authenticated-realm-deprecated.md similarity index 67% rename from examples/.md-config/chart/authenticated-realm-deprecated.md rename to examples/.markdown/config/chart/authenticated-realm-deprecated.md index 0d08bc3..3584b89 100644 --- a/examples/.md-config/chart/authenticated-realm-deprecated.md +++ b/examples/.markdown/config/chart/authenticated-realm-deprecated.md @@ -2,42 +2,42 @@ > ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example. -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-deprecated)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/background/desc-extended.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! -#include "examples/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/background/features-authenticated.md" - 🔑 App Services authentication - 🙋‍♂️ Data filtering by App Services User Role -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/realm-credentials.md" +#include "examples/.markdown/docs/realm-credentials.md" -#include "examples/docs/chart/preparing-realm-app.md" +#include "examples/.markdown/docs/chart/preparing-realm-app.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) - Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) -#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/authenticated-realm-web.md b/examples/.markdown/config/chart/authenticated-realm-web.md similarity index 59% rename from examples/.md-config/chart/authenticated-realm-web.md rename to examples/.markdown/config/chart/authenticated-realm-web.md index f698079..0002399 100644 --- a/examples/.md-config/chart/authenticated-realm-web.md +++ b/examples/.markdown/config/chart/authenticated-realm-web.md @@ -1,40 +1,40 @@ # MongoDB Charts Embedding Example - App Services Authentication -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/background/desc-extended.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! -#include "examples/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/background/features-authenticated.md" - 🔑 App Services authentication - 🙋‍♂️ Data filtering by App Services User Role -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/realm-credentials.md" +#include "examples/.markdown/docs/realm-credentials.md" -#include "examples/docs/chart/preparing-realm-app.md" +#include "examples/.markdown/docs/chart/preparing-realm-app.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) - Replace the Realm App ID string. `Realm.App({id: ''})` -#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-basic.md b/examples/.markdown/config/chart/click-events-basic.md similarity index 74% rename from examples/.md-config/chart/click-events-basic.md rename to examples/.markdown/config/chart/click-events-basic.md index 20f4ea8..ed91d76 100644 --- a/examples/.md-config/chart/click-events-basic.md +++ b/examples/.markdown/config/chart/click-events-basic.md @@ -1,12 +1,12 @@ # MongoDB Charts Embedding Example - Click Events -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-click-events.md" +#include "examples/.markdown/docs/chart/background/desc-click-events.md" This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). #### The features included in this demo are as follows: @@ -70,19 +70,19 @@ chart.setHighlight(payload.selectionFilter) More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) -#include "examples/docs/chart/using-own-data/replace-block.md" -#include "examples/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/end-block.md" -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/click-events-filtering.md b/examples/.markdown/config/chart/click-events-filtering.md similarity index 71% rename from examples/.md-config/chart/click-events-filtering.md rename to examples/.markdown/config/chart/click-events-filtering.md index 2f54eb8..f2a7faf 100644 --- a/examples/.md-config/chart/click-events-filtering.md +++ b/examples/.markdown/config/chart/click-events-filtering.md @@ -1,12 +1,12 @@ # MongoDB Charts Embedding Example - Interactive Filtering -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-click-events.md" +#include "examples/.markdown/docs/chart/background/desc-click-events.md" This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -24,20 +24,20 @@ chart.addEventListener("click", callback, options); - Highlighting the clicked element on the first chart using `setHighlight` - Filtering a second chart using the `setFilter` method -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" 11. In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample Movies dataset filters on `year` and `genres`. Furthermore, the filter related code in `src/index.js` will need to be updated to conform to the filter query you wish to apply. -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) -#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart -#include "examples/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data/end-block.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/programmatic-highlighting.md b/examples/.markdown/config/chart/programmatic-highlighting.md similarity index 69% rename from examples/.md-config/chart/programmatic-highlighting.md rename to examples/.markdown/config/chart/programmatic-highlighting.md index 1ceec1a..4c7ef4f 100644 --- a/examples/.md-config/chart/programmatic-highlighting.md +++ b/examples/.markdown/config/chart/programmatic-highlighting.md @@ -1,10 +1,10 @@ # MongoDB Charts Embedding Example - Programmatic Highlighting -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/programmatic-highlighting)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" When you embed charts using the Embedding SDK, you are able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). @@ -22,15 +22,15 @@ chart.setHighlight({ field: { $expr }}); - Showing more complicated MQL filters with the drop down - Allow custom filtering expressions by editing the textarea -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) -#include "examples/docs/chart/using-own-data/replace-block.md" -#include "examples/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/end-block.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/timeline-charts-example.md b/examples/.markdown/config/chart/timeline-charts-example.md similarity index 80% rename from examples/.md-config/chart/timeline-charts-example.md rename to examples/.markdown/config/chart/timeline-charts-example.md index ccae0fc..b9e814e 100644 --- a/examples/.md-config/chart/timeline-charts-example.md +++ b/examples/.markdown/config/chart/timeline-charts-example.md @@ -1,6 +1,6 @@ # MongoDB Charts Embedding Example - Timeline Chart -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[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)_ @@ -37,13 +37,13 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. It will open directly in the browser at this address `http://localhost:3000`. -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fields you want to use filters for. +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fields you want to use filters for. -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`) -#include "examples/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - 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. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/chart/unauthenticated.md b/examples/.markdown/config/chart/unauthenticated.md similarity index 72% rename from examples/.md-config/chart/unauthenticated.md rename to examples/.markdown/config/chart/unauthenticated.md index 3b36843..39c6316 100644 --- a/examples/.md-config/chart/unauthenticated.md +++ b/examples/.markdown/config/chart/unauthenticated.md @@ -1,12 +1,12 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Chart -#include "examples/docs/chart/background/start-block.md" +#include "examples/.markdown/docs/chart/background/start-block.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated)_ -#include "examples/docs/chart/background/desc-simple.md" +#include "examples/.markdown/docs/chart/background/desc-simple.md" -#include "examples/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/background/desc-extended.md" This sample shows how to use the JavaScript Embedding SDK to render unauthenticated embedded charts, along with showing off the various ways your application can interact with charts using the SDK. @@ -22,11 +22,11 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica - Note, filtering on a chart requires setting up white listed fields in MongoDB Charts. We have done this for our sample data. - Get the current filter on a chart -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" -#include "examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" 11. **Optional** In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample AirBnB dataset filters on `address.country`. @@ -35,13 +35,13 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica - Update the query **field** in `src/index.js` - Update the query **values** in `index.html` -#include "examples/docs/chart/using-own-data/start-block.md" +#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - Open the _index.js_ file (`src/index.js`) -#include "examples/docs/chart/using-own-data/replace-block.md" -#include "examples/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" +#include "examples/.markdown/docs/chart/using-own-data/end-block.md" -#include "examples/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps.md" - Think whether an unauthenticated chart is the feature you're after. [Embedding iframes](https://docs.mongodb.com/charts/master/embedded-chart-options/) from Charts is a great way to showcase your data if you don't need the user to interact with the chart. - Consider the data you're making available, and the queries you're allowing. If the data is sensitive and you need to ensure the charts can only be accessed by authorized people, you should look at using authenticated embedding. -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-custom-jwt.md b/examples/.markdown/config/dashboard/authenticated-custom-jwt.md similarity index 50% rename from examples/.md-config/dashboard/authenticated-custom-jwt.md rename to examples/.markdown/config/dashboard/authenticated-custom-jwt.md index a25dbad..ef85a8e 100644 --- a/examples/.md-config/dashboard/authenticated-custom-jwt.md +++ b/examples/.markdown/config/dashboard/authenticated-custom-jwt.md @@ -1,14 +1,14 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Custom JWT) -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Custom JWT as the authentication provider. -#include "examples/docs/dashboard/features-authenticated.md" +#include "examples/.markdown/docs/dashboard/features-authenticated.md" - Custom JWT authentication via the `jsonwebtoken` package -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-google.md b/examples/.markdown/config/dashboard/authenticated-google.md similarity index 57% rename from examples/.md-config/dashboard/authenticated-google.md rename to examples/.markdown/config/dashboard/authenticated-google.md index 3a1f643..83c319e 100644 --- a/examples/.md-config/dashboard/authenticated-google.md +++ b/examples/.markdown/config/dashboard/authenticated-google.md @@ -1,15 +1,15 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Google Auth) -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Google as the authentication provider. -#include "examples/docs/dashboard/features-authenticated.md" +#include "examples/.markdown/docs/dashboard/features-authenticated.md" - Integrate Google Sign-In to authenticate users - You can follow [this tutorial](https://developers.google.com/identity/sign-in/web/sign-in) for more details -#include "examples/docs/quickstart-google.md" +#include "examples/.markdown/docs/quickstart-google.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-deprecated.md b/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md similarity index 71% rename from examples/.md-config/dashboard/authenticated-realm-deprecated.md rename to examples/.markdown/config/dashboard/authenticated-realm-deprecated.md index 954f217..19a97d5 100644 --- a/examples/.md-config/dashboard/authenticated-realm-deprecated.md +++ b/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md @@ -2,20 +2,20 @@ > ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web) example. -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -#include "examples/docs/dashboard/features-authenticated.md" +#include "examples/.markdown/docs/dashboard/features-authenticated.md" - App Services authentication - Data filtering by App Services User Role -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/realm-credentials.md" +#include "examples/.markdown/docs/realm-credentials.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/authenticated-realm-web.md b/examples/.markdown/config/dashboard/authenticated-realm-web.md similarity index 58% rename from examples/.md-config/dashboard/authenticated-realm-web.md rename to examples/.markdown/config/dashboard/authenticated-realm-web.md index 1e751fc..3fc720e 100644 --- a/examples/.md-config/dashboard/authenticated-realm-web.md +++ b/examples/.markdown/config/dashboard/authenticated-realm-web.md @@ -1,19 +1,19 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (App Services) -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)_ -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -#include "examples/docs/dashboard/features-authenticated.md" +#include "examples/.markdown/docs/dashboard/features-authenticated.md" - Use App Services authentication - Data filtering by App Services User Role -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/realm-credentials.md" +#include "examples/.markdown/docs/realm-credentials.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated-get-chart.md b/examples/.markdown/config/dashboard/unauthenticated-get-chart.md similarity index 72% rename from examples/.md-config/dashboard/unauthenticated-get-chart.md rename to examples/.markdown/config/dashboard/unauthenticated-get-chart.md index 796cdc9..270528c 100644 --- a/examples/.md-config/dashboard/unauthenticated-get-chart.md +++ b/examples/.markdown/config/dashboard/unauthenticated-get-chart.md @@ -1,20 +1,20 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard with `getChart` and `getAllCharts` methods -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)_ -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application and retrieve all or just one chart on a dashboard. -#include "examples/docs/dashboard/features-unauthenticated.md" +#include "examples/.markdown/docs/dashboard/features-unauthenticated.md" - Manually refresh the dashboard (Refresh all charts within a dashboard) - Get all the charts that are rendered on a dashboard via the SDK - Manually refresh a chart instance that you have specified - Adding/Removing click event listeners to a specific chart instance that you have specified - Viewing the payload for a click event -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.md-config/dashboard/unauthenticated.md b/examples/.markdown/config/dashboard/unauthenticated.md similarity index 75% rename from examples/.md-config/dashboard/unauthenticated.md rename to examples/.markdown/config/dashboard/unauthenticated.md index 319f6c5..3f8556c 100644 --- a/examples/.md-config/dashboard/unauthenticated.md +++ b/examples/.markdown/config/dashboard/unauthenticated.md @@ -1,20 +1,20 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard -#include "examples/docs/dashboard/background-title.md" +#include "examples/.markdown/docs/dashboard/background-title.md" 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)_ -#include "examples/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/background-desc.md" This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application via the SDK. If you don't want to use the SDK but want an easier way to render your dashboard, you can use an [embedded iframe](https://dochub.mongodb.org/core/charts-embedding-dashboards-iframe) instead. -#include "examples/docs/dashboard/features-unauthenticated.md" +#include "examples/.markdown/docs/dashboard/features-unauthenticated.md" - Manually refresh the dashboard (Refresh all charts within a dashboard) - Set the whole dashboard theme to `'light'` or `'dark'` - Set background colour of all charts shown on the dashboard. Note that this will overwrite the colour that has been set by the current theme - Set the max data age of a chart on a dashboard - Set the height and width mode to `'fixed'` or `'scale'`. -#include "examples/docs/quickstart.md" +#include "examples/.markdown/docs/quickstart.md" -#include "examples/docs/footer.md" \ No newline at end of file +#include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/docs/chart/background/desc-click-events.md b/examples/.markdown/docs/chart/background/desc-click-events.md similarity index 100% rename from examples/docs/chart/background/desc-click-events.md rename to examples/.markdown/docs/chart/background/desc-click-events.md diff --git a/examples/docs/chart/background/desc-extended.md b/examples/.markdown/docs/chart/background/desc-extended.md similarity index 100% rename from examples/docs/chart/background/desc-extended.md rename to examples/.markdown/docs/chart/background/desc-extended.md diff --git a/examples/docs/chart/background/desc-simple.md b/examples/.markdown/docs/chart/background/desc-simple.md similarity index 100% rename from examples/docs/chart/background/desc-simple.md rename to examples/.markdown/docs/chart/background/desc-simple.md diff --git a/examples/docs/chart/background/features-authenticated.md b/examples/.markdown/docs/chart/background/features-authenticated.md similarity index 100% rename from examples/docs/chart/background/features-authenticated.md rename to examples/.markdown/docs/chart/background/features-authenticated.md diff --git a/examples/docs/chart/background/start-block.md b/examples/.markdown/docs/chart/background/start-block.md similarity index 100% rename from examples/docs/chart/background/start-block.md rename to examples/.markdown/docs/chart/background/start-block.md diff --git a/examples/docs/chart/next-steps.md b/examples/.markdown/docs/chart/next-steps.md similarity index 100% rename from examples/docs/chart/next-steps.md rename to examples/.markdown/docs/chart/next-steps.md diff --git a/examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md b/examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md similarity index 100% rename from examples/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md rename to examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md diff --git a/examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md b/examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md similarity index 100% rename from examples/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md rename to examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md diff --git a/examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md b/examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md similarity index 100% rename from examples/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md rename to examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md diff --git a/examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md b/examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md similarity index 100% rename from examples/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md rename to examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md diff --git a/examples/docs/chart/preparing-realm-app.md b/examples/.markdown/docs/chart/preparing-realm-app.md similarity index 100% rename from examples/docs/chart/preparing-realm-app.md rename to examples/.markdown/docs/chart/preparing-realm-app.md diff --git a/examples/docs/chart/using-own-data/end-block.md b/examples/.markdown/docs/chart/using-own-data/end-block.md similarity index 100% rename from examples/docs/chart/using-own-data/end-block.md rename to examples/.markdown/docs/chart/using-own-data/end-block.md diff --git a/examples/docs/chart/using-own-data/replace-block.md b/examples/.markdown/docs/chart/using-own-data/replace-block.md similarity index 100% rename from examples/docs/chart/using-own-data/replace-block.md rename to examples/.markdown/docs/chart/using-own-data/replace-block.md diff --git a/examples/docs/chart/using-own-data/start-block.md b/examples/.markdown/docs/chart/using-own-data/start-block.md similarity index 100% rename from examples/docs/chart/using-own-data/start-block.md rename to examples/.markdown/docs/chart/using-own-data/start-block.md diff --git a/examples/docs/dashboard/background-desc.md b/examples/.markdown/docs/dashboard/background-desc.md similarity index 100% rename from examples/docs/dashboard/background-desc.md rename to examples/.markdown/docs/dashboard/background-desc.md diff --git a/examples/docs/dashboard/background-title.md b/examples/.markdown/docs/dashboard/background-title.md similarity index 100% rename from examples/docs/dashboard/background-title.md rename to examples/.markdown/docs/dashboard/background-title.md diff --git a/examples/docs/dashboard/features-authenticated.md b/examples/.markdown/docs/dashboard/features-authenticated.md similarity index 100% rename from examples/docs/dashboard/features-authenticated.md rename to examples/.markdown/docs/dashboard/features-authenticated.md diff --git a/examples/docs/dashboard/features-unauthenticated.md b/examples/.markdown/docs/dashboard/features-unauthenticated.md similarity index 100% rename from examples/docs/dashboard/features-unauthenticated.md rename to examples/.markdown/docs/dashboard/features-unauthenticated.md diff --git a/examples/docs/footer.md b/examples/.markdown/docs/footer.md similarity index 100% rename from examples/docs/footer.md rename to examples/.markdown/docs/footer.md diff --git a/examples/docs/quickstart-google.md b/examples/.markdown/docs/quickstart-google.md similarity index 100% rename from examples/docs/quickstart-google.md rename to examples/.markdown/docs/quickstart-google.md diff --git a/examples/docs/quickstart.md b/examples/.markdown/docs/quickstart.md similarity index 100% rename from examples/docs/quickstart.md rename to examples/.markdown/docs/quickstart.md diff --git a/examples/docs/realm-credentials.md b/examples/.markdown/docs/realm-credentials.md similarity index 100% rename from examples/docs/realm-credentials.md rename to examples/.markdown/docs/realm-credentials.md diff --git a/examples/charts/authenticated-custom-jwt/markdown.json b/examples/charts/authenticated-custom-jwt/markdown.json index 10ea35c..17106e5 100644 --- a/examples/charts/authenticated-custom-jwt/markdown.json +++ b/examples/charts/authenticated-custom-jwt/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/authenticated-custom-jwt/README.md", - "files" : ["examples/.md-config/chart/authenticated-custom-jwt.md"] + "files" : ["examples/.markdown/config/chart/authenticated-custom-jwt.md"] } diff --git a/examples/charts/authenticated-google/markdown.json b/examples/charts/authenticated-google/markdown.json index ce42a42..ab7b938 100644 --- a/examples/charts/authenticated-google/markdown.json +++ b/examples/charts/authenticated-google/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/authenticated-google/README.md", - "files" : ["examples/.md-config/chart/authenticated-google.md"] + "files" : ["examples/.markdown/config/chart/authenticated-google.md"] } diff --git a/examples/charts/authenticated-realm-deprecated/markdown.json b/examples/charts/authenticated-realm-deprecated/markdown.json index 14fc329..57ecca5 100644 --- a/examples/charts/authenticated-realm-deprecated/markdown.json +++ b/examples/charts/authenticated-realm-deprecated/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/authenticated-realm-deprecated/README.md", - "files" : ["examples/.md-config/chart/authenticated-realm-deprecated.md"] + "files" : ["examples/.markdown/config/chart/authenticated-realm-deprecated.md"] } diff --git a/examples/charts/authenticated-realm-web/markdown.json b/examples/charts/authenticated-realm-web/markdown.json index e646b66..cc7a4b2 100644 --- a/examples/charts/authenticated-realm-web/markdown.json +++ b/examples/charts/authenticated-realm-web/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/authenticated-realm-web/README.md", - "files" : ["examples/.md-config/chart/authenticated-realm-web.md"] + "files" : ["examples/.markdown/config/chart/authenticated-realm-web.md"] } diff --git a/examples/charts/click-events-basic/markdown.json b/examples/charts/click-events-basic/markdown.json index 1a0bb7f..01f209e 100644 --- a/examples/charts/click-events-basic/markdown.json +++ b/examples/charts/click-events-basic/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/click-events-basic/README.md", - "files" : ["examples/.md-config/chart/click-events-basic.md"] + "files" : ["examples/.markdown/config/chart/click-events-basic.md"] } diff --git a/examples/charts/click-events-filtering/markdown.json b/examples/charts/click-events-filtering/markdown.json index 45a4ce3..2977cc6 100644 --- a/examples/charts/click-events-filtering/markdown.json +++ b/examples/charts/click-events-filtering/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/click-events-filtering/README.md", - "files" : ["examples/.md-config/chart/click-events-filtering.md"] + "files" : ["examples/.markdown/config/chart/click-events-filtering.md"] } diff --git a/examples/charts/programmatic-highlighting/markdown.json b/examples/charts/programmatic-highlighting/markdown.json index 929b995..3114c00 100644 --- a/examples/charts/programmatic-highlighting/markdown.json +++ b/examples/charts/programmatic-highlighting/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/programmatic-highlighting/README.md", - "files" : ["examples/.md-config/chart/programmatic-highlighting.md"] + "files" : ["examples/.markdown/config/chart/programmatic-highlighting.md"] } diff --git a/examples/charts/timeline-charts-example/markdown.json b/examples/charts/timeline-charts-example/markdown.json index b7315c6..209378c 100644 --- a/examples/charts/timeline-charts-example/markdown.json +++ b/examples/charts/timeline-charts-example/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/timeline-charts-example/README.md", - "files" : ["examples/.md-config/chart/timeline-charts-example.md"] + "files" : ["examples/.markdown/config/chart/timeline-charts-example.md"] } diff --git a/examples/charts/unauthenticated/markdown.json b/examples/charts/unauthenticated/markdown.json index aa92021..58f629a 100644 --- a/examples/charts/unauthenticated/markdown.json +++ b/examples/charts/unauthenticated/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/charts/unauthenticated/README.md", - "files" : ["examples/.md-config/chart/unauthenticated.md"] + "files" : ["examples/.markdown/config/chart/unauthenticated.md"] } diff --git a/examples/dashboard/authenticated-custom-jwt/markdown.json b/examples/dashboard/authenticated-custom-jwt/markdown.json index ab56355..8fef83a 100644 --- a/examples/dashboard/authenticated-custom-jwt/markdown.json +++ b/examples/dashboard/authenticated-custom-jwt/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/authenticated-custom-jwt/README.md", - "files" : ["examples/.md-config/dashboard/authenticated-custom-jwt.md"] + "files" : ["examples/.markdown/config/dashboard/authenticated-custom-jwt.md"] } diff --git a/examples/dashboard/authenticated-google/markdown.json b/examples/dashboard/authenticated-google/markdown.json index a0f4378..6036c7a 100644 --- a/examples/dashboard/authenticated-google/markdown.json +++ b/examples/dashboard/authenticated-google/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/authenticated-google/README.md", - "files" : ["examples/.md-config/dashboard/authenticated-google.md"] + "files" : ["examples/.markdown/config/dashboard/authenticated-google.md"] } diff --git a/examples/dashboard/authenticated-realm-deprecated/markdown.json b/examples/dashboard/authenticated-realm-deprecated/markdown.json index 67c03a8..ed7c49d 100644 --- a/examples/dashboard/authenticated-realm-deprecated/markdown.json +++ b/examples/dashboard/authenticated-realm-deprecated/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/authenticated-realm-deprecated/README.md", - "files" : ["examples/.md-config/dashboard/authenticated-realm-deprecated.md"] + "files" : ["examples/.markdown/config/dashboard/authenticated-realm-deprecated.md"] } diff --git a/examples/dashboard/authenticated-realm-web/markdown.json b/examples/dashboard/authenticated-realm-web/markdown.json index 8ad7493..0281bf0 100644 --- a/examples/dashboard/authenticated-realm-web/markdown.json +++ b/examples/dashboard/authenticated-realm-web/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/authenticated-realm-web/README.md", - "files" : ["examples/.md-config/dashboard/authenticated-realm-web.md"] + "files" : ["examples/.markdown/config/dashboard/authenticated-realm-web.md"] } diff --git a/examples/dashboard/unauthenticated-get-chart/markdown.json b/examples/dashboard/unauthenticated-get-chart/markdown.json index b85409d..dd04b26 100644 --- a/examples/dashboard/unauthenticated-get-chart/markdown.json +++ b/examples/dashboard/unauthenticated-get-chart/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/unauthenticated-get-chart/README.md", - "files" : ["examples/.md-config/dashboard/unauthenticated-get-chart.md"] + "files" : ["examples/.markdown/config/dashboard/unauthenticated-get-chart.md"] } diff --git a/examples/dashboard/unauthenticated/markdown.json b/examples/dashboard/unauthenticated/markdown.json index 5c618df..36dc811 100644 --- a/examples/dashboard/unauthenticated/markdown.json +++ b/examples/dashboard/unauthenticated/markdown.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/unauthenticated/README.md", - "files" : ["examples/.md-config/dashboard/unauthenticated.md"] + "files" : ["examples/.markdown/config/dashboard/unauthenticated.md"] } From 69b70c6263304a4f30340e4ffc266468a0b9a52d Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Thu, 4 May 2023 20:40:31 +1000 Subject: [PATCH 4/7] chore: move markdown.json files into new directory .markdown/compilation --- .../compilation/chart/authenticated-custom-jwt.json} | 0 .../compilation/chart/authenticated-google.json} | 0 .../compilation/chart/authenticated-realm-deprecated.json} | 0 .../compilation/chart/authenticated-realm-web.json} | 0 .../compilation/chart/click-events-basic.json} | 0 .../compilation/chart/click-events-filtering.json} | 0 .../compilation/chart/programmatic-highlighting.json} | 0 .../compilation/chart/timeline-charts.json} | 0 .../compilation/chart/unauthenticated.json} | 0 .../compilation/dashboard/authenticated-custom-jwt.json} | 2 +- .../compilation/dashboard/authenticated-google.json} | 0 .../compilation/dashboard/authenticated-realm-deprecated.json} | 0 .../compilation/dashboard/authenticated-realm-web.json} | 0 .../compilation/dashboard/unauthenticated-get-chart.json} | 0 .../compilation/dashboard/unauthenticated.json} | 0 15 files changed, 1 insertion(+), 1 deletion(-) rename examples/{charts/authenticated-custom-jwt/markdown.json => .markdown/compilation/chart/authenticated-custom-jwt.json} (100%) rename examples/{charts/authenticated-google/markdown.json => .markdown/compilation/chart/authenticated-google.json} (100%) rename examples/{charts/authenticated-realm-deprecated/markdown.json => .markdown/compilation/chart/authenticated-realm-deprecated.json} (100%) rename examples/{charts/authenticated-realm-web/markdown.json => .markdown/compilation/chart/authenticated-realm-web.json} (100%) rename examples/{charts/click-events-basic/markdown.json => .markdown/compilation/chart/click-events-basic.json} (100%) rename examples/{charts/click-events-filtering/markdown.json => .markdown/compilation/chart/click-events-filtering.json} (100%) rename examples/{charts/programmatic-highlighting/markdown.json => .markdown/compilation/chart/programmatic-highlighting.json} (100%) rename examples/{charts/timeline-charts-example/markdown.json => .markdown/compilation/chart/timeline-charts.json} (100%) rename examples/{charts/unauthenticated/markdown.json => .markdown/compilation/chart/unauthenticated.json} (100%) rename examples/{dashboard/authenticated-custom-jwt/markdown.json => .markdown/compilation/dashboard/authenticated-custom-jwt.json} (98%) rename examples/{dashboard/authenticated-google/markdown.json => .markdown/compilation/dashboard/authenticated-google.json} (100%) rename examples/{dashboard/authenticated-realm-deprecated/markdown.json => .markdown/compilation/dashboard/authenticated-realm-deprecated.json} (100%) rename examples/{dashboard/authenticated-realm-web/markdown.json => .markdown/compilation/dashboard/authenticated-realm-web.json} (100%) rename examples/{dashboard/unauthenticated-get-chart/markdown.json => .markdown/compilation/dashboard/unauthenticated-get-chart.json} (100%) rename examples/{dashboard/unauthenticated/markdown.json => .markdown/compilation/dashboard/unauthenticated.json} (100%) diff --git a/examples/charts/authenticated-custom-jwt/markdown.json b/examples/.markdown/compilation/chart/authenticated-custom-jwt.json similarity index 100% rename from examples/charts/authenticated-custom-jwt/markdown.json rename to examples/.markdown/compilation/chart/authenticated-custom-jwt.json diff --git a/examples/charts/authenticated-google/markdown.json b/examples/.markdown/compilation/chart/authenticated-google.json similarity index 100% rename from examples/charts/authenticated-google/markdown.json rename to examples/.markdown/compilation/chart/authenticated-google.json diff --git a/examples/charts/authenticated-realm-deprecated/markdown.json b/examples/.markdown/compilation/chart/authenticated-realm-deprecated.json similarity index 100% rename from examples/charts/authenticated-realm-deprecated/markdown.json rename to examples/.markdown/compilation/chart/authenticated-realm-deprecated.json diff --git a/examples/charts/authenticated-realm-web/markdown.json b/examples/.markdown/compilation/chart/authenticated-realm-web.json similarity index 100% rename from examples/charts/authenticated-realm-web/markdown.json rename to examples/.markdown/compilation/chart/authenticated-realm-web.json diff --git a/examples/charts/click-events-basic/markdown.json b/examples/.markdown/compilation/chart/click-events-basic.json similarity index 100% rename from examples/charts/click-events-basic/markdown.json rename to examples/.markdown/compilation/chart/click-events-basic.json diff --git a/examples/charts/click-events-filtering/markdown.json b/examples/.markdown/compilation/chart/click-events-filtering.json similarity index 100% rename from examples/charts/click-events-filtering/markdown.json rename to examples/.markdown/compilation/chart/click-events-filtering.json diff --git a/examples/charts/programmatic-highlighting/markdown.json b/examples/.markdown/compilation/chart/programmatic-highlighting.json similarity index 100% rename from examples/charts/programmatic-highlighting/markdown.json rename to examples/.markdown/compilation/chart/programmatic-highlighting.json diff --git a/examples/charts/timeline-charts-example/markdown.json b/examples/.markdown/compilation/chart/timeline-charts.json similarity index 100% rename from examples/charts/timeline-charts-example/markdown.json rename to examples/.markdown/compilation/chart/timeline-charts.json diff --git a/examples/charts/unauthenticated/markdown.json b/examples/.markdown/compilation/chart/unauthenticated.json similarity index 100% rename from examples/charts/unauthenticated/markdown.json rename to examples/.markdown/compilation/chart/unauthenticated.json diff --git a/examples/dashboard/authenticated-custom-jwt/markdown.json b/examples/.markdown/compilation/dashboard/authenticated-custom-jwt.json similarity index 98% rename from examples/dashboard/authenticated-custom-jwt/markdown.json rename to examples/.markdown/compilation/dashboard/authenticated-custom-jwt.json index 8fef83a..8ffbe6e 100644 --- a/examples/dashboard/authenticated-custom-jwt/markdown.json +++ b/examples/.markdown/compilation/dashboard/authenticated-custom-jwt.json @@ -1,4 +1,4 @@ { "build" : "examples/dashboard/authenticated-custom-jwt/README.md", "files" : ["examples/.markdown/config/dashboard/authenticated-custom-jwt.md"] -} +} \ No newline at end of file diff --git a/examples/dashboard/authenticated-google/markdown.json b/examples/.markdown/compilation/dashboard/authenticated-google.json similarity index 100% rename from examples/dashboard/authenticated-google/markdown.json rename to examples/.markdown/compilation/dashboard/authenticated-google.json diff --git a/examples/dashboard/authenticated-realm-deprecated/markdown.json b/examples/.markdown/compilation/dashboard/authenticated-realm-deprecated.json similarity index 100% rename from examples/dashboard/authenticated-realm-deprecated/markdown.json rename to examples/.markdown/compilation/dashboard/authenticated-realm-deprecated.json diff --git a/examples/dashboard/authenticated-realm-web/markdown.json b/examples/.markdown/compilation/dashboard/authenticated-realm-web.json similarity index 100% rename from examples/dashboard/authenticated-realm-web/markdown.json rename to examples/.markdown/compilation/dashboard/authenticated-realm-web.json diff --git a/examples/dashboard/unauthenticated-get-chart/markdown.json b/examples/.markdown/compilation/dashboard/unauthenticated-get-chart.json similarity index 100% rename from examples/dashboard/unauthenticated-get-chart/markdown.json rename to examples/.markdown/compilation/dashboard/unauthenticated-get-chart.json diff --git a/examples/dashboard/unauthenticated/markdown.json b/examples/.markdown/compilation/dashboard/unauthenticated.json similarity index 100% rename from examples/dashboard/unauthenticated/markdown.json rename to examples/.markdown/compilation/dashboard/unauthenticated.json From 945518e6a943912d601591f423c808d6d5703255 Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Fri, 5 May 2023 15:38:20 +1000 Subject: [PATCH 5/7] refactor: clean up dashboard examples and partial docs refactor: clean up dashboard examples and partial docs --- .../config/dashboard/authenticated-custom-jwt.md | 10 +++++++--- .../config/dashboard/authenticated-google.md | 14 ++++++++++---- .../dashboard/authenticated-realm-deprecated.md | 14 +++++++++----- .../config/dashboard/authenticated-realm-web.md | 12 ++++++++---- .../dashboard/unauthenticated-get-chart.md | 12 ++++++++---- .../config/dashboard/unauthenticated.md | 12 ++++++++---- ...cated.md => authenticated-common-features.md} | 2 -- .../.markdown/docs/dashboard/background-title.md | 3 --- ...kground-desc.md => embed-sdk-introduction.md} | 2 ++ ...ted.md => unauthenticated-common-features.md} | 2 -- examples/.markdown/docs/quickstart-google.md | 16 ---------------- examples/.markdown/docs/quickstart.md | 4 +--- .../dashboard/authenticated-custom-jwt/README.md | 6 +++--- .../dashboard/authenticated-google/README.md | 6 +++--- .../authenticated-realm-deprecated/README.md | 10 +++++----- .../dashboard/authenticated-realm-web/README.md | 10 +++++----- .../unauthenticated-get-chart/README.md | 10 +++++----- examples/dashboard/unauthenticated/README.md | 10 +++++----- 18 files changed, 79 insertions(+), 76 deletions(-) rename examples/.markdown/docs/dashboard/{features-authenticated.md => authenticated-common-features.md} (89%) delete mode 100644 examples/.markdown/docs/dashboard/background-title.md rename examples/.markdown/docs/dashboard/{background-desc.md => embed-sdk-introduction.md} (62%) rename examples/.markdown/docs/dashboard/{features-unauthenticated.md => unauthenticated-common-features.md} (88%) delete mode 100644 examples/.markdown/docs/quickstart-google.md diff --git a/examples/.markdown/config/dashboard/authenticated-custom-jwt.md b/examples/.markdown/config/dashboard/authenticated-custom-jwt.md index ef85a8e..2a4b793 100644 --- a/examples/.markdown/config/dashboard/authenticated-custom-jwt.md +++ b/examples/.markdown/config/dashboard/authenticated-custom-jwt.md @@ -1,14 +1,18 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Custom JWT) -#include "examples/.markdown/docs/dashboard/background-title.md" +## Background -#include "examples/.markdown/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Custom JWT as the authentication provider. -#include "examples/.markdown/docs/dashboard/features-authenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/authenticated-common-features.md" - Custom JWT authentication via the `jsonwebtoken` package +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/dashboard/authenticated-google.md b/examples/.markdown/config/dashboard/authenticated-google.md index 83c319e..7ecb0ec 100644 --- a/examples/.markdown/config/dashboard/authenticated-google.md +++ b/examples/.markdown/config/dashboard/authenticated-google.md @@ -1,15 +1,21 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Google Auth) -#include "examples/.markdown/docs/dashboard/background-title.md" +## Background -#include "examples/.markdown/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Google as the authentication provider. -#include "examples/.markdown/docs/dashboard/features-authenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/authenticated-common-features.md" - Integrate Google Sign-In to authenticate users - You can follow [this tutorial](https://developers.google.com/identity/sign-in/web/sign-in) for more details -#include "examples/.markdown/docs/quickstart-google.md" +## Quickstart + +#include "examples/.markdown/docs/quickstart.md" Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. + +Logging in with any valid Google account will allow you to render the chart. #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md b/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md index 19a97d5..6800b45 100644 --- a/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md +++ b/examples/.markdown/config/dashboard/authenticated-realm-deprecated.md @@ -1,19 +1,23 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Realm) [DEPRECATED] -> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web) example. +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ -#include "examples/.markdown/docs/dashboard/background-title.md" +> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web) example. -🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ +## Background -#include "examples/.markdown/docs/dashboard/background-desc.md" +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -#include "examples/.markdown/docs/dashboard/features-authenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/authenticated-common-features.md" - App Services authentication - Data filtering by App Services User Role +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/realm-credentials.md" diff --git a/examples/.markdown/config/dashboard/authenticated-realm-web.md b/examples/.markdown/config/dashboard/authenticated-realm-web.md index 3fc720e..a8cf379 100644 --- a/examples/.markdown/config/dashboard/authenticated-realm-web.md +++ b/examples/.markdown/config/dashboard/authenticated-realm-web.md @@ -1,17 +1,21 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (App Services) -#include "examples/.markdown/docs/dashboard/background-title.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)_ -#include "examples/.markdown/docs/dashboard/background-desc.md" +## Background + +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -#include "examples/.markdown/docs/dashboard/features-authenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/authenticated-common-features.md" - Use App Services authentication - Data filtering by App Services User Role +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/realm-credentials.md" diff --git a/examples/.markdown/config/dashboard/unauthenticated-get-chart.md b/examples/.markdown/config/dashboard/unauthenticated-get-chart.md index 270528c..3398c12 100644 --- a/examples/.markdown/config/dashboard/unauthenticated-get-chart.md +++ b/examples/.markdown/config/dashboard/unauthenticated-get-chart.md @@ -1,20 +1,24 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard with `getChart` and `getAllCharts` methods -#include "examples/.markdown/docs/dashboard/background-title.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)_ -#include "examples/.markdown/docs/dashboard/background-desc.md" +## Background + +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application and retrieve all or just one chart on a dashboard. -#include "examples/.markdown/docs/dashboard/features-unauthenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/unauthenticated-common-features.md" - Manually refresh the dashboard (Refresh all charts within a dashboard) - Get all the charts that are rendered on a dashboard via the SDK - Manually refresh a chart instance that you have specified - Adding/Removing click event listeners to a specific chart instance that you have specified - Viewing the payload for a click event +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/dashboard/unauthenticated.md b/examples/.markdown/config/dashboard/unauthenticated.md index 3f8556c..76d41d1 100644 --- a/examples/.markdown/config/dashboard/unauthenticated.md +++ b/examples/.markdown/config/dashboard/unauthenticated.md @@ -1,20 +1,24 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard -#include "examples/.markdown/docs/dashboard/background-title.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)_ -#include "examples/.markdown/docs/dashboard/background-desc.md" +## Background + +#include "examples/.markdown/docs/dashboard/embed-sdk-introduction.md" This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application via the SDK. If you don't want to use the SDK but want an easier way to render your dashboard, you can use an [embedded iframe](https://dochub.mongodb.org/core/charts-embedding-dashboards-iframe) instead. -#include "examples/.markdown/docs/dashboard/features-unauthenticated.md" +## Highlighted features + +#include "examples/.markdown/docs/dashboard/unauthenticated-common-features.md" - Manually refresh the dashboard (Refresh all charts within a dashboard) - Set the whole dashboard theme to `'light'` or `'dark'` - Set background colour of all charts shown on the dashboard. Note that this will overwrite the colour that has been set by the current theme - Set the max data age of a chart on a dashboard - Set the height and width mode to `'fixed'` or `'scale'`. +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/docs/dashboard/features-authenticated.md b/examples/.markdown/docs/dashboard/authenticated-common-features.md similarity index 89% rename from examples/.markdown/docs/dashboard/features-authenticated.md rename to examples/.markdown/docs/dashboard/authenticated-common-features.md index 461e79d..8cffed1 100644 --- a/examples/.markdown/docs/dashboard/features-authenticated.md +++ b/examples/.markdown/docs/dashboard/authenticated-common-features.md @@ -1,7 +1,5 @@ _Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ -## Highlighted Features - In this example, you should be able to: - Render an authenticated embedded dashboard diff --git a/examples/.markdown/docs/dashboard/background-title.md b/examples/.markdown/docs/dashboard/background-title.md deleted file mode 100644 index 0864b9a..0000000 --- a/examples/.markdown/docs/dashboard/background-title.md +++ /dev/null @@ -1,3 +0,0 @@ -## Background - -📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ \ No newline at end of file diff --git a/examples/.markdown/docs/dashboard/background-desc.md b/examples/.markdown/docs/dashboard/embed-sdk-introduction.md similarity index 62% rename from examples/.markdown/docs/dashboard/background-desc.md rename to examples/.markdown/docs/dashboard/embed-sdk-introduction.md index c81bf13..2082b9e 100644 --- a/examples/.markdown/docs/dashboard/background-desc.md +++ b/examples/.markdown/docs/dashboard/embed-sdk-introduction.md @@ -1 +1,3 @@ +📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ + The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. \ No newline at end of file diff --git a/examples/.markdown/docs/dashboard/features-unauthenticated.md b/examples/.markdown/docs/dashboard/unauthenticated-common-features.md similarity index 88% rename from examples/.markdown/docs/dashboard/features-unauthenticated.md rename to examples/.markdown/docs/dashboard/unauthenticated-common-features.md index d2a6806..41202a0 100644 --- a/examples/.markdown/docs/dashboard/features-unauthenticated.md +++ b/examples/.markdown/docs/dashboard/unauthenticated-common-features.md @@ -1,7 +1,5 @@ _Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ -## Highlighted Features - In this example, you should be able to: - Render an unauthenticated embedded dashboard \ No newline at end of file diff --git a/examples/.markdown/docs/quickstart-google.md b/examples/.markdown/docs/quickstart-google.md deleted file mode 100644 index c6fb854..0000000 --- a/examples/.markdown/docs/quickstart-google.md +++ /dev/null @@ -1,16 +0,0 @@ -## 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`. On some operating systems, Node is available as the `nodejs` binary instead. - -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. This will utilise parcel.js. - - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is - -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. - -Logging in with any valid Google account will allow you to render the chart. \ No newline at end of file diff --git a/examples/.markdown/docs/quickstart.md b/examples/.markdown/docs/quickstart.md index b3d19b5..f67abf8 100644 --- a/examples/.markdown/docs/quickstart.md +++ b/examples/.markdown/docs/quickstart.md @@ -1,5 +1,3 @@ -## 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`. On some operating systems, Node is available as the `nodejs` binary instead. @@ -11,4 +9,4 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. \ No newline at end of file +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. \ No newline at end of file diff --git a/examples/dashboard/authenticated-custom-jwt/README.md b/examples/dashboard/authenticated-custom-jwt/README.md index 74bb0ac..9c6fd8f 100644 --- a/examples/dashboard/authenticated-custom-jwt/README.md +++ b/examples/dashboard/authenticated-custom-jwt/README.md @@ -8,9 +8,9 @@ The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard dire This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Custom JWT as the authentication provider. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -31,6 +31,6 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Happy Charting! 🚀 📈 diff --git a/examples/dashboard/authenticated-google/README.md b/examples/dashboard/authenticated-google/README.md index 2ec449b..b9215b3 100644 --- a/examples/dashboard/authenticated-google/README.md +++ b/examples/dashboard/authenticated-google/README.md @@ -8,9 +8,9 @@ The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard dire This example, demonstrates how you might render an authenticated dashboard embedded onto your application using Google as the authentication provider. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -32,7 +32,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. Logging in with any valid Google account will allow you to render the chart. diff --git a/examples/dashboard/authenticated-realm-deprecated/README.md b/examples/dashboard/authenticated-realm-deprecated/README.md index da4825d..9ecf4c2 100644 --- a/examples/dashboard/authenticated-realm-deprecated/README.md +++ b/examples/dashboard/authenticated-realm-deprecated/README.md @@ -1,20 +1,20 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (Realm) [DEPRECATED] +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ + > ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web) example. ## Background 📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ -🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-deprecated)_ - The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -36,7 +36,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. The two hard coded credentials used in this demo are: diff --git a/examples/dashboard/authenticated-realm-web/README.md b/examples/dashboard/authenticated-realm-web/README.md index c3653de..35e420e 100644 --- a/examples/dashboard/authenticated-realm-web/README.md +++ b/examples/dashboard/authenticated-realm-web/README.md @@ -1,18 +1,18 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Dashboard (App Services) +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)_ + ## Background 📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ -🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/authenticated-realm-web)_ - The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. This example, demonstrates how you might render an authenticated dashboard embedded onto your application using App Services as the authentication provider. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -34,7 +34,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. The two hard coded credentials used in this demo are: diff --git a/examples/dashboard/unauthenticated-get-chart/README.md b/examples/dashboard/unauthenticated-get-chart/README.md index d95bbea..a078e45 100644 --- a/examples/dashboard/unauthenticated-get-chart/README.md +++ b/examples/dashboard/unauthenticated-get-chart/README.md @@ -1,18 +1,18 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard with `getChart` and `getAllCharts` methods +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)_ + ## Background 📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ -🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated-get-chart)_ - The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application and retrieve all or just one chart on a dashboard. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -36,6 +36,6 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Happy Charting! 🚀 📈 diff --git a/examples/dashboard/unauthenticated/README.md b/examples/dashboard/unauthenticated/README.md index 9a8a421..2ee0d0c 100644 --- a/examples/dashboard/unauthenticated/README.md +++ b/examples/dashboard/unauthenticated/README.md @@ -1,18 +1,18 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Dashboard +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)_ + ## Background 📄 _[See the MongoDB Charts Embedding Docs for more details](https://dochub.mongodb.org/core/charts-embedding-dashboards)_ -🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/dashboard/unauthenticated)_ - The MongoDB Charts Embedding SDK allows you to embed a Chart or a Dashboard directly into your application. Just like embedded charts, you can embed a dashboard via unauthenticated or an authenticated method. This example, demonstrates how you might render an unauthenticated dashboard embedded onto your application via the SDK. If you don't want to use the SDK but want an easier way to render your dashboard, you can use an [embedded iframe](https://dochub.mongodb.org/core/charts-embedding-dashboards-iframe) instead. -_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ +## Highlighted features -## Highlighted Features +_Note that this is not an exhaustive list of all the features for the Dashboard Embedding SDK._ In this example, you should be able to: @@ -36,6 +36,6 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Happy Charting! 🚀 📈 From ccf7cb6f8f320100fa3fcef5226365bd52b88c86 Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Mon, 8 May 2023 17:01:32 +1000 Subject: [PATCH 6/7] refactor: clean up chart examples and partial docs --- .../config/chart/authenticated-custom-jwt.md | 32 ++++++++------- .../config/chart/authenticated-google.md | 33 ++++++++------- .../chart/authenticated-realm-deprecated.md | 40 +++++++++++-------- .../config/chart/authenticated-realm-web.md | 34 +++++++++------- .../config/chart/click-events-basic.md | 28 ++++++++----- .../config/chart/click-events-filtering.md | 26 +++++++----- .../config/chart/programmatic-highlighting.md | 21 +++++----- .../config/chart/timeline-charts-example.md | 26 +++++------- .../.markdown/config/chart/unauthenticated.md | 25 +++++++----- ...ed.md => authenticated-common-features.md} | 0 .../docs/chart/background/desc-simple.md | 1 - .../docs/chart/background/start-block.md | 3 -- .../create-authentication-provider-realm.md | 0 .../create-chart-to-embed.md | 2 - .../enable-authenticated-access.md | 0 .../enable-unauthenticated-access.md | 0 ...-events.md => click-events-description.md} | 0 ...-extended.md => embed-sdk-introduction.md} | 4 ++ ...ext-steps.md => next-steps-common-text.md} | 2 - ...-app.md => realm-app-preparation-steps.md} | 2 - .../chart/using-own-data-general-steps.md | 4 ++ .../docs/chart/using-own-data/end-block.md | 4 -- .../chart/using-own-data/replace-block.md | 2 - .../docs/chart/using-own-data/start-block.md | 3 -- .../charts/authenticated-custom-jwt/README.md | 15 +++---- .../charts/authenticated-google/README.md | 13 +++--- .../authenticated-realm-deprecated/README.md | 18 ++++----- .../charts/authenticated-realm-web/README.md | 16 ++++---- examples/charts/click-events-basic/README.md | 19 +++++---- .../charts/click-events-filtering/README.md | 21 +++++----- .../programmatic-highlighting/README.md | 18 ++++----- .../charts/timeline-charts-example/README.md | 23 +++++++---- examples/charts/unauthenticated/README.md | 16 +++----- 33 files changed, 232 insertions(+), 219 deletions(-) rename examples/.markdown/docs/chart/{background/features-authenticated.md => authenticated-common-features.md} (100%) delete mode 100644 examples/.markdown/docs/chart/background/desc-simple.md delete mode 100644 examples/.markdown/docs/chart/background/start-block.md rename examples/.markdown/docs/chart/{preparing-chart-for-embedding => chart-preparation-steps}/create-authentication-provider-realm.md (100%) rename examples/.markdown/docs/chart/{preparing-chart-for-embedding => chart-preparation-steps}/create-chart-to-embed.md (89%) rename examples/.markdown/docs/chart/{preparing-chart-for-embedding => chart-preparation-steps}/enable-authenticated-access.md (100%) rename examples/.markdown/docs/chart/{preparing-chart-for-embedding => chart-preparation-steps}/enable-unauthenticated-access.md (100%) rename examples/.markdown/docs/chart/{background/desc-click-events.md => click-events-description.md} (100%) rename examples/.markdown/docs/chart/{background/desc-extended.md => embed-sdk-introduction.md} (54%) rename examples/.markdown/docs/chart/{next-steps.md => next-steps-common-text.md} (91%) rename examples/.markdown/docs/chart/{preparing-realm-app.md => realm-app-preparation-steps.md} (97%) create mode 100644 examples/.markdown/docs/chart/using-own-data-general-steps.md delete mode 100644 examples/.markdown/docs/chart/using-own-data/end-block.md delete mode 100644 examples/.markdown/docs/chart/using-own-data/replace-block.md delete mode 100644 examples/.markdown/docs/chart/using-own-data/start-block.md diff --git a/examples/.markdown/config/chart/authenticated-custom-jwt.md b/examples/.markdown/config/chart/authenticated-custom-jwt.md index 307a2d4..ef0e49f 100644 --- a/examples/.markdown/config/chart/authenticated-custom-jwt.md +++ b/examples/.markdown/config/chart/authenticated-custom-jwt.md @@ -1,39 +1,41 @@ # MongoDB Charts Embedding Example - Authenticated Embedded Chart -#include "examples/.markdown/docs/chart/background/start-block.md" +## Background -#include "examples/.markdown/docs/chart/background/desc-simple.md" - -#include "examples/.markdown/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via a custom jwt authentication. The sample app has its own authentication and token issuing logic. You may want to follow a similar approach if you are not integrating with an external authentication mechanism or your authentication is not based on JWTs. Alternatively, if you are using an existing authentication mechanism that issues JWTs, you can use those tokens to authenticate your chart rendering requests after configuring a Charts authentication provider that can validate the JWT. -#include "examples/.markdown/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/authenticated-common-features.md" - 🔑 Custom JWT authentication via `jsonwebtoken` -#include "examples/.markdown/docs/quickstart.md" +## Quickstart + +#include "examples/.markdown/docs/quickstart.md" Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. + +## Preparing your Chart for Embedding -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md" - Name: `Custom JWT` _Note, this is only for your convenience and can be named anything_ - Provider: `Custom JSON Web Token` - Signing Algorithm: `HS256` _Note, this is the default signing algorithm for the `jsonwebtoken` library and many others_ - Signing Key: `topsecret` _Note, this key must correlate with the key found in `config.js`_ -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" -#include "examples/.markdown/docs/chart/using-own-data/end-block.md" -Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. +## Running this Sample with your data + +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" The hard coded credentials used in this demo are: -- Username : `admin` +- Username: `admin` - Password: `password` -#include "examples/.markdown/docs/chart/next-steps.md" +## Next Steps + +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Change the login logic to adapt to your project's security workflow. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. diff --git a/examples/.markdown/config/chart/authenticated-google.md b/examples/.markdown/config/chart/authenticated-google.md index c55a652..19ca729 100644 --- a/examples/.markdown/config/chart/authenticated-google.md +++ b/examples/.markdown/config/chart/authenticated-google.md @@ -1,17 +1,19 @@ # MongoDB Charts Embedding Example - Google Authentication -#include "examples/.markdown/docs/chart/background/start-block.md" +## Background -#include "examples/.markdown/docs/chart/background/desc-simple.md" - -#include "examples/.markdown/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Google** as an authentication provider. The sample app is already set up to authenticate with a Google Client ID hosted by the Charts Development team. -#include "examples/.markdown/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/authenticated-common-features.md" - 𝗚 Google authentication -#include "examples/.markdown/docs/quickstart-google.md" +## Quickstart + +#include "examples/.markdown/docs/quickstart.md" Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. + +Logging in with any valid Google account will allow you to render the chart. ## Getting a Google Client ID @@ -19,22 +21,25 @@ This sample is pre-configured with a MongoDB-owned test Client ID. To use Google Steps on how to configure a Project with Google and attain a Google Client ID can be found [here](https://developers.google.com/identity/sign-in/web/sign-in). You'll need to set the Origin and Redirect URIs to whatever you use in your application. In our sample, that is http://localhost:3000. -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +## Preparing your Chart for Embedding -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" + +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md" - Name: `Google` _Note, this is only for your convenience and can be named anything you want here_ - Provider: `Google` - Google Client ID: _See above for - This should be the entire string `.apps.googleusercontent.com` -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the `index.html` file -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - - **Optional** - - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) +## Running this Sample with your data + +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" +- **Optional:** Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) + +## Next Steps -#include "examples/.markdown/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Use Incognito Mode to see a pure login experience - Consider how you want to secure your data with the Google Embedding Provider. Anybody can create a Google account. Consider using Charts Injected Filters to make your application more secure. diff --git a/examples/.markdown/config/chart/authenticated-realm-deprecated.md b/examples/.markdown/config/chart/authenticated-realm-deprecated.md index 3584b89..0ee97ec 100644 --- a/examples/.markdown/config/chart/authenticated-realm-deprecated.md +++ b/examples/.markdown/config/chart/authenticated-realm-deprecated.md @@ -1,42 +1,48 @@ # MongoDB Charts Embedding Example - App Services Authentication [DEPRECATED] -> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example. - -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-deprecated)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +> ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example. + +## Background -#include "examples/.markdown/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! -#include "examples/.markdown/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/authenticated-common-features.md" - 🔑 App Services authentication - 🙋‍♂️ Data filtering by App Services User Role +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/realm-credentials.md" -#include "examples/.markdown/docs/chart/preparing-realm-app.md" +## Authenticate with your App Services App + +#include "examples/.markdown/docs/chart/realm-app-preparation-steps.md" + +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" + +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +## Running this Sample with your data -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" +- Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) +- Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) - - Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - - Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` +## Next Steps -#include "examples/.markdown/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. diff --git a/examples/.markdown/config/chart/authenticated-realm-web.md b/examples/.markdown/config/chart/authenticated-realm-web.md index 0002399..24b84bb 100644 --- a/examples/.markdown/config/chart/authenticated-realm-web.md +++ b/examples/.markdown/config/chart/authenticated-realm-web.md @@ -1,39 +1,45 @@ # MongoDB Charts Embedding Example - App Services Authentication -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +## Background -#include "examples/.markdown/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" This sample shows how to use the JavaScript Embedding SDK to render **authenticated** embedded charts, specifically via configuring **Atlas App Services** as an authentication provider. The sample app is already set up to authenticate with an App Services application hosted by the Charts Development team. This sample also demonstrates data filtering by role, thanks to the App Services Rules system. See more details [here](https://www.mongodb.com/docs/atlas/app-services/mongodb/define-roles-and-permissions/). Simply login with either `australianEmployee@mongodb.com` or `canadianEmployee@mongodb.com`, and take note of the different results! -#include "examples/.markdown/docs/chart/background/features-authenticated.md" +#include "examples/.markdown/docs/chart/authenticated-common-features.md" - 🔑 App Services authentication - 🙋‍♂️ Data filtering by App Services User Role +## Quickstart + #include "examples/.markdown/docs/quickstart.md" #include "examples/.markdown/docs/realm-credentials.md" -#include "examples/.markdown/docs/chart/preparing-realm-app.md" +## Authenticate with your App Services App + +#include "examples/.markdown/docs/chart/realm-app-preparation-steps.md" + +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" + +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md" +## Running this Sample with your data -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md" +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" +- Replace the Realm App ID string. `Realm.App({id: ''})` -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) - - Replace the Realm App ID string. `Realm.App({id: ''})` -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" +## Next Steps -#include "examples/.markdown/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Play with App Services Rules system, and change how different accounts see your Chart. - Think whether an authenticated chart is the feature you're after. If you're simply looking for a way to show off your data, [unauthenticated embedding](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated) simplifies the workflow even further. diff --git a/examples/.markdown/config/chart/click-events-basic.md b/examples/.markdown/config/chart/click-events-basic.md index ed91d76..11abdbf 100644 --- a/examples/.markdown/config/chart/click-events-basic.md +++ b/examples/.markdown/config/chart/click-events-basic.md @@ -1,12 +1,13 @@ # MongoDB Charts Embedding Example - Click Events -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +## Background + +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" + +#include "examples/.markdown/docs/chart/click-events-description.md" -#include "examples/.markdown/docs/chart/background/desc-click-events.md" This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). #### The features included in this demo are as follows: @@ -70,18 +71,23 @@ chart.setHighlight(payload.selectionFilter) More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). +## Quickstart + #include "examples/.markdown/docs/quickstart.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" + +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md" + +## Running this Sample with your data -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" -#include "examples/.markdown/docs/chart/using-own-data/end-block.md" +## Next Steps -#include "examples/.markdown/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Embed multiple charts, and use the click events to filter one chart based on the click events detected on the other. This is demonstrated in our [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering) example. diff --git a/examples/.markdown/config/chart/click-events-filtering.md b/examples/.markdown/config/chart/click-events-filtering.md index f2a7faf..a06a0ca 100644 --- a/examples/.markdown/config/chart/click-events-filtering.md +++ b/examples/.markdown/config/chart/click-events-filtering.md @@ -1,12 +1,13 @@ # MongoDB Charts Embedding Example - Interactive Filtering -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +## Background + +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" + +#include "examples/.markdown/docs/chart/click-events-description.md" -#include "examples/.markdown/docs/chart/background/desc-click-events.md" This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -24,20 +25,23 @@ chart.addEventListener("click", callback, options); - Highlighting the clicked element on the first chart using `setHighlight` - Filtering a second chart using the `setFilter` method +## Quickstart + #include "examples/.markdown/docs/quickstart.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md" 11. In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample Movies dataset filters on `year` and `genres`. Furthermore, the filter related code in `src/index.js` will need to be updated to conform to the filter query you wish to apply. -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart -#include "examples/.markdown/docs/chart/using-own-data/end-block.md" +## Running this Sample with your data + +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" +- Replace the filter in the `addEventListener` callback with a suitable filter document for your chart #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/chart/programmatic-highlighting.md b/examples/.markdown/config/chart/programmatic-highlighting.md index 4c7ef4f..68bda5a 100644 --- a/examples/.markdown/config/chart/programmatic-highlighting.md +++ b/examples/.markdown/config/chart/programmatic-highlighting.md @@ -1,10 +1,10 @@ # MongoDB Charts Embedding Example - Programmatic Highlighting -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/programmatic-highlighting)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +## Background + +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" When you embed charts using the Embedding SDK, you are able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). @@ -22,15 +22,18 @@ chart.setHighlight({ field: { $expr }}); - Showing more complicated MQL filters with the drop down - Allow custom filtering expressions by editing the textarea +## Quickstart + #include "examples/.markdown/docs/quickstart.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" + +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +## Running this Sample with your data -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" -#include "examples/.markdown/docs/chart/using-own-data/end-block.md" +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/chart/timeline-charts-example.md b/examples/.markdown/config/chart/timeline-charts-example.md index b9e814e..3b0b866 100644 --- a/examples/.markdown/config/chart/timeline-charts-example.md +++ b/examples/.markdown/config/chart/timeline-charts-example.md @@ -1,9 +1,11 @@ # MongoDB Charts Embedding Example - Timeline Chart -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[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)_ +## Background + +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" + 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. @@ -27,23 +29,17 @@ Doing timeline charts is not really a feature of the embedding SDK but it shows ## 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. +#include "examples/.markdown/docs/quickstart.md" -3. Run `npm install` to install the package dependencies. +## Preparing your Chart for Embedding -4. Run `npm start` to start the application. It will open directly in the browser at this address `http://localhost:3000`. +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md" Ensure you have whitelisted all the fields you want to use filters for. -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" Ensure you have whitelisted all the fields you want to use filters for. +## Running this Sample with your data -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _Dashboard.jsx_ file (`src/Dashboard.jsx`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" - - 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. +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" +- 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. #include "examples/.markdown/docs/footer.md" \ No newline at end of file diff --git a/examples/.markdown/config/chart/unauthenticated.md b/examples/.markdown/config/chart/unauthenticated.md index 39c6316..f18e304 100644 --- a/examples/.markdown/config/chart/unauthenticated.md +++ b/examples/.markdown/config/chart/unauthenticated.md @@ -1,12 +1,10 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Chart -#include "examples/.markdown/docs/chart/background/start-block.md" - 🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated)_ -#include "examples/.markdown/docs/chart/background/desc-simple.md" +## Background -#include "examples/.markdown/docs/chart/background/desc-extended.md" +#include "examples/.markdown/docs/chart/embed-sdk-introduction.md" This sample shows how to use the JavaScript Embedding SDK to render unauthenticated embedded charts, along with showing off the various ways your application can interact with charts using the SDK. @@ -22,11 +20,15 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica - Note, filtering on a chart requires setting up white listed fields in MongoDB Charts. We have done this for our sample data. - Get the current filter on a chart +## Quickstart + #include "examples/.markdown/docs/quickstart.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md" +## Preparing your Chart for Embedding + +#include "examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md" -#include "examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md" +#include "examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md" 11. **Optional** In the same menu, note the **User Specified Filters** option. If you wish to try out filtering on your own dataset, you will need to whitelist a field by which to filter on. For example, our sample AirBnB dataset filters on `address.country`. @@ -35,12 +37,13 @@ This sample shows how to use the JavaScript Embedding SDK to render unauthentica - Update the query **field** in `src/index.js` - Update the query **values** in `index.html` -#include "examples/.markdown/docs/chart/using-own-data/start-block.md" - - Open the _index.js_ file (`src/index.js`) -#include "examples/.markdown/docs/chart/using-own-data/replace-block.md" -#include "examples/.markdown/docs/chart/using-own-data/end-block.md" +## Running this Sample with your data + +#include "examples/.markdown/docs/chart/using-own-data-general-steps.md" + +## Next Steps -#include "examples/.markdown/docs/chart/next-steps.md" +#include "examples/.markdown/docs/chart/next-steps-common-text.md" - Think whether an unauthenticated chart is the feature you're after. [Embedding iframes](https://docs.mongodb.com/charts/master/embedded-chart-options/) from Charts is a great way to showcase your data if you don't need the user to interact with the chart. - Consider the data you're making available, and the queries you're allowing. If the data is sensitive and you need to ensure the charts can only be accessed by authorized people, you should look at using authenticated embedding. diff --git a/examples/.markdown/docs/chart/background/features-authenticated.md b/examples/.markdown/docs/chart/authenticated-common-features.md similarity index 100% rename from examples/.markdown/docs/chart/background/features-authenticated.md rename to examples/.markdown/docs/chart/authenticated-common-features.md diff --git a/examples/.markdown/docs/chart/background/desc-simple.md b/examples/.markdown/docs/chart/background/desc-simple.md deleted file mode 100644 index 00e7ea9..0000000 --- a/examples/.markdown/docs/chart/background/desc-simple.md +++ /dev/null @@ -1 +0,0 @@ -MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. \ No newline at end of file diff --git a/examples/.markdown/docs/chart/background/start-block.md b/examples/.markdown/docs/chart/background/start-block.md deleted file mode 100644 index f61b592..0000000 --- a/examples/.markdown/docs/chart/background/start-block.md +++ /dev/null @@ -1,3 +0,0 @@ -## Background - -📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_ \ No newline at end of file diff --git a/examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md b/examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md similarity index 100% rename from examples/.markdown/docs/chart/preparing-chart-for-embedding/create-authentication-provider-realm.md rename to examples/.markdown/docs/chart/chart-preparation-steps/create-authentication-provider-realm.md diff --git a/examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md b/examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md similarity index 89% rename from examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md rename to examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md index 062e87e..a780ddd 100644 --- a/examples/.markdown/docs/chart/preparing-chart-for-embedding/create-chart-to-embed.md +++ b/examples/.markdown/docs/chart/chart-preparation-steps/create-chart-to-embed.md @@ -1,5 +1,3 @@ -## Preparing your Chart for Embedding - This sample is preconfigured to render a specific chart. You can run the sample as-is, or you can modify it to render your own chart by completing the following steps: ### Create chart to embed diff --git a/examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md b/examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md similarity index 100% rename from examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-authenticated-access.md rename to examples/.markdown/docs/chart/chart-preparation-steps/enable-authenticated-access.md diff --git a/examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md b/examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md similarity index 100% rename from examples/.markdown/docs/chart/preparing-chart-for-embedding/enable-unauthenticated-access.md rename to examples/.markdown/docs/chart/chart-preparation-steps/enable-unauthenticated-access.md diff --git a/examples/.markdown/docs/chart/background/desc-click-events.md b/examples/.markdown/docs/chart/click-events-description.md similarity index 100% rename from examples/.markdown/docs/chart/background/desc-click-events.md rename to examples/.markdown/docs/chart/click-events-description.md diff --git a/examples/.markdown/docs/chart/background/desc-extended.md b/examples/.markdown/docs/chart/embed-sdk-introduction.md similarity index 54% rename from examples/.markdown/docs/chart/background/desc-extended.md rename to examples/.markdown/docs/chart/embed-sdk-introduction.md index ed28ba0..c9228cf 100644 --- a/examples/.markdown/docs/chart/background/desc-extended.md +++ b/examples/.markdown/docs/chart/embed-sdk-introduction.md @@ -1 +1,5 @@ +📄 _[See the MongoDB Charts Embedding Docs for more details](https://docs.mongodb.com/charts/saas/embedding-charts/)_ + +MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. + 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 access to the page where the chart is embedded 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). \ No newline at end of file diff --git a/examples/.markdown/docs/chart/next-steps.md b/examples/.markdown/docs/chart/next-steps-common-text.md similarity index 91% rename from examples/.markdown/docs/chart/next-steps.md rename to examples/.markdown/docs/chart/next-steps-common-text.md index 38e34f1..82fc10e 100644 --- a/examples/.markdown/docs/chart/next-steps.md +++ b/examples/.markdown/docs/chart/next-steps-common-text.md @@ -1,5 +1,3 @@ -## Next Steps - Once you gain an understanding of the API, consider the following - Take on the optional steps to prepare and manipulate your own data source rather than the sample. \ No newline at end of file diff --git a/examples/.markdown/docs/chart/preparing-realm-app.md b/examples/.markdown/docs/chart/realm-app-preparation-steps.md similarity index 97% rename from examples/.markdown/docs/chart/preparing-realm-app.md rename to examples/.markdown/docs/chart/realm-app-preparation-steps.md index 6ffb935..72e44e6 100644 --- a/examples/.markdown/docs/chart/preparing-realm-app.md +++ b/examples/.markdown/docs/chart/realm-app-preparation-steps.md @@ -1,5 +1,3 @@ -## Authenticate with your App Services App - This sample is preconfigured to render, and more specifically, **authenticate** users who are verified to view a specific chart. You can run the sample as-is, or you can modify it to render and authenticate your own chart by completing the following steps: ### Prepare your App Services App diff --git a/examples/.markdown/docs/chart/using-own-data-general-steps.md b/examples/.markdown/docs/chart/using-own-data-general-steps.md new file mode 100644 index 0000000..a293c10 --- /dev/null +++ b/examples/.markdown/docs/chart/using-own-data-general-steps.md @@ -0,0 +1,4 @@ +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. + +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) \ No newline at end of file diff --git a/examples/.markdown/docs/chart/using-own-data/end-block.md b/examples/.markdown/docs/chart/using-own-data/end-block.md deleted file mode 100644 index 20ed12a..0000000 --- a/examples/.markdown/docs/chart/using-own-data/end-block.md +++ /dev/null @@ -1,4 +0,0 @@ -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. - -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. \ No newline at end of file diff --git a/examples/.markdown/docs/chart/using-own-data/replace-block.md b/examples/.markdown/docs/chart/using-own-data/replace-block.md deleted file mode 100644 index 07f3466..0000000 --- a/examples/.markdown/docs/chart/using-own-data/replace-block.md +++ /dev/null @@ -1,2 +0,0 @@ - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) \ No newline at end of file diff --git a/examples/.markdown/docs/chart/using-own-data/start-block.md b/examples/.markdown/docs/chart/using-own-data/start-block.md deleted file mode 100644 index d72f1bc..0000000 --- a/examples/.markdown/docs/chart/using-own-data/start-block.md +++ /dev/null @@ -1,3 +0,0 @@ -## 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, \ No newline at end of file diff --git a/examples/charts/authenticated-custom-jwt/README.md b/examples/charts/authenticated-custom-jwt/README.md index ae70dcb..b9446a8 100644 --- a/examples/charts/authenticated-custom-jwt/README.md +++ b/examples/charts/authenticated-custom-jwt/README.md @@ -29,7 +29,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. ## Preparing your Chart for Embedding @@ -74,19 +74,14 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. -Along with this, a local jwt authentication server will be spun up on `http://localhost:8000`. +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) The hard coded credentials used in this demo are: -- Username : `admin` +- Username: `admin` - Password: `password` ## Next Steps diff --git a/examples/charts/authenticated-google/README.md b/examples/charts/authenticated-google/README.md index fe8935c..1c70836 100755 --- a/examples/charts/authenticated-google/README.md +++ b/examples/charts/authenticated-google/README.md @@ -29,7 +29,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:3000` in the url bar to see the sample. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. Use Incognito mode to see the full Google login flow rather then signing in with your Chrome Google account. Logging in with any valid Google account will allow you to render the chart. @@ -82,12 +82,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 `index.html` file - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - **Optional** - - Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. + +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- **Optional:** Replace the `` with your own Google Client ID. (look for "\~REPLACE\~" in the comments) ## Next Steps diff --git a/examples/charts/authenticated-realm-deprecated/README.md b/examples/charts/authenticated-realm-deprecated/README.md index fd342b0..78b2d69 100644 --- a/examples/charts/authenticated-realm-deprecated/README.md +++ b/examples/charts/authenticated-realm-deprecated/README.md @@ -1,13 +1,13 @@ # MongoDB Charts Embedding Example - App Services Authentication [DEPRECATED] +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-deprecated)_ + > ## :rotating_light: The [`mongodb-stitch-browser-sdk`](https://www.npmjs.com/package/mongodb-stitch-browser-sdk) package is now deprecated. Please use [`realm-web`](https://www.npmjs.com/package/realm-web) instead and follow the [authenticated-realm-web](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web) example. ## Background 📄 _[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/authenticated-realm-deprecated)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. 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 access to the page where the chart is embedded 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). @@ -36,7 +36,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. The two hard coded credentials used in this demo are: @@ -141,12 +141,12 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. + +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the Realm `AppClientID` string with the base URL for your App Services app (look for "\~REPLACE\~" in the comments) +- Replace the Stitch App ID in the Stitch Constructor, and remove the base URL. `Stitch.initializeAppClient('')` ## Next Steps diff --git a/examples/charts/authenticated-realm-web/README.md b/examples/charts/authenticated-realm-web/README.md index 9ede557..ddcf45b 100644 --- a/examples/charts/authenticated-realm-web/README.md +++ b/examples/charts/authenticated-realm-web/README.md @@ -1,11 +1,11 @@ # MongoDB Charts Embedding Example - App Services Authentication +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/authenticated-realm-web)_ + ## Background 📄 _[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/authenticated-realm-web)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. 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 access to the page where the chart is embedded 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). @@ -34,7 +34,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. The two hard coded credentials used in this demo are: @@ -139,11 +139,11 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Realm App ID string. `Realm.App({id: ''})` - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. + +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the Realm App ID string. `Realm.App({id: ''})` ## Next Steps diff --git a/examples/charts/click-events-basic/README.md b/examples/charts/click-events-basic/README.md index 1c438a8..1acf02d 100644 --- a/examples/charts/click-events-basic/README.md +++ b/examples/charts/click-events-basic/README.md @@ -1,14 +1,17 @@ # MongoDB Charts Embedding Example - Click Events +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic)_ + ## Background 📄 _[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/click-events-basic)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. +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 access to the page where the chart is embedded 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). + When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. + This sample shows the basics of how to subscribe to and handle click events, including extracting relevant details about the chart elmement that was clicked. You can also see a more advanced demo that demonstrates [interactive filtering](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering). #### The features included in this demo are as follows: @@ -85,7 +88,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. ## Preparing your Chart for Embedding @@ -119,14 +122,10 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) ## Next Steps diff --git a/examples/charts/click-events-filtering/README.md b/examples/charts/click-events-filtering/README.md index 4676051..352192f 100644 --- a/examples/charts/click-events-filtering/README.md +++ b/examples/charts/click-events-filtering/README.md @@ -1,14 +1,17 @@ # MongoDB Charts Embedding Example - Interactive Filtering +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-filtering)_ + ## Background 📄 _[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/click-events-filtering)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. +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 access to the page where the chart is embedded 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). + When you embed charts using the Embedding SDK, you are able to subscribe to events that show when a user clicked on a chart, and the details of the element on which they clicked. This feature can be used to build interactive charts. + This sample shows how to implement interactive filtering, whereby clicks on one chart are used to generate filters which are applied to a second chart. To learn the basics of chart click events, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. More information regarding how to handle click events can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -39,7 +42,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. ## Preparing your Chart for Embedding @@ -77,14 +80,10 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the filter in the `addEventListener` callback with a suitable filter document for your chart -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the filter in the `addEventListener` callback with a suitable filter document for your chart Happy Charting! 🚀 📈 diff --git a/examples/charts/programmatic-highlighting/README.md b/examples/charts/programmatic-highlighting/README.md index 6ef3420..2c30241 100644 --- a/examples/charts/programmatic-highlighting/README.md +++ b/examples/charts/programmatic-highlighting/README.md @@ -1,13 +1,15 @@ # MongoDB Charts Embedding Example - Programmatic Highlighting +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/programmatic-highlighting)_ + ## Background 📄 _[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/programmatic-highlighting)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. +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 access to the page where the chart is embedded 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). + When you embed charts using the Embedding SDK, you are able to customise the embedded charts by setting attributes. One of these is `setHighlight()`, which lets you emphasise part of your charts to attract attention. This feature adds a layer of richness to interactive charts, and can be used to show relationships between charts. To learn the basics of interactive charts, see the [click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/charts/click-events-basic) sample. To learn about other properties you can use to customise your charts, please refer to the [API documentation](https://www.npmjs.com/package/@mongodb-js/charts-embed-dom). More information regarding charts highlighting can be found in the [Charts documentation](https://docs.mongodb.com/charts/saas/handle-click-events/). @@ -37,7 +39,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. ## Preparing your Chart for Embedding @@ -71,13 +73,9 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) Happy Charting! 🚀 📈 diff --git a/examples/charts/timeline-charts-example/README.md b/examples/charts/timeline-charts-example/README.md index cfba3b9..48aee70 100644 --- a/examples/charts/timeline-charts-example/README.md +++ b/examples/charts/timeline-charts-example/README.md @@ -1,10 +1,14 @@ # MongoDB Charts Embedding Example - Timeline Chart +🎮 _[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)_ + ## Background 📄 _[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)_ +MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. + +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 access to the page where the chart is embedded 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). The example code in this directory is building a small react app, implementing a chart timeline using the Charts Embedding SDK. @@ -31,13 +35,16 @@ Doing timeline charts is not really a feature of the embedding SDK but it shows _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`. +1. Ensure you have Node installed. You can confirm with `node --version`. On some operating systems, Node is available as the `nodejs` binary instead. 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`. +4. Run `npm start` to start the application. This will utilise parcel.js. + - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is + +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. ## Preparing your Chart for Embedding @@ -71,10 +78,10 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (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. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. + +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (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. Happy Charting! 🚀 📈 diff --git a/examples/charts/unauthenticated/README.md b/examples/charts/unauthenticated/README.md index eb5ebbe..0925a6c 100644 --- a/examples/charts/unauthenticated/README.md +++ b/examples/charts/unauthenticated/README.md @@ -1,11 +1,11 @@ # MongoDB Charts Embedding Example - Unauthenticated Embedded Chart +🎮 _[Play with a live demo of this sample here](https://codesandbox.io/s/github/mongodb-js/charts-embed-sdk/tree/master/examples/charts/unauthenticated)_ + ## Background 📄 _[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/unauthenticated)_ - MongoDB Charts allows you to create visualizations of your MongoDB data using a simple web interface. You can view the visualizations within the Charts UI, or you can use the Embedding feature to render the charts in an external web application. 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 access to the page where the chart is embedded 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). @@ -37,7 +37,7 @@ _The following steps presume the use of npm, though yarn works as well._ 4. Run `npm start` to start the application. This will utilise parcel.js. - Optional Parcel.js documentation https://parceljs.org/ for more information on what this is -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +This should create a local server running the Charts demo. Open a web browser and navigate to the server address to see the sample. This is `http://localhost:3000` for the Timeline Charts example and any using Google authentication, and `http://localhost:1234` for all others. ## Preparing your Chart for Embedding @@ -78,14 +78,10 @@ This sample is preconfigured to render a specific chart. You can run the sample ## 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 _index.js_ file (`src/index.js`) - - Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) - - Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for "\~REPLACE\~" in the comments) -2. Run `npm install` to install the package dependencies. -3. Run `npm start` to launch the sample application. +If you do not wish to use our sample data and have completed the above steps to prepare your own chart for embedding, make the following changes to the index file. Most examples have a `src/index.js` file which needs to be modified, except the Google authentication example (`index.html`) and for the Timeline Charts example (modify `src/Dashboard.jsx` instead). When complete, refer to steps 3 & 4 of the **Quickstart** section to run the application. -This should create a local server running the Charts demo. Open a web browser and navigate to `http://localhost:1234` in the url bar to see the sample. +- Replace the Charts `baseUrl` string with the base URL you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) +- Replace the `chartId` string with the chart ID you copied from the MongoDB Charts Embedded Chart menu (look for `\~REPLACE\~` in the comments) ## Next Steps From b40fc0e2e65e3a23a4ff2c9a8acd2cfbd1d39f5c Mon Sep 17 00:00:00 2001 From: Lily Ha Date: Tue, 9 May 2023 10:32:06 +1000 Subject: [PATCH 7/7] chore: fix up package.json files and add pre-commit hook --- .husky/pre-commit | 4 +++ package-lock.json | 75 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 24 +++++++++++++++ 3 files changed, 103 insertions(+) create mode 100755 .husky/pre-commit create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..382c521 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run build:md diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e89bc36 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,75 @@ +{ + "name": "charts-embed-sdk", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "charts-embed-sdk", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "markdown-include": "^0.4.3" + }, + "devDependencies": { + "husky": "^8.0.3" + } + }, + "node_modules/husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true, + "bin": { + "husky": "lib/bin.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/typicode" + } + }, + "node_modules/markdown-include": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/markdown-include/-/markdown-include-0.4.3.tgz", + "integrity": "sha512-kw1f+iJ8jAH9SYljv2RXmhRQFr2oMPPVdyoKaZIH+uA1rrQqDjLk6EQZW65oVz1Y+BkC3V//9lEvKKjRZNb1Jg==", + "dependencies": { + "q": "^1.2.0" + }, + "bin": { + "markdown-include": "bin/cli.js" + } + }, + "node_modules/q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==", + "engines": { + "node": ">=0.6.0", + "teleport": ">=0.2.0" + } + } + }, + "dependencies": { + "husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true + }, + "markdown-include": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/markdown-include/-/markdown-include-0.4.3.tgz", + "integrity": "sha512-kw1f+iJ8jAH9SYljv2RXmhRQFr2oMPPVdyoKaZIH+uA1rrQqDjLk6EQZW65oVz1Y+BkC3V//9lEvKKjRZNb1Jg==", + "requires": { + "q": "^1.2.0" + } + }, + "q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f51b7bb --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "charts-embed-sdk", + "version": "1.0.0", + "description": "

MongoDB Charts Embedding SDK

", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build:md": "for i in examples/.markdown/compilation/chart/* examples/.markdown/compilation/dashboard/*; do ./node_modules/markdown-include/bin/cli.js ${i}; done;" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/mongodb-js/charts-embed-sdk.git" + }, + "license": "ISC", + "bugs": { + "url": "https://github.com/mongodb-js/charts-embed-sdk/issues" + }, + "homepage": "https://github.com/mongodb-js/charts-embed-sdk#readme", + "dependencies": { + "markdown-include": "^0.4.3" + }, + "devDependencies": { + "husky": "^8.0.3" + } +}