Add type classes on class output (wcharczuk#106)

* Add type classes on class output Without this it is quite difficult to differentiate between fill and stroke elements, f.e. with basic charts with fillings or legends generally: `svg path:nth-last-of-type(2).legend` Text elements needed to be accessed with text.classname which isn't really best practise. This way they can be accessed easier: `svg .legend.fill` * Add type classes to examples * Fix import in custom_stylesheets example
jhelberg · Feb 19, 2019 · 59451fb · 59451fb
1 parent 3cb33d4
commit 59451fb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/_examples/css_classes/main.go b/_examples/css_classes/main.go
@@ -17,7 +17,8 @@ func inlineSVGWithClasses(res http.ResponseWriter, req *http.Request) {
 			"<body>"))
 
 	pie := chart.PieChart{
-		// Note that setting ClassName will cause all other inline styles to be dropped!
+		// Notes: * Setting ClassName will cause all other inline styles to be dropped!
+		//        * The following type classes may be added additionally: stroke, fill, text
 		Background: chart.Style{ClassName: "background"},
 		Canvas: chart.Style{
 			ClassName: "canvas",
@@ -42,12 +43,12 @@ func css(res http.ResponseWriter, req *http.Request) {
 	res.Header().Set("Content-Type", "text/css")
 	res.Write([]byte("svg .background { fill: white; }" +
 		"svg .canvas { fill: white; }" +
-		"svg path.blue { fill: blue; stroke: lightblue; }" +
-		"svg path.green { fill: green; stroke: lightgreen; }" +
-		"svg path.gray { fill: gray; stroke: lightgray; }" +
-		"svg text.blue { fill: white; }" +
-		"svg text.green { fill: white; }" +
-		"svg text.gray { fill: white; }"))
+		"svg .blue.fill.stroke { fill: blue; stroke: lightblue; }" +
+		"svg .green.fill.stroke { fill: green; stroke: lightgreen; }" +
+		"svg .gray.fill.stroke { fill: gray; stroke: lightgray; }" +
+		"svg .blue.text { fill: white; }" +
+		"svg .green.text { fill: white; }" +
+		"svg .gray.text { fill: white; }"))
 }
 
 func main() {

diff --git a/_examples/custom_stylesheets/main.go b/_examples/custom_stylesheets/main.go
@@ -2,19 +2,19 @@ package main
 
 import (
 	"fmt"
-	"github.com/hashworks/go-chart"
+	"github.com/wcharczuk/go-chart"
 	"log"
 	"net/http"
 )
 
 const style = "svg .background { fill: white; }" +
 	"svg .canvas { fill: white; }" +
-	"svg path.blue { fill: blue; stroke: lightblue; }" +
-	"svg path.green { fill: green; stroke: lightgreen; }" +
-	"svg path.gray { fill: gray; stroke: lightgray; }" +
-	"svg text.blue { fill: white; }" +
-	"svg text.green { fill: white; }" +
-	"svg text.gray { fill: white; }"
+	"svg .blue.fill.stroke { fill: blue; stroke: lightblue; }" +
+	"svg .green.fill.stroke { fill: green; stroke: lightgreen; }" +
+	"svg .gray.fill.stroke { fill: gray; stroke: lightgray; }" +
+	"svg .blue.text { fill: white; }" +
+	"svg .green.text { fill: white; }" +
+	"svg .gray.text { fill: white; }"
 
 func svgWithCustomInlineCSS(res http.ResponseWriter, _ *http.Request) {
 	res.Header().Set("Content-Type", chart.ContentTypeSVG)

diff --git a/vector_renderer.go b/vector_renderer.go
@@ -311,15 +311,28 @@ func (c *canvas) getFontFace(s Style) string {
 
 // styleAsSVG returns the style as a svg style or class string.
 func (c *canvas) styleAsSVG(s Style) string {
-	if s.ClassName != "" {
-		return fmt.Sprintf("class=\"%s\"", s.ClassName)
-	}
 	sw := s.StrokeWidth
 	sc := s.StrokeColor
 	fc := s.FillColor
 	fs := s.FontSize
 	fnc := s.FontColor
 
+	if s.ClassName != "" {
+		var classes []string
+		classes = append(classes, s.ClassName)
+		if !sc.IsZero() {
+			classes = append(classes, "stroke")
+		}
+		if !fc.IsZero() {
+			classes = append(classes, "fill")
+		}
+		if fs != 0 || s.Font != nil {
+			classes = append(classes, "text")
+		}
+
+		return fmt.Sprintf("class=\"%s\"", strings.Join(classes, " "))
+	}
+
 	var pieces []string
 
 	if sw != 0 {