@wix/design-system
Version:
@wix/design-system
95 lines • 4.81 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SparklineChart/docs/index.story.jsx",
_this = this;
import React from 'react';
import { header, tabs, tab, description, title, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import Box from '../../Box';
import SparklineChart from '..';
var data = [{
label: new Date('Thu Sep 4 2020'),
value: 3
}, {
label: new Date('Thu Sep 5 2020'),
value: 17
}, {
label: new Date('Thu Sep 6 2020'),
value: 18
}, {
label: new Date('Thu Sep 7 2020'),
value: 12
}, {
label: new Date('Thu Sep 8 2020'),
value: 8
}, {
label: new Date('Thu Sep 9 2020'),
value: 7
}, {
label: new Date('Thu Sep 10 2020'),
value: 9
}];
export default {
category: storySettings.category,
storyName: 'SparklineChart',
component: SparklineChart,
componentPath: '..',
componentWrapper: function componentWrapper(_ref) {
var component = _ref.component;
return /*#__PURE__*/React.createElement(Box, {
align: "center",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 40
}
}, component);
},
componentProps: {
data: data,
color: '#FF0000',
getTooltipContent: function getTooltipContent(index) {
return data[index].label.toLocaleDateString();
},
highlightedStartingIndex: 2,
highlightedEndingIndex: 4,
width: 400,
height: 80,
onHover: function onHover(index) {
return "Point at index ".concat(index, " is hovered!");
}
},
exampleProps: {
// Put here presets of props, for more info:
// https://github.com/wix/wix-ui/blob/master/packages/wix-storybook-utils/docs/usage.md
},
sections: [header({
sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(SparklineChart.displayName, "/")
}), tabs([tab({
title: 'Description',
sections: [description({
title: 'Description',
text: 'A tiny chart that provides a visual representation of data.'
}), divider(), title('Examples'), example({
title: 'Simple Usage',
description: "A simple sparkline example. The SparklineChart supports custom tooltip on hover. When getTooltipContent is not set, the tooltip will be disabled ",
source: " <SparklineChart\n getTooltipContent={index => <span style={{color: '#ffffff'}}>{index}</span>}\n data={[\n { label: new Date('Thu Sep 4 2020'), value: 3 },\n { label: new Date('Thu Sep 5 2020'), value: 17 },\n { label: new Date('Thu Sep 6 2020'), value: 18 },\n { label: new Date('Thu Sep 7 2020'), value: 12 },\n { label: new Date('Thu Sep 8 2020'), value: 8 },\n { label: new Date('Thu Sep 9 2020'), value: 7 },\n { label: new Date('Thu Sep 10 2020'), value: 9 },\n ]}\n />"
}), example({
title: 'Highlighted Area',
description: 'SparklineChart allows highlighting partial values on the chart line.',
source: "<SparklineChart\n data={[\n { label: new Date('Thu Sep 4 2020'), value: 3 },\n { label: new Date('Thu Sep 5 2020'), value: 17 },\n { label: new Date('Thu Sep 6 2020'), value: 18 },\n { label: new Date('Thu Sep 7 2020'), value: 12 },\n { label: new Date('Thu Sep 8 2020'), value: 8 },\n { label: new Date('Thu Sep 9 2020'), value: 7 },\n { label: new Date('Thu Sep 10 2020'), value: 9 },\n ]}\n highlightedStartingIndex={2}\n highlightedEndingIndex={4}\n />"
}), example({
title: 'Custom Color & Size',
source: "<SparklineChart\n data={[\n { label: new Date('Thu Sep 4 2020'), value: 3 },\n { label: new Date('Thu Sep 5 2020'), value: 17 },\n { label: new Date('Thu Sep 6 2020'), value: 18 },\n { label: new Date('Thu Sep 7 2020'), value: 12 },\n { label: new Date('Thu Sep 8 2020'), value: 8 },\n { label: new Date('Thu Sep 9 2020'), value: 7 },\n { label: new Date('Thu Sep 10 2020'), value: 9 }\n ]}\n color='#ee00ff'\n width={400}\n height={80}\n />"
})]
})].concat(_toConsumableArray([{
title: 'API',
sections: [api()]
}, {
title: 'Testkit',
sections: [testkit()]
}, {
title: 'Playground',
sections: [playground()]
}].map(tab))))]
};