design-system-simplefi
Version:
Design System for SimpleFi Applications
113 lines • 2.73 kB
JavaScript
import React from 'react';
import { Card } from '../../Card';
import BarChartComponent from './BarChart';
export default {
title: 'components/Charts/BarChart',
component: BarChartComponent,
};
var data1 = [
{
timestamp: '1',
key: 'profit-loss',
value: '-15',
},
{
timestamp: '2',
key: 'profit-loss',
value: '10',
},
{
timestamp: '3',
key: 'profit-loss',
value: '-20',
},
{
timestamp: '4',
key: 'profit-loss',
value: '30',
},
{
timestamp: '5',
key: 'profit-loss',
value: '-25',
},
{
timestamp: '6',
key: 'profit-loss',
value: '14',
},
{
timestamp: '7',
key: 'profit-loss',
value: '2',
},
{
timestamp: '8',
key: 'profit-loss',
value: '0',
},
];
var data0 = [
{
timestamp: '1',
key: 'rewards',
value: '4',
},
{
timestamp: '2',
key: 'rewards',
value: '-2',
},
{
timestamp: '3',
key: 'rewards',
value: '30',
},
{
timestamp: '4',
key: 'rewards',
value: '70',
},
{
timestamp: '5',
key: 'rewards',
value: '12',
},
{
timestamp: '6',
key: 'rewards',
value: '5',
},
{
timestamp: '7',
key: 'rewards',
value: '10',
},
{
timestamp: '8',
key: 'rewards',
value: '10',
},
];
var dataSettings = [
{
name: 'Gas Fees',
key: 'profit-loss',
color: 'lightPurple',
},
{
name: 'Rewards',
key: 'rewards',
color: 'deepBlue',
},
];
export var StackedGraph = function () { return (React.createElement(Card, { alignItems: "center", borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(BarChartComponent, { data: [data0, data1], options: dataSettings, whiteSpaceModifier: 0.05, isStacked: true }))); };
export var StandardGraph = function () { return (React.createElement(Card, { alignItems: "center", borderRadius: "md", height: "400px", justifyContent: "center", style: {
flex: 1,
overflow: 'hidden',
}, width: "100%" },
React.createElement(BarChartComponent, { data: [data0, data1], options: dataSettings, whiteSpaceModifier: 0.02 }))); };
export var NoCardGraph = function () { return (React.createElement("div", { style: { width: '100%', height: '400px' } },
React.createElement(BarChartComponent, { data: [data0, data1], options: dataSettings }))); };
//# sourceMappingURL=BarChart.stories.js.map