@wavv/ui 2.2.2-alpha.5 → 2.2.2-alpha.6

package/build/assets/icons/TransferCancel.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const TransferCancel = (props)=>/*#__PURE__*/ jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M16 3L20 7L16 11",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 7L11 7",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M7 7H4",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M20 21L4 3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M8 21L4 17L8 13",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M4 17H16",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M19.5 17H20",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+const icons_TransferCancel = TransferCancel;
+export { icons_TransferCancel as default };

package/build/components/Accordion/Accordion.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { DisclosureGroup } from "react-aria-components";
+import { marginProps, maxWidthHeightProps, widthHeightProps } from "../helpers/styledProps.js";
+import Header from "./Header.js";
+import Item from "./Item.js";
+import Panel from "./Panel.js";
+const Accordion = ({ children, maxHeight, ...props })=>/*#__PURE__*/ jsx(Container, {
+        style: {
+            maxHeight
+        },
+        ...props,
+        children: children
+    });
+const Container = styled(DisclosureGroup)({
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8
+}, widthHeightProps, maxWidthHeightProps, marginProps);
+Accordion.Item = Item;
+Accordion.Header = Header;
+Accordion.Panel = Panel;
+const Accordion_Accordion = Accordion;
+export { Accordion_Accordion as default };

package/build/components/Accordion/Header.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef } from "react";
+import { Heading } from "react-aria-components";
+import Ellipsis from "../Ellipsis.js";
+import getIcon from "../helpers/getIcon.js";
+import isPropAllowed from "../helpers/isPropAllowed.js";
+import { paddingProps } from "../helpers/styledProps.js";
+import Icon from "../Icon/index.js";
+import AriaButton from "../Inputs/helpers/AriaButton.js";
+const Header_Header = ({ children, triggerIconPosition = 'right', background, title, iconLeft, iconRight, ...props })=>{
+    const triggerRef = useRef(null);
+    return /*#__PURE__*/ jsxs(HeaderContainer, {
+        onClick: ()=>triggerRef.current?.click(),
+        background: background,
+        ...props,
+        children: [
+            'left' === triggerIconPosition && /*#__PURE__*/ jsx(Icon, {
+                name: "chevron-left",
+                className: "trigger-icon left"
+            }),
+            iconLeft && getIcon(iconLeft),
+            /*#__PURE__*/ jsx(Title, {
+                children: /*#__PURE__*/ jsx(AriaButton, {
+                    slot: "trigger",
+                    ref: triggerRef,
+                    width: "100%",
+                    children: /*#__PURE__*/ jsx(Ellipsis, {
+                        children: title
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Content, {
+                children: children
+            }),
+            iconRight && getIcon(iconRight),
+            'right' === triggerIconPosition && /*#__PURE__*/ jsx(Icon, {
+                name: "chevron-right",
+                className: "trigger-icon right"
+            })
+        ]
+    });
+};
+const HeaderContainer = styled.div(({ theme, background, height })=>({
+        margin: 0,
+        display: 'flex',
+        gap: 8,
+        padding: 8,
+        height,
+        backgroundColor: background || theme.scale0,
+        alignItems: 'center',
+        fontSize: '1rem',
+        fontWeight: 'normal',
+        color: 'inherit',
+        borderRadius: 4,
+        cursor: 'pointer',
+        '& > .trigger-icon': {
+            transition: 'transform 300ms'
+        }
+    }), paddingProps);
+const Title = styled(Heading, {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'reverse',
+            'spaced'
+        ])
+})(({ theme, reverse })=>({
+        backgroundColor: 'transparent',
+        color: theme.scale10,
+        border: 'none',
+        display: 'flex',
+        flexDirection: reverse ? 'row-reverse' : 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: theme.font.size.md,
+        margin: 0,
+        textAlign: 'left',
+        overflow: 'hidden'
+    }));
+const Content = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1
+});
+Header_Header.displayName = 'Accordion.Header';
+const Header = Header_Header;
+export { Header as default };

package/build/components/Accordion/Item.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Disclosure } from "react-aria-components";
+const Item = ({ children, ...props })=>/*#__PURE__*/ jsx(ItemContainer, {
+        ...props,
+        children: children
+    });
+const ItemContainer = styled(Disclosure)(({ theme })=>({
+        '&[data-expanded="true"]': {
+            '& > div:first-of-type': {
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                backgroundColor: theme.scale1,
+                '& > .trigger-icon.left': {
+                    transform: 'rotate(-90deg)'
+                },
+                '& > .trigger-icon.right': {
+                    transform: 'rotate(90deg)'
+                }
+            }
+        }
+    }));
+Item.displayName = 'Accordion.Item';
+const Accordion_Item = Item;
+export { Accordion_Item as default };

package/build/components/Accordion/Panel.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useState } from "react";
+import { DisclosurePanel } from "react-aria-components";
+import { useElementObserver } from "../../hooks/index.js";
+import isPropAllowed from "../helpers/isPropAllowed.js";
+const Panel = ({ children, maxHeight, ...props })=>{
+    const contentRef = useRef(null);
+    const [calculatedMaxHeight, setCalculatedMaxHeight] = useState();
+    const setHeight = (node)=>{
+        const open = 'false' === node.getAttribute('aria-hidden');
+        if (!open) return;
+        const item = node.parentElement;
+        const accordion = item?.parentElement;
+        const accMaxHeight = accordion?.style.maxHeight;
+        const containerMaxHeight = accMaxHeight ? accMaxHeight.match(/^[0-9]+/g)?.pop() : void 0;
+        if (!containerMaxHeight || !accordion) return void node.scrollTo(0, 0);
+        const allItems = [
+            ...accordion.childNodes
+        ];
+        const index = allItems.indexOf(item) + 1;
+        const siblings = allItems.slice(index);
+        const siblingHeights = siblings.length > 0 ? siblings.reduce((acc, child)=>acc + child.clientHeight, 0) : 0;
+        const { offsetTop } = node;
+        const spacedMargin = (allItems.length - 1) * 8;
+        const containerHeight = containerMaxHeight || 0;
+        const height = containerHeight - offsetTop - siblingHeights - spacedMargin;
+        if (height !== calculatedMaxHeight) setCalculatedMaxHeight(height);
+        node.scrollTo(0, 0);
+    };
+    useElementObserver(contentRef, setHeight);
+    return /*#__PURE__*/ jsx(PanelContainer, {
+        ref: contentRef,
+        maxHeight: maxHeight || calculatedMaxHeight,
+        defaultPadding: 'string' == typeof children,
+        ...props,
+        children: children
+    });
+};
+const PanelContainer = styled(DisclosurePanel, {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'defaultPadding',
+            'maxHeight'
+        ])
+})(({ theme, maxHeight, defaultPadding, background })=>({
+        backgroundColor: background || theme.scale0,
+        color: theme.scale10,
+        fontSize: theme.font.size.md,
+        overflow: 'auto',
+        maxHeight,
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4,
+        height: 'var(--disclosure-panel-height)',
+        transition: 'height 250ms',
+        '&[aria-hidden="true"]': {
+            opacity: 0
+        },
+        '&[aria-hidden="false"]': {
+            padding: defaultPadding ? '4px 16px' : void 0
+        }
+    }));
+Panel.displayName = 'Accordion.Panel';
+const Accordion_Panel = Panel;
+export { Accordion_Panel as default };

package/build/components/Accordion/index.js

@@ -0,0 +1,2 @@
+import Accordion from "./Accordion.js";
+export { Accordion as default };

package/build/components/Audio.js

@@ -0,0 +1,248 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import Button from "./Button/index.js";
+import { marginProps } from "./helpers/styledProps.js";
+import Slider from "./Slider.js";
+import Waveform from "./Waveform.js";
+const Audio_Audio = ({ src, title, width, infoPosition, centerAlignContent, small, tiny, iconOnly, buttonProps, collapsed, hideSliderOnStop, hideTimeOnStop, hideCurrentTime, fontSizeTitle, fontSizeTime, fallbackDuration, waveform, onPlay, onPause, onStop, ref, ...rest })=>{
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isCleared, setIsCleared] = useState(true);
+    const [progress, setProgress] = useState(0);
+    const [totalDuration, setTotalDuration] = useState(0);
+    const [displayCurrent, setDisplayCurrent] = useState('');
+    const [displayDuration, setDisplayDuration] = useState('0:00');
+    const audioRef = useRef(null);
+    const { height = 30, showHoverTime = false, playedColor, unplayedColor } = 'object' == typeof waveform ? waveform : {};
+    const play = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) audio.play().catch(()=>{
+            throw Error('Video failed to play');
+        });
+    };
+    const pause = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) audio.pause();
+    };
+    const stop = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) audio.load();
+    };
+    const checkIsPlaying = ()=>{
+        const { current: audio } = audioRef;
+        return audio ? !audio.paused : false;
+    };
+    const togglePlayPause = ()=>{
+        if (isPlaying) pause();
+        else play();
+    };
+    useImperativeHandle(ref, ()=>({
+            play,
+            pause,
+            stop
+        }), [
+        audioRef,
+        isPlaying
+    ]);
+    const handleAudioPlay = (event)=>{
+        setIsPlaying(true);
+        setIsCleared(false);
+        if (onPlay) onPlay(event);
+    };
+    const handleAudioPause = (event)=>{
+        setIsPlaying(false);
+        if (onPause) onPause(event);
+    };
+    const handleAudioStop = (event)=>{
+        setIsPlaying(false);
+        setIsCleared(true);
+        if (onStop) onStop(event);
+    };
+    const handleAudioError = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) setTimeout(()=>{
+            audio.load();
+        }, 500);
+    };
+    useEffect(()=>{
+        checkIsPlaying();
+    }, [
+        isPlaying
+    ]);
+    useEffect(()=>{
+        const { current: audio } = audioRef;
+        if (audio && src) {
+            audio.load();
+            const checkDuration = setTimeout(()=>{
+                if (audio.duration && Number.isFinite(audio.duration) && audio.duration > 0 && audio.duration !== 1 / 0) {
+                    setTotalDuration(audio.duration);
+                    setDisplayDuration(formatTime(audio.duration));
+                } else if (fallbackDuration && Number.isFinite(fallbackDuration) && fallbackDuration > 0) {
+                    setTotalDuration(fallbackDuration);
+                    setDisplayDuration(formatTime(fallbackDuration));
+                }
+            }, 500);
+            return ()=>clearTimeout(checkDuration);
+        }
+    }, [
+        src,
+        fallbackDuration
+    ]);
+    const formatTime = (time)=>{
+        if (!Number.isFinite(time) || time < 0) return '0:00';
+        const mins = Math.floor(time / 60);
+        const secs = Math.floor(time % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    };
+    const updateProgress = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) {
+            const { currentTime } = audio;
+            if (Number.isFinite(currentTime) && currentTime >= 0) {
+                const current = formatTime(currentTime);
+                setProgress(currentTime);
+                setDisplayCurrent(current);
+            }
+        }
+    };
+    const handleLoad = ()=>{
+        const { current: audio } = audioRef;
+        if (audio) {
+            const { duration, readyState } = audio;
+            if (Number.isFinite(duration) && duration > 0 && duration !== 1 / 0) {
+                const audioLength = formatTime(duration);
+                setTotalDuration(duration);
+                setDisplayDuration(audioLength);
+            } else if (fallbackDuration && Number.isFinite(fallbackDuration) && fallbackDuration > 0) {
+                const audioLength = formatTime(fallbackDuration);
+                setTotalDuration(fallbackDuration);
+                setDisplayDuration(audioLength);
+            } else if (readyState >= 1) setTimeout(()=>{
+                if (audio.duration && Number.isFinite(audio.duration) && audio.duration > 0 && audio.duration !== 1 / 0) {
+                    setTotalDuration(audio.duration);
+                    setDisplayDuration(formatTime(audio.duration));
+                } else if (fallbackDuration && Number.isFinite(fallbackDuration) && fallbackDuration > 0) {
+                    setTotalDuration(fallbackDuration);
+                    setDisplayDuration(formatTime(fallbackDuration));
+                }
+            }, 100);
+        }
+    };
+    const handleControlGrab = (value)=>{
+        const sliderPosition = Array.isArray(value) ? value[0] : value;
+        if (audioRef?.current && Number.isFinite(sliderPosition) && Number.isFinite(totalDuration) && totalDuration > 0) audioRef.current.currentTime = Math.max(0, Math.min(sliderPosition, totalDuration));
+    };
+    const hideSlider = isCleared && hideSliderOnStop;
+    const hideTime = isCleared && hideTimeOnStop;
+    const icon = iconOnly ? isPlaying ? 'pause-circle' : 'play-circle' : isPlaying ? 'pause' : 'play';
+    const timeData = /*#__PURE__*/ jsxs(Data, {
+        secondary: true,
+        fontSize: fontSizeTime,
+        marginLeft: 'center' === infoPosition && waveform ? -4 : void 0,
+        children: [
+            hideCurrentTime || !displayCurrent || isCleared ? '' : `${displayCurrent} / `,
+            displayDuration
+        ]
+    });
+    return /*#__PURE__*/ jsxs(AudioContainer, {
+        width: collapsed ? void 0 : width || 250,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                link: iconOnly,
+                secondary: true,
+                ...buttonProps,
+                small: small,
+                tiny: tiny,
+                icon: icon,
+                onClick: togglePlayPause
+            }),
+            !collapsed && /*#__PURE__*/ jsxs(ProgressContainer, {
+                alignData: infoPosition,
+                children: [
+                    !hideSlider && (waveform ? /*#__PURE__*/ jsx(Waveform, {
+                        src: src,
+                        value: progress,
+                        maxValue: totalDuration,
+                        onChange: handleControlGrab,
+                        showHoverTime: showHoverTime,
+                        playedColor: playedColor,
+                        unplayedColor: unplayedColor,
+                        height: height
+                    }) : /*#__PURE__*/ jsx(Slider, {
+                        value: progress,
+                        max: totalDuration,
+                        step: 0.1,
+                        onChange: handleControlGrab
+                    })),
+                    'center' !== infoPosition && /*#__PURE__*/ jsxs(DataContainer, {
+                        alignTop: 'top' === infoPosition,
+                        noSlider: hideSlider,
+                        relative: centerAlignContent || hideSlider,
+                        waveformHeight: waveform ? height : void 0,
+                        children: [
+                            title ? /*#__PURE__*/ jsx(Data, {
+                                fontSize: fontSizeTitle,
+                                children: title
+                            }) : /*#__PURE__*/ jsx("div", {}),
+                            !hideTime && timeData
+                        ]
+                    })
+                ]
+            }),
+            'center' === infoPosition && timeData,
+            /*#__PURE__*/ jsx("audio", {
+                ref: audioRef,
+                src: src,
+                onPlay: handleAudioPlay,
+                onPause: handleAudioPause,
+                onEmptied: handleAudioStop,
+                onEnded: handleAudioStop,
+                onTimeUpdate: updateProgress,
+                onDurationChange: handleLoad,
+                onLoadedMetadata: handleLoad,
+                onLoadedData: handleLoad,
+                onCanPlay: handleLoad,
+                onError: handleAudioError,
+                preload: "auto",
+                children: /*#__PURE__*/ jsx("track", {
+                    kind: "captions"
+                })
+            })
+        ]
+    });
+};
+const AudioContainer = styled.div(({ width })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width
+    }), marginProps);
+const ProgressContainer = styled.div(({ alignData })=>({
+        display: 'flex',
+        flexDirection: 'top' === alignData ? 'column-reverse' : 'column',
+        position: 'relative',
+        flex: 1,
+        minWidth: 0
+    }));
+const DataContainer = styled.div(({ alignTop, noSlider, relative, waveformHeight })=>{
+    const top = waveformHeight ?? 6;
+    return {
+        position: relative ? 'relative' : 'absolute',
+        top: alignTop || noSlider ? void 0 : top,
+        bottom: alignTop && !noSlider ? top : void 0,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+        width: '100%'
+    };
+});
+const Data = styled.div(({ theme, secondary, fontSize })=>({
+        display: 'flex',
+        alignItems: 'center',
+        whiteSpace: 'nowrap',
+        color: secondary ? theme.scale6 : theme.scale10,
+        fontSize: fontSize || 10
+    }), marginProps);
+const Audio = Audio_Audio;
+export { Audio as default };

package/build/components/BarChart.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import millify from "millify";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
+const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, ...rest })=>{
+    const { scale2 } = useTheme();
+    const xAxisTick = diagonalXLabels ? (args)=>DiagonalAxisTick({
+            ...args,
+            maxXLabelLength,
+            axisColor
+        }) : {};
+    return /*#__PURE__*/ jsxs(ChartContainer, {
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(ChartStyles, {}),
+            /*#__PURE__*/ jsx(ResponsiveContainer, {
+                width: "100%",
+                height: "100%",
+                children: /*#__PURE__*/ jsxs(BarChart, {
+                    margin: {
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0
+                    },
+                    data: data,
+                    layout: vertical ? 'vertical' : 'horizontal',
+                    barSize: barSize,
+                    maxBarSize: maxBarSize,
+                    barGap: barGap,
+                    barCategoryGap: barCategoryGap,
+                    children: [
+                        /*#__PURE__*/ jsx(CartesianGrid, {
+                            stroke: axisColor || scale2,
+                            strokeDasharray: "3 5",
+                            vertical: vertical,
+                            horizontal: !vertical
+                        }),
+                        /*#__PURE__*/ jsx(XAxis, {
+                            stroke: axisColor || scale2,
+                            tickMargin: 4,
+                            tickFormatter: (value)=>vertical ? millify(value) : value,
+                            tick: hideXLabels ? false : xAxisTick,
+                            height: hideXLabels ? 12 : xAxisHeight,
+                            interval: diagonalXLabels ? 0 : void 0,
+                            dataKey: vertical ? void 0 : 'name',
+                            type: vertical ? 'number' : 'category'
+                        }),
+                        /*#__PURE__*/ jsx(YAxis, {
+                            stroke: axisColor || scale2,
+                            tickMargin: 4,
+                            tickFormatter: (value)=>vertical ? value : millify(value),
+                            tick: hideYLabels ? false : {},
+                            width: hideYLabels ? 5 : yAxisWidth,
+                            dataKey: vertical ? 'name' : void 0,
+                            type: vertical ? 'category' : 'number'
+                        }),
+                        Tooltip({
+                            legendPostfix: tooltipLegendPostfix
+                        }),
+                        legend && /*#__PURE__*/ jsx(Legend, {
+                            content: /*#__PURE__*/ jsx(LegendContent, {})
+                        }),
+                        keys.map(({ key, color }, i)=>{
+                            const rVal = 2;
+                            let radius = vertical ? [
+                                0,
+                                rVal,
+                                rVal,
+                                0
+                            ] : [
+                                rVal,
+                                rVal,
+                                0,
+                                0
+                            ];
+                            if (stacked && i !== keys.length - 1) radius = [
+                                0,
+                                0,
+                                0,
+                                0
+                            ];
+                            return /*#__PURE__*/ jsx(Bar, {
+                                dataKey: key,
+                                fill: color,
+                                stackId: stacked ? 'stack' : void 0,
+                                radius: radius
+                            }, `bar-${i + 1}`);
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const DiagonalAxisTick = ({ x, y, payload, maxXLabelLength, axisColor })=>{
+    const text = payload.value;
+    const displayText = text.length > maxXLabelLength ? `${text.slice(0, maxXLabelLength)}...` : text;
+    return /*#__PURE__*/ jsx("g", {
+        transform: `translate(${x},${y})`,
+        children: /*#__PURE__*/ jsxs(DiagonalText, {
+            x: 0,
+            y: 0,
+            dy: 8,
+            textAnchor: "end",
+            transform: "rotate(-45)",
+            color: axisColor,
+            children: [
+                /*#__PURE__*/ jsx("title", {
+                    children: text
+                }),
+                displayText
+            ]
+        })
+    });
+};
+const DiagonalText = styled.text(({ theme, color })=>({
+        fill: color || theme.scale2
+    }));
+const components_BarChart = BarChart_BarChart;
+export { DiagonalAxisTick, components_BarChart as default };