gov-gui
Version:
Gov UI Component Library Typscript Build
168 lines (167 loc) • 6.67 kB
JavaScript
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 scatter chart displays data points on a Cartesian coordinate system, showing the relationship between two variables. It’s commonly used for discovering correlations or patterns.*/
export default {
title: 'Components/Charts/Scatter',
component: 'gov-chart',
tags: ['autodocs'],
argTypes: {
type: {
control: 'text',
description: 'Type of the chart to display',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'scatter' },
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: 'Scatter Dataset',
backgroundColor: "rgba(54, 162, 235, 0.5)",
borderColor: "rgb(54, 162, 235)",
data: [
{ x: 0, y: 0 },
{ x: 0.2, y: 5000 },
{ x: 0.4, y: 10000 },
{ x: 0.4, y: 12000 },
{ x: 0.6, y: 15000 },
{ x: 0.6, y: 13000 },
{ x: 0.8, y: 18000 },
{ x: 1, y: 20000 },
{ x: 1.2, y: 20000 },
{ x: 1.5, y: 22000 },
{ x: 1.3, y: 22000 },
{ x: 1.8, y: 21000 },
{ x: 2, y: 20000 },
{ x: 2.2, y: 23000 },
{ x: 2.4, y: 20000 },
{ x: 2.75, y: 22000 },
{ x: 3, y: 18000 },
{ x: 3.5, y: 20000 },
{ x: 4, y: 22000 },
],
}]
};
const optionSet = {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
},
scales: {
x: {
type: 'linear',
position: 'bottom',
beginAtZero: true,
},
y: {
type: 'linear',
beginAtZero: true,
},
},
};
/** A scatter chart displays data points on a Cartesian coordinate system, showing the relationship between two variables. It’s commonly used for discovering correlations or patterns.*/
export const scatter = Template.bind({});
scatter.args = {
type: 'scatter',
data: dataSet,
options: optionSet,
animation: '',
animationDelay: '',
animationSpeed: '',
};
scatter.parameters = {
docs: {
source: {
code: `<gov-table type="${scatter.args.type}"
data="${JSON.stringify(scatter.args.data)} "
options="${JSON.stringify(scatter.args.options)}"
animation-delay="${scatter.args.animationDelay}"
animation="${scatter.args.animation}"
animation-speed="${scatter.args.animationSpeed}">
</gov-table>`,
},
},
};
//# sourceMappingURL=gov-chart-scatter.stories.js.map