diff --git a/.storybook/main.ts b/.storybook/main.ts index 34e82fe48..dc3a34f9e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,9 +5,6 @@ const path = require("path"); const ROOT = path.resolve(__dirname, ".."); const STORIES = path.resolve(ROOT, "stories"); -const wrapForPnp = (packageName) => - path.dirname(require.resolve(path.join(packageName, "package.json"))); - const config: StorybookConfig = { addons: [ "@storybook/addon-essentials", @@ -23,18 +20,37 @@ const config: StorybookConfig = { }, }, }, - wrapForPnp("@storybook/addon-webpack5-compiler-swc"), + "@storybook/addon-webpack5-compiler-swc", "@chromatic-com/storybook", ], - stories: ["../stories/**/*.stories.tsx"], - framework: { - name: wrapForPnp("@storybook/react-webpack5"), + name: "@storybook/react-webpack5", options: { builder: {}, }, }, + + stories: ["../stories/**/*.stories.tsx"], + + typescript: { + check: false, + checkOptions: { + typescript: { + configFile: path.resolve(ROOT, "tsconfig.storybook.json"), + }, + }, + }, + + webpackFinal: async (config) => { + if (config.resolve) { + config.resolve.alias = { + ...config.resolve.alias, + "@": path.resolve(__dirname, "../packages"), + }; + } + return config; + }, }; export default config; diff --git a/.storybook/preview.css b/.storybook/preview.css new file mode 100644 index 000000000..980db1394 --- /dev/null +++ b/.storybook/preview.css @@ -0,0 +1,21 @@ +.VictoryContainer { + border: 1px solid #ccc; +} + +/** Custom styles for the visual style tests */ + +.fill-purple { + fill: rgb(87, 4, 143); +} + +.fill-green { + fill: rgb(33, 212, 9); +} + +.stroke-purple { + stroke: rgb(87, 4, 143); +} + +.stroke-green { + stroke: rgb(33, 212, 9); +} diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 000000000..467db1a45 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,18 @@ +import { Preview } from "@storybook/react"; + +import "./preview.css"; + +const preview: Preview = { + args: { + height: 350, + themeKey: "grayscale", + width: 400, + }, + parameters: { + controls: { + sort: 'alpha' + }, + }, +}; + +export default preview; diff --git a/chromatic.config.json b/chromatic.config.json new file mode 100644 index 000000000..122ef37b3 --- /dev/null +++ b/chromatic.config.json @@ -0,0 +1,5 @@ +{ + "onlyChanged": true, + "projectId": "Project:5b4acf7c54c0490024d5980b", + "zip": true +} diff --git a/package.json b/package.json index 595672e0b..d32bfdd28 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "seedrandom": "^3.0.5", "storybook": "^8.4.1", "style-loader": "^4.0.0", - "styled-components": "^5.3.5", "tailwindcss": "^3.3.0", "ts-jest": "^29.1.2", "ts-loader": "^9.3.0", @@ -163,8 +162,10 @@ "types:check": "wireit", "types:create": "wireit", "build-storybook": "storybook build", + "storybook:typecheck": "tsc -p tsconfig.storybook.json", "storybook:build": "wireit", - "storybook:server": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"pnpx storybook dev -p 6006\"", + "storybook:dev": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"pnpx storybook dev -p 6006\"", + "storybook:start": "storybook dev -p 6006 --no-open", "sync": "wireit", "sync:pkgs": "node ./scripts/sync-pkgs-wireit.js", "sync:tsconfig": "pnpm -r --filter !victory-core --filter !victory-vendor --filter !victory-native exec -- cpx ../victory-core/tsconfig.* .", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb71d82e6..6225d7c51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -258,9 +258,6 @@ importers: style-loader: specifier: ^4.0.0 version: 4.0.0(webpack@5.74.0) - styled-components: - specifier: ^5.3.5 - version: 5.3.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) tailwindcss: specifier: ^3.3.0 version: 3.4.1(ts-node@10.9.1) @@ -1723,13 +1720,6 @@ packages: jsesc: 3.0.2 dev: false - /@babel/helper-annotate-as-pure@7.18.6: - resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.24.7 - dev: true - /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -2021,13 +2011,6 @@ packages: - supports-color dev: false - /@babel/helper-module-imports@7.18.6: - resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.24.7 - dev: true - /@babel/helper-module-imports@7.22.15: resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} engines: {node: '>=6.9.0'} @@ -4705,24 +4688,6 @@ packages: '@babel/types': 7.26.0 dev: false - /@babel/traverse@7.18.6(supports-color@5.5.0): - resolution: {integrity: sha512-zS/OKyqmD7lslOtFqbscH6gMLFYOfG1YPqCKfAW5KrTeolKqvB8UelR49Fpr6y93kYkW2Ik00mT1LOGiAGvizw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.24.7 - '@babel/generator': 7.24.7 - '@babel/helper-environment-visitor': 7.24.7 - '@babel/helper-function-name': 7.24.7 - '@babel/helper-hoist-variables': 7.24.7 - '@babel/helper-split-export-declaration': 7.24.7 - '@babel/parser': 7.24.7 - '@babel/types': 7.24.7 - debug: 4.3.4(supports-color@5.5.0) - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/traverse@7.24.0: resolution: {integrity: sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==} engines: {node: '>=6.9.0'} @@ -6211,24 +6176,6 @@ packages: dev: false optional: true - /@emotion/is-prop-valid@1.1.3: - resolution: {integrity: sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==} - dependencies: - '@emotion/memoize': 0.7.5 - dev: true - - /@emotion/memoize@0.7.5: - resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==} - dev: true - - /@emotion/stylis@0.8.5: - resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==} - dev: true - - /@emotion/unitless@0.7.5: - resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==} - dev: true - /@esbuild/android-arm64@0.18.20: resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==} engines: {node: '>=12'} @@ -11061,19 +11008,6 @@ packages: lodash: 4.17.21 dev: true - /babel-plugin-styled-components@2.0.7(styled-components@5.3.5): - resolution: {integrity: sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==} - peerDependencies: - styled-components: '>= 2' - dependencies: - '@babel/helper-annotate-as-pure': 7.18.6 - '@babel/helper-module-imports': 7.22.15 - babel-plugin-syntax-jsx: 6.18.0 - lodash: 4.17.21 - picomatch: 2.3.1 - styled-components: 5.3.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) - dev: true - /babel-plugin-syntax-async-functions@6.13.0: resolution: {integrity: sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==} dev: true @@ -11832,10 +11766,6 @@ packages: engines: {node: '>=14.16'} dev: false - /camelize@1.0.0: - resolution: {integrity: sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==} - dev: true - /caniuse-api@3.0.0: resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==} dependencies: @@ -12590,11 +12520,6 @@ packages: type-fest: 1.4.0 dev: false - /css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - dev: true - /css-declaration-sorter@7.2.0(postcss@8.4.47): resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==} engines: {node: ^14 || ^16 || >=18} @@ -12714,14 +12639,6 @@ packages: domutils: 3.0.1 nth-check: 2.1.1 - /css-to-react-native@3.0.0: - resolution: {integrity: sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==} - dependencies: - camelize: 1.0.0 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - dev: true - /css-tree@1.1.3: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} @@ -13087,19 +13004,6 @@ packages: dependencies: ms: 2.1.2 - /debug@4.3.4(supports-color@5.5.0): - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.2 - supports-color: 5.5.0 - dev: true - /decamelize-keys@1.1.0: resolution: {integrity: sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==} engines: {node: '>=0.10.0'} @@ -22524,30 +22428,6 @@ packages: dependencies: inline-style-parser: 0.2.2 - /styled-components@5.3.5(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==} - engines: {node: '>=10'} - requiresBuild: true - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - react-is: '>= 16.8.0' - dependencies: - '@babel/helper-module-imports': 7.18.6 - '@babel/traverse': 7.18.6(supports-color@5.5.0) - '@emotion/is-prop-valid': 1.1.3 - '@emotion/stylis': 0.8.5 - '@emotion/unitless': 0.7.5 - babel-plugin-styled-components: 2.0.7(styled-components@5.3.5) - css-to-react-native: 3.0.0 - hoist-non-react-statics: 3.3.2 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-is: 18.2.0 - shallowequal: 1.1.0 - supports-color: 5.5.0 - dev: true - /stylehacks@6.1.1(postcss@8.4.47): resolution: {integrity: sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==} engines: {node: ^14 || ^16 || >=18.0} @@ -22819,7 +22699,7 @@ packages: dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 - schema-utils: 3.3.0 + schema-utils: 3.1.1 serialize-javascript: 6.0.2 terser: 5.31.1 webpack: 5.96.1 diff --git a/stories/canvas-bar.stories.tsx b/stories/canvas-bar.stories.tsx deleted file mode 100644 index 244f6e91c..000000000 --- a/stories/canvas-bar.stories.tsx +++ /dev/null @@ -1,1372 +0,0 @@ -import { fromJS } from "immutable"; -import React from "react"; -import { Meta } from "@storybook/react"; - -import { VictoryBar } from "../packages/victory-bar"; -import { CanvasBar, CanvasGroup } from "../packages/victory-canvas"; -import { VictoryChart } from "../packages/victory-chart"; -import { - VictoryLabel, - VictoryLabelStyleObject, - VictoryTheme, -} from "../packages/victory-core"; -import { VictoryGroup } from "../packages/victory-group"; -import { VictoryPolarAxis } from "../packages/victory-polar-axis"; -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { getData, getDataWithBaseline, getMixedData } from "./data"; -import { storyContainer } from "./decorators"; - -// TODO: refactor to use storybook controls -const meta: Meta = { - title: "Victory Charts/Canvas Container/Bar", - component: VictoryBar, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - } - dataComponent={} - {...defaultChartProps} - /> - } - dataComponent={} - style={parentStyle} - /> - - ); -}; - -export const Theme = () => { - return ( - <> - - } - dataComponent={} - data={getData(8)} - /> - - - datum.x}> - } - dataComponent={} - data={getData(8)} - /> - } - dataComponent={} - data={getData(8, "seed-1")} - /> - } - dataComponent={} - data={getData(8, "seed-2")} - /> - } - dataComponent={} - data={getData(8, "seed-3")} - /> - } - dataComponent={} - data={getData(8, "seed-4")} - /> - - - - } - dataComponent={} - data={getData(8)} - /> - - - datum.x}> - } - dataComponent={} - data={getData(8)} - /> - } - dataComponent={} - data={getData(8, "seed-1")} - /> - } - dataComponent={} - data={getData(8, "seed-2")} - /> - } - dataComponent={} - data={getData(8, "seed-3")} - /> - } - dataComponent={} - data={getData(8, "seed-4")} - /> - - - - ); -}; - -export const Alignment = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - alignment="start" - /> - - - } - dataComponent={} - data={getData(7)} - alignment="start" - /> - - - } - dataComponent={} - data={getData(7)} - alignment="middle" - /> - - - } - dataComponent={} - data={getData(7)} - alignment="middle" - /> - - - } - dataComponent={} - data={getData(7)} - alignment="end" - /> - - - } - dataComponent={} - data={getData(7)} - alignment="end" - /> - - - } - dataComponent={} - data={getMixedData(5)} - alignment="start" - /> - - - } - dataComponent={} - data={getMixedData(5)} - alignment="start" - /> - - - } - dataComponent={} - data={getMixedData(5)} - alignment="end" - /> - - - } - dataComponent={} - data={getMixedData(5)} - alignment="end" - /> - - - ); -}; - -export const BarRatio = () => { - return ( - <> - - } - dataComponent={} - data={getData(2)} - barRatio={0.01} - /> - - - } - dataComponent={} - data={getData(50)} - barRatio={0.01} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={0.01} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={0.01} - /> - - - } - dataComponent={} - data={getData(2)} - barRatio={0.5} - /> - - - } - dataComponent={} - data={getData(50)} - barRatio={0.5} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={0.5} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={0.5} - /> - - - } - dataComponent={} - data={getData(2)} - barRatio={1} - /> - - - } - dataComponent={} - data={getData(50)} - barRatio={1} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={1} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={1} - /> - - - } - dataComponent={} - data={getData(2)} - barRatio={1.5} - /> - - - } - dataComponent={} - data={getData(50)} - barRatio={1.5} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={1.5} - /> - - - } - dataComponent={} - data={getData(7)} - barRatio={1.5} - /> - - - ); -}; - -export const BarWidth = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - barWidth={5} - /> - - - } - dataComponent={} - data={getData(7)} - barWidth={10} - /> - - - } - dataComponent={} - data={getData(7)} - barWidth={20} - /> - - - } - dataComponent={} - data={getData(7)} - barWidth={({ datum }) => datum.x * 4} - /> - - - ); -}; - -export const CornerRadius = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - cornerRadius={1} - /> - - - } - dataComponent={} - data={getData(7)} - cornerRadius={5} - /> - - - } - dataComponent={} - data={getData(7)} - cornerRadius={7} - /> - - - } - dataComponent={} - data={getData(7)} - cornerRadius={7} - /> - - - } - dataComponent={} - data={getMixedData(7)} - barWidth={40} - cornerRadius={20} - /> - - - } - dataComponent={} - data={getMixedData(7)} - barWidth={40} - cornerRadius={20} - /> - - - } - dataComponent={} - data={getMixedData(7)} - barWidth={40} - cornerRadius={{ - topLeft: 5, - topRight: 20, - bottomLeft: 20, - bottomRight: 0, - }} - /> - - - } - dataComponent={} - data={getMixedData(7)} - barWidth={40} - cornerRadius={{ - topLeft: 5, - topRight: 20, - bottomLeft: 20, - bottomRight: 0, - }} - /> - - - } - dataComponent={} - data={[ - { x: 45, y: 6 }, - { x: 90, y: 30 }, - { x: 135, y: 65 }, - { x: 180, y: 50 }, - { x: 270, y: 40 }, - { x: 315, y: 30 }, - ]} - style={{ data: { fill: "tomato", width: 40 } }} - cornerRadius={{ - topRight: 1, - topLeft: 20, - bottomRight: 5, - bottomLeft: 0, - }} - /> - - - - } - dataComponent={} - data={[ - { x: 45, y: 6 }, - { x: 90, y: 30 }, - { x: 135, y: 65 }, - { x: 180, y: 50 }, - { x: 270, y: 40 }, - { x: 315, y: 30 }, - ]} - style={{ data: { fill: "tomato", width: 40 } }} - cornerRadius={{ - topRight: 1, - topLeft: 20, - bottomRight: 5, - bottomLeft: 0, - }} - /> - - - - ); -}; - -export const Data = () => { - return ( - <> - - } - dataComponent={} - data={[ - { animal: "Cat", pet: 45, wild: 17 }, - { animal: "Dog", pet: 85, wild: 6 }, - { animal: "Fish", pet: 55, wild: 0 }, - { animal: "Bird", pet: 15, wild: 40 }, - ]} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - } - dataComponent={} - data={getData(8)} - y0={(d) => d.y - d.x} - /> - - - } - dataComponent={} - data={getData(8)} - y0={(d) => d.y - d.x} - /> - - - } - dataComponent={} - data={[ - { a: { b: { c: 1, d: 1 } } }, - { a: { b: { c: 2, d: 3 } } }, - { a: { b: { c: 3, d: 2 } } }, - ]} - x={"a.b.c"} - y={"a.b.d"} - /> - - - } - dataComponent={} - data={fromJS([ - { x: 1, y: 2, label: "cat" }, - { x: 2, y: 5, label: "dog" }, - { x: 3, y: 3, label: "dog" }, - { x: 4, y: -2, label: "bird" }, - { x: 5, y: -5, label: "cat" }, - ])} - /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - labels={({ datum }) => `x: ${datum.x}`} - /> - - - } - dataComponent={} - data={getData(7)} - labels={["", "", "three", "four", "5", "six"]} - /> - - - } - dataComponent={} - data={[ - { x: 1, y: 2, label: "cat" }, - { x: 2, y: 5, label: "dog" }, - { x: 3, y: 3, label: "dog" }, - { x: 4, y: -2, label: "bird" }, - { x: 5, y: -5, label: "cat" }, - ]} - /> - - - } - dataComponent={} - data={[ - { x: 1, y: 2, label: "cat" }, - { x: 2, y: 5, label: "dog" }, - { x: 3, y: 3, label: "dog" }, - { x: 4, y: 2, label: "bird" }, - { x: 5, y: 5, label: "cat" }, - ]} - /> - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - } - dataComponent={} - data={getData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getMixedData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getMixedData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getData(5)} - labels={["one", "two", "3", "wow, four tooltips", "five"]} - labelComponent={} - /> - - - } - dataComponent={} - data={getData(5)} - style={{ data: { width: 20 } }} - labels={["one", "two", "3", "wow, four tooltips", "five"]} - labelComponent={} - /> - - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Style = () => { - return ( - <> - - } - dataComponent={} - labels={({ datum }) => datum.y} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { - fill: "tomato", - fillOpacity: 0.7, - stroke: "tomato", - strokeWidth: 2, - }, - }} - /> - - - } - dataComponent={} - style={{ - labels: labelStyle, - data: { - stroke: ({ datum }) => (datum.y > 75 ? "red" : "transparent"), - strokeWidth: 3, - opacity: ({ datum }) => (datum.y > 75 ? 1 : 0.4), - }, - }} - labels={({ datum }) => datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const StackedBars = () => { - return ( - <> - - datum._y1.toPrecision(2)}> - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - - } - dataComponent={} - data={getData(7)} - labels={({ datum }) => datum.y.toPrecision(2)} - labelComponent={} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - labels={({ datum }) => datum.y.toPrecision(2)} - labelComponent={} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - labels={({ datum }) => datum.y.toPrecision(2)} - labelComponent={} - /> - - - - datum._y1.toPrecision(2)}> - } - dataComponent={} - data={getData(9)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - - datum._y1.toPrecision(2)}> - } - dataComponent={} - data={getMixedData(7)} - /> - } - dataComponent={} - data={getMixedData(7, "seed-1")} - /> - } - dataComponent={} - data={getMixedData(7, "seed-2")} - /> - - - - datum._y1.toPrecision(2)}> - } - dataComponent={} - data={getMixedData(7)} - /> - } - dataComponent={} - data={getMixedData(7, "seed-1")} - /> - } - dataComponent={} - data={getMixedData(7, "seed-2")} - /> - - - - datum._y1.toPrecision(2)} - labelComponent={} - > - } - dataComponent={} - data={getMixedData(7)} - /> - } - dataComponent={} - data={getMixedData(7, "seed-1")} - /> - } - dataComponent={} - data={getMixedData(7, "seed-2")} - /> - - - - datum._y1.toPrecision(2)} - labelComponent={} - > - } - dataComponent={} - data={getMixedData(7)} - /> - } - dataComponent={} - data={getMixedData(7, "seed-1")} - /> - } - dataComponent={} - data={getMixedData(7, "seed-2")} - /> - - - - - } - dataComponent={} - data={getData(90)} - /> - } - dataComponent={} - data={getData(50, "seed-1")} - /> - } - dataComponent={} - data={getData(200, "seed-2")} - /> - } - dataComponent={} - data={getData(30, "seed-3")} - /> - } - dataComponent={} - data={getData(200, "seed-4")} - /> - } - dataComponent={} - data={getData(100, "seed-5")} - /> - } - dataComponent={} - data={getData(200, "seed-6")} - /> - } - dataComponent={} - data={getData(190, "seed-7")} - /> - - - - - } - dataComponent={} - data={getDataWithBaseline(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - ); -}; - -export const GroupedBars = () => { - return ( - <> - - datum.x}> - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(5)} - /> - } - dataComponent={} - data={getData(3, "seed-1")} - /> - } - dataComponent={} - data={getData(2, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getMixedData(3)} - /> - } - dataComponent={} - data={getMixedData(3, "seed")} - /> - } - dataComponent={} - data={getMixedData(3, "seed-1")} - /> - - - - datum.x}> - } - dataComponent={} - data={getMixedData(3)} - /> - } - dataComponent={} - data={getMixedData(3, "seed")} - /> - } - dataComponent={} - data={getMixedData(3, "seed-1")} - /> - - - - datum.x} - labelComponent={} - > - } - dataComponent={} - data={getMixedData(3)} - /> - } - dataComponent={} - data={getMixedData(3, "seed")} - /> - } - dataComponent={} - data={getMixedData(3, "seed-1")} - /> - - - - datum.x} - labelComponent={} - > - } - dataComponent={} - data={getMixedData(3)} - /> - } - dataComponent={} - data={getMixedData(3, "seed")} - /> - } - dataComponent={} - data={getMixedData(3, "seed-1")} - /> - - - - datum.x} - style={{ data: { width: 15 } }} - > - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-3")} - /> - } - dataComponent={} - data={getData(3, "seed-4")} - /> - - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-5")} - /> - } - dataComponent={} - data={getData(3, "seed-6")} - /> - - - - - datum.x} - style={{ data: { width: 15 } }} - > - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-3")} - /> - } - dataComponent={} - data={getData(3, "seed-4")} - /> - - - } - dataComponent={} - data={getData(3)} - /> - } - dataComponent={} - data={getData(3, "seed-5")} - /> - } - dataComponent={} - data={getData(3, "seed-6")} - /> - - - - - ); -}; -export const PolarBars = () => { - return ( - <> - - } - dataComponent={} - style={{ data: { width: 20 } }} - data={getData(7)} - /> - - - } - dataComponent={} - style={{ data: { stroke: "red", strokeWidth: 2 } }} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - { x: "Frog", y: 75 }, - ]} - /> - - - - } - dataComponent={} - style={{ data: { stroke: "red", strokeWidth: 2 } }} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - { x: "Frog", y: 75 }, - ]} - /> - - - - - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - - - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - - - } - dataComponent={} - data={getData(5)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(5, "seed-2")} - /> - - - - - - } - dataComponent={} - data={getData(5)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(5, "seed-2")} - /> - - - - - - } - dataComponent={} - data={getData(5)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(5, "seed-2")} - /> - - - - - ); -}; diff --git a/stories/canvas-line.stories.tsx b/stories/canvas-line.stories.tsx deleted file mode 100644 index 5c8f56162..000000000 --- a/stories/canvas-line.stories.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import React from "react"; -import { Meta } from "@storybook/react"; - -import { CanvasGroup, CanvasCurve } from "../packages/victory-canvas"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTheme, VictoryLabel } from "../packages/victory-core"; -import { VictoryLine } from "../packages/victory-line"; -import { VictoryStack } from "../packages/victory-stack"; -import { getData, getMixedData } from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/Canvas Container/VictoryLine", - component: VictoryLine, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - } - groupComponent={} - style={parentStyle} - /> - - } - groupComponent={} - /> - - } - groupComponent={} - style={parentStyle} - theme={VictoryTheme.material} - /> - - } - groupComponent={} - /> - - - ); -}; - -export const Theme = () => { - return ( - <> - - datum.x} - dataComponent={} - groupComponent={} - /> - - - datum.x}> - } - groupComponent={} - data={getData(8)} - /> - } - groupComponent={} - data={getData(8, "seed-1")} - /> - } - groupComponent={} - data={getData(8, "seed-2")} - /> - } - groupComponent={} - data={getData(8, "seed-3")} - /> - } - groupComponent={} - data={getData(8, "seed-4")} - /> - - - - } - groupComponent={} - data={getMixedData(8)} - labels={({ datum }) => datum.x} - /> - - - datum.x}> - } - groupComponent={} - data={getData(8)} - /> - } - groupComponent={} - data={getData(8, "seed-1")} - /> - } - groupComponent={} - data={getData(8, "seed-2")} - /> - } - groupComponent={} - data={getData(8, "seed-3")} - /> - } - groupComponent={} - data={getData(8, "seed-4")} - /> - - - - ); -}; - -export const Interpolation = () => { - const makeInterpolationChart = (interpolation) => ( - - - } - groupComponent={} - data={getData(8)} - interpolation={interpolation} - /> - - ); - - return ( - <> - {[ - "basis", - "cardinal", - "catmullRom", - "linear", - "monotoneX", - "monotoneY", - "natural", - "step", - "stepAfter", - "stepBefore", - ].map((interpolation) => makeInterpolationChart(interpolation))} - - ); -}; diff --git a/stories/canvas-scatter.stories.tsx b/stories/canvas-scatter.stories.tsx deleted file mode 100644 index 048cd4c5b..000000000 --- a/stories/canvas-scatter.stories.tsx +++ /dev/null @@ -1,656 +0,0 @@ -import { Meta } from "@storybook/react"; -import { fromJS } from "immutable"; -import React from "react"; - -import { CanvasGroup, CanvasPoint } from "../packages/victory-canvas"; -import { VictoryChart } from "../packages/victory-chart"; -import { - ScatterSymbolType, - VictoryLabelStyleObject, - VictoryTheme, -} from "../packages/victory-core"; -import { VictoryScatter } from "../packages/victory-scatter"; -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { getData, getMixedData } from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/Canvas Container/Scatter", - component: VictoryScatter, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const SYMBOLS: ScatterSymbolType[] = [ - "circle", - "cross", - "diamond", - "plus", - "minus", - "square", - "star", - "triangleDown", - "triangleUp", -]; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - } - dataComponent={} - /> - - } - dataComponent={} - /> - - } - dataComponent={} - style={parentStyle} - theme={VictoryTheme.material} - /> - - } - dataComponent={} - /> - - - ); -}; - -export const Theme = () => { - return ( - <> - - datum.x} - groupComponent={} - dataComponent={} - /> - - - datum.x}> - } - dataComponent={} - data={getData(8)} - /> - } - dataComponent={} - data={getData(8, "seed-1")} - /> - } - dataComponent={} - data={getData(8, "seed-2")} - /> - } - dataComponent={} - data={getData(8, "seed-3")} - /> - } - dataComponent={} - data={getData(8, "seed-4")} - /> - - - - } - dataComponent={} - data={getMixedData(8)} - labels={({ datum }) => datum.x} - /> - - - datum.x}> - } - dataComponent={} - data={getData(8)} - /> - } - dataComponent={} - data={getData(8, "seed-1")} - /> - } - dataComponent={} - data={getData(8, "seed-2")} - /> - } - dataComponent={} - data={getData(8, "seed-3")} - /> - } - dataComponent={} - data={getData(8, "seed-4")} - /> - - - - ); -}; - -export const Symbols = () => { - return SYMBOLS.map((symbol) => ( -
- - } - dataComponent={} - data={getMixedData(8)} - symbol={symbol} - size={10} - labels={() => symbol} - /> - - - } - dataComponent={} - data={getMixedData(8)} - symbol={symbol} - size={10} - labels={() => symbol} - /> - -
- )); -}; - -export const FunctionalSymbols = () => { - return ( - <> - - } - dataComponent={} - data={getMixedData(8)} - symbol={({ index }) => SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - } - dataComponent={} - data={getMixedData(8)} - symbol={({ index }) => SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - } - dataComponent={} - data={[ - { x: 1, y: 45, symbol: "star" }, - { x: 2, y: 85 }, - { x: 3, y: 55, symbol: "square" }, - { x: 4, y: 15 }, - ]} - symbol="plus" - size={8} - /> - - - } - dataComponent={} - data={getData(8)} - symbol={({ index }) => SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - ); -}; - -export const BubbleCharts = () => { - return ( - <> - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - maxBubbleSize={25} - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - minBubbleSize={10} - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - minBubbleSize={8} - maxBubbleSize={20} - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - maxBubbleSize={25} - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - size={3} - /> - - - } - dataComponent={} - data={getData(10)} - bubbleProperty="x" - symbol="plus" - /> - - - ); -}; - -export const DataAccessors = () => { - return ( - <> - - } - dataComponent={} - data={[ - { animal: "Cat", pet: 45, wild: 17 }, - { animal: "Dog", pet: 85, wild: 6 }, - { animal: "Fish", pet: 55, wild: 0 }, - { animal: "Bird", pet: 15, wild: 40 }, - { animal: "Monkey", pet: 5, wild: 40 }, - ]} - labels={({ datum }) => datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - } - dataComponent={} - data={[ - { animal: "Cat", pet: 45, wild: 17 }, - { animal: "Dog", pet: 85, wild: 6 }, - { animal: "Fish", pet: 55, wild: 0 }, - { animal: "Bird", pet: 15, wild: 40 }, - { animal: "Monkey", pet: 5, wild: 40 }, - ]} - labels={({ datum }) => datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - } - dataComponent={} - data={[ - { animal: "Cat", pet: 45, wild: 17 }, - { animal: "Dog", pet: 85, wild: 6 }, - { animal: "Fish", pet: 55, wild: 0 }, - { animal: "Bird", pet: 15, wild: 40 }, - { animal: "Monkey", pet: 5, wild: 40 }, - ]} - labels={({ datum }) => datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - } - dataComponent={} - data={getData(8)} - /> - - - } - dataComponent={} - data={[ - { a: { b: { c: 1, d: 1 } } }, - { a: { b: { c: 2, d: 3 } } }, - { a: { b: { c: 3, d: 2 } } }, - ]} - x={"a.b.c"} - y={"a.b.d"} - /> - - - } - dataComponent={} - data={fromJS([ - { x: "Cat", y: 45, y0: 17 }, - { x: "Dog", y: 85, y0: 6 }, - { x: "Fish", y: 55, y0: 9 }, - { x: "Bird", y: 15, y0: 4 }, - ])} - /> - - - } - dataComponent={} - y={(d) => Math.sin(2 * Math.PI * d.x)} - /> - - - } - dataComponent={} - y={(d) => Math.sin(2 * Math.PI * d.x)} - /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - labels={({ datum }) => `x: ${datum.x}`} - /> - - - } - dataComponent={} - data={getData(7)} - labels={["", "", "three", "four", "5", "six"]} - /> - - - } - dataComponent={} - data={[ - { x: 1, y: 2, label: "cat" }, - { x: 2, y: 5, label: "dog" }, - { x: 3, y: 3, label: "dog" }, - { x: 4, y: -2, label: "bird" }, - { x: 5, y: -5, label: "cat" }, - ]} - /> - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - } - dataComponent={} - data={getData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getMixedData(5)} - labels={({ datum }) => `x: ${datum.x}`} - labelComponent={} - /> - - - } - dataComponent={} - data={getData(5)} - labels={["one", "two", "3", "wow, four tooltips", "five"]} - labelComponent={} - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Styles = () => { - return ( - <> - - } - dataComponent={} - data={getData(7)} - labels={({ datum }) => datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { fill: "tomato" }, - }} - /> - - - } - dataComponent={} - style={{ - labels: labelStyle, - data: { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), - }, - }} - labels={({ datum }) => datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const Stacked = () => { - return ( - <> - - datum.x}> - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(9)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(9)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(7)} - /> - } - dataComponent={} - data={getData(7, "seed-1")} - /> - } - dataComponent={} - data={getData(7, "seed-2")} - /> - - - - datum.x}> - } - dataComponent={} - data={getData(9)} - /> - } - dataComponent={} - data={getData(5, "seed-1")} - /> - } - dataComponent={} - data={getData(3, "seed-2")} - /> - - - - ); -}; diff --git a/stories/data.ts b/stories/data.ts deleted file mode 100644 index 0c5e749c7..000000000 --- a/stories/data.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { range } from "lodash"; -import seedrandom from "seedrandom"; - -const getTimeData = (num: number, seed = "getData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10; - const current = 1523389495000; - return range(num).map((v) => { - return { - x: new Date((current / num) * (v + 1)), - y: rand(), - }; - }); -}; - -const getData = (num: number, seed = "getData", max = 10) => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * max; - return range(num).map((v) => ({ x: v + 1, y: rand() })); -}; - -const getDataWithBaseline = (num: number, seed = "getData", max = 10) => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * max; - return range(num).map((v) => ({ x: v + 1, y: rand(), y0: rand() })); -}; - -const getDescendingSmallData = () => { - return [ - { x: 1, y: 2 }, - { x: 2, y: 1 }, - { x: 3, y: 0.5 }, - { x: 4, y: 0.2 }, - { x: 5, y: 0.1 }, - { x: 6, y: -0.1 }, - { x: 7, y: -0.2 }, - { x: 8, y: -0.5 }, - { x: 9, y: -1 }, - { x: 10, y: -2 }, - ]; -}; - -const getStringData = (num: number, seed = "getData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10; - return range(num).map((v) => ({ x: `#${v + 1}`, y: rand() })); -}; - -const getLogData = (num: number, seed = "getData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 100000; - return range(num).map((v) => ({ x: v + 1, y: rand() })); -}; - -const getMixedData = (num: number, seed = "getMixedData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10 - 5; - return range(num).map((v) => ({ x: v + 1, y: rand() })); -}; - -const getFourQuadrantData = (num: number, seed = "getMixedData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10 - 5; - return range(num).map((v) => ({ x: v - Math.round(num / 2), y: rand() })); -}; - -const getArrayData = (num: number, samples = 10) => { - const seed = "getData"; - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10; - return range(num).map((v) => { - return { - x: v + 1, - y: range(samples).map(() => rand()), - }; - }); -}; - -const getStackedData = (num: number, samples, useStrings) => { - return range(num).map(() => { - return useStrings ? getStringData(samples) : getData(samples); - }); -}; - -export { - getData, - getDataWithBaseline, - getStringData, - getMixedData, - getTimeData, - getLogData, - getFourQuadrantData, - getArrayData, - getStackedData, - getDescendingSmallData, -}; diff --git a/stories/decorators.tsx b/stories/decorators.tsx deleted file mode 100644 index 2417838b9..000000000 --- a/stories/decorators.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -export const storyContainer = (story: any) => ( -
{story()}
-); diff --git a/stories/utils/arg-types.tsx b/stories/utils/arg-types.tsx new file mode 100644 index 000000000..36299c136 --- /dev/null +++ b/stories/utils/arg-types.tsx @@ -0,0 +1,131 @@ +import React from "react"; + +import { VictoryLabel, VictoryTheme, VictoryTooltip } from "@/victory"; + +export const VictoryAxisCommonProps = { + dependentAxis: { control: "boolean" }, + invertAxis: { control: "boolean" }, + tickCount: { control: "number" }, + + // 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" }, + colorScale: { + control: "select", + options: [ + "greyscale", + "qualitative", + "heatmap", + "warm", + "cool", + "red", + "green", + "blue", + ], + }, + disableInlineStyles: { control: "boolean" }, + height: { control: "number" }, + horizontal: { control: "boolean" }, + name: { control: "text" }, + padding: { control: "text" }, + polar: { control: "boolean" }, + standalone: { control: "boolean" }, + width: { control: "number" }, + + // 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" }, + "aria-labelledby": { control: "text" }, + className: { control: "text" }, + containerId: { control: "text" }, + desc: { control: "text" }, + height: { control: "number" }, + name: { control: "text" }, + ouiaId: { control: "text" }, + ouiaSafe: { control: "boolean" }, + ouiaType: { control: "text" }, + polar: { control: "boolean" }, + portalZIndex: { control: "number" }, + preserveAspectRatio: { control: "text" }, + responsive: { control: "boolean" }, + role: { control: "text" }, + tabIndex: { control: "number" }, + title: { control: "text" }, + width: { control: "number" }, +} as const; + +export const VictoryDatableProps = { + data: { control: "object" }, + samples: { control: "number" }, + sortKey: { control: "text" }, + sortOrder: { control: "select", options: ["ascending", "descending"] }, + + // 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 = { + 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/utils/data.ts b/stories/utils/data.ts new file mode 100644 index 000000000..3c5ac7f85 --- /dev/null +++ b/stories/utils/data.ts @@ -0,0 +1,177 @@ +import { range } from "lodash"; +import seedrandom from "seedrandom"; + +export const getArrayData = (num: number, samples = 10) => { + const seed = "getData"; + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10; + return range(num).map((v) => { + return { + x: v + 1, + y: range(samples).map(() => rand()), + }; + }); +}; + +export const getBoxPlotData = (num, seed = "getData") => { + const baseSeed = seedrandom(seed); + const rand = () => Math.round(1 + baseSeed.quick() * 5); + return range(num).map((v) => { + const min = rand(); + const q1 = min + rand(); + const median = q1 + rand(); + const q3 = median + rand(); + const max = q3 + rand(); + return { x: v + 1, y: v + 1, min, q1, median, q3, max }; + }); +}; + +export const getBoxPlotRepeatData = (num, samples = 10) => { + const seed = "getRepeatData"; + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10; + return range(num).reduce((memo, curr) => { + const sampleData = range(samples).map(() => ({ + x: curr + 1, + y: rand(), + })); + return memo.concat(sampleData); + }, [] as any); +}; + +export const getCandlestickData = (num, seed = "getData") => { + const baseSeed = seedrandom(seed); + return range(num).map((v) => { + const low = 2 + baseSeed.quick() * 5; + const open = low + baseSeed.quick() * 5; + const close = low + baseSeed.quick() * 5; + const high = Math.max(open, close) + baseSeed.quick() * 5; + return { x: v + 1, high, low, open, close }; + }); +}; + +export const getCandlestickTimeData = (num, seed = "getTimeData") => { + const baseSeed = seedrandom(seed); + const current = 1523389495000; + return range(num).map((v) => { + const low = 2 + baseSeed.quick() * 5; + const open = low + baseSeed.quick() * 5; + const close = low + baseSeed.quick() * 5; + const high = Math.max(open, close) + baseSeed.quick() * 5; + return { + x: new Date((current / num) * (v + 1)), + high, + low, + open, + close, + }; + }); +}; + +export const getData = (num: number, seed = "getData", max = 10) => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * max; + return range(num).map((v) => ({ x: v + 1, y: rand() })); +}; + +export const getDataWithBaseline = ( + num: number, + seed = "getData", + max = 10, +) => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * max; + return range(num).map((v) => ({ x: v + 1, y: rand(), y0: rand() })); +}; + +export const getDescendingSmallData = () => { + return [ + { x: 1, y: 2 }, + { x: 2, y: 1 }, + { x: 3, y: 0.5 }, + { x: 4, y: 0.2 }, + { x: 5, y: 0.1 }, + { x: 6, y: -0.1 }, + { x: 7, y: -0.2 }, + { x: 8, y: -0.5 }, + { x: 9, y: -1 }, + { x: 10, y: -2 }, + ]; +}; + +export const getErrorBarData = ( + num: number, + symmetric = false, + seed = "getData", +) => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 3; + return range(num).map((v) => { + return { + x: v + 3, + y: baseSeed.quick() * 20 + 5, + errorX: symmetric ? rand() : [rand(), rand()], + errorY: symmetric ? rand() : [rand(), rand()], + }; + }); +}; + +export const getFourQuadrantData = (num: number, seed = "getMixedData") => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10 - 5; + return range(num).map((v) => ({ x: v - Math.round(num / 2), y: rand() })); +}; + +export const getLogData = (num: number, seed = "getData") => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 100000; + return range(num).map((v) => ({ x: v + 1, y: rand() })); +}; + +export const getMixedData = (num: number, seed = "getMixedData") => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10 - 5; + return range(num).map((v) => ({ x: v + 1, y: rand() })); +}; + +export const getRandomValues = (num, seed = "random") => { + const baseSeed = seedrandom(seed); + const rand = () => Math.round(baseSeed.quick() * 100); + const result = range(num).map(() => rand()); + return result.sort((a, b) => a - b); +}; + +export const getStackedData = (num: number, samples, useStrings) => { + return range(num).map(() => { + return useStrings ? getStringData(samples) : getData(samples); + }); +}; + +export const getStringData = (num: number, seed = "getData") => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10; + return range(num).map((v) => ({ x: `#${v + 1}`, y: rand() })); +}; + +export const getTimeData = (num: number, seed = "getData") => { + const baseSeed = seedrandom(seed); + const rand = () => baseSeed.quick() * 10; + const current = 1523389495000; + return range(num).map((v) => { + return { + x: new Date((current / num) * (v + 1)), + y: rand(), + }; + }); +}; + +export const getTimeValues = (num) => { + const current = 1523389495000; + return range(num).map((v) => { + return new Date((current / num) * (v + 1)); + }); +}; + +export const getValues = (num, min = 0, step = 1) => { + return range(num).map((v) => v * step + min); +}; diff --git a/stories/utils/decorators.tsx b/stories/utils/decorators.tsx new file mode 100644 index 000000000..4270656d2 --- /dev/null +++ b/stories/utils/decorators.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const containerStyle: React.CSSProperties = { + display: "grid", + gridTemplateColumns: "repeat(2, 1fr)", + gridColumnGap: "1rem", + gridRowGap: "1rem", +}; + +export const componentContainer = (story: any) => ( +
{story()}
+); diff --git a/stories/victory-animation.stories.tsx b/stories/victory-animation.stories.tsx deleted file mode 100644 index 447eda8db..000000000 --- a/stories/victory-animation.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Meta } from "@storybook/react"; -import React, { useEffect } from "react"; - -import { VictoryPie } from "../packages/victory-pie"; -import { VictoryAnimation, VictoryLabel } from "../packages/victory-core"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryAnimation", - component: VictoryAnimation, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const ANIMATION_DATA = [ - [ - { x: 1, y: 0 }, - { x: 2, y: 100 }, - ], - [ - { x: 1, y: 25 }, - { x: 2, y: 75 }, - ], - [ - { x: 1, y: 50 }, - { x: 2, y: 50 }, - ], - [ - { x: 1, y: 75 }, - { x: 2, y: 25 }, - ], - [ - { x: 1, y: 100 }, - { x: 2, y: 0 }, - ], -]; - -const AnimationDemo = () => { - const [data, setData] = React.useState(ANIMATION_DATA[0]); - const [percent, setPercent] = React.useState(0); - - useEffect(() => { - const interval = setInterval(() => { - const nextIndex = - (ANIMATION_DATA.indexOf(data) + 1) % ANIMATION_DATA.length; - setData(ANIMATION_DATA[nextIndex]); - setPercent(ANIMATION_DATA[nextIndex][0].y); - }, 2000); - - // clean up interval on unmount - return () => clearInterval(interval); - }, [percent]); - - return ( -
- - null} - style={{ - data: { - fill: ({ datum }) => { - const color = datum.y > 30 ? "green" : "red"; - return datum.x === 1 ? color : "transparent"; - }, - }, - }} - /> - - {(newProps) => { - return ( - - ); - }} - - -
- ); -}; - -export const DefaultRendering = () => { - return ; -}; diff --git a/stories/victory-area.stories.tsx b/stories/victory-area.stories.tsx deleted file mode 100644 index 30c0c7529..000000000 --- a/stories/victory-area.stories.tsx +++ /dev/null @@ -1,555 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; -import { fromJS } from "immutable"; -import styled from "styled-components"; - -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryArea, Area } from "../packages/victory-area"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryTheme, - VictoryLabel, - VictoryLabelStyleObject, -} from "../packages/victory-core"; -import { VictoryChart } from "../packages/victory-chart"; -import { - getData, - getMixedData, - getTimeData, - getLogData, - getDataWithBaseline, -} from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryArea", - component: VictoryArea, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - ); -}; -export const Theme = () => { - return ( - <> - - - - - datum.x}> - - - - - - - - - - - - datum.x}> - - - - - - - - - ); -}; -export const Interpolation = () => { - const makeInterpolationChart = (interpolation) => ( - - - - - ); - - return ( - <> - {[ - "basis", - "cardinal", - "catmullRom", - "linear", - "monotoneX", - "monotoneY", - "natural", - "step", - "stepAfter", - "stepBefore", - ].map((interpolation) => makeInterpolationChart(interpolation))} - - ); -}; -export const PolarInterpolation = () => { - const makeInterpolationChart = (interpolation) => ( - - - - - ); - - return ( - <> - {["basis", "cardinal", "catmullRom", "linear"].map((interpolation) => - makeInterpolationChart(interpolation), - )} - - ); -}; - -export const DataAccessors = () => { - return ( - <> - - data.pet + data.wild} - /> - - - data.pet + data.wild} - /> - - - data.pet + data.wild} - /> - - - d.y - 1} /> - - - d.y - 1} /> - - - d.y - 1} /> - - - - - - - - - ); -}; - -export const PlottingFunctions = () => { - return ( - <> - - Math.sin(2 * Math.PI * d.x)} /> - - - Math.sin(2 * Math.PI * d.x)} /> - - - - Math.sin(2 * Math.PI * d.x)} - y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} - /> - - - Math.sin(2 * Math.PI * d.x)} - y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} - /> - - - Math.sin(Math.PI * d.x)} /> - - - Math.sin(Math.PI * d.x)} - y0={(d) => Math.sin(Math.PI * d.x) - 0.5} - /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - - - - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - } - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Styles = () => { - return ( - <> - - datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { - fill: "tomato", - fillOpacity: 0.7, - stroke: "tomato", - strokeWidth: 2, - }, - }} - /> - - - datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const Stacked = () => { - return ( - <> - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - - - - - - - - ); -}; -export const TimeScale = () => { - return ( - <> - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - ); -}; - -export const LogScale = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - `x: ${datum.x}`} - /> - - - - - - ); -}; - -export const Polar = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -const StyledArea = styled(Area)` - fill: pink; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - } - /> - - ); -}; - -export const Events = () => { - return ( -
-

Click Me

- - { - return [ - { - eventKey: "all", - target: "data", - mutation: (props) => { - const fill = props.style && props.style.fill; - return fill === "black" - ? null - : { style: { fill: "black" } }; - }, - }, - ]; - }, - }, - }, - ]} - data={getData(5)} - /> - -
- ); -}; diff --git a/stories/victory-axis.stories.tsx b/stories/victory-axis.stories.tsx deleted file mode 100644 index 3cce4946e..000000000 --- a/stories/victory-axis.stories.tsx +++ /dev/null @@ -1,419 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; -import { range } from "lodash"; -import seedrandom from "seedrandom"; - -import { VictoryAxis } from "../packages/victory-axis"; -import { VictoryBar } from "../packages/victory-bar"; -import { VictoryBrushLine } from "../packages/victory-brush-line"; -import { VictoryScatter } from "../packages/victory-scatter"; -import { VictoryTheme } from "../packages/victory-core"; -import { VictoryChart } from "../packages/victory-chart"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryAxis", - component: VictoryAxis, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -const getTimeValues = (num) => { - const current = 1523389495000; - return range(num).map((v) => { - return new Date((current / num) * (v + 1)); - }); -}; - -const getValues = (num, min = 0, step = 1) => { - return range(num).map((v) => v * step + min); -}; - -const getRandomValues = (num, seed = "random") => { - const baseSeed = seedrandom(seed); - const rand = () => Math.round(baseSeed.quick() * 100); - const result = range(num).map(() => rand()); - return result.sort((a, b) => a - b); -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - ); -}; - -export const AxisValue = () => { - return ( - <> - - - - - - - - - - t.getFullYear()} - /> - - - - - - - - - ); -}; - -export const TickValues = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const TickFormat = () => { - return ( - <> - - - - - `#${t}`} /> - - - ); -}; - -export const WithDomain = () => { - return ( - <> - - - - - - - - - - - - - - - - ); -}; - -export const FixLabelOverlap = () => { - return ( - <> - - - - - - - - ); -}; - -export const Offsets = () => { - return ( - <> - - - - ); -}; - -export const Orientation = () => { - return ( - <> - - - - - - - - - - - - - - - - - - ); -}; - -export const Style = () => { - return ( - <> - - (tick > 0.5 ? "red" : "grey") }, - ticks: { stroke: "grey", size: 5 }, - tickLabels: { fontSize: 15, padding: 5 }, - }} - /> - - - ); -}; - -export const WithMultilineLabels = () => { - return ( - <> - - (tick >= 0 ? tick : `minus\n${-tick}`)} - /> - - - (tick >= 0 ? tick : `minus\n${-tick}`)} - orientation="top" - /> - - - ); -}; - -export const BrushAxis = () => { - return ( - <> - } /> - - ); -}; - -export const BrushAxisWithDomain = () => { - return ( - <> - } - /> - - ); -}; - -export const BrushAxisGridLine = () => { - return ( - <> - } /> - - ); -}; - -export const BrushAxisGridLineWithDomain = () => { - return ( - <> - } - /> - - ); -}; - -export const BrushAxisGridLineStyles = () => { - return ( - <> - - } - /> - - ); -}; - -export const BrushAxisGridLineWidth = () => { - return ( - <> - - } - /> - - ); -}; diff --git a/stories/victory-bar.stories.tsx b/stories/victory-bar.stories.tsx deleted file mode 100644 index 68bbf6c49..000000000 --- a/stories/victory-bar.stories.tsx +++ /dev/null @@ -1,1068 +0,0 @@ -import { Meta } from "@storybook/react"; -import React, { useRef, useEffect, useCallback } from "react"; -import { fromJS } from "immutable"; -import styled from "styled-components"; - -import { VictoryBar, Bar } from "../packages/victory-bar"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryGroup } from "../packages/victory-group"; -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryTheme, - VictoryLabel, - VictoryLabelStyleObject, -} from "../packages/victory-core"; -import { VictoryPolarAxis } from "../packages/victory-polar-axis"; -import { - getData, - getStackedData, - getMixedData, - getTimeData, - getLogData, - getDataWithBaseline, -} from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryBar", - component: VictoryBar, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - ); -}; - -export const Theme = () => { - return ( - <> - - - - - datum.x}> - - - - - - - - - - - - datum.x}> - - - - - - - - - ); -}; - -export const Alignment = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const BarRatio = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const BarWidth = () => { - return ( - <> - - - - - - - - - - - datum.x * 4} /> - - - ); -}; - -export const CornerRadius = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const GetPath = () => { - const verticalPathFn = (props) => { - const { x0, x1, y0, y1 } = props; - return `M ${x0}, ${y0} - L ${(x1 + x0) / 2}, ${y1} - L ${x1}, ${y0} - z`; - }; - - const horizontalPathFn = (props) => { - const { x0, x1, y0, y1 } = props; - return `M ${x0}, ${y1} - L ${x1}, ${(y0 + y1) / 2} - L ${x0}, ${y0} - z`; - }; - - return ( - <> - - - - - - - - ); -}; - -export const Data = () => { - return ( - <> - - data.pet + data.wild} - /> - - - d.y - d.x} /> - - - d.y - d.x} /> - - - d.y - d.x} /> - - - - - - - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} /> - - - - - - - - - - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - } - /> - - - } - /> - - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Style = () => { - return ( - <> - - datum.y} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { - fill: "tomato", - fillOpacity: 0.7, - stroke: "tomato", - strokeWidth: 2, - }, - }} - /> - - - (datum.y > 75 ? "red" : "transparent"), - strokeWidth: 3, - opacity: ({ datum }) => (datum.y > 75 ? 1 : 0.4), - }, - }} - labels={({ datum }) => datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const Scale = () => { - return ( - <> - - datum.y.toPrecision(1)} - /> - - - datum.y.toPrecision(1)} - /> - - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - ); -}; - -export const StackedBars = () => { - return ( - <> - - datum._y1.toPrecision(2)}> - - - - - - - - datum.y.toPrecision(2)} - labelComponent={} - /> - datum.y.toPrecision(2)} - labelComponent={} - /> - datum.y.toPrecision(2)} - labelComponent={} - /> - - - - datum._y1.toPrecision(2)}> - - - - - - - datum._y1.toPrecision(2)}> - - - - - - - datum._y1.toPrecision(2)}> - - - - - - - datum._y1.toPrecision(2)} - labelComponent={} - > - - - - - - - datum._y1.toPrecision(2)} - labelComponent={} - > - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const GroupedBars = () => { - return ( - <> - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x} - labelComponent={} - > - - - - - - - datum.x} - labelComponent={} - > - - - - - - - datum.x} - style={{ data: { width: 15 } }} - > - - - - - - - - - - - - - - - - - - - datum.x} - style={{ data: { width: 15 } }} - > - - - - - - - - - - - - - - - - - - - datum.x} - labelComponent={} - > - - - - - - - - - - - - - - - - - - - datum.x} - labelComponent={} - > - - - - - - - - - - - - - - - - - - - ); -}; - -export const PolarBars = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const Sorting = () => { - return ( - <> - - - - - - - - - - - - - - ); -}; - -export const Regressions = () => { - return ( - <> - - - - {getStackedData(5, 3, "useStrings").map((data, index) => { - return ; - })} - - - {getStackedData(5, 3, "useStrings").map((data, index) => { - return ; - })} - - - {getStackedData(5, 3, "useStrings").map((data, index) => { - return ; - })} - - - - - datum.x} - > - - - - - - - - - - - - - - - - - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - ); -}; - -const StyledBar = styled(Bar)` - fill: purple; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } /> - - - ); -}; - -export const FocusWithRefs = () => { - const barsRef = useRef(new Map()); - - const focusOnBar = (id) => { - const map = barsRef.current; - const node = map.get(id); - node.focus(); - }; - - useEffect(() => { - if (barsRef.current) { - focusOnBar("1"); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const setRef = useCallback((node) => { - const map = barsRef.current; - if (node) { - map.set(node.attributes.index.value, node); - } - }, []); - - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - dataComponent={} - /> - - - ); -}; diff --git a/stories/victory-box-plot.stories.tsx b/stories/victory-box-plot.stories.tsx deleted file mode 100644 index 921728034..000000000 --- a/stories/victory-box-plot.stories.tsx +++ /dev/null @@ -1,389 +0,0 @@ -import styled from "styled-components"; -import { Meta } from "@storybook/react"; -import React from "react"; -import { range } from "lodash"; -import seedrandom from "seedrandom"; - -import { VictoryBoxPlot } from "../packages/victory-box-plot"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryGroup } from "../packages/victory-group"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryTheme, - Box, - Whisker, - LineSegment, -} from "../packages/victory-core"; -import { getArrayData } from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryBoxPlot", - component: VictoryBoxPlot, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const getRepeatData = (num, samples = 10) => { - const seed = "getRepeatData"; - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 10; - return range(num).reduce((memo, curr) => { - const sampleData = range(samples).map(() => ({ - x: curr + 1, - y: rand(), - })); - return memo.concat(sampleData); - }, [] as any); -}; - -const getData = (num, seed = "getData") => { - const baseSeed = seedrandom(seed); - const rand = () => Math.round(1 + baseSeed.quick() * 5); - return range(num).map((v) => { - const min = rand(); - const q1 = min + rand(); - const median = q1 + rand(); - const q3 = median + rand(); - const max = q3 + rand(); - return { x: v + 1, y: v + 1, min, q1, median, q3, max }; - }); -}; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - domainPadding: 25, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const BoxWidth = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - ); -}; - -export const WhiskerWidth = () => { - return ( - <> - - - - - - - - - - - - - - ); -}; - -export const Data = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - ); -}; - -export const Labels = () => { - return ( - <> - - - - - - - - - - - - - - `min: ${datum.min}`} - maxLabels={({ datum }) => `max: ${datum.max}`} - medianLabels={({ datum }) => `med: ${datum.median}`} - /> - - - `q1: ${datum.q1}`} - q3Labels={({ datum }) => `q3: ${datum.q3}`} - /> - - - - - - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - } - q3LabelComponent={} - labelOrientation={{ - q1: "left", - q3: "left", - min: "right", - max: "right", - median: "right", - }} - /> - - - } - q3LabelComponent={} - labelOrientation={{ - q1: "top", - q3: "top", - min: "bottom", - max: "bottom", - median: "bottom", - }} - /> - - - ); -}; - -export const Style = () => { - return ( - <> - - - - - (datum.q1 < 10 ? 1 : 0.5), - }, - q3: { - fill: "#2bbee0", - fillOpacity: ({ datum }) => (datum.q3 > 15 ? 1 : 0.5), - }, - median: { stroke: "#fff", strokeWidth: 2 }, - minLabels: { fill: "#FF530D", padding: 10 }, - maxLabels: { fill: "#2bbee0", padding: 10 }, - }} - /> - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - ); -}; - -const StyledBox = styled(Box)` - fill: blueviolet; -`; - -const StyledWhisker = styled(Whisker)` - stroke: aqua; -`; - -const StyledLineSegment = styled(LineSegment)` - stroke: lavender; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } - q3Component={} - maxComponent={} - minComponent={} - medianComponent={} - /> - - - ); -}; - -export const VictoryGroupAsParent = () => { - return ( - - - - ); -}; diff --git a/stories/victory-candlestick.stories.tsx b/stories/victory-candlestick.stories.tsx deleted file mode 100644 index a98b0c39b..000000000 --- a/stories/victory-candlestick.stories.tsx +++ /dev/null @@ -1,409 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; -import { range } from "lodash"; -import seedrandom from "seedrandom"; -import { fromJS } from "immutable"; -import styled from "styled-components"; - -import { VictoryCandlestick, Candle } from "../packages/victory-candlestick"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryLabelStyleObject, - VictoryTheme, -} from "../packages/victory-core"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryCandlestick", - component: VictoryCandlestick, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const sampleData = [ - { x: 1, open: 9, close: 30, high: 56, low: 7 }, - { x: 2, open: 80, close: 40, high: 120, low: 10 }, - { x: 3, open: 50, close: 80, high: 90, low: 20 }, - { x: 4, open: 70, close: 22, high: 70, low: 5 }, -]; -const getTimeData = (num, seed = "getTimeData") => { - const baseSeed = seedrandom(seed); - const current = 1523389495000; - return range(num).map((v) => { - const low = 2 + baseSeed.quick() * 5; - const open = low + baseSeed.quick() * 5; - const close = low + baseSeed.quick() * 5; - const high = Math.max(open, close) + baseSeed.quick() * 5; - return { - x: new Date((current / num) * (v + 1)), - high, - low, - open, - close, - }; - }); -}; - -const getData = (num, seed = "getData") => { - const baseSeed = seedrandom(seed); - return range(num).map((v) => { - const low = 2 + baseSeed.quick() * 5; - const open = low + baseSeed.quick() * 5; - const close = low + baseSeed.quick() * 5; - const high = Math.max(open, close) + baseSeed.quick() * 5; - return { x: v + 1, high, low, open, close }; - }); -}; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - domainPadding: 25, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const CandleColors = () => { - return ( - <> - - - - - - - - ); -}; - -export const WickStrokeWidth = () => { - return ( - <> - - - - - - - - ); -}; - -export const Data = () => { - return ( - <> - - data.big / 10} - /> - - - data.big / 10} - /> - - - - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - `x: ${datum.x}`} - /> - - - datum.open} - closeLabels={({ datum }) => datum.close} - /> - - - datum.open} - closeLabels={({ datum }) => datum.close} - labelOrientation={{ open: "top", close: "bottom" }} - /> - - - datum.high} - lowLabels={({ datum }) => datum.low} - /> - - - datum.high} - lowLabels={({ datum }) => datum.low} - labelOrientation={{ low: "left", high: "right" }} - /> - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - datum.open} - closeLabels={({ datum }) => datum.close} - openLabelComponent={} - closeLabelComponent={} - /> - - - datum.open} - closeLabels={({ datum }) => datum.close} - openLabelComponent={} - closeLabelComponent={} - labelOrientation={{ open: "top", close: "bottom" }} - /> - - - datum.high} - lowLabels={({ datum }) => datum.low} - highLabelComponent={} - lowLabelComponent={} - /> - - - datum.high} - lowLabels={({ datum }) => datum.low} - highLabelComponent={} - lowLabelComponent={} - labelOrientation={{ low: "left", high: "right" }} - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === 3 ? "red" : "black"), -}; - -export const Style = () => { - return ( - <> - - datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { - fill: "tomato", - fillOpacity: 0.7, - stroke: "tomato", - strokeWidth: 2, - }, - }} - /> - - - - datum.open > datum.close ? "red" : "black", - }, - }} - labels={({ datum }) => datum.x} - data={getData(7)} - /> - - - ); -}; - -export const Scale = () => { - return ( - <> - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()} - /> - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - ); -}; - -const StyledCandle = styled(Candle)` - fill: lightblue; - stroke: magenta; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } - /> - - - ); -}; diff --git a/stories/victory-chart.stories.tsx b/stories/victory-chart.stories.tsx deleted file mode 100644 index 7a1871666..000000000 --- a/stories/victory-chart.stories.tsx +++ /dev/null @@ -1,622 +0,0 @@ -import React from "react"; - -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryAxis } from "../packages/victory-axis"; -import { VictoryBar } from "../packages/victory-bar"; -import { VictoryBrushContainer } from "../packages/victory-brush-container"; -import { VictoryCursorContainer } from "../packages/victory-cursor-container"; -import { VictoryGroup } from "../packages/victory-group"; -import { VictoryScatter } from "../packages/victory-scatter"; -import { VictoryLine } from "../packages/victory-line"; -import { VictoryBoxPlot } from "../packages/victory-box-plot"; -import { VictoryPolarAxis } from "../packages/victory-polar-axis"; -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryTheme } from "../packages/victory-core"; -import { VictoryZoomContainer } from "../packages/victory-zoom-container"; - -import { getData, getFourQuadrantData, getArrayData } from "./data"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryChart", - component: VictoryChart, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const dependentAxisTheme = { - ...VictoryTheme.material, - ...{ dependentAxis: { orientation: "right" } }, -}; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const Axes = () => { - return ( - <> - - - - - - - - - - - - - - - - - ); -}; - -export const DomainPadding = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const DomainFromData = () => { - return ( - <> - - - - 10 * Math.sin(13 * Math.PI * d.x)} - /> - - - - - 10 * Math.sin(13 * Math.PI * d.x)} - /> - - - - - - Math.sin(Math.PI * d.x)} /> - - - - - - Math.sin(Math.PI * d.x)} /> - - - - - - - - - - - - 5 + 3 * Math.sin(Math.PI * d.x)} /> - - - - 5 + 3 * Math.sin(Math.PI * d.x)} /> - - - ); -}; - -export const Style = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const Orientations = () => { - return ( - <> - - - - - - - - ); -}; - -export const VictoryBrushContainerDefault = () => { - return ( - <> - } - /> - - ); -}; - -export const VictoryBrushContainerWithDomain = () => { - return ( - <> - - } - /> - - ); -}; - -export const VictoryBrushContainerWithDomainHorizontal = () => { - return ( - <> - - } - /> - - ); -}; - -export const VictoryBrushContainerWithBrushStyle = () => { - return ( - <> - - } - /> - - ); -}; - -export const VictoryCursorContainerDefault = () => { - return ( - <> - datum.x} - defaultCursorValue={{ x: 0.25, y: 0.75 }} - /> - } - /> - - ); -}; - -export const VictoryCursorContainerHorizontal = () => { - return ( - <> - datum.x} - defaultCursorValue={{ x: 0.25, y: 0.75 }} - /> - } - /> - - ); -}; - -export const VictoryZoomContainerDefault = () => { - return ( - <> - - } - > - - - - ); -}; diff --git a/stories/victory-charts/victory-animation/config.ts b/stories/victory-charts/victory-animation/config.ts new file mode 100644 index 000000000..0d02ddd61 --- /dev/null +++ b/stories/victory-charts/victory-animation/config.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryAnimation } from "@/victory"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = React.ComponentProps; + +export const ComponentMeta: Meta = { + component: VictoryAnimation, + decorators: [componentContainer], + + argTypes: { + delay: { control: "number" }, + duration: { control: "number" }, + easing: { control: "text" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-animation/default.stories.tsx b/stories/victory-charts/victory-animation/default.stories.tsx new file mode 100644 index 000000000..1b7c3bbc3 --- /dev/null +++ b/stories/victory-charts/victory-animation/default.stories.tsx @@ -0,0 +1,95 @@ +/* eslint-disable react-hooks/rules-of-hooks */ +import React, { useEffect, useState } from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAnimation, VictoryLabel, VictoryPie } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAnimation", +}; + +const ANIMATION_DATA = [ + [ + { x: 1, y: 0 }, + { x: 2, y: 100 }, + ], + [ + { x: 1, y: 25 }, + { x: 2, y: 75 }, + ], + [ + { x: 1, y: 50 }, + { x: 2, y: 50 }, + ], + [ + { x: 1, y: 75 }, + { x: 2, y: 25 }, + ], + [ + { x: 1, y: 100 }, + { x: 2, y: 0 }, + ], +]; + +export const Default: Story = { + args: {}, + render: (props) => { + const [data, setData] = useState(ANIMATION_DATA[0]); + const [percent, setPercent] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + const nextIndex = + (ANIMATION_DATA.indexOf(data) + 1) % ANIMATION_DATA.length; + setData(ANIMATION_DATA[nextIndex]); + setPercent(ANIMATION_DATA[nextIndex][0].y); + }, 2000); + + // clean up interval on unmount + return () => clearInterval(interval); + }, [data, percent]); + + return ( +
+ + null} + style={{ + data: { + fill: ({ datum }) => { + const color = datum.y > 30 ? "green" : "red"; + return datum.x === 1 ? color : "transparent"; + }, + }, + }} + /> + + {(newProps) => { + return ( + + ); + }} + + +
+ ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/config.ts b/stories/victory-charts/victory-area/config.ts new file mode 100644 index 000000000..b65255c0a --- /dev/null +++ b/stories/victory-charts/victory-area/config.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryArea, VictoryAreaProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryAreaProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryArea, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + interpolation: { + control: "select", + options: [ + "basis", + "basisClosed", + "basisOpen", + "bundle", + "cardinal", + "cardinalClosed", + "cardinalOpen", + "catmullRom", + "catmullRomClosed", + "catmullRomOpen", + "linear", + "linearClosed", + "monotoneX", + "monotoneY", + "natural", + "radial", + "step", + "stepAfter", + "stepBefore", + ], + }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-area/data-accessors.stories.tsx b/stories/victory-charts/victory-area/data-accessors.stories.tsx new file mode 100644 index 000000000..05396486f --- /dev/null +++ b/stories/victory-charts/victory-area/data-accessors.stories.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const DataAccessors: Story = { + args: {}, + render: (props) => ( + <> + + data.pet + data.wild} + /> + + + data.pet + data.wild} + /> + + + data.pet + data.wild} + /> + + + d.y - 1} /> + + + d.y - 1} /> + + + d.y - 1} /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/default.stories.tsx b/stories/victory-charts/victory-area/default.stories.tsx new file mode 100644 index 000000000..26c388484 --- /dev/null +++ b/stories/victory-charts/victory-area/default.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-area/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..8c532ebfd --- /dev/null +++ b/stories/victory-charts/victory-area/disable-inline-styles.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Area, VictoryArea, VictoryTheme } from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/events.stories.tsx b/stories/victory-charts/victory-area/events.stories.tsx new file mode 100644 index 000000000..bb9ccaa62 --- /dev/null +++ b/stories/victory-charts/victory-area/events.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Events: Story = { + args: {}, + render: (props) => ( + + { + return [ + { + eventKey: "all", + target: "data", + mutation: (eventProps) => { + const fill = eventProps.style && eventProps.style.fill; + return fill === "black" + ? null + : { style: { fill: "black" } }; + }, + }, + ]; + }, + }, + }, + ]} + data={getData(5)} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/interpolation.stories.tsx b/stories/victory-charts/victory-area/interpolation.stories.tsx new file mode 100644 index 000000000..3be1b89b2 --- /dev/null +++ b/stories/victory-charts/victory-area/interpolation.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + InterpolationPropType, + VictoryArea, + VictoryChart, + VictoryLabel, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Interpolation: Story = { + args: { + data: getData(8), + }, + render: (props) => ( + <> + {[ + "basis", + "cardinal", + "catmullRom", + "linear", + "monotoneX", + "monotoneY", + "natural", + "step", + "stepAfter", + "stepBefore", + ].map((interpolation) => ( + + + + + ))} + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/labels.stories.tsx b/stories/victory-charts/victory-area/labels.stories.tsx new file mode 100644 index 000000000..db218f368 --- /dev/null +++ b/stories/victory-charts/victory-area/labels.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/log-scale.stories.tsx b/stories/victory-charts/victory-area/log-scale.stories.tsx new file mode 100644 index 000000000..63e7c563c --- /dev/null +++ b/stories/victory-charts/victory-area/log-scale.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory"; + +import { getLogData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const LogScale: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/plotting-functions.stories.tsx b/stories/victory-charts/victory-area/plotting-functions.stories.tsx new file mode 100644 index 000000000..ecf8d92da --- /dev/null +++ b/stories/victory-charts/victory-area/plotting-functions.stories.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const PlottingFunctions: Story = { + args: {}, + render: (props) => ( + <> + + Math.sin(2 * Math.PI * d.x)} /> + + + Math.sin(2 * Math.PI * d.x)} /> + + + + Math.sin(2 * Math.PI * d.x)} + y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} + /> + + + Math.sin(2 * Math.PI * d.x)} + y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} + /> + + + Math.sin(Math.PI * d.x)} /> + + + Math.sin(Math.PI * d.x)} + y0={(d) => Math.sin(Math.PI * d.x) - 0.5} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/polar-interpolation.stories.tsx b/stories/victory-charts/victory-area/polar-interpolation.stories.tsx new file mode 100644 index 000000000..f3831db92 --- /dev/null +++ b/stories/victory-charts/victory-area/polar-interpolation.stories.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + InterpolationPropType, + VictoryArea, + VictoryChart, + VictoryLabel, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const PolarInterpolation: Story = { + args: { + data: getData(8), + }, + render: (props) => ( + <> + {["basis", "cardinal", "catmullRom", "linear"].map((interpolation) => ( + + + + + ))} + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/polar.stories.tsx b/stories/victory-charts/victory-area/polar.stories.tsx new file mode 100644 index 000000000..1e7914a68 --- /dev/null +++ b/stories/victory-charts/victory-area/polar.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Polar: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/stacked.stories.tsx b/stories/victory-charts/victory-area/stacked.stories.tsx new file mode 100644 index 000000000..ff41ab1d6 --- /dev/null +++ b/stories/victory-charts/victory-area/stacked.stories.tsx @@ -0,0 +1,83 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData, getDataWithBaseline } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Stacked: Story = { + args: {}, + render: (props) => ( + <> + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/styles.stories.tsx b/stories/victory-charts/victory-area/styles.stories.tsx new file mode 100644 index 000000000..ee702ba12 --- /dev/null +++ b/stories/victory-charts/victory-area/styles.stories.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryLabelStyleObject, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +const labelStyle: VictoryLabelStyleObject = { + fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { + fill: "tomato", + fillOpacity: 0.7, + stroke: "tomato", + strokeWidth: 2, + }, + }} + /> + + + datum.x} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 }, + ]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/theme.stories.tsx b/stories/victory-charts/victory-area/theme.stories.tsx new file mode 100644 index 000000000..3ed93ede1 --- /dev/null +++ b/stories/victory-charts/victory-area/theme.stories.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + + + + datum.x}> + + + + + + + + + + + + datum.x}> + + + + + + + + + + + + datum.x}> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/time-scale.stories.tsx b/stories/victory-charts/victory-area/time-scale.stories.tsx new file mode 100644 index 000000000..7958232f4 --- /dev/null +++ b/stories/victory-charts/victory-area/time-scale.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getTimeData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const TimeScale: Story = { + args: {}, + render: (props) => ( + <> + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-area/tooltips.stories.tsx b/stories/victory-charts/victory-area/tooltips.stories.tsx new file mode 100644 index 000000000..4818bc1a4 --- /dev/null +++ b/stories/victory-charts/victory-area/tooltips.stories.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryArea, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData, getMixedData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryArea", +}; + +export const Tooltips: Story = { + args: { + labelComponent: , + }, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/axis-value.stories.tsx b/stories/victory-charts/victory-axis/axis-value.stories.tsx new file mode 100644 index 000000000..e1e706d98 --- /dev/null +++ b/stories/victory-charts/victory-axis/axis-value.stories.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const AxisValue: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + t.getFullYear()} + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis-grid-line-styles.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-grid-line-styles.stories.tsx new file mode 100644 index 000000000..70b54ed16 --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis-grid-line-styles.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxisGridLineStyles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx new file mode 100644 index 000000000..537db68c8 --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis-grid-line-width.stories.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxisGridLineWidth: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis-grid-line-with-domain.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-grid-line-with-domain.stories.tsx new file mode 100644 index 000000000..588617a67 --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis-grid-line-with-domain.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxisGridLineWithDomain: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis-grid-line.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-grid-line.stories.tsx new file mode 100644 index 000000000..15a239cea --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis-grid-line.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxisGridLine: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis-with-domain.stories.tsx b/stories/victory-charts/victory-axis/brush-axis-with-domain.stories.tsx new file mode 100644 index 000000000..b0aa6cd79 --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis-with-domain.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxisWithDomain: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/brush-axis.stories.tsx b/stories/victory-charts/victory-axis/brush-axis.stories.tsx new file mode 100644 index 000000000..b868e63d9 --- /dev/null +++ b/stories/victory-charts/victory-axis/brush-axis.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBrushLine } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const BrushAxis: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/config.ts b/stories/victory-charts/victory-axis/config.ts new file mode 100644 index 000000000..816fd99e6 --- /dev/null +++ b/stories/victory-charts/victory-axis/config.ts @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryAxis, VictoryAxisProps } from "@/victory"; + +import { + VictoryAxisCommonProps, + VictoryCommonProps, + VictoryDatableProps, + VictorySingleLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryAxisProps & { + themeKey: string; +}; + +export type Story = StoryObj; + +export const ComponentMeta: Meta> = { + component: VictoryAxis, + decorators: [componentContainer], + + argTypes: { + ...VictoryAxisCommonProps, + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictorySingleLabelableProps, + + crossAxis: { control: "boolean" }, + fixLabelOverlap: { control: "boolean" }, + offsetX: { control: "number" }, + offsetY: { control: "number" }, + orientation: { + control: "select", + options: ["top", "bottom", "left", "right"], + }, + }, +}; diff --git a/stories/victory-charts/victory-axis/default.stories.tsx b/stories/victory-charts/victory-axis/default.stories.tsx new file mode 100644 index 000000000..6bb93ba7d --- /dev/null +++ b/stories/victory-charts/victory-axis/default.stories.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx b/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx new file mode 100644 index 000000000..e5728c2a2 --- /dev/null +++ b/stories/victory-charts/victory-axis/fix-label-overlap.stories.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryTheme } from "@/victory"; + +import { getRandomValues, getTimeValues, getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const FixLabelOverlap: Story = { + args: { + fixLabelOverlap: true, + }, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/offsets.stories.tsx b/stories/victory-charts/victory-axis/offsets.stories.tsx new file mode 100644 index 000000000..88b6beaf4 --- /dev/null +++ b/stories/victory-charts/victory-axis/offsets.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const Offsets: Story = { + args: {}, + render: (props) => ( + <> + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/orientation.stories.tsx b/stories/victory-charts/victory-axis/orientation.stories.tsx new file mode 100644 index 000000000..651a4fdf1 --- /dev/null +++ b/stories/victory-charts/victory-axis/orientation.stories.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; + +import { getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const Orientation: Story = { + args: { + tickValues: getValues(5), + }, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/style.stories.tsx b/stories/victory-charts/victory-axis/style.stories.tsx new file mode 100644 index 000000000..d42c01c8d --- /dev/null +++ b/stories/victory-charts/victory-axis/style.stories.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const Style: Story = { + args: {}, + render: (props) => ( + <> + + (tick > 0.5 ? "red" : "grey") }, + ticks: { stroke: "grey", size: 5 }, + tickLabels: { fontSize: 15, padding: 5 }, + }} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/tick-format.stories.tsx b/stories/victory-charts/victory-axis/tick-format.stories.tsx new file mode 100644 index 000000000..70bcb9fcf --- /dev/null +++ b/stories/victory-charts/victory-axis/tick-format.stories.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; + +import { getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const TickFormat: Story = { + args: { + tickValues: getValues(5), + }, + render: (props) => ( + <> + + + + + `#${t}`} /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/tick-values.stories.tsx b/stories/victory-charts/victory-axis/tick-values.stories.tsx new file mode 100644 index 000000000..eb4e7f261 --- /dev/null +++ b/stories/victory-charts/victory-axis/tick-values.stories.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; + +import { getRandomValues, getTimeValues, getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const TickValues: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/with-domain.stories.tsx b/stories/victory-charts/victory-axis/with-domain.stories.tsx new file mode 100644 index 000000000..9c542e7c3 --- /dev/null +++ b/stories/victory-charts/victory-axis/with-domain.stories.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryAxis, + VictoryChart, + VictoryScatter, + VictoryTheme, +} from "@/victory"; + +import { getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const WithDomain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-axis/with-multiline-labels.stories.tsx b/stories/victory-charts/victory-axis/with-multiline-labels.stories.tsx new file mode 100644 index 000000000..db812bc8d --- /dev/null +++ b/stories/victory-charts/victory-axis/with-multiline-labels.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; + +import { getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryAxis", +}; + +export const WithMultilineLabels: Story = { + args: { + tickFormat: (tick) => (tick >= 0 ? tick : `minus\n${-tick}`), + tickValues: getValues(5, -2), + }, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/alignment.stories.tsx b/stories/victory-charts/victory-bar/alignment.stories.tsx new file mode 100644 index 000000000..ef72fd4e8 --- /dev/null +++ b/stories/victory-charts/victory-bar/alignment.stories.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Alignment: Story = { + args: { + data: getData(7), + }, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/bar-ratio.stories.tsx b/stories/victory-charts/victory-bar/bar-ratio.stories.tsx new file mode 100644 index 000000000..8487a5e38 --- /dev/null +++ b/stories/victory-charts/victory-bar/bar-ratio.stories.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const BarRatio: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/bar-width.stories.tsx b/stories/victory-charts/victory-bar/bar-width.stories.tsx new file mode 100644 index 000000000..abbe7cac4 --- /dev/null +++ b/stories/victory-charts/victory-bar/bar-width.stories.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const BarWidth: Story = { + args: { + data: getData(7), + }, + render: (props) => ( + <> + + + + + + + + + + + datum.x * 4} /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/config.ts b/stories/victory-charts/victory-bar/config.ts new file mode 100644 index 000000000..3c7abb589 --- /dev/null +++ b/stories/victory-charts/victory-bar/config.ts @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryBar, VictoryBarProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryBarProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryBar, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + alignment: { control: "select", options: ["start", "middle", "end"] }, + barRatio: { control: "number" }, + barWidth: { control: "number" }, + cornerRadius: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-bar/corner-radius.stories.tsx b/stories/victory-charts/victory-bar/corner-radius.stories.tsx new file mode 100644 index 000000000..66bbcdd87 --- /dev/null +++ b/stories/victory-charts/victory-bar/corner-radius.stories.tsx @@ -0,0 +1,128 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryPolarAxis, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData, getMixedData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const CornerRadius: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/data.stories.tsx b/stories/victory-charts/victory-bar/data.stories.tsx new file mode 100644 index 000000000..06bdde779 --- /dev/null +++ b/stories/victory-charts/victory-bar/data.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Data: Story = { + args: {}, + render: (props) => ( + <> + + data.pet + data.wild} + /> + + + d.y - d.x} /> + + + d.y - d.x} /> + + + d.y - d.x} /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/default.stories.tsx b/stories/victory-charts/victory-bar/default.stories.tsx new file mode 100644 index 000000000..17230afb0 --- /dev/null +++ b/stories/victory-charts/victory-bar/default.stories.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-bar/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..3094384b5 --- /dev/null +++ b/stories/victory-charts/victory-bar/disable-inline-styles.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Bar, VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/domain.stories.tsx b/stories/victory-charts/victory-bar/domain.stories.tsx new file mode 100644 index 000000000..c966c8dc3 --- /dev/null +++ b/stories/victory-charts/victory-bar/domain.stories.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Domain: Story = { + args: { + data: getData(7), + }, + render: (props) => ( + <> + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx b/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx new file mode 100644 index 000000000..3a7d95c0a --- /dev/null +++ b/stories/victory-charts/victory-bar/focus-with-refs.stories.tsx @@ -0,0 +1,65 @@ +/* eslint-disable react-hooks/rules-of-hooks */ +import React, { useEffect, useCallback, useRef } from "react"; +import type { Meta } from "@storybook/react"; + +import { + Bar, + VictoryBar, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const FocusWithRefs: Story = { + args: {}, + render: (props) => { + const barsRef = useRef(new Map()); + + const focusOnBar = (id) => { + const map = barsRef.current; + const node = map.get(id); + node.focus(); + }; + + useEffect(() => { + if (barsRef.current) { + focusOnBar("1"); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const setRef = useCallback((node) => { + const map = barsRef.current; + if (node) { + map.set(node.attributes.index.value, node); + } + }, []); + + return ( + <> + + `x: ${datum.x}`} + labelComponent={} + dataComponent={} + /> + + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/get-path.stories.tsx b/stories/victory-charts/victory-bar/get-path.stories.tsx new file mode 100644 index 000000000..0c78494d5 --- /dev/null +++ b/stories/victory-charts/victory-bar/get-path.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const GetPath: Story = { + args: { + data: getData(7), + }, + render: (props) => { + const verticalPathFn = (callbackArgs) => { + const { x0, x1, y0, y1 } = callbackArgs; + return `M ${x0}, ${y0} + L ${(x1 + x0) / 2}, ${y1} + L ${x1}, ${y0} + z`; + }; + + const horizontalPathFn = (callbackArgs) => { + const { x0, x1, y0, y1 } = callbackArgs; + return `M ${x0}, ${y1} + L ${x1}, ${(y0 + y1) / 2} + L ${x0}, ${y0} + z`; + }; + + return ( + <> + + + + + + + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/grouped-bars.stories.tsx b/stories/victory-charts/victory-bar/grouped-bars.stories.tsx new file mode 100644 index 000000000..ee165712f --- /dev/null +++ b/stories/victory-charts/victory-bar/grouped-bars.stories.tsx @@ -0,0 +1,218 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryGroup, + VictoryStack, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData, getMixedData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const GroupedBars: Story = { + args: {}, + render: (props) => ( + <> + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x} + labelComponent={} + > + + + + + + + datum.x} + labelComponent={} + > + + + + + + + datum.x} + style={{ data: { width: 15 } }} + > + + + + + + + + + + + + + + + + + + + datum.x} + style={{ data: { width: 15 } }} + > + + + + + + + + + + + + + + + + + + + datum.x} + labelComponent={} + > + + + + + + + + + + + + + + + + + + + datum.x} + labelComponent={} + > + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/labels.stories.tsx b/stories/victory-charts/victory-bar/labels.stories.tsx new file mode 100644 index 000000000..e327f6fca --- /dev/null +++ b/stories/victory-charts/victory-bar/labels.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryPolarAxis, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/polar-bars.stories.tsx b/stories/victory-charts/victory-bar/polar-bars.stories.tsx new file mode 100644 index 000000000..3f55e994f --- /dev/null +++ b/stories/victory-charts/victory-bar/polar-bars.stories.tsx @@ -0,0 +1,117 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryGroup, + VictoryPolarAxis, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const PolarBars: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/regressions.stories.tsx b/stories/victory-charts/victory-bar/regressions.stories.tsx new file mode 100644 index 000000000..1da76b1fe --- /dev/null +++ b/stories/victory-charts/victory-bar/regressions.stories.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryGroup, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData, getStackedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Regressions: Story = { + args: {}, + render: (props) => ( + <> + + + + {getStackedData(5, 3, "useStrings").map((data, index) => { + return ( + + ); + })} + + + {getStackedData(5, 3, "useStrings").map((data, index) => { + return ( + + ); + })} + + + {getStackedData(5, 3, "useStrings").map((data, index) => { + return ( + + ); + })} + + + + + datum.x} + > + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/scale.stories.tsx b/stories/victory-charts/victory-bar/scale.stories.tsx new file mode 100644 index 000000000..e855b0a34 --- /dev/null +++ b/stories/victory-charts/victory-bar/scale.stories.tsx @@ -0,0 +1,93 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryGroup, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getLogData, getTimeData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Scale: Story = { + args: {}, + render: (props) => ( + <> + + datum.y.toPrecision(1)} + /> + + + datum.y.toPrecision(1)} + /> + + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/sorting.stories.tsx b/stories/victory-charts/victory-bar/sorting.stories.tsx new file mode 100644 index 000000000..c33405f86 --- /dev/null +++ b/stories/victory-charts/victory-bar/sorting.stories.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Sorting: Story = { + args: { + data: [ + { x: "low", y: 1 }, + { x: "med", y: 2 }, + { x: "high", y: 3 }, + ], + sortKey: "sort", + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/stacked-bars.stories.tsx b/stories/victory-charts/victory-bar/stacked-bars.stories.tsx new file mode 100644 index 000000000..59db80104 --- /dev/null +++ b/stories/victory-charts/victory-bar/stacked-bars.stories.tsx @@ -0,0 +1,126 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryLabel, + VictoryStack, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getData, getDataWithBaseline, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const StackedBars: Story = { + args: {}, + render: (props) => ( + <> + + datum._y1.toPrecision(2)}> + + + + + + + + datum.y.toPrecision(2)} + labelComponent={} + /> + datum.y.toPrecision(2)} + labelComponent={} + /> + datum.y.toPrecision(2)} + labelComponent={} + /> + + + + datum._y1.toPrecision(2)}> + + + + + + + datum._y1.toPrecision(2)}> + + + + + + + datum._y1.toPrecision(2)}> + + + + + + + datum._y1.toPrecision(2)} + labelComponent={} + > + + + + + + + datum._y1.toPrecision(2)} + labelComponent={} + > + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/style.stories.tsx b/stories/victory-charts/victory-bar/style.stories.tsx new file mode 100644 index 000000000..11bcae763 --- /dev/null +++ b/stories/victory-charts/victory-bar/style.stories.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Style: Story = { + args: {}, + render: (props) => ( + <> + + datum.y} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { + fill: "tomato", + fillOpacity: 0.7, + stroke: "tomato", + strokeWidth: 2, + }, + }} + /> + + + (datum.y > 75 ? "red" : "transparent"), + strokeWidth: 3, + opacity: ({ datum }) => (datum.y > 75 ? 1 : 0.4), + }, + }} + labels={({ datum }) => datum.x} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 }, + ]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/theme.stories.tsx b/stories/victory-charts/victory-bar/theme.stories.tsx new file mode 100644 index 000000000..723e5056f --- /dev/null +++ b/stories/victory-charts/victory-bar/theme.stories.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + + + + datum.x}> + + + + + + + + + + + + datum.x}> + + + + + + + + + + + + datum.x}> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-bar/tooltips.stories.tsx b/stories/victory-charts/victory-bar/tooltips.stories.tsx new file mode 100644 index 000000000..18b5b65b5 --- /dev/null +++ b/stories/victory-charts/victory-bar/tooltips.stories.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryPolarAxis, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBar", +}; + +export const Tooltips: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + } + /> + + + } + /> + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/box-width.stories.tsx b/stories/victory-charts/victory-box-plot/box-width.stories.tsx new file mode 100644 index 000000000..622e4b72b --- /dev/null +++ b/stories/victory-charts/victory-box-plot/box-width.stories.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; + +import { getBoxPlotData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const BoxWidth: Story = { + args: { + data: getBoxPlotData(5), + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/config.ts b/stories/victory-charts/victory-box-plot/config.ts new file mode 100644 index 000000000..ed413785a --- /dev/null +++ b/stories/victory-charts/victory-box-plot/config.ts @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryBoxPlotProps } from "@/victory"; + +import { VictoryCommonProps, VictoryDatableProps } from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryBoxPlotProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryBoxPlot, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + + 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-box-plot/data.stories.tsx b/stories/victory-charts/victory-box-plot/data.stories.tsx new file mode 100644 index 000000000..12f2e275a --- /dev/null +++ b/stories/victory-charts/victory-box-plot/data.stories.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; + +import { getArrayData, getBoxPlotRepeatData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Data: Story = { + args: { + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/default.stories.tsx b/stories/victory-charts/victory-box-plot/default.stories.tsx new file mode 100644 index 000000000..8e957a682 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/default.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getBoxPlotData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Default: Story = { + args: { + domainPadding: 20, + data: getBoxPlotData(5), + }, + render: (props) => ( + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-box-plot/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..1eb352a4f --- /dev/null +++ b/stories/victory-charts/victory-box-plot/disable-inline-styles.stories.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + Box, + LineSegment, + VictoryBoxPlot, + VictoryChart, + VictoryTheme, + Whisker, +} from "@/victory"; + +import { getBoxPlotData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const DisableInlineStyles: Story = { + args: { + domainPadding: 20, + data: getBoxPlotData(8), + }, + render: (props) => ( + <> + + + + + } + q3Component={} + maxComponent={ + + } + minComponent={ + + } + medianComponent={ + + } + {...props} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/domain.stories.tsx b/stories/victory-charts/victory-box-plot/domain.stories.tsx new file mode 100644 index 000000000..dbd4cd891 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/domain.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getArrayData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Domain: Story = { + args: { + data: getArrayData(5, 10), + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/group.stories.tsx b/stories/victory-charts/victory-box-plot/group.stories.tsx new file mode 100644 index 000000000..bfab546e2 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/group.stories.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryGroup } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Group: Story = { + args: { + domainPadding: 20, + }, + render: (props) => ( + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/labels.stories.tsx b/stories/victory-charts/victory-box-plot/labels.stories.tsx new file mode 100644 index 000000000..addeaa6e9 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/labels.stories.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getBoxPlotData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Labels: Story = { + args: { + data: getBoxPlotData(3), + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + `min: ${datum.min}`} + maxLabels={({ datum }) => `max: ${datum.max}`} + medianLabels={({ datum }) => `med: ${datum.median}`} + {...props} + /> + + + `q1: ${datum.q1}`} + q3Labels={({ datum }) => `q3: ${datum.q3}`} + {...props} + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/style.stories.tsx b/stories/victory-charts/victory-box-plot/style.stories.tsx new file mode 100644 index 000000000..4c9c64e47 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/style.stories.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; + +import { getBoxPlotData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Style: Story = { + args: { + data: getBoxPlotData(4), + domainPadding: 20, + labels: true, + }, + render: (props) => ( + <> + + + + + (datum.q1 < 10 ? 1 : 0.5), + }, + q3: { + fill: "#2bbee0", + fillOpacity: ({ datum }) => (datum.q3 > 15 ? 1 : 0.5), + }, + median: { stroke: "#fff", strokeWidth: 2 }, + minLabels: { fill: "#FF530D", padding: 10 }, + maxLabels: { fill: "#2bbee0", padding: 10 }, + }} + {...props} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/theme.stories.tsx b/stories/victory-charts/victory-box-plot/theme.stories.tsx new file mode 100644 index 000000000..a79ede42d --- /dev/null +++ b/stories/victory-charts/victory-box-plot/theme.stories.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getBoxPlotData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Theme: Story = { + args: { + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/tooltips.stories.tsx b/stories/victory-charts/victory-box-plot/tooltips.stories.tsx new file mode 100644 index 000000000..8f11fe984 --- /dev/null +++ b/stories/victory-charts/victory-box-plot/tooltips.stories.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBoxPlot, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getBoxPlotData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const Tooltips: Story = { + args: { + data: getBoxPlotData(3), + domainPadding: 20, + labels: true, + }, + render: (props) => ( + <> + + } + q3LabelComponent={} + labelOrientation={{ + q1: "left", + q3: "left", + min: "right", + max: "right", + median: "right", + }} + {...props} + /> + + + } + q3LabelComponent={} + labelOrientation={{ + q1: "top", + q3: "top", + min: "bottom", + max: "bottom", + median: "bottom", + }} + {...props} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-box-plot/whisker-width.stories.tsx b/stories/victory-charts/victory-box-plot/whisker-width.stories.tsx new file mode 100644 index 000000000..6dd10ef1c --- /dev/null +++ b/stories/victory-charts/victory-box-plot/whisker-width.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBoxPlot, VictoryChart, VictoryTheme } from "@/victory"; + +import { getBoxPlotData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryBoxPlot", +}; + +export const WhiskerWidth: Story = { + args: { + data: getBoxPlotData(5), + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/candle-colors.stories.tsx b/stories/victory-charts/victory-candlestick/candle-colors.stories.tsx new file mode 100644 index 000000000..6bd7b35a7 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/candle-colors.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; + +import { getCandlestickData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const CandleColors: Story = { + args: { + candleColors: { positive: "#8BC34A", negative: "#C62828" }, + data: getCandlestickData(7), + domainPadding: 20, + }, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/config.ts b/stories/victory-charts/victory-candlestick/config.ts new file mode 100644 index 000000000..9b392abb3 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/config.ts @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryCandlestick, VictoryCandlestickProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryCandlestickProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryCandlestick, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + candleRatio: { control: "boolean" }, + candleWidth: { control: "number" }, + close: { control: "text" }, + closeLabels: { control: "boolean" }, + high: { control: "text" }, + highLabels: { control: "boolean" }, + low: { control: "text" }, + lowLabels: { control: "boolean" }, + open: { control: "text" }, + openLabels: { control: "boolean" }, + wickStrokeWidth: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-candlestick/data.stories.tsx b/stories/victory-charts/victory-candlestick/data.stories.tsx new file mode 100644 index 000000000..00dfa4f56 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/data.stories.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const Data: Story = { + args: { + domainPadding: 20, + }, + render: (props) => ( + <> + + data.big /10 } + /> + + + data.big / 10} + /> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/default.stories.tsx b/stories/victory-charts/victory-candlestick/default.stories.tsx new file mode 100644 index 000000000..931309286 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/default.stories.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getCandlestickData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const Default: Story = { + args: { + data: getCandlestickData(8), + }, + render: (props) => ( + <> + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-candlestick/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..4bdb2b58e --- /dev/null +++ b/stories/victory-charts/victory-candlestick/disable-inline-styles.stories.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Candle, VictoryCandlestick, VictoryChart } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getCandlestickData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const DisableInlineStyles: Story = { + args: { + data: getCandlestickData(8), + }, + render: (props) => ( + <> + + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/domain.stories.tsx b/stories/victory-charts/victory-candlestick/domain.stories.tsx new file mode 100644 index 000000000..ce7109bff --- /dev/null +++ b/stories/victory-charts/victory-candlestick/domain.stories.tsx @@ -0,0 +1,81 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/labels.stories.tsx b/stories/victory-charts/victory-candlestick/labels.stories.tsx new file mode 100644 index 000000000..2b030cf80 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/labels.stories.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getCandlestickData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +const sampleData = [ + { x: 1, open: 9, close: 30, high: 56, low: 7 }, + { x: 2, open: 80, close: 40, high: 120, low: 10 }, + { x: 3, open: 50, close: 80, high: 90, low: 20 }, + { x: 4, open: 70, close: 22, high: 70, low: 5 }, +]; + +export const Labels: Story = { + args: { + domainPadding: 20, + }, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + datum.open} + closeLabels={({ datum }) => datum.close} + /> + + + datum.open} + closeLabels={({ datum }) => datum.close} + labelOrientation={{ open: "top", close: "bottom" }} + /> + + + datum.high} + lowLabels={({ datum }) => datum.low} + /> + + + datum.high} + lowLabels={({ datum }) => datum.low} + labelOrientation={{ low: "left", high: "right" }} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/scale.stories.tsx b/stories/victory-charts/victory-candlestick/scale.stories.tsx new file mode 100644 index 000000000..d7065bf68 --- /dev/null +++ b/stories/victory-charts/victory-candlestick/scale.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; + +import { getCandlestickTimeData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const Scale: Story = { + args: {}, + render: (props) => ( + <> + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/style.stories.tsx b/stories/victory-charts/victory-candlestick/style.stories.tsx new file mode 100644 index 000000000..88ab9351d --- /dev/null +++ b/stories/victory-charts/victory-candlestick/style.stories.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getCandlestickData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const Style: Story = { + args: { + data: getCandlestickData(7), + }, + render: (props) => ( + <> + + datum.x} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { + fill: "tomato", + fillOpacity: 0.7, + stroke: "tomato", + strokeWidth: 2, + }, + }} + /> + + + + datum.open > datum.close ? "red" : "black", + }, + }} + labels={({ datum }) => datum.x} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/tooltips.stories.tsx b/stories/victory-charts/victory-candlestick/tooltips.stories.tsx new file mode 100644 index 000000000..68574ea8a --- /dev/null +++ b/stories/victory-charts/victory-candlestick/tooltips.stories.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryCandlestick, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getCandlestickData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +const sampleData = [ + { x: 1, open: 9, close: 30, high: 56, low: 7 }, + { x: 2, open: 80, close: 40, high: 120, low: 10 }, + { x: 3, open: 50, close: 80, high: 90, low: 20 }, + { x: 4, open: 70, close: 22, high: 70, low: 5 }, +]; + +export const Tooltips: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + datum.open} + closeLabels={({ datum }) => datum.close} + openLabelComponent={} + closeLabelComponent={} + /> + + + datum.open} + closeLabels={({ datum }) => datum.close} + openLabelComponent={} + closeLabelComponent={} + labelOrientation={{ open: "top", close: "bottom" }} + /> + + + datum.high} + lowLabels={({ datum }) => datum.low} + highLabelComponent={} + lowLabelComponent={} + /> + + + datum.high} + lowLabels={({ datum }) => datum.low} + highLabelComponent={} + lowLabelComponent={} + labelOrientation={{ low: "left", high: "right" }} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-candlestick/wick-stroke-width.stories.tsx b/stories/victory-charts/victory-candlestick/wick-stroke-width.stories.tsx new file mode 100644 index 000000000..7deeb0a6d --- /dev/null +++ b/stories/victory-charts/victory-candlestick/wick-stroke-width.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryCandlestick, VictoryChart, VictoryTheme } from "@/victory"; + +import { getCandlestickData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryCandlestick", +}; + +export const WickStrokeWidth: Story = { + args: { + data: getCandlestickData(7), + }, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/axes.stories.tsx b/stories/victory-charts/victory-chart/axes.stories.tsx new file mode 100644 index 000000000..eacdc8c3a --- /dev/null +++ b/stories/victory-charts/victory-chart/axes.stories.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const Axes: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/config.ts b/stories/victory-charts/victory-chart/config.ts new file mode 100644 index 000000000..6a5be837a --- /dev/null +++ b/stories/victory-charts/victory-chart/config.ts @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryChart, VictoryChartProps } from "@/victory"; + +import { VictoryCommonProps } from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryChartProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryChart, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + + desc: { control: "text" }, + endAngle: { control: "number" }, + innerRadius: { control: "number" }, + prependDefaultAxes: { control: "boolean" }, + startAngle: { control: "number" }, + title: { control: "text" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-chart/default.stories.tsx b/stories/victory-charts/victory-chart/default.stories.tsx new file mode 100644 index 000000000..3d07169ce --- /dev/null +++ b/stories/victory-charts/victory-chart/default.stories.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/domain-from-data.stories.tsx b/stories/victory-charts/victory-chart/domain-from-data.stories.tsx new file mode 100644 index 000000000..b34ffc349 --- /dev/null +++ b/stories/victory-charts/victory-chart/domain-from-data.stories.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryAxis, + VictoryBoxPlot, + VictoryChart, + VictoryLine, + VictoryScatter, + VictoryTheme, +} from "@/victory"; + +import { getArrayData, getData, getFourQuadrantData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const DomainFromData: Story = { + args: {}, + render: (props) => ( + <> + + + + 10 * Math.sin(13 * Math.PI * d.x)} + /> + + + + + 10 * Math.sin(13 * Math.PI * d.x)} + /> + + + + + + Math.sin(Math.PI * d.x)} /> + + + + + + Math.sin(Math.PI * d.x)} /> + + + + + + + + + + + + 5 + 3 * Math.sin(Math.PI * d.x)} /> + + + + 5 + 3 * Math.sin(Math.PI * d.x)} /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/domain-padding.stories.tsx b/stories/victory-charts/victory-chart/domain-padding.stories.tsx new file mode 100644 index 000000000..8c1b8fb0d --- /dev/null +++ b/stories/victory-charts/victory-chart/domain-padding.stories.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryTheme } from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const DomainPadding: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/domain.stories.tsx b/stories/victory-charts/victory-chart/domain.stories.tsx new file mode 100644 index 000000000..4ab58e8b8 --- /dev/null +++ b/stories/victory-charts/victory-chart/domain.stories.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBar, VictoryChart, VictoryLine, VictoryTheme } from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/orientations.stories.tsx b/stories/victory-charts/victory-chart/orientations.stories.tsx new file mode 100644 index 000000000..063074213 --- /dev/null +++ b/stories/victory-charts/victory-chart/orientations.stories.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryAxis, VictoryBar, VictoryChart } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const Orientations: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/style.stories.tsx b/stories/victory-charts/victory-chart/style.stories.tsx new file mode 100644 index 000000000..41dff9d63 --- /dev/null +++ b/stories/victory-charts/victory-chart/style.stories.tsx @@ -0,0 +1,238 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryChart, + VictoryGroup, + VictoryPolarAxis, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const Style: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-brush-container-default.stories.tsx b/stories/victory-charts/victory-chart/victory-brush-container-default.stories.tsx new file mode 100644 index 000000000..2aa1f46de --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-brush-container-default.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBrushContainer, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryBrushContainerDefault: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-brush-container-with-brush-style.stories.tsx b/stories/victory-charts/victory-chart/victory-brush-container-with-brush-style.stories.tsx new file mode 100644 index 000000000..e7ff1eaf4 --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-brush-container-with-brush-style.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBrushContainer, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryBrushContainerWithBrushStyle: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-brush-container-with-domain-horizontal.stories.tsx b/stories/victory-charts/victory-chart/victory-brush-container-with-domain-horizontal.stories.tsx new file mode 100644 index 000000000..0d4144359 --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-brush-container-with-domain-horizontal.stories.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBrushContainer, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryBrushContainerWithDomainHorizontal: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-brush-container-with-domain.stories.tsx b/stories/victory-charts/victory-chart/victory-brush-container-with-domain.stories.tsx new file mode 100644 index 000000000..e4840be4b --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-brush-container-with-domain.stories.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryBrushContainer, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryBrushContainerWithDomain: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-cursor-container-default.stories.tsx b/stories/victory-charts/victory-chart/victory-cursor-container-default.stories.tsx new file mode 100644 index 000000000..7abd20a32 --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-cursor-container-default.stories.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryChart, VictoryCursorContainer, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryCursorContainerDefault: Story = { + args: {}, + render: (props) => ( + <> + datum.x} + defaultCursorValue={{ x: 0.25, y: 0.75 }} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-cursor-container-horizontal.stories.tsx b/stories/victory-charts/victory-chart/victory-cursor-container-horizontal.stories.tsx new file mode 100644 index 000000000..dba59d276 --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-cursor-container-horizontal.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryChart, VictoryCursorContainer, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryCursorContainerHorizontal: Story = { + args: {}, + render: (props) => ( + <> + datum.x} + defaultCursorValue={{ x: 0.25, y: 0.75 }} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx b/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx new file mode 100644 index 000000000..f0daabc86 --- /dev/null +++ b/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryChart, + VictoryLine, + VictoryZoomContainer, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryChart", +}; + +export const VictoryZoomContainerDefault: Story = { + args: {}, + render: (props) => ( + <> + + } + > + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-container/config.ts b/stories/victory-charts/victory-container/config.ts new file mode 100644 index 000000000..2f8174222 --- /dev/null +++ b/stories/victory-charts/victory-container/config.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryContainer, VictoryContainerProps } from "@/victory"; + +import { VictoryContainerProps as ContainerArgTypes } from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryContainerProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryContainer, + decorators: [componentContainer], + + argTypes: { + ...ContainerArgTypes, + }, +}; +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx b/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx new file mode 100644 index 000000000..46a10d356 --- /dev/null +++ b/stories/victory-charts/victory-container/preserve-aspect-ratio.stories.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryContainer, + VictoryChart, + VictoryLabel, + VictoryLine, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryContainer", +}; + +export const PreserveAspectRatio: Story = { + args: { + height: 250, + width: 500, + }, + render: (props) => ( + <> + + + + + + } + > + + + + + } + > + + + + + } + > + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-container/responsive.stories.tsx b/stories/victory-charts/victory-container/responsive.stories.tsx new file mode 100644 index 000000000..a1a4b5d50 --- /dev/null +++ b/stories/victory-charts/victory-container/responsive.stories.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryContainer, + VictoryChart, + VictoryLabel, + VictoryLine, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryContainer", +}; + +export const Responsive: Story = { + args: {}, + render: (props) => ( + <> + + + + + } + > + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/border-width.stories.tsx b/stories/victory-charts/victory-errorbar/border-width.stories.tsx new file mode 100644 index 000000000..576e0c602 --- /dev/null +++ b/stories/victory-charts/victory-errorbar/border-width.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getErrorBarData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const BorderWidth: Story = { + args: { + data: getErrorBarData(5), + }, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/config.ts b/stories/victory-charts/victory-errorbar/config.ts new file mode 100644 index 000000000..c57aa614a --- /dev/null +++ b/stories/victory-charts/victory-errorbar/config.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryErrorBar, VictoryErrorBarProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryErrorBarProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryErrorBar, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + borderWidth: { control: "number" }, + errorX: { control: "text" }, + errorY: { control: "text" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-errorbar/data.stories.tsx b/stories/victory-charts/victory-errorbar/data.stories.tsx new file mode 100644 index 000000000..99d084d5d --- /dev/null +++ b/stories/victory-charts/victory-errorbar/data.stories.tsx @@ -0,0 +1,75 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Data: Story = { + args: {}, + render: (props) => ( + <> + + + + + [d.error, d.error + 2]} + /> + + + [d.error, d.error + 2]} + /> + + + [d.error, d.error + 2]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/default.stories.tsx b/stories/victory-charts/victory-errorbar/default.stories.tsx new file mode 100644 index 000000000..345e4959f --- /dev/null +++ b/stories/victory-charts/victory-errorbar/default.stories.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-errorbar/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..ed385b4e8 --- /dev/null +++ b/stories/victory-charts/victory-errorbar/disable-inline-styles.stories.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + ErrorBar, + VictoryErrorBar, + VictoryChart, + VictoryTheme, +} from "@/victory"; + +import { getErrorBarData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorbar", +}; + +export const DisableInlineStyles: Story = { + args: { + data: getErrorBarData(4), + }, + render: (props) => ( + <> + + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/domain.stories.tsx b/stories/victory-charts/victory-errorbar/domain.stories.tsx new file mode 100644 index 000000000..40250583f --- /dev/null +++ b/stories/victory-charts/victory-errorbar/domain.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/labels.stories.tsx b/stories/victory-charts/victory-errorbar/labels.stories.tsx new file mode 100644 index 000000000..3f10a455d --- /dev/null +++ b/stories/victory-charts/victory-errorbar/labels.stories.tsx @@ -0,0 +1,80 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryErrorBar, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getErrorBarData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + + + + } + /> + + + [d.error, d.error + 2]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/style.stories.tsx b/stories/victory-charts/victory-errorbar/style.stories.tsx new file mode 100644 index 000000000..e2db38cee --- /dev/null +++ b/stories/victory-charts/victory-errorbar/style.stories.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getErrorBarData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Style: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { + fill: "tomato", + fillOpacity: 0.7, + stroke: "tomato", + strokeWidth: 2, + }, + }} + /> + + + + datum.errorX > datum.errorY ? "red" : "black", + }, + }} + labels={({ datum }) => datum.x} + data={getErrorBarData(4, true)} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-errorbar/theme.stories.tsx b/stories/victory-charts/victory-errorbar/theme.stories.tsx new file mode 100644 index 000000000..cadbe1f12 --- /dev/null +++ b/stories/victory-charts/victory-errorbar/theme.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryErrorBar, VictoryChart, VictoryTheme } from "@/victory"; + +import { getErrorBarData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryErrorBar", +}; + +export const Theme: Story = { + args: { + data: getErrorBarData(5) + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx b/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx new file mode 100644 index 000000000..10d67c712 --- /dev/null +++ b/stories/victory-charts/victory-histogram/bin-spacing.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const BinSpacing: Story = { + args: { + data + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/config.ts b/stories/victory-charts/victory-histogram/config.ts new file mode 100644 index 000000000..05bc6c141 --- /dev/null +++ b/stories/victory-charts/victory-histogram/config.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryHistogram, VictoryHistogramProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryHistogramProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryHistogram, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + bins: { control: "number" }, + binSpacing: { control: "number" }, + cornerRadius: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-histogram/corner-radius.stories.tsx b/stories/victory-charts/victory-histogram/corner-radius.stories.tsx new file mode 100644 index 000000000..d46ad0535 --- /dev/null +++ b/stories/victory-charts/victory-histogram/corner-radius.stories.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const CornerRadius: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/data.stories.tsx b/stories/victory-charts/victory-histogram/data.stories.tsx new file mode 100644 index 000000000..69fc1b570 --- /dev/null +++ b/stories/victory-charts/victory-histogram/data.stories.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data, timeData } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Data: Story = { + args: {}, + render: (props) => { + const oneYear = timeData.map(({ x }) => { + const newDate = new Date(x); + newDate.setFullYear(2020); + return { x: newDate }; + }); + + const fourMonths = timeData.map(({ x }, index) => { + const newDate = new Date(x); + newDate.setFullYear(2020); + newDate.setMonth(Math.ceil(index / 200)); + return { x: newDate }; + }); + + const oneMonth = timeData.map(({ x }) => { + const newDate = new Date(x); + newDate.setMonth(4); + newDate.setFullYear(2020); + return { x: newDate }; + }); + + return ( + <> + + + + + + + + + + + + + + ({ value: x }))} + x={({ value }) => value} + /> + + {/* + ({ value: x }))} + x={({ value }) => value} + /> + */} + + ); + }, +}; + +export default meta; diff --git a/stories/victory-histogram-data.ts b/stories/victory-charts/victory-histogram/data.ts similarity index 100% rename from stories/victory-histogram-data.ts rename to stories/victory-charts/victory-histogram/data.ts diff --git a/stories/victory-charts/victory-histogram/date-bins.stories.tsx b/stories/victory-charts/victory-histogram/date-bins.stories.tsx new file mode 100644 index 000000000..ca24b6512 --- /dev/null +++ b/stories/victory-charts/victory-histogram/date-bins.stories.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; +import * as d3Array from "@/victory-vendor/d3-array"; +import * as d3Scale from "@/victory-vendor/d3-scale"; +import * as d3Time from "@/victory-vendor/d3-time"; + +import { timeData } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const DateBins: Story = { + args: {}, + render: (props) => { + // HACK: d3scale has a scaleTime function but the types + // are whack coming through the build + const niceTimeScale = (d3Scale as any) + .scaleTime() + .domain(d3Array.extent(timeData, ({ x }) => x)) + .nice(); + + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/default.stories.tsx b/stories/victory-charts/victory-histogram/default.stories.tsx new file mode 100644 index 000000000..9be9fbae3 --- /dev/null +++ b/stories/victory-charts/victory-histogram/default.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..010c0134d --- /dev/null +++ b/stories/victory-charts/victory-histogram/disable-inline-styles.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Bar, VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/domain.stories.tsx b/stories/victory-charts/victory-histogram/domain.stories.tsx new file mode 100644 index 000000000..9f5b9fde5 --- /dev/null +++ b/stories/victory-charts/victory-histogram/domain.stories.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/empty-data.stories.tsx b/stories/victory-charts/victory-histogram/empty-data.stories.tsx new file mode 100644 index 000000000..5d3bb1c1b --- /dev/null +++ b/stories/victory-charts/victory-histogram/empty-data.stories.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const EmptyData: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/get-path.stories.tsx b/stories/victory-charts/victory-histogram/get-path.stories.tsx new file mode 100644 index 000000000..2fb6a9db6 --- /dev/null +++ b/stories/victory-charts/victory-histogram/get-path.stories.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const GetPath: Story = { + args: {}, + render: (props) => { + const verticalPathFn = (callbackArgs) => { + const { x0, x1, y0, y1 } = callbackArgs; + return `M ${x0}, ${y0} + L ${(x1 + x0) / 2}, ${y1} + L ${x1}, ${y0} + z`; + }; + + const horizontalPathFn = (callbackArgs) => { + const { x0, x1, y0, y1 } = callbackArgs; + return `M ${x0}, ${y1} + L ${x1}, ${(y0 + y1) / 2} + L ${x0}, ${y0} + z`; + }; + + // TODO: revert this when the getPath types are fixed. + return ( + <> + + {/* */} + + + + {/* */} + + + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/labels.stories.tsx b/stories/victory-charts/victory-histogram/labels.stories.tsx new file mode 100644 index 000000000..e8a1ed8e7 --- /dev/null +++ b/stories/victory-charts/victory-histogram/labels.stories.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryHistogram, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `${datum.x0} - ${datum.x1}`} + /> + + + `${datum.x0} - ${datum.x1}`} + /> + + + + + + + + + `${datum.x0} - ${datum.x1}`} + labelComponent={} + /> + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx b/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx new file mode 100644 index 000000000..b7d565352 --- /dev/null +++ b/stories/victory-charts/victory-histogram/mixed-charts.stories.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryHistogram, + VictoryLine, + VictoryChart, + VictoryScatter, + VictoryTheme, +} from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const MixedCharts: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx b/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx new file mode 100644 index 000000000..77efa4f0f --- /dev/null +++ b/stories/victory-charts/victory-histogram/numeric-bins.stories.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const NumericBins: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/scale.stories.tsx b/stories/victory-charts/victory-histogram/scale.stories.tsx new file mode 100644 index 000000000..3c850a652 --- /dev/null +++ b/stories/victory-charts/victory-histogram/scale.stories.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data, timeData } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Scale: Story = { + args: {}, + render: (props) => ( + <> + + + `${datum.x0.getFullYear()}\n|\n${datum.x1.getFullYear()}` + } + /> + + + + `${datum.x0.getFullYear()} - ${datum.x1.getFullYear()}` + } + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/stacked.stories.tsx b/stories/victory-charts/victory-histogram/stacked.stories.tsx new file mode 100644 index 000000000..1fda72963 --- /dev/null +++ b/stories/victory-charts/victory-histogram/stacked.stories.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryHistogram, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Stacked: Story = { + args: {}, + render: (props) => { + const stackedData = [ + ...[50, 30, 100, 32, 50, 10, 49, 78, 20].map((count) => + getData(count, count.toString(), 100), + ), + [{ x: 1 }, { x: 3 }, { x: 1 }, { x: 2 }], + ]; + + return ( + <> + + + {stackedData.map((d, index) => ( + + ))} + + + + + {stackedData.map((d, index) => ( + + ))} + + + + + {stackedData.map((d, index) => ( + + ))} + + + + + {stackedData.map((d, index) => ( + + ))} + + + + + ({ a: { b: { c: x } } }))} + x="a.b.c" + /> + {stackedData.map((d, index) => ( + + ))} + + + + + ({ a: { b: { c: x } } }))} + x="a.b.c" + /> + {stackedData.map((d, index) => ( + + ))} + + + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/styles.stories.tsx b/stories/victory-charts/victory-histogram/styles.stories.tsx new file mode 100644 index 000000000..2cbd4b62e --- /dev/null +++ b/stories/victory-charts/victory-histogram/styles.stories.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + + + + (datum.y > 3 ? "red" : "transparent"), + strokeWidth: 3, + opacity: ({ datum }) => (datum.y > 3 ? 1 : 0.4), + }, + }} + labels={["one", "two", "three", "four", "five"]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-histogram/theme.stories.tsx b/stories/victory-charts/victory-histogram/theme.stories.tsx new file mode 100644 index 000000000..46e02bbdb --- /dev/null +++ b/stories/victory-charts/victory-histogram/theme.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryHistogram, VictoryChart, VictoryTheme } from "@/victory"; + +import { data } from "./data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryHistogram", +}; + +export const Theme: Story = { + args: { + data, + }, + render: (props) => ( + <> + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/anchors.stories.tsx b/stories/victory-charts/victory-label/anchors.stories.tsx new file mode 100644 index 000000000..3efcec564 --- /dev/null +++ b/stories/victory-charts/victory-label/anchors.stories.tsx @@ -0,0 +1,128 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Anchors: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/angles.stories.tsx b/stories/victory-charts/victory-label/angles.stories.tsx new file mode 100644 index 000000000..ab0e3b7e5 --- /dev/null +++ b/stories/victory-charts/victory-label/angles.stories.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Angles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/background-padding.stories.tsx b/stories/victory-charts/victory-label/background-padding.stories.tsx new file mode 100644 index 000000000..12561ca38 --- /dev/null +++ b/stories/victory-charts/victory-label/background-padding.stories.tsx @@ -0,0 +1,153 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const BackgroundPadding: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/background-styles.stories.tsx b/stories/victory-charts/victory-label/background-styles.stories.tsx new file mode 100644 index 000000000..bf0e8446c --- /dev/null +++ b/stories/victory-charts/victory-label/background-styles.stories.tsx @@ -0,0 +1,112 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const BackgroundStyles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + (datum.y > 0 ? -5 : 8)} + verticalAnchor="end" + backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }} + backgroundStyle={{ fill: "plum", stroke: "#000000" }} + text={[ + "Victory is awesome.", + "background styles", + "work with dy functions", + ]} + /> + } + /> + (datum.y > 0 ? -5 : 8)} + verticalAnchor="end" + backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }} + backgroundStyle={{ fill: "thistle", stroke: "#000000" }} + text={[ + "Victory is awesome.", + "background styles", + "work with dx functions", + ]} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/config.ts b/stories/victory-charts/victory-label/config.ts new file mode 100644 index 000000000..9fcc56a4a --- /dev/null +++ b/stories/victory-charts/victory-label/config.ts @@ -0,0 +1,54 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryLabel, VictoryScatterProps } from "@/victory"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = React.ComponentProps; + +export const ComponentMeta: Meta> = { + component: VictoryLabel, + decorators: [componentContainer], + + argTypes: { + angle: { control: "number" }, + capHeight: { control: "number" }, + className: { control: "text" }, + desc: { control: "text" }, + direction: { control: "select", options: ["inherit", "rtl", "ltr"] }, + id: { control: "text" }, + inline: { control: "boolean" }, + labelPlacement: { + control: "select", + options: ["parallel", "perpendicular", "vertical"], + }, + lineHeight: { control: "number" }, + polar: { control: "boolean" }, + renderInPortal: { control: "boolean" }, + tabIndex: { control: "number" }, + text: { control: "text" }, + textAnchor: { + control: "select", + options: ["inherit", "start", "middle", "end"], + }, + transform: { control: "text" }, + verticalAnchor: { + control: "select", + options: ["inherit", "start", "middle", "end"], + }, + }, +}; + +export type Story = StoryObj; + +export const defaultScatterProps: VictoryScatterProps = { + style: { + labels: { padding: 0, fontFamily: "arial" }, + data: { fill: "gold" }, + }, + width: 300, + height: 300, + domain: [-10, 10], + data: [{ x: 0, y: 0 }], + labels: () => "Label", + size: 5, +}; diff --git a/stories/victory-charts/victory-label/default-rendering.stories.tsx b/stories/victory-charts/victory-label/default-rendering.stories.tsx new file mode 100644 index 000000000..f5ece0b7a --- /dev/null +++ b/stories/victory-charts/victory-label/default-rendering.stories.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/inline.stories.tsx b/stories/victory-charts/victory-label/inline.stories.tsx new file mode 100644 index 000000000..77530a596 --- /dev/null +++ b/stories/victory-charts/victory-label/inline.stories.tsx @@ -0,0 +1,73 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Inline: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/line-height.stories.tsx b/stories/victory-charts/victory-label/line-height.stories.tsx new file mode 100644 index 000000000..d4f4d6466 --- /dev/null +++ b/stories/victory-charts/victory-label/line-height.stories.tsx @@ -0,0 +1,104 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const LineHeight: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/positioning.stories.tsx b/stories/victory-charts/victory-label/positioning.stories.tsx new file mode 100644 index 000000000..8b93fb6ec --- /dev/null +++ b/stories/victory-charts/victory-label/positioning.stories.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Positioning: Story = { + args: {}, + render: (props) => ( + <> + } + /> + } + /> + } + /> + } + /> + datum.x + 50} + text="dx function" + /> + } + /> + datum.x - 20} + text="dy function" + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-label/styles.stories.tsx b/stories/victory-charts/victory-label/styles.stories.tsx new file mode 100644 index 000000000..1ec887534 --- /dev/null +++ b/stories/victory-charts/victory-label/styles.stories.tsx @@ -0,0 +1,192 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLabel, VictoryScatter } from "@/victory"; +import { defaultScatterProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLabel", +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }} + text={["object", "with", "functions"]} + backgroundStyle={{ stroke: "blue", fill: "none" }} + /> + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }, + ]} + text={["single array", "with", "functions"]} + backgroundStyle={{ stroke: "blue", fill: "none" }} + /> + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }, + { + fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"), + fontFamily: "arial", + }, + ]} + text={["multi array", "with", "functions"]} + backgroundStyle={{ stroke: "blue", fill: "none" }} + /> + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }} + text={["object", "with", "functions"]} + backgroundStyle={[{ stroke: "blue", fill: "none" }]} + /> + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }, + ]} + text={["single array", "with", "functions"]} + backgroundStyle={[{ stroke: "blue", fill: "none" }]} + /> + } + /> + (datum.y === 0 ? 12 : 15), + fontFamily: "arial", + }, + { + fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"), + fontFamily: "arial", + }, + ]} + text={["multi array", "with", "functions"]} + backgroundStyle={[{ stroke: "blue", fill: "none" }]} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-legend/config.ts b/stories/victory-charts/victory-legend/config.ts new file mode 100644 index 000000000..f25a38c6b --- /dev/null +++ b/stories/victory-charts/victory-legend/config.ts @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryLegend, VictoryLegendProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictorySingleLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryLegendProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryLegend, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictorySingleLabelableProps, + + centerTitle: { control: "boolean" }, + itemsPerRow: { control: "number" }, + orientation: { control: "select", options: ["horizontal", "vertical"] }, + rowGutter: { control: "number" }, + symbolSpacer: { control: "number" }, + title: { control: "text" }, + titleOrientation: { control: "select", options: ["top", "bottom"] }, + x: { control: "number" }, + y: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-legend/default.stories.tsx b/stories/victory-charts/victory-legend/default.stories.tsx new file mode 100644 index 000000000..7c542794f --- /dev/null +++ b/stories/victory-charts/victory-legend/default.stories.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryAxis, + VictoryLegend, + VictoryChart, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLegend", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-legend/line-height.stories.tsx b/stories/victory-charts/victory-legend/line-height.stories.tsx new file mode 100644 index 000000000..01fbe417a --- /dev/null +++ b/stories/victory-charts/victory-legend/line-height.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryAxis, + VictoryLegend, + VictoryChart, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLegend", +}; + +export const LineHeight: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-legend/title.stories.tsx b/stories/victory-charts/victory-legend/title.stories.tsx new file mode 100644 index 000000000..c3e24c3c4 --- /dev/null +++ b/stories/victory-charts/victory-legend/title.stories.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; +import { range } from "lodash"; + +import { + VictoryAxis, + VictoryLegend, + VictoryChart, + VictoryTheme, +} from "@/victory"; + +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLegend", +}; + +const getData = (num) => { + return range(num).map((v) => ({ + name: `Series ${v + 1}`, + symbol: { + size: 5, + type: "circle", + fill: undefined, + }, + })); +}; + +export const Title: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/config.ts b/stories/victory-charts/victory-line/config.ts new file mode 100644 index 000000000..da64a9e4d --- /dev/null +++ b/stories/victory-charts/victory-line/config.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryLine, VictoryLineProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryLineProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryLine, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + interpolation: { + control: "select", + options: [ + "basis", + "basisClosed", + "basisOpen", + "bundle", + "cardinal", + "cardinalClosed", + "cardinalOpen", + "catmullRom", + "catmullRomClosed", + "catmullRomOpen", + "linear", + "linearClosed", + "monotoneX", + "monotoneY", + "natural", + "radial", + "step", + "stepAfter", + "stepBefore", + ], + }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-line/data-accessors.stories.tsx b/stories/victory-charts/victory-line/data-accessors.stories.tsx new file mode 100644 index 000000000..2349f7819 --- /dev/null +++ b/stories/victory-charts/victory-line/data-accessors.stories.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const DataAccessors: Story = { + args: {}, + render: (props) => ( + <> + + data.pet + data.wild} + /> + + + data.pet + data.wild} + /> + + + data.pet + data.wild} + /> + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/default.stories.tsx b/stories/victory-charts/victory-line/default.stories.tsx new file mode 100644 index 000000000..abdddd470 --- /dev/null +++ b/stories/victory-charts/victory-line/default.stories.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-line/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..d0a5200bf --- /dev/null +++ b/stories/victory-charts/victory-line/disable-inline-styles.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Curve, VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/events.stories.tsx b/stories/victory-charts/victory-line/events.stories.tsx new file mode 100644 index 000000000..f570bdcf1 --- /dev/null +++ b/stories/victory-charts/victory-line/events.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Events: Story = { + args: {}, + render: (props) => ( + + { + return [ + { + target: "data", + eventKey: "all", + mutation: ({ style }) => { + return style.stroke === "black" + ? null + : { style: { stroke: "black", strokeWidth: 5 } }; + }, + }, + ]; + }, + }, + }, + ]} + data={getData(5, "seed-1")} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/interpolation.stories.tsx b/stories/victory-charts/victory-line/interpolation.stories.tsx new file mode 100644 index 000000000..29961f367 --- /dev/null +++ b/stories/victory-charts/victory-line/interpolation.stories.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + InterpolationPropType, + VictoryLine, + VictoryChart, + VictoryLabel, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Interpolation: Story = { + args: {}, + render: (props) => { + const makeInterpolationChart = (interpolation) => ( + + + + + ); + + return ( + <> + {[ + "basis", + "cardinal", + "catmullRom", + "linear", + "monotoneX", + "monotoneY", + "natural", + "step", + "stepAfter", + "stepBefore", + ].map((interpolation) => makeInterpolationChart(interpolation))} + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/labels.stories.tsx b/stories/victory-charts/victory-line/labels.stories.tsx new file mode 100644 index 000000000..48a7c2300 --- /dev/null +++ b/stories/victory-charts/victory-line/labels.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/log-scale.stories.tsx b/stories/victory-charts/victory-line/log-scale.stories.tsx new file mode 100644 index 000000000..40dec903e --- /dev/null +++ b/stories/victory-charts/victory-line/log-scale.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; + +import { getLogData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const LogScale: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/plotting-functions.stories.tsx b/stories/victory-charts/victory-line/plotting-functions.stories.tsx new file mode 100644 index 000000000..479182b9d --- /dev/null +++ b/stories/victory-charts/victory-line/plotting-functions.stories.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const PlottingFunctions: Story = { + args: {}, + render: (props) => ( + <> + + Math.sin(2 * Math.PI * d.x)} /> + + + Math.sin(2 * Math.PI * d.x)} /> + + + + Math.sin(2 * Math.PI * d.x)} + y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} + /> + + + Math.sin(2 * Math.PI * d.x)} + y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} + /> + + + Math.sin(Math.PI * d.x)} /> + + + Math.sin(Math.PI * d.x)} + y0={(d) => Math.sin(Math.PI * d.x) - 0.5} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/polar-interpolation.stories.tsx b/stories/victory-charts/victory-line/polar-interpolation.stories.tsx new file mode 100644 index 000000000..3c92fb770 --- /dev/null +++ b/stories/victory-charts/victory-line/polar-interpolation.stories.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + InterpolationPropType, + VictoryLine, + VictoryChart, + VictoryLabel, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const PolarInterpolation: Story = { + args: {}, + render: (props) => { + const makeInterpolationChart = (interpolation) => ( + + + + + ); + + return ( + <> + {["basis", "cardinal", "catmullRom", "linear"].map((interpolation) => + makeInterpolationChart(interpolation), + )} + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/polar.stories.tsx b/stories/victory-charts/victory-line/polar.stories.tsx new file mode 100644 index 000000000..4aa44e5a0 --- /dev/null +++ b/stories/victory-charts/victory-line/polar.stories.tsx @@ -0,0 +1,75 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryLine, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Polar: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/stacked.stories.tsx b/stories/victory-charts/victory-line/stacked.stories.tsx new file mode 100644 index 000000000..e2d994119 --- /dev/null +++ b/stories/victory-charts/victory-line/stacked.stories.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryLine, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Stacked: Story = { + args: {}, + render: (props) => ( + <> + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/styles.stories.tsx b/stories/victory-charts/victory-line/styles.stories.tsx new file mode 100644 index 000000000..aa7a46bd1 --- /dev/null +++ b/stories/victory-charts/victory-line/styles.stories.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryLine, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { stroke: "tomato", strokeWidth: 2 }, + }} + /> + + + datum.x} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 }, + ]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/theme.stories.tsx b/stories/victory-charts/victory-line/theme.stories.tsx new file mode 100644 index 000000000..dc860ca0a --- /dev/null +++ b/stories/victory-charts/victory-line/theme.stories.tsx @@ -0,0 +1,75 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryLine, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + /> + + + datum.x}> + + + + + + + + + datum.x} + /> + + + datum.x}> + + + + + + + + + datum.x} + /> + + + datum.x}> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/time-scale.stories.tsx b/stories/victory-charts/victory-line/time-scale.stories.tsx new file mode 100644 index 000000000..8d8c5c1a1 --- /dev/null +++ b/stories/victory-charts/victory-line/time-scale.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryLine, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; + +import { getTimeData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const TimeScale: Story = { + args: {}, + render: (props) => ( + <> + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-line/tooltips.stories.tsx b/stories/victory-charts/victory-line/tooltips.stories.tsx new file mode 100644 index 000000000..7e1f2b507 --- /dev/null +++ b/stories/victory-charts/victory-line/tooltips.stories.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryLine, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryLine", +}; + +export const Tooltips: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/categories.stories.tsx b/stories/victory-charts/victory-pie/categories.stories.tsx new file mode 100644 index 000000000..ee70828eb --- /dev/null +++ b/stories/victory-charts/victory-pie/categories.stories.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Categories: Story = { + args: {}, + render: (props) => ( + <> + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/config.ts b/stories/victory-charts/victory-pie/config.ts new file mode 100644 index 000000000..dc1d547f2 --- /dev/null +++ b/stories/victory-charts/victory-pie/config.ts @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryPie, VictoryPieProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryPieProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryPie, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + cornerRadius: { control: "number" }, + endAngle: { control: "number" }, + innerRadius: { control: "number" }, + labelIndicator: { control: "boolean" }, + labelIndicatorInnerOffset: { control: "number" }, + labelIndicatorOuterOffset: { control: "number" }, + labelPlacement: { + control: "select", + options: ["parallel", "perpendicular", "vertical"], + }, + labelPosition: { + control: "select", + options: ["startAngle", "endAngle", "centroid"], + }, + labelRadius: { control: "number" }, + padAngle: { control: "number" }, + startAngle: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-pie/corner-radius.stories.tsx b/stories/victory-charts/victory-pie/corner-radius.stories.tsx new file mode 100644 index 000000000..de44e715e --- /dev/null +++ b/stories/victory-charts/victory-pie/corner-radius.stories.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const CornerRadius: Story = { + args: {}, + render: (props) => ( + <> + + + datum.x * 5} + innerRadius={100} + data={[ + { x: 1, y: 1 }, + { x: 2, y: 3 }, + { x: 3, y: 5 }, + { x: 4, y: 2 }, + { x: 5, y: 3 }, + ]} + /> + datum.r} + innerRadius={100} + data={[ + { x: 1, y: 1 }, + { x: 2, y: 3 }, + { x: 3, y: 5, r: 15 }, + { x: 4, y: 2 }, + { x: 5, y: 3 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/data.stories.tsx b/stories/victory-charts/victory-pie/data.stories.tsx new file mode 100644 index 000000000..f84964016 --- /dev/null +++ b/stories/victory-charts/victory-pie/data.stories.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Data: Story = { + args: {}, + render: (props) => ( + <> + + data.pet + data.wild} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/default.stories.tsx b/stories/victory-charts/victory-pie/default.stories.tsx new file mode 100644 index 000000000..74f35cd21 --- /dev/null +++ b/stories/victory-charts/victory-pie/default.stories.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-pie/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..7d0af3e6e --- /dev/null +++ b/stories/victory-charts/victory-pie/disable-inline-styles.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Slice, VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +// TODO: uncomment when Slice props are fixed to include className +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + {/* } + /> */} + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/inner-radius.stories.tsx b/stories/victory-charts/victory-pie/inner-radius.stories.tsx new file mode 100644 index 000000000..40061e3aa --- /dev/null +++ b/stories/victory-charts/victory-pie/inner-radius.stories.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const InnerRadius: Story = { + args: {}, + render: (props) => ( + <> + + datum.radius} + innerRadius={({ datum }) => datum.radius - 20} + data={[ + { x: 1, y: 1, radius: 110 }, + { x: 2, y: 3, radius: 120 }, + { x: 3, y: 5, radius: 140 }, + { x: 4, y: 2, radius: 150 }, + { x: 5, y: 3, radius: 130 }, + ]} + /> + datum.y + 10} + labelRadius={({ datum }) => datum.y - 20} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 25 }, + ]} + /> + datum.radius} + data={[ + { x: 1, y: 1, radius: 50 }, + { x: 2, y: 3 }, + { x: 3, y: 5 }, + { x: 4, y: 2 }, + { x: 5, y: 3 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/label-indicator.stories.tsx b/stories/victory-charts/victory-pie/label-indicator.stories.tsx new file mode 100644 index 000000000..8420704da --- /dev/null +++ b/stories/victory-charts/victory-pie/label-indicator.stories.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { LineSegment, VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const LabelIndicator: Story = { + args: {}, + render: (props) => ( + <> + + + + + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/label-placement.stories.tsx b/stories/victory-charts/victory-pie/label-placement.stories.tsx new file mode 100644 index 000000000..54df4e79b --- /dev/null +++ b/stories/victory-charts/victory-pie/label-placement.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme, VictoryTooltip } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const LabelPlacement: Story = { + args: { + data: [ + { x: 1, y: 1, l: 0 }, + { x: 2, y: 1, l: 45 }, + { x: 3, y: 1, l: 90 }, + { x: 4, y: 1, l: 135 }, + { x: 5, y: 1, l: 180 }, + { x: 6, y: 1, l: 225 }, + { x: 7, y: 1, l: 270 }, + { x: 8, y: 1, l: 315 }, + ], + }, + render: (props) => ( + <> + `${datum.l} degrees`} + /> + `${datum.l}\ndegrees`} + /> + `${datum.l} degrees`} + /> + `${datum.l}\ndegrees`} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/label-radius.stories.tsx b/stories/victory-charts/victory-pie/label-radius.stories.tsx new file mode 100644 index 000000000..9c7e9351e --- /dev/null +++ b/stories/victory-charts/victory-pie/label-radius.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const LabelRadius: Story = { + args: {}, + render: (props) => ( + <> + + datum.y} + radius={80} + innerRadius={100} + data={[ + { x: 1, y: 100 }, + { x: 2, y: 130 }, + { x: 3, y: 150 }, + { x: 4, y: 120 }, + { x: 5, y: 130 }, + ]} + /> + datum.r} + innerRadius={100} + data={[ + { x: 1, y: 100 }, + { x: 2, y: 130 }, + { x: 3, y: 150, r: 80 }, + { x: 4, y: 120 }, + { x: 5, y: 130 }, + ]} + /> + datum.r} + innerRadius={100} + labelPosition="startAngle" + data={[ + { x: 1, y: 100 }, + { x: 2, y: 130 }, + { x: 3, y: 150, r: 80 }, + { x: 4, y: 120 }, + { x: 5, y: 130 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/labels.stories.tsx b/stories/victory-charts/victory-pie/labels.stories.tsx new file mode 100644 index 000000000..2c0287083 --- /dev/null +++ b/stories/victory-charts/victory-pie/labels.stories.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `#${index}`} + /> + `#${index}`} + labelPosition="startAngle" + /> + `#${index}`} + labelPosition="endAngle" + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/origin.stories.tsx b/stories/victory-charts/victory-pie/origin.stories.tsx new file mode 100644 index 000000000..9b15c75fe --- /dev/null +++ b/stories/victory-charts/victory-pie/origin.stories.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Origin: Story = { + args: {}, + render: (props) => ( + <> + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/pad-angle.stories.tsx b/stories/victory-charts/victory-pie/pad-angle.stories.tsx new file mode 100644 index 000000000..486b5654b --- /dev/null +++ b/stories/victory-charts/victory-pie/pad-angle.stories.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const PadAngle: Story = { + args: {}, + render: (props) => ( + <> + + + datum.x * 2} + innerRadius={100} + data={[ + { x: 1, y: 1 }, + { x: 2, y: 3 }, + { x: 3, y: 5 }, + { x: 4, y: 2 }, + { x: 5, y: 3 }, + ]} + /> + datum.r} + innerRadius={100} + data={[ + { x: 1, y: 1 }, + { x: 2, y: 3 }, + { x: 3, y: 5, r: 8 }, + { x: 4, y: 2 }, + { x: 5, y: 3 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/radius.stories.tsx b/stories/victory-charts/victory-pie/radius.stories.tsx new file mode 100644 index 000000000..3a856e8d2 --- /dev/null +++ b/stories/victory-charts/victory-pie/radius.stories.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Radius: Story = { + args: {}, + render: (props) => ( + <> + + datum.radius} + data={[ + { x: 1, y: 1, radius: 110 }, + { x: 2, y: 3, radius: 120 }, + { x: 3, y: 5, radius: 140 }, + { x: 4, y: 2, radius: 150 }, + { x: 5, y: 3, radius: 130 }, + ]} + /> + datum.y + 100} + labelRadius={({ datum }) => datum.y + 50} + style={{ + labels: { fill: "white" }, + }} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 25 }, + ]} + /> + datum.y + 100} + labelRadius={({ datum }) => datum.y + 65} + style={{ + labels: { fill: "white" }, + }} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 25 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx b/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx new file mode 100644 index 000000000..6b9df7362 --- /dev/null +++ b/stories/victory-charts/victory-pie/start-and-end-angles.stories.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Helpers, Slice, VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const StartAndEndAngles: Story = { + args: {}, + render: (props) => ( + <> + + + datum.endAngle} + /> + } + labels={() => null} + cornerRadius={5} + radius={({ datum }) => datum.radius} + innerRadius={({ datum }) => datum.innerRadius} + data={[ + { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, + { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, + { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, + { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 360 }, + ]} + /> + + Helpers.radiansToDegrees(slice?.endAngle) - 90 + } + /> + } + labels={() => null} + cornerRadius={5} + radius={({ datum }) => datum.radius} + innerRadius={({ datum }) => datum.innerRadius} + data={[ + { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, + { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, + { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, + { x: "Bird", y: 55, innerRadius: 105, radius: 135 }, + ]} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/styles.stories.tsx b/stories/victory-charts/victory-pie/styles.stories.tsx new file mode 100644 index 000000000..94a13d342 --- /dev/null +++ b/stories/victory-charts/victory-pie/styles.stories.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/theme.stories.tsx b/stories/victory-charts/victory-pie/theme.stories.tsx new file mode 100644 index 000000000..9af7dde15 --- /dev/null +++ b/stories/victory-charts/victory-pie/theme.stories.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-pie/tooltips.stories.tsx b/stories/victory-charts/victory-pie/tooltips.stories.tsx new file mode 100644 index 000000000..98ebbdfc3 --- /dev/null +++ b/stories/victory-charts/victory-pie/tooltips.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPie, VictoryTheme, VictoryTooltip } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPie", +}; + +export const Tooltips: Story = { + args: {}, + render: (props) => ( + <> + } + /> + } + /> + `#${index}`} + labelPosition="startAngle" + labelPlacement="perpendicular" + labelComponent={} + /> + `#${index}`} + labelPosition="endAngle" + labelPlacement="perpendicular" + labelComponent={} + /> + `#${index}`} + labelPosition="startAngle" + labelPlacement="parallel" + labelComponent={} + /> + `#${index}`} + labelPosition="endAngle" + labelPlacement="parallel" + labelComponent={} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx b/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx new file mode 100644 index 000000000..6ca4e630e --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/axis-angle.stories.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const AxisAngle: Story = { + args: {}, + render: (props) => ( + <> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx b/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx new file mode 100644 index 000000000..7ea3fbc5d --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/axis-value.stories.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory"; + +import { getValues } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const AxisValue: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/config.ts b/stories/victory-charts/victory-polar-axis/config.ts new file mode 100644 index 000000000..1a18cd4f4 --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/config.ts @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryPolarAxisProps } from "@/victory"; + +import { + VictoryAxisCommonProps, + VictoryCommonProps, + VictoryDatableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryPolarAxisProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryPolarAxis, + decorators: [componentContainer], + + argTypes: { + ...VictoryAxisCommonProps, + ...VictoryCommonProps, + ...VictoryDatableProps, + + axisAngle: { control: "number" }, + endAngle: { control: "number" }, + innerRadius: { control: "number" }, + labelPlacement: { + control: "select", + options: ["parallel", "perpendicular", "vertical"], + }, + startAngle: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-polar-axis/default.stories.tsx b/stories/victory-charts/victory-polar-axis/default.stories.tsx new file mode 100644 index 000000000..4d1b21a4a --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/default.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/domain.stories.tsx b/stories/victory-charts/victory-polar-axis/domain.stories.tsx new file mode 100644 index 000000000..7c74c975b --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/domain.stories.tsx @@ -0,0 +1,71 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getValues } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/inner-radius.stories.tsx b/stories/victory-charts/victory-polar-axis/inner-radius.stories.tsx new file mode 100644 index 000000000..eca98e18c --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/inner-radius.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getValues } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const InnerRadius: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx b/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx new file mode 100644 index 000000000..661b3850f --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/label-placement.stories.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const LabelPlacement: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/scale.stories.tsx b/stories/victory-charts/victory-polar-axis/scale.stories.tsx new file mode 100644 index 000000000..171634ffa --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/scale.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getTimeValues } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const Scale: Story = { + args: {}, + render: (props) => ( + <> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/start-and-end-angle.stories.tsx b/stories/victory-charts/victory-polar-axis/start-and-end-angle.stories.tsx new file mode 100644 index 000000000..6b8d65a45 --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/start-and-end-angle.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const StartAndEndAngle: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/style.stories.tsx b/stories/victory-charts/victory-polar-axis/style.stories.tsx new file mode 100644 index 000000000..4841d5465 --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/style.stories.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const Style: Story = { + args: {}, + render: (props) => ( + <> + (tick > 0.5 ? "red" : "grey") }, + ticks: { stroke: "grey", size: 5 }, + tickLabels: { fontSize: 15, padding: 5 }, + }} + /> + (tick > 0.5 ? "red" : "grey") }, + ticks: { stroke: "grey", size: 5 }, + tickLabels: { fontSize: 15, padding: 5 }, + }} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/theme.stories.tsx b/stories/victory-charts/victory-polar-axis/theme.stories.tsx new file mode 100644 index 000000000..4527adffc --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/theme.stories.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx b/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx new file mode 100644 index 000000000..cb810cda4 --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/tick-format.stories.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getValues } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const TickFormat: Story = { + args: {}, + render: (props) => ( + <> + + + `#${t}`} + /> + `#${t}`} + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx b/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx new file mode 100644 index 000000000..daf999357 --- /dev/null +++ b/stories/victory-charts/victory-polar-axis/tick-values.stories.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryPolarAxis, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getRandomValues, getValues } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPolarAxis", +}; + +export const TickValues: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-portal/config.ts b/stories/victory-charts/victory-portal/config.ts new file mode 100644 index 000000000..b262a4788 --- /dev/null +++ b/stories/victory-charts/victory-portal/config.ts @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryPortal } from "@/victory"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = React.ComponentProps; + +export const ComponentMeta: Meta = { + component: VictoryPortal, + decorators: [componentContainer], +}; + +export type Story = StoryObj; diff --git a/stories/victory-portal.stories.tsx b/stories/victory-charts/victory-portal/default.stories.tsx similarity index 65% rename from stories/victory-portal.stories.tsx rename to stories/victory-charts/victory-portal/default.stories.tsx index a763bfac1..ff620f725 100644 --- a/stories/victory-portal.stories.tsx +++ b/stories/victory-charts/victory-portal/default.stories.tsx @@ -1,57 +1,60 @@ -import React from "react"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryBar } from "../packages/victory-bar"; -import { VictoryGroup } from "../packages/victory-group"; -import { VictoryLabel, VictoryPortal } from "../packages/victory-core"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryPortal", - component: VictoryPortal, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -export const Default = () => { - return ( -
- - - - - - } - data={[ - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 5 }, - ]} - /> - - - - -
- ); -}; +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryBar, + VictoryPortal, + VictoryChart, + VictoryGroup, + VictoryLabel, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryPortal", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( +
+ + + + + + } + data={[ + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: 5 }, + ]} + /> + + + + +
+ ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx b/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx new file mode 100644 index 000000000..1db17b8b0 --- /dev/null +++ b/stories/victory-charts/victory-scatter/bubble-charts.stories.tsx @@ -0,0 +1,80 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const BubbleCharts: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/config.ts b/stories/victory-charts/victory-scatter/config.ts new file mode 100644 index 000000000..01a3df7a3 --- /dev/null +++ b/stories/victory-charts/victory-scatter/config.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryScatter, VictoryScatterProps } from "@/victory"; + +import { + VictoryCommonProps, + VictoryDatableProps, + VictoryMultiLabelableProps, +} from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; + +type StoryProps = VictoryScatterProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryScatter, + decorators: [componentContainer], + + argTypes: { + ...VictoryCommonProps, + ...VictoryDatableProps, + ...VictoryMultiLabelableProps, + + bubbleProperty: { control: "text" }, + maxBubbleSize: { control: "number" }, + size: { control: "number" }, + }, +}; + +export type Story = StoryObj; diff --git a/stories/victory-charts/victory-scatter/data-accessors.stories.tsx b/stories/victory-charts/victory-scatter/data-accessors.stories.tsx new file mode 100644 index 000000000..929472256 --- /dev/null +++ b/stories/victory-charts/victory-scatter/data-accessors.stories.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const DataAccessors: Story = { + args: { + data: [ + { animal: "Cat", pet: 45, wild: 17 }, + { animal: "Dog", pet: 85, wild: 6 }, + { animal: "Fish", pet: 55, wild: 0 }, + { animal: "Bird", pet: 15, wild: 40 }, + { animal: "Monkey", pet: 5, wild: 40 }, + ], + }, + render: (props) => ( + <> + + datum.animal} + x={"animal"} + y={(data) => data.pet + data.wild} + /> + + + datum.animal} + x={"animal"} + y={(data) => data.pet + data.wild} + /> + + + datum.animal} + x={"animal"} + y={(data) => data.pet + data.wild} + /> + + + + + + + + + + + + Math.sin(2 * Math.PI * d.x)} /> + + + Math.sin(2 * Math.PI * d.x)} /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/default-rendering.stories.tsx b/stories/victory-charts/victory-scatter/default-rendering.stories.tsx new file mode 100644 index 000000000..2450360d5 --- /dev/null +++ b/stories/victory-charts/victory-scatter/default-rendering.stories.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-scatter/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..888e162e2 --- /dev/null +++ b/stories/victory-charts/victory-scatter/disable-inline-styles.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Point, VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/domain.stories.tsx b/stories/victory-charts/victory-scatter/domain.stories.tsx new file mode 100644 index 000000000..f19d270d9 --- /dev/null +++ b/stories/victory-charts/victory-scatter/domain.stories.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Domain: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx b/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx new file mode 100644 index 000000000..f2a702def --- /dev/null +++ b/stories/victory-charts/victory-scatter/functional-symbols.stories.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + ScatterSymbolType, + VictoryScatter, + VictoryChart, + VictoryTheme, +} from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +const SYMBOLS: ScatterSymbolType[] = [ + "circle", + "cross", + "diamond", + "plus", + "minus", + "square", + "star", + "triangleDown", + "triangleUp", +]; + +export const FunctionalSymbols: Story = { + args: {}, + render: (props) => ( + <> + + SYMBOLS[index]} + labels={({ index }) => SYMBOLS[index]} + size={8} + /> + + + SYMBOLS[index]} + labels={({ index }) => SYMBOLS[index]} + size={8} + /> + + + + + + SYMBOLS[index]} + labels={({ index }) => SYMBOLS[index]} + size={8} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/labels.stories.tsx b/stories/victory-charts/victory-scatter/labels.stories.tsx new file mode 100644 index 000000000..531d77d83 --- /dev/null +++ b/stories/victory-charts/victory-scatter/labels.stories.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Labels: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/log-scale.stories.tsx b/stories/victory-charts/victory-scatter/log-scale.stories.tsx new file mode 100644 index 000000000..191fb8ee2 --- /dev/null +++ b/stories/victory-charts/victory-scatter/log-scale.stories.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getLogData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const LogScale: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + /> + + + `x: ${datum.x}`} + /> + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/polar.stories.tsx b/stories/victory-charts/victory-scatter/polar.stories.tsx new file mode 100644 index 000000000..7abe68f9e --- /dev/null +++ b/stories/victory-charts/victory-scatter/polar.stories.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryScatter, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Polar: Story = { + args: {}, + render: (props) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/stacked.stories.tsx b/stories/victory-charts/victory-scatter/stacked.stories.tsx new file mode 100644 index 000000000..10c8ca992 --- /dev/null +++ b/stories/victory-charts/victory-scatter/stacked.stories.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryScatter, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Stacked: Story = { + args: {}, + render: (props) => ( + <> + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + datum.x}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/styles.stories.tsx b/stories/victory-charts/victory-scatter/styles.stories.tsx new file mode 100644 index 000000000..1889e2e64 --- /dev/null +++ b/stories/victory-charts/victory-scatter/styles.stories.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryTheme } from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Styles: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + style={{ + labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, + data: { fill: "tomato" }, + }} + /> + + + (datum.x === "Dog" ? "red" : "black"), + }, + }} + labels={({ datum }) => datum.x} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 }, + ]} + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/symbols.stories.tsx b/stories/victory-charts/victory-scatter/symbols.stories.tsx new file mode 100644 index 000000000..cabca7ca8 --- /dev/null +++ b/stories/victory-charts/victory-scatter/symbols.stories.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + ScatterSymbolType, + VictoryScatter, + VictoryChart, + VictoryTheme, +} from "@/victory"; + +import { getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +const SYMBOLS: ScatterSymbolType[] = [ + "circle", + "cross", + "diamond", + "plus", + "minus", + "square", + "star", + "triangleDown", + "triangleUp", +]; + +export const Symbols: Story = { + args: {}, + render: (props) => { + return ( + <> + {SYMBOLS.map((symbol) => ( +
+ + symbol} + /> + + + symbol} + /> + +
+ ))} + + ); + }, +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/theme.stories.tsx b/stories/victory-charts/victory-scatter/theme.stories.tsx new file mode 100644 index 000000000..99f6335a1 --- /dev/null +++ b/stories/victory-charts/victory-scatter/theme.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryScatter, VictoryChart, VictoryStack, VictoryTheme } from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Theme: Story = { + args: {}, + render: (props) => ( + <> + + datum.x} + /> + + + datum.x}> + + + + + + + + + datum.x} + /> + + + datum.x}> + + + + + + + + + datum.x} + /> + + + datum.x}> + + + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/time-scale.stories.tsx b/stories/victory-charts/victory-scatter/time-scale.stories.tsx new file mode 100644 index 000000000..85d159eb3 --- /dev/null +++ b/stories/victory-charts/victory-scatter/time-scale.stories.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryScatter, + VictoryChart, + VictoryStack, + VictoryTheme, +} from "@/victory"; +import { Story, ComponentMeta } from "./config"; +import { getTimeData } from "../../utils/data"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const TimeScale: Story = { + args: {}, + render: (props) => ( + <> + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()} + /> + + + datum.x.getFullYear()}> + + + + + + + datum.x.getFullYear()}> + + + + + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-scatter/tooltips.stories.tsx b/stories/victory-charts/victory-scatter/tooltips.stories.tsx new file mode 100644 index 000000000..989a5288c --- /dev/null +++ b/stories/victory-charts/victory-scatter/tooltips.stories.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { + VictoryScatter, + VictoryChart, + VictoryTheme, + VictoryTooltip, +} from "@/victory"; + +import { getData, getMixedData } from "../../utils/data"; +import { Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryScatter", +}; + +export const Tooltips: Story = { + args: {}, + render: (props) => ( + <> + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + `x: ${datum.x}`} + labelComponent={} + /> + + + } + /> + + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/center-offset.stories.tsx b/stories/victory-charts/victory-tooltip/center-offset.stories.tsx new file mode 100644 index 000000000..e2c04eb97 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/center-offset.stories.tsx @@ -0,0 +1,162 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const CenterOffset: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + (datum.y < 0 ? 10 : -10), x: 10 }} + text={`function\noffset`} + /> + } + /> + (datum.y < 0 ? -10 : 10), + y: -10, + }} + text={`function\noffset`} + /> + } + /> + (Number(index) < 3 ? -10 : 10), + x: 10, + }} + text={`function\noffset`} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/config.ts b/stories/victory-charts/victory-tooltip/config.ts new file mode 100644 index 000000000..b6afe6e5f --- /dev/null +++ b/stories/victory-charts/victory-tooltip/config.ts @@ -0,0 +1,72 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { VictoryTooltip, VictoryTooltipProps } from "@/victory"; + +import { VictoryLabelableProps } from "../../utils/arg-types"; +import { componentContainer } from "../../utils/decorators"; +import { getData, getMixedData } from "../../utils/data"; + +type StoryProps = VictoryTooltipProps & { + themeKey: string; +}; + +export const ComponentMeta: Meta> = { + component: VictoryTooltip, + decorators: [componentContainer], + + argTypes: { + ...VictoryLabelableProps, + + active: { control: "boolean" }, + activateData: { control: "boolean" }, + angle: { control: "number" }, + cornerRadius: { control: "number" }, + dx: { control: "number" }, + dy: { control: "number" }, + flyoutHeight: { control: "number" }, + flyoutPadding: { control: "number" }, + flyoutWidth: { control: "number" }, + height: { control: "number" }, + horizontal: { control: "boolean" }, + index: { control: "number" }, + pointerOrientation: { + control: "select", + options: ["top", "bottom", "left", "right"], + }, + pointerWidth: { control: "number" }, + renderInPortal: { control: "boolean" }, + text: { control: "text" }, + width: { control: "number" }, + x: { control: "number" }, + y: { control: "number" }, + }, +}; + +export type Story = StoryObj; + +export const defaultBarProps = { + style: { + labels: { fontFamily: "arial" }, + data: { fill: "gold", width: 20 }, + }, + width: 300, + height: 300, + domainPadding: { y: 25 }, + data: getMixedData(5), + labels: () => "Label", + size: 5, +}; + +export const polarBarProps = { + style: { + labels: { fontFamily: "arial" }, + data: { fill: "gold", width: 20 }, + }, + polar: true, + width: 300, + height: 300, + domainPadding: { y: 25 }, + data: getData(5), + labels: () => "Label", + size: 5, +}; diff --git a/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx b/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx new file mode 100644 index 000000000..20c29cb1b --- /dev/null +++ b/stories/victory-charts/victory-tooltip/constrain-to-visible-area.stories.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const ConstrainToVisibleArea: Story = { + args: {}, + render: (props) => ( + <> + (datum.y > 0 ? -40 : 40), + x: ({ datum }) => (datum.y > 0 ? -20 : 20), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} + text={`constrain\nto\nvisible\narea`} + /> + } + /> + (datum.y > 0 ? -60 : 60), + x: ({ datum }) => (datum.y > 0 ? -10 : 10), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} + text={`constrain to\nvisible area`} + /> + } + /> + (datum.y > 0 ? 70 : -70), + y: ({ datum }) => (datum.y > 0 ? -10 : 10), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} + text={`constrain to\nvisible area`} + /> + } + /> + (datum.y > 0 ? 70 : -70), + y: ({ datum }) => (datum.y > 0 ? -10 : 10), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} + text={`constrain\nto\nvisible\narea`} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx b/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx new file mode 100644 index 000000000..04e165735 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/corner-radius.stories.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const CornerRadius: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + (text === "square" ? 0 : 5)} + text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")} + /> + } + /> + (text === "square" ? 0 : 5)} + text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")} + /> + } + /> + (text === "square" ? 0 : 5)} + text={({ index }) => (Number(index) > 2 ? "square" : "rounded ")} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/default.stories.tsx b/stories/victory-charts/victory-tooltip/default.stories.tsx new file mode 100644 index 000000000..3ce264de6 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/default.stories.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const Default: Story = { + args: {}, + render: (props) => ( + <> + } + /> + } + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/disable-inline-styles.stories.tsx b/stories/victory-charts/victory-tooltip/disable-inline-styles.stories.tsx new file mode 100644 index 000000000..3a93de78e --- /dev/null +++ b/stories/victory-charts/victory-tooltip/disable-inline-styles.stories.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { Flyout, VictoryLabel, VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const DisableInlineStyles: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + labelComponent={ + + } + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx new file mode 100644 index 000000000..ee59e7a35 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/flyout-height.stories.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const FlyoutHeight: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + (text === "short" ? 20 : 50)} + text={({ datum }) => (datum.y < 0 ? "short" : "tall")} + /> + } + /> + (text === "short" ? 20 : 50)} + text={({ datum }) => (datum.y < 0 ? "short" : "tall")} + /> + } + /> + (text === "short" ? 20 : 50)} + text={({ index }) => (Number(index) > 2 ? "short" : "tall")} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx new file mode 100644 index 000000000..95c4a6a15 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/flyout-padding.stories.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const FlyoutPadding: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + datum.y > 0 ? { top: 20, left: 15, right: 5 } : 2 + } + text={`flyoutPadding\nfunction`} + /> + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx new file mode 100644 index 000000000..0c616de89 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/flyout-style.stories.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const FlyoutStyle: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx b/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx new file mode 100644 index 000000000..3142abd02 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/flyout-width.stories.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const FlyoutWidth: Story = { + args: {}, + render: (props) => ( + <> + + } + /> + + } + /> + + } + /> + (text === "short" ? 35 : 100)} + text={({ datum }) => (datum.y < 0 ? "short" : "long")} + /> + } + /> + (text === "short" ? 35 : 100)} + text={({ datum }) => (datum.y < 0 ? "short" : "long")} + /> + } + /> + (text === "short" ? 35 : 100)} + text={({ index }) => (Number(index) > 2 ? "short" : "long")} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx new file mode 100644 index 000000000..bcc7f9513 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/pointer-length.stories.tsx @@ -0,0 +1,96 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const PointerLength: Story = { + args: {}, + render: (props) => ( + <> + (index === 0 ? -20 : 0) }} + pointerLength={30} + text={`pointerLength\n30`} + /> + } + /> + (index === 0 ? 20 : 0) }} + text={`pointerLength\n30`} + /> + } + /> + (index === 0 ? 20 : 0) }} + text={`pointerLength\n30`} + /> + } + /> + (Number(index) < 2 ? 20 : 0) }} + pointerLength={({ text }) => (text === "short" ? 1 : 30)} + text={({ datum }) => (datum.y < 0 ? "short" : "long ")} + /> + } + /> + (Number(index) < 2 ? 20 : 0) }} + pointerLength={({ text }) => (text === "short" ? 1 : 30)} + text={({ datum }) => (datum.y < 0 ? "short" : "long ")} + /> + } + /> + (index === 0 || index === 4 ? 20 : 0), + }} + pointerLength={({ text }) => (text === "short" ? 1 : 30)} + text={({ index }) => (Number(index) > 2 ? "short" : "long ")} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx new file mode 100644 index 000000000..716a56466 --- /dev/null +++ b/stories/victory-charts/victory-tooltip/pointer-orientation.stories.tsx @@ -0,0 +1,113 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const PointerOrientation: Story = { + args: {}, + render: (props) => ( + <> + (datum.y > 0 ? "bottom" : "top")} + text={({ datum }) => + datum.y > 0 ? `orientation\nbottom` : `orientation\ntop` + } + /> + } + /> + (datum.y > 0 ? -40 : 40), + x: ({ datum }) => (datum.y > 0 ? -20 : 20), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} + text={({ datum }) => + datum.y > 0 ? `orientation\nbottom` : `orientation\ntop` + } + /> + } + /> + (index < 3 ? "bottom" : "top")} + text={({ index }) => + Number(index) < 3 ? `orientation\nbottom` : `orientation\ntop` + } + /> + } + /> + (datum.y > 0 ? 55 : -55), + }} + pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} + text={({ datum }) => + datum.y > 0 ? `orientation\nleft` : `orientation\nright` + } + /> + } + /> + (datum.y > 0 ? "left" : "right")} + text={({ datum }) => + datum.y > 0 ? `orientation\nleft` : `orientation\nright` + } + /> + } + /> + + + index === 2 || index === 3 ? "right" : "left" + } + text={({ index }) => + index === 2 || index === 3 + ? `orientation\nleft` + : `orientation\nright` + } + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx b/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx new file mode 100644 index 000000000..c8e1d0a6e --- /dev/null +++ b/stories/victory-charts/victory-tooltip/pointer-width.stories.tsx @@ -0,0 +1,96 @@ +import React from "react"; +import type { Meta } from "@storybook/react"; + +import { VictoryTooltip, VictoryBar } from "@/victory"; +import { defaultBarProps, polarBarProps, Story, ComponentMeta } from "./config"; + +const meta: Meta = { + ...ComponentMeta, + title: "Victory Charts/VictoryTooltip", +}; + +export const PointerWidth: Story = { + args: {}, + render: (props) => ( + <> + (index === 0 ? -20 : 0) }} + text={`pointerWidth\n20`} + /> + } + /> + (index === 0 ? 20 : 0) }} + text={`pointerWidth\n20`} + /> + } + /> + (index === 0 ? 20 : 0) }} + text={`pointerWidth\n20`} + /> + } + /> + (Number(index) < 2 ? -20 : 0) }} + pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} + text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")} + /> + } + /> + (Number(index) < 2 ? 20 : 0) }} + pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} + text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")} + /> + } + /> + (index === 0 || index === 4 ? 20 : 0), + }} + pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} + text={({ index }) => (Number(index) > 2 ? "skinny" : "wide ")} + /> + } + /> + + ), +}; + +export default meta; diff --git a/stories/victory-container.stories.tsx b/stories/victory-container.stories.tsx deleted file mode 100644 index b38014710..000000000 --- a/stories/victory-container.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from "react"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryLine } from "../packages/victory-line"; -import { VictoryLabel, VictoryContainer } from "../packages/victory-core"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryContainer", - component: VictoryContainer, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "45%" }, -}; - -const responsiveStyle = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "30%" }, -}; - -export const PreserveAspectRatio = () => { - return ( -
- - - - - } - > - - - - - } - > - - - - - } - > - - - -
- ); -}; - -export const Responsive = () => { - return ( - <> - - - - - } - > - - - - - ); -}; diff --git a/stories/victory-errorbar.stories.tsx b/stories/victory-errorbar.stories.tsx deleted file mode 100644 index 4c40debde..000000000 --- a/stories/victory-errorbar.stories.tsx +++ /dev/null @@ -1,292 +0,0 @@ -import React from "react"; -import { range } from "lodash"; -import seedrandom from "seedrandom"; -import { fromJS } from "immutable"; -import styled from "styled-components"; - -import { VictoryErrorBar, ErrorBar } from "../packages/victory-errorbar"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryLabelStyleObject, - VictoryTheme, -} from "../packages/victory-core"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryErrorBar", - component: VictoryErrorBar, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const getData = (num: number, symmetric = false, seed = "getData") => { - const baseSeed = seedrandom(seed); - const rand = () => baseSeed.quick() * 3; - return range(num).map((v) => { - return { - x: v + 3, - y: baseSeed.quick() * 20 + 5, - errorX: symmetric ? rand() : [rand(), rand()], - errorY: symmetric ? rand() : [rand(), rand()], - }; - }); -}; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const BorderWidth = () => { - return ( - <> - - - - - - - - ); -}; - -export const Data = () => { - return ( - <> - - - - - [d.error, d.error + 2]} - /> - - - [d.error, d.error + 2]} - /> - - - [d.error, d.error + 2]} - /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - - - - } - /> - - - [d.error, d.error + 2]} - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.errorX > datum.errorY ? "red" : "black"), -}; - -export const Style = () => { - return ( - <> - - datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { - fill: "tomato", - fillOpacity: 0.7, - stroke: "tomato", - strokeWidth: 2, - }, - }} - /> - - - - datum.errorX > datum.errorY ? "red" : "black", - }, - }} - labels={({ datum }) => datum.x} - data={getData(4, true)} - /> - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - ); -}; - -const StyledErrorBar = styled(ErrorBar)` - stroke: deeppink; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } - /> - - - ); -}; diff --git a/stories/victory-histogram.stories.tsx b/stories/victory-histogram.stories.tsx deleted file mode 100644 index 824acd9c1..000000000 --- a/stories/victory-histogram.stories.tsx +++ /dev/null @@ -1,599 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; -import styled from "styled-components"; - -import { VictoryHistogram } from "../packages/victory-histogram"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryLine } from "../packages/victory-line"; -import { VictoryScatter } from "../packages/victory-scatter"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { VictoryStack } from "../packages/victory-stack"; -import { - VictoryLabelStyleObject, - VictoryTheme, -} from "../packages/victory-core"; -import { data, timeData } from "./victory-histogram-data"; -import { Bar } from "../packages/victory-bar"; -import * as d3Array from "../packages/victory-vendor/d3-array"; -import * as d3Scale from "../packages/victory-vendor/d3-scale"; -import * as d3Time from "../packages/victory-vendor/d3-time"; - -import { getData } from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryHistogram", - component: VictoryHistogram, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const BinSpacing = () => { - return ( - <> - - - - - - - - - - - - - - ); -}; - -export const Data = () => { - const oneYear = timeData.map(({ x }) => { - const newDate = new Date(x); - newDate.setFullYear(2020); - return { x: newDate }; - }); - - const fourMonths = timeData.map(({ x }, index) => { - const newDate = new Date(x); - newDate.setFullYear(2020); - newDate.setMonth(Math.ceil(index / 200)); - return { x: newDate }; - }); - - const oneMonth = timeData.map(({ x }) => { - const newDate = new Date(x); - newDate.setMonth(4); - newDate.setFullYear(2020); - return { x: newDate }; - }); - - return ( - <> - - - - - - - - - - - - - - ({ value: x }))} - x={({ value }) => value} - /> - - - ({ value: x }))} - x={({ value }) => value} - /> - - - ); -}; - -export const EmptyData = () => { - return ( - <> - - - - - - - - - - - - - - ); -}; - -export const DateBins = () => { - const niceTimeScale = d3Scale - .scaleTime() - .domain(d3Array.extent(timeData, ({ x }) => x)) - .nice(); - - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const NumericBins = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => - datum.binnedData.some(({ x }) => x === 22) ? "palevioletred" : "black", -}; - -export const Styles = () => { - return ( - <> - - - - - (datum.y > 3 ? "red" : "transparent"), - strokeWidth: 3, - opacity: ({ datum }) => (datum.y > 3 ? 1 : 0.4), - }, - }} - labels={["one", "two", "three", "four", "five"]} - /> - - - ); -}; - -export const CornerRadius = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - ); -}; - -export const GetPath = () => { - const verticalPathFn = (props) => { - const { x0, x1, y0, y1 } = props; - return `M ${x0}, ${y0} - L ${(x1 + x0) / 2}, ${y1} - L ${x1}, ${y0} - z`; - }; - - const horizontalPathFn = (props) => { - const { x0, x1, y0, y1 } = props; - return `M ${x0}, ${y1} - L ${x1}, ${(y0 + y1) / 2} - L ${x0}, ${y0} - z`; - }; - - return ( - <> - - - - - - - - ); -}; - -export const Labels = () => { - return ( - <> - - `${datum.x0} - ${datum.x1}`} - /> - - - `${datum.x0} - ${datum.x1}`} - /> - - - - - - - - - `${datum.x0} - ${datum.x1}`} - labelComponent={} - /> - - - } - /> - - - ); -}; - -export const Scale = () => { - return ( - <> - - - `${datum.x0.getFullYear()}\n|\n${datum.x1.getFullYear()}` - } - /> - - - - `${datum.x0.getFullYear()} - ${datum.x1.getFullYear()}` - } - /> - - - - - - - - - ); -}; - -export const MixedCharts = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const Stacked = () => { - const stackedData = [ - ...[50, 30, 100, 32, 50, 10, 49, 78, 20].map((count) => - getData(count, count, 100), - ), - [{ x: 1 }, { x: 3 }, { x: 1 }, { x: 2 }], - ]; - - return ( - <> - - - {stackedData.map((d, index) => ( - - ))} - - - - - {stackedData.map((d, index) => ( - - ))} - - - - - {stackedData.map((d, index) => ( - - ))} - - - - - {stackedData.map((d, index) => ( - - ))} - - - - - ({ a: { b: { c: x } } }))} - x="a.b.c" - /> - {stackedData.map((d, index) => ( - - ))} - - - - - ({ a: { b: { c: x } } }))} - x="a.b.c" - /> - {stackedData.map((d, index) => ( - - ))} - - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - - - ); -}; - -const StyledBar = styled(Bar)` - stroke: black; - fill: teal; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } - /> - - - ); -}; diff --git a/stories/victory-label.stories.tsx b/stories/victory-label.stories.tsx deleted file mode 100644 index 2ef1f6e2b..000000000 --- a/stories/victory-label.stories.tsx +++ /dev/null @@ -1,817 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; - -import { - VictoryScatter, - VictoryScatterProps, -} from "../packages/victory-scatter"; -import { VictoryLabel } from "../packages/victory-core"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryLabel", - component: VictoryLabel, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, - labels: { padding: 0, fontFamily: "arial" }, - data: { fill: "gold" }, -}; - -const defaultScatterProps: VictoryScatterProps = { - style, - width: 300, - height: 300, - domain: [-10, 10], - data: [{ x: 0, y: 0 }], - labels: () => "Label", - size: 5, -}; - -export const DefaultRendering = () => { - return ( - <> - } - /> - - ); -}; - -export const Positioning = () => { - return ( - <> - } - /> - } - /> - } - /> - } - /> - datum.x + 50} text="dx function" /> - } - /> - datum.x - 20} text="dy function" /> - } - /> - - ); -}; - -export const Anchors = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - ); -}; - -export const Styles = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }} - text={["object", "with", "functions"]} - backgroundStyle={{ stroke: "blue", fill: "none" }} - /> - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }, - ]} - text={["single array", "with", "functions"]} - backgroundStyle={{ stroke: "blue", fill: "none" }} - /> - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }, - { - fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"), - fontFamily: "arial", - }, - ]} - text={["multi array", "with", "functions"]} - backgroundStyle={{ stroke: "blue", fill: "none" }} - /> - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }} - text={["object", "with", "functions"]} - backgroundStyle={[{ stroke: "blue", fill: "none" }]} - /> - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }, - ]} - text={["single array", "with", "functions"]} - backgroundStyle={[{ stroke: "blue", fill: "none" }]} - /> - } - /> - (datum.y === 0 ? 12 : 15), - fontFamily: "arial", - }, - { - fill: ({ datum }) => (datum.y === 0 ? "red" : "blue"), - fontFamily: "arial", - }, - ]} - text={["multi array", "with", "functions"]} - backgroundStyle={[{ stroke: "blue", fill: "none" }]} - /> - } - /> - - ); -}; - -export const LineHeight = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - ); -}; - -export const Angles = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - ); -}; - -export const BackgroundStyles = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - (datum.y > 0 ? -5 : 8)} - verticalAnchor="end" - backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }} - backgroundStyle={{ fill: "plum", stroke: "#000000" }} - text={[ - "Victory is awesome.", - "background styles", - "work with dy functions", - ]} - /> - } - /> - (datum.y > 0 ? -5 : 8)} - verticalAnchor="end" - backgroundPadding={{ top: 5, right: 5, bottom: 5, left: 5 }} - backgroundStyle={{ fill: "thistle", stroke: "#000000" }} - text={[ - "Victory is awesome.", - "background styles", - "work with dx functions", - ]} - /> - } - /> - - ); -}; -export const Inline = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - ); -}; - -export const BackgroundPadding = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - ); -}; diff --git a/stories/victory-legend.stories.tsx b/stories/victory-legend.stories.tsx deleted file mode 100644 index 17a2e8a37..000000000 --- a/stories/victory-legend.stories.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import React from "react"; -import { VictoryStyleInterface } from "../packages/victory-core"; -import { VictoryAxis } from "../packages/victory-axis"; -import { VictoryChart, VictoryChartProps } from "../packages/victory-chart"; -import { VictoryLegend } from "../packages/victory-legend"; -import { range } from "lodash"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryLegend", - component: VictoryLegend, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, - data: { fill: "gold", width: 20 }, -}; - -const defaultChartProps: VictoryChartProps = { - style, - width: 300, - height: 300, - domain: [0, 10], -}; - -const legendStyle: VictoryStyleInterface = { - labels: { fontSize: 14, fontFamily: "Arial" }, - border: { fill: "pink", opacity: 0.4 }, -}; - -const getData = (num) => { - return range(num).map((v) => ({ - name: `Series ${v + 1}`, - symbol: { - size: 5, - type: "circle", - fill: undefined, - }, - })); -}; - -const Wrapper = ({ children }) => { - return ( - - - {children} - - ); -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - ); -}; - -export const LineHeight = () => { - return ( - <> - - - - - - - - ); -}; - -export const Title = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/stories/victory-line.stories.tsx b/stories/victory-line.stories.tsx deleted file mode 100644 index d0a092748..000000000 --- a/stories/victory-line.stories.tsx +++ /dev/null @@ -1,543 +0,0 @@ -import { Meta } from "@storybook/react"; -import { fromJS } from "immutable"; -import styled from "styled-components"; -import React from "react"; - -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryLine, Curve } from "../packages/victory-line"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryTheme, - VictoryLabel, - VictoryLabelStyleObject, -} from "../packages/victory-core"; -import { getData, getMixedData, getTimeData, getLogData } from "./data"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryLine", - component: VictoryLine, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const Theme = () => { - return ( - <> - - datum.x} /> - - - datum.x}> - - - - - - - - - datum.x} /> - - - datum.x}> - - - - - - - - - ); -}; - -export const Interpolation = () => { - const makeInterpolationChart = (interpolation) => ( - - - - - ); - - return ( - <> - {[ - "basis", - "cardinal", - "catmullRom", - "linear", - "monotoneX", - "monotoneY", - "natural", - "step", - "stepAfter", - "stepBefore", - ].map((interpolation) => makeInterpolationChart(interpolation))} - - ); -}; -export const PolarInterpolation = () => { - const makeInterpolationChart = (interpolation) => ( - - - - - ); - - return ( - <> - {["basis", "cardinal", "catmullRom", "linear"].map((interpolation) => - makeInterpolationChart(interpolation), - )} - - ); -}; - -export const DataAccessors = () => { - return ( - <> - - data.pet + data.wild} - /> - - - data.pet + data.wild} - /> - - - data.pet + data.wild} - /> - - - - - - - - - - - - - - - ); -}; - -export const PlottingFunctions = () => { - return ( - <> - - Math.sin(2 * Math.PI * d.x)} /> - - - Math.sin(2 * Math.PI * d.x)} /> - - - - Math.sin(2 * Math.PI * d.x)} - y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} - /> - - - Math.sin(2 * Math.PI * d.x)} - y0={(d) => Math.sin(2 * Math.PI * d.x) - 0.5} - /> - - - Math.sin(Math.PI * d.x)} /> - - - Math.sin(Math.PI * d.x)} - y0={(d) => Math.sin(Math.PI * d.x) - 0.5} - /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - - - - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - } - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Styles = () => { - return ( - <> - - datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { stroke: "tomato", strokeWidth: 2 }, - }} - /> - - - datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const Stacked = () => { - return ( - <> - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - ); -}; -export const TimeScale = () => { - return ( - <> - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - ); -}; - -export const LogScale = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - `x: ${datum.x}`} - /> - - - - - - ); -}; - -export const Polar = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -const StyledCurve = styled(Curve)` - stroke: purple; - stroke-width: 10px; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } /> - - - ); -}; - -export const Events = () => { - return ( - - { - return [ - { - target: "data", - eventKey: "all", - mutation: ({ style }) => { - return style.stroke === "black" - ? null - : { style: { stroke: "black", strokeWidth: 5 } }; - }, - }, - ]; - }, - }, - }, - ]} - data={getData(5, "seed-1")} - /> - - ); -}; diff --git a/stories/victory-pie.stories.tsx b/stories/victory-pie.stories.tsx deleted file mode 100644 index 79328c9aa..000000000 --- a/stories/victory-pie.stories.tsx +++ /dev/null @@ -1,644 +0,0 @@ -import React from "react"; -import { VictoryPie, Slice } from "../packages/victory-pie"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { LineSegment, VictoryTheme, Helpers } from "../packages/victory-core"; -import { fromJS } from "immutable"; -import styled from "styled-components"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryPie", - component: VictoryPie, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - ); -}; - -export const Categories = () => { - return ( - <> - - - - ); -}; - -export const Data = () => { - return ( - <> - - data.pet + data.wild} - /> - - - ); -}; - -export const Radius = () => { - return ( - <> - - datum.radius} - data={[ - { x: 1, y: 1, radius: 110 }, - { x: 2, y: 3, radius: 120 }, - { x: 3, y: 5, radius: 140 }, - { x: 4, y: 2, radius: 150 }, - { x: 5, y: 3, radius: 130 }, - ]} - /> - datum.y + 100} - labelRadius={({ datum }) => datum.y + 50} - style={{ - ...parentStyle, - labels: { fill: "white" }, - }} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 25 }, - ]} - /> - datum.y + 100} - labelRadius={({ datum }) => datum.y + 65} - style={{ - ...parentStyle, - labels: { fill: "white" }, - }} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 25 }, - ]} - /> - - ); -}; - -export const InnerRadius = () => { - return ( - <> - - datum.radius} - innerRadius={({ datum }) => datum.radius - 20} - data={[ - { x: 1, y: 1, radius: 110 }, - { x: 2, y: 3, radius: 120 }, - { x: 3, y: 5, radius: 140 }, - { x: 4, y: 2, radius: 150 }, - { x: 5, y: 3, radius: 130 }, - ]} - /> - datum.y + 10} - labelRadius={({ datum }) => datum.y - 20} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 25 }, - ]} - /> - datum.radius} - data={[ - { x: 1, y: 1, radius: 50 }, - { x: 2, y: 3 }, - { x: 3, y: 5 }, - { x: 4, y: 2 }, - { x: 5, y: 3 }, - ]} - /> - - ); -}; - -export const CornerRadius = () => { - return ( - <> - - - datum.x * 5} - innerRadius={100} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 3 }, - { x: 3, y: 5 }, - { x: 4, y: 2 }, - { x: 5, y: 3 }, - ]} - /> - datum.r} - innerRadius={100} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 3 }, - { x: 3, y: 5, r: 15 }, - { x: 4, y: 2 }, - { x: 5, y: 3 }, - ]} - /> - - ); -}; - -export const PadAngle = () => { - return ( - <> - - - datum.x * 2} - innerRadius={100} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 3 }, - { x: 3, y: 5 }, - { x: 4, y: 2 }, - { x: 5, y: 3 }, - ]} - /> - datum.r} - innerRadius={100} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 3 }, - { x: 3, y: 5, r: 8 }, - { x: 4, y: 2 }, - { x: 5, y: 3 }, - ]} - /> - - ); -}; - -export const Labels = () => { - return ( - <> - - `#${index}`} /> - `#${index}`} - labelPosition="startAngle" - /> - `#${index}`} - labelPosition="endAngle" - /> - `#${index}`} - labelPosition={({ index }) => (index ? undefined : "startAngle")} - /> - - ); -}; - -export const Tooltips = () => { - return ( - <> - } - /> - } - /> - `#${index}`} - labelPosition="startAngle" - labelPlacement="perpendicular" - labelComponent={} - /> - `#${index}`} - labelPosition="endAngle" - labelPlacement="parallel" - labelComponent={} - /> - `#${index}`} - labelPlacement="parallel" - labelPosition={({ index }) => (index ? undefined : "startAngle")} - labelComponent={} - /> - - ); -}; - -export const LabelRadius = () => { - return ( - <> - - datum.y} - radius={80} - innerRadius={100} - data={[ - { x: 1, y: 100 }, - { x: 2, y: 130 }, - { x: 3, y: 150 }, - { x: 4, y: 120 }, - { x: 5, y: 130 }, - ]} - /> - datum.r} - innerRadius={100} - data={[ - { x: 1, y: 100 }, - { x: 2, y: 130 }, - { x: 3, y: 150, r: 80 }, - { x: 4, y: 120 }, - { x: 5, y: 130 }, - ]} - /> - datum.r} - innerRadius={100} - labelPosition="startAngle" - data={[ - { x: 1, y: 100 }, - { x: 2, y: 130 }, - { x: 3, y: 150, r: 80 }, - { x: 4, y: 120 }, - { x: 5, y: 130 }, - ]} - /> - - ); -}; - -export const Styles = () => { - return ( - <> - - - (index === 4 ? 25 : 15), - }, - data: { - stroke: ({ index }) => (index === 4 ? "red" : undefined), - strokeWidth: 3, - }, - }} - /> - - - ); -}; - -export const StartAndEndAngles = () => { - return ( - <> - - - datum.endAngle} - /> - } - labels={() => null} - cornerRadius={5} - radius={({ datum }) => datum.radius} - innerRadius={({ datum }) => datum.innerRadius} - data={[ - { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, - { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, - { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, - { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 360 }, - ]} - /> - - Helpers.radiansToDegrees(slice.endAngle) - 90 - } - /> - } - labels={() => null} - cornerRadius={5} - radius={({ datum }) => datum.radius} - innerRadius={({ datum }) => datum.innerRadius} - data={[ - { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, - { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, - { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, - { x: "Bird", y: 55, innerRadius: 105, radius: 135 }, - ]} - /> - - ); -}; - -export const Origin = () => { - return ( - <> - - - - - ); -}; - -export const LabelPlacement = () => { - return ( - <> - `${datum.l} degrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - (index ? "parallel" : "perpendicular")} - labelRadius={({ index }) => (index ? 50 : undefined)} - labels={({ datum }) => `${datum.l} degrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - `${datum.l}\ndegrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - } - labels={({ datum }) => `${datum.l}\ndegrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - - ); -}; - -const StyledSlice = styled(Slice)` - fill: pink; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - } - /> - - ); -}; - -export const LabelIndicator = () => { - return ( - <> - - - - - - } - /> - - } - /> - - ); -}; diff --git a/stories/victory-polar-axis.stories.tsx b/stories/victory-polar-axis.stories.tsx deleted file mode 100644 index da358af3e..000000000 --- a/stories/victory-polar-axis.stories.tsx +++ /dev/null @@ -1,343 +0,0 @@ -import { Meta } from "@storybook/react"; -import React from "react"; -import { range } from "lodash"; -import seedrandom from "seedrandom"; - -import { VictoryPolarAxis } from "../packages/victory-polar-axis"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTheme } from "../packages/victory-core"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryPolarAxis", - component: VictoryPolarAxis, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultAxisProps = { style: parentStyle, theme: VictoryTheme.material }; - -const getTimeValues = (num) => { - const current = 1523389495000; - return range(num).map((v) => { - return new Date((current / num) * (v + 1)); - }); -}; - -const getValues = (num, min = 0, step = 1) => { - return range(num).map((v) => v * step + min); -}; - -const getRandomValues = (num, seed = "random") => { - const baseSeed = seedrandom(seed); - const rand = () => Math.round(baseSeed.quick() * 100); - const result = range(num).map(() => rand()); - return result.sort((a, b) => a - b); -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - ); -}; - -export const TickValues = () => { - return ( - <> - - - - - - - - ); -}; - -export const TickFormat = () => { - return ( - <> - - - `#${t}`} - /> - `#${t}`} - /> - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const AxisAngle = () => { - return ( - <> - - - - - - ); -}; - -export const AxisValue = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const StartAndEndAngle = () => { - return ( - <> - - - - - - - - ); -}; - -export const InnerRadius = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const LabelPlacement = () => { - return ( - <> - - - - - - - - ); -}; - -export const Style = () => { - return ( - <> - (tick > 0.5 ? "red" : "grey") }, - ticks: { stroke: "grey", size: 5 }, - tickLabels: { fontSize: 15, padding: 5 }, - }} - /> - (tick > 0.5 ? "red" : "grey") }, - ticks: { stroke: "grey", size: 5 }, - tickLabels: { fontSize: 15, padding: 5 }, - }} - /> - - ); -}; - -export const Scale = () => { - return ( - <> - - - - - - ); -}; diff --git a/stories/victory-scatter.stories.tsx b/stories/victory-scatter.stories.tsx deleted file mode 100644 index 394d840d2..000000000 --- a/stories/victory-scatter.stories.tsx +++ /dev/null @@ -1,581 +0,0 @@ -import React from "react"; -import { VictoryStack } from "../packages/victory-stack"; -import { VictoryScatter } from "../packages/victory-scatter"; -import { VictoryChart } from "../packages/victory-chart"; -import { VictoryTooltip } from "../packages/victory-tooltip"; -import { - VictoryTheme, - Point, - ScatterSymbolType, - VictoryLabelStyleObject, -} from "../packages/victory-core"; -import { getData, getMixedData, getTimeData, getLogData } from "./data"; -import { fromJS } from "immutable"; -import styled from "styled-components"; -import { Meta } from "@storybook/react"; -import { storyContainer } from "./decorators"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryScatter", - component: VictoryScatter, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const SYMBOLS: ScatterSymbolType[] = [ - "circle", - "cross", - "diamond", - "plus", - "minus", - "square", - "star", - "triangleDown", - "triangleUp", -]; - -const parentStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const defaultChartProps = { - style: parentStyle, - theme: VictoryTheme.material, -}; - -export const DefaultRendering = () => { - return ( - <> - - - - - - - - - - ); -}; - -export const Theme = () => { - return ( - <> - - datum.x} - /> - - - datum.x}> - - - - - - - - - datum.x} - /> - - - datum.x}> - - - - - - - - - ); -}; - -export const Symbols = () => { - return SYMBOLS.map((symbol) => ( -
- - symbol} - /> - - - symbol} - /> - -
- )); -}; - -export const FunctionalSymbols = () => { - return ( - <> - - SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - - - - SYMBOLS[index]} - labels={({ index }) => SYMBOLS[index]} - size={8} - /> - - - ); -}; - -export const BubbleCharts = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const DataAccessors = () => { - return ( - <> - - datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - datum.animal} - x={"animal"} - y={(data) => data.pet + data.wild} - /> - - - - - - - - - - - - Math.sin(2 * Math.PI * d.x)} /> - - - Math.sin(2 * Math.PI * d.x)} /> - - - ); -}; - -export const Labels = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - - - - - - - ); -}; - -export const Tooltips = () => { - return ( - <> - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - `x: ${datum.x}`} - labelComponent={} - /> - - - } - /> - - - ); -}; - -const labelStyle: VictoryLabelStyleObject = { - fill: ({ datum }) => (datum.x === "Dog" ? "red" : "black"), -}; - -export const Styles = () => { - return ( - <> - - datum.x} - style={{ - labels: { fontSize: 20, fill: "tomato", fontFamily: "monospace" }, - data: { fill: "tomato" }, - }} - /> - - - (datum.x === "Dog" ? "red" : "black"), - }, - }} - labels={({ datum }) => datum.x} - data={[ - { x: "Cat", y: 62 }, - { x: "Dog", y: 91 }, - { x: "Fish", y: 55 }, - { x: "Bird", y: 55 }, - ]} - /> - - - ); -}; - -export const Stacked = () => { - return ( - <> - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - datum.x}> - - - - - - - ); -}; -export const TimeScale = () => { - return ( - <> - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()} - /> - - - datum.x.getFullYear()}> - - - - - - - datum.x.getFullYear()}> - - - - - - - ); -}; - -export const LogScale = () => { - return ( - <> - - `x: ${datum.x}`} - /> - - - `x: ${datum.x}`} - /> - - - - - - ); -}; - -export const Polar = () => { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export const Domain = () => { - return ( - <> - - - - - - - - - ); -}; - -const StyledPoint = styled(Point)` - fill: darkmagenta; -`; - -export const DisableInlineStyles = () => { - return ( - <> - - - - - } /> - - - ); -}; diff --git a/stories/victory-tooltip.stories.tsx b/stories/victory-tooltip.stories.tsx deleted file mode 100644 index 6ae8257a5..000000000 --- a/stories/victory-tooltip.stories.tsx +++ /dev/null @@ -1,797 +0,0 @@ -import React from "react"; -import { VictoryBar } from "../packages/victory-bar"; -import { VictoryTooltip, Flyout } from "../packages/victory-tooltip"; -import { VictoryLabel } from "../packages/victory-core"; -import { getData, getMixedData } from "./data"; -import styled from "styled-components"; -import { storyContainer } from "./decorators"; -import { Meta } from "@storybook/react"; - -const meta: Meta = { - title: "Victory Charts/SVG Container/VictoryTooltip", - component: VictoryTooltip, - parameters: { - chromatic: { viewports: [1200] }, - }, - tags: ["autodocs"], - decorators: [storyContainer], -}; - -export default meta; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, - labels: { fontFamily: "arial" }, - data: { fill: "gold", width: 20 }, -}; - -const defaultBarProps = { - style, - width: 300, - height: 300, - domainPadding: { y: 25 }, - data: getMixedData(5), - labels: () => "Label", - size: 5, -}; - -const polarBarProps = { - style, - polar: true, - width: 300, - height: 300, - domainPadding: { y: 25 }, - data: getData(5), - labels: () => "Label", - size: 5, -}; - -export const DefaultRendering = () => { - return ( - <> - } - /> - } - /> - } - /> - - ); -}; - -export const CenterOffset = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - (datum.y < 0 ? 10 : -10), x: 10 }} - text={`function\noffset`} - /> - } - /> - (datum.y < 0 ? -10 : 10), - y: -10, - }} - text={`function\noffset`} - /> - } - /> - (Number(index) < 3 ? -10 : 10), - x: 10, - }} - text={`function\noffset`} - /> - } - /> - - ); -}; - -export const PointerOrientation = () => { - return ( - <> - (datum.y > 0 ? "bottom" : "top")} - text={({ datum }) => - datum.y > 0 ? `orientation\nbottom` : `orientation\ntop` - } - /> - } - /> - (datum.y > 0 ? -40 : 40), - x: ({ datum }) => (datum.y > 0 ? -20 : 20), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} - text={({ datum }) => - datum.y > 0 ? `orientation\nbottom` : `orientation\ntop` - } - /> - } - /> - (index < 3 ? "bottom" : "top")} - text={({ index }) => - Number(index) < 3 ? `orientation\nbottom` : `orientation\ntop` - } - /> - } - /> - (datum.y > 0 ? 55 : -55), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} - text={({ datum }) => - datum.y > 0 ? `orientation\nleft` : `orientation\nright` - } - /> - } - /> - (datum.y > 0 ? "left" : "right")} - text={({ datum }) => - datum.y > 0 ? `orientation\nleft` : `orientation\nright` - } - /> - } - /> - - - index === 2 || index === 3 ? "right" : "left" - } - text={({ index }) => - index === 2 || index === 3 - ? `orientation\nleft` - : `orientation\nright` - } - /> - } - /> - - ); -}; - -export const ConstrainToVisibleArea = () => { - return ( - <> - (datum.y > 0 ? -40 : 40), - x: ({ datum }) => (datum.y > 0 ? -20 : 20), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} - text={`constrain\nto\nvisible\narea`} - /> - } - /> - (datum.y > 0 ? -60 : 60), - x: ({ datum }) => (datum.y > 0 ? -10 : 10), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "bottom" : "top")} - text={`constrain to\nvisible area`} - /> - } - /> - (datum.y > 0 ? 70 : -70), - y: ({ datum }) => (datum.y > 0 ? -10 : 10), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} - text={`constrain to\nvisible area`} - /> - } - /> - (datum.y > 0 ? 70 : -70), - y: ({ datum }) => (datum.y > 0 ? -10 : 10), - }} - pointerOrientation={({ datum }) => (datum.y > 0 ? "left" : "right")} - text={`constrain\nto\nvisible\narea`} - /> - } - /> - - ); -}; - -export const FlyoutHeight = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - (text === "short" ? 20 : 50)} - text={({ datum }) => (datum.y < 0 ? "short" : "tall")} - /> - } - /> - (text === "short" ? 20 : 50)} - text={({ datum }) => (datum.y < 0 ? "short" : "tall")} - /> - } - /> - (text === "short" ? 20 : 50)} - text={({ index }) => (Number(index) > 2 ? "short" : "tall")} - /> - } - /> - - ); -}; - -export const FlyoutWidth = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - (text === "short" ? 35 : 100)} - text={({ datum }) => (datum.y < 0 ? "short" : "long")} - /> - } - /> - (text === "short" ? 35 : 100)} - text={({ datum }) => (datum.y < 0 ? "short" : "long")} - /> - } - /> - (text === "short" ? 35 : 100)} - text={({ index }) => (Number(index) > 2 ? "short" : "long")} - /> - } - /> - - ); -}; - -export const PointerWidth = () => { - return ( - <> - (index === 0 ? -20 : 0) }} - text={`pointerWidth\n20`} - /> - } - /> - (index === 0 ? 20 : 0) }} - text={`pointerWidth\n20`} - /> - } - /> - (index === 0 ? 20 : 0) }} - text={`pointerWidth\n20`} - /> - } - /> - (Number(index) < 2 ? -20 : 0) }} - pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} - text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")} - /> - } - /> - (Number(index) < 2 ? 20 : 0) }} - pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} - text={({ datum }) => (datum.y < 0 ? "skinny" : "wide ")} - /> - } - /> - (index === 0 || index === 4 ? 20 : 0), - }} - pointerWidth={({ text }) => (text === "skinny" ? 0 : 20)} - text={({ index }) => (Number(index) > 2 ? "skinny" : "wide ")} - /> - } - /> - - ); -}; - -export const PointerLength = () => { - return ( - <> - (index === 0 ? -20 : 0) }} - pointerLength={30} - text={`pointerLength\n30`} - /> - } - /> - (index === 0 ? 20 : 0) }} - text={`pointerLength\n30`} - /> - } - /> - (index === 0 ? 20 : 0) }} - text={`pointerLength\n30`} - /> - } - /> - (Number(index) < 2 ? 20 : 0) }} - pointerLength={({ text }) => (text === "short" ? 1 : 30)} - text={({ datum }) => (datum.y < 0 ? "short" : "long ")} - /> - } - /> - (Number(index) < 2 ? 20 : 0) }} - pointerLength={({ text }) => (text === "short" ? 1 : 30)} - text={({ datum }) => (datum.y < 0 ? "short" : "long ")} - /> - } - /> - (index === 0 || index === 4 ? 20 : 0), - }} - pointerLength={({ text }) => (text === "short" ? 1 : 30)} - text={({ index }) => (Number(index) > 2 ? "short" : "long ")} - /> - } - /> - - ); -}; - -export const CornerRadius = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - (text === "square" ? 0 : 5)} - text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")} - /> - } - /> - (text === "square" ? 0 : 5)} - text={({ datum }) => (datum.y < 0 ? "square" : "rounded ")} - /> - } - /> - (text === "square" ? 0 : 5)} - text={({ index }) => (Number(index) > 2 ? "square" : "rounded ")} - /> - } - /> - - ); -}; - -export const FlyoutStyle = () => { - return ( - <> - - } - /> - - } - /> - - } - /> - - ); -}; - -export const FlyoutPadding = () => { - return ( - <> - - } - /> - - } - /> - - datum.y > 0 ? { top: 20, left: 15, right: 5 } : 2 - } - text={`flyoutPadding\nfunction`} - /> - } - /> - - } - /> - - ); -}; - -const StyledFlyout = styled(Flyout)` - fill: aquamarine; -`; - -const StyledLabel = styled(VictoryLabel)` - fill: blue; -`; - -export const DisableInlineStyles = () => { - return ( - <> - } - /> - } - labelComponent={} - /> - } - /> - - ); -}; diff --git a/tsconfig.storybook.json b/tsconfig.storybook.json new file mode 100644 index 000000000..d4f038c02 --- /dev/null +++ b/tsconfig.storybook.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "include": ["stories/**/*"], + "compilerOptions": { + "noEmit": true + } +} 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