@wix/design-system
Version:
@wix/design-system
100 lines • 7.91 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { header, tabs, tab, description, importExample, title, columns, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import BarChart from '..';
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'
}];
export default {
category: storySettings.category,
storyName: 'BarChart',
component: BarChart,
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: [header(), tabs([tab({
title: 'Description',
sections: [columns([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.'
})]), importExample("import { BarChart } from '@wix/design-system';"), divider(), title('Examples'), 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 />"
}), 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 />"
}), 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 />"
}), 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 />"
}), 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 />"
}), 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 />"
}), 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(_toConsumableArray([{
title: 'API',
sections: [api()]
}, {
title: 'Testkit',
sections: [testkit()]
}, {
title: 'Playground',
sections: [playground()]
}].map(tab))))]
};