52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2234,"use client" import type { CSSProperties } from "react" import { defineChart, type GroupLayout, type StackLayout, } from "@tanstack/charts" import { barX, barY, type BarXOptions, type BarYOptions, } from "@tanstack/charts/bar" import { group } from "@tanstack/charts/group" import { scaleBand } from "@tanstack/charts/scales/band" import { stack } from "@tanstack/charts/stack" import { ExperimentalChart, ExperimentalChartFrame, experimentalDefaultValueFormatter, getExperimentalCategoryAxis, getExperimentalChartTooltip, getExperimentalNumericAxis, getExperimentalNumericScale, getExperimentalSelectedSeriesColor, getExperimentalSeriesChartOptions, toExperimentalSeriesData, useExperimentalChartFrame, experimentalValueToPercent, type ExperimentalBaseChartProps, type ExperimentalChartAxisProps, type ExperimentalChartNumericAxisProps, type ExperimentalChartPlotProps, type ExperimentalChartType, type ExperimentalSeriesDatum, } from "./experimental-chart" type BarOptions = Pick< BarXOptions & BarYOptions, "fillOpacity" | "inset" | "maxThickness" | "radius" > type ExperimentalBarChartProps = ExperimentalBaseChartProps & { barCategoryGap?: number barGap?: number barProps?: BarOptions barRadius?: number barSize?: number categoryAxis?: ExperimentalChartAxisProps | false grid?: "hidden" | "visible" layout?: "horizontal" | "vertical" type?: ExperimentalChartType valueAxis?: ExperimentalChartNumericAxisProps | false } type ExperimentalBarChartPlotProps = ExperimentalChartPlotProps function getBarDirection(value: number | null) { return value !== null && value < 0 ? "negative" : "positive" } function getTerminalSeries(rows: ExperimentalSeriesDatum[]) { const terminalSeries = new Map() for (const row of rows) { if (row.value === null || row.value === 0) { continue } terminalSeries.set(`${row.index}-${getBarDirection(row.value)}`, row.series) } return terminalSeries } function ExperimentalBarChartPlot({ ariaLabel = "Bar chart", barCategoryGap = 5, barGap = 4, barProps, barRadius, barSize, categoryAxis, colors, config, data, dataKey, grid = "visible", layout = "horizontal", size, tooltip, tooltipProps, type = "default", valueAxis, valueFormatter = experimentalDefaultValueFormatter, }: ExperimentalBarChartPlotProps) { const { actions: { selectSeries }, state: { selectedSeries }, } = useExperimentalChartFrame() const rows = toExperimentalSeriesData({ config, data, dataKey }) const { chartColors, options, seriesNames } = getExperimentalSeriesChartOptions(config, colors) const tooltipValueFormatter = type === "percent" ? experimentalValueToPercent : valueFormatter const vertical = layout === "horizontal" const stacked = type === "stacked" || type === "percent" let resolvedBarRadius = barRadius if (resolvedBarRadius === undefined) { resolvedBarRadius = type === "default" && seriesNames.length === 1 ? 8 : 4 } const terminalSeries = getTerminalSeries(rows) let barLayout: GroupLayout | StackLayout = group({ padding: Math.min(barGap / 20, 0.8), }) if (type === "stacked") { barLayout = stack() } else if (type === "percent") { barLayout = stack({ offset: "normalize" }) } const sharedOptions = { color: "series" as const, fill: (row: ExperimentalSeriesDatum) => getExperimentalSelectedSeriesColor({ color: chartColors[row.series] ?? "var(--chart-1)", opacity: 12, selectedSeries, series: row.series, }), inset: barCategoryGap / 2, key: (row: ExperimentalSeriesDatum) => { const direction = getBarDirection(row.value) let position = "outer" if ( stacked && terminalSeries.get(`${row.index}-${direction}`) !== row.series ) { position = "inner" } return `${direction}-${position}-${row.series}-${row.index}` }, layout: barLayout, maxThickness: barSize ?? 48, radius: 0, z: "series" as const, ...barProps, } const categoryAxisDefinition = getExperimentalCategoryAxis({ data, dataKey, props: categoryAxis, }) const valueAxisDefinition = getExperimentalNumericAxis({ props: valueAxis, valueFormatter: tooltipValueFormatter, }) const resolvedTooltipProps = { anchor: "pointer" as const, offset: 24, placement: "auto" as const, ...tooltipProps, } function createVerticalDefinition() { const baseDefinition = defineChart({ ...options, focus: "group-x", marks: [ barY(rows, { ...sharedOptions, x: "category", y: "value", }), ], x: { axis: categoryAxisDefinition, scale: () => scaleBand().padding(0.12), }, y: { axis: valueAxisDefinition, grid: grid === "visible", nice: true, scale: getExperimentalNumericScale(valueAxis), }, }) return baseDefinition } function createHorizontalDefinition() { const baseDefinition = defineChart({ ...options, focus: "group-y", marks: [ barX(rows, { ...sharedOptions, x: "value", y: "category", }), ], x: { axis: valueAxisDefinition, grid: grid === "visible", nice: true, scale: getExperimentalNumericScale(valueAxis), }, y: { axis: categoryAxisDefinition, scale: () => scaleBand().padding(0.12), }, }) return baseDefinition } const baseDefinition = vertical ? createVerticalDefinition() : createHorizontalDefinition() const { definition, renderTooltipBody } = getExperimentalChartTooltip({ config, definition: baseDefinition, tooltip, tooltipProps: resolvedTooltipProps, valueFormatter: tooltipValueFormatter, }) let roundedBarClass = "[&_rect[data-ts-key*=positive-outer-]]:[clip-path:inset(0_round_var(--bar-radius)_var(--bar-radius)_0_0)] [&_rect[data-ts-key*=negative-outer-]]:[clip-path:inset(0_round_0_0_var(--bar-radius)_var(--bar-radius))]" if (!vertical) { roundedBarClass = "[&_rect[data-ts-key*=positive-outer-]]:[clip-path:inset(0_round_0_var(--bar-radius)_var(--bar-radius)_0)] [&_rect[data-ts-key*=negative-outer-]]:[clip-path:inset(0_round_var(--bar-radius)_0_0_var(--bar-radius))]" } if (barProps?.radius !== undefined) { roundedBarClass = "" } return ( rect[data-ts-key^=bar-]:hover)>rect[data-ts-key^=bar-]:not(:hover)]:opacity-60 [&_rect[data-ts-key^=bar-]]:cursor-pointer [&_rect[data-ts-key^=bar-]]:transition-[filter,opacity] [&_rect[data-ts-key^=bar-]]:duration-150 [&_rect[data-ts-key^=bar-]]:ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:[&_rect[data-ts-key^=bar-]]:transition-none [&_rect[data-ts-key^=bar-]:hover]:brightness-110`} definition={definition} onSelect={(point) => { selectSeries(point?.datum.series ?? null) }} renderTooltipBody={renderTooltipBody} size={size} style={ { "--bar-radius": `${resolvedBarRadius}px`, } as CSSProperties } /> ) } function ExperimentalBarChart({ ariaLabel, barCategoryGap, barGap, barProps, barRadius, barSize, categoryAxis, className, colors, config, data, dataKey, grid, layout, legend, tooltip, tooltipProps, type = "default", size, valueAxis, valueFormatter, ...frameProps }: ExperimentalBarChartProps) { let resolvedLegend = legend if ( legend === undefined && type === "default" && Object.keys(config).length < 2 ) { resolvedLegend = false } return ( ) } export { ExperimentalBarChart } export type { ExperimentalBarChartProps } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@preskok","registryDependencies":["https://ui-three-mu.vercel.app/r/experimental-chart.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/experimental-bar-chart.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]