transforms

Back to Home

Back to main.js page

transforms Configuration

When you pull in data from APIs to the dataSources, many of the data fields will not be formatted as you will want to present them in tables and other components.

For instance, if a table show amounts of money, or dates, you may want to format the value as such even if in the dataSource it is not formatted.

To do so, you can use transforms, which, as the components are built, allows them to do on-the-fly formatting.

Example:

First, define a transform or transforms (or just steal all the ones already written from Atlas):

transforms: {
  currency: {
    // a list of global objects this transform depends on
    globals: ['accounting'],
    // this is the function that gets called to perform the transform
    transform: function (value, globals) {
      return accounting.formatMoney(value);
    }
  },
  date: {
    globals: ['moment'],
    transform: function (value, globals) {
      return moment(value).format('MM/DD/YYYY');
    },
  },
  phoneNumber: {
    transform: function (value) {
      var s2 = (""+value).replace(/\D/g, '');
      var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
      return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
    }
  },
},

Second, when creating topics, when creating components within the topics such as a Vertical Table or a Horizontal Table, use the transforms like so:

{
  type: 'vertical-table',
  options: {
    nullValue: 'None',
  },
  slots: {
    title: 'Parcel Details',
    fields: [
      {
        label: 'Origination Date',
        value: function(state, item) {
          return item.properties.ORIG_DATE;
        },
        transforms: [
          'date'
        ]
      },
      {
        label: 'Perimeter',
        value: function (state, item) {
          return (item.properties || {})['TURF_PERIMETER'];
        },
        transforms: [
          'integer',
          'prettyNumber',
          'feet',
        ]
      },