feat/tree: add tree chart type (#159)

* feat/tree: add tree chart type

* fix/struct: fix json tags

* feat/tree-leaves: add leaves option

* feat/label-position: add option to specify label distance from screen border

* feat/tree-collapsed-chield: add option to collapse a chield

* Update charts.go

* update(type): update Tree name.

* update: refactor char type.

* update: change to BaseConfiguration.

Co-authored-by: Koy <koy@ko8e24.top>

charts/series.go

@@ -49,6 +49,16 @@ type SingleSeries struct {
 	// Scatter
 	SymbolSize float32 `json:"symbolSize,omitempty"`
 
+	// Tree
+	Orient            string      `json:"orient,omitempty"`
+	ExpandAndCollapse bool        `json:"expandAndCollapse,omitempty"`
+	InitialTreeDepth  int         `json:"initialTreeDepth,omitempty"`
+	Leaves            interface{} `json:"leaves,omitempty"`
+	Left              string      `json:"left,omitempty"`
+	Right             string      `json:"right,omitempty"`
+	Top               string      `json:"top,omitempty"`
+	Bottom            string      `json:"bottom,omitempty"`
+
 	// WordCloud
 	Shape         string    `json:"shape,omitempty"`
 	SizeRange     []float32 `json:"sizeRange,omitempty"`
@@ -227,6 +237,23 @@ func WithBar3DChartOpts(opt opts.Bar3DChart) SeriesOpts {
 	}
 }
 
+// WithTreeOpts
+func WithTreeOpts(opt opts.TreeChart) SeriesOpts {
+	return func(s *SingleSeries) {
+		s.Layout = opt.Layout
+		s.Orient = opt.Orient
+		s.ExpandAndCollapse = opt.ExpandAndCollapse
+		s.InitialTreeDepth = opt.InitialTreeDepth
+		s.Roam = opt.Roam
+		s.Label = opt.Label
+		s.Leaves = opt.Leaves
+		s.Right = opt.Right
+		s.Left = opt.Left
+		s.Top = opt.Top
+		s.Bottom = opt.Bottom
+	}
+}
+
 // WithWorldCloudChartOpts
 func WithWorldCloudChartOpts(opt opts.WordCloudChart) SeriesOpts {
 	return func(s *SingleSeries) {

charts/tree.go

@@ -0,0 +1,35 @@
+package charts
+
+import (
+	"github.com/go-echarts/go-echarts/v2/opts"
+	"github.com/go-echarts/go-echarts/v2/render"
+	"github.com/go-echarts/go-echarts/v2/types"
+)
+
+// Tree represents a Tree chart.
+type Tree struct {
+	BaseConfiguration
+}
+
+// Type returns the chart type.
+func (Tree) Type() string { return types.ChartTree }
+
+// NewTree creates a new Tree chart instance.
+func NewTree() *Tree {
+	c := &Tree{}
+	c.initBaseConfiguration()
+	c.Renderer = render.NewChartRender(c, c.Validate)
+	return c
+}
+
+func (c *Tree) AddSeries(name string, data []opts.TreeData, options ...SeriesOpts) *Tree {
+	series := SingleSeries{Name: name, Type: types.ChartTree, Data: data}
+	series.configureSeriesOpts(options...)
+	c.MultiSeries = append(c.MultiSeries, series)
+	return c
+}
+
+// Validate validates the given configuration.
+func (c *Tree) Validate() {
+	c.Assets.Validate(c.AssetsHost)
+}

opts/charts.go

@@ -546,6 +546,70 @@ type Chart3DData struct {
 	Label *Label `json:"label,omitempty"`
 }
 
+type TreeChart struct {
+	// The layout of the tree, which can be orthogonal and radial.
+	// * 'orthogonal' refer to the horizontal and vertical direction.
+	// * 'radial' refers to the view that the root node as the center and each layer of nodes as the ring.
+	Layout string
+
+	// The direction of the orthogonal layout in the tree diagram.
+	// * 'from left to right' or 'LR'
+	// * 'from right to left' or 'RL'
+	// * 'from top to bottom' or 'TB'
+	// * 'from bottom to top' or 'BT'
+	Orient string `json:"orient,omitempty"`
+
+	// Whether to enable mouse zooming and translating. false by default.
+	// If either zooming or translating is wanted, it can be set to 'scale' or 'move'.
+	// Otherwise, set it to be true to enable both.
+	Roam bool `json:"roam"`
+
+	// Subtree collapses and expands interaction, default true.
+	ExpandAndCollapse bool `json:"expandAndCollapse,omitempty"`
+
+	// The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node.
+	// This configuration item is primarily used in conjunction with collapsing and expansion interactions.
+	// The purpose is to prevent the nodes from obscuring each other. If set as -1 or null or undefined, all nodes are expanded.
+	InitialTreeDepth int `json:"initialTreeDepth,omitempty"`
+
+	// The style setting of the text label in a single bar.
+	Label *Label `json:"label,omitempty"`
+
+	// Leaf node special configuration, the leaf node and non-leaf node label location is different.
+	Leaves *TreeLeaves `json:"leaves,omitempty"`
+
+	// Distance between tree component and the sides of the container.
+	// value can be instant pixel value like 20;
+	// It can also be a percentage value relative to container width like '20%';
+	Left   string `json:"left,omitempty"`
+	Right  string `json:"right,omitempty"`
+	Top    string `json:"top,omitempty"`
+	Bottom string `json:"bottom,omitempty"`
+}
+
+type TreeData struct {
+	// Name of the data item.
+	Name string `json:"name,omitempty"`
+
+	// Value of the data item.
+	Value int `json:"value,omitempty"`
+
+	Children []*TreeData `json:"children,omitempty"`
+
+	// Symbol of node of this category.
+	// Icon types provided by ECharts includes
+	// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+	// It can be set to an image with 'image://url' , in which URL is the link to an image, or dataURI of an image.
+	Symbol string `json:"symbol,omitempty"`
+
+	// node of this category symbol size. It can be set to single numbers like 10,
+	// or use an array to represent width and height. For example, [20, 10] means symbol width is 20, and height is10.
+	SymbolSize interface{} `json:"symbolSize,omitempty"`
+
+	// If set as `true`, the node is collpased in the initialization.
+	Collapsed bool `json:"collapsed,omitempty"`
+}
+
 // SunBurstData data
 type SunBurstData struct {
 	// Name of data item.

opts/series.go

@@ -300,6 +300,18 @@ type GraphForce struct {
 	EdgeLength float32 `json:"edgeLength,omitempty"`
 }
 
+// Leaf node special configuration, the leaf node and non-leaf node label location is different.
+type TreeLeaves struct {
+	// The style setting of the text label in a single bar.
+	Label *Label `json:"label,omitempty"`
+
+	// ItemStyle settings in this series data.
+	ItemStyle *ItemStyle `json:"itemStyle,omitempty"`
+
+	// Emphasis settings in this series data.
+	Emphasis *Emphasis `json:"emphasis,omitempty"`
+}
+
 // RGBColor returns the color with RGB format
 func RGBColor(r, g, b uint16) string {
 	return fmt.Sprintf("rgb(%d,%d,%d)", r, g, b)

types/charts.go

@@ -26,5 +26,6 @@ const (
 	ChartSurface3D     = "surface"
 	ChartThemeRiver    = "themeRiver"
 	ChartWordCloud     = "wordCloud"
+	ChartTree          = "tree"
 	ChartSunburst      = "sunburst"
 )