<div ng-controller="kpiConfigCtrl" class="no-card-context bg-inherit">
  <div ng-controller="pieChartConfigCtrl" class="alert alert-warning m-t-8 center-block" ng-show="differentUnits" translate>
    Measurements with different units are selected.
  </div>
  
  <c8y-data-point-list
    basic-list
    ng-model="config"
    datapoints="config.datapoints"
    allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
    dont-save="true"
    class="bg-inherit"
  ></c8y-data-point-list>

  <fieldset ng-controller="pieChartConfigCtrl" class="c8y-fieldset">
    <legend translate>Pie Chart Options</legend>
    <div class="form-group d-flex gap-16 flex-wrap m-b-16">
      <label class="c8y-checkbox m-t-8">
        <input type="checkbox" ng-model="config.pieChartOptions.showTooltips" />
        <span></span>
        <span translate>Show tooltips</span>
      </label>
      <label class="c8y-checkbox">
        <input type="checkbox" ng-model="config.pieChartOptions.showLabels" />
        <span></span>
        <span translate>Show percentages</span>
      </label>
      <label class="c8y-checkbox">
        <input type="checkbox" ng-model="config.pieChartOptions.showLegend" />
        <span></span>
        <span translate>Show legend</span>
      </label>
    </div>
  </fieldset>
</div>
