Using GraphQL Queries with Custom Reports

cd custom-reports-demo

/**
 * Tutorial: Using GraphQL 
 */
export class GraphQLFactSheetCompletionReport {
  /**
   * Create a GraphQLFactSheetCompletionReport instance.
   * @param {Object} setup - The setup configuration.
   */
  constructor(setup) {
    this.setup = setup;
  }

  /**
   * Calculate the average completion for each Fact Sheet of a specific type.
   * @param {Array} factSheets - The fact sheets to calculate average completion for.
   * @return {string} The average completion as a percentage string.
   */
  calculateFactSheetCompletion(factSheets) {
    const average = (factSheets.reduce((sum, edge) => sum + edge.node.completion.completion, 0) / factSheets.length) * 100;
    return `${average.toFixed(2)}%`;
  }

  /**
   * Create a configuration object according to the reporting frameworks specification.
   * @return {Object} The configuration object.
   */
    createConfig() {
      return {
        facets: [{
          facetFiltersChangedCallback: this.createReport.bind(this)
        }]
      };
    }

  testme(filter) {
    console.log(filter);
  }
  /**
   * Retrieves GraphQL data from the LeanIX GraphQL API and generates the report.
   * @returns {Promise<void>}
   */
  async createReport(filters) {
    // Extract filters with default values if not provided
    const {
      facets: facetFilters = [],
      fullTextSearchTerm: fullTextSearch = '',
      directHits = [],
    } = filters;

    // Build GraphQL filters, handling potential undefined values
    const qlFilters = {
      facetFilters: facetFilters?.length > 0 ? facetFilters : undefined,
      fullTextSearch: fullTextSearch?.trim() ? fullTextSearch : undefined,
      ids: directHits.length > 0 ? directHits.map(({ id }) => id) : undefined,
    };
    // Define the GraphQL query
    const query = `
    query allFactSheetsQuery($filter:FilterInput!){
      allFactSheets(filter:$filter) {
        edges {
          node {
            name
            completion {
              completion
            }
          }
        }
      }
    }`;  
    // Execute the GraphQL query and await the response
    const response = await lx.executeGraphQL(query, qlFilters ? { filter: qlFilters } : {});
    // Render the data (assuming 'render' is a method that handles rendering)
    this.render(response?.allFactSheets?.edges);
  }

  /**
   * Render the data returned from the request.
   * Create a div element and render the `averageCompletion` and the `factSheetCount`.
   * @param {Array} data - The data to render.
   */
  render(data) {
    // Calculate the total number of Fact Sheets returned.
    const factSheetCount = data.length;
    // Calculate the average completion percentage for the Fact Sheets returned
    const averageCompletion = this.calculateFactSheetCompletion(data);

    // Create main HTML container
    const container = document.createElement('div');
    container.classList.add('grid', 'grid-cols-2', 'gap-2')

    // Create and append fact sheet count HTML element
    const factSheetCountDiv = this.createDiv(`<p class="text-center"><strong>Fact Sheet Count</strong></p><p class="text-center">${factSheetCount}</p>`);
    container.appendChild(factSheetCountDiv);

    // Create and append average completion HTML element
    const averageCompletionDiv = this.createDiv(`<p class="text-center"><strong>Average Completion</strong></p><p class="text-center">${averageCompletion}</p>`);
    container.appendChild(averageCompletionDiv);

    // Clear existing content and append the new content
    const report = document.getElementById('report');
    report.innerHTML = '';
    report.appendChild(container);
  }

  /**
 * Create a div with specific styling applied.
 * @param {data} - The data to render within the div element.
 * @return {HTMLElement} The fact sheet div.
 */
  createDiv(data) {
    // Create main div for the fact sheet
    const itemDiv = document.createElement('div');
    itemDiv.classList.add('rounded-lg', 'p-2', 'bg-gray-200');
    itemDiv.innerHTML = data;
    return itemDiv;
  }
}

// Importing '@leanix/reporting' makes the `lx` object globally available.
import '@leanix/reporting';
// Import CSS assets for the custom report.
import './assets/main.css';
// Import our custom report module.
import { GraphQLFactSheetCompletionReport } from './graphql.js'

/**
 * Initialize the LeanIX reporting framework and create the report.
 * 
 * The `lx.init()` method signals the reporting framework to begin report initialization.
 * It returns a promise, which gets resolved once the initialization process is complete.
 */
lx.init().then((setup) => {
  // Once initialization completes, we receive a `setup` object with LeanIX 
  // data for our report. Next, we construct the report object and configure it.
  const report = new GraphQLFactSheetCompletionReport(setup);
  const config = report.createConfig();

  // Pass the finalized configuration object to `lx.ready()` function, 
  // notifying LeanIX that our report is prepared to receive and process data.
  lx.ready(config);
  // Since we are using GraphQL queries we need to manuall call for the data.
  report.createReport();
});

npm start