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

A UI component library from Xandr.

import _ from 'lodash';
import React from 'react';
import * as chartConstants from '../../constants/charts';
import PieChart from './PieChart';
import Legend from '../Legend/Legend';
export default {
    title: 'Visualizations/PieChart',
    component: PieChart,
    parameters: {
        docs: {
            description: {
                component: PieChart.peek.description,
            },
        },
    },
    args: PieChart.defaultProps,
};
/* Basic */
export const Basic = (args) => {
    const data = [
        { x: 'Leslie', y: 60 },
        { x: 'Ron', y: 40 },
        { x: 'Tom', y: 30 },
        { x: 'Gary', y: 20 },
        { x: 'Ben', y: 15 },
    ];
    const style = {
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { data: data }),
        React.createElement(PieChart, { data: data, ...args, palette: chartConstants.PALETTE_MONOCHROME_0_5 }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_1_5 }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_2_5 }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_3_5 }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_4_5 }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_5_5 })));
};
/* Basic Donuts */
export const BasicDonuts = (args) => {
    /* eslint-disable comma-spacing */
    const data = [
        { x: 'Leslie', y: 60 },
        { x: 'Ron', y: 40 },
        { x: 'Tom', y: 30 },
        { x: 'Gary', y: 20 },
        { x: 'Ben', y: 15 },
    ];
    const style = {
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { ...args, data: data, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_0_5, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_1_5, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_2_5, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_3_5, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_4_5, isDonut: true }),
        React.createElement(PieChart, { ...args, data: data, palette: chartConstants.PALETTE_MONOCHROME_5_5, isDonut: true })));
};
/* Legend */
export const LegendTest = (args) => {
    const data = [
        { x: 'Leslie', y: 80 },
        { x: 'Tom', y: 20 },
        { x: 'Ron', y: 10 },
        { x: 'Ann', y: 30 },
    ];
    const palette = chartConstants.PALETTE_7;
    const style = {
        display: 'flex',
        alignItems: 'center',
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { ...args, data: data, palette: palette }),
        React.createElement(Legend, null, _.map(data, (d, index) => (React.createElement(Legend.Item, { key: index, color: palette[index % palette.length], hasPoint: true, pointKind: 1 }, d.x))))));
};
/* Color Map */
export const ColorMap = (args) => {
    /* eslint-disable comma-spacing */
    const data = [
        { x: 'Leslie', y: 100 },
        { x: 'Tom', y: 20 },
        { x: 'Ron', y: 10 },
        { x: 'Ann', y: 30 },
        { x: 'Tammy', y: 40 },
    ];
    const style = {
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { ...args, data: data, colorMap: {
                Tammy: chartConstants.COLOR_BAD,
                Leslie: chartConstants.COLOR_GOOD,
            } })));
};
/* Percents */
export const Percents = (args) => {
    /* eslint-disable comma-spacing */
    const data = [
        { x: 'Leslie', y: 60 },
        { x: 'Ron', y: 40 },
        { x: 'Tom', y: 30 },
        { x: 'Gary', y: 20 },
        { x: 'Ben', y: 15 },
    ];
    const total = _.sum(_.map(data, 'y'));
    const style = {
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { ...args, data: data, yAxisFormatter: (value) => {
                return `${((value / total) * 100).toFixed(1)}%`;
            } })));
};
/* Small With No Stroke Or Hover */
export const SmallWithNoStrokeOrHover = (args) => {
    const data = [
        { x: 'Leslie', y: 60 },
        { x: 'Ron', y: 40 },
        { x: 'Tom', y: 30 },
        { x: 'Gary', y: 20 },
        { x: 'Ben', y: 15 },
    ];
    const style = {
        paddingTop: '4rem',
    };
    return (React.createElement("section", { style: style },
        React.createElement(PieChart, { ...args, margin: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            }, width: 25, height: 25, data: data, hasStroke: false, isHovering: false })));
};
//# sourceMappingURL=PieChart.stories.js.map