refactor: support more color palette

This commit is contained in:
vicanso 2022-02-18 23:12:31 +08:00
parent c15fec21ad
commit 9cc2b9fadd
5 changed files with 148 additions and 160 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 223 KiB

Before After
Before After

BIN
assets/go-line-chart.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -25,7 +25,6 @@ var html = `<!DOCTYPE html>
padding: 0;
}
.charts {
width: 810px;
margin: 10px auto;
overflow: hidden;
}

234
theme.go
View file

@ -22,124 +22,178 @@
package charts
import "github.com/wcharczuk/go-chart/v2/drawing"
import (
"github.com/wcharczuk/go-chart/v2/drawing"
)
const ThemeDark = "dark"
const ThemeLight = "light"
const ThemeGrafana = "grafana"
type Theme struct {
mode string
palette *themeColorPalette
}
func NewTheme(mode string) *Theme {
return &Theme{
mode: mode,
type themeColorPalette struct {
isDarkMode bool
axisStrokeColor drawing.Color
axisSplitLineColor drawing.Color
backgroundColor drawing.Color
textColor drawing.Color
seriesColors []drawing.Color
}
var palettes = map[string]*themeColorPalette{}
func init() {
echartSeriesColors := []drawing.Color{
parseColor("#5470c6"),
parseColor("#91cc75"),
parseColor("#fac858"),
parseColor("#ee6666"),
parseColor("#73c0de"),
parseColor("#3ba272"),
parseColor("#fc8452"),
parseColor("#9a60b4"),
parseColor("#ea7ccc"),
}
}
func (t *Theme) IsDark() bool {
return t.mode == ThemeDark
}
func (t *Theme) GetAxisStrokeColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
grafanaSeriesColors := []drawing.Color{
parseColor("#7EB26D"),
parseColor("#EAB839"),
parseColor("#6ED0E0"),
parseColor("#EF843C"),
parseColor("#E24D42"),
parseColor("#1F78C1"),
parseColor("#705DA0"),
parseColor("#508642"),
}
AddTheme(
ThemeDark,
true,
drawing.Color{
R: 185,
G: 184,
B: 206,
A: 255,
}
}
return drawing.Color{
R: 110,
G: 112,
B: 121,
A: 255,
}
}
func (t *Theme) GetAxisSplitLineColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
},
drawing.Color{
R: 72,
G: 71,
B: 83,
A: 255,
}
}
return drawing.Color{
R: 224,
G: 230,
B: 242,
A: 255,
}
}
func (t *Theme) GetSeriesColor(index int) drawing.Color {
colors := t.GetSeriesColors()
return colors[index%len(colors)]
}
func (t *Theme) GetSeriesColors() []drawing.Color {
return []drawing.Color{
{
R: 84,
G: 112,
B: 198,
A: 255,
},
{
R: 145,
G: 204,
B: 117,
A: 255,
},
{
R: 250,
G: 200,
B: 88,
A: 255,
},
{
R: 238,
G: 102,
B: 102,
A: 255,
},
{
R: 115,
G: 192,
B: 222,
A: 255,
},
}
}
func (t *Theme) GetBackgroundColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
drawing.Color{
R: 16,
G: 12,
B: 42,
A: 255,
}
}
return drawing.ColorWhite
}
func (t *Theme) GetTextColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
},
drawing.Color{
R: 238,
G: 238,
B: 238,
A: 255,
}
}
return drawing.Color{
},
echartSeriesColors,
)
AddTheme(
ThemeLight,
false,
drawing.Color{
R: 110,
G: 112,
B: 121,
A: 255,
},
drawing.Color{
R: 224,
G: 230,
B: 242,
A: 255,
},
drawing.ColorWhite,
drawing.Color{
R: 70,
G: 70,
B: 70,
A: 255,
},
echartSeriesColors,
)
AddTheme(
ThemeGrafana,
true,
drawing.Color{
R: 185,
G: 184,
B: 206,
A: 255,
},
drawing.Color{
R: 68,
G: 67,
B: 67,
A: 255,
},
drawing.Color{
R: 31,
G: 29,
B: 29,
A: 255,
},
drawing.Color{
R: 216,
G: 217,
B: 218,
A: 255,
},
grafanaSeriesColors,
)
}
func AddTheme(name string, isDarkMode bool, axisStrokeColor, axisSplitLineColor, backgroundColor, textColor drawing.Color, seriesColors []drawing.Color) {
palettes[name] = &themeColorPalette{
isDarkMode: isDarkMode,
axisStrokeColor: axisStrokeColor,
axisSplitLineColor: axisSplitLineColor,
backgroundColor: backgroundColor,
textColor: textColor,
seriesColors: seriesColors,
}
}
func NewTheme(name string) *Theme {
p, ok := palettes[name]
if !ok {
p = palettes[ThemeLight]
}
return &Theme{
palette: p,
}
}
func (t *Theme) IsDark() bool {
return t.palette.isDarkMode
}
func (t *Theme) GetAxisStrokeColor() drawing.Color {
return t.palette.axisStrokeColor
}
func (t *Theme) GetAxisSplitLineColor() drawing.Color {
return t.palette.axisSplitLineColor
}
func (t *Theme) GetSeriesColor(index int) drawing.Color {
colors := t.palette.seriesColors
return colors[index%len(colors)]
}
func (t *Theme) GetBackgroundColor() drawing.Color {
return t.palette.backgroundColor
}
func (t *Theme) GetTextColor() drawing.Color {
return t.palette.textColor
}

View file

@ -64,71 +64,6 @@ func TestTheme(t *testing.T) {
A: 255,
}, lightTheme.GetAxisSplitLineColor())
assert.Equal([]drawing.Color{
{
R: 84,
G: 112,
B: 198,
A: 255,
},
{
R: 145,
G: 204,
B: 117,
A: 255,
},
{
R: 250,
G: 200,
B: 88,
A: 255,
},
{
R: 238,
G: 102,
B: 102,
A: 255,
},
{
R: 115,
G: 192,
B: 222,
A: 255,
},
}, darkTheme.GetSeriesColors())
assert.Equal([]drawing.Color{
{
R: 84,
G: 112,
B: 198,
A: 255,
},
{
R: 145,
G: 204,
B: 117,
A: 255,
},
{
R: 250,
G: 200,
B: 88,
A: 255,
},
{
R: 238,
G: 102,
B: 102,
A: 255,
},
{
R: 115,
G: 192,
B: 222,
A: 255,
},
}, lightTheme.GetSeriesColors())
assert.Equal(drawing.Color{
R: 16,
G: 12,