Add programmatic highlighting example #51
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tomhollander
suggested changes
Aug 24, 2021
| await setSnippet(snippet); | ||
| } | ||
|
|
||
| async function onTextChange(event) { |
There was a problem hiding this comment.
Suggestion: The sample may be a bit more predictable if updating the query happened on a button click, rather than on text change?
Collaborator
Author
|
I've applied all the requests other than the button, I'm not sure if having an 'apply' button makes it much easier.
|
tomhollander
suggested changes
Aug 25, 2021
tomhollander
left a comment
tomhollander
left a comment
There was a problem hiding this comment.
Almost there, just a couple more carryovers in the README that need purging.
tomhollander
approved these changes
Aug 25, 2021
| <option value="simple">Exact match</option> | ||
| <option value="range">Using comparisons</option> | ||
| <option value="complex">Using $and</option> | ||
| <option value="empty">Applying {}</option> |
Contributor
There was a problem hiding this comment.
Would it be more clear if the text here is 'Remove highlights' instead of "Applying {}"?
| @@ -0,0 +1,23 @@ | |||
| { | |||
| "name": "charts-sdk-example-click-events-filtering", | |||
Contributor
There was a problem hiding this comment.
Suggested change
| "name": "charts-sdk-example-click-events-filtering", | |
| "name": "charts-sdk-example-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/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). |
Contributor
There was a problem hiding this comment.
Suggested change
| 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/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/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). |
kristinamongo
approved these changes
Aug 25, 2021
Contributor
kristinamongo
left a comment
kristinamongo
left a comment
There was a problem hiding this comment.
This is fantastic and I ❤️ the predefined highlighting filter🔥 🔥 🔥 Thank you for adding this example app. 💯
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As part of this PR, I've removed the
BETAtag from the click event examples, and I've created a programmatic highlighting example.screencast-1629678141.mp4
It includes some examples via the select, and you can also pass in custom filters.