Javascript Rating Widget for Spotfire

Introduction

The Star classification is a type of rating scale utilizing a star glyph or similar typographical symbol. It can be used by reviewers for ranking things such as a product, film, TV shows, restaurants, and hotels. For example, a system of one to five stars is commonly used in hotel ratings, with five stars being the highest rating.

This widget drives a Spotifre Document Property. Spotifre Document properties that can be used to filter data on the analysis, setup on-demand parameters or even write back to a database.

With a little tweak of teh code, it can become a rating-slider type or any other type of level selector

Getting started

The rating system uses javascript and css to drive a document property. Start by adding a text area and edit the html code:

<div id='myRating'></div>  

<div hidden id="ratingDocProp">
	<SpotfireControl id="inputFieldPropertyControl" />
</div>

Replace the SpotifreControl with an actual Input Field Property Control

This javascript will drive the Spotfire Input Field Property Control based on the star rating selection. To debug and make sure the script works correctly, remove the hidden attribute from the ratingDocProp div id element to make the input control visible.

document.getElementById(id).innerHTML  = `
  <div class="rate">
    <input type="radio" id="star5" name="rate" value="5" />
    <label for="star5" title="text">5 stars</label>
    <input type="radio" id="star4" name="rate" value="4" />
    <label for="star4" title="text">4 stars</label>
    <input type="radio" id="star3" name="rate" value="3" />
    <label for="star3" title="text">3 stars</label>
    <input type="radio" id="star2" name="rate" value="2" />
    <label for="star2" title="text">2 stars</label>
    <input type="radio" id="star1" name="rate" value="1" />
    <label for="star1" title="text">1 star</label>
  </div> 
  
  <style>  
	.rate {
		float: left;
		height: 50px;
		padding: 0 0 0 54px;
	}
	.rate:not(:checked) > input {
		position:absolute;
		top:-9999px;
	}
	.rate:not(:checked) > label {
		float:right;
		width:1em;
		overflow:hidden;
		white-space:nowrap;
		cursor:pointer;
		font-size:30px; 
		color:#ccc;
	}
	.rate:not(:checked) > label:before {
		content: '★ ';
	}
	.rate > input:checked ~ label {
		color: #ffc700;    
	}
	.rate:not(:checked) > label:hover,
	.rate:not(:checked) > label:hover ~ label {
		color: #deb217;  
	}
	.rate > input:checked + label:hover,
	.rate > input:checked + label:hover ~ label,
	.rate > input:checked ~ label:hover,
	.rate > input:checked ~ label:hover ~ label,
	.rate > label:hover ~ input:checked ~ label {
		color: #c59b08;
	}

  </style>`;

document.querySelectorAll(".rate input").forEach(e => {
	e.addEventListener('click',(ev) => {
		sfInput = document.querySelector("#"+ratingDocProp+" input")
		sfInput.value=ev.srcElement.value
		sfInput.focus()
		sfInput.blur()
	});
})

Feel free to tweak the javascript code to add more stars or change the star ★ icon to some other emoji or unicode symbol like: ♥ ☺ ☻ depending on your needs