From 44e8c1ec0b213b801fbce33fb36fe0c39fe01b42 Mon Sep 17 00:00:00 2001 From: Nathan Smyth Date: Mon, 23 Aug 2021 10:09:24 +1000 Subject: [PATCH 1/4] chore: Remove BETA tag from Readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a416425..8d9a504 100644 --- a/README.md +++ b/README.md @@ -33,5 +33,5 @@ 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) From ba5eb0be2ca0965361aa66e4ac9a311323ab4781 Mon Sep 17 00:00:00 2001 From: Nathan Smyth Date: Mon, 23 Aug 2021 10:11:59 +1000 Subject: [PATCH 2/4] feat: Programmatic highlighting example --- README.md | 1 + .../assets/styles.css | 26 + examples/programmatic-highlighting/index.html | 34 + .../package-lock.json | 6333 +++++++++++++++++ .../programmatic-highlighting/package.json | 23 + examples/programmatic-highlighting/readme.md | 71 + .../programmatic-highlighting/src/index.js | 70 + 7 files changed, 6558 insertions(+) create mode 100644 examples/programmatic-highlighting/assets/styles.css create mode 100644 examples/programmatic-highlighting/index.html create mode 100644 examples/programmatic-highlighting/package-lock.json create mode 100644 examples/programmatic-highlighting/package.json create mode 100644 examples/programmatic-highlighting/readme.md create mode 100644 examples/programmatic-highlighting/src/index.js diff --git a/README.md b/README.md index 8d9a504..8263543 100644 --- a/README.md +++ b/README.md @@ -35,3 +35,4 @@ yarn add @mongodb-js/charts-embed-dom - [Getting started with Google authentication](https://github.com/mongodb-js/charts-embed-sdk/tree/master/examples/authenticated-google) - [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..869426e --- /dev/null +++ b/examples/programmatic-highlighting/assets/styles.css @@ -0,0 +1,26 @@ +html, +body { + font-family: "Heebo"; + transition: background-color 0.5s ease; +} + +.body-content { + display: flex; +} +.chart { + flex: 1; + width: 50%; + height: 70%; +} +.options { + display: flex; + justify-content: center; +} + +.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..1dbd2c9 --- /dev/null +++ b/examples/programmatic-highlighting/index.html @@ -0,0 +1,34 @@ + + + + + Charts Embedded SDK Demo: Interactive Filtering + + + + + + + +
+

Change highlights for both charts

+
+
+
+
+
+ +