@wix/design-system
Version:
@wix/design-system
105 lines (104 loc) • 8.36 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storySettings = require("../test/storySettings");
var _ = _interopRequireDefault(require(".."));
var items = [{
value: 25000000,
label: '$25,000,000',
labelShort: '$25M',
description: 'Sales',
descriptionInfo: 'Revenue from sales is $25M'
}, {
value: 20000000,
label: '$20,000,000',
labelShort: '$20M',
description: 'Subscription',
descriptionInfo: 'Revenue from subscriptions is $20M'
}, {
value: 42000000,
label: '$42,000,000',
labelShort: '$42M',
description: 'Ads',
descriptionInfo: 'Revenue from ads is $42M'
}, {
value: 63000000,
label: '$63,000,000',
labelShort: '$63M',
description: 'Other',
descriptionInfo: 'Other revenue is $63M'
}];
var _default = exports["default"] = {
category: _storySettings.storySettings.category,
storyName: 'BarChart',
component: _["default"],
componentPath: '..',
componentProps: {
items: items
},
exampleProps: {
items: [{
label: '4 Items',
value: items
}, {
label: '1 Item',
value: items.slice(0, 1)
}],
total: [{
label: '150M',
value: 150000000
}, {
label: '200M',
value: 200000000
}],
onDescriptionInfoShown: function onDescriptionInfoShown() {
return 'I was called!';
}
},
sections: [(0, _Sections.header)(), (0, _Sections.tabs)([(0, _Sections.tab)({
title: 'Description',
sections: [(0, _Sections.columns)([(0, _Sections.description)({
title: 'Description',
text: 'BarChart is a statistics component. It shows the relative value of the compared data. Use it to help users analyse source of income, visits and similar.'
})]), (0, _Sections.importExample)("import { BarChart } from '@wix/design-system';"), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
title: 'Simple usage',
text: 'The only required prop is items with values. Items will be sorted by values from highest to lowest.',
source: "\n <BarChart\n items={[\n {\n value: 220,\n },\n {\n value: 270,\n },\n {\n value: 720,\n },\n {\n value: 250,\n },\n {\n value: 450,\n },\n ]}\n />"
}), (0, _Sections.example)({
title: 'Description and additional information',
text: 'Use description and descriptionInfo to explain data. Descriptions appear under each bar and descriptionInfo appear on hover.',
source: "\n <BarChart\n items={[\n {\n value: 2400,\n description: 'Facebook',\n descriptionInfo: '2400 users came from a Facebook',\n },\n {\n value: 1150,\n description: 'Instagram',\n descriptionInfo: '1150 users came from a Instagram',\n },\n {\n value: 980,\n description: 'Direct Link',\n descriptionInfo: '980 users came by direct link',\n },\n ]}\n />"
}), (0, _Sections.example)({
title: 'Displayed value',
text: 'It is possible to format data shown to the user.',
source: "\n <BarChart\n items={[\n {\n value: 25000,\n label: '$25,000',\n description: 'Sales',\n },\n {\n value: 48000,\n label: '$48,000',\n description: 'Subscription',\n },\n {\n value: 42000,\n label: '$42,000',\n description: 'Ads',\n },\n ]}\n />"
}), (0, _Sections.example)({
title: 'Total value',
text: 'Chart calculates its total value. By default it’s a sum of all items. It can be changed manually to a higher value, then the chart will adjust to a corresponding space. When total is not specified widget will take all the place',
source: "\n <BarChart\n total={1200}\n items={[\n {\n value: 250,\n description: 'Desktop',\n descriptionInfo: '250 of 1200 users visiting site from a desktop',\n },\n {\n value: 480,\n description: 'Mobile',\n descriptionInfo: '250 of 1200 users visiting site from mobile',\n },\n ]}\n />"
}), (0, _Sections.example)({
title: 'Usage with one item.',
source: "\n <BarChart\n total={1200}\n items={[\n {\n value: 570,\n description: 'Unique visitors',\n descriptionInfo: '570 of 1200 visitors are uniq for current page',\n }\n ]}\n />"
}), (0, _Sections.example)({
title: 'Shortened value',
text: 'When there is not enough space to display a full value, use shortened labels.',
source: "\n <BarChart\n items={[\n {\n value: 25000000,\n label: '$25,000,000',\n description: 'Sales',\n },\n {\n value: 20000000,\n label: '$20,000,000',\n labelShort: '$20M',\n description: 'Subscriptions',\n },\n {\n value: 42000000,\n label: '$42,000,000',\n labelShort: '$42M',\n description: 'Ads',\n },\n {\n value: 72000000,\n label: '$72,000,000',\n labelShort: '$72M',\n description: 'Other',\n },\n ]}\n />"
}), (0, _Sections.example)({
title: 'Hiding values or showing ellipsis',
text: 'By default values that don\'t fit show ellipsis. If "descriptionInfo" prop is added those values are hidden and can be exposed on hover in a tooltip.',
source: "\n <BarChart\n items={[\n {\n value: 30000000,\n label: '$30,000,000',\n labelShort: '$30M',\n description: 'Sales',\n },\n {\n value: 20000000,\n label: '$20,000,000',\n labelShort: '$20M',\n description: 'Subscriptions',\n descriptionInfo: '$20,000,000 revenue from Subscriptions',\n },\n {\n value: 42000000,\n label: '$42,000,000',\n description: 'Ads',\n },\n {\n value: 65000000,\n label: '$65,000,000',\n labelShort: '$65M',\n description: 'Other',\n descriptionInfo: 'Other gains: $65,000,000',\n },\n ]}\n />"
})]
})].concat((0, _toConsumableArray2["default"])([{
title: 'API',
sections: [(0, _Sections.api)()]
}, {
title: 'Testkit',
sections: [(0, _Sections.testkit)()]
}, {
title: 'Playground',
sections: [(0, _Sections.playground)()]
}].map(_Sections.tab))))]
};