lucid-ui/dist/esm/components/Bar/Bar.stories.js

A UI component library from Xandr.

import _ from 'lodash';
import React from 'react';
import * as chartConstants from '../../constants/charts';
import Bar from '../Bar/Bar';
export default {
    title: 'Visualizations/Bar',
    component: Bar,
    parameters: {
        docs: {
            description: {
                component: Bar.peek.description,
            },
        },
    },
};
/* Custom Colors */
export const CustomColors = (args) => {
    const svgProps = {
        width: 20,
        height: 100,
    };
    const pointProps = {
        x: 5,
        y: 0,
        width: 10,
        height: 100,
    };
    return (React.createElement("div", null,
        React.createElement("svg", { ...svgProps },
            React.createElement(Bar, { ...args, ...pointProps, color: '#f80' })),
        React.createElement("svg", { ...svgProps },
            React.createElement(Bar, { ...args, ...pointProps, color: '#abc123' }))));
};
CustomColors.storyName = 'CustomColors';
/* Custom Dimension Units */
export const CustomDimensionUnits = (args) => {
    const svgProps = {
        width: 20,
        height: 100,
    };
    const pointProps = {
        x: 5,
        y: 0,
        width: '10%',
        height: '100%',
    };
    return (React.createElement("div", null,
        React.createElement("svg", { ...svgProps },
            React.createElement(Bar, { ...args, ...pointProps, color: '#f80' })),
        React.createElement("svg", { ...svgProps },
            React.createElement(Bar, { ...args, ...pointProps, color: '#abc123' }))));
};
/* Regular Colors */
export const RegularColors = (args) => {
    const svgProps = {
        width: 20,
        height: 100,
    };
    const barProps = {
        x: 5,
        y: 0,
        width: 10,
        height: 100,
    };
    const colors = [
        chartConstants.COLOR_0_LIGHTEST,
        chartConstants.COLOR_0_LIGHT,
        chartConstants.COLOR_0,
        chartConstants.COLOR_0_DARK,
        chartConstants.COLOR_0_DARKEST,
        chartConstants.COLOR_1_LIGHTEST,
        chartConstants.COLOR_1_LIGHT,
        chartConstants.COLOR_1,
        chartConstants.COLOR_1_DARK,
        chartConstants.COLOR_1_DARKEST,
        chartConstants.COLOR_2_LIGHTEST,
        chartConstants.COLOR_2_LIGHT,
        chartConstants.COLOR_2,
        chartConstants.COLOR_2_DARK,
        chartConstants.COLOR_2_DARKEST,
        chartConstants.COLOR_3_LIGHTEST,
        chartConstants.COLOR_3_LIGHT,
        chartConstants.COLOR_3,
        chartConstants.COLOR_3_DARK,
        chartConstants.COLOR_3_DARKEST,
        chartConstants.COLOR_4_LIGHTEST,
        chartConstants.COLOR_4_LIGHT,
        chartConstants.COLOR_4,
        chartConstants.COLOR_4_DARK,
        chartConstants.COLOR_4_DARKEST,
        chartConstants.COLOR_5_LIGHTEST,
        chartConstants.COLOR_5_LIGHT,
        chartConstants.COLOR_5,
        chartConstants.COLOR_5_DARK,
        chartConstants.COLOR_5_DARKEST,
        chartConstants.COLOR_6_LIGHTEST,
        chartConstants.COLOR_6_LIGHT,
        chartConstants.COLOR_6,
        chartConstants.COLOR_6_DARK,
        chartConstants.COLOR_6_DARKEST,
        chartConstants.COLOR_GOOD_LIGHT,
        chartConstants.COLOR_GOOD,
        chartConstants.COLOR_GOOD_DARK,
        chartConstants.COLOR_BAD_LIGHT,
        chartConstants.COLOR_BAD,
        chartConstants.COLOR_BAD_DARK,
        chartConstants.COLOR_NEUTRAL,
    ];
    return (React.createElement("div", null, _.map(colors, (color) => (React.createElement("svg", { key: color, ...svgProps },
        React.createElement(Bar, { ...args, ...barProps, color: color }))))));
};
//# sourceMappingURL=Bar.stories.js.map