import { jsx as _jsx } from "react/jsx-runtime";
import D3LineChart from "./index";
import mockData from "./mockEosdtData";
import { series1, series2, series3, series4, seriesWithSecondValue, } from "./mockSimpleData";
export default {
    title: "D3/Line chart",
    component: D3LineChart,
};
const Template = (args) => _jsx(D3LineChart, { ...args });
export const Basic = Template.bind({});
Basic.args = {
    title: "Basic",
    height: 600,
    width: 800,
    // @ts-ignore
    paddingX: 20,
    paddingY: 20,
    payload: [mockData],
    highlightedPoint: {
        point: [1573520400000, 4392228.034718457],
        label: _jsx("div", { children: "label" }),
    },
    mapFn: (el) => [el[0], el[1]],
};
export const TwoCharts = Template.bind({});
TwoCharts.args = {
    title: "Two charts",
    height: 600,
    width: 800,
    // @ts-ignore
    paddingX: 20,
    paddingY: 20,
    payload: [series1, series2],
    mapFn: (el) => [el[0], el[1]],
};
export const MultipleCharts = Template.bind({});
MultipleCharts.args = {
    title: "Multiple charts",
    height: 600,
    width: 800,
    // @ts-ignore
    paddingX: 20,
    paddingY: 20,
    payload: [series1, series2, series3, series4],
    mapFn: (el) => [el[0], el[1]],
};
export const WithMultiplyYValues = Template.bind({});
WithMultiplyYValues.args = {
    title: "WithMultiplyYValues",
    height: 600,
    width: 800,
    // @ts-ignore
    paddingX: 20,
    paddingY: 20,
    payload: [seriesWithSecondValue],
    mapFn: (el) => [el[0], el[1]],
    additionalMapFn: (el) => [el[2]],
    tooltipFormatter: (t) => `
      <p style="font-size: 20px; font-family: Heavy;">
        Price: ${t.point[1]}
      </p>
      <p style="font-size: 16px; font-family: Medium;">
        In USD: ${t.additionalData[0]}
      </p>
  `,
};
//# sourceMappingURL=index.stories.js.map