import { jsx as _jsx } from "react/jsx-runtime";
import D3DonutChart from "./index";
import mockData from "./mockSimpleData";
import { HoverTooltip } from "../hover-tooltip";
import Text from "../text";
export default {
    title: "D3/Donut chart",
    component: D3DonutChart,
};
const Template = (args) => _jsx(D3DonutChart, { ...args });
export const Basic = Template.bind({});
Basic.args = {
    side: 180,
    padding: 20,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
};
export const WithOuterBorder = Template.bind({});
WithOuterBorder.args = {
    side: 180,
    padding: 20,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    outerBorder: 1,
    outerBorderColor: "#000000",
};
export const WithAnnotations = Template.bind({});
WithAnnotations.args = {
    side: 180,
    padding: 20,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    annotation: {
        formatter: (v) => `${v}`,
        color: "#000000",
        fontSize: "12px",
        fontFamily: "Medium",
        lineHeight: "20px",
    },
};
export const WithHtmlAnnotations = Template.bind({});
WithHtmlAnnotations.args = {
    side: 180,
    padding: 20,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    annotation: {
        formatter: (v) => `<b>${v}</b><br />Second text`,
        color: "#000000",
        fontSize: "12px",
        fontFamily: "Medium",
        lineHeight: "20px",
    },
};
export const WithMultipleAnnotations = Template.bind({});
WithMultipleAnnotations.args = {
    side: 316,
    padding: 88,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    annotations: [
        {
            formatter: (v) => `${v}`,
            color: "#000000",
            fontSize: "12px",
            fontFamily: "Medium",
            lineHeight: "20px",
        },
        {
            formatter: (v) => `Hello, ${v}!`,
            color: "#B3BDC7",
            fontSize: "12px",
            fontFamily: "Medium",
            lineHeight: "20px",
        },
    ],
};
export const WithLabelsInAnnotations = Template.bind({});
WithLabelsInAnnotations.args = {
    side: 316,
    padding: 88,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    annotations: [
        {
            formatter: (v, data) => `
          <tspan x="0" y="0" dx="0" dy="1em">${v}</tspan>
          <tspan x="0" y="0" dx="0" dy="2em">${data.label}</tspan>
      `,
            color: "#000000",
            fontSize: "12px",
            fontFamily: "Medium",
            lineHeight: "20px",
        },
    ],
    hasAnnotationHtml: true,
};
export const WithTooltips = Template.bind({});
WithTooltips.args = {
    side: 316,
    padding: 88,
    colorRange: ["#CCDAE9", "#002445", "#1792ff"],
    payload: mockData,
    thickness: 0,
    tooltips: [
        _jsx(HoverTooltip, { top: "50px", left: "50px", children: _jsx(Text.F1, { children: "Example 1" }) }),
        _jsx(HoverTooltip, { top: "100px", left: "90px", children: _jsx(Text.F1, { children: "Example 2" }) }),
        _jsx(HoverTooltip, { top: "50px", left: "20px", children: _jsx(Text.F1, { children: "Example 3" }) })
    ]
};
//# sourceMappingURL=index.stories.js.map