Playing around with SVG

pages/statistics/statistics.go

@@ -1,6 +1,7 @@
 package statistics
 
 import (
+	"fmt"
 	"net/http"
 
 	"github.com/aerogo/aero"
@@ -63,9 +64,21 @@ func Get(ctx *aero.Context) string {
 		}
 	}
 
-	if len(screenSizesSorted) > 5 {
+	slices := []*utils.PieChartSlice{}
-		screenSizesSorted = screenSizesSorted[:5]
+	current := 0.0
+
+	for _, item := range screenSizesSorted {
+		percentage := float64(item.Value) / float64(len(analytics))
+
+		slices = append(slices, &utils.PieChartSlice{
+			From:  current,
+			To:    current + percentage,
+			Title: fmt.Sprintf("%s (%d%%)", item.Key, int(percentage*100+0.5)),
+			Color: fmt.Sprintf("rgba(255, 64, 0, %.3f)", 0.8-current*0.8),
+		})
+
+		current += percentage
 	}
 
-	return ctx.HTML(components.Statistics(screenSizesSorted))
+	return ctx.HTML(components.Statistics(slices))
 }

pages/statistics/statistics.pixy

@@ -1,19 +1,14 @@
-component Statistics(screenSizes []*utils.AnalyticsItem)
+component Statistics(screenSizes []*utils.PieChartSlice)
 	h1 Statistics
 
 	.statistics
 		h3 Screen size
-		PieChart
+		PieChart(screenSizes)
 		//- canvas#screen-sizes.graph(data-values=utils.ToJSON(screenSizes))
 
-component PieChart
+component PieChart(slices []*utils.PieChartSlice)
 	svg.graph(viewBox="-1.05 -1.05 2.1 2.1")
-		g
+		each slice in slices
-			title Demo (50%)
+			g
-			path.slice.slice-1(d=utils.SVGSlicePath(0, 0.5))
+				title= slice.Title
-		g
+				path.slice(d=utils.SVGSlicePath(slice.From, slice.To), fill=slice.Color)
-			title Demo (30%)
-			path.slice.slice-2(d=utils.SVGSlicePath(0.5, 0.8))
-		g
-			title Demo (20%)
-			path.slice.slice-3(d=utils.SVGSlicePath(0.8, 1.0))

pages/statistics/statistics.scarlet

@@ -12,13 +12,4 @@
 	default-transition
 	transform scale(1)
 	:hover
-		transform scale(1.05)
+		transform scale(1.05)
-
-.slice-1
-	opacity 0.8
-
-.slice-2
-	opacity 0.6
-
-.slice-3
-	opacity 0.4

utils/SVGPieChartPath.go

@@ -5,6 +5,14 @@ import (
 	"math"
 )
 
+// PieChartSlice ...
+type PieChartSlice struct {
+	From  float64
+	To    float64
+	Title string
+	Color string
+}
+
 // coords returns the coordinates for the given percentage.
 func coords(percent float64) (float64, float64) {
 	x := math.Cos(2 * math.Pi * percent)