112 lines
2.7 KiB
Text
112 lines
2.7 KiB
Text
// templui component chart - version: v0.84.0 installed by templui v0.84.0
|
|
package chart
|
|
|
|
import "git.jmbit.de/jmb/scanfile/server/web/templui/utils"
|
|
|
|
type Variant string
|
|
|
|
const (
|
|
VariantBar Variant = "bar"
|
|
VariantLine Variant = "line"
|
|
VariantPie Variant = "pie"
|
|
VariantDoughnut Variant = "doughnut"
|
|
VariantRadar Variant = "radar"
|
|
)
|
|
|
|
type Dataset struct {
|
|
Label string `json:"label"`
|
|
Data []float64 `json:"data"`
|
|
BorderWidth int `json:"borderWidth,omitempty"`
|
|
BorderColor interface{} `json:"borderColor,omitempty"`
|
|
BackgroundColor interface{} `json:"backgroundColor,omitempty"`
|
|
Tension float64 `json:"tension,omitempty"`
|
|
Fill bool `json:"fill,omitempty"`
|
|
Stepped bool `json:"stepped,omitempty"`
|
|
}
|
|
|
|
type Options struct {
|
|
Responsive bool `json:"responsive,omitempty"`
|
|
Legend bool `json:"legend,omitempty"`
|
|
}
|
|
|
|
type Data struct {
|
|
Labels []string `json:"labels"`
|
|
Datasets []Dataset `json:"datasets"`
|
|
}
|
|
|
|
type Config struct {
|
|
Type Variant `json:"type"`
|
|
Data Data `json:"data"`
|
|
Options Options `json:"options,omitempty"`
|
|
ShowLegend bool `json:"showLegend,omitempty"`
|
|
ShowXAxis bool `json:"showXAxis"`
|
|
ShowYAxis bool `json:"showYAxis"`
|
|
ShowXLabels bool `json:"showXLabels"`
|
|
ShowYLabels bool `json:"showYLabels"`
|
|
ShowXGrid bool `json:"showXGrid"`
|
|
ShowYGrid bool `json:"showYGrid"`
|
|
Horizontal bool `json:"horizontal"`
|
|
Stacked bool `json:"stacked"`
|
|
}
|
|
|
|
type Props struct {
|
|
ID string
|
|
Variant Variant
|
|
Data Data
|
|
Options Options
|
|
ShowLegend bool
|
|
ShowXAxis bool
|
|
ShowYAxis bool
|
|
ShowXLabels bool
|
|
ShowYLabels bool
|
|
ShowXGrid bool
|
|
ShowYGrid bool
|
|
Horizontal bool
|
|
Stacked bool
|
|
Class string
|
|
Attributes templ.Attributes
|
|
}
|
|
|
|
templ Chart(props ...Props) {
|
|
{{ var p Props }}
|
|
if len(props) > 0 {
|
|
{{ p = props[0] }}
|
|
}
|
|
if p.ID == "" {
|
|
{{ p.ID = "chart-" + utils.RandomID() }}
|
|
}
|
|
{{ canvasId := p.ID + "-canvas" }}
|
|
{{ dataId := p.ID + "-data" }}
|
|
<div
|
|
id={ p.ID }
|
|
class={
|
|
utils.TwMerge(
|
|
"chart-container relative",
|
|
p.Class),
|
|
}
|
|
{ p.Attributes... }
|
|
>
|
|
<canvas id={ canvasId } data-chart-id={ dataId }></canvas>
|
|
</div>
|
|
{{
|
|
chartConfig := Config{
|
|
Type: p.Variant,
|
|
Data: p.Data,
|
|
Options: p.Options,
|
|
ShowLegend: p.ShowLegend,
|
|
ShowXAxis: p.ShowXAxis,
|
|
ShowYAxis: p.ShowYAxis,
|
|
ShowXLabels: p.ShowXLabels,
|
|
ShowYLabels: p.ShowYLabels,
|
|
ShowXGrid: p.ShowXGrid,
|
|
ShowYGrid: p.ShowYGrid,
|
|
Horizontal: p.Horizontal,
|
|
Stacked: p.Stacked,
|
|
}
|
|
}}
|
|
@templ.JSONScript(dataId, chartConfig)
|
|
}
|
|
|
|
templ Script() {
|
|
<script defer src="/assets/js/chart.min.js"></script>
|
|
}
|