gov-gui/dist/collection/components/gov-chart/gov-chart-pie.stories.js

Gov UI Component Library Typscript Build

import { html } from "lit-html"; // Lit-html is used for rendering in Storybook, but Stencil doesn't require its reactivity model.
import "../../global/animate.min.css";
/**
 * A pie chart divides data into slices to illustrate numerical proportions. Each slice represents a category’s contribution to the whole.*/
export default {
    title: 'Components/Charts/Pie',
    component: 'gov-chart',
    tags: ['autodocs'],
    argTypes: {
        type: {
            control: 'text',
            description: 'Type of the chart to display',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'pie' },
                category: 'Attributes',
            },
        },
        data: {
            control: 'object',
            description: 'Data to be plotted on the chart. It includes labels and datasets.',
            table: {
                type: { summary: 'object' },
                defaultValue: { summary: '{}' },
                category: 'Attributes',
            },
        },
        options: {
            control: 'object',
            description: 'Chart.js options object to customize the chart’s appearance and behavior.',
            table: {
                type: { summary: 'object' },
                defaultValue: { summary: '{}' },
                category: 'Attributes',
            },
        },
        animation: {
            control: 'select',
            options: ["",
                "bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
                "backInDown", "backInLeft", "backInRight", "backInUp",
                "backOutDown", "backOutLeft", "backOutRight", "backOutUp",
                "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
                "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
                "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
                "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
                "flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
                "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
                "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
                "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
                "hinge", "jackInTheBox", "rollIn", "rollOut",
                "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
                "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
                "slideInDown", "slideInLeft", "slideInRight", "slideInUp",
                "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
            ],
            description: 'Selects the animation effect to apply to the component.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Animations',
            },
        },
        animationDelay: {
            control: 'select',
            options: ["2s", "3s", "4s", "5s"],
            description: 'Sets the delay before the animation begins (in seconds).',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '2s' },
                category: 'Animations',
            },
        },
        animationSpeed: {
            control: 'select',
            options: ["slow", "slower", "fast", "faster"],
            description: 'Controls how quickly the animation plays.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Animations',
            },
        },
    },
};
const Template = (args) => html `
  <gov-chart
    type="${args.type}"
    .data="${args.data}"
    .options="${args.options}"
      animation-delay="${args.animationDelay}"
  animation="${args.animation}"
  animation-speed="${args.animationSpeed}"
  ></gov-chart>
`;
const dataSet = {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [
        {
            backgroundColor: ["rgba(54, 162, 235, 0.5)", "rgba(255, 99, 132, 0.5)", "rgba(75, 192, 192, 0.5)", "rgba(153, 102, 255, 0.5)"],
            borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(75, 192, 192)", "rgb(153, 102, 255)"],
            borderWidth: 1,
            data: [15000, 20000, 18000, 22000],
        },
    ],
};
const optionSet = {
    responsive: true,
    plugins: {
        legend: {
            display: true,
            position: 'top',
        },
    },
    scales: {
        x: {
            beginAtZero: true,
        },
        y: {
            beginAtZero: true,
        },
    },
};
export const pie = Template.bind({});
pie.args = {
    type: 'pie',
    data: dataSet,
    options: optionSet,
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
pie.parameters = {
    docs: {
        source: {
            code: `<gov-table type="${pie.args.type}"
data="${JSON.stringify(pie.args.data)} "
options="${JSON.stringify(pie.args.options)}"
animation-delay="${pie.args.animationDelay}"
animation="${pie.args.animation}"
animation-speed="${pie.args.animationSpeed}">
</gov-table>`,
        },
    },
};
//# sourceMappingURL=gov-chart-pie.stories.js.map