Hi,
We are building a Charts dashboard with javaSDK embedding in a React application using Typescript.
We already created a filter that filters our charts on a selected period of time. Our next goal is to filter a Lookup field that we are using. This raises the following questions:
-
is it possible to create a filter on a lookup field from MongoDB Charts?
-
is it possible to put a aggregation pipline query in a filter for embedding a chart?
For your information: In de code below we’re creating our component and rendering our chart to embed it in the application.
import React, { FC, useEffect, useRef, useCallback } from 'react'
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"
import { Chart } from '../Models/Chart'
// Fill interface with values. The baseURL and chartID are retrieved from MongoDB.
const ChartElement: FC<Chart> = ({ name, baseUrl, chartId, width, height, startDatum, eindDatum}) => {
const refChartPosts = useRef(null);
const sdk = new ChartsEmbedSDK({
baseUrl: baseUrl,
});
const chart = sdk.createChart({
chartId: chartId,
showAttribution: false,
});
// Rendering the graph.
const renderChart = useCallback(async (ref) => {
try {
var start = Date.now();
await chart.render(ref);
var end = Date.now();
var time = new Date(end - start);
console.log("rendered chart " + "'" + name + "'" + " after " + time.getSeconds() + " seconden")//logging details
} catch (e) {
console.error(e);
}
}, []);
// Returning reference.
const setRefChart = useCallback(
(ref) => {
if (ref) {
renderChart(ref);
console.log(Date() + "setting reference chart " + "'" + name + "'" + "...")//logging details
}
refChartPosts.current = ref;
},
[renderChart]
);
// React thing where it is checked whether the start or end date has been changed.
// Then filterchart is called
useEffect(() => {
filterChart(startDatum, eindDatum)
}, [startDatum, eindDatum]);
// useCallback causes the chart to be filtered after rendering
const filterChart = useCallback((startDate, endDate) => {
try {
chart.setFilter({ createdAt: { "$gte": new Date(startDate), "$lte": new Date(endDate) } }); // gte: greater than / equal to, lte: less than / equal to
} catch (e) {
console.error(e);
}
}, []);
// Graph is created in html with calling the graph.
return (
<>
<div id={name} ref={setRefChart} style={{ width: width, height: height }}></div>
</>
);
};
export default ChartElement;