Cumulocity - Custom widget configuration

I'm writing a chart widget in cumulocity platform. In widget comes with the platform, I can select data point after I select device:

But the widget I wrote can only select device, there is no data point option for me to select:

I know there is c8yComponentsProvider that has options for me to select if I want device target or not. Is there a way for me to choose what data point I want?

You can disable the device selector in the options of the c8yComponentsProvider:

options: {
  noDeviceTarget: true
}

And then use the following directive in your widget config html:

<c8y-data-point-list datapoints="data.datapoints"></c8y-data-point-list>

You need to set the data points to choose in the data.datapoints object on the widget configuration controller. Therefore you can search for managed objects with the fragment c8y_DataPoint.

In the document is an example how to do that with the c8yInventory service:

var filters = {fragmentType: 'c8y_DataPoint', withParents: true};
$scope.data = {};
c8yInventory.list(filters).then(function (devices) {
  $scope.data.datapoints = [];
  _.forEach(devices, function(dp) {
    $scope.data.datapoints.push(dp);
  });
});

Note that the c8y-data-point-list is a nonofficial directive. If you face any problems or you want a specific look, you might be faster by writing your own directive.