paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 49 Packages Projects Releases Wiki Activity

Merge pull request #611 from OrkoHunter/OrkoHunter/#573-more-trendline-stories

Browse Source 
Show a variety of Trendline components in the storybook
This commit is contained in:
Fredrik Adelöw
2020-04-22 07:15:35 +02:00
committed by GitHub
parent 9e1c6c6f8d c5b9feed54
commit 1c99b3bc38
1 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/TrendLine/TrendLine.stories.tsx
+51 -4
View File
@@ -16,28 +16,75 @@
import React from 'react';
import TrendLine from '.';
import SortableTable from 'components/SortableTable';
import InfoCard from 'layout/InfoCard';
export default {
title: 'TrendLine',
component: TrendLine,
};
const width = 140;
const containerStyle = { width: 600 };
const data = [
{
stock: 'A',
day: <TrendLine data={[0.1, 0.5, 0.7, 1]} title="Trend over time" />,
week: <TrendLine data={[1, 0.7, 0.9, 1]} title="Trend over time" />,
month: <TrendLine data={[0.1, 0.3, 0.6, 1]} title="Trend over time" />,
year: <TrendLine data={[0.8, 0.8, 0.8, 1]} title="Trend over time" />,
},
{
stock: 'B',
day: <TrendLine data={[0.8, 0.7, 0.5, 0.1]} title="Trend over time" />,
week: <TrendLine data={[1, 0.9, 0.9, 1]} title="Trend over time" />,
month: <TrendLine data={[1, 0.8, 0.6, 0.4]} title="Trend over time" />,
year: <TrendLine data={[1, 1, 0.9, 0.8]} title="Trend over time" />,
},
{
stock: 'C',
day: <TrendLine data={[0.5, 0.3, 0.9, 1]} title="Trend over time" />,
week: <TrendLine data={[1, 0.7, 0.9, 0.3]} title="Trend over time" />,
month: <TrendLine data={[0.4, 0.6, 0.8, 0.4]} title="Trend over time" />,
year: <TrendLine data={[0.2, 0.5, 0.8, 1]} title="Trend over time" />,
},
{
stock: 'D',
day: <TrendLine data={[0.8, 0.7, 0.5, 0.1]} title="Trend over time" />,
week: <TrendLine data={[0.2, 0.7, 0.9, 1]} title="Trend over time" />,
month: <TrendLine data={[1, 0.8, 0.8, 0.8]} title="Trend over time" />,
year: <TrendLine data={[1, 0.6, 0.9, 0.7]} title="Trend over time" />,
},
];
const columns = [
{ id: 'stock', label: 'Stock' },
{ id: 'day', label: 'Day' },
{ id: 'week', label: 'Week' },
{ id: 'month', label: 'Month' },
{ id: 'year', label: 'Year' },
];
export const Default = () => (
<div style={{ width }}>
<InfoCard style={containerStyle} title="Trends over time">
<SortableTable data={data} columns={columns} />
</InfoCard>
);
export const TrendingMix = () => (
<div style={containerStyle}>
<TrendLine data={[0.1, 0.7, 0.5, 0.8]} title="Trend over time" />
</div>
);
export const TrendingUp = () => (
<div style={{ width }}>
<div style={containerStyle}>
<TrendLine data={[0.1, 0.5, 0.9, 1.0]} title="Trend over time" />
</div>
);
export const TrendingDown = () => (
<div style={{ width }}>
<div style={containerStyle}>
<TrendLine data={[0.8, 0.7, 0.5, 0.1]} title="Trend over time" />
</div>
);