@@ -0,0 +1,437 @@
<!DOCTYPE html>
< html >
< head >
< script src ="http://fb.me/react-0.14.3.js "> </ script >
< script src ="http://fb.me/react-dom-0.14.3.js "> </ script >
< meta charset ="utf-8 ">
< title > JS Bin</ title >
< style id ="jsbin-css ">
.rating-table {
border : 0 ;
padding : 0 ;
margin-top : 3px ;
}
.rating-table tr .avg-ratings {
font-size : 16px ;
}
.rating-table tr .avg-ratings td {
width : 5em ;
}
.rating-table tr .avg-ratings td .rating-number {
font-size : 48px ;
line-height : 48px ;
padding : 0 0.5em ;
text-align : center;
}
.rating-table tr .avg-ratings td .rating-star {
position : relative;
width : calc (1em * 5 );
padding : 0 ;
margin : 6px auto;
}
.rating-table tr .avg-ratings td .rating-star .fa .fa-star {
width : 1em ;
}
.rating-table tr .avg-ratings td .rating-star .bg {
position : relative;
z-index : 0 ;
white-space : nowrap;
color : # eeeeee
}
.rating-table tr .avg-ratings td .rating-star .fg {
position : absolute;
top : 0 ;
z-index : 1 ;
white-space : nowrap;
overflow-x : hidden;
color : # fec558
}
.rating-table tr .avg-ratings td .rating-count {
font-size : 11px ;
line-height : 1 ;
color : # 757575
text-align : center;
}
.rating-table td {
background-color : transparent;
border : 0 ;
padding : 0 ;
}
.rating-table td .stars {
width : 2.5em ;
text-align : left;
font-size : 12px ;
vertical-align : baseline;
}
.rating-table td .stars i {
width : auto;
color : # b7bfca
}
.rating-table td .stars .star-count {
display : inline-block;
vertical-align : baseline;
text-align : left;
font-size : 11px ;
}
.rating-table td .bar {
height : 17px ;
line-height : 17px ;
}
.rating-table td .bar .bar-bg {
width : 100% ;
height : 17px ;
display : inline-block;
background-color : # eeeeee
}
.rating-table td .bar .bar-bg .bar-fg {
height : 100% ;
border : 1px solid transparent;
box-sizing : border-box;
}
.rating-table td .bar .bar-bg .bar-fg .star-5 {
background-color : # 9adbb8
border-color : # 9adbb8
}
.rating-table td .bar .bar-bg .bar-fg .star-4 {
background-color : # d2e8b5
border-color : # d2e8b5
}
.rating-table td .bar .bar-bg .bar-fg .star-3 {
background-color : # fde6ac
border-color : # fde6ac
}
.rating-table td .bar .bar-bg .bar-fg .star-2 {
background-color : # f7c498
border-color : # f7c498
}
.rating-table td .bar .bar-bg .bar-fg .star-1 {
background-color : # efb3a8
border-color : # efb3a8
}
.rating-table td .rating-count {
width : 1em ;
padding-left : 10px ;
font-size : 11px ;
vertical-align : baseline;
text-align : left;
color : # 757575
}
</ style >
</ head >
< body >
< script id ="jsbin-javascript ">
"use strict" ;
var ratings = [ 300 , 234 , 13 , 1 , 0 ] ;
var RatingBarsTable = React . createClass ( {
displayName : "RatingBarsTable" ,
getAverageRating : function getAverageRating ( ) {
// var averageRating = this.props.ratings.reduce((rating, sum) {
// return rating + sum;
// }, 0)
return 0 ;
} ,
renderFiveStars : function renderFiveStars ( ) {
return '12345' . split ( ) . map ( function ( index ) {
return React . createElement ( "i" , { className : "fa fa-star" , key : index } ) ;
} ) ;
} ,
renderBars : function renderBars ( ) {
var sum = this . props . ratings . reduce ( function ( value , sum ) {
return sum + value ;
} , 0 ) ;
return this . props . ratings . map ( function ( rating , index ) {
return React . createElement (
"tr" ,
{ key : index } ,
React . createElement (
"td" ,
{ className : "stars" } ,
React . createElement ( "i" , { className : "fa fa-star" } ) ,
React . createElement (
"span" ,
{ className : "star-count" } ,
5 - index
)
) ,
React . createElement (
"td" ,
{ className : "bar" } ,
React . createElement (
"div" ,
{ className : "bar-bg" } ,
React . createElement ( "div" , { className : "star-" + index + " bar-fg" , style : { width : rating / sum + "%"
} } )
)
) ,
React . createElement (
"td" ,
{ className : "rating-count" } ,
rating
)
) ;
} ) ;
} ,
render : function render ( ) {
var averageRating = this . getAverageRating ( ) ;
var sum = this . props . ratings . reduce ( function ( value , sum ) {
return sum + value ;
} , 0 ) ;
return React . createElement (
"table" ,
{ className : "rating-table" , cellspacing : "0" , cellpadding : "0" } ,
React . createElement (
"tr" ,
{ className : "avg-ratings" } ,
React . createElement (
"td" ,
{ rowspan : "6" } ,
React . createElement (
"div" ,
{ className : "rating-number" } ,
averageRating
) ,
React . createElement (
"div" ,
{ className : "rating-star" } ,
React . createElement (
"div" ,
{ className : "bg" } ,
this . renderFiveStars ( )
) ,
React . createElement (
"div" ,
{ className : "fg" , style : {
width : "calc(1em * 5 * " + averageRating + " / 5)"
} } ,
this . renderFiveStars ( )
)
) ,
React . createElement (
"div" ,
{ className : "rating-count" } ,
sum ,
" ratings"
)
)
) ,
this . renderBars ( )
) ;
}
} ) ;
ReactDOM . render ( React . createElement ( RatingBarsTable , { ratings : ratings } ) , document . body ) ;
</ script >
< script id ="jsbin-source-html " type ="text/html "> < ! DOCTYPE html >
< html >
< head >
< script src = "//fb.me/react-0.14.3.js" > < \/script >
< script src = "//fb.me/react-dom-0.14.3.js" > < \/script >
< meta charset = "utf-8" >
< title > JS Bin</ title >
</ head >
< body >
</ body >
</ html > </ script >
< script id ="jsbin-source-css " type ="text/css "> . rating - table {
@rating - bar - star - five - color : #9 adbb8 ;
@rating - bar - star - four - color : #d2e8b5;
@rating - bar - star - three - color : #fde6ac;
@rating - bar - star - two - color : #f7c498;
@rating - bar - star - one - color : #efb3a8;
@rating - bar - star - bg - color : #eee;
@star - light - color : #fec558;
@star - dark - color : #eee;
@star - gray - color : #b7bfca;
@small - text - color : #757575 ;
@small - text - size : 11 px ;
border: 0 ;
padding: 0 ;
margin - top : 3 px ;
tr . avg - ratings {
// in this case, 1em = 16px
font - size : 16 px ;
td {
width: 5 em ;
. rating - number {
font - size : 48 px ;
line - height : 48 px ;
padding: 0 0.5 em ;
text - align : center ;
}
. rating - star {
position: relative ;
width: ~ "calc(1em * 5)" ;
padding: 0 ;
margin: 6 px auto ;
. fa . fa - star {
width : 1 em ;
}
. bg {
position : relative ;
z - index : 0 ;
white - space : nowrap ;
color: @star - dark - color ;
}
. fg {
position: absolute ;
top: 0 ;
z - index : 1 ;
white - space : nowrap ;
overflow - x : hidden ;
color: @star - light - color ;
// say, if you want 4.5 out of 5 rating:
// width: calc(1em * 5 * rating / 5);
}
}
. rating - count {
font - size : @small - text - size ;
line - height : 1 ;
color: @small - text - color ;
text - align : center ;
}
}
}
td {
background - color : transparent ;
border: 0 ;
padding: 0 ;
& . stars {
width: 2.5 em ;
text - align : left ;
font - size : 12 px ;
vertical - align : baseline ;
i {
width: auto ;
color: @star - gray - color ;
}
. star - count {
display: inline - block ;
vertical - align : baseline ;
text - align : left ;
font - size : @small - text - size ;
}
}
& . bar {
height: 17 px ;
line - height : 17 px ;
. bar - bg {
width : 100 % ;
height : 17 px ;
display: inline - block ;
background - color : @rating - bar - star - bg - color ;
. bar - fg {
height : 100 % ;
border : 1 px solid transparent ;
box - sizing : border - box ;
& . star - 5 {
background - color : @rating - bar - star - five - color ;
border - color : @rating - bar - star - five - color ;
}
& . star - 4 {
background - color : @rating - bar - star - four - color ;
border - color : @rating - bar - star - four - color ;
}
& . star - 3 {
background - color : @rating - bar - star - three - color ;
border - color : @rating - bar - star - three - color ;
}
& . star - 2 {
background - color : @rating - bar - star - two - color ;
border - color : @rating - bar - star - two - color ;
}
& . star - 1 {
background - color : @rating - bar - star - one - color ;
border - color : @rating - bar - star - one - color ;
}
}
}
}
& . rating - count {
width : 1 em ;
padding - left : 10 px ;
font - size : @small - text - size ;
vertical - align : baseline ;
text - align : left ;
color: @small - text - color ;
}
}
} </ script >
< script id ="jsbin-source-javascript " type ="text/javascript "> var ratings = [
300 ,
234 ,
13 ,
1 ,
0
] ;
var RatingBarsTable = React . createClass ( {
getAverageRating : function ( ) {
// var averageRating = this.props.ratings.reduce((rating, sum) {
// return rating + sum;
// }, 0)
return 0 ;
} ,
renderFiveStars : function ( ) {
return '12345' . split ( ) . map ( function ( index ) {
return ( < i className = "fa fa-star" key = { index } /> ) ;
} ) ;
} ,
renderBars : function ( ) {
var sum = this . props . ratings . reduce ( function ( value , sum ) {
return sum + value ;
} , 0 ) ;
return this . props . ratings . map ( function ( rating , index ) {
return (
< tr key = { index } >
< td className = "stars" >
< i className = "fa fa-star" />
< span className = "star-count" > { 5 - index } </ span >
</ td >
< td className = "bar" > < div className = "bar-bg" > < div className = { `star-${ index } } style = { { width : `${ rating / sum }
} } > </ div > </ div > </ td >
< td className = "rating-count" > { rating } </ td >
</ tr >
) ;
} ) ;
} ,
render : function ( ) {
var averageRating = this . getAverageRating ( ) ;
var sum = this . props . ratings . reduce ( function ( value , sum ) {
return sum + value ;
} , 0 ) ;
return (
< table className = "rating-table" cellspacing = "0" cellpadding = "0" >
< tr className = "avg-ratings" >
< td rowspan = "6" >
< div className = "rating-number" > { averageRating } </ div >
< div className = "rating-star" >
< div className = "bg" > { this . renderFiveStars ( ) } </ div >
< div className = "fg" style = { {
width : `calc(1em * 5 * ${ averageRating }
} } > { this . renderFiveStars ( ) } </ div >
</ div >
< div className = "rating-count" > { sum } ratings</ div >
</ td >
</ tr >
{ this . renderBars ( ) }
</ table >
) ;
}
} ) ;
ReactDOM . render ( < RatingBarsTable ratings = { ratings } /> , document . body ) ;
</ script > </ body >
</ html >
Anonymous created this gist