design-system-simplefi
Version:
Design System for SimpleFi Applications
334 lines • 7.51 kB
JavaScript
import React from 'react';
import { Card } from '../Card';
import { Chart, Graph } from './Chart';
export default {
title: 'components/Charts/Charts',
component: Chart,
};
var data1 = [
{
timestamp: "" + Date.now(),
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: '50',
},
{
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: '1',
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: 'neonCoral',
opacity: 0.8,
},
{
name: 'Linked Farming Rewards',
key: 'rewards',
color: 'neonGreen',
opacity: 0.8,
},
{
name: 'Investment Value',
key: 'invValue',
color: 'deepBlue',
opacity: 0.8,
},
];
var ethTokenData = [
{
timestamp: '1',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '2',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '3',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '4',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '5',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '6',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '7',
eth: '8',
other: '6',
snx: '34',
uni: '15',
},
{
timestamp: '8',
eth: '8',
other: '32',
snx: '34',
uni: '15',
},
];
var doubleLegendDataSettings = [
{
name: 'UNI',
key: 'uni',
color: 'deepBlue',
opacity: 0.8,
},
{
name: 'SNX',
key: 'snx',
color: 'neonGreen',
opacity: 0.8,
},
{
name: 'ETH',
key: 'eth',
color: 'neonCoral',
opacity: 0.8,
},
{
name: 'Other',
key: 'other',
color: 'midPurple',
opacity: 0.8,
},
];
var pieChartData = [
{
key: 'snx',
name: 'SNX',
value: 45,
color: 'deepBlue',
opacity: 1,
},
{
key: 'uni',
name: 'UNI',
value: 85,
color: 'neonGreen',
opacity: 1,
},
{
key: 'apple',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple2',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple3',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple4',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple5',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple54',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple55',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple53',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple5655',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
{
key: 'apple5re',
name: 'APPLE',
value: 150,
color: 'lightPurple',
opacity: 1,
},
];
export var AreaGraphChart = function () { return (React.createElement(Card, { borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(Graph, { currency: "usd", data: [data0, data1, data2], isStacked: false, options: dataSettings, tooltipLabelFormatter: function () { return 'test'; }, type: "areaGraph", shouldGraphAnimate: true, withTooltip: true }))); };
export var AreaGraphChartDoubleLegend = function () { return (React.createElement(Card, { borderRadius: "md", height: "min-content", justifyContent: "center", width: "100%" },
React.createElement(Graph, { currency: "usd", data: ethTokenData, height: "400px", legendLabel: "Total value of holdings", legendType: "double", options: doubleLegendDataSettings, tooltipLabelFormatter: function () { return 'test'; }, type: "areaGraph", collapsible: true, isStacked: true, shouldGraphAnimate: true, withTooltip: true }))); };
export var BarChart = function () { return (React.createElement(Card, { borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(Graph, { barWhiteSpaceModifier: 0.002, currency: "usd", data: [data0, data1], options: dataSettings, type: "barChart", isStacked: true, shouldGraphAnimate: true }))); };
export var BarChartNoLegend = function () { return (React.createElement(Card, { borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(Graph, { currency: "usd", data: [data0, data1], hasLegend: false, options: dataSettings, type: "barChart", isStacked: true }))); };
export var PieChart = function () { return (React.createElement(Card, { borderRadius: "md", height: "400px", justifyContent: "center", width: "100%" },
React.createElement(Chart, { currency: "usd", data: pieChartData, source: "SNX", type: "pieChart", hasLegend: true }))); };
//# sourceMappingURL=Chart.stories.js.map