import React from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import {
geyser,
} from '@bufferapp/components/style/color';
import GridItem from './index';
import ChartTooltip from './components/ChartTooltip';
import mockDaily7days from './mock/daily7days';
import mockDaily30days from './mock/daily30days';
import mockDaily90days from './mock/daily90days';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import dayTimezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(dayTimezone);
const dayTimestamp = dayjs.utc(Number(mockDaily7days[0].day)).startOf('day').valueOf();
storiesOf('GridItem')
.addDecorator(checkA11y)
.add('should render a summary grid item with positive diff', () => (
))
.add('should render a standalone item', () => (
))
.add('should render a summary grid item with percent sign', () => (
))
.add('percentage sign show decimals if < 10', () => (
))
.add('should render 2 digits in the grid item', () => (
))
.add('should render 2 digits in the grid item when the percent sign is true', () => (
))
.add('should not render the diff when the metric has a neutral diff', () => (
))
.add('should render a summary grid item with only arrow icon', () => (
))
.add('should not render arrow icon when diff is also visible', () => (
))
.add('should render a summary grid item with negative diff', () => (
))
.add('should render a summary grid item with no diff', () => (
))
.add('should render a grid item with a custom Label', () => {
const CustomLabel = ({ labelCopy }) => (
{labelCopy}
);
CustomLabel.propTypes = {
labelCopy: PropTypes.string.isRequired,
};
return ();
})
.add('should render a grid item with a 7 day chart if 7 days worth of dailyData is provided', () => (
))
.add('should render a grid item with a 30 day chart if 30 days worth of dailyData is provided', () => (
))
.add('should render a grid item with a 90 day chart if 90 days worth of dailyData is provided', () => (
))
.add('should not render the chart if we have only one day of data', () => (
))
.add('Should render the chart tolltip', () => (
))
.add('should render a no data tolltip', () => (
))
.add('should render a grid item with a 7 day chart of type column', () => (
))
.add('should render a grid item with a 7 day chart of type areaspline', () => (
))
.add('should render a grid item with a 7 day chart of type areaspline, controlling minmax', () => (
))
.add('should render a value with currency', () => (
))
.add('should render a summary grid item with percentage bar when paid metric is above 0', () => (
))
.add('should render a summary grid item without the percentage bar when paid metric is 0', () => (
));