diff --git a/README.md b/README.md index a416425..8263543 100644 --- a/README.md +++ b/README.md @@ -33,5 +33,6 @@ yarn add @mongodb-js/charts-embed-dom - [Getting started with custom JWT authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/authenticated-custom-jwt) - [Getting started with Realm authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/authenticated-realm) - [Getting started with Google authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/authenticated-google) - - [Getting started with click events (BETA)](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/click-events-basic) - - [Interactive filtering using click events (BETA)](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/click-events-filtering) + - [Getting started with click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/click-events-basic) + - [Interactive filtering using click events](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/click-events-filtering) + - [Programmatic highlighting](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/programmatic-highlighting) diff --git a/examples/programmatic-highlighting/assets/styles.css b/examples/programmatic-highlighting/assets/styles.css new file mode 100644 index 0000000..3d45ac7 --- /dev/null +++ b/examples/programmatic-highlighting/assets/styles.css @@ -0,0 +1,41 @@ +html, +body { + font-family: "Heebo"; + transition: background-color 0.5s ease; +} + +.body-content { + display: flex; +} +.chart { + flex: 1; + width: 50%; + height: 70%; +} + +.options-container { + margin-top: 2rem; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +label { + font-weight: 700; +} + +.options { + display: flex; + flex-direction: column; + min-width: 30rem; + width: 60%; +} + +.select { + height: 30px; +} + +h1, h2, h3, h4 { + text-align: center; +} diff --git a/examples/programmatic-highlighting/index.html b/examples/programmatic-highlighting/index.html new file mode 100644 index 0000000..1841845 --- /dev/null +++ b/examples/programmatic-highlighting/index.html @@ -0,0 +1,38 @@ + + + + + Charts Embedded SDK Demo: Interactive Filtering + + + + + + + +
+

Change highlights for both charts

+
+
+
+
+
+ +
+ +