Creating a filter containing a lookupfield with JavaSDK embedding

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;

Hi Ruben, I think you could make use of Aggregation Pipeline. It is possible to query a pipline field. See https://docs.mongodb.com/manual/core/aggregation-pipeline/

2 Likes

Thanks Wilbert. I was looking for this. :laughing:

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.