Rating

<ef-rating value="2"></ef-rating>
<ef-rating value="4" interactive></ef-rating>
<ef-rating value="7.5" max="10"></ef-rating>

ef-rating {
  margin-right: 25px;
}

ef-rating is a star visualization component that is typically used for ranking.

Basic usage

By default, ef-rating is displayed with no stars selected. Setting value selects/highlights stars.

<ef-rating></ef-rating>
<ef-rating value="2"></ef-rating>
<ef-rating value="3.5"></ef-rating>

ef-rating {
  margin-right: 25px;
}

<ef-rating></ef-rating>
<ef-rating value="2"></ef-rating>
<ef-rating value="3.5"></ef-rating>

Customize number of stars and size

The maximum number of stars can be overridden by setting max.

<ef-rating max="10"></ef-rating>

<ef-rating max="10"></ef-rating>

The size of the stars can be changed using standard CSS styles.

<ef-rating id="custom" value="2.5"></ef-rating>

#custom {
  font-size: 30px;
}

#custom {
  font-size:30px;
}

<ef-rating id="custom" value="2.5"></ef-rating>

Interactive Rating

By default users cannot change the value of ef-rating. Specifying interactive makes it possible for users to change the value.

<ef-rating id="rateRestaurant" max="10" value="7" interactive></ef-rating>
<pre id="result"></pre>

var customRating = document.getElementById('rateRestaurant');
customRating.addEventListener('value-changed', function(e) {
  document.getElementById('result').textContent = 'You have selected: ' + e.detail.value;
});

<ef-rating max="10" value="7" interactive></ef-rating>
<pre id="result"></pre>

let customRating = document.getElementById('rateRestaurant');
customRating.addEventListener('value-changed', (e) =>  {
  document.getElementById('result').textContent = 'You have selected: ' + e.detail.value;
});

Clear rating by users interaction

A rating can be cleared after user interaction sets value.

var el = document.querySelector('ef-rating');
var previousValue = el.value;

el.addEventListener('tap', function (e) {

  if ((el.value === previousValue)) {
    el.value = '0';
  }

  previousValue = el.value
});

Dynamic Rating

In many scenarios, ef-rating is dynamically generated based on input data. This can be easily achieved within ef-grid with a custom renderer.

<ef-grid id="custom" height="208px"></ef-grid>

var grid = document.getElementById('custom');
grid.config = {
  columns: [{
      id: 'c1',
      title: 'Restaurant Name',
      field: 'restaurantName'
    },
    {
      id: 'c2',
      title: 'Rating',
      field: 'averageRating',
      formatter: {
        render: function() {},
        bind: function(rowIndex, columnIndex, value, cell, columnDef, dataRow, dataTable) {
          var rating = cell.getContent();
          if (!rating) {
            rating = document.createElement('ef-rating');
          }
          rating.value = value;
          cell.setContent(rating);
        }
      }
    }
  ],
  dataModel: {
    fields: ['restaurantName', 'averageRating'],
    format: 'rows',
    data: [{
        restaurantName: 'Fancy Burgers',
        averageRating: '4.8'
      },
      {
        restaurantName: 'Under The Bridge',
        averageRating: '0.5'
      },
      {
        restaurantName: 'Large Pizzas',
        averageRating: '4'
      },
      {
        restaurantName: 'Evening Dreams',
        averageRating: '3'
      },
      {
        restaurantName: 'Fish Paradise',
        averageRating: '3.2'
      }
    ]
  }
};

<ef-grid id="custom" height="208px"></ef-grid>

let grid = document.getElementById('custom');
grid.config = {
  columns: [
    {
      id: 'c1',
      title: 'Restaurant Name',
      field: 'restaurantName'
    },
    {
      id: 'c2',
      title: 'Rating',
      field: 'averageRating',
      formatter: {
        render: function () { },
        bind: function (rowIndex, columnIndex, value, cell, columnDef, dataRow, dataTable) {
          var rating = cell.getContent();
          if (!rating) {
            rating = document.createElement('ef-rating');
          }
          rating.value = value;
          cell.setContent(rating);
        }
      }
    }
  ],
  dataModel: {
    fields: ['restaurantName', 'averageRating'],
    format: 'rows',
    data: [
      { restaurantName: 'Fancy Burgers', averageRating: '4.8' },
      { restaurantName: 'Under The Bridge', averageRating: '0.5' },
      { restaurantName: 'Large Pizzas', averageRating: '4' },
      { restaurantName: 'Evening Dreams', averageRating: '3' },
      { restaurantName: 'Fish Paradise', averageRating: '3.2' } ]
  }
};