Criteria overview

The FoundationUI framework has several components that communicate directly with the back end.

• The Grids and Charts components take a resourceName parameter, which specifies the service.
• The Connect class snapshot and stream methods can also be used to get data from the back end.

You can filter the responses by creating Groovy expressions to see only the rows that match your use case.

You can use the foundation-criteria module to create expressions using the suite of helper functions.

To add the package to your application, update your package.json:

{
  "dependencies": {
    "@genesislcap/foundation-criteria": "latest"
  }
}

You can then import and make use of its helper classes and functions to construct simple or complex queries.

Elements using criteria

Some elements in FoundationUI communicate directly with the back end to retrieve and display data. The data retrieved can be filtered using valid criteria Groovy expressions.

Chart and chart datasource

To populate the rapid-g2plot-chart component with data, use the chart-datasource component.

Click the button to see the code for these resources.

This example is a simple line chart that retrieves data from a Price history:

import { FoundationElement, html, customElement  } from '@genesislcap/web-core';
import {
  CriteriaBuilder,
  ExpressionBuilder,
  Serialisers
} from '@genesislcap/foundation-criteria';

const tradeIdEqualsExpression = new ExpressionBuilder()
  .withField('TICKER')
  .withValue('GNYS')
  .withSerialiser(Serialisers.EQ)
  .build()

const filterCriteria = new CriteriaBuilder()
  .withExpression(tradeIdEqualsExpression)
  .build();
// filterCriteria is equal to '((TICKER == "GNYS"))'

@customElement({
  name: 'my-component',
  template: html`
    <rapid-g2plot-chart
      type="line"
      :config=${(x) => x.lineChartConfiguration}
    >
      <chart-datasource
        resourceName="ALL_PRICE_HISTORY"
        server-fields="DATE VALUE TICKER"
        chart-fields="date value ticker"
        criteria="${() => filterCriteria}"
      >
      </chart-datasource>
    </rapid-g2plot-chart>
  `
})
export class MyComponent extends FoundationElement {
  lineChartConfiguration = {
    xField: 'date',
    yField: 'value',
    seriesField: 'ticker'
  }
}

The next two examples are based on the same back-end resources.

Click the button to view a relevant example of a TRADE table:

Grid Pro and Grid datasource

To populate the rapid-grid-pro with data, use the grid-pro-datasource component. In addition to the resourceName attribute, you can also set a criteria attribute.

In this example, we only want to see trades made against 'GNYS' ticker and with a status not equal to 'Cancelled':

import { FoundationElement, html, customElement  } from '@genesislcap/web-core';
import {
  CriteriaBuilder,
  ExpressionBuilder,
  Serialisers
} from '@genesislcap/foundation-criteria';

const tradeIdExpression = new ExpressionBuilder()
  .withField('TICKER')
  .withValue('GNYS')
  .withSerialiser(Serialisers.EQ)
  .build()

const tradeStatusExpression = new ExpressionBuilder()
  .withField('STATUS')
  .withValue('Cancelled')
  .withSerialiser(Serialisers.NOT)
  .build()

const filterCriteria = new CriteriaBuilder()
  .withExpression(tradeIdExpression)
  .withExpression(tradeStatusExpression)
  .build();

// filterCriteria is equal to '(TICKER == "GNYS" && STATUS ! "Cancelled")'

@customElement({
  name: 'my-component',
  template: html`
    <rapid-grid-pro>
        <grid-pro-genesis-datasource
            resource-name="ALL_TRADES"
            criteria=${() => filterCriteria}
        ></grid-pro-genesis-datasource>
    </rapid-grid-pro>
  `
})
export class MyComponent extends FoundationElement {
}

Entity management

The entity-management component can use filter criteria via the criteria value in its datasourceConfig object.

import { FoundationElement, html, customElement  } from '@genesislcap/web-core';
import {
  CriteriaBuilder,
  ExpressionBuilder,
  Serialisers
} from '@genesislcap/foundation-criteria';

const tradeIdExpression = new ExpressionBuilder()
  .withField('TICKER')
  .withValue('GNYS')
  .withSerialiser(Serialisers.EQ)
  .build()

const notionalExpression = new ExpressionBuilder()
  .withField('NOTIONAL')
  .withValue(1000)
  .withSerialiser(Serialisers.GT)
  .build()

const filterCriteria = new CriteriaBuilder()
  .withExpression(tradeIdExpression)
  .withExpression(notionalExpression)
  .build();

// filterCriteria is equal to '((TICKER == "GNYS" && NOTIONAL > 1000))'

@customElement({
  name: 'my-component',
  template: html`
    <entity-management
      design-system-prefix="rapid"
      :datasourceConfig=${() => ({
        resourceName: 'ALL_TRADES',
        criteria: filterCriteria
      })}
    >
    </entity-management>
  `
})
export class MyComponent extends FoundationElement {
}

These examples are just scratching the surface of the foundation-criteria module. The following pages in this section go into more depth on the different Serialisers, Expressions and Criteria you can construct.