design-system-simplefi
Version:
Design System for SimpleFi Applications
162 lines • 3.57 kB
JavaScript
import React from 'react';
import { Card } from '../../Card';
import Graph from './Graph';
export default {
title: 'components/Charts/Graph',
component: Graph,
};
var data1 = [
{
timestamp: '1635330559',
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: '1635330559',
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 data2 = [
{
timestamp: '1635330559',
key: 'invValue',
value: '-10',
},
{
timestamp: '2',
key: 'invValue',
value: '20',
},
{
timestamp: '3',
key: 'invValue',
value: '-30',
},
{
timestamp: '4',
key: 'invValue',
value: '50',
},
{
timestamp: '5',
key: 'invValue',
value: '-50',
},
{
timestamp: '6',
key: 'invValue',
value: '50',
},
{
timestamp: '7',
key: 'invValue',
value: '0',
},
{
timestamp: '8',
key: 'invValue',
value: '10',
},
];
var dataSettings = [
{
name: 'LP profit / loss',
key: 'profit-loss',
color: 'midPurple',
},
{
name: 'Linked Farming Rewards',
key: 'rewards',
color: 'neonPink',
},
{
name: 'Investment Value',
key: 'invValue',
color: 'deepBlue',
},
];
export var StackedGraph = function () { return (React.createElement(Card, { alignItems: "center", borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(Graph, { data: [data0, data1, data2], options: dataSettings, tickFormatter: function (tickValue) {
return new Date(tickValue).toLocaleDateString();
}, 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(Graph, { data: [data0, data1, data2], options: dataSettings }))); };
export var NoCardGraph = function () { return (React.createElement("div", { style: { width: '100%', height: '400px' } },
React.createElement(Graph, { data: [data0, data1, data2], options: dataSettings }))); };
//# sourceMappingURL=Graph.stories.js.map