@stokr/components-library
Version:
STOKR - Components Library
90 lines (89 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ChartLegendFull = void 0;
var _react = _interopRequireDefault(require("react"));
var _ChartLegend = require("./ChartLegend");
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
var _BasicTable = _interopRequireDefault(require("../BasicTable/BasicTable"));
var _global = _interopRequireDefault(require("../../styles/global"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components Library/Chart Legend',
component: _ChartLegend.ChartLegend,
argTypes: {
data: {
type: 'array',
defaultValue: [{
value: 0
}, {
name: ''
}, {
color: ''
}, {
subname: ''
}, {
info: ''
}],
required: true
},
value: {
type: 'number',
required: true
},
name: {
type: 'string'
},
color: {
type: 'string',
defaultValue: ''
},
subname: {
type: 'string',
defaultValue: ''
},
info: {
type: 'string',
defaultValue: ''
}
}
};
const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.ChartLegend, args)));
const Table = (balance, symbol, price, address, link, label) => /*#__PURE__*/_react.default.createElement(_BasicTable.default, {
data: [{
label: 'Token balance',
value: balance.toString()
}, {
label: 'Token price',
value: "".concat(symbol, " ").concat(price.toFixed(2))
}, {
label: 'Token value',
value: "".concat(symbol, " ").concat((balance * price).toFixed(2))
}, {
label: label,
value: address,
isLink: true,
link
}]
});
const ChartLegendFull = exports.ChartLegendFull = Template.bind({});
ChartLegendFull.args = {
data: [{
value: 1560,
name: 'Name',
color: 'red',
subname: 'Sub Name',
info: 'information',
onNameClick: (e, data) => {
e.preventDefault();
e.stopPropagation();
alert('name is clicked');
},
price: 10000,
isPositive: false,
marketValue: '20 %',
marketInfo: '(30d change)',
details: Table(1560, 'USD', 10000, 'some link', 'some label')
}]
};