SVG Color Star Rating

Greg_Deckler — Sun, 02 Sep 2018 15:54:56 GMT
First, I would say that this is a bit of a work in progress as I want to add scaling and more shapes to this. Second, this measure builds off of cwebb's Star Rating Quick Measure that was included in the Power BI Desktop. Essentially, the desire was to move beyond the limitations of unicode characters to achieve star ratings with colors.
Color Star Rating = 
VAR __MAX_NUMBER_OF_STARS = 5
VAR __MIN_RATED_VALUE = 0
VAR __MAX_RATED_VALUE = 5
VAR __BASE_VALUE = SUM([Score])
VAR __NORMALIZED_BASE_VALUE =
	MIN(
		MAX(
			DIVIDE(
				__BASE_VALUE - __MIN_RATED_VALUE,
				__MAX_RATED_VALUE - __MIN_RATED_VALUE
			),
			0
		),
		1
	)
VAR __STAR_RATING = ROUND(__NORMALIZED_BASE_VALUE * __MAX_NUMBER_OF_STARS, 0)
VAR __shape = "Star"
VAR __color = "Red"
VAR __backgroundColor = "White"
VAR __radius = 9
VAR __opacity = 0.75
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='" & 20*__MAX_RATED_VALUE & "' height='20'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='10' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextTriangle = "<polygon points=""0,20 20,20 10,0"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextDot = "<circle cx='10' cy='10' r='" & 1 & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextSquare = "<polygon points=""0,20 0,0, 20,1 20,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextDiamond = "<polygon points=""10,0 20,10, 10,20 0,10"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextRect = "<polygon points=""0,20 0,0, 40,1 40,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextHex = "<polygon points=""10,0 20,4 20,16 10,20 0,16 0,4"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextOct = "<polygon points=""6,0 14,0 20,6 20,14 14,20 6,20 0,14 0,6"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextPent = "<polygon points=""10,0 20,8 16,20 4,20 0,8"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStar1 = "<polygon points=""10,0 12,9 20,8 13,13 16,20 10,15 4,20 7,13 0,9 8,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStar2 = "<polygon points=""30,0 32,9 40,8 33,13 36,20 30,15 24,20 27,13 20,9 28,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStar3 = "<polygon points=""50,0 52,9 60,8 53,13 56,20 50,15 44,20 47,13 40,9 48,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStar4 = "<polygon points=""70,0 72,9 80,8 73,13 76,20 70,15 64,20 67,13 60,9 68,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStar5 = "<polygon points=""90,0 92,9 100,8 93,13 96,20 90,15 84,20 87,13 80,9 88,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 

VAR __shapeTextCircleBackground = "<circle cx='10' cy='10' r='" & __radius & "' fill='" & __backgroundColor & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextTriangleBackground = "<polygon points=""0,20 20,20 10,0"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextDotBackground = "<circle cx='10' cy='10' r='" & 1 & "' fill='" & __backgroundColor & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextSquareBackground = "<polygon points=""0,20 0,0, 20,1 20,20"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextDiamondBackground = "<polygon points=""10,0 20,10, 10,20 0,10"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextRectBackground = "<polygon points=""0,20 0,0, 40,1 40,20"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextHexBackground = "<polygon points=""10,0 20,4 20,16 10,20 0,16 0,4"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextOctBackground = "<polygon points=""6,0 14,0 20,6 20,14 14,20 6,20 0,14 0,6"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextPentBackground = "<polygon points=""10,0 20,8 16,20 4,20 0,8"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />" 
VAR __shapeTextStarBackground1 = "<polygon cx='0' cy='0' points=""10,0 12,9 20,8 13,13 16,20 10,15 4,20 7,13 0,9 8,9"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:1;fill-rule:evenodd;"" />" 
VAR __shapeTextStarBackground2 = "<polygon points=""30,0 32,9 40,8 33,13 36,20 30,15 24,20 27,13 20,9 28,9"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:1;fill-rule:evenodd;"" />" 
VAR __shapeTextStarBackground3 = "<polygon points=""50,0 52,9 60,8 53,13 56,20 50,15 44,20 47,13 40,9 48,9"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:1;fill-rule:evenodd;"" />" 
VAR __shapeTextStarBackground4 = "<polygon points=""70,0 72,9 80,8 73,13 76,20 70,15 64,20 67,13 60,9 68,9"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:1;fill-rule:evenodd;"" />" 
VAR __shapeTextStarBackground5 = "<polygon points=""90,0 92,9 100,8 93,13 96,20 90,15 84,20 87,13 80,9 88,9"" style=""fill:" & __backgroundColor & ";stroke:" & __color & ";stroke-width:1;fill-rule:evenodd;"" />" 

VAR __shapeText1 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar1,
        "Diamond",__shapeTextDiamond,
        __shapeTextStar1
    )
VAR __shapeText2 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar2,
        "Diamond",__shapeTextDiamond,
        __shapeTextStar2
    )
VAR __shapeText3 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar3,
        "Diamond",__shapeTextDiamond,
        __shapeTextStar3
    )
VAR __shapeText4 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar4,
        "Diamond",__shapeTextDiamond,
        __shapeTextStar4
    )
VAR __shapeText5 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar5,
        "Diamond",__shapeTextDiamond,
        __shapeTextStar5
    )

VAR __shapeTextBackground1 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangleBackground,
        "Circle",__shapeTextCircleBackground,
        "Dot",__shapeTextDotBackground,
        "Square",__shapeTextSquareBackground,
        "Rectangle",__shapeTextRectBackground,
        "Hexagon",__shapeTextHexBackground,
        "Octagon",__shapeTextOctBackground,
        "Pentagon",__shapeTextPentBackground,
        "Star",__shapeTextStarBackground1,
        "Diamond",__shapeTextDiamondBackground,
        __shapeTextStarBackground1
    )
VAR __shapeTextBackground2 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangleBackground,
        "Circle",__shapeTextCircleBackground,
        "Dot",__shapeTextDotBackground,
        "Square",__shapeTextSquareBackground,
        "Rectangle",__shapeTextRectBackground,
        "Hexagon",__shapeTextHexBackground,
        "Octagon",__shapeTextOctBackground,
        "Pentagon",__shapeTextPentBackground,
        "Star",__shapeTextStarBackground2,
        "Diamond",__shapeTextDiamondBackground,
        __shapeTextStarBackground2
    )
VAR __shapeTextBackground3 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangleBackground,
        "Circle",__shapeTextCircleBackground,
        "Dot",__shapeTextDotBackground,
        "Square",__shapeTextSquareBackground,
        "Rectangle",__shapeTextRectBackground,
        "Hexagon",__shapeTextHexBackground,
        "Octagon",__shapeTextOctBackground,
        "Pentagon",__shapeTextPentBackground,
        "Star",__shapeTextStarBackground3,
        "Diamond",__shapeTextDiamondBackground,
        __shapeTextStarBackground3
    )
VAR __shapeTextBackground4 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangleBackground,
        "Circle",__shapeTextCircleBackground,
        "Dot",__shapeTextDotBackground,
        "Square",__shapeTextSquareBackground,
        "Rectangle",__shapeTextRectBackground,
        "Hexagon",__shapeTextHexBackground,
        "Octagon",__shapeTextOctBackground,
        "Pentagon",__shapeTextPentBackground,
        "Star",__shapeTextStarBackground4,
        "Diamond",__shapeTextDiamondBackground,
        __shapeTextStarBackground4
    )
VAR __shapeTextBackground5 = 
    SWITCH(__shape,
        "Triangle",__shapeTextTriangleBackground,
        "Circle",__shapeTextCircleBackground,
        "Dot",__shapeTextDotBackground,
        "Square",__shapeTextSquareBackground,
        "Rectangle",__shapeTextRectBackground,
        "Hexagon",__shapeTextHexBackground,
        "Octagon",__shapeTextOctBackground,
        "Pentagon",__shapeTextPentBackground,
        "Star",__shapeTextStarBackground5,
        "Diamond",__shapeTextDiamondBackground,
        __shapeTextStarBackground5
    )

VAR __rating = 
	IF(
		NOT ISBLANK(__BASE_VALUE),
        SWITCH(__STAR_RATING,
            0,__shapeTextBackground1&__shapeTextBackground2&__shapeTextBackground3&__shapeTextBackground4&__shapeTextBackground5,
            1,__shapeText1&__shapeTextBackground2&__shapeTextBackground3&__shapeTextBackground4&__shapeTextBackground5,
            2,__shapeText1&__shapeText2&__shapeTextBackground3&__shapeTextBackground4&__shapeTextBackground5,
            3,__shapeText1&__shapeText2&__shapeText3&__shapeTextBackground4&__shapeTextBackground5,
            4,__shapeText1&__shapeText2&__shapeText3&__shapeText4&__shapeTextBackground5,
            5,__shapeText1&__shapeText2&__shapeText3&__shapeText4&__shapeText5,
            ""
        )   
	)
VAR __return = __header & __rating & __footer
RETURN __return
eyJrIjoiNTc0YjZlZmMtOTUzMC00OWRiLWFjZTYtMmU0ZmQ1MGFhNDFlIiwidCI6IjRhMDQyNzQzLTM3M2EtNDNkMi04MjdiLTAwM2Y0YzdiYTFlNSIsImMiOjN9
Re: SVG Color Star Rating

Anonymous — Wed, 03 Oct 2018 15:00:17 GMT
If there was an ability to display partial stars that would make it even more useful. Very good work!
Re: SVG Color Star Rating

Greg_Deckler — Wed, 03 Oct 2018 16:30:36 GMT
I totally agree with that and I was thinking along those lines when I created it but haven't arrived at the solution to that issue quite yet!
topic Re: SVG Color Star Rating in Quick Measures Gallery

SVG Color Star Rating

Re: SVG Color Star Rating

Re: SVG Color Star Rating
