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: [