51: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"] 52: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"] 53:T7953,@@jsxConfig({version: 4, mode: "automatic", module_: "BaseUi.BaseUiJsxDOM"}) @@directive("'use client'") @module("cn") external cn: (string, option) => string = "cn" type colorTheme = { light?: string, dark?: string, } type chartConfigItem = { label?: React.element, icon?: unit => React.element, color?: string, theme?: colorTheme, } type chartConfig = dict type chartContext = {config: chartConfig} type payloadItem<'value> = { @as("type") type_?: string, dataKey?: string, name?: string, color?: string, value?: 'value, payload: dict, } let chartContext: React.Context.t> = React.createContext(None) @throws(JsExn) let use = () => switch React.useContext(chartContext) { | Some(context) => context | None => JsError.throwWithMessage("useChart must be used within a ") } let themeColor = (~itemConfig: chartConfigItem, ~themeName: string) => switch itemConfig.theme { | Some(theme) => switch themeName { | "light" => theme.light->Option.orElse(itemConfig.color) | "dark" => theme.dark->Option.orElse(itemConfig.color) | _ => itemConfig.color } | None => itemConfig.color } let getPayloadConfigFromPayload = ( ~config: chartConfig, ~payload: payloadItem<'value>, ~key: string, ) => { let configLabelKey = switch key { | "name" => payload.name->Option.orElse(payload.payload->Dict.get("name")) | "dataKey" => payload.dataKey->Option.orElse(payload.payload->Dict.get("dataKey")) | _ => payload.payload->Dict.get(key) }->Option.getOr(key) switch config->Dict.get(configLabelKey) { | Some(foundConfig) => Some(foundConfig) | None => config->Dict.get(key) } } module Recharts = { module Dimensions = { type t = {width: float, height: float} } module ResponsiveContainer = { @module("recharts") @react.component external make: ( /** * width / height. If specified, the height will be calculated by width / aspect. */ ~aspect: float=?, /** * The width of chart container. * Can be a number or a percent string like "100%". * @default '100%' */ ~width: float=?, /** * The height of chart container. * Can be a number or a percent string like "100%". * @default '100%' */ ~height: float=?, /** * The minimum width of the container. * @default 0 */ ~minWidth: float=?, /** * The minimum height of the container. */ ~minHeight: float=?, /** * The initial width and height of the container. * @default {"width":-1,"height":-1} */ ~initialDimension: Dimensions.t=?, /** * The maximum height of the container. It can be a number. */ ~maxHeight: float=?, /** * The content of the container. * It can contain multiple charts, and then they will all share the same dimensions. */ ~children: React.element, /** * If specified a positive number, debounced function will be used to handle the resize event. * @default 0 */ ~debounce: float=?, /** * Unique identifier of this component. * Used as an HTML attribute `id`. */ ~id: string=?, /** * The HTML element's class name */ ~className: string=?, /** * The style of the container. */ ~style: ReactDOM.Style.t=?, /** * If specified provides a callback providing the updated chart width and height values. */ ~onResize: (float, float) => unit=?, ) => React.element = "ResponsiveContainer" } module AllowInDimension = { type t = {x?: bool, y?: bool} } module AnimationTiming = { @unboxed type t = | @as("ease") Ease | @as("linear") Linear | @as("ease-in") EaseIn | @as("ease-out") EaseOut | @as("ease-in-out") EaseInOut } module Index = { @unboxed type t = | Int(int) | String(string) } module CursorDefinition = { @unboxed type t = | @as(false) NoCursor | Custom(React.element) } module AnimationActive = { @unboxed type t = | @as(true) True | @as(false) False | @as("auto") Auto } module TooltipItemSorter = { @unboxed type t<'payloadItem> = | @as("name") Name | @as("value") Value | @as("dataKey") Id | Function((~item: 'payloadItem) => int) } module Coordinate = { type t = {x: float, y: float} module Partial = { type t = {x?: float, y?: float} } } module Offset = { @unboxed type t = | Int(int) | Coordinate(Coordinate.t) } module UniqueOption = { @unboxed type t<'entry> = | @as(true) True | @as(false) False | Function('entry => string) } module TooltipTrigger = { @unboxed type t = | @as("hover") Hover | @as("click") Click } type mouseEvent<'element> module Tooltip = { @module("recharts") @react.component external make: ( ~wrapperClassName: string=?, ~labelClassName: string=?, /** * If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. * If false, then Tooltip is never displayed. * If undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. */ ~active: bool=?, /** * This option allows the tooltip to extend beyond the viewBox of the chart itself. * @defaultValue {"x":false,"y":false} */ ~allowEscapeViewBox: AllowInDimension.t=?, /** * Specifies the duration of animation, the unit of this option is ms. * @defaultValue 400 */ ~animationDuration: float=?, /** * The type of easing function. * @defaultValue ease */ ~animationEasing: AnimationTiming.t=?, /** * Tooltip always attaches itself to the "Tooltip" axis. Which axis is it? Depends on the layout: * - horizontal layout -> X axis * - vertical layout -> Y axis * - radial layout -> radial axis * - centric layout -> angle axis * * Tooltip will use the default axis for the layout, unless you specify an axisId. * * @defaultValue 0 */ ~axisId: Index.t=?, /** * Renders the content of the tooltip. * * This should return HTML elements, not SVG elements. * * - If not set, the {@link DefaultTooltipContent} component is used. * - If set to a React element, this element will be cloned and extra props will be passed in. * - If set to a function, the function will be called and should return HTML elements. * * @see {@link https://recharts.github.io/en-US/examples/CustomContentOfTooltip/ Example with custom content} */ ~content: React.element=?, /** * The style of tooltip content which is a dom element. * @defaultValue {} */ ~contentStyle: ReactDOM.Style.t=?, /** * If set false, no cursor will be drawn when tooltip is active. * If set a object, the option is the configuration of cursor. * If set a React element, the option is the custom react element of drawing cursor. * @defaultValue true */ ~cursor: CursorDefinition.t=?, ~defaultIndex: Index.t=?, /** * When an item of the payload has value null or undefined, this item won't be displayed. * @defaultValue true */ ~filterNull: bool=?, /** * Function to customize the value in the tooltip. * If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name" */ ~formatter: ( ~name: string, ~value: string, ~item: 'payloadItem, ~index: int, ~payload: array<'payloadEntry>, ) => (React.element, React.element)=?, /** * If true, the tooltip will display information about hidden series. * Defaults to false. * Interacting with the hide property of Area, Bar, Line, Scatter. * * @defaultValue false */ ~includeHidden: bool=?, /** * If set false, animation of tooltip will be disabled. * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility. * @defaultValue auto */ ~isAnimationActive: AnimationActive.t=?, /** * Sorts tooltip items. * Defaults to 'name' which means it sorts alphabetically by graphical item `name` property. * @defaultValue name */ ~itemSorter: TooltipItemSorter.t<'payloadItem>=?, /** * The style of default tooltip content item which is a li element. * @defaultValue {} */ ~itemStyle: ReactDOM.Style.t=?, /** * The formatter function of label in tooltip. */ ~labelFormatter: (~label: 'label, ~payload: 'tooltipPayload) => React.element=?, /** * The style of default tooltip label which is a p element. * @defaultValue {} */ ~labelStyle: ReactDOM.Style.t=?, /** * The offset size between the position of tooltip and the mouse cursor position. * When a number is provided, the same offset is applied to both x and y axes. * * When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers) * @defaultValue 10 */ ~offset: Offset.t=?, ~payloadUniqBy: UniqueOption.t<'payloadEntry>=?, /** * If portal is defined, then Tooltip will use this element as a target * for rendering using React Portal: https://react.dev/reference/react-dom/createPortal * * If this is undefined then Tooltip renders inside the recharts-wrapper element. */ ~portal: Dom.htmlElement=?, /** * If this field is set, the tooltip will be displayed at the specified position * regardless of the mouse position. * * You can set a single field (x or y) and let the other field be calculated automatically based * on the mouse position. */ ~position: Coordinate.Partial.t=?, /** * @defaultValue {"x":false,"y":false} */ ~reverseDirection: AllowInDimension.t=?, /** * The separator between name and value. * @defaultValue ' : ' */ ~separator: string=?, /** * Defines whether the tooltip is reacting to the current data point, * or to all data points at the current axis coordinate. */ ~shared: bool=?, /** * If `hover` then the Tooltip shows on mouse enter and hides on mouse leave. * * If `click` then the Tooltip shows after clicking and stays active. * * @defaultValue hover */ ~trigger: TooltipTrigger.t=?, /** * @defaultValue false */ ~useTranslate3d: bool=?, /** * CSS styles to be applied to the wrapper `div` element. */ ~wrapperStyle: ReactDOM.Style.t=?, ) => React.element = "Tooltip" } module LegendType = { @unboxed type t = | @as("circle") Circle | @as("cross") Cross | @as("diamond") Diamond | @as("line") Line | @as("plainline") Plainline | @as("rect") Rect | @as("square") Square | @as("star") Star | @as("triangle") Triangle | @as("wye") Wye | @as("none") None } module CartesianLayout = { @unboxed type t = | @as("horizontal") Horizontal | @as("vertical") Vertical } module HorizontalAlignmentType = { @unboxed type t = | @as("left") Left | @as("right") Right | @as("center") Center } module VerticalAlignmentType = { @unboxed type t = | @as("bottom") Bottom | @as("top") Top | @as("middle") Middle } module Dimension = { @unboxed type t = | Int(int) | String(string) } module LegendItemSorter = { @unboxed type t<'legendPayload> = | @as("value") Value | @as("dataKey") DataKey | Function((~item: 'legendPayload) => string) } module Legend = { @module("recharts") @react.component external make: ( /** * The size of icon in each legend item. * @defaultValue 14 */ ~iconSize: float=?, /** * The type of icon in each legend item. */ ~iconType: LegendType.t=?, /** * The layout of legend items inside the legend container. * @defaultValue horizontal */ ~layout: CartesianLayout.t=?, /** * Horizontal alignment of the whole Legend container: * * - `left`: shows the Legend to the left of the chart, and chart width reduces automatically to make space for it. * - `right` shows the Legend to the right of the chart, and chart width reduces automatically. * - `center` shows the Legend in the middle of chart, and chart width remains unchanged. * * The exact behavior changes depending on 'verticalAlign' prop. * * @defaultValue center */ ~align: HorizontalAlignmentType.t=?, /** * The color of the icon when the item is inactive. * @defaultValue #ccc */ ~inactiveColor: string=?, /** * Function to customize how content is serialized before rendering. * * This should return HTML elements, or strings. * * @example (value, entry, index) => {value} * @example https://codesandbox.io/s/legend-formatter-rmzp9 */ ~formatter: (~value: 'value, ~entry: 'entry, ~index: int) => React.element=?, /** * The customized event handler of mouseenter on the items in this group * @example https://recharts.github.io/examples/LegendEffectOpacity */ ~onMouseEnter: ( ~data: 'legendPayload, ~index: int, ~event: mouseEvent, ) => unit=?, /** * The customized event handler of mouseleave on the items in this group * @example https://recharts.github.io/examples/LegendEffectOpacity */ ~onMouseLeave: ( ~data: 'legendPayload, ~index: int, ~event: mouseEvent, ) => unit=?, /** * The customized event handler of click on the items in this group */ ~onClick: (~data: 'legendPayload, ~index: int, ~event: mouseEvent) => unit=?, /** * The style of each text label which is a span element. * @defaultValue {} */ ~labelStyle: ReactDOM.Style.t=?, /** * Renders the content of the legend. * * This should return HTML elements, not SVG elements. * * - If not set, the {@link DefaultLegendContent} component is used. * - If set to a React element, this element will be cloned and extra props will be passed in. * - If set to a function, the function will be called and should return HTML elements. * * @example * @example */ ~content: React.element=?, /** * CSS styles to be applied to the wrapper `div` element. */ ~wrapperStyle: ReactDOM.Style.t=?, /** * Width of the legend. * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`. */ ~width: Dimension.t=?, /** * Height of the legend. * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`. */ ~height: Dimension.t=?, /** * If portal is defined, then Legend will use this element as a target * for rendering using React Portal. * * If this is undefined then Legend renders inside the recharts-wrapper element. * * @see {@link https://react.dev/reference/react-dom/createPortal} */ ~portal: Dom.htmlElement=?, /** * Sorts Legend items. Defaults to `value` which means it will sort alphabetically * by the label. * * If `null` is provided then the payload is not sorted. Be aware that without sort, * the order of items may change between renders! * * @defaultValue value */ ~itemSorter: LegendItemSorter.t<'payloadItem>=?, /** * The alignment of the whole Legend container: * * - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it. * - `top`: shows the Legend above chart, and chart height reduces automatically. * - `middle`: shows the Legend in the middle of chart, covering other content, and chart height remains unchanged. * The exact behavior changes depending on `align` prop. * * @defaultValue bottom */ ~verticalAlign: VerticalAlignmentType.t=?, ) => React.element = "Legend" } module Bar = { @module("recharts") @react.component external make: (~dataKey: string, ~radius: float=?) => React.element = "Bar" } module BarChart = { @module("recharts") @react.component external make: ( ~data: array<'data>, ~accessibilityLayer: bool=?, ~children: React.element, ) => React.element = "BarChart" } module GridLineType = { @unboxed type t = | @as(false) NoLine | Custom(React.element) } module CartesianGrid = { @module("recharts") @react.component external make: (~vertical: GridLineType.t=?, ~horizontal: GridLineType.t=?) => React.element = "CartesianGrid" } module XAxis = { @module("recharts") @react.component external make: ( ~dataKey: string=?, ~tickLine: bool=?, ~axisLine: bool=?, ~tickMargin: int=?, ~tickFormatter: string => string=?, ) => React.element = "XAxis" } } module Style = { @react.component let make = (~id: string, ~config: chartConfig) => { let colorConfig = config ->Dict.toArray ->Array.filter(((_, itemConfig)) => switch itemConfig { | {theme: _} | {color: _} => true | _ => false } ) switch colorConfig { | [] => React.null | _ => let css = [("light", ""), ("dark", ".dark")] ->Array.map(((themeName, prefix)) => { let declarations = colorConfig ->Array.filterMap(((key, itemConfig)) => switch themeColor(~itemConfig, ~themeName) { | Some(color) => Some(` --color-${key}: ${color};`) | None => None } ) ->Array.join("\n") `${prefix} [data-chart=${id}] {\n${declarations}\n}` }) ->Array.join("\n\n")