5 Star Skill Rating System in the SUSI.AI CMS

5 Star Skill Rating System in the SUSI.AI CMS

For making a system more reliable and robust, continuous evaluation is quite important. So is in the case of SUSI AI. User feedback is important to improve SUSI skills and create new ones. Previously we had only thumbs up / thumbs down as a feedback method, from the SUSI chat client. But now a 5 star rating system has been added to the SUSI Skill CMS so that users can rate a skill there. Before the implementation of API  let’s look how data is stored in SUSI AI Susi_server uses DAO in which skill rating is stored as JSONTray. The rating system has been implemented on SkillListing.js file on the CMS.

The CMS side

  1. Install the Recharts Data Visualization library.

$ npm install --save recharts
  1. Install the Rating library for react.

$ npm install --save react-ratings-declarative
  1. Import the Barchart, Cell, LabelList, Bar, XAxis, YAxis and Tooltip components from Recharts.

import {BarChart, Cell, LabelList, Bar, XAxis, YAxis, Tooltip} from 'recharts';
  1. Import the Ratings components from React Ratings Declarative.

import Ratings from 'react-ratings-declarative';
  1. Add average rating, total ratings, rating counts on each star and rating given by the users as state variables.

this.state = {
    ...
    avg_rating: '',
    total_star: '',
    skill_ratings: [],
    rating : 0
    ...
}
  1. Load the skill ratings as soon as the page loads. getSkillRating.json API is used to get skill ratings. Fetch the stars related data from the API response and save them in the state variable using saveSkillRatings() function.

$.ajax({
    url: skillRatingUrl,
    success: function (data) {
      self.saveSkillRatings(data.skill_rating.stars)
    },
);
  1.  Store the skills rating data to be visualized on the charts. The rating data is kept in an array and store in a state variable. Put zero if the rating count is not available. This state variable is used by the Recharts library as an input for data visualization.

saveSkillRatings = (skill_ratings) => {
       const ratings_data = [
             {name: '5 ⭐', value: skill_ratings.five_star || 0},
             {name: '4 ⭐', value: skill_ratings.four_star || 0},
             {name: '3 ⭐', value: skill_ratings.three_star || 0},
             {name: '2 ⭐', value: skill_ratings.two_star || 0},
             {name: '1 ⭐', value: skill_ratings.one_star || 0}];
       this.setState({
           skill_ratings: ratings_data,
           avg_rating: skill_ratings.avg_star,
           total_star: skill_ratings.total_star
       })
   }
  1. Create a function to that informs the server about the rating given by the current user. The changeRating() function calls the fiveStarRateSkill.json API with the parameters like who has rated the skill and what rating has been given.

changeRating = (newRating) => {
    $.ajax({
        url: changeRatingUrl,
        success: function(data) {
            console.log('Ratings accepted');
        },
    this.setState({
        rating: newRating
    });
};
  1.  Check if the user is logged in and display the rating bar. The rating bar should appear only if the user is logged in. The document’s cookies hold the information about the logged in user.

{
  cookies.get('loggedIn') ?
  <Ratings
     rating={this.state.rating}
     changeRating={this.changeRating}
    >
     <Ratings.Widget />
     <Ratings.Widget />
     <Ratings.Widget />
     <Ratings.Widget />
     <Ratings.Widget />
  </Ratings>
  :
  null
}
  1.  Display the BarChart of existing ratings, total ratings and average rating. It shows the count on each star.

If the average rating is available in the state then show it, otherwise put zero in the average rating.

Add a Bar Chart and define the data to be visualized i.e. the skill rating data. The Y-axis of the chart maps to the particular rating and the X-axis shows the count of that rating. The value of bar and label is set from the count of each star rating.

<BarChart layout='vertical' width={400} height={250} data={this.state.skill_ratings}>
    <XAxis type="number" padding={{right: 20}} />
    <YAxis dataKey="name" type="category"/>
    <Bar name="Skill Rating" dataKey="value" fill="#8884d8">
        <LabelList dataKey="value" position="right" />
        {
            this.state.skill_ratings
                .map((entry, index) =>
                    <Cell key={index} fill={
                        ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#FF2323'][index % 5]
                    }/>)
        }
    </Bar>
</BarChart>

If the total number of ratings is available in the state then show it, otherwise put zero in the total number of ratings.

Conclusion

So this 5 star rating system will help in improving the SUSI skills. Also, it will help in making better decisions when we have multiple similar skills and we have to choose one to respond to the user query.

References

Close Menu