import { jsx as _jsx } from "react/jsx-runtime";
import { ThemeProvider } from "styled-components";
import equilibriumTheme from "../theme/equilibrium.theme";
import D3LineChart from "./d3-linechart";
import { mint, burn } from "./d3-linechart.mock";
export default {
    title: "New/D3 Line chart",
    component: D3LineChart,
};
const Template = (args) => (_jsx(ThemeProvider, { theme: equilibriumTheme, children: _jsx(D3LineChart, { ...args }) }));
export const Basic = Template.bind({});
Basic.args = {
    width: 600,
    height: 600,
    showAxis: { horizontal: true, vertical: false },
    pointToHuman: ([x, y]) => [new Date(x).toLocaleString("en-US"), y.toString()],
    charts: [
        {
            id: "mint",
            title: "Mint",
            type: "line",
            serie: mint,
            color: "#5EC46D",
        },
    ],
};
export const WithGradient = Template.bind({});
WithGradient.args = {
    width: 600,
    height: 600,
    charts: [
        {
            id: "mint",
            title: "Mint",
            type: "line",
            serie: mint,
            color: "#5EC46D",
            showGradient: true,
        },
    ],
};
export const Animated = Template.bind({});
Animated.args = {
    width: 600,
    height: 600,
    charts: [
        {
            id: "mint",
            title: "Mint",
            type: "line",
            serie: mint,
            color: "#5EC46D",
            showGradient: true,
            animationSettings: {
                lineDurationMs: 1000,
                gradientDurationMs: 1000,
                gradientDelayMs: 1500,
            },
        },
    ],
};
export const WithFocuses = Template.bind({});
WithFocuses.args = {
    width: 600,
    height: 600,
    showAxis: { horizontal: true, vertical: false },
    pointToHuman: ([x, y]) => [new Date(x).toLocaleString("en-US"), y.toString()],
    charts: [
        {
            id: "mint",
            title: "Mint",
            type: "line",
            serie: mint,
            color: "#5EC46D",
            showFocus: true,
        },
        {
            id: "burn",
            title: "Burn",
            type: "line",
            serie: burn,
            color: "#1792ff",
            showFocus: true,
        },
    ],
};
//# sourceMappingURL=d3-linechart.stories.js.map