lucid-ui
Version:
A UI component library from Xandr.
35 lines • 2.15 kB
JavaScript
import React from 'react';
import * as chartConstants from '../../constants/charts';
import Line from './Line';
export default {
title: 'Visualizations/Line',
component: Line,
parameters: {
docs: {
description: {
component: Line.peek.description,
},
},
},
};
/* Basic */
export const Basic = (args) => {
return (React.createElement("div", null,
React.createElement("svg", { width: 200, height: 120 },
React.createElement(Line, { ...args, color: chartConstants.COLOR_0, d: 'M0,0 L120,120' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_1, d: 'M0,20 L120,100' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_2, d: 'M0,40 L120,80' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_3, d: 'M0,60 L120,60' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_4, d: 'M0,80 L120,40' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_5, d: 'M0,100 L120,20' }),
React.createElement(Line, { ...args, color: chartConstants.COLOR_6, d: 'M0,120 L120,0' })),
React.createElement("svg", { width: 200, height: 120 },
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_0, d: 'M0,0 L120,120' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_1, d: 'M0,20 L120,100' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_2, d: 'M0,40 L120,80' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_3, d: 'M0,60 L120,60' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_4, d: 'M0,80 L120,40' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_5, d: 'M0,100 L120,20' }),
React.createElement(Line, { ...args, isDotted: true, color: chartConstants.COLOR_6, d: 'M0,120 L120,0' }))));
};
//# sourceMappingURL=Line.stories.js.map