gov-gui/dist/collection/components/gov-chart/gov-chart-polarArea.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 polar area chart is similar to a pie chart, but the angles are equal, and the radius of each segment varies depending on the data. It allows for visualizing how values differ based on their distance from the center.*/
export default {
    title: 'Components/Charts/PolarArea',
    component: 'gov-chart',
    tags: ['autodocs'],
    argTypes: {
        type: {
            control: 'text',
            description: 'Type of the chart to display',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'polarArea' },
                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: [
        {
            label: 'Revenue',
            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 polarArea = Template.bind({});
polarArea.args = {
    type: 'polarArea',
    data: dataSet,
    options: optionSet,
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
polarArea.parameters = {
    docs: {
        source: {
            code: `<gov-table type="${polarArea.args.type}"
data="${JSON.stringify(polarArea.args.data)} "
options="${JSON.stringify(polarArea.args.options)}"
animation-delay="${polarArea.args.animationDelay}"
animation="${polarArea.args.animation}"
animation-speed="${polarArea.args.animationSpeed}"
>
</gov-table>`,
        },
    },
};
//# sourceMappingURL=gov-chart-polarArea.stories.js.map