mirror of
https://github.com/axzilla/templui.git
synced 2025-03-14 05:38:06 +00:00
feat(charts): fix axis wrong bools
This commit is contained in:
axzilla
parent
0e9e567c60
commit
ccf0617ab5
@ -546,6 +546,9 @@
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -686,9 +689,6 @@
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.m-0 {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
}
|
||||
.m-1 {
|
||||
margin: calc(var(--spacing) * 1);
|
||||
}
|
||||
@ -698,9 +698,6 @@
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.-me-5 {
|
||||
margin-inline-end: calc(var(--spacing) * -5);
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
@ -883,6 +880,9 @@
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.\!w-2 {
|
||||
width: calc(var(--spacing) * 2) !important;
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
@ -51,14 +51,18 @@ type ChartConfig struct {
|
||||
Data ChartData `json:"data"`
|
||||
Options ChartOptions `json:"options,omitempty"`
|
||||
ShowLegend bool `json:"showLegend,omitempty"`
|
||||
ShowXAxis bool `json:"showXAxis,omitempty"`
|
||||
ShowYAxis bool `json:"showYAxis,omitempty"`
|
||||
ShowXAxis bool `json:"showXAxis"`
|
||||
ShowYAxis bool `json:"showYAxis"`
|
||||
}
|
||||
|
||||
// ChartProps for the Chart component
|
||||
type ChartProps struct {
|
||||
Config ChartConfig
|
||||
Type string
|
||||
Data ChartData
|
||||
Options ChartOptions
|
||||
ShowLegend bool
|
||||
ShowXAxis bool
|
||||
ShowYAxis bool
|
||||
Class string // Additional CSS classes
|
||||
Height string // Chart container height
|
||||
Width string // Chart container width
|
||||
@ -69,7 +73,7 @@ templ ChartScripts() {
|
||||
{{ handle := templ.NewOnceHandle() }}
|
||||
@handle.Once() {
|
||||
<!-- Load Chart.js library -->
|
||||
<script nonce={ templ.GetNonce(ctx) } src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script defer nonce={ templ.GetNonce(ctx) } src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<!-- Initialize charts -->
|
||||
<script nonce={ templ.GetNonce(ctx) }>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@ -108,7 +112,7 @@ templ ChartScripts() {
|
||||
|
||||
// Parse Konfiguration
|
||||
const chartConfig = JSON.parse(dataElement.textContent);
|
||||
console.log(chartConfig)
|
||||
|
||||
// Chart erstellen mit berechneten Theme-Farben
|
||||
const chart = new Chart(canvas, {
|
||||
...chartConfig,
|
||||
@ -131,13 +135,13 @@ templ ChartScripts() {
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: chartConfig.showXAxis || true,
|
||||
display: chartConfig.showXAxis,
|
||||
ticks: {
|
||||
color: colors.mutedForeground
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: chartConfig.showYAxis || false,
|
||||
display: chartConfig.showYAxis,
|
||||
ticks: {
|
||||
color: colors.mutedForeground
|
||||
},
|
||||
@ -179,10 +183,10 @@ templ Chart(props ChartProps) {
|
||||
{{ dataId := chartId + "-data" }}
|
||||
<!-- Calculate container dimensions -->
|
||||
if props.Height == "" {
|
||||
{{ props.Height = "40vh" }}
|
||||
{{ props.Height = "41vh" }}
|
||||
}
|
||||
if props.Width == "" {
|
||||
{{ props.Width = "100%" }}
|
||||
{{ props.Width = "101%" }}
|
||||
}
|
||||
<!-- Chart container -->
|
||||
<div
|
||||
@ -191,64 +195,73 @@ templ Chart(props ChartProps) {
|
||||
>
|
||||
<canvas id={ chartId } data-chart-id={ dataId }></canvas>
|
||||
</div>
|
||||
<!-- Store the chart configuration in a JSON script tag -->
|
||||
{{ props.Config.ShowLegend = props.ShowLegend }}
|
||||
@templ.JSONScript(dataId, props.Config)
|
||||
{{
|
||||
// Create chart config with defaults
|
||||
chartConfig := ChartConfig{
|
||||
Type: props.Type,
|
||||
Data: props.Data,
|
||||
Options: props.Options,
|
||||
ShowLegend: props.ShowLegend,
|
||||
ShowXAxis: props.ShowXAxis,
|
||||
ShowYAxis: props.ShowYAxis,
|
||||
}
|
||||
}}
|
||||
@templ.JSONScript(dataId, chartConfig)
|
||||
}
|
||||
|
||||
// Helper functions to create common charts
|
||||
templ LineChart(labels []string, values []float64, title string) {
|
||||
@Chart(ChartProps{
|
||||
Config: ChartConfig{
|
||||
Type: "line",
|
||||
Data: ChartData{
|
||||
Labels: labels,
|
||||
Datasets: []ChartDataset{
|
||||
{
|
||||
Label: title,
|
||||
Data: values,
|
||||
BorderColor: "rgb(75, 192, 192)",
|
||||
BorderWidth: 1,
|
||||
Tension: 0.1,
|
||||
},
|
||||
},
|
||||
},
|
||||
Options: ChartOptions{
|
||||
Responsive: true,
|
||||
Scales: ChartScales{
|
||||
Y: ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
templ BarChart(labels []string, values []float64, title string) {
|
||||
@Chart(ChartProps{
|
||||
Config: ChartConfig{
|
||||
Type: "bar",
|
||||
Data: ChartData{
|
||||
Labels: labels,
|
||||
Datasets: []ChartDataset{
|
||||
{
|
||||
Label: title,
|
||||
Data: values,
|
||||
BorderWidth: 1,
|
||||
BackgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
BorderColor: "rgb(75, 192, 192)",
|
||||
},
|
||||
},
|
||||
},
|
||||
Options: ChartOptions{
|
||||
Responsive: true,
|
||||
Scales: ChartScales{
|
||||
Y: ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
// // Helper functions to create common charts
|
||||
// templ LineChart(labels []string, values []float64, title string) {
|
||||
// @Chart(ChartProps{
|
||||
// Config: ChartConfig{
|
||||
// Type: "line",
|
||||
// Data: ChartData{
|
||||
// Labels: labels,
|
||||
// Datasets: []ChartDataset{
|
||||
// {
|
||||
// Label: title,
|
||||
// Data: values,
|
||||
// BorderColor: "rgb(75, 192, 192)",
|
||||
// BorderWidth: 1,
|
||||
// Tension: 0.1,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// Options: ChartOptions{
|
||||
// Responsive: true,
|
||||
// Scales: ChartScales{
|
||||
// Y: ChartYAxis{
|
||||
// BeginAtZero: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// templ BarChart(labels []string, values []float64, title string) {
|
||||
// @Chart(ChartProps{
|
||||
// Config: ChartConfig{
|
||||
// Type: "bar",
|
||||
// Data: ChartData{
|
||||
// Labels: labels,
|
||||
// Datasets: []ChartDataset{
|
||||
// {
|
||||
// Label: title,
|
||||
// Data: values,
|
||||
// BorderWidth: 1,
|
||||
// BackgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
// BorderColor: "rgb(75, 192, 192)",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// Options: ChartOptions{
|
||||
// Responsive: true,
|
||||
// Scales: ChartScales{
|
||||
// Y: ChartYAxis{
|
||||
// BeginAtZero: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
|
||||
@ -59,14 +59,18 @@ type ChartConfig struct {
|
||||
Data ChartData `json:"data"`
|
||||
Options ChartOptions `json:"options,omitempty"`
|
||||
ShowLegend bool `json:"showLegend,omitempty"`
|
||||
ShowXAxis bool `json:"showXAxis,omitempty"`
|
||||
ShowYAxis bool `json:"showYAxis,omitempty"`
|
||||
ShowXAxis bool `json:"showXAxis"`
|
||||
ShowYAxis bool `json:"showYAxis"`
|
||||
}
|
||||
|
||||
// ChartProps for the Chart component
|
||||
type ChartProps struct {
|
||||
Config ChartConfig
|
||||
Type string
|
||||
Data ChartData
|
||||
Options ChartOptions
|
||||
ShowLegend bool
|
||||
ShowXAxis bool
|
||||
ShowYAxis bool
|
||||
Class string // Additional CSS classes
|
||||
Height string // Chart container height
|
||||
Width string // Chart container width
|
||||
@ -107,14 +111,14 @@ func ChartScripts() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!-- Load Chart.js library --> <script nonce=\"")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!-- Load Chart.js library --> <script defer nonce=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.GetNonce(ctx))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 72, Col: 37}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 76, Col: 43}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -127,13 +131,13 @@ func ChartScripts() templ.Component {
|
||||
var templ_7745c5c3_Var4 string
|
||||
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.GetNonce(ctx))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 74, Col: 37}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 78, Col: 37}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">\n\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\n\t\t\t\t// Chart-Instanzen speichern\n\t\t\t\tconst chartInstances = {};\n\n\t\t\t\t// Funktion zum Abrufen der aktuellen CSS-Variablen-Werte\n\t\t\t\tfunction getThemeColors() {\n\t\t\t\t\tconst computedStyle = getComputedStyle(document.documentElement);\n\t\t\t\t\treturn {\n\t\t\t\t\t\tforeground: computedStyle.getPropertyValue('--foreground').trim(),\n\t\t\t\t\t\tbackground: computedStyle.getPropertyValue('--background').trim(),\n\t\t\t\t\t\tmutedForeground: computedStyle.getPropertyValue('--muted-foreground').trim(),\n\t\t\t\t\t\tborder: computedStyle.getPropertyValue('--border').trim()\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\t// Funktion zum Initialisieren/Aktualisieren der Charts\n\t\t\t\tfunction initCharts() {\n\t\t\t\t\t// Aktuelle Farbwerte abrufen\n\t\t\t\t\tconst colors = getThemeColors();\n\n\t\t\t\t\tdocument.querySelectorAll('.chart-container').forEach(container => {\n\t\t\t\t\t\tconst canvas = container.querySelector('canvas');\n\t\t\t\t\t\tif (!canvas) return;\n\n\t\t\t\t\t\tconst dataId = canvas.getAttribute('data-chart-id');\n\t\t\t\t\t\tconst dataElement = document.getElementById(dataId);\n\t\t\t\t\t\tif (!dataElement) return;\n\n\t\t\t\t\t\t// Vorhandenes Chart zerstören, falls vorhanden\n\t\t\t\t\t\tif (chartInstances[canvas.id]) {\n\t\t\t\t\t\t\tchartInstances[canvas.id].destroy();\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Parse Konfiguration\n\t\t\t\t\t\tconst chartConfig = JSON.parse(dataElement.textContent);\n\t\t\t\t\t\tconsole.log(chartConfig)\n\t\t\t\t\t\t// Chart erstellen mit berechneten Theme-Farben\n\t\t\t\t\t\tconst chart = new Chart(canvas, {\n\t\t\t\t\t\t\t...chartConfig,\n\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\tplugins: {\n\t\t\t\t\t\t\t\t\tlegend: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showLegend || false,\n\t\t\t\t\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.foreground\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ttooltip: {\n\t\t\t\t\t\t\t\t\t\t// shadow and border possible?\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: colors.background,\n\t\t\t\t\t\t\t\t\t\tbodyColor: colors.mutedForeground,\n\t\t\t\t\t\t\t\t\t\ttitleColor: colors.foreground,\n\t\t\t\t\t\t\t\t\t\tborderColor: colors.border,\n\t\t\t\t\t\t\t\t\t\tborderWidth: 1\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tscales: {\n\t\t\t\t\t\t\t\t\tx: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showXAxis || true,\n\t\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.mutedForeground\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ty: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showYAxis || false,\n\t\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.mutedForeground\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\n\t\t\t\t\t\t// Chart-Instanz speichern\n\t\t\t\t\t\tchartInstances[canvas.id] = chart;\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\t// Initial Charts erstellen\n\t\t\t\tinitCharts();\n\n\t\t\t\t// MutationObserver für Theme-Änderungen\n\t\t\t\tconst observer = new MutationObserver(() => {\n\t\t\t\t\t// Kurze Verzögerung, um sicherzustellen, dass CSS-Variablen aktualisiert sind\n\t\t\t\t\tsetTimeout(initCharts, 50);\n\t\t\t\t});\n\n\t\t\t\tobserver.observe(document.documentElement, { attributes: true });\n\n\t\t\t\t// Auch auf Alpine-Initialisierung warten\n\t\t\t\tdocument.addEventListener('alpine:initialized', () => {\n\t\t\t\t\t// Globales Theme-Changed-Event registrieren\n\t\t\t\t\tdocument.addEventListener('theme-changed', initCharts);\n\t\t\t\t});\n\t\t\t});\n\t\t</script>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">\n\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\n\t\t\t\t// Chart-Instanzen speichern\n\t\t\t\tconst chartInstances = {};\n\n\t\t\t\t// Funktion zum Abrufen der aktuellen CSS-Variablen-Werte\n\t\t\t\tfunction getThemeColors() {\n\t\t\t\t\tconst computedStyle = getComputedStyle(document.documentElement);\n\t\t\t\t\treturn {\n\t\t\t\t\t\tforeground: computedStyle.getPropertyValue('--foreground').trim(),\n\t\t\t\t\t\tbackground: computedStyle.getPropertyValue('--background').trim(),\n\t\t\t\t\t\tmutedForeground: computedStyle.getPropertyValue('--muted-foreground').trim(),\n\t\t\t\t\t\tborder: computedStyle.getPropertyValue('--border').trim()\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\t// Funktion zum Initialisieren/Aktualisieren der Charts\n\t\t\t\tfunction initCharts() {\n\t\t\t\t\t// Aktuelle Farbwerte abrufen\n\t\t\t\t\tconst colors = getThemeColors();\n\n\t\t\t\t\tdocument.querySelectorAll('.chart-container').forEach(container => {\n\t\t\t\t\t\tconst canvas = container.querySelector('canvas');\n\t\t\t\t\t\tif (!canvas) return;\n\n\t\t\t\t\t\tconst dataId = canvas.getAttribute('data-chart-id');\n\t\t\t\t\t\tconst dataElement = document.getElementById(dataId);\n\t\t\t\t\t\tif (!dataElement) return;\n\n\t\t\t\t\t\t// Vorhandenes Chart zerstören, falls vorhanden\n\t\t\t\t\t\tif (chartInstances[canvas.id]) {\n\t\t\t\t\t\t\tchartInstances[canvas.id].destroy();\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Parse Konfiguration\n\t\t\t\t\t\tconst chartConfig = JSON.parse(dataElement.textContent);\n\n\t\t\t\t\t\t// Chart erstellen mit berechneten Theme-Farben\n\t\t\t\t\t\tconst chart = new Chart(canvas, {\n\t\t\t\t\t\t\t...chartConfig,\n\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\tplugins: {\n\t\t\t\t\t\t\t\t\tlegend: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showLegend || false,\n\t\t\t\t\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.foreground\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ttooltip: {\n\t\t\t\t\t\t\t\t\t\t// shadow and border possible?\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: colors.background,\n\t\t\t\t\t\t\t\t\t\tbodyColor: colors.mutedForeground,\n\t\t\t\t\t\t\t\t\t\ttitleColor: colors.foreground,\n\t\t\t\t\t\t\t\t\t\tborderColor: colors.border,\n\t\t\t\t\t\t\t\t\t\tborderWidth: 1\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tscales: {\n\t\t\t\t\t\t\t\t\tx: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showXAxis,\n\t\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.mutedForeground\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ty: {\n\t\t\t\t\t\t\t\t\t\tdisplay: chartConfig.showYAxis,\n\t\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\t\tcolor: colors.mutedForeground\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\n\t\t\t\t\t\t// Chart-Instanz speichern\n\t\t\t\t\t\tchartInstances[canvas.id] = chart;\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\t// Initial Charts erstellen\n\t\t\t\tinitCharts();\n\n\t\t\t\t// MutationObserver für Theme-Änderungen\n\t\t\t\tconst observer = new MutationObserver(() => {\n\t\t\t\t\t// Kurze Verzögerung, um sicherzustellen, dass CSS-Variablen aktualisiert sind\n\t\t\t\t\tsetTimeout(initCharts, 50);\n\t\t\t\t});\n\n\t\t\t\tobserver.observe(document.documentElement, { attributes: true });\n\n\t\t\t\t// Auch auf Alpine-Initialisierung warten\n\t\t\t\tdocument.addEventListener('alpine:initialized', () => {\n\t\t\t\t\t// Globales Theme-Changed-Event registrieren\n\t\t\t\t\tdocument.addEventListener('theme-changed', initCharts);\n\t\t\t\t});\n\t\t\t});\n\t\t</script>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -180,10 +184,10 @@ func Chart(props ChartProps) templ.Component {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if props.Height == "" {
|
||||
props.Height = "40vh"
|
||||
props.Height = "41vh"
|
||||
}
|
||||
if props.Width == "" {
|
||||
props.Width = "100%"
|
||||
props.Width = "101%"
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Chart container -->")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -214,7 +218,7 @@ func Chart(props ChartProps) templ.Component {
|
||||
var templ_7745c5c3_Var8 string
|
||||
templ_7745c5c3_Var8, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("position: relative; height:" + props.Height + "; width:" + props.Width)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 190, Col: 81}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 194, Col: 81}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -227,7 +231,7 @@ func Chart(props ChartProps) templ.Component {
|
||||
var templ_7745c5c3_Var9 string
|
||||
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(chartId)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 192, Col: 22}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 196, Col: 22}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@ -240,125 +244,27 @@ func Chart(props ChartProps) templ.Component {
|
||||
var templ_7745c5c3_Var10 string
|
||||
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(dataId)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 192, Col: 47}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/chart.templ`, Line: 196, Col: 47}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"></canvas></div><!-- Store the chart configuration in a JSON script tag -->")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"></canvas></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
props.Config.ShowLegend = props.ShowLegend
|
||||
templ_7745c5c3_Err = templ.JSONScript(dataId, props.Config).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
// Helper functions to create common charts
|
||||
func LineChart(labels []string, values []float64, title string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var11 == nil {
|
||||
templ_7745c5c3_Var11 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = Chart(ChartProps{
|
||||
Config: ChartConfig{
|
||||
Type: "line",
|
||||
Data: ChartData{
|
||||
Labels: labels,
|
||||
Datasets: []ChartDataset{
|
||||
{
|
||||
Label: title,
|
||||
Data: values,
|
||||
BorderColor: "rgb(75, 192, 192)",
|
||||
BorderWidth: 1,
|
||||
Tension: 0.1,
|
||||
},
|
||||
},
|
||||
},
|
||||
Options: ChartOptions{
|
||||
Responsive: true,
|
||||
Scales: ChartScales{
|
||||
Y: ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
func BarChart(labels []string, values []float64, title string) templ.Component {
|
||||
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var12 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var12 == nil {
|
||||
templ_7745c5c3_Var12 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = Chart(ChartProps{
|
||||
Config: ChartConfig{
|
||||
Type: "bar",
|
||||
Data: ChartData{
|
||||
Labels: labels,
|
||||
Datasets: []ChartDataset{
|
||||
{
|
||||
Label: title,
|
||||
Data: values,
|
||||
BorderWidth: 1,
|
||||
BackgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
BorderColor: "rgb(75, 192, 192)",
|
||||
},
|
||||
},
|
||||
},
|
||||
Options: ChartOptions{
|
||||
Responsive: true,
|
||||
Scales: ChartScales{
|
||||
Y: ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}).Render(ctx, templ_7745c5c3_Buffer)
|
||||
|
||||
// Create chart config with defaults
|
||||
chartConfig := ChartConfig{
|
||||
Type: props.Type,
|
||||
Data: props.Data,
|
||||
Options: props.Options,
|
||||
ShowLegend: props.ShowLegend,
|
||||
ShowXAxis: props.ShowXAxis,
|
||||
ShowYAxis: props.ShowYAxis,
|
||||
}
|
||||
templ_7745c5c3_Err = templ.JSONScript(dataId, chartConfig).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@ -366,4 +272,61 @@ func BarChart(labels []string, values []float64, title string) templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
// // Helper functions to create common charts
|
||||
//
|
||||
// templ LineChart(labels []string, values []float64, title string) {
|
||||
// @Chart(ChartProps{
|
||||
// Config: ChartConfig{
|
||||
// Type: "line",
|
||||
// Data: ChartData{
|
||||
// Labels: labels,
|
||||
// Datasets: []ChartDataset{
|
||||
// {
|
||||
// Label: title,
|
||||
// Data: values,
|
||||
// BorderColor: "rgb(75, 192, 192)",
|
||||
// BorderWidth: 1,
|
||||
// Tension: 0.1,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// Options: ChartOptions{
|
||||
// Responsive: true,
|
||||
// Scales: ChartScales{
|
||||
// Y: ChartYAxis{
|
||||
// BeginAtZero: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// templ BarChart(labels []string, values []float64, title string) {
|
||||
// @Chart(ChartProps{
|
||||
// Config: ChartConfig{
|
||||
// Type: "bar",
|
||||
// Data: ChartData{
|
||||
// Labels: labels,
|
||||
// Datasets: []ChartDataset{
|
||||
// {
|
||||
// Label: title,
|
||||
// Data: values,
|
||||
// BorderWidth: 1,
|
||||
// BackgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
// BorderColor: "rgb(75, 192, 192)",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// Options: ChartOptions{
|
||||
// Responsive: true,
|
||||
// Scales: ChartScales{
|
||||
// Y: ChartYAxis{
|
||||
// BeginAtZero: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
|
||||
2
go.mod
2
go.mod
@ -1,6 +1,6 @@
|
||||
module github.com/axzilla/templui
|
||||
|
||||
go 1.23.3
|
||||
go 1.24.0
|
||||
|
||||
require (
|
||||
github.com/Oudwins/tailwind-merge-go v0.2.0
|
||||
|
||||
@ -12,36 +12,35 @@ templ Chart() {
|
||||
<h1 class="text-2xl font-bold mb-4">Chart Example</h1>
|
||||
@components.Card(components.CardProps{}) {
|
||||
@components.Chart(components.ChartProps{
|
||||
Config: components.ChartConfig{
|
||||
Type: "bar",
|
||||
Data: components.ChartData{
|
||||
Labels: []string{"Red", "Blue", "Yellow", "Green", "Purple", "Orange"},
|
||||
Datasets: []components.ChartDataset{
|
||||
{
|
||||
Label: "Dataset 1",
|
||||
Data: []float64{12, 19, 3, 5, 2, 3},
|
||||
},
|
||||
{
|
||||
Label: "Dataset 2",
|
||||
Data: []float64{7, 11, 5, 8, 3, 7},
|
||||
},
|
||||
{
|
||||
Label: "Dataset 2",
|
||||
Data: []float64{1, 111, 15, 81, 13, 17},
|
||||
},
|
||||
Type: "bar",
|
||||
ShowXAxis: true,
|
||||
Data: components.ChartData{
|
||||
Labels: []string{"Red", "Blue", "Yellow", "Green", "Purple", "Orange"},
|
||||
Datasets: []components.ChartDataset{
|
||||
{
|
||||
Label: "Dataset 1",
|
||||
Data: []float64{12, 19, 3, 5, 2, 3},
|
||||
},
|
||||
{
|
||||
Label: "Dataset 2",
|
||||
Data: []float64{7, 11, 5, 8, 3, 7},
|
||||
},
|
||||
{
|
||||
Label: "Dataset 2",
|
||||
Data: []float64{1, 111, 15, 81, 13, 17},
|
||||
},
|
||||
},
|
||||
Options: components.ChartOptions{
|
||||
Responsive: true,
|
||||
Legend: false,
|
||||
Scales: components.ChartScales{
|
||||
Y: components.ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
Title: "Value",
|
||||
},
|
||||
X: components.ChartXAxis{
|
||||
Title: "Category",
|
||||
},
|
||||
},
|
||||
Options: components.ChartOptions{
|
||||
Responsive: true,
|
||||
Legend: false,
|
||||
Scales: components.ChartScales{
|
||||
Y: components.ChartYAxis{
|
||||
BeginAtZero: true,
|
||||
Title: "Value",
|
||||
},
|
||||
X: components.ChartXAxis{
|
||||
Title: "Category",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -191,7 +191,7 @@ templ HowToUse() {
|
||||
<p class="mb-4 text-muted-foreground">Before using templUI, ensure you have these tools installed:</p>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold mb-2">1. Go (1.23 or later)</h3>
|
||||
<h3 class="text-xl font-semibold mb-2">1. Go (1.24 or later)</h3>
|
||||
<p class="text-muted-foreground mb-2">Check your Go version:</p>
|
||||
@components.Code(components.CodeProps{Language: "shell", ShowCopyButton: true}) {
|
||||
{ installGo }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user