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

refactor: support more color palette

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/go-charts.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 223 KiB

Before After
Before After

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

1
examples/demo/main.go
View file

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

230
theme.go
View file

@ -22,124 +22,178 @@
package charts package charts
import "github.com/wcharczuk/go-chart/v2/drawing" import (
"github.com/wcharczuk/go-chart/v2/drawing"
)
const ThemeDark = "dark" const ThemeDark = "dark"
const ThemeLight = "light" const ThemeLight = "light"
const ThemeGrafana = "grafana"
type Theme struct { type Theme struct {
mode string palette *themeColorPalette
} }
func NewTheme(mode string) *Theme { type themeColorPalette struct {
return &Theme{ isDarkMode bool
mode: mode, axisStrokeColor drawing.Color
} axisSplitLineColor drawing.Color
backgroundColor drawing.Color
textColor drawing.Color
seriesColors []drawing.Color
} }
func (t *Theme) IsDark() bool { var palettes = map[string]*themeColorPalette{}
return t.mode == ThemeDark
}
func (t *Theme) GetAxisStrokeColor() drawing.Color { func init() {
if t.IsDark() { echartSeriesColors := []drawing.Color{
return drawing.Color{ parseColor("#5470c6"),
parseColor("#91cc75"),
parseColor("#fac858"),
parseColor("#ee6666"),
parseColor("#73c0de"),
parseColor("#3ba272"),
parseColor("#fc8452"),
parseColor("#9a60b4"),
parseColor("#ea7ccc"),
}
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, R: 185,
G: 184, G: 184,
B: 206, B: 206,
A: 255, A: 255,
} },
} drawing.Color{
return drawing.Color{
R: 110,
G: 112,
B: 121,
A: 255,
}
}
func (t *Theme) GetAxisSplitLineColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
R: 72, R: 72,
G: 71, G: 71,
B: 83, B: 83,
A: 255, 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,
}, },
{ drawing.Color{
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{
R: 16, R: 16,
G: 12, G: 12,
B: 42, B: 42,
A: 255, A: 255,
} },
} drawing.Color{
return drawing.ColorWhite
}
func (t *Theme) GetTextColor() drawing.Color {
if t.IsDark() {
return drawing.Color{
R: 238, R: 238,
G: 238, G: 238,
B: 238, B: 238,
A: 255, A: 255,
} },
} echartSeriesColors,
return drawing.Color{ )
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, R: 70,
G: 70, G: 70,
B: 70, B: 70,
A: 255, 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
}

65
theme_test.go
View file

@ -64,71 +64,6 @@ func TestTheme(t *testing.T) {
A: 255, A: 255,
}, lightTheme.GetAxisSplitLineColor()) }, 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{ assert.Equal(drawing.Color{
R: 16, R: 16,
G: 12, G: 12,