281 lines · 2 files · 7.1 kB
cases/144-shadcn-bar-default/example.tsx139 lines · entry
cases/144-shadcn-bar-default/example.tsx
import { barY, defineChart, type ChartPoint } from '@tanstack/charts'
import { RendererChart } from '@tanstack/charts/react/tooltip'
import { tooltip } from '@tanstack/charts/tooltip'
import { motion } from '@tanstack/charts/motion'
import { scaleBand, scaleLinear } from 'd3-scale'
import { shadcnColors, shadcnMonths } from '@tanstack/charts-data/shadcn'
import './styles.css'
export function createExampleChart() {
const rows = shadcnMonths
const marks = [
barY(rows, {
id: 'visitor-bars',
x: 'month',
y: 'desktop',
fill: (row) =>
false && row.desktop < 0 ? shadcnColors[1] : shadcnColors[0],
radius: 8,
}),
]
return defineChart(
{
marks,
x: shadcnXAxis(),
y: { scale: scaleLinear, grid: true, axis: false },
margin: { top: 5, right: 5, bottom: 35, left: 5 },
theme: shadcnTheme(),
},
{
svgAnimation: false,
focus: 'group-x',
tooltip: {
use: tooltip,
className: 'sc-chart-tooltip',
anchor: 'group-center',
placement: 'auto',
sort: 'color-domain',
content: (points) => shadcnTooltipContent(points),
},
},
)
}
function shadcnXAxis() {
return {
scale: () => scaleBand<string>().paddingInner(0.2).paddingOuter(0.1),
axis: {
line: false,
ticks: {
size: 0,
padding: 10,
format: (value: string) => value.slice(0, 3),
},
},
}
}
function shadcnTheme() {
return {
foreground: 'var(--muted-foreground, var(--muted))',
grid: 'var(--border)',
background: 'transparent',
}
}
function titleCase(value: string) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
function shadcnTooltipContent<TDatum>(points: readonly ChartPoint<TDatum>[]) {
return {
title: String(points[0]?.xValue ?? ''),
rows: points.map((point) => ({
label: titleCase(
String(
point.group ??
point.markId.replace(
/-?(bars|lines|areas|slices|values|radar)$/u,
'',
),
),
),
value: Number(point.yValue ?? point.xValue ?? 0).toLocaleString('en-US'),
color: point.color,
})),
}
}
export const definition = createExampleChart()
const renderer = motion({
initial: 'always',
transition: { type: 'spring', stiffness: 170, damping: 18, mass: 1 },
})
export interface ExampleProps {
width?: number
height?: number
}
export default function Example({ width = 640, height = 600 }: ExampleProps) {
const contentWidth = Math.max(1, width - 50)
const chartWidth = contentWidth
const chartHeight = (contentWidth * 9) / 16
return (
<div className="sc-example" style={{ width, height }}>
<article className="sc-card sc-default" style={{ width }}>
<header className="sc-card-header">
<div className="sc-card-heading">
<h2>Bar Chart</h2>
<p>January - June 2024</p>
</div>
</header>
<div className="sc-card-content">
<div
className="sc-chart"
style={{ width: chartWidth, height: chartHeight }}
>
<RendererChart
definition={definition}
renderer={renderer}
initialWidth={chartWidth}
height={chartHeight}
ariaLabel="Bar Chart"
/>
</div>
</div>
<footer className="sc-card-footer">
<TrendFooter note="Showing total visitors for the last 6 months" />
</footer>
</article>
</div>
)
}
function TrendFooter({ note }: { note: string }) {
return (
<>
<div className="sc-trend">
Trending up by 5.2% this month{' '}
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m3 17 6-6 4 4 8-8" />
<path d="M14 7h7v7" />
</svg>
</div>
<div className="sc-footer-note">{note}</div>
</>
)
}cases/144-shadcn-bar-default/styles.css142 lines · dependency
cases/144-shadcn-bar-default/styles.css
.sc-example {
--background: oklch(1 0 0);
--foreground: oklch(0 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--border: oklch(0.922 0 0);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
color: var(--foreground);
background: var(--background);
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
text-rendering: geometricPrecision;
}
:root[data-theme='dark'] .sc-example {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--border: oklch(1 0 0 / 10%);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
}
.sc-example,
.sc-example * {
box-sizing: border-box;
}
.sc-card {
display: flex;
flex-direction: column;
gap: 24px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--card);
color: var(--card-foreground);
padding: 24px 0;
}
.sc-card-header {
display: grid;
gap: 8px;
padding: 0 24px;
}
.sc-card-heading {
display: grid;
gap: 8px;
}
.sc-card-header h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
}
.sc-card-header p {
margin: 0;
color: var(--muted-foreground);
font-size: 14px;
line-height: 20px;
}
.sc-card-content {
display: flex;
min-height: 0;
flex-direction: column;
padding: 0 24px;
}
.sc-chart {
position: relative;
flex: none;
}
.sc-chart > * {
display: block;
}
.sc-card-footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 0 24px;
font-size: 14px;
line-height: 1;
}
.sc-trend {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.sc-trend svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.sc-footer-note {
color: var(--muted-foreground);
}
.sc-example .ts-chart {
color: var(--muted-foreground);
}
.sc-example .ts-chart__grid line,
.sc-example .ts-chart__polar-grid path,
.sc-example .ts-chart__polar-grid line {
stroke: var(--border);
}
.sc-example .ts-chart__axes text,
.sc-example .ts-chart__polar-grid text {
fill: var(--muted-foreground);
font-size: 12px;
}
.sc-example .ts-chart-tooltip {
min-width: 128px;
padding: 7px 10px !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
background: var(--card) !important;
color: var(--card-foreground) !important;
box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
font-size: 12px;
}