Chart

// Package chart holds the site's example gsx components for ui/chart.
package chart

import "github.com/gsxhq/gsxui/ui"

// Basic renders a two-series bar chart: Chart's container, BarChart's
// model builder, ChartTooltip's hover chrome and ChartLegend's
// server-rendered legend row together — this example keeps the style
// contract's examples-coverage gate satisfied for the chart-legend and
// chart-tooltip slots ChartLegend and ChartTooltip's own
// ChartTooltipTemplate render (see registry/canonical/shapes/chart.go).
component Basic() {
	{{
		cfg := ui.ChartConfig{
			{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
			{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
		}
		data := []ui.ChartDatum{
			{"month": "Jan", "desktop": 186.0, "mobile": 80.0},
			{"month": "Feb", "desktop": 305.0, "mobile": 200.0},
			{"month": "Mar", "desktop": 237.0, "mobile": 120.0},
		}
	}}
	<ui.Chart config={cfg}>
		<ui.BarChart data={data}>
			<ui.ChartCartesianGrid horizontal/>
			<ui.ChartXAxis key="month"/>
			<ui.ChartTooltip/>
			<ui.ChartBar key="desktop"/>
			<ui.ChartBar key="mobile"/>
			<ui.ChartLegend/>
		</ui.BarChart>
	</ui.Chart>
}

package chart

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Area ports shadcn's chart-area-gradient demo: a stacked, gradient-filled
// AreaChart wrapped in a Card, exercising ChartDefs/ChartLinearGradient
// (the gradient <defs> upstream's own chart-area-interactive demo also
// relies on) alongside the cartesian grid, x axis and tooltip. The
// interactive demo's client-side time-range Select has no gsxui pendant
// (no client state this task models), so this keeps the static six months
// of data every upstream chart-area-*.tsx demo shares instead.
component Area() {
	{{
		cfg := ui.ChartConfig{
			{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
			{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
		}
		data := []ui.ChartDatum{
			{"month": "January", "desktop": 186.0, "mobile": 80.0},
			{"month": "February", "desktop": 305.0, "mobile": 200.0},
			{"month": "March", "desktop": 237.0, "mobile": 120.0},
			{"month": "April", "desktop": 73.0, "mobile": 190.0},
			{"month": "May", "desktop": 209.0, "mobile": 130.0},
			{"month": "June", "desktop": 214.0, "mobile": 140.0},
		}
	}}
	<ui.Card>
		<ui.CardHeader>
			<ui.CardTitle>Area Chart - Gradient</ui.CardTitle>
			<ui.CardDescription>Showing total visitors for the last 6 months</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent>
			<ui.Chart config={cfg}>
				<ui.AreaChart data={data} marginLeft={12} marginRight={12}>
					<ui.ChartCartesianGrid horizontal/>
					<ui.ChartXAxis key="month" tickMargin={8}/>
					<ui.ChartTooltip/>
					<ui.ChartDefs>
						<ui.ChartLinearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
							<stop offset="5%" stop-color="var(--color-desktop)" stop-opacity="0.8"/>
							<stop offset="95%" stop-color="var(--color-desktop)" stop-opacity="0.1"/>
						</ui.ChartLinearGradient>
						<ui.ChartLinearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
							<stop offset="5%" stop-color="var(--color-mobile)" stop-opacity="0.8"/>
							<stop offset="95%" stop-color="var(--color-mobile)" stop-opacity="0.1"/>
						</ui.ChartLinearGradient>
					</ui.ChartDefs>
					<ui.ChartArea
						key="mobile"
						curve="natural"
						fill="url(#fillMobile)"
						fillOpacity={0.4}
						stroke="var(--color-mobile)"
						stackId="a"
					/>
					<ui.ChartArea
						key="desktop"
						curve="natural"
						fill="url(#fillDesktop)"
						fillOpacity={0.4}
						stroke="var(--color-desktop)"
						stackId="a"
					/>
				</ui.AreaChart>
			</ui.Chart>
		</ui.CardContent>
		<ui.CardFooter>
			<div class="flex w-full items-start gap-2 text-sm">
				<div class="grid gap-2">
					<div class="flex items-center gap-2 leading-none font-medium">
						Trending up by 5.2% this month
						<uiicon.TrendingUp class="size-4"/>
					</div>
					<div class="flex items-center gap-2 leading-none text-muted-foreground">
						January - June 2024
					</div>
				</div>
			</div>
		</ui.CardFooter>
	</ui.Card>
}

package chart

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Line ports shadcn's chart-line-multiple demo: two monotone lines sharing
// one x axis, cartesian grid and tooltip, wrapped in a Card with a
// trending-up footer.
component Line() {
	{{
		cfg := ui.ChartConfig{
			{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
			{Key: "mobile", Label: "Mobile", Color: "var(--chart-2)"},
		}
		data := []ui.ChartDatum{
			{"month": "January", "desktop": 186.0, "mobile": 80.0},
			{"month": "February", "desktop": 305.0, "mobile": 200.0},
			{"month": "March", "desktop": 237.0, "mobile": 120.0},
			{"month": "April", "desktop": 73.0, "mobile": 190.0},
			{"month": "May", "desktop": 209.0, "mobile": 130.0},
			{"month": "June", "desktop": 214.0, "mobile": 140.0},
		}
	}}
	<ui.Card>
		<ui.CardHeader>
			<ui.CardTitle>Line Chart - Multiple</ui.CardTitle>
			<ui.CardDescription>January - June 2024</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent>
			<ui.Chart config={cfg}>
				<ui.LineChart data={data} marginLeft={12} marginRight={12}>
					<ui.ChartCartesianGrid horizontal/>
					<ui.ChartXAxis key="month" tickMargin={8}/>
					<ui.ChartTooltip/>
					<ui.ChartLine key="desktop" curve="monotone" stroke="var(--color-desktop)" strokeWidth={2}/>
					<ui.ChartLine key="mobile" curve="monotone" stroke="var(--color-mobile)" strokeWidth={2}/>
				</ui.LineChart>
			</ui.Chart>
		</ui.CardContent>
		<ui.CardFooter>
			<div class="flex w-full items-start gap-2 text-sm">
				<div class="grid gap-2">
					<div class="flex items-center gap-2 leading-none font-medium">
						Trending up by 5.2% this month
						<uiicon.TrendingUp class="size-4"/>
					</div>
					<div class="flex items-center gap-2 leading-none text-muted-foreground">
						Showing total visitors for the last 6 months
					</div>
				</div>
			</div>
		</ui.CardFooter>
	</ui.Card>
}

package chart

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Pie ports shadcn's chart-pie-donut demo: a donut PieChart over five
// browser-share slices with a hidden-label tooltip, wrapped in a Card. The
// sibling chart-pie-donut-text demo's center total (a Recharts Label
// render-prop mounted through Pie) has no gsxui pendant — Label isn't
// ported (see ui/chart.gsx's polar-model-builder section header) — so this
// keeps the plain donut instead.
component Pie() {
	{{
		cfg := ui.ChartConfig{
			{Key: "visitors", Label: "Visitors"},
			{Key: "chrome", Label: "Chrome", Color: "var(--chart-1)"},
			{Key: "safari", Label: "Safari", Color: "var(--chart-2)"},
			{Key: "firefox", Label: "Firefox", Color: "var(--chart-3)"},
			{Key: "edge", Label: "Edge", Color: "var(--chart-4)"},
			{Key: "other", Label: "Other", Color: "var(--chart-5)"},
		}
		data := []ui.ChartDatum{
			{"browser": "chrome", "visitors": 275.0, "fill": "var(--color-chrome)"},
			{"browser": "safari", "visitors": 200.0, "fill": "var(--color-safari)"},
			{"browser": "firefox", "visitors": 187.0, "fill": "var(--color-firefox)"},
			{"browser": "edge", "visitors": 173.0, "fill": "var(--color-edge)"},
			{"browser": "other", "visitors": 90.0, "fill": "var(--color-other)"},
		}
	}}
	<ui.Card class="flex flex-col">
		<ui.CardHeader class="items-center pb-0">
			<ui.CardTitle>Pie Chart - Donut</ui.CardTitle>
			<ui.CardDescription>January - June 2024</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent class="flex-1 pb-0">
			<ui.Chart config={cfg} class="mx-auto aspect-square max-h-[250px]">
				<ui.PieChart>
					<ui.ChartTooltip hideLabel/>
					<ui.ChartPie data={data} key="visitors" nameKey="browser" innerRadius={60}/>
				</ui.PieChart>
			</ui.Chart>
		</ui.CardContent>
		<ui.CardFooter class="flex-col gap-2 text-sm">
			<div class="flex items-center gap-2 leading-none font-medium">
				Trending up by 5.2% this month
				<uiicon.TrendingUp class="size-4"/>
			</div>
			<div class="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		</ui.CardFooter>
	</ui.Card>
}

package chart

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Radar ports shadcn's chart-radar-default demo: a single-series RadarChart
// with a polar grid and angle axis, wrapped in a Card.
component Radar() {
	{{
		cfg := ui.ChartConfig{
			{Key: "desktop", Label: "Desktop", Color: "var(--chart-1)"},
		}
		data := []ui.ChartDatum{
			{"month": "January", "desktop": 186.0},
			{"month": "February", "desktop": 305.0},
			{"month": "March", "desktop": 237.0},
			{"month": "April", "desktop": 273.0},
			{"month": "May", "desktop": 209.0},
			{"month": "June", "desktop": 214.0},
		}
	}}
	<ui.Card>
		<ui.CardHeader class="items-center pb-4">
			<ui.CardTitle>Radar Chart</ui.CardTitle>
			<ui.CardDescription>Showing total visitors for the last 6 months</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent class="pb-0">
			<ui.Chart config={cfg} class="mx-auto aspect-square max-h-[250px]">
				<ui.RadarChart data={data}>
					<ui.ChartTooltip/>
					<ui.ChartPolarAngleAxis key="month"/>
					<ui.ChartPolarGrid radialLines/>
					<ui.ChartRadar key="desktop" fill="var(--color-desktop)" fillOpacity={0.6}/>
				</ui.RadarChart>
			</ui.Chart>
		</ui.CardContent>
		<ui.CardFooter class="flex-col gap-2 text-sm">
			<div class="flex items-center gap-2 leading-none font-medium">
				Trending up by 5.2% this month
				<uiicon.TrendingUp class="size-4"/>
			</div>
			<div class="flex items-center gap-2 leading-none text-muted-foreground">
				January - June 2024
			</div>
		</ui.CardFooter>
	</ui.Card>
}

package chart

import (
	"github.com/gsxhq/gsxui/ui"
	uiicon "github.com/gsxhq/gsxui/ui/icon"
)

// Radial ports shadcn's chart-radial-simple demo: five browser-share radial
// bars over a background track, wrapped in a Card.
component Radial() {
	{{
		cfg := ui.ChartConfig{
			{Key: "visitors", Label: "Visitors"},
			{Key: "chrome", Label: "Chrome", Color: "var(--chart-1)"},
			{Key: "safari", Label: "Safari", Color: "var(--chart-2)"},
			{Key: "firefox", Label: "Firefox", Color: "var(--chart-3)"},
			{Key: "edge", Label: "Edge", Color: "var(--chart-4)"},
			{Key: "other", Label: "Other", Color: "var(--chart-5)"},
		}
		data := []ui.ChartDatum{
			{"browser": "chrome", "visitors": 275.0, "fill": "var(--color-chrome)"},
			{"browser": "safari", "visitors": 200.0, "fill": "var(--color-safari)"},
			{"browser": "firefox", "visitors": 187.0, "fill": "var(--color-firefox)"},
			{"browser": "edge", "visitors": 173.0, "fill": "var(--color-edge)"},
			{"browser": "other", "visitors": 90.0, "fill": "var(--color-other)"},
		}
	}}
	<ui.Card class="flex flex-col">
		<ui.CardHeader class="items-center pb-0">
			<ui.CardTitle>Radial Chart</ui.CardTitle>
			<ui.CardDescription>January - June 2024</ui.CardDescription>
		</ui.CardHeader>
		<ui.CardContent class="flex-1 pb-0">
			<ui.Chart config={cfg} class="mx-auto aspect-square max-h-[250px]">
				<ui.RadialBarChart data={data} innerRadius={30} outerRadius={110}>
					<ui.ChartTooltip hideLabel nameKey="browser"/>
					<ui.ChartRadialBar key="visitors" background/>
				</ui.RadialBarChart>
			</ui.Chart>
		</ui.CardContent>
		<ui.CardFooter class="flex-col gap-2 text-sm">
			<div class="flex items-center gap-2 leading-none font-medium">
				Trending up by 5.2% this month
				<uiicon.TrendingUp class="size-4"/>
			</div>
			<div class="leading-none text-muted-foreground">
				Showing total visitors for the last 6 months
			</div>
		</ui.CardFooter>
	</ui.Card>
}