Ownership and future of `react-datawrapper-chart`

[sto3psl]

It came up in issue #7 that I've been pretty slow to update this package, which has several reasons. Since I don't work at Datawrapper anymore and don't use a lot of React these days, this package is not that useful to me.

Because of that I want to give react-datawrapper-chart away so that it can be maintained by someone who actually derives value from it. I think the best place would be for @datawrapper to own and maintain this package. Since Datawrapper doesn't use it either and they don't use React, I would also be fine with it being in the hands of a community maintainer like @MatchuPitchu.

@elanals since you know best when updates are needed because the embed code changes, I would prefer @datawrapper to have it, otherwise it goes to @MatchuPitchu.

Please let me know what you think about this. @MatchuPitchu I hope you understand my reasoning and I think even if the package goes to Datawrapper they may add you as contributor.

When we make a decision I'm going to transfer the Github repository and the npm package (https://www.npmjs.com/package/react-datawrapper-chart).

[sto3psl]

With the new Web Component embed there might not even be a need for this package anymore since React could just consume the Web Component.

https://blog.datawrapper.de/web-component-embedding/

[MatchuPitchu]

The new Web Component is a nice solution that I've just tried, but unfortunately it still doesn't work for me - even in a simple HTML file. I wrote to Datawrapper support.

Otherwise I think your suggestion is very good. I will then remove the package and replace it with the web component. That means I wouldn't want to take over the package here either if Datawrapper can't or doesn't want to do it itself.

[sto3psl]

@MatchuPitchu It's a little bit involved and I don't know if Datawrapper provides the web component as npm package but here is a working example in React:

https://codesandbox.io/s/datawrapper-wc-in-react-7d1zwx
(It would even be possible to make react-datawrapper-chart a small wrapper like in this example which injects a web component if it can and otherwise use the iframe).

Same thing in plain HTML:

https://codesandbox.io/s/competent-lederberg-1963i0

I think you have to make sure that the chart you want to embed has recently been published. Old charts that existed before the web component feature don't automatically work with the new embed option. Republishing an existing chart should do the trick.

[zoul]

This is great, thank you, works for me (Ohlasy/web@bf28d34) even without the extra package.

[MatchuPitchu]

@sto3psl Thank you for the examples. I had a similar one and now it's working.

I've been trying a bit and haven't found a solution for the switch to dark mode yet.

The problem is that I can't just update the attribute on the script element. Nothing happens there.
However, if I always remove the chart in useEffect in the clean-up return function, then there is a jump with every theme switch because the height briefly jumps back to 0.
I've also tried saving the height in the ref and setting it as a "style" but then it's not responsive anymore.

Can you think of a solution?

Here is my jumping version:

import { useEffect, useRef } from 'react';
import { useThemeContext } from '@/store/ThemeContext';

interface IDataWrapper {
  className: string;
}

export const DataWrapper = ({ className }: IDataWrapper) => {
  const { isLight } = useThemeContext();

  const boxRef = useRef<HTMLDivElement>(null);
  const scriptRef = useRef<HTMLScriptElement>();

  useEffect(() => {
    if (!boxRef.current) return;

    scriptRef.current = document.createElement('script');

    scriptRef.current.type = 'text/javascript';
    scriptRef.current.src = 'https://datawrapper.dwcdn.net/s7YQ5/embed.js?v=6';
    scriptRef.current.setAttribute('data-dark', isLight ? 'false' : 'true');
    scriptRef.current.defer = true;

    boxRef.current.appendChild(scriptRef.current);

    return () => {
      if (boxRef.current) boxRef.current.replaceChildren();
    };
  }, [isLight]);

  return <div ref={boxRef} className={className} />;
};

[MatchuPitchu]

Just to add to my comment above. I've been tweaking the code a little more. Now the "jumping" is solved. However, the code is a bit bulky. I have to set the current height of the box in the clean up function and unset it again when re-rendering the component.

And I integrated an Intersection Observer - otherwise the initial load of the page is really high

Unfortunately I can't make small CSS adjustments in the web component. For example, the footer hangs exactly on the left edge.

In the future, Datawrapper would also like to integrate dynamic switching of dark and light mode without having to render the script over and over again.

Today Datawrapper also fixed an error that regularly occurred when loading the script and which ultimately caused the map not to load. So I could now exchange this package here with my React component.
@sto3psl You can decide whether you want to simply update your package with it or not.

import { useCallback, useEffect, useRef } from 'react';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
import { useThemeContext } from '@/store/ThemeContext';

interface IDataWrapper {
  className: string;
}

export const Datawrapper = ({ className }: IDataWrapper) => {
  const { isLight } = useThemeContext();

  const boxRef = useRef<HTMLDivElement>(null);
  const lockRef = useRef(false);

  const { isIntersecting } = useIntersectionObserver(boxRef, 'disconnect');

  if (boxRef.current) {
    boxRef.current.style.height = 'unset';
  }

  if (isIntersecting && !lockRef.current) {
    lockRef.current = true;
  }

  const createWebComponent = useCallback(() => {
    const script = document.createElement('script');
    boxRef.current?.appendChild(script);

    if (!isLight) {
      script.setAttribute('data-dark', 'true');
    }

    script.src = 'https://datawrapper.dwcdn.net/s7YQ5/embed.js?v=7';
  }, [isLight]);

  useEffect(() => {
    if (!lockRef.current || !boxRef.current) return;

    createWebComponent();

    return () => {
      if (!boxRef.current) return;
      const currentHeight = boxRef.current.getBoundingClientRect().height;
      boxRef.current.style.height = `${currentHeight}px`;
      boxRef.current.replaceChildren();
    };
  }, [createWebComponent, isIntersecting]);

  return <div ref={boxRef} className={className} />;
};

};