MongoDB Charts Embedding SDK with React

1
git clone git@github.com:mongodb-developer/mongodb-charts-embedded-react.git

1
$ node -v 
2
v14.17.1
3
$ npm -v
4
8.0.0

1
$ cd mongodb-realm-react-charts
2
$ npm install
3
$ npm start

1
npm i @mongodb-js/charts-embed-dom

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import Dashboard from "./Dashboard";
4
5
ReactDOM.render(<React.StrictMode>
6
  <Dashboard/>
7
</React.StrictMode>, document.getElementById('root'));

1
import './Dashboard.css';
2
import {useEffect, useState} from "react";
3
import axios from "axios";
4
import Chart from "./Chart";
5
6
const Dashboard = () => {
7
  const url = 'https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/metadata';
8
  const [countries, setCountries] = useState([]);
9
  const [selectedCountry, setSelectedCountry] = useState("");
10
  const [filterCountry, setFilterCountry] = useState({});
11
12
  function getRandomInt(max) {
13
    return Math.floor(Math.random() * max);
14
  }
15
16
  useEffect(() => {
17
    axios.get(url).then(res => {
18
      setCountries(res.data.countries);
19
      const randomCountryNumber = getRandomInt(res.data.countries.length);
20
      let randomCountry = res.data.countries[randomCountryNumber];
21
      setSelectedCountry(randomCountry);
22
      setFilterCountry({"country": randomCountry});
23
    })
24
  }, [])
25
26
  useEffect(() => {
27
    if (selectedCountry !== "") {
28
      setFilterCountry({"country": selectedCountry});
29
    }
30
  }, [selectedCountry])
31
32
  return <div className="App">
33
    <h1 className="title">MongoDB Charts</h1>
34
    <h2 className="title">COVID-19 Dashboard with Filters</h2>
35
    <div className="form">
36
      {countries.map(c => <div className="elem" key={c}>
37
        <input type="radio" name="country" value={c} onChange={() => setSelectedCountry(c)} checked={c === selectedCountry}/>
38
        <label htmlFor={c} title={c}>{c}</label>
39
      </div>)}
40
    </div>
41
    <div className="charts">
42
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'6e3cc5ef-2be2-421a-b913-512c80f492b3'}/>
43
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'be3faa53-220c-438f-aed8-3708203b0a67'}/>
44
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'7ebbba33-a92a-46a5-9e80-ba7e8f3b13de'}/>
45
      <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'64f3435e-3b83-4478-8bbc-02a695c1a8e2'}/>
46
    </div>
47
  </div>
48
};
49
50
export default Dashboard;

1
.title {
2
  text-align: center;
3
}
4
5
.form {
6
  border: solid black 1px;
7
}
8
9
.elem {
10
  overflow: hidden;
11
  display: inline-block;
12
  width: 150px;
13
  height: 20px;
14
}
15
16
.charts {
17
  text-align: center;
18
}
19
20
.chart {
21
  border: solid #589636 1px;
22
  margin: 5px;
23
  display: inline-block;
24
}

1
import React, {useEffect, useRef, useState} from 'react';
2
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
3
4
const Chart = ({filter, chartId, height, width}) => {
5
  const sdk = new ChartsEmbedSDK({baseUrl: 'https://charts.mongodb.com/charts-open-data-covid-19-zddgb'});
6
  const chartDiv = useRef(null);
7
  const [rendered, setRendered] = useState(false);
8
  const [chart] = useState(sdk.createChart({chartId: chartId, height: height, width: width, theme: "dark"}));
9
10
  useEffect(() => {
11
    chart.render(chartDiv.current).then(() => setRendered(true)).catch(err => console.log("Error during Charts rendering.", err));
12
  }, [chart]);
13
14
  useEffect(() => {
15
    if (rendered) {
16
      chart.setFilter(filter).catch(err => console.log("Error while filtering.", err));
17
    }
18
  }, [chart, filter, rendered]);
19
20
  return <div className="chart" ref={chartDiv}/>;
21
};
22
23
export default Chart;