gallery

package
v1.1.1 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 29, 2026 License: MIT Imports: 8 Imported by: 0

Documentation

Index

Constants

This section is empty.

Variables

View Source 
var AreaGallery = GalleryConfig{
	Name:  "area",
	Title: "Area Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  800,
		BaseHeight: 400,
		StartX:     0.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Simple Area",
			DataProvider: func() interface{} {
				return charts.AreaChartData{
					Label: "Sales",
					Color: "#3b82f6",
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 100},
						{Date: mustParseTime("2024-02-01"), Value: 120},
						{Date: mustParseTime("2024-03-01"), Value: 110},
						{Date: mustParseTime("2024-04-01"), Value: 140},
						{Date: mustParseTime("2024-05-01"), Value: 130},
						{Date: mustParseTime("2024-06-01"), Value: 150},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				areaData := data.(charts.AreaChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderAreaChart(areaData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Different Color",
			DataProvider: func() interface{} {
				return charts.AreaChartData{
					Label: "Sales",
					Color: "#10b981",
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 100},
						{Date: mustParseTime("2024-02-01"), Value: 120},
						{Date: mustParseTime("2024-03-01"), Value: 110},
						{Date: mustParseTime("2024-04-01"), Value: 140},
						{Date: mustParseTime("2024-05-01"), Value: 130},
						{Date: mustParseTime("2024-06-01"), Value: 150},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				areaData := data.(charts.AreaChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderAreaChart(areaData, 0, 0, chartW, chartH, tokens)
			},
		},
	},
	ChartOffsetX: 10.0,
	ChartOffsetY: 30.0,
}

AreaGallery defines the area chart gallery configuration

View Source 
var BarGallery = GalleryConfig{
	Name:  "bar",
	Title: "Bar Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  850,
		BaseHeight: 450,
		StartX:     50.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Simple Bars",
			DataProvider: func() interface{} {
				return charts.BarChartData{
					Label: "Sales",
					Color: "#3b82f6",
					Bars: []charts.BarData{
						{Label: "Q1", Value: 45},
						{Label: "Q2", Value: 60},
						{Label: "Q3", Value: 55},
						{Label: "Q4", Value: 70},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				barData := data.(charts.BarChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 100)
				tokens := design.DefaultTheme()
				return charts.RenderBarChart(barData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Stacked Bars (Open/Closed)",
			DataProvider: func() interface{} {
				return charts.BarChartData{
					Label:   "Tickets",
					Color:   "#10b981",
					Stacked: true,
					Bars: []charts.BarData{
						{Label: "Mon", Value: 30, Secondary: 20},
						{Label: "Tue", Value: 45, Secondary: 25},
						{Label: "Wed", Value: 40, Secondary: 30},
						{Label: "Thu", Value: 50, Secondary: 15},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				barData := data.(charts.BarChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 100)
				tokens := design.DefaultTheme()
				return charts.RenderBarChart(barData, 0, 0, chartW, chartH, tokens)
			},
		},
	},
	ChartOffsetX: 50.0,
	ChartOffsetY: 30.0,
}

BarGallery defines the bar chart gallery configuration

View Source 
var BoxPlotGallery = GalleryConfig{
	Name:  "boxplot",
	Title: "Box Plot Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Basic Box Plot",
			DataProvider: func() interface{} {
				return []*charts.BoxPlotData{
					{Label: "Group A", Values: []float64{12, 15, 18, 20, 22, 25, 28, 30, 32, 35, 40, 45}},
					{Label: "Group B", Values: []float64{20, 22, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50}},
					{Label: "Group C", Values: []float64{10, 12, 15, 18, 20, 25, 30, 35, 40, 50, 60}},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				boxData := data.([]*charts.BoxPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.BoxPlotSpec{
					Data:   boxData,
					Width:  float64(chartW),
					Height: float64(chartH),
				}
				return charts.RenderVerticalBoxPlot(spec)
			},
		},
		{
			Label: "With Notch",
			DataProvider: func() interface{} {
				return []*charts.BoxPlotData{
					{Label: "Group A", Values: []float64{12, 15, 18, 20, 22, 25, 28, 30, 32, 35, 40, 45}},
					{Label: "Group B", Values: []float64{20, 22, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50}},
					{Label: "Group C", Values: []float64{10, 12, 15, 18, 20, 25, 30, 35, 40, 50, 60}},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				boxData := data.([]*charts.BoxPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.BoxPlotSpec{
					Data:         boxData,
					Width:        float64(chartW),
					Height:       float64(chartH),
					ShowOutliers: true,
					ShowNotch:    true,
				}
				return charts.RenderVerticalBoxPlot(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

BoxPlotGallery defines the box plot gallery configuration

View Source 
var CandlestickGallery = GalleryConfig{
	Name:  "candlestick",
	Title: "Candlestick Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Candlestick Chart",
			DataProvider: func() interface{} {
				return []charts.CandlestickData{
					{X: mustParseTime("2024-01-01"), Open: 100, High: 110, Low: 95, Close: 105, Volume: 1000},
					{X: mustParseTime("2024-01-02"), Open: 105, High: 115, Low: 103, Close: 112, Volume: 1200},
					{X: mustParseTime("2024-01-03"), Open: 112, High: 120, Low: 108, Close: 110, Volume: 1100},
					{X: mustParseTime("2024-01-04"), Open: 110, High: 112, Low: 100, Close: 102, Volume: 1500},
					{X: mustParseTime("2024-01-05"), Open: 102, High: 108, Low: 98, Close: 106, Volume: 1300},
					{X: mustParseTime("2024-01-06"), Open: 106, High: 118, Low: 104, Close: 115, Volume: 1400},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				candleData := data.([]charts.CandlestickData)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80

				xScale := scales.NewTimeScale(
					[2]time.Time{mustParseTime("2024-01-01"), mustParseTime("2024-01-06")},
					[2]units.Length{units.Px(0), units.Px(chartW)},
				)
				yScale := scales.NewLinearScale([2]float64{90, 125}, [2]units.Length{units.Px(chartH), units.Px(0)})

				spec := charts.CandlestickSpec{
					Data:         candleData,
					Width:        chartW,
					Height:       chartH,
					XScale:       xScale,
					YScale:       yScale,
					RisingColor:  "#10b981",
					FallingColor: "#ef4444",
				}
				return charts.RenderCandlestick(spec)
			},
		},
		{
			Label: "OHLC Chart",
			DataProvider: func() interface{} {
				candleData := []charts.CandlestickData{
					{X: mustParseTime("2024-01-01"), Open: 100, High: 110, Low: 95, Close: 105, Volume: 1000},
					{X: mustParseTime("2024-01-02"), Open: 105, High: 115, Low: 103, Close: 112, Volume: 1200},
					{X: mustParseTime("2024-01-03"), Open: 112, High: 120, Low: 108, Close: 110, Volume: 1100},
					{X: mustParseTime("2024-01-04"), Open: 110, High: 112, Low: 100, Close: 102, Volume: 1500},
					{X: mustParseTime("2024-01-05"), Open: 102, High: 108, Low: 98, Close: 106, Volume: 1300},
					{X: mustParseTime("2024-01-06"), Open: 106, High: 118, Low: 104, Close: 115, Volume: 1400},
				}
				ohlcData := make([]charts.OHLCData, len(candleData))
				for i, c := range candleData {
					ohlcData[i] = charts.OHLCData{
						X:     c.X,
						Open:  c.Open,
						High:  c.High,
						Low:   c.Low,
						Close: c.Close,
					}
				}
				return ohlcData
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				ohlcData := data.([]charts.OHLCData)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80

				xScale := scales.NewTimeScale(
					[2]time.Time{mustParseTime("2024-01-01"), mustParseTime("2024-01-06")},
					[2]units.Length{units.Px(0), units.Px(chartW)},
				)
				yScale := scales.NewLinearScale([2]float64{90, 125}, [2]units.Length{units.Px(chartH), units.Px(0)})

				spec := charts.OHLCSpec{
					Data:         ohlcData,
					Width:        chartW,
					Height:       chartH,
					XScale:       xScale,
					YScale:       yScale,
					RisingColor:  "#10b981",
					FallingColor: "#ef4444",
				}
				return charts.RenderOHLC(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

CandlestickGallery defines the candlestick gallery configuration

View Source 
var CirclePackingGallery = GalleryConfig{
	Name:  "circle-packing",
	Title: "Circle Packing Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 500,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Standard Packing",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartSize := 400.0
				spec := charts.CirclePackingSpec{
					Root:        tree,
					Width:       chartSize,
					Height:      chartSize,
					ShowLabels:  true,
					ColorScheme: []string{"#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"},
				}
				return charts.RenderCirclePacking(spec)
			},
		},
		{
			Label: "With Padding",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartSize := 400.0
				spec := charts.CirclePackingSpec{
					Root:        tree,
					Width:       chartSize,
					Height:      chartSize,
					Padding:     5,
					ShowLabels:  true,
					ColorScheme: []string{"#6366f1", "#ec4899", "#14b8a6", "#f97316", "#a855f7"},
				}
				return charts.RenderCirclePacking(spec)
			},
		},
	},
	ChartOffsetX: 100.0,
	ChartOffsetY: 30.0,
}

CirclePackingGallery defines the circle packing gallery configuration

View Source 
var ConnectedScatterGallery = GalleryConfig{
	Name:  "connected-scatter",
	Title: "Connected Scatter Gallery",
	Layout: &GridLayout{
		Cols:       3,
		Rows:       2,
		BaseWidth:  450,
		BaseHeight: 350,
	},
	Variants: []VariantConfig{
		{
			Label: "Line: Solid",
			DataProvider: func() interface{} {
				return charts.ConnectedScatterSpec{
					Width:  0,
					Height: 0,
					Series: []*charts.ConnectedScatterSeries{
						{
							Points: []charts.ConnectedScatterPoint{
								{X: 0, Y: 10},
								{X: 1, Y: 25},
								{X: 2, Y: 15},
								{X: 3, Y: 30},
								{X: 4, Y: 20},
								{X: 5, Y: 35},
							},
							Color:     "#3b82f6",
							LineStyle: "solid",
						},
					},
					ShowLines:   true,
					ShowMarkers: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.ConnectedScatterSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderConnectedScatter(spec)
			},
		},
		{
			Label: "Line: Dashed",
			DataProvider: func() interface{} {
				return charts.ConnectedScatterSpec{
					Width:  0,
					Height: 0,
					Series: []*charts.ConnectedScatterSeries{
						{
							Points: []charts.ConnectedScatterPoint{
								{X: 0, Y: 10},
								{X: 1, Y: 25},
								{X: 2, Y: 15},
								{X: 3, Y: 30},
								{X: 4, Y: 20},
								{X: 5, Y: 35},
							},
							Color:     "#3b82f6",
							LineStyle: "dashed",
						},
					},
					ShowLines:   true,
					ShowMarkers: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.ConnectedScatterSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderConnectedScatter(spec)
			},
		},
		{
			Label: "Line: Dotted",
			DataProvider: func() interface{} {
				return charts.ConnectedScatterSpec{
					Width:  0,
					Height: 0,
					Series: []*charts.ConnectedScatterSeries{
						{
							Points: []charts.ConnectedScatterPoint{
								{X: 0, Y: 10},
								{X: 1, Y: 25},
								{X: 2, Y: 15},
								{X: 3, Y: 30},
								{X: 4, Y: 20},
								{X: 5, Y: 35},
							},
							Color:     "#3b82f6",
							LineStyle: "dotted",
						},
					},
					ShowLines:   true,
					ShowMarkers: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.ConnectedScatterSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderConnectedScatter(spec)
			},
		},
		{
			Label: "Line: Dash-Dot",
			DataProvider: func() interface{} {
				return charts.ConnectedScatterSpec{
					Width:  0,
					Height: 0,
					Series: []*charts.ConnectedScatterSeries{
						{
							Points: []charts.ConnectedScatterPoint{
								{X: 0, Y: 10},
								{X: 1, Y: 25},
								{X: 2, Y: 15},
								{X: 3, Y: 30},
								{X: 4, Y: 20},
								{X: 5, Y: 35},
							},
							Color:     "#3b82f6",
							LineStyle: "dashdot",
						},
					},
					ShowLines:   true,
					ShowMarkers: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.ConnectedScatterSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderConnectedScatter(spec)
			},
		},
		{
			Label: "Line: Long Dash",
			DataProvider: func() interface{} {
				return charts.ConnectedScatterSpec{
					Width:  0,
					Height: 0,
					Series: []*charts.ConnectedScatterSeries{
						{
							Points: []charts.ConnectedScatterPoint{
								{X: 0, Y: 10},
								{X: 1, Y: 25},
								{X: 2, Y: 15},
								{X: 3, Y: 30},
								{X: 4, Y: 20},
								{X: 5, Y: 35},
							},
							Color:     "#3b82f6",
							LineStyle: "longdash",
						},
					},
					ShowLines:   true,
					ShowMarkers: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.ConnectedScatterSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderConnectedScatter(spec)
			},
		},
	},
	ChartOffsetX: 25.0,
	ChartOffsetY: 25.0,
}

ConnectedScatterGallery defines the connected scatter gallery configuration

View Source 
var GalleryRegistry = map[string]GalleryConfig{
	"bar":               BarGallery,
	"area":              AreaGallery,
	"stacked-area":      StackedAreaGallery,
	"lollipop":          LollipopGallery,
	"histogram":         HistogramGallery,
	"pie":               PieGallery,
	"boxplot":           BoxPlotGallery,
	"violin":            ViolinGallery,
	"treemap":           TreemapGallery,
	"icicle":            IcicleGallery,
	"ridgeline":         RidgelineGallery,
	"line":              LineGallery,
	"scatter":           ScatterGallery,
	"connected-scatter": ConnectedScatterGallery,
	"statcard":          StatCardGallery,
	"radar":             RadarGallery,
	"streamchart":       StreamChartGallery,
	"candlestick":       CandlestickGallery,
	"sunburst":          SunburstGallery,
	"circle-packing":    CirclePackingGallery,
	"heatmap":           HeatmapGallery,
}

GalleryRegistry contains all gallery configurations

View Source 
var HeatmapGallery = GalleryConfig{
	Name:  "heatmap",
	Title: "Heatmap Gallery",
	Layout: &VerticalStackLayout{
		Rows:       2,
		BaseWidth:  800,
		RowHeight:  250,
		RowSpacing: 20,
	},
	Variants: []VariantConfig{
		{
			Label: "Linear Heatmap",
			DataProvider: func() interface{} {
				return generateHeatmapData()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				heatmapData := data.(charts.HeatmapData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 55)
				tokens := design.DefaultTheme()
				return charts.RenderLinearHeatmap(heatmapData, 0, 0, chartW, chartH, "#3b82f6", tokens)
			},
		},
		{
			Label: "Weeks Heatmap (GitHub Style)",
			DataProvider: func() interface{} {
				return generateHeatmapData()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				heatmapData := data.(charts.HeatmapData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 55)
				tokens := design.DefaultTheme()
				return charts.RenderWeeksHeatmap(heatmapData, 0, 0, chartW, chartH, "#10b981", tokens)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 25.0,
}

HeatmapGallery defines the heatmap gallery configuration

View Source 
var HistogramGallery = GalleryConfig{
	Name:  "histogram",
	Title: "Histogram Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Count Histogram",
			DataProvider: func() interface{} {
				return generateHistogramData()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				histData := data.(*charts.HistogramData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.HistogramSpec{
					Data:     histData,
					Width:    float64(chartW),
					Height:   float64(chartH),
					BinCount: 20,
				}
				return charts.RenderHistogram(spec)
			},
		},
		{
			Label: "Density Histogram",
			DataProvider: func() interface{} {
				return generateHistogramData()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				histData := data.(*charts.HistogramData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.HistogramSpec{
					Data:        histData,
					Width:       float64(chartW),
					Height:      float64(chartH),
					BinCount:    20,
					ShowDensity: true,
				}
				return charts.RenderHistogram(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

HistogramGallery defines the histogram gallery configuration

View Source 
var IcicleGallery = GalleryConfig{
	Name:  "icicle",
	Title: "Icicle Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Vertical Icicle",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80
				spec := charts.IcicleSpec{
					Root:        tree,
					Width:       chartW,
					Height:      chartH,
					Orientation: "vertical",
					ShowLabels:  true,
					ColorScheme: []string{"#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"},
				}
				return charts.RenderIcicle(spec)
			},
		},
		{
			Label: "Horizontal Icicle",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80
				spec := charts.IcicleSpec{
					Root:        tree,
					Width:       chartW,
					Height:      chartH,
					Orientation: "horizontal",
					ShowLabels:  true,
					ColorScheme: []string{"#6366f1", "#ec4899", "#14b8a6", "#f97316", "#a855f7"},
				}
				return charts.RenderIcicle(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

IcicleGallery defines the icicle chart gallery configuration

View Source 
var LineGallery = GalleryConfig{
	Name:  "line",
	Title: "Line Graph Gallery",
	Layout: &GridLayout{
		Cols:       2,
		Rows:       2,
		BaseWidth:  650,
		BaseHeight: 350,
	},
	Variants: []VariantConfig{
		{
			Label: "Simple Line",
			DataProvider: func() interface{} {
				return charts.LineGraphData{
					Label: "Temperature",
					Color: "#3b82f6",
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 15},
						{Date: mustParseTime("2024-02-01"), Value: 18},
						{Date: mustParseTime("2024-03-01"), Value: 12},
						{Date: mustParseTime("2024-04-01"), Value: 22},
						{Date: mustParseTime("2024-05-01"), Value: 27},
						{Date: mustParseTime("2024-06-01"), Value: 30},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lineData := data.(charts.LineGraphData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderLineGraph(lineData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Smoothed",
			DataProvider: func() interface{} {
				return charts.LineGraphData{
					Label:   "Temperature",
					Color:   "#3b82f6",
					Smooth:  true,
					Tension: 0.3,
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 15},
						{Date: mustParseTime("2024-02-01"), Value: 18},
						{Date: mustParseTime("2024-03-01"), Value: 12},
						{Date: mustParseTime("2024-04-01"), Value: 22},
						{Date: mustParseTime("2024-05-01"), Value: 27},
						{Date: mustParseTime("2024-06-01"), Value: 30},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lineData := data.(charts.LineGraphData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderLineGraph(lineData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "With Markers",
			DataProvider: func() interface{} {
				return charts.LineGraphData{
					Label:      "Temperature",
					Color:      "#3b82f6",
					MarkerType: "circle",
					MarkerSize: 5,
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 15},
						{Date: mustParseTime("2024-02-01"), Value: 18},
						{Date: mustParseTime("2024-03-01"), Value: 12},
						{Date: mustParseTime("2024-04-01"), Value: 22},
						{Date: mustParseTime("2024-05-01"), Value: 27},
						{Date: mustParseTime("2024-06-01"), Value: 30},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lineData := data.(charts.LineGraphData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderLineGraph(lineData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Filled Area",
			DataProvider: func() interface{} {
				return charts.LineGraphData{
					Label:     "Temperature",
					Color:     "#3b82f6",
					FillColor: "#3b82f620",
					Points: []charts.TimeSeriesData{
						{Date: mustParseTime("2024-01-01"), Value: 15},
						{Date: mustParseTime("2024-02-01"), Value: 18},
						{Date: mustParseTime("2024-03-01"), Value: 12},
						{Date: mustParseTime("2024-04-01"), Value: 22},
						{Date: mustParseTime("2024-05-01"), Value: 27},
						{Date: mustParseTime("2024-06-01"), Value: 30},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lineData := data.(charts.LineGraphData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				tokens := design.DefaultTheme()
				return charts.RenderLineGraph(lineData, 0, 0, chartW, chartH, tokens)
			},
		},
	},
	ChartOffsetX: 10.0,
	ChartOffsetY: 25.0,
}

LineGallery defines the line graph gallery configuration

View Source 
var LollipopGallery = GalleryConfig{
	Name:  "lollipop",
	Title: "Lollipop Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Vertical Lollipop",
			DataProvider: func() interface{} {
				return &charts.LollipopData{
					Values: []charts.LollipopPoint{
						{Label: "Product A", Value: 45},
						{Label: "Product B", Value: 62},
						{Label: "Product C", Value: 38},
						{Label: "Product D", Value: 71},
						{Label: "Product E", Value: 54},
					},
					Color: "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lollipopData := data.(*charts.LollipopData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.LollipopSpec{
					Data:       lollipopData,
					Width:      float64(chartW),
					Height:     float64(chartH),
					ShowLabels: true,
				}
				return charts.RenderLollipop(spec)
			},
		},
		{
			Label: "Horizontal Lollipop",
			DataProvider: func() interface{} {
				return &charts.LollipopData{
					Values: []charts.LollipopPoint{
						{Label: "Product A", Value: 45},
						{Label: "Product B", Value: 62},
						{Label: "Product C", Value: 38},
						{Label: "Product D", Value: 71},
						{Label: "Product E", Value: 54},
					},
					Color: "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				lollipopData := data.(*charts.LollipopData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.LollipopSpec{
					Data:       lollipopData,
					Width:      float64(chartW),
					Height:     float64(chartH),
					Horizontal: true,
					ShowLabels: true,
				}
				return charts.RenderLollipop(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

LollipopGallery defines the lollipop chart gallery configuration

View Source 
var PieGallery = GalleryConfig{
	Name:  "pie",
	Title: "Pie Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       3,
		BaseWidth:  800,
		BaseHeight: 350,
		StartX:     0.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Regular Pie",
			DataProvider: func() interface{} {
				return charts.PieChartData{
					Slices: []charts.PieSlice{
						{Label: "Chrome", Value: 63.5},
						{Label: "Safari", Value: 19.3},
						{Label: "Firefox", Value: 9.2},
						{Label: "Edge", Value: 5.1},
						{Label: "Other", Value: 2.9},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				pieData := data.(charts.PieChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 70)
				return charts.RenderPieChart(pieData, 0, 0, chartW, chartH, "", false, true, true)
			},
		},
		{
			Label: "Donut Chart",
			DataProvider: func() interface{} {
				return charts.PieChartData{
					Slices: []charts.PieSlice{
						{Label: "Chrome", Value: 63.5},
						{Label: "Safari", Value: 19.3},
						{Label: "Firefox", Value: 9.2},
						{Label: "Edge", Value: 5.1},
						{Label: "Other", Value: 2.9},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				pieData := data.(charts.PieChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 70)
				return charts.RenderPieChart(pieData, 0, 0, chartW, chartH, "", true, true, true)
			},
		},
		{
			Label: "Custom Colors",
			DataProvider: func() interface{} {
				return charts.PieChartData{
					Slices: []charts.PieSlice{
						{Label: "Chrome", Value: 63.5},
						{Label: "Safari", Value: 19.3},
						{Label: "Firefox", Value: 9.2},
						{Label: "Edge", Value: 5.1},
						{Label: "Other", Value: 2.9},
					},
					Colors: []string{"#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6"},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				pieData := data.(charts.PieChartData)
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight - 70)
				return charts.RenderPieChart(pieData, 0, 0, chartW, chartH, "", false, true, true)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 20.0,
}

PieGallery defines the pie chart gallery configuration

View Source 
var RadarGallery = GalleryConfig{
	Name:  "radar",
	Title: "Radar Chart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  500,
		BaseHeight: 500,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "With Grid",
			DataProvider: func() interface{} {
				axes := []charts.RadarAxis{
					{Label: "Speed", Max: 100},
					{Label: "Strength", Max: 100},
					{Label: "Intelligence", Max: 100},
					{Label: "Agility", Max: 100},
					{Label: "Defense", Max: 100},
				}
				series := []*charts.RadarSeries{
					{
						Label:  "Character A",
						Values: []float64{80, 70, 60, 90, 50},
						Color:  "#3b82f6",
					},
					{
						Label:  "Character B",
						Values: []float64{60, 85, 75, 70, 80},
						Color:  "#10b981",
					},
				}
				return charts.RadarChartSpec{
					Axes:       axes,
					Series:     series,
					Width:      0,
					Height:     0,
					ShowGrid:   true,
					ShowLabels: true,
					GridLevels: 5,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.RadarChartSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderRadarChart(spec)
			},
		},
		{
			Label: "Without Grid",
			DataProvider: func() interface{} {
				axes := []charts.RadarAxis{
					{Label: "Speed", Max: 100},
					{Label: "Strength", Max: 100},
					{Label: "Intelligence", Max: 100},
					{Label: "Agility", Max: 100},
					{Label: "Defense", Max: 100},
				}
				series := []*charts.RadarSeries{
					{
						Label:  "Character A",
						Values: []float64{80, 70, 60, 90, 50},
						Color:  "#3b82f6",
					},
					{
						Label:  "Character B",
						Values: []float64{60, 85, 75, 70, 80},
						Color:  "#10b981",
					},
				}
				return charts.RadarChartSpec{
					Axes:       axes,
					Series:     series,
					Width:      0,
					Height:     0,
					ShowGrid:   false,
					ShowLabels: true,
					GridLevels: 5,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.RadarChartSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderRadarChart(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

RadarGallery defines the radar chart gallery configuration

View Source 
var RidgelineGallery = GalleryConfig{
	Name:  "ridgeline",
	Title: "Ridgeline Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Standard Ridgeline",
			DataProvider: func() interface{} {
				return []*charts.RidgelineData{
					{Label: "January", Values: []float64{10, 12, 15, 18, 20, 22, 25, 23, 20, 18, 15, 12}},
					{Label: "February", Values: []float64{15, 18, 20, 22, 25, 28, 30, 28, 25, 22, 20, 18}},
					{Label: "March", Values: []float64{20, 22, 25, 28, 30, 32, 35, 33, 30, 28, 25, 22}},
					{Label: "April", Values: []float64{25, 28, 30, 32, 35, 38, 40, 38, 35, 32, 30, 28}},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				ridgeData := data.([]*charts.RidgelineData)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80
				spec := charts.RidgelineSpec{
					Data:       ridgeData,
					Width:      chartW,
					Height:     chartH,
					Overlap:    0.5,
					ShowLabels: true,
				}
				return charts.RenderRidgeline(spec)
			},
		},
		{
			Label: "With Fill",
			DataProvider: func() interface{} {
				return []*charts.RidgelineData{
					{Label: "January", Values: []float64{10, 12, 15, 18, 20, 22, 25, 23, 20, 18, 15, 12}},
					{Label: "February", Values: []float64{15, 18, 20, 22, 25, 28, 30, 28, 25, 22, 20, 18}},
					{Label: "March", Values: []float64{20, 22, 25, 28, 30, 32, 35, 33, 30, 28, 25, 22}},
					{Label: "April", Values: []float64{25, 28, 30, 32, 35, 38, 40, 38, 35, 32, 30, 28}},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				ridgeData := data.([]*charts.RidgelineData)
				chartW := ctx.ChartWidth - 50
				chartH := ctx.ChartHeight - 80
				spec := charts.RidgelineSpec{
					Data:       ridgeData,
					Width:      chartW,
					Height:     chartH,
					Overlap:    0.5,
					ShowFill:   true,
					ShowLabels: true,
				}
				return charts.RenderRidgeline(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

RidgelineGallery defines the ridgeline chart gallery configuration

View Source 
var ScatterGallery = GalleryConfig{
	Name:  "scatter",
	Title: "Scatter Plot Gallery",
	Layout: &GridLayout{
		Cols:       3,
		Rows:       2,
		BaseWidth:  450,
		BaseHeight: 350,
	},
	Variants: []VariantConfig{
		{
			Label: "Marker: circle",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "circle",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Marker: square",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "square",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Marker: diamond",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "diamond",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Marker: triangle",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "triangle",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Marker: cross",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "cross",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
		{
			Label: "Marker: x",
			DataProvider: func() interface{} {
				return charts.ScatterPlotData{
					Points: []charts.ScatterPoint{
						{Label: "A", Date: mustParseTime("2024-01-01"), Value: 55},
						{Label: "B", Date: mustParseTime("2024-02-01"), Value: 78},
						{Label: "C", Date: mustParseTime("2024-03-01"), Value: 44},
						{Label: "D", Date: mustParseTime("2024-04-01"), Value: 66},
						{Label: "E", Date: mustParseTime("2024-05-01"), Value: 33},
						{Label: "F", Date: mustParseTime("2024-06-01"), Value: 77},
						{Label: "G", Date: mustParseTime("2024-07-01"), Value: 22},
						{Label: "H", Date: mustParseTime("2024-08-01"), Value: 88},
					},
					MarkerType: "x",
					Color:      "#3b82f6",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				scatterData := data.(charts.ScatterPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 60)
				tokens := design.DefaultTheme()
				return charts.RenderScatterPlot(scatterData, 0, 0, chartW, chartH, tokens)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 25.0,
}

ScatterGallery defines the scatter plot gallery configuration

View Source 
var StackedAreaGallery = GalleryConfig{
	Name:  "stacked-area",
	Title: "Stacked Area Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  800,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Standard Stacked",
			DataProvider: func() interface{} {
				return struct {
					Series []charts.StackedAreaSeries
					Points []charts.StackedAreaPoint
				}{
					Series: []charts.StackedAreaSeries{
						{Label: "Series A", Color: "#3b82f6"},
						{Label: "Series B", Color: "#10b981"},
						{Label: "Series C", Color: "#f59e0b"},
					},
					Points: []charts.StackedAreaPoint{
						{X: 0, Values: []float64{10, 15, 5}},
						{X: 1, Values: []float64{20, 10, 15}},
						{X: 2, Values: []float64{15, 20, 10}},
						{X: 3, Values: []float64{25, 15, 10}},
						{X: 4, Values: []float64{20, 25, 15}},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				d := data.(struct {
					Series []charts.StackedAreaSeries
					Points []charts.StackedAreaPoint
				})
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				spec := charts.StackedAreaSpec{
					Points: d.Points,
					Series: d.Series,
					Width:  float64(chartW),
					Height: float64(chartH),
				}
				return charts.RenderStackedArea(spec)
			},
		},
		{
			Label: "Smooth Curves",
			DataProvider: func() interface{} {
				return struct {
					Series []charts.StackedAreaSeries
					Points []charts.StackedAreaPoint
				}{
					Series: []charts.StackedAreaSeries{
						{Label: "Series A", Color: "#3b82f6"},
						{Label: "Series B", Color: "#10b981"},
						{Label: "Series C", Color: "#f59e0b"},
					},
					Points: []charts.StackedAreaPoint{
						{X: 0, Values: []float64{10, 15, 5}},
						{X: 1, Values: []float64{20, 10, 15}},
						{X: 2, Values: []float64{15, 20, 10}},
						{X: 3, Values: []float64{25, 15, 10}},
						{X: 4, Values: []float64{20, 25, 15}},
					},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				d := data.(struct {
					Series []charts.StackedAreaSeries
					Points []charts.StackedAreaPoint
				})
				chartW := int(ctx.ChartWidth)
				chartH := int(ctx.ChartHeight)
				spec := charts.StackedAreaSpec{
					Points: d.Points,
					Series: d.Series,
					Width:  float64(chartW),
					Height: float64(chartH),
					Smooth: true,
				}
				return charts.RenderStackedArea(spec)
			},
		},
	},
	ChartOffsetX: 10.0,
	ChartOffsetY: 30.0,
}

StackedAreaGallery defines the stacked area chart gallery configuration

View Source 
var StatCardGallery = GalleryConfig{
	Name:  "statcard",
	Title: "Stat Card Gallery",
	Layout: &GridLayout{
		Cols:       3,
		Rows:       2,
		BaseWidth:  300,
		BaseHeight: 200,
	},
	Variants: []VariantConfig{
		{
			Label: "Positive Trend",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Total Revenue",
					Value:     "$124.5K",
					Subtitle:  "+12.5% from last month",
					Change:    12,
					ChangePct: 12.5,
					Color:     "#10b981",
					TrendData: makeTrendData([]int{10, 15, 12, 20, 18, 25, 22, 30}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
		{
			Label: "Negative Trend",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Active Users",
					Value:     "8,234",
					Subtitle:  "-3.2% from last month",
					Change:    -3,
					ChangePct: -3.2,
					Color:     "#ef4444",
					TrendData: makeTrendData([]int{30, 28, 25, 27, 23, 20, 22, 18}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
		{
			Label: "Steady Growth",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Conversion Rate",
					Value:     "3.45%",
					Subtitle:  "+0.8% from last month",
					Change:    1,
					ChangePct: 0.8,
					Color:     "#3b82f6",
					TrendData: makeTrendData([]int{15, 18, 16, 20, 22, 21, 24, 25}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
		{
			Label: "Flat Trend",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Page Views",
					Value:     "45.2K",
					Subtitle:  "0.0% from last month",
					Change:    0,
					ChangePct: 0.0,
					Color:     "#6b7280",
					TrendData: makeTrendData([]int{20, 20, 21, 20, 20, 19, 20, 20}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
		{
			Label: "Alert Trend",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Bounce Rate",
					Value:     "42.1%",
					Subtitle:  "+5.3% from last month",
					Change:    5,
					ChangePct: 5.3,
					Color:     "#f59e0b",
					TrendData: makeTrendData([]int{18, 20, 22, 25, 24, 28, 26, 30}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
		{
			Label: "Neutral Trend",
			DataProvider: func() interface{} {
				return charts.StatCardData{
					Title:     "Sessions",
					Value:     "12.8K",
					Subtitle:  "-1.2% from last month",
					Change:    -1,
					ChangePct: -1.2,
					Color:     "#8b5cf6",
					TrendData: makeTrendData([]int{25, 24, 26, 25, 23, 24, 22, 23}),
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				cardData := data.(charts.StatCardData)
				cardW := int(ctx.ChartWidth - 20)
				cardH := int(ctx.ChartHeight - 20)
				tokens := design.DefaultTheme()
				return charts.RenderStatCard(cardData, 0, 0, cardW, cardH, tokens)
			},
		},
	},
	ChartOffsetX: 10.0,
	ChartOffsetY: 10.0,
}

StatCardGallery defines the stat card gallery configuration

View Source 
var StreamChartGallery = GalleryConfig{
	Name:  "streamchart",
	Title: "Streamchart Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Center Layout",
			DataProvider: func() interface{} {
				return charts.StreamChartSpec{
					Points: []charts.StreamPoint{
						{X: 0, Values: []float64{10, 15, 5}},
						{X: 1, Values: []float64{20, 10, 15}},
						{X: 2, Values: []float64{15, 20, 10}},
						{X: 3, Values: []float64{25, 15, 10}},
						{X: 4, Values: []float64{20, 25, 15}},
						{X: 5, Values: []float64{30, 20, 12}},
					},
					Series: []charts.StreamSeries{
						{Label: "Series A", Color: "#3b82f6"},
						{Label: "Series B", Color: "#10b981"},
						{Label: "Series C", Color: "#f59e0b"},
					},
					Width:  0,
					Height: 0,
					Layout: "center",
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.StreamChartSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderStreamChart(spec)
			},
		},
		{
			Label: "Smooth Curves",
			DataProvider: func() interface{} {
				return charts.StreamChartSpec{
					Points: []charts.StreamPoint{
						{X: 0, Values: []float64{10, 15, 5}},
						{X: 1, Values: []float64{20, 10, 15}},
						{X: 2, Values: []float64{15, 20, 10}},
						{X: 3, Values: []float64{25, 15, 10}},
						{X: 4, Values: []float64{20, 25, 15}},
						{X: 5, Values: []float64{30, 20, 12}},
					},
					Series: []charts.StreamSeries{
						{Label: "Series A", Color: "#3b82f6"},
						{Label: "Series B", Color: "#10b981"},
						{Label: "Series C", Color: "#f59e0b"},
					},
					Width:  0,
					Height: 0,
					Layout: "center",
					Smooth: true,
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				spec := data.(charts.StreamChartSpec)
				spec.Width = ctx.ChartWidth - 50
				spec.Height = ctx.ChartHeight - 80
				return charts.RenderStreamChart(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

StreamChartGallery defines the streamchart gallery configuration

View Source 
var SunburstGallery = GalleryConfig{
	Name:  "sunburst",
	Title: "Sunburst Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  450,
		BaseHeight: 500,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Full Sunburst",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartSize := 400.0
				spec := charts.SunburstSpec{
					Root:        tree,
					Width:       chartSize,
					Height:      chartSize,
					ShowLabels:  true,
					ColorScheme: []string{"#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"},
				}
				return charts.RenderSunburst(spec)
			},
		},
		{
			Label: "With Inner Radius",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartSize := 400.0
				spec := charts.SunburstSpec{
					Root:        tree,
					Width:       chartSize,
					Height:      chartSize,
					InnerRadius: 60,
					ShowLabels:  true,
					ColorScheme: []string{"#6366f1", "#ec4899", "#14b8a6", "#f97316", "#a855f7"},
				}
				return charts.RenderSunburst(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

SunburstGallery defines the sunburst gallery configuration

View Source 
var TreemapGallery = GalleryConfig{
	Name:  "treemap",
	Title: "Treemap Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Standard Treemap",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.TreemapSpec{
					Root:        tree,
					Width:       float64(chartW),
					Height:      float64(chartH),
					ShowLabels:  true,
					ColorScheme: []string{"#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"},
				}
				return charts.RenderTreemap(spec)
			},
		},
		{
			Label: "With Padding",
			DataProvider: func() interface{} {
				return createSampleTree()
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				tree := data.(*charts.TreeNode)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.TreemapSpec{
					Root:        tree,
					Width:       float64(chartW),
					Height:      float64(chartH),
					Padding:     3,
					ShowLabels:  true,
					ColorScheme: []string{"#6366f1", "#ec4899", "#14b8a6", "#f97316", "#a855f7"},
				}
				return charts.RenderTreemap(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

TreemapGallery defines the treemap gallery configuration

View Source 
var ViolinGallery = GalleryConfig{
	Name:  "violin",
	Title: "Violin Plot Gallery",
	Layout: &SingleRowLayout{
		Cols:       2,
		BaseWidth:  600,
		BaseHeight: 400,
		StartX:     25.0,
	},
	Variants: []VariantConfig{
		{
			Label: "Basic Violin",
			DataProvider: func() interface{} {
				return []*charts.ViolinPlotData{
					{Label: "Group A", Values: generateViolinValues(25, 5)},
					{Label: "Group B", Values: generateViolinValues(30, 8)},
					{Label: "Group C", Values: generateViolinValues(20, 6)},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				violinData := data.([]*charts.ViolinPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.ViolinPlotSpec{
					Data:   violinData,
					Width:  float64(chartW),
					Height: float64(chartH),
				}
				return charts.RenderViolinPlot(spec)
			},
		},
		{
			Label: "With Box Plot",
			DataProvider: func() interface{} {
				return []*charts.ViolinPlotData{
					{Label: "Group A", Values: generateViolinValues(25, 5)},
					{Label: "Group B", Values: generateViolinValues(30, 8)},
					{Label: "Group C", Values: generateViolinValues(20, 6)},
				}
			},
			ChartRenderer: func(data interface{}, ctx RenderContext) string {
				violinData := data.([]*charts.ViolinPlotData)
				chartW := int(ctx.ChartWidth - 50)
				chartH := int(ctx.ChartHeight - 80)
				spec := charts.ViolinPlotSpec{
					Data:       violinData,
					Width:      float64(chartW),
					Height:     float64(chartH),
					ShowBox:    true,
					ShowMedian: true,
					ShowMean:   true,
				}
				return charts.RenderViolinPlot(spec)
			},
		},
	},
	ChartOffsetX: 0.0,
	ChartOffsetY: 30.0,
}

ViolinGallery defines the violin plot gallery configuration

Functions

func DefaultTokens 

func DefaultTokens() interface{}

DefaultTokens returns the default design tokens

func GenerateGallery 

func GenerateGallery(config GalleryConfig) (string, error)

GenerateGallery creates an SVG gallery from a configuration

func GetDefaultLabelStyle 

func GetDefaultLabelStyle() svg.Style

GetDefaultLabelStyle returns the standard variant label style

func GetDefaultTitleStyle 

func GetDefaultTitleStyle() svg.Style

GetDefaultTitleStyle returns the standard gallery title style

func WrapSVG 

func WrapSVG(content string, width, height int) string

WrapSVG wraps content in an SVG element with proper xmlns and viewBox

Types

type GalleryConfig 

type GalleryConfig struct {
	Name     string
	Title    string
	Layout   LayoutStrategy
	Variants []VariantConfig

	// Styling (use defaults if not specified)
	LabelOffsetY float64 // Default: 0.0
	ChartOffsetX float64 // Default: 0.0
	ChartOffsetY float64 // Default: 30.0
}

GalleryConfig defines a complete gallery configuration

type GalleryDimensions 

type GalleryDimensions struct {
	TotalWidth   float64
	TotalHeight  float64
	ChartWidth   float64
	ChartHeight  float64
	ColWidth     float64
	RowHeight    float64
	TitleY       float64
	ChartStartY  float64
	BottomMargin float64
}

GalleryDimensions holds calculated dimensions for gallery layouts

func CalculateGridDimensions 

func CalculateGridDimensions(cols, rows int, baseWidth, baseHeight float64) GalleryDimensions

CalculateGridDimensions calculates pixel dimensions for a grid-based gallery using relative units that resolve to exact pixels at render time

func CalculateSingleRowDimensions 

func CalculateSingleRowDimensions(cols int, baseWidth, baseHeight float64) GalleryDimensions

CalculateSingleRowDimensions calculates dimensions for single-row galleries

type GridLayout 

type GridLayout struct {
	Cols       int
	Rows       int
	BaseWidth  float64
	BaseHeight float64
}

GridLayout represents a multi-row grid gallery layout

func (*GridLayout) CalculateDimensions 

func (l *GridLayout) CalculateDimensions() GalleryDimensions

CalculateDimensions calculates dimensions for a grid layout

func (*GridLayout) GetCellPosition 

func (l *GridLayout) GetCellPosition(variantIndex int) (x, y float64)

GetCellPosition returns the position for a variant at the given index

type LayoutStrategy 

type LayoutStrategy interface {
	CalculateDimensions() GalleryDimensions
	GetCellPosition(variantIndex int) (x, y float64)
}

LayoutStrategy defines how a gallery calculates dimensions and positions variants

type RenderContext 

type RenderContext struct {
	ChartWidth  float64
	ChartHeight float64
	OffsetX     float64 // Chart offset within cell
	OffsetY     float64
	Tokens      interface{} // design.DefaultTheme() result
}

RenderContext provides rendering parameters to chart renderers

type SingleRowLayout 

type SingleRowLayout struct {
	Cols       int
	BaseWidth  float64
	BaseHeight float64
	StartX     float64 // Initial X offset for first cell (default: 0)
}

SingleRowLayout represents a single-row gallery layout

func (*SingleRowLayout) CalculateDimensions 

func (l *SingleRowLayout) CalculateDimensions() GalleryDimensions

CalculateDimensions calculates dimensions for a single-row layout

func (*SingleRowLayout) GetCellPosition 

func (l *SingleRowLayout) GetCellPosition(variantIndex int) (x, y float64)

GetCellPosition returns the position for a variant at the given index

type VariantConfig 

type VariantConfig struct {
	Label         string
	DataProvider  func() interface{}                               // Returns chart-specific data
	ChartRenderer func(data interface{}, ctx RenderContext) string // Renders the chart
}

VariantConfig defines a single chart variant in a gallery

type VerticalStackLayout 

type VerticalStackLayout struct {
	Rows       int
	BaseWidth  float64
	RowHeight  float64
	RowSpacing float64
}

VerticalStackLayout represents a vertical stack gallery layout

func (*VerticalStackLayout) CalculateDimensions 

func (l *VerticalStackLayout) CalculateDimensions() GalleryDimensions

CalculateDimensions calculates dimensions for a vertical stack layout

func (*VerticalStackLayout) GetCellPosition 

func (l *VerticalStackLayout) GetCellPosition(variantIndex int) (x, y float64)

GetCellPosition returns the position for a variant at the given index

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.