Function SharedChart

client/src/containers/SharedChart.jsx:43–453

()

  This container is used for embedding charts in other websites
*/
function SharedChart() {
  const [loading, setLoading] = useState(false);
  const [chart, setChart] = useState({});
  const [error, setError] = useState(false);
  const [conditions, setConditions] = useState([]);
  const [dataLoading, setDataLoading] = useState(false);
  const [redraw, setRedraw] = useState(true);
  const [isSnapshot, setIsSnapshot] = useState(false);
  const [showChart, setShowChart] = useState(false);
  const [exportLoading, setExportLoading] = useState(false);

  const params = useParams();
  const dispatch = useDispatch();
  const { setTheme } = useTheme();
  const [searchParams] = useSearchParams();
  const filterRef = useRef(null);
  const chartSize = useChartSize(chart?.layout);
  
  useInterval(() => {
    setDataLoading(true);
    
    // Extract all query parameters to pass to the backend
    const allQueryParams = {};
    searchParams.forEach((value, key) => {
      allQueryParams[key] = value;
    });
    
    // We pass all query parameters so the backend can process variables based on the share policy
    dispatch(getSharedChart({ 
      share_string: params.share_string, 
      token: searchParams.get("token"),
      queryParams: allQueryParams
    }))
      .then((chart) => {
        if (chart?.error) {
          setError(true);
          setChart({ error: "no chart" });
        } else {
          setChart(chart.payload);
        }

        setDataLoading(false);
      })
      .catch(() => {
        setError(true);
        setChart({ error: "no chart" });
        setDataLoading(false);
      });
  }, chart?.autoUpdate > 0 && chart.autoUpdate < 600 ? chart.autoUpdate * 1000 : 600000);

  useEffect(() => {
    // change the background color to transparent
    document.body.style.backgroundColor = "transparent";

    const urlParams = new URLSearchParams(document.location.search);

    setIsSnapshot(urlParams.has("isSnapshot"));