captivate_rating_svg.js

setTimeout(function() { 
  var user_stars_obj = $("#stars_user_ratingc_object")[0];
  var user_stars_svgdoc = user_stars_obj.getSVGDocument();
  var user_stars_box = user_stars_svgdoc.getElementById("box");

  var average_stars_obj = $("#stars_average_ratingc_object")[0];
  var average_stars_svgdoc = average_stars_obj.getSVGDocument();
  var average_stars_box = average_stars_svgdoc.getElementById("box");

  var ratio = 0;

  $("#stars_user_rating").mousemove(function(event) {
    ratio = Math.round((event.offsetX / $("#stars_user_rating").width()) * 100);
    window.cpAPIInterface.setVariableValue("var_user_rating", ratio);
    user_stars_box.setAttribute("width", ratio + "%");
  });

  $("#stars_user_rating").mousedown(function() {
    $("#stars_user_rating").off("mousemove");
    let increaseCountBy = firebase.firestore.FieldValue.increment(1);
    let increaseTotalBy = firebase.firestore.FieldValue.increment(ratio);
    ratingsDocRef.update({ total: increaseTotalBy, count: increaseCountBy });
    $("#stars_user_rating").off("mousedown");
  });

  ratingsDocRef.onSnapshot(function(doc) {
    var data = doc.data();
    var avg_ratio = data.total / data.count;
    if (typeof average_stars_box !== "undefined") {
      average_stars_box.setAttribute("width", avg_ratio + "%");
      window.cpAPIInterface.setVariableValue(
        "var_average_rating",
        Math.round(avg_ratio)
      );
    }

    console.log("Current data: ", doc.data(), avg_ratio);
  });
}, 500);