diff --git a/packages/components/src/components/Vega.tsx b/packages/components/src/components/Vega.tsx
index 3a66d8aa..a51f053f 100644
--- a/packages/components/src/components/Vega.tsx
+++ b/packages/components/src/components/Vega.tsx
@@ -1,6 +1,7 @@
// Wrapper for the Vega component
import { Vega as VegaOg } from "react-vega";
+import { VegaProps } from "react-vega/lib/Vega";
-export function Vega(props) {
+export function Vega(props: VegaProps) {
return ;
}
diff --git a/packages/components/src/components/VegaLite.tsx b/packages/components/src/components/VegaLite.tsx
index 7c311966..3b48d142 100644
--- a/packages/components/src/components/VegaLite.tsx
+++ b/packages/components/src/components/VegaLite.tsx
@@ -1,8 +1,9 @@
// Wrapper for the Vega Lite component
-import { VegaLite as VegaLiteOg } from "react-vega";
-import applyFullWidthDirective from "../lib/applyFullWidthDirective";
+import { VegaLite as VegaLiteOg } from 'react-vega';
+import { VegaLiteProps } from 'react-vega/lib/VegaLite';
+import applyFullWidthDirective from '../lib/applyFullWidthDirective';
-export function VegaLite(props) {
+export function VegaLite(props: VegaLiteProps) {
const Component = applyFullWidthDirective({ Component: VegaLiteOg });
return ;
diff --git a/packages/components/stories/Vega.stories.ts b/packages/components/stories/Vega.stories.ts
index 6c4eed65..95d85959 100644
--- a/packages/components/stories/Vega.stories.ts
+++ b/packages/components/stories/Vega.stories.ts
@@ -7,6 +7,16 @@ const meta: Meta = {
title: 'Components/Charts/Vega',
component: Vega,
tags: ['autodocs'],
+ argTypes: {
+ data: {
+ description:
+ "Vega's `data` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/data/",
+ },
+ spec: {
+ description:
+ "Vega's `spec` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/specification/",
+ },
+ },
};
export default meta;
@@ -15,7 +25,7 @@ type Story = StoryObj;
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
- name: 'Chart built with Vega',
+ name: 'Bar chart',
args: {
data: {
table: [
diff --git a/packages/components/stories/VegaLite.stories.ts b/packages/components/stories/VegaLite.stories.ts
index 28a43771..929d111b 100644
--- a/packages/components/stories/VegaLite.stories.ts
+++ b/packages/components/stories/VegaLite.stories.ts
@@ -25,7 +25,7 @@ type Story = StoryObj;
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
- name: 'Chart built with Vega Lite',
+ name: 'Bar chart',
args: {
data: {
table: [