zeni/go-chart
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

Add type classes on class output (#106)

Browse source 
* 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
This commit is contained in:
Justin Kromlinger 2019-02-19 19:51:41 +01:00 committed by Will Charczuk
parent 3cb33d48d3
commit 59451fbeb4
3 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
_examples/css_classes/main.go
View file

@ -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() {

14
_examples/custom_stylesheets/main.go
View file

@ -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)

19
vector_renderer.go
View file

@ -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 {