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

A UI component library from Xandr.

import _ from 'lodash';
import React from 'react';
import * as chartConstants from '../../constants/charts';
import Legend from './Legend';
import ToolTip from '../ToolTip/ToolTip';
export default {
    title: 'Visualizations/Legend',
    component: Legend,
    parameters: {
        docs: {
            description: {
                component: Legend.peek.description,
            },
        },
    },
};
/* Basic */
export const Basic = (args) => {
    const { Item } = Legend;
    return (React.createElement("div", null,
        React.createElement(Legend, { ...args }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, color: color }, `Partner ${i}`)))),
        React.createElement("br", null),
        React.createElement(Legend, { ...args }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, pointKind: i, color: color }, `Partner ${i}`)))),
        React.createElement("br", null),
        React.createElement(Legend, { ...args }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasLine: true, color: color }, `Partner ${i}`)))),
        React.createElement("br", null),
        React.createElement(Legend, { ...args }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, `Partner ${i}`)))),
        React.createElement("br", null),
        React.createElement(Legend, { ...args, isReversed: true }, _.map(chartConstants.PALETTE_7, (color, i) => (React.createElement(Item, { key: color, hasPoint: true, hasLine: true, pointKind: i, color: color }, `Partner ${i}`)))),
        React.createElement("br", null),
        React.createElement(Legend, { ...args, orient: 'horizontal' },
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"),
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")),
        React.createElement("br", null),
        React.createElement(Legend, { ...args, orient: 'horizontal', isReversed: true },
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"),
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")),
        React.createElement("br", null),
        React.createElement(Legend, { ...args },
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"),
            React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"),
            React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1")),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement(ToolTip, { isExpanded: true, direction: 'right', alignment: 'end', isLight: true },
            React.createElement(ToolTip.Target, null, "Tooltip example"),
            React.createElement(ToolTip.Body, null,
                React.createElement(Legend, { ...args, hasBorders: false },
                    React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_GOOD }, "Revenue"),
                    React.createElement(Item, { hasLine: true, color: chartConstants.COLOR_BAD }, "Loss"),
                    React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_0 }, "Partner 0"),
                    React.createElement(Item, { hasPoint: true, color: chartConstants.COLOR_1 }, "Partner 1"))))));
};
//# sourceMappingURL=Legend.stories.js.map