feat: support vertical orient legend

chart.go

@@ -108,10 +108,13 @@ func (o *ChartOption) FillDefault(theme string) {
 		o.Title.SubtextStyle.Font = o.Font
 	}
 
-	o.Legend.Theme = t
+	o.Legend.Theme = theme
 	if o.Legend.Style.FontSize == 0 {
 		o.Legend.Style.FontSize = 10
 	}
+	if o.Legend.Left == "" {
+		o.Legend.Left = PositionCenter
+	}
 	if o.Legend.Style.Font == nil {
 		o.Legend.Style.Font = o.Font
 	}

draw.go

@@ -39,6 +39,11 @@ const (
 	PositionBottom = "bottom"
 )
 
+const (
+	OrientHorizontal = "horizontal"
+	OrientVertical   = "vertical"
+)
+
 type Draw struct {
 	Render chart.Renderer
 	Box    chart.Box

legend.go

@@ -23,16 +23,31 @@
 package charts
 
 import (
+	"strconv"
+	"strings"
+
 	"github.com/wcharczuk/go-chart/v2"
 )
 
 type LegendOption struct {
-	Theme *Theme
+	Theme string
+	// Legend show flag, if nil or true, the legend will be shown
+	Show *bool
+	// Legend text style
 	Style chart.Style
-	Data  []string
+	// Text array of legend
-	Left  string
+	Data []string
-	Right string
+	// Distance between legend component and the left side of the container.
+	// It can be pixel value: 20, percentage value: 20%,
+	// or position value: right, center.
+	Left string
+	// Distance between legend component and the top side of the container.
+	// It can be pixel value: 20.
+	Top string
+	// Legend marker and text aligning, it can be left or right, default is left.
 	Align string
+	// The layout orientation of legend, it can be horizontal or vertical, default is horizontal.
+	Orient string
 }
 type legend struct {
 	d   *Draw
@@ -49,10 +64,10 @@ func NewLegend(d *Draw, opt LegendOption) *legend {
 func (l *legend) Render() (chart.Box, error) {
 	d := l.d
 	opt := l.opt
-	if len(opt.Data) == 0 {
+	if len(opt.Data) == 0 || isFalse(opt.Show) {
 		return chart.BoxZero, nil
 	}
-	theme := opt.Theme
+	theme := NewTheme(opt.Theme)
 	padding := opt.Style.Padding
 	legendDraw, err := NewDraw(DrawOption{
 		Parent: d,
@@ -65,49 +80,91 @@ func (l *legend) Render() (chart.Box, error) {
 
 	x := 0
 	y := 0
+	top := 0
+	// TODO TOP 暂只支持数值
+	if opt.Top != "" {
+		top, _ = strconv.Atoi(opt.Top)
+		y += top
+	}
 	legendWidth := 30
 	legendDotHeight := 5
 	textPadding := 5
 	legendMargin := 10
 
 	widthCount := 0
+	maxTextWidth := 0
 	// 文本宽度
 	for _, text := range opt.Data {
 		b := r.MeasureText(text)
+		if b.Width() > maxTextWidth {
+			maxTextWidth = b.Width()
+		}
 		widthCount += b.Width()
 	}
-	// 加上标记
+	if opt.Orient == OrientVertical {
-	widthCount += legendWidth * len(opt.Data)
+		widthCount = maxTextWidth + legendWidth + textPadding
-	// 文本的padding
+	} else {
-	widthCount += 2 * textPadding * len(opt.Data)
+		// 加上标记
-	// margin的宽度
+		widthCount += legendWidth * len(opt.Data)
-	widthCount += legendMargin * (len(opt.Data) - 1)
+		// 文本的padding
+		widthCount += 2 * textPadding * len(opt.Data)
+		// margin的宽度
+		widthCount += legendMargin * (len(opt.Data) - 1)
+	}
 
-	// TODO 支持更多的定位方式
+	left := 0
-	// 居中
+	switch opt.Left {
-	x = (legendDraw.Box.Width() - widthCount) >> 1
+	case PositionRight:
-	for index, text := range opt.Data {
+		left = legendDraw.Box.Width() - widthCount
-		if index != 0 {
+	case PositionCenter:
-			x += legendMargin
+		left = (legendDraw.Box.Width() - widthCount) >> 1
+	default:
+		if strings.HasSuffix(opt.Left, "%") {
+			value, _ := strconv.Atoi(strings.ReplaceAll(opt.Left, "%", ""))
+			left = legendDraw.Box.Width() * value / 100
+		} else {
+			value, _ := strconv.Atoi(opt.Left)
+			left = value
 		}
+	}
+	x = left
+	for index, text := range opt.Data {
 		style := chart.Style{
 			StrokeColor: theme.GetSeriesColor(index),
 			FillColor:   theme.GetSeriesColor(index),
 			StrokeWidth: 3,
 		}
-		textBox := r.MeasureText(text)
+		style.GetFillAndStrokeOptions().WriteDrawingOptionsToRenderer(r)
-		renderText := func() {
-			x += textPadding
-			legendDraw.text(text, x, y+legendDotHeight-2)
-			x += textBox.Width()
-			x += textPadding
-		}
 
+		textBox := r.MeasureText(text)
+		var renderText func()
+		if opt.Orient == OrientVertical {
+			// 垂直
+			// 重置x的位置
+			x = left
+			renderText = func() {
+				x += textPadding
+				legendDraw.text(text, x, y+legendDotHeight-2)
+				x += textBox.Width()
+				y += (2*legendDotHeight + legendMargin)
+			}
+
+		} else {
+			// 水平
+			if index != 0 {
+				x += legendMargin
+			}
+			renderText = func() {
+				x += textPadding
+				legendDraw.text(text, x, y+legendDotHeight-2)
+				x += textBox.Width()
+				x += textPadding
+			}
+		}
 		if opt.Align == PositionRight {
 			renderText()
 		}
 
-		style.GetFillAndStrokeOptions().WriteDrawingOptionsToRenderer(r)
 		legendDraw.moveTo(x, y)
 		legendDraw.lineTo(x+legendWidth, y)
 		r.Stroke()
@@ -120,8 +177,13 @@ func (l *legend) Render() (chart.Box, error) {
 		}
 	}
 	legendBox := padding.Clone()
-	legendBox.Right = legendBox.Left + x
+	// 计算展示区域
-	legendBox.Bottom = legendBox.Top + 2*legendDotHeight
+	if opt.Orient == OrientVertical {
-
+		legendBox.Right = legendBox.Left + left + maxTextWidth + legendWidth + textPadding
+		legendBox.Bottom = legendBox.Top + y
+	} else {
+		legendBox.Right = legendBox.Left + x
+		legendBox.Bottom = legendBox.Top + 2*legendDotHeight + top + textPadding
+	}
 	return legendBox, nil
 }

legend_test.go

@@ -0,0 +1,148 @@
+// MIT License
+
+// Copyright (c) 2022 Tree Xie
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+package charts
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/wcharczuk/go-chart/v2"
+	"github.com/wcharczuk/go-chart/v2/drawing"
+)
+
+func TestLegendRender(t *testing.T) {
+	assert := assert.New(t)
+
+	newDraw := func() *Draw {
+		d, _ := NewDraw(DrawOption{
+			Width:  400,
+			Height: 300,
+		})
+		return d
+	}
+	style := chart.Style{
+		FontSize:  10,
+		FontColor: drawing.ColorBlack,
+	}
+	style.Font, _ = chart.GetDefaultFont()
+
+	tests := []struct {
+		newDraw   func() *Draw
+		newLegend func(*Draw) *legend
+		box       chart.Box
+		result    string
+	}{
+		{
+			newDraw: newDraw,
+			newLegend: func(d *Draw) *legend {
+				return NewLegend(d, LegendOption{
+					Top: "10",
+					Data: []string{
+						"Mon",
+						"Tue",
+						"Wed",
+					},
+					Style: style,
+				})
+			},
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 10\nL 30 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><circle cx=\"15\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><text x=\"35\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 76 10\nL 106 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><circle cx=\"91\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><text x=\"111\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 148 10\nL 178 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><circle cx=\"163\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><text x=\"183\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			box: chart.Box{
+				Right:  214,
+				Bottom: 25,
+			},
+		},
+		{
+			newDraw: newDraw,
+			newLegend: func(d *Draw) *legend {
+				return NewLegend(d, LegendOption{
+					Top:   "10",
+					Left:  PositionRight,
+					Align: PositionRight,
+					Data: []string{
+						"Mon",
+						"Tue",
+						"Wed",
+					},
+					Style: style,
+				})
+			},
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<text x=\"191\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 222 10\nL 252 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><circle cx=\"237\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><text x=\"267\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 294 10\nL 324 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><circle cx=\"309\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><text x=\"339\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text><path  d=\"M 370 10\nL 400 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><circle cx=\"385\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/></svg>",
+			box: chart.Box{
+				Right:  400,
+				Bottom: 25,
+			},
+		},
+		{
+			newDraw: newDraw,
+			newLegend: func(d *Draw) *legend {
+				return NewLegend(d, LegendOption{
+					Top:  "10",
+					Left: PositionCenter,
+					Data: []string{
+						"Mon",
+						"Tue",
+						"Wed",
+					},
+					Style: style,
+				})
+			},
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 93 10\nL 123 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><circle cx=\"108\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><text x=\"128\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 169 10\nL 199 10\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><circle cx=\"184\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><text x=\"204\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 241 10\nL 271 10\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><circle cx=\"256\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><text x=\"276\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			box: chart.Box{
+				Right:  307,
+				Bottom: 25,
+			},
+		},
+		{
+			newDraw: newDraw,
+			newLegend: func(d *Draw) *legend {
+				return NewLegend(d, LegendOption{
+					Top:  "10",
+					Left: PositionLeft,
+					Data: []string{
+						"Mon",
+						"Tue",
+						"Wed",
+					},
+					Style:  style,
+					Orient: OrientVertical,
+				})
+			},
+			result: "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"400\" height=\"300\">\\n<path  d=\"M 0 10\nL 30 10\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><circle cx=\"15\" cy=\"10\" r=\"5\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(84,112,198,1.0);fill:rgba(84,112,198,1.0)\"/><text x=\"35\" y=\"13\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Mon</text><path  d=\"M 0 30\nL 30 30\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><circle cx=\"15\" cy=\"30\" r=\"5\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(145,204,117,1.0);fill:rgba(145,204,117,1.0)\"/><text x=\"35\" y=\"33\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Tue</text><path  d=\"M 0 50\nL 30 50\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><circle cx=\"15\" cy=\"50\" r=\"5\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><path  d=\"\" style=\"stroke-width:3;stroke:rgba(250,200,88,1.0);fill:rgba(250,200,88,1.0)\"/><text x=\"35\" y=\"53\" style=\"stroke-width:0;stroke:none;fill:rgba(0,0,0,1.0);font-size:12.8px;font-family:'Roboto Medium',sans-serif\">Wed</text></svg>",
+			box: chart.Box{
+				Right:  61,
+				Bottom: 70,
+			},
+		},
+	}
+
+	for _, tt := range tests {
+		d := tt.newDraw()
+		b, err := tt.newLegend(d).Render()
+		assert.Nil(err)
+		assert.Equal(tt.box, b)
+		data, err := d.Bytes()
+		assert.Nil(err)
+		assert.NotEmpty(data)
+		assert.Equal(tt.result, string(data))
+	}
+}