7.8 UIViewChartMetricsHistogram: filtering itemsDataSource

Is it possible to filter an itemsDataSource dynamically with page parameters or a parent component’s record.data fields? I’ve tried countless variations of parameter settings to no avail. Every example I’ve found using a UIViewChartMetricsHistogram component is building a dashboard, so no dynamic filtering is necessary in those cases. However, my use case requires it.

Here are my components and dataSources:

  page AircraftDetails {
    "title": "Aircraft Details",
    "template": ["App.AircraftDetails"],
    "component": "UIViewPage",
    "url": "aircraft-details",

    "autoLoadData": true,
    "data": {
      "record": "App.AircraftDetails"
    },

    "components": [
      {
        "id": "SideMenu",
        "component": "App.Menu",
        "renderTo": "#side-menu",
        "activeItem": "aircraft"
      },
      {
        "id": "Histogram1",
        "component": "App.AircraftDetailsHistogram1",
        "renderTo": "#aircraft-details-histogram-1"
      }
    ]
    ...
  }
  dataSource AircraftDetails {
    "record": true,
    "c3type": "AircraftLevelSummary",
    "c3function": "get",
    "c3arguments": {
      "obj": {
        "id": "{{ params.id }}"
      },
      "include": "a bunch of fields"
    }
  component AircraftDetailsHistogram1 {
    "component": "UIViewChartMetricsHistogram",
    ...
    "data": {
      "itemsDataSource": "JointF35.AircraftDetailsDistribution"
    },
    "histogramCurrentType": {
      "c3Type": "AircraftLevelDetails"
    },
    "histogramMetric": {
      "metricName": "AircraftDetailsDistribution_MTBR_FLHR",
      "metricTitle": "MTBR Distribution (Flight Hrs.)"
    }
    ...
  }
  dataSource AircraftDetailsDistribution {
    "collection": true,
    "c3type": "AircraftLevelDetails",
    "c3function": "fetch",
    "c3arguments": {
      "spec": {
        "filter": "uniqueAircraftIdentifier == '{{ params.id }}'",
        "limit": -1
      }
    },
    "responseSelector": "objs"
  }

Without fail, no matter which way I configure the filter spec on the AircraftDetailsDistribution, the query gets made with uniqueAircraftIdentifier == ''. I’ve tried using local data sources. I’ve tried setting autoLoadData to true everywhere. I’ve tried 7.8 components in 7.9 pages (don’t try that one, it doesn’t work). In every case, the result is the same and stepping through the debugger returns the same answer: when I set breakpoints in the data loading process and trace the page function calls, it appears that, unlike the calls to populate a typical data.record or data.collection, the call to populate the data.itemsDataSource does not see params, pageParams, record, or the parent component to reference parent.params.id.

Am I trying to do something that’s not actually possible? Do I have to use childDataSources in the parent component and wire the parent and child components together differently? If so, can I get an example of how that should look? I’ve had limited success with childDataSources in the past.

Can you try the following:

  page AircraftDetails {
    "title": "Aircraft Details",
    "template": ["App.AircraftDetails"],
    "component": "UIViewPage",
    "url": "aircraft-details",

    "autoLoadData": true,
    "data": {
      "record": "App.AircraftDetails",
      "histogramData": "App. AircraftDetailsDistribution"
    },
    "components": [
      {
        "id": "SideMenu",
        "component": "App.Menu",
        "renderTo": "#side-menu",
        "activeItem": "aircraft"
      },
      {
        "id": "Histogram1",
        "component": "App.AircraftDetailsHistogram1",
        "renderTo": "#aircraft-details-histogram-1",
        "data": {
            "record": "histogramData"
        }
      }
    ]
  }
  component AircraftDetailsHistogram1 {
    "component": "UIViewChartMetricsHistogram",
    ...
    "data": {
      "itemsDataSource": "record"
    },
    "histogramCurrentType": {
      "c3Type": "AircraftLevelDetails"
    },
    "histogramMetric": {
      "metricName": "AircraftDetailsDistribution_MTBR_FLHR",
      "metricTitle": "MTBR Distribution (Flight Hrs.)"
    }
    ...
  }

I’m not sure what the actual issue is in this situation, but I think loading the dataSource at the page level and then just referencing it from the component will allow pageParams to be seen

Thanks @scott.kruyswyk. I appreciate the help (and the honesty :smiley:)!

That got me close to a working solution. I ended up needing to make a change to the page’s data and moving the component’s data up into the page’s components list. Additionally, since autoLoadData only seems to work if the data field is record or collection, I changed the field name like so:

  page AircraftDetails {
    "title": "Aircraft Details",
    "template": ["App.AircraftDetails"],
    "component": "UIViewPage",
    "url": "aircraft-details",

    "autoLoadData": true,
    "data": {
      "record": "App.AircraftDetails",
      "collection": "App. AircraftDetailsDistribution"
    },
    "components": [
      {
        "id": "SideMenu",
        "component": "App.Menu",
        "renderTo": "#side-menu",
        "activeItem": "aircraft"
      },
      {
        "id": "Histogram1",
        "component": "App.AircraftDetailsHistogram1",
        "renderTo": "#aircraft-details-histogram-1",
        "data": {
            "itemsDataSource": "collection"
        }
      }
    ]
  }
  component AircraftDetailsHistogram1 {
    "component": "UIViewChartMetricsHistogram",
    ...
    "histogramCurrentType": {
      "c3Type": "AircraftLevelDetails"
    },
    "histogramMetric": {
      "metricName": "AircraftDetailsDistribution_MTBR_FLHR",
      "metricTitle": "MTBR Distribution (Flight Hrs.)"
    }
    ...
  }