import React from "react";
import { PositiveNegativeProgressBarChart } from "../../components/Charts";

import { generateTestData } from "./testData/positiveNegativeBarChart";

export default {
  title: "Charts/Positive Negative Bar Chart ",
  component: PositiveNegativeProgressBarChart,
  parameters: { controls: { exclude: "direction" } },
  argTypes: { onClick: { action: "onClick" } },
};

const Template = (args) => {
  return <PositiveNegativeProgressBarChart {...args} />;
};

export const Horizontal = Template.bind({});
Horizontal.args = {
  direction: "horizontal",
  data: generateTestData(500),
  title: "Performance",
  showPercentageValue: false,
  chartHeight: "300px",
  chartWidth: "100%",
  barItemHeight: "14px",
  barItemWidth: "100%",
  showPercentageRange: false,
  rowHeight: 14,
  overscanRowCount: 10,
  labelPosition: "left",
};

export const Vertical = Template.bind({});
Vertical.args = {
  direction: "vertical",
  data: generateTestData(10),
  title: "XLC (Communication Services)",
  showPercentageValue: false,
  chartHeight: "fit-content",
  chartWidth: "100%",
  barItemHeight: "300px",
  barItemWidth: "18px",
  showPercentageRange: true,
  minRange: 0,
  maxRange: 0,
};