diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 03ed54761..467db1a45 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -10,16 +10,6 @@ const preview: Preview = { }, parameters: { controls: { - // exclude props where we can't render a workable - // control for changing the value - exclude: [ - "containerComponent", - "dataComponent", - "groupComponent", - "labelComponent", - "labels", - "theme" - ], sort: 'alpha' }, }, diff --git a/stories/utils/arg-types.ts b/stories/utils/arg-types.tsx similarity index 56% rename from stories/utils/arg-types.ts rename to stories/utils/arg-types.tsx index 25f0b7b05..36299c136 100644 --- a/stories/utils/arg-types.ts +++ b/stories/utils/arg-types.tsx @@ -1,22 +1,24 @@ -import { VictoryTheme } from "@/victory"; +import React from "react"; + +import { VictoryLabel, VictoryTheme, VictoryTooltip } from "@/victory"; export const VictoryAxisCommonProps = { dependentAxis: { control: "boolean" }, invertAxis: { control: "boolean" }, tickCount: { control: "number" }, - // NOTE: controls not yet supported, but left for clarity - // axisComponent: { control: "text" }, - // axisLabelComponent: { control: "text" }, - // axisValue: { control: "text" }, - // disableInlineStyles: { control: "text" }, - // gridComponent: { control: "text" }, - // style: { control: "text" }, - // tickComponent: { control: "text" }, - // tickFormat: { control: "text" }, - // tickLabelComponent: { control: "text" }, - // tickValues: { control: "text" }, -}; + // disable changing these values + axisComponent: { control: false }, + axisLabelComponent: { control: false }, + axisValue: { control: false }, + disableInlineStyles: { control: false }, + gridComponent: { control: false }, + style: { control: false }, + tickComponent: { control: false }, + tickFormat: { control: false }, + tickLabelComponent: { control: false }, + tickValues: { control: false }, +} as const; export const VictoryCommonThemeProps = { animate: { control: "boolean" }, @@ -40,27 +42,32 @@ export const VictoryCommonThemeProps = { padding: { control: "text" }, polar: { control: "boolean" }, standalone: { control: "boolean" }, - theme: { control: "text" }, width: { control: "number" }, - // NOTE: controls not yet supported, but left for clarity - // containerComponent: { control: "text" }, - // externalEventMutations: { control: "text" }, - // domainPadding: { control: "text" }, - // groupComponent: { control: "text" }, - // maxDomain: { control: "number" }, - // minDomain: { control: "number" }, - // origin: { control: "text" }, - // range: { control: "text" }, - // scale: { control: "text" }, - // sharedEvents: { control: "text" }, - // singleQuadrantDomainPadding: { control: "text" }, -}; + // disable changing these values + containerComponent: { control: false }, + groupComponent: { control: false }, + externalEventMutations: { control: false }, + domainPadding: { control: false }, + maxDomain: { control: false }, + minDomain: { control: false }, + origin: { control: false }, + range: { control: false }, + scale: { control: false }, + sharedEvents: { control: false }, + singleQuadrantDomainPadding: { control: false }, +} as const; export const VictoryCommonProps = { ...VictoryCommonThemeProps, + + // disable changing these values + theme: { control: false }, + + // custom control to allow us to hoist the theme to the parent + // chart for better control of rendering themeKey: { control: "select", options: Object.keys(VictoryTheme) }, -}; +} as const; export const VictoryContainerProps = { "aria-describedby": { control: "text" }, @@ -81,7 +88,7 @@ export const VictoryContainerProps = { tabIndex: { control: "number" }, title: { control: "text" }, width: { control: "number" }, -}; +} as const; export const VictoryDatableProps = { data: { control: "object" }, @@ -89,31 +96,36 @@ export const VictoryDatableProps = { sortKey: { control: "text" }, sortOrder: { control: "select", options: ["ascending", "descending"] }, - // NOTE: controls not yet supported, but left for clarity - // categories: { control: "text" }, - // dataComponent: { control: "text" }, - // domain: { control: "text" }, - // domainPadding: { control: "text" }, - // x: { control: "text" }, - // y: { control: "text" }, - // y0: { control: "text" }, -}; + // disable changing these values + categories: { control: false }, + dataComponent: { control: false }, + domain: { control: false }, + domainPadding: { control: false }, + x: { control: false }, + y: { control: false }, + y0: { control: false }, +} as const; export const VictoryLabelableProps = { - // NOTE: controls not yet supported, but left for clarity - // labelComponent: { control: "text" }, -}; + labelComponent: { + options: ["Label", "Tooltip"], + mapping: { + Label: , + Tooltip: , + }, + }, +} as const; export const VictoryMultiLabelableProps = { ...VictoryLabelableProps, // NOTE: controls not yet supported, but left for clarity // labels: { control: "text" }, -}; +} as const; export const VictorySingleLabelableProps = { ...VictoryLabelableProps, // NOTE: controls not yet supported, but left for clarity // label: { control: "text" }, -}; +} as const; diff --git a/stories/victory-charts/victory-animation/config.ts b/stories/victory-charts/victory-animation/config.ts index 0e9120cf4..0d02ddd61 100644 --- a/stories/victory-charts/victory-animation/config.ts +++ b/stories/victory-charts/victory-animation/config.ts @@ -3,9 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { VictoryAnimation } from "@/victory"; import { componentContainer } from "../../utils/decorators"; -type StoryProps = React.ComponentProps & { - themeKey: string; -}; +type StoryProps = React.ComponentProps; export const ComponentMeta: Meta = { component: VictoryAnimation, @@ -14,7 +12,7 @@ export const ComponentMeta: Meta = { argTypes: { delay: { control: "number" }, duration: { control: "number" }, - easing: { control: "string" }, + easing: { control: "text" }, }, }; diff --git a/stories/victory-charts/victory-animation/default.stories.tsx b/stories/victory-charts/victory-animation/default.stories.tsx index 5258bf13e..1b7c3bbc3 100644 --- a/stories/victory-charts/victory-animation/default.stories.tsx +++ b/stories/victory-charts/victory-animation/default.stories.tsx @@ -49,7 +49,7 @@ export const Default: Story = { // clean up interval on unmount return () => clearInterval(interval); - }, [percent]); + }, [data, percent]); return (
@@ -72,7 +72,7 @@ export const Default: Story = { }, }} /> - + {(newProps) => { return ( & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryArea, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-axis/config.ts b/stories/victory-charts/victory-axis/config.ts index abaae4901..201ccbc98 100644 --- a/stories/victory-charts/victory-axis/config.ts +++ b/stories/victory-charts/victory-axis/config.ts @@ -16,7 +16,7 @@ type StoryProps = React.ComponentProps & { export type Story = StoryObj; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryAxis, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-bar/config.ts b/stories/victory-charts/victory-bar/config.ts index 5edfd5fac..fa26db2e5 100644 --- a/stories/victory-charts/victory-bar/config.ts +++ b/stories/victory-charts/victory-bar/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryBar, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-box-plot/config.ts b/stories/victory-charts/victory-box-plot/config.ts index 61e448b4a..e299f7a9c 100644 --- a/stories/victory-charts/victory-box-plot/config.ts +++ b/stories/victory-charts/victory-box-plot/config.ts @@ -9,28 +9,28 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryBoxPlot, decorators: [componentContainer], argTypes: { ...VictoryCommonProps, ...VictoryDatableProps, - }, - boxWidth: { control: "number" }, - labels: { control: "boolean" }, - max: { control: "string" }, - maxLabels: { control: "boolean" }, - median: { control: "string" }, - medianLabels: { control: "boolean" }, - min: { control: "string" }, - minLabels: { control: "boolean" }, - q1: { control: "string" }, - q1Labels: { control: "boolean" }, - q3: { control: "string" }, - q3Labels: { control: "boolean" }, - whiskerWidth: { control: "number" }, + boxWidth: { control: "number" }, + labels: { control: "boolean" }, + max: { control: "text" }, + maxLabels: { control: "boolean" }, + median: { control: "text" }, + medianLabels: { control: "boolean" }, + min: { control: "text" }, + minLabels: { control: "boolean" }, + q1: { control: "text" }, + q1Labels: { control: "boolean" }, + q3: { control: "text" }, + q3Labels: { control: "boolean" }, + whiskerWidth: { control: "number" }, + }, }; export type Story = StoryObj; diff --git a/stories/victory-charts/victory-candlestick/config.ts b/stories/victory-charts/victory-candlestick/config.ts index 578c4efec..1a42945be 100644 --- a/stories/victory-charts/victory-candlestick/config.ts +++ b/stories/victory-charts/victory-candlestick/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryCandlestick, decorators: [componentContainer], @@ -24,13 +24,13 @@ export const ComponentMeta: Meta = { candleRatio: { control: "boolean" }, candleWidth: { control: "number" }, - close: { control: "string" }, + close: { control: "text" }, closeLabels: { control: "boolean" }, - high: { control: "string" }, + high: { control: "text" }, highLabels: { control: "boolean" }, - low: { control: "string" }, + low: { control: "text" }, lowLabels: { control: "boolean" }, - open: { control: "string" }, + open: { control: "text" }, openLabels: { control: "boolean" }, wickStrokeWidth: { control: "number" }, }, diff --git a/stories/victory-charts/victory-chart/config.ts b/stories/victory-charts/victory-chart/config.ts index ee9fab49b..51694dffe 100644 --- a/stories/victory-charts/victory-chart/config.ts +++ b/stories/victory-charts/victory-chart/config.ts @@ -9,19 +9,19 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryChart, decorators: [componentContainer], argTypes: { ...VictoryCommonProps, - desc: { control: "string" }, + desc: { control: "text" }, endAngle: { control: "number" }, innerRadius: { control: "number" }, prependDefaultAxes: { control: "boolean" }, startAngle: { control: "number" }, - title: { control: "string" }, + title: { control: "text" }, }, }; diff --git a/stories/victory-charts/victory-container/config.ts b/stories/victory-charts/victory-container/config.ts index 425b09ab2..711bacbd4 100644 --- a/stories/victory-charts/victory-container/config.ts +++ b/stories/victory-charts/victory-container/config.ts @@ -9,7 +9,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryContainer, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-errorbar/config.ts b/stories/victory-charts/victory-errorbar/config.ts index 09ab880c1..6f93f0adc 100644 --- a/stories/victory-charts/victory-errorbar/config.ts +++ b/stories/victory-charts/victory-errorbar/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryErrorBar, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-histogram/config.ts b/stories/victory-charts/victory-histogram/config.ts index 671d2d461..710f61f77 100644 --- a/stories/victory-charts/victory-histogram/config.ts +++ b/stories/victory-charts/victory-histogram/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryHistogram, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-label/config.ts b/stories/victory-charts/victory-label/config.ts index ef2d7e579..9fcc56a4a 100644 --- a/stories/victory-charts/victory-label/config.ts +++ b/stories/victory-charts/victory-label/config.ts @@ -1,23 +1,20 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { VictoryLabel } from "@/victory"; +import { VictoryLabel, VictoryScatterProps } from "@/victory"; import { componentContainer } from "../../utils/decorators"; type StoryProps = React.ComponentProps; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryLabel, decorators: [componentContainer], argTypes: { - active: { control: "boolean" }, angle: { control: "number" }, capHeight: { control: "number" }, className: { control: "text" }, desc: { control: "text" }, direction: { control: "select", options: ["inherit", "rtl", "ltr"] }, - height: { control: "number" }, - index: { control: "number" }, id: { control: "text" }, inline: { control: "boolean" }, labelPlacement: { @@ -38,7 +35,6 @@ export const ComponentMeta: Meta = { control: "select", options: ["inherit", "start", "middle", "end"], }, - width: { control: "number" }, }, }; diff --git a/stories/victory-charts/victory-legend/config.ts b/stories/victory-charts/victory-legend/config.ts index 66e18f7f5..512975a45 100644 --- a/stories/victory-charts/victory-legend/config.ts +++ b/stories/victory-charts/victory-legend/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryLegend, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-line/config.ts b/stories/victory-charts/victory-line/config.ts index 0a63f7f8b..12024f34e 100644 --- a/stories/victory-charts/victory-line/config.ts +++ b/stories/victory-charts/victory-line/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryLine, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-pie/config.ts b/stories/victory-charts/victory-pie/config.ts index eabac16f2..85c4cb1ce 100644 --- a/stories/victory-charts/victory-pie/config.ts +++ b/stories/victory-charts/victory-pie/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryPie, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-polar-axis/config.ts b/stories/victory-charts/victory-polar-axis/config.ts index fb97ed65e..cb7091b2c 100644 --- a/stories/victory-charts/victory-polar-axis/config.ts +++ b/stories/victory-charts/victory-polar-axis/config.ts @@ -9,9 +9,11 @@ import { } from "../../utils/arg-types"; import { componentContainer } from "../../utils/decorators"; -type StoryProps = React.ComponentProps; +type StoryProps = React.ComponentProps & { + themeKey: string; +}; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryPolarAxis, decorators: [componentContainer], @@ -27,7 +29,6 @@ export const ComponentMeta: Meta = { control: "select", options: ["parallel", "perpendicular", "vertical"], }, - radius: { control: "number" }, startAngle: { control: "number" }, }, }; diff --git a/stories/victory-charts/victory-scatter/config.ts b/stories/victory-charts/victory-scatter/config.ts index adc87ddba..4a0d83af9 100644 --- a/stories/victory-charts/victory-scatter/config.ts +++ b/stories/victory-charts/victory-scatter/config.ts @@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryScatter, decorators: [componentContainer], diff --git a/stories/victory-charts/victory-tooltip/config.ts b/stories/victory-charts/victory-tooltip/config.ts index be654766d..1a8da2e75 100644 --- a/stories/victory-charts/victory-tooltip/config.ts +++ b/stories/victory-charts/victory-tooltip/config.ts @@ -10,7 +10,7 @@ type StoryProps = React.ComponentProps & { themeKey: string; }; -export const ComponentMeta: Meta = { +export const ComponentMeta: Meta> = { component: VictoryTooltip, decorators: [componentContainer], diff --git a/website/docs/api/victory-label.mdx b/website/docs/api/victory-label.mdx index 03a7d68dd..39aab557b 100644 --- a/website/docs/api/victory-label.mdx +++ b/website/docs/api/victory-label.mdx @@ -8,16 +8,6 @@ VictoryLabel renders the label components that are used across all of Victory. --- -### active - - - - - -The `active` prop specifies whether the label is active or not. The `active` prop is set by `defaultEvents` in components like `VictoryTooltip` and `VictorySelectionContainer`. The `active` prop is used when evaluating functional styles and props. - ---- - ### angle @@ -252,16 +242,6 @@ _default:_ `` --- -### height - - - - - -This prop refers to the height of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.** - ---- - ### id @@ -272,17 +252,6 @@ The `id` prop specifies a HTML ID that will be applied to the rendered text elem --- -### index - - - - - - -The `index` prop represents the index of the datum in the data array. **This prop should not be set manually.** - ---- - ### inline @@ -538,16 +507,6 @@ The `verticalAnchor` prop defines how the text is vertically positioned relative --- -### width - - - - - -This props refers to the width of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.** - ---- - ### x