New: Rating votes tooltip and series filter

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -145,6 +145,7 @@ class AddNewSeriesSearchResult extends Component {
               <Label size={sizes.LARGE}>
                 <HeartRating
                   rating={ratings.value}
+                  votes={ratings.votes}
                   iconSize={13}
                 />
               </Label>

frontend/src/Components/HeartRating.js

@@ -1,29 +1,40 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './HeartRating.css';
 
-function HeartRating({ rating, iconSize }) {
+function HeartRating({ rating, votes, iconSize }) {
   return (
-    <span className={styles.rating}>
-      <Icon
-        className={styles.heart}
-        name={icons.HEART}
-        size={iconSize}
-      />
+    <Tooltip
+      anchor={
+        <span className={styles.rating}>
+          <Icon
+            className={styles.heart}
+            name={icons.HEART}
+            size={iconSize}
+          />
 
-      {rating * 10}%
-    </span>
+          {rating * 10}%
+        </span>
+      }
+      tooltip={translate('CountVotes', { votes })}
+      kind={kinds.INVERSE}
+      position={tooltipPositions.TOP}
+    />
   );
 }
 
 HeartRating.propTypes = {
   rating: PropTypes.number.isRequired,
+  votes: PropTypes.number.isRequired,
   iconSize: PropTypes.number.isRequired
 };
 
 HeartRating.defaultProps = {
+  votes: 0,
   iconSize: 14
 };
 

frontend/src/Series/Details/SeriesDetails.js

@@ -412,10 +412,12 @@ class SeriesDetails extends Component {
                       ratings.value ?
                         <HeartRating
                           rating={ratings.value}
+                          votes={ratings.votes}
                           iconSize={20}
                         /> :
                         null
                     }
+
                     <SeriesGenres genres={genres} />
 
                     <span>

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -401,7 +401,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
         if (name === 'ratings') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <HeartRating rating={ratings.value} />
+              <HeartRating rating={ratings.value} votes={ratings.votes} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Store/Actions/seriesActions.js

@@ -128,8 +128,16 @@ export const filterPredicates = {
 
   ratings: function(item, filterValue, type) {
     const predicate = filterTypePredicates[type];
+    const { value = 0 } = item.ratings;
 
-    return predicate(item.ratings.value * 10, filterValue);
+    return predicate(value * 10, filterValue);
+  },
+
+  ratingVotes: function(item, filterValue, type) {
+    const predicate = filterTypePredicates[type];
+    const { votes = 0 } = item.ratings;
+
+    return predicate(votes, filterValue);
   },
 
   originalLanguage: function(item, filterValue, type) {
@@ -347,6 +355,11 @@ export const filterBuilderProps = [
     label: () => translate('Rating'),
     type: filterBuilderTypes.NUMBER
   },
+  {
+    name: 'ratingVotes',
+    label: () => translate('RatingVotes'),
+    type: filterBuilderTypes.NUMBER
+  },
   {
     name: 'certification',
     label: () => translate('Certification'),