Knowi React and the Shadow DOM

Introduction

Knowi is a chart visualization library that uses highcharts as it's source of truth. Knowi is pretty great because of the integrated ability to globally manage charts with little to no effort. The project I currently work on uses Knowi. This has been a great experience and Knowi has been amazing to work with.

Knowi did not have previous shadow DOM compatibility for specifically rendering a chart. After great efforts and collaboration from their team, they now support it. This demo is what I know about the syntax in its current state. This may not be applicable for future versions.

This tutorial is intended for people who Know how to start a project and run a React application.

Getting Started with Knowi Shadow DOM

For sanity purposes, I suggest using this package from @griffadev , known as queery-selector-shadow-dom.

npm i query-selector-shadow-dom

Now that our 🏃"shadow Dom div locator"💥 has been installed, let's construct a straightforward chart. Open a new file and name it KnowiTrialComp.jsx:

import React, { useEffect } from "react";
import { querySelectorDeep } from "query-selector-shadow-dom";

function KnowiTrialComp() {

  const Knowi = window?.Knowi;
  const knowiStyle = {
    height: "100%", //can also use 30vh, make sure that the parent div height is clearly defined somewhere or it will not work. 
    width: "100%",
  };
  const knowiRSSIShadowDiv = querySelectorDeep("#knowi-div");

  useEffect(() => {
    if (knowiRSSIShadowDiv) {
      Knowi?.render(null, {
        container: knowiRSSIShadowDiv,
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });
    }
  }, [Knowi, knowiRSSIShadowDiv]);

  return <div id={`knowi-div`} style={knowiStyle}></div>;
};

export default KnowiTrialComp;

Knowi Specs

Their are a couple of key lines in this sample code that are important to address.

For starters, this line grabs our Shadow DOM div and creates an object that references the element.

  const knowiRSSIShadowDiv = querySelectorDeep("#knowi-div");

Then we pass this object into our Knowi JS API. The typical syntax for a Knowi widget using their JS API is as follows.

Knowi?.render('#knowi-div', {
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });

Since we are using Knowi within a Shadow DOM we have to pass in our element as Knowi will not be able to find it on its own. You may be wondering what the difference here is. In the first implementation we are passing a string literal, the second we are passing in an object. In order to make this functionality work we have to add the container field, pass in our predefined object, and make our first parameter null, as seen here. This is because Knowi in the non-shadow-dom implementation, looks for your string literal using document.querySelector, this is insufficient for locating a Shadow DOM div by itself.

Knowi?.render(null, {
        container: knowiRSSIShadowDiv,
        type: "shareWidget", 
        dashboard: "your widget id goes here",
        url: "www.knowi.com", //your url goes here
      });

Conclusion

Using Knowi can be tricky at times and using Knowi with the Shadow DOM can be even trickier!! Hopefully this brief tutorial can help you navigate your way through data visualization using Knowi and the beloved Shadow DOM.