Add type classes on class output (#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
This commit is contained in:
parent
3cb33d48d3
commit
59451fbeb4
3 changed files with 31 additions and 17 deletions
|
@ -17,7 +17,8 @@ func inlineSVGWithClasses(res http.ResponseWriter, req *http.Request) {
|
||||||
"<body>"))
|
"<body>"))
|
||||||
|
|
||||||
pie := chart.PieChart{
|
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"},
|
Background: chart.Style{ClassName: "background"},
|
||||||
Canvas: chart.Style{
|
Canvas: chart.Style{
|
||||||
ClassName: "canvas",
|
ClassName: "canvas",
|
||||||
|
@ -42,12 +43,12 @@ func css(res http.ResponseWriter, req *http.Request) {
|
||||||
res.Header().Set("Content-Type", "text/css")
|
res.Header().Set("Content-Type", "text/css")
|
||||||
res.Write([]byte("svg .background { fill: white; }" +
|
res.Write([]byte("svg .background { fill: white; }" +
|
||||||
"svg .canvas { fill: white; }" +
|
"svg .canvas { fill: white; }" +
|
||||||
"svg path.blue { fill: blue; stroke: lightblue; }" +
|
"svg .blue.fill.stroke { fill: blue; stroke: lightblue; }" +
|
||||||
"svg path.green { fill: green; stroke: lightgreen; }" +
|
"svg .green.fill.stroke { fill: green; stroke: lightgreen; }" +
|
||||||
"svg path.gray { fill: gray; stroke: lightgray; }" +
|
"svg .gray.fill.stroke { fill: gray; stroke: lightgray; }" +
|
||||||
"svg text.blue { fill: white; }" +
|
"svg .blue.text { fill: white; }" +
|
||||||
"svg text.green { fill: white; }" +
|
"svg .green.text { fill: white; }" +
|
||||||
"svg text.gray { fill: white; }"))
|
"svg .gray.text { fill: white; }"))
|
||||||
}
|
}
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
|
|
|
@ -2,19 +2,19 @@ package main
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"fmt"
|
"fmt"
|
||||||
"github.com/hashworks/go-chart"
|
"github.com/wcharczuk/go-chart"
|
||||||
"log"
|
"log"
|
||||||
"net/http"
|
"net/http"
|
||||||
)
|
)
|
||||||
|
|
||||||
const style = "svg .background { fill: white; }" +
|
const style = "svg .background { fill: white; }" +
|
||||||
"svg .canvas { fill: white; }" +
|
"svg .canvas { fill: white; }" +
|
||||||
"svg path.blue { fill: blue; stroke: lightblue; }" +
|
"svg .blue.fill.stroke { fill: blue; stroke: lightblue; }" +
|
||||||
"svg path.green { fill: green; stroke: lightgreen; }" +
|
"svg .green.fill.stroke { fill: green; stroke: lightgreen; }" +
|
||||||
"svg path.gray { fill: gray; stroke: lightgray; }" +
|
"svg .gray.fill.stroke { fill: gray; stroke: lightgray; }" +
|
||||||
"svg text.blue { fill: white; }" +
|
"svg .blue.text { fill: white; }" +
|
||||||
"svg text.green { fill: white; }" +
|
"svg .green.text { fill: white; }" +
|
||||||
"svg text.gray { fill: white; }"
|
"svg .gray.text { fill: white; }"
|
||||||
|
|
||||||
func svgWithCustomInlineCSS(res http.ResponseWriter, _ *http.Request) {
|
func svgWithCustomInlineCSS(res http.ResponseWriter, _ *http.Request) {
|
||||||
res.Header().Set("Content-Type", chart.ContentTypeSVG)
|
res.Header().Set("Content-Type", chart.ContentTypeSVG)
|
||||||
|
|
|
@ -311,15 +311,28 @@ func (c *canvas) getFontFace(s Style) string {
|
||||||
|
|
||||||
// styleAsSVG returns the style as a svg style or class string.
|
// styleAsSVG returns the style as a svg style or class string.
|
||||||
func (c *canvas) styleAsSVG(s Style) string {
|
func (c *canvas) styleAsSVG(s Style) string {
|
||||||
if s.ClassName != "" {
|
|
||||||
return fmt.Sprintf("class=\"%s\"", s.ClassName)
|
|
||||||
}
|
|
||||||
sw := s.StrokeWidth
|
sw := s.StrokeWidth
|
||||||
sc := s.StrokeColor
|
sc := s.StrokeColor
|
||||||
fc := s.FillColor
|
fc := s.FillColor
|
||||||
fs := s.FontSize
|
fs := s.FontSize
|
||||||
fnc := s.FontColor
|
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
|
var pieces []string
|
||||||
|
|
||||||
if sw != 0 {
|
if sw != 0 {
|
||||||
|
|
Loading…
Reference in a new issue