diff --git a/.eslintignore b/.eslintignore index b0179da65c..ebb7479652 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,6 +5,7 @@ docs/docs-components/metadata.js flow-typed node_modules packages/gestalt/dist +packages/gestalt-charts/dist packages/gestalt-datepicker/dist packages/eslint-plugin-gestalt/dist packages/eslint-plugin-gestalt/src/__fixtures__ diff --git a/.github/pr-title-checker-config.json b/.github/pr-title-checker-config.json index 56557b6681..80dd182960 100644 --- a/.github/pr-title-checker-config.json +++ b/.github/pr-title-checker-config.json @@ -11,7 +11,7 @@ "ESLint plugin: ", "Tokens: " ], - "regexp": "^(?=.*(?:ActivationCard|Avatar|AvatarGroup|Badge|Box|Button|ButtonGroup|Callout|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|Module|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|SlimBanner|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextArea|TextField|TileData|Toast|Tooltip|Upsell|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+", + "regexp": "^(?=.*(?:ActivationCard|Avatar|AvatarGroup|Badge|Box|Button|ButtonGroup|Callout|Chart|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|Image|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|Module|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|SlimBanner|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextArea|TextField|TileData|Toast|Tooltip|Upsell|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+", "regexpFlags": "", "ignoreLabels": [] }, diff --git a/.github/workflows/alpha.yml b/.github/workflows/alpha.yml index da9e122d0d..152facf0ea 100644 --- a/.github/workflows/alpha.yml +++ b/.github/workflows/alpha.yml @@ -56,6 +56,8 @@ jobs: cd packages/gestalt-design-tokens yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha cd ../gestalt + yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha + cd ../gestalt-charts yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha cd ../gestalt-datepicker yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.pre_release.outputs.VERSION }} --tag alpha diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 94dcedbb30..4ab659232e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -86,6 +86,8 @@ jobs: cd packages/gestalt-design-tokens yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }} cd ../gestalt + yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }} + cd ../gestalt-charts yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }} cd ../gestalt-datepicker yarn publish --registry=https://registry.npmjs.org --no-git-tag-version --new-version ${{ steps.release.outputs.VERSION }} diff --git a/.gitignore b/.gitignore index e9876a9bb4..24a3d7b348 100644 --- a/.gitignore +++ b/.gitignore @@ -12,14 +12,17 @@ screenshots package-lock.json packages/gestalt/dist/* +packages/gestalt-charts/dist/* packages/gestalt-datepicker/dist/* packages/eslint-plugin-gestalt/dist/* packages/gestalt-design-tokens/dist # the following files as they are maintained by hand !packages/gestalt/dist/gestalt.js.flow +!packages/gestalt-charts/dist/gestalt-charts.js.flow +!packages/gestalt-datepicker/dist/gestalt-datepicker.js.flow !packages/gestalt/dist/index.d.ts -!packages/gestalt/dist/gestalt-datepicker.js.flow +!packages/gestalt-charts/dist/index.d.ts !packages/gestalt-datepicker/dist/index.d.ts playwright/test-results diff --git a/README.md b/README.md index ed9b98735d..ddac5afb36 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ The package can be installed via npm: ```bash npm i gestalt --save +npm i gestalt-charts --save npm i gestalt-datepicker --save ``` @@ -17,6 +18,7 @@ Or via yarn: ```bash yarn add gestalt +yarn add gestalt-charts yarn add gestalt-datepicker ``` @@ -27,6 +29,8 @@ Gestalt exports each component as ES6 modules and a single, precompiled CSS file ```js import { Text } from 'gestalt'; import 'gestalt/dist/gestalt.css'; +import 'gestalt/dist/gestalt-charts.css'; +import 'gestalt/dist/gestalt-datepicker.css'; ``` That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS. diff --git a/docs/docs-components/DevelopmentEditor.js b/docs/docs-components/DevelopmentEditor.js index 6befef2643..67b161f05b 100644 --- a/docs/docs-components/DevelopmentEditor.js +++ b/docs/docs-components/DevelopmentEditor.js @@ -3,6 +3,7 @@ import { type Node } from 'react'; import { LiveError, LivePreview, LiveProvider } from 'react-live'; import { Box, Flex, HelpButton, Link, Text } from 'gestalt'; import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace +import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace import { useAppContext } from './appContext.js'; import theme from './atomDark.js'; @@ -40,7 +41,7 @@ const reactImports = [ const reactRegex = new RegExp(`(${reactImports.join('|')})`, 'g'); -const importsToRemove = ['gestalt', 'gestalt-datepicker', 'react']; +const importsToRemove = ['gestalt', 'gestalt-charts', 'gestalt-datepicker', 'react']; const importsToRemoveRegex = new RegExp( `import (.|\n)*(${importsToRemove.map((item) => `'${item}'`).join('|')});`, @@ -54,7 +55,7 @@ export default function DevelopmentEditor({ code }: {| code: ?string | (() => No return null; } - const scope = { ...gestalt, ...gestaltDatepicker }; + const scope = { ...gestalt, ...gestaltChart, ...gestaltDatepicker }; const codeFileCleaned = code ?.toString() diff --git a/docs/docs-components/Example.js b/docs/docs-components/Example.js index 3b239389bd..d3be3d138b 100644 --- a/docs/docs-components/Example.js +++ b/docs/docs-components/Example.js @@ -2,6 +2,7 @@ import { type Node } from 'react'; import { LiveError, LivePreview, LiveProvider } from 'react-live'; import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace +import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace import theme from './atomDark.js'; import Card from './Card.js'; @@ -31,7 +32,7 @@ function Example({ skipContrastCheck = false, }: Props): Node { const code = defaultCode.trim(); - const scope = { ...gestalt, ...gestaltDatepicker }; + const scope = { ...gestalt, ...gestaltChart, ...gestaltDatepicker }; return ( { - const packageName = componentName === 'DatePicker' ? 'gestalt-datepicker' : 'gestalt'; + let packageName = 'gestalt'; + + if (gestaltChartComponents.includes(componentName)) { + packageName = 'gestalt-charts'; + } + + if (gestaltDatepickerComponents.includes(componentName)) { + packageName = 'gestalt-datepicker'; + } return `packages/${packageName}/src/${componentName}.js`; }; diff --git a/docs/docs-components/SandpackExample.js b/docs/docs-components/SandpackExample.js index 05a1c20217..df6fac1d10 100644 --- a/docs/docs-components/SandpackExample.js +++ b/docs/docs-components/SandpackExample.js @@ -173,6 +173,7 @@ export default function SandpackExample({ files={{ '/styles.css': { code: `@import "gestalt/dist/gestalt.css"; + @import "gestalt-charts/dist/gestalt-charts.css"; @import "gestalt-datepicker/dist/gestalt-datepicker.css"; * { margin: 0; padding: 0;} body, html, #root { height: 100%; }`, @@ -190,6 +191,14 @@ export default function SandpackExample({ }), hidden: true, }, + '/node_modules/gestalt-charts/package.json': { + code: JSON.stringify({ + name: 'gestalt-charts', + main: './dist/gestalt-charts.js', + style: 'dist/gestalt-charts.css', + }), + hidden: true, + }, '/node_modules/gestalt-datepicker/package.json': { code: JSON.stringify({ name: 'gestalt-datepicker', @@ -202,6 +211,10 @@ export default function SandpackExample({ code: files.js, hidden: true, }, + '/node_modules/gestalt-charts/dist/gestalt-charts.js': { + code: files.js, + hidden: true, + }, '/node_modules/gestalt-datepicker/dist/gestalt-datepicker.js': { code: files.js, hidden: true, @@ -210,6 +223,10 @@ export default function SandpackExample({ code: files.css, hidden: true, }, + '/node_modules/gestalt-charts/dist/gestalt-charts.css': { + code: files.css, + hidden: true, + }, '/node_modules/gestalt-datepicker/dist/gestalt-datepicker.css': { code: files.css, hidden: true, @@ -243,7 +260,7 @@ export default function SandpackExample({ dependencies: { ...(files ? { classnames: 'latest' } - : { gestalt: 'latest', 'gestalt-datepicker': 'latest' }), + : { gestalt: 'latest', 'gestalt-charts': 'latest', 'gestalt-datepicker': 'latest' }), react: '18.2.0', 'react-dom': '18.2.0', }, diff --git a/docs/docs-components/data/components.js b/docs/docs-components/data/components.js index 964622c9a4..c6d2ddc428 100644 --- a/docs/docs-components/data/components.js +++ b/docs/docs-components/data/components.js @@ -22,6 +22,7 @@ import ButtonGroup from '../../graphics/general/ButtonGroup.svg'; import ButtonLink from '../../graphics/general/ButtonLink.svg'; import Callout from '../../graphics/general/Callout.svg'; import Card from '../../graphics/general/Card.svg'; +// import Chart from '../../graphics/general/Chart.svg'; import Checkbox from '../../graphics/general/Checkbox.svg'; import Collage from '../../graphics/general/Collage.svg'; import ComboBox from '../../graphics/general/ComboBox.svg'; @@ -494,6 +495,32 @@ const componentData: $ReadOnlyArray = [ }, }, }, + // { + // id: 'Chart', + // platform: { + // web: { + // name: 'Chart', + // visual: { + // svg: , + // }, + // description: 'WIP ', + // category: ['Data'], + // status: { + // accessible: { + // summary: 'notAvailable', + // a11yVisual: 'notAvailable', + // a11yScreenreader: 'notAvailable', + // a11yNavigation: 'notAvailable', + // a11yComprehension: 'notAvailable', + // }, + // documentation: 'notAvailable', + // figmaStatus: 'notAvailable', + // responsive: 'notAvailable', + // status: 'notAvailable', + // }, + // }, + // }, + // }, { id: 'Checkbox', platform: { diff --git a/docs/docs-components/handleCodeSandbox.js b/docs/docs-components/handleCodeSandbox.js index a42b2aae7f..1c9a5fc140 100644 --- a/docs/docs-components/handleCodeSandbox.js +++ b/docs/docs-components/handleCodeSandbox.js @@ -1,6 +1,7 @@ // @flow strict import LZString from 'lz-string'; import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace +import * as gestaltChart from 'gestalt-charts'; // eslint-disable-line import/no-namespace import * as gestaltDatepicker from 'gestalt-datepicker'; // eslint-disable-line import/no-namespace const compress = (object: {| @@ -12,6 +13,7 @@ const compress = (object: {| content: {| dependencies: {| gestalt: string, + 'gestalt-charts': string, 'gestalt-datepicker': string, react: string, 'react-dom': string, @@ -42,6 +44,7 @@ const dedupeArray = (arr: $ReadOnlyArray): $ReadOnlyArray => [...new Se const handleCodeSandbox = async ({ code, title }: {| code: string, title: string |}) => { const gestaltComponents = Object.keys(gestalt); + const gestaltChartComponents = Object.keys(gestaltChart); const gestaltDatepickerComponents = Object.keys(gestaltDatepicker); const usedComponents = dedupeArray([ @@ -53,6 +56,10 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string const baseGestaltComponents = gestaltComponents.filter((x) => usedComponents.includes(x)); + const baseGestaltChartComponents = gestaltChartComponents.filter((x) => + usedComponents.includes(x), + ); + const baseGestaltDatePickerComponents = gestaltDatepickerComponents.filter((x) => usedComponents.includes(x), ); @@ -61,6 +68,7 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string const imports = [`import "../node_modules/gestalt/dist/gestalt.css"`]; if (baseGestaltDatePickerComponents.length > 0) { imports.push('import "../node_modules/gestalt-datepicker/dist/gestalt-datepicker.css";'); + imports.push(`import { ${baseGestaltChartComponents.join(', ')} } from "gestalt-charts";`); imports.push( `import { ${baseGestaltDatePickerComponents.join(', ')} } from "gestalt-datepicker";`, ); @@ -83,6 +91,7 @@ const handleCodeSandbox = async ({ code, title }: {| code: string, title: string react: 'latest', 'react-dom': 'latest', gestalt: 'latest', + 'gestalt-charts': 'latest', 'gestalt-datepicker': 'latest', }, devDependencies: { diff --git a/docs/docs-components/siteIndex.js b/docs/docs-components/siteIndex.js index fd5af1aa3a..667dc329c6 100644 --- a/docs/docs-components/siteIndex.js +++ b/docs/docs-components/siteIndex.js @@ -113,6 +113,7 @@ const siteIndex: $ReadOnlyArray = [ 'ButtonLink', 'ButtonGroup', 'Callout', + 'Chart', 'Checkbox', 'Collage', 'Column', diff --git a/docs/graphics/general/Chart.svg b/docs/graphics/general/Chart.svg new file mode 100644 index 0000000000..c9a70c9602 --- /dev/null +++ b/docs/graphics/general/Chart.svg @@ -0,0 +1 @@ + diff --git a/docs/markdown/get_started/developers/contributing/development_process.md b/docs/markdown/get_started/developers/contributing/development_process.md index b8c6e70a81..d7021eb280 100644 --- a/docs/markdown/get_started/developers/contributing/development_process.md +++ b/docs/markdown/get_started/developers/contributing/development_process.md @@ -182,6 +182,13 @@ git push -f origin HEAD - When sharing preview urls, you may have to remind viewers to toggle on development mode from the header menu. This is necessary to see unpublished changes in the code examples. To simplify sharing, you can add a `?devexample=true` parameter to the url to enable the examples by default. +## Create a new package + +When should you create a new gestalt- package instead of adding a new component to the existing gestalt? + +Gestalt is a lightweight package with only 2 dependencies: "classnames" and "prop-types". By using the minimal amount of dependencies, we can maintain the size of the bundle small. If a new component requires external packages, it's worth isolating it in a single package so that importing Gestalt in our codebase keeps a small bundle. + +When adding a new package, follow the steps in this PR: https://github.com/pinterest/gestalt/pull/3143
My pull request fails on "Semver / Require Label (pull_request)", how do I fix it? diff --git a/docs/package.json b/docs/package.json index 55229f2521..eacf01b5eb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -6,7 +6,7 @@ "homepage": "https://gestalt.pinterest.systems/", "scripts": { "dev": "(next dev) & (yarn dev-metadata)", - "dev-metadata": "nodemon -w ../packages/gestalt/src -w ../packages/gestalt-datepicker/src --exec 'yarn build-metadata'", + "dev-metadata": "nodemon -w ../packages/gestalt/src -w ../packages/gestalt-charts/src -w ../packages/gestalt-datepicker/src --exec 'yarn build-metadata'", "build": "yarn build-metadata && next build", "build-metadata": "../scripts/generateMetadata.js", "start": "next start" @@ -15,6 +15,7 @@ "@mdx-js/react": "^2.1.1", "date-fns": "^2.16.1", "gestalt": ">0.0.0", + "gestalt-charts": ">0.0.0", "gestalt-datepicker": ">0.0.0", "gestalt-design-tokens": ">0.0.0", "gray-matter": "^4.0.3", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 3037bc4e7e..c7cb2c2b92 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -1,6 +1,7 @@ // @flow strict import '../docs.css'; import 'gestalt/dist/gestalt.css'; +import 'gestalt-charts/dist/gestalt-charts.css'; import 'gestalt-datepicker/dist/gestalt-datepicker.css'; import { promises as fs } from 'fs'; import path from 'path'; diff --git a/docs/pages/get_started/developers/installation.js b/docs/pages/get_started/developers/installation.js index 836380842c..90140eaff8 100644 --- a/docs/pages/get_started/developers/installation.js +++ b/docs/pages/get_started/developers/installation.js @@ -28,6 +28,15 @@ or ~~~jsx yarn add gestalt ~~~ +To install the Chart package: +~~~jsx +npm i gestalt-charts --save +~~~ +or +~~~jsx +yarn add gestalt-charts +~~~ + To install the DatePicker package: ~~~jsx npm i gestalt-datepicker --save @@ -66,6 +75,14 @@ import 'gestalt/dist/gestalt.css'; import { DatePicker } from 'gestalt-datepicker'; import 'gestalt-datepicker/dist/gestalt-datepicker.css'; ~~~ +" + /> + diff --git a/docs/pages/get_started/developers/releases.js b/docs/pages/get_started/developers/releases.js index c1b05d5570..94db60e268 100644 --- a/docs/pages/get_started/developers/releases.js +++ b/docs/pages/get_started/developers/releases.js @@ -49,7 +49,7 @@ To run an alpha release, follow these steps: - Click on the "Compare & pull request" on Github - Instead of base repository:pinterest/gestalt and base: master, select base: alpha - Merge your branch. There's no need to set a label or wait for builds to pass as some might fail. -- On your terminal, check npm view gestalt or npm view gestalt-datepicker to see the latest alpha release +- On your terminal, check npm view gestalt or npm view gestalt-charts or npm view gestalt-datepicker to see the latest alpha release - Visit https://www.npmjs.com/package/gestalt/v/ - In package.json, replace the Gestalt dependency with the released alpha version - Run yarn diff --git a/docs/pages/get_started/faq.js b/docs/pages/get_started/faq.js index 5f94191017..ffb4da503f 100644 --- a/docs/pages/get_started/faq.js +++ b/docs/pages/get_started/faq.js @@ -105,7 +105,7 @@ $ElementType, 'propName'> Does Gestalt have TypeScript support? Yes. Gestalt officially supports and maintains TypeScript declaration files for our - gestalt and gestalt-datepicker packages. + gestalt, gestalt-charts, and gestalt-datepicker packages. diff --git a/docs/pages/web/chart.js b/docs/pages/web/chart.js new file mode 100644 index 0000000000..4deebfcc48 --- /dev/null +++ b/docs/pages/web/chart.js @@ -0,0 +1,21 @@ +// @flow strict +import { type Node } from 'react'; +import docGen, { type DocGen, type DocType } from '../../docs-components/docgen.js'; +import GeneratedPropTable from '../../docs-components/GeneratedPropTable.js'; +import Page from '../../docs-components/Page.js'; +import PageHeader from '../../docs-components/PageHeader.js'; + +export default function DocsPage({ generatedDocGen }: DocType): Node { + return ( + + + + + ); +} + +export async function getServerSideProps(): Promise<{| props: {| generatedDocGen: DocGen |} |}> { + return { + props: { generatedDocGen: await docGen('Chart') }, + }; +} diff --git a/package.json b/package.json index 858d4123fa..8bff6f84e3 100644 --- a/package.json +++ b/package.json @@ -111,13 +111,13 @@ "scripts": { "a11y:generate": "./scripts/generateAccessibilitySpec.js", "a11y:validate": "./scripts/validateAccessibilitySpecs.js", - "build": "cd packages/gestalt-design-tokens && yarn build && cd ../gestalt && yarn build && cd ../gestalt-datepicker && yarn build && cd ../eslint-plugin-gestalt && yarn build && cd ../../docs && yarn build", + "build": "cd packages/gestalt-design-tokens && yarn build && cd ../gestalt && yarn build && cd ../gestalt-charts && yarn build && cd ../gestalt-datepicker && yarn build && cd ../eslint-plugin-gestalt && yarn build && cd ../../docs && yarn build", "codemod": "./packages/gestalt-codemods/generic-codemods/entry.sh", "css:validate": "./scripts/cssValidate.js", - "dev": "(cd docs && yarn dev) & (cd packages/gestalt && yarn watch) & (cd packages/gestalt-datepicker && yarn watch) & (cd packages/eslint-plugin-gestalt && yarn watch) & (cd packages/gestalt-design-tokens && yarn watch)", + "dev": "(cd docs && yarn dev) & (cd packages/gestalt && yarn watch) & (cd packages/gestalt-charts && yarn watch) & (cd packages/gestalt-datepicker && yarn watch) & (cd packages/eslint-plugin-gestalt && yarn watch) & (cd packages/gestalt-design-tokens && yarn watch)", "docs": "(cd docs && yarn start)", "eslint": "eslint --max-warnings 0", - "flow-generate:css": "(css-modules-flow-types packages/gestalt/src/ >/dev/null) && (css-modules-flow-types packages/gestalt-datepicker/src/ >/dev/null)", + "flow-generate:css": "(css-modules-flow-types packages/gestalt/src/ >/dev/null) && (css-modules-flow-types packages/gestalt-charts/src/ >/dev/null) && (css-modules-flow-types packages/gestalt-datepicker/src/ >/dev/null)", "format": "prettier --write \"**/*.{css,html,js,md,yml}\"", "generate": "./scripts/generateComponent.js", "lint:css": "stylelint --max-warnings 0 \"**/*.css\"", diff --git a/packages/gestalt-charts/.npmignore b/packages/gestalt-charts/.npmignore new file mode 100644 index 0000000000..5c2f4324d5 --- /dev/null +++ b/packages/gestalt-charts/.npmignore @@ -0,0 +1,2 @@ +**/__*__/** +scripts diff --git a/packages/gestalt-charts/README.md b/packages/gestalt-charts/README.md new file mode 100644 index 0000000000..57b7264dd7 --- /dev/null +++ b/packages/gestalt-charts/README.md @@ -0,0 +1,28 @@ +# Gestalt Chart + +[![NPM Version](https://img.shields.io/npm/v/gestalt-charts.svg)](https://www.npmjs.com/package/gestalt-charts) + +## Installation + +The package can be installed via npm: + +```bash +npm i gestalt --save +npm i gestalt-charts --save +``` + +Or via yarn: + +```bash +yarn add gestalt +yarn add gestalt-charts +``` + +## Usage + +Gestalt Chart exports each component as ES6 modules and a single, precompiled CSS file: + +```js +import { chart } from 'gestalt-charts'; +import 'gestalt-charts/dist/gestalt-charts.css'; +``` diff --git a/packages/gestalt-charts/dist/gestalt-charts.js.flow b/packages/gestalt-charts/dist/gestalt-charts.js.flow new file mode 100644 index 0000000000..4702835119 --- /dev/null +++ b/packages/gestalt-charts/dist/gestalt-charts.js.flow @@ -0,0 +1,2 @@ +// @flow strict +export * from '../src/index.js'; diff --git a/packages/gestalt-charts/dist/index.d.ts b/packages/gestalt-charts/dist/index.d.ts new file mode 100644 index 0000000000..61c08a0e9d --- /dev/null +++ b/packages/gestalt-charts/dist/index.d.ts @@ -0,0 +1,52 @@ +import React = require('react'); + +/** + * ========================================================= + * ====================== GESTALT PACKAGE DEPENDENCIES ===================== + * ========================================================= + */ + +/** + * ========================================================= + * ====================== SHARED UTILS ===================== + * ========================================================= + */ + +type Node = React.ReactNode; + +type AbstractEventHandler | Event, U = {}> = ( + arg: U & { + readonly event: T; + }, +) => void; + +type ReactForwardRef = React.ForwardRefExoticComponent< + React.PropsWithoutRef

& React.RefAttributes +>; + +/** + * ========================================================= + * ====================== SHARED TYPED ===================== + * ========================================================= + */ + +/** + * ========================================================= + * =============== COMPONENT API INTERFACES =============== + * ========================================================= + */ + +export interface ChartProps { + id: string; +} + +/** + * ========================================================= + * ========================= INDEX ========================= + * ========================================================= + */ + +/** + * https://gestalt.pinterest.systems/web/daterange + */ +export const Chart: React.FunctionComponent; diff --git a/packages/gestalt-charts/package.json b/packages/gestalt-charts/package.json new file mode 100644 index 0000000000..8d5ad8b48a --- /dev/null +++ b/packages/gestalt-charts/package.json @@ -0,0 +1,45 @@ +{ + "name": "gestalt-charts", + "version": "121.1.6", + "license": "Apache-2.0", + "homepage": "https://gestalt.pinterest.systems/", + "description": "A React UI chart component which enforces Pinterest's design language", + "main": "dist/gestalt-charts.js", + "types": "dist/index.d.ts", + "jsnext:main": "dist/gestalt-charts.es.js", + "module": "dist/gestalt-charts.es.js", + "style": "dist/gestalt-charts.css", + "files": [ + "dist", + "src" + ], + "dependencies": { + "recharts": "2.6.2" + }, + "peerDependencies": { + "gestalt": ">0.0.0", + "react": "^18.0", + "react-dom": "^18.0" + }, + "scripts": { + "build": "rollup -c rollup.config.js", + "build:prod": "NODE_ENV=production rollup -c rollup.config.js", + "watch": "rollup -c rollup.config.js --watch" + }, + "browserslist": [ + "last 2 versions", + "not IE < 11", + "not <1%" + ], + "keywords": [ + "chart", + "design system", + "pinterest", + "react", + "ui library" + ], + "repository": { + "type": "git", + "url": "https://github.com/pinterest/gestalt" + } +} diff --git a/packages/gestalt-charts/rollup.config.js b/packages/gestalt-charts/rollup.config.js new file mode 100644 index 0000000000..34db51566f --- /dev/null +++ b/packages/gestalt-charts/rollup.config.js @@ -0,0 +1,40 @@ +// eslint-disable-next-line flowtype/require-valid-file-annotation, import/no-relative-packages +import plugins from '../gestalt-core/build.js'; + +const rollupConfig = { + input: 'src/index.js', + output: [ + { + file: 'dist/gestalt-charts.js', + format: 'umd', + name: 'gestalt-charts', + exports: 'named', + globals: { + react: 'React', + classnames: 'classnames', + 'classnames/bind': 'classnames', + 'react-dom': 'ReactDOM', + 'recharts': 'Recharts', + }, + sourcemap: true, + }, + { + file: 'dist/gestalt-charts.es.js', + format: 'es', + name: 'gestalt-charts', + exports: 'named', + globals: { + react: 'React', + classnames: 'classnames', + 'classnames/bind': 'classnames', + 'react-dom': 'ReactDOM', + 'recharts': 'Recharts', + }, + sourcemap: true, + }, + ], + external: ['react', 'classnames/bind', 'classnames', 'react-dom', 'recharts', 'gestalt'], + plugins: plugins('gestalt-charts'), +}; + +export default rollupConfig; diff --git a/packages/gestalt-charts/src/Chart.css b/packages/gestalt-charts/src/Chart.css new file mode 100644 index 0000000000..0e1097f626 --- /dev/null +++ b/packages/gestalt-charts/src/Chart.css @@ -0,0 +1,9 @@ +:root { + /* transparent colors */ + --g-color-focus: rgb(0 132 255 / 0.5); +} + +.disabled { + cursor: default; + opacity: 0.5; +} diff --git a/packages/gestalt-charts/src/Chart.css.flow b/packages/gestalt-charts/src/Chart.css.flow new file mode 100644 index 0000000000..34ac2111bc --- /dev/null +++ b/packages/gestalt-charts/src/Chart.css.flow @@ -0,0 +1,5 @@ +// @flow strict +/* This file is automatically generated by css-modules-flow-types */ +declare module.exports: {| + +'disabled': string, +|}; diff --git a/packages/gestalt-charts/src/Chart.js b/packages/gestalt-charts/src/Chart.js new file mode 100644 index 0000000000..8def6efdf1 --- /dev/null +++ b/packages/gestalt-charts/src/Chart.js @@ -0,0 +1,23 @@ +// @flow strict +import { type Node } from 'react'; +import { Text } from 'gestalt'; + +export type Props = {| + id?: string, +|}; + +/** + * [Chart](https://gestalt.pinterest.systems/web/chart) is UNDER DEVELOPMENT. STAY TUNNED! + * + * Chart is distributed in its own package and must be installed separately. + * + * ![Chart closed light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Chart-closed.spec.mjs-snapshots/Chart-closed-chromium-darwin.png) + * ![Chart closed dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Chart-closed-dark.spec.mjs-snapshots/Chart-closed-dark-chromium-darwin.png) + */ +function Chart({ id }: Props): Node { + return {id}; +} + +Chart.displayName = 'Chart'; + +export default Chart; diff --git a/packages/gestalt-charts/src/Chart.jsdom.test.js b/packages/gestalt-charts/src/Chart.jsdom.test.js new file mode 100644 index 0000000000..46d149701c --- /dev/null +++ b/packages/gestalt-charts/src/Chart.jsdom.test.js @@ -0,0 +1,15 @@ +// @flow strict +import { render, screen } from '@testing-library/react'; +import Chart from './Chart.js'; + +function ChartWrap({ id }: {| id: string |}) { + return ; +} + +describe('Chart', () => { + test('renders correctly', async () => { + render(); + + expect(screen.getByText('123')).toBeInTheDocument(); + }); +}); diff --git a/packages/gestalt-charts/src/index.js b/packages/gestalt-charts/src/index.js new file mode 100644 index 0000000000..724fc1003e --- /dev/null +++ b/packages/gestalt-charts/src/index.js @@ -0,0 +1,5 @@ +// @flow strict +import Chart from './Chart.js'; + +// eslint-disable-next-line import/prefer-default-export +export { Chart }; diff --git a/playwright/accessibility/web__chart.spec.mjs b/playwright/accessibility/web__chart.spec.mjs new file mode 100644 index 0000000000..e7803a1752 --- /dev/null +++ b/playwright/accessibility/web__chart.spec.mjs @@ -0,0 +1,8 @@ +// @flow strict +import { test } from '@playwright/test'; +import expectAccessiblePage from './expectAccessiblePage.mjs'; + +test('Chart Accessibility check', async ({ page }) => { + await page.goto('/web/chart'); + await expectAccessiblePage({ page }); +}); diff --git a/scripts/cssValidate.js b/scripts/cssValidate.js index 9ce88725b6..703e29a6f8 100755 --- a/scripts/cssValidate.js +++ b/scripts/cssValidate.js @@ -6,6 +6,7 @@ const postcss = require('postcss'); const duplicateVariablesDifferentValues = async () => { const files = await globby([ 'packages/gestalt/src/**/*.css', + 'packages/gestalt-charts/src/**/*.css', 'packages/gestalt-datepicker/src/**/*.css', ]); diff --git a/scripts/generateMetadata.js b/scripts/generateMetadata.js index a4df05fc85..642fa49b97 100755 --- a/scripts/generateMetadata.js +++ b/scripts/generateMetadata.js @@ -70,6 +70,7 @@ const getFilesFromDirectory = (directoryPath) => { // When adding a new folder/file also add to dev-metadata command in package.json const files = [ ...getFilesFromDirectory('/packages/gestalt/src/'), + ...getFilesFromDirectory('/packages/gestalt-charts/src/'), ...getFilesFromDirectory('/packages/gestalt-datepicker/src/'), ]; diff --git a/scripts/netlify.sh b/scripts/netlify.sh index 75392f9d28..ecc67b248f 100755 --- a/scripts/netlify.sh +++ b/scripts/netlify.sh @@ -4,5 +4,6 @@ set -e (cd packages/gestalt-design-tokens && yarn build) (cd packages/gestalt && yarn build) +(cd packages/gestalt-charts && yarn build) (cd packages/gestalt-datepicker && yarn build) (cd docs && PUBLIC_URL=$DEPLOY_PRIME_URL yarn build) diff --git a/scripts/publish.js b/scripts/publish.js index 2902f93e10..fad068df20 100755 --- a/scripts/publish.js +++ b/scripts/publish.js @@ -14,6 +14,7 @@ console.log(`Publishing version: ${version}`); const packages = [ 'gestalt-design-tokens', 'gestalt', + 'gestalt-charts', 'gestalt-datepicker', 'eslint-plugin-gestalt', ]; diff --git a/scripts/releaseSteps.js b/scripts/releaseSteps.js index 816d9b40e4..4b8f114d9c 100755 --- a/scripts/releaseSteps.js +++ b/scripts/releaseSteps.js @@ -24,6 +24,7 @@ function srcDirectory(item) { const packages = [ 'gestalt-design-tokens', 'gestalt', + 'gestalt-charts', 'gestalt-datepicker', 'eslint-plugin-gestalt', ]; diff --git a/scripts/test.sh b/scripts/test.sh index 08866c52aa..b188403e02 100755 --- a/scripts/test.sh +++ b/scripts/test.sh @@ -3,6 +3,7 @@ set -euo pipefail echo "build" (cd packages/gestalt && yarn build) +(cd packages/gestalt-charts && yarn build) (cd packages/gestalt-datepicker && yarn build) echo "eslint" diff --git a/yarn.lock b/yarn.lock index 92fe18f650..529df733e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1702,6 +1702,13 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" +"@babel/runtime@^7.1.2", "@babel/runtime@^7.22.6": + version "7.22.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682" + integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.15.4" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz" @@ -1723,13 +1730,6 @@ dependencies: regenerator-runtime "^0.13.11" -"@babel/runtime@^7.22.6": - version "7.22.10" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682" - integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ== - dependencies: - regenerator-runtime "^0.14.0" - "@babel/template@^7.10.4": version "7.10.4" resolved "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz" @@ -3975,6 +3975,57 @@ resolved "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz" integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow== +"@types/d3-array@^3.0.3": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.5.tgz#857c1afffd3f51319bbc5b301956aca68acaa7b8" + integrity sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A== + +"@types/d3-color@*": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4" + integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA== + +"@types/d3-ease@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0" + integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA== + +"@types/d3-interpolate@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc" + integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw== + dependencies: + "@types/d3-color" "*" + +"@types/d3-path@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b" + integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg== + +"@types/d3-scale@^4.0.2": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5" + integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ== + dependencies: + "@types/d3-time" "*" + +"@types/d3-shape@^3.1.0": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95" + integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A== + dependencies: + "@types/d3-path" "*" + +"@types/d3-time@*", "@types/d3-time@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819" + integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg== + +"@types/d3-timer@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce" + integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g== + "@types/debug@^4.0.0": version "4.1.7" resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82" @@ -5747,6 +5798,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + classnames@^2.2.6: version "2.2.6" resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz" @@ -6575,6 +6631,11 @@ css-tree@^2.3.1: mdn-data "2.0.30" source-map-js "^1.0.1" +css-unit-converter@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" + integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== + css-what@^5.0.0: version "5.1.0" resolved "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz" @@ -6707,6 +6768,77 @@ cyclist@^1.0.1: resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= +"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6: + version "3.2.4" + resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5" + integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg== + dependencies: + internmap "1 - 2" + +"d3-color@1 - 3": + version "3.1.0" + resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" + integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== + +d3-ease@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4" + integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w== + +"d3-format@1 - 3": + version "3.1.0" + resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641" + integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA== + +"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d" + integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g== + dependencies: + d3-color "1 - 3" + +d3-path@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526" + integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ== + +d3-scale@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396" + integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ== + dependencies: + d3-array "2.10.0 - 3" + d3-format "1 - 3" + d3-interpolate "1.2.0 - 3" + d3-time "2.1.1 - 3" + d3-time-format "2 - 4" + +d3-shape@^3.1.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5" + integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA== + dependencies: + d3-path "^3.1.0" + +"d3-time-format@2 - 4": + version "4.1.0" + resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a" + integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg== + dependencies: + d3-time "1 - 3" + +"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7" + integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q== + dependencies: + d3-array "2 - 3" + +d3-timer@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0" + integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA== + d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -6785,6 +6917,11 @@ decamelize@^5.0.0: resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9" integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA== +decimal.js-light@^2.4.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934" + integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg== + decimal.js@^10.3.1: version "10.3.1" resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783" @@ -7180,6 +7317,13 @@ dom-accessibility-api@^0.5.9: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56" integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg== +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-helpers@^5.0.1: version "5.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" @@ -7890,7 +8034,7 @@ etag@^1.8.1, etag@~1.8.1: resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= -eventemitter3@^4.0.0: +eventemitter3@^4.0.0, eventemitter3@^4.0.1: version "4.0.7" resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== @@ -8140,6 +8284,11 @@ fast-equals@^2.0.1: resolved "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.3.tgz" integrity sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA== +fast-equals@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d" + integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ== + fast-glob@^2.2.6: version "2.2.7" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz" @@ -9653,6 +9802,11 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" +"internmap@1 - 2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009" + integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg== + interpret@^1.0.0: version "1.2.0" resolved "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz" @@ -14471,7 +14625,7 @@ postcss-unique-selectors@^4.0.1: postcss "^7.0.0" uniqs "^2.0.0" -postcss-value-parser@^3.0.0: +postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0: version "3.3.1" resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== @@ -14983,7 +15137,7 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f" integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg== -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.10.2, react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -15010,6 +15164,11 @@ react-lazy-hydration@^0.1.0: dependencies: "@babel/runtime" "^7.9.2" +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-live@^2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/react-live/-/react-live-2.3.0.tgz" @@ -15037,6 +15196,13 @@ react-popper@^2.2.5: react-fast-compare "^3.0.1" warning "^4.0.2" +react-resize-detector@^8.0.4: + version "8.1.0" + resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a" + integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w== + dependencies: + lodash "^4.17.21" + react-shallow-renderer@^16.15.0: version "16.15.0" resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" @@ -15050,6 +15216,14 @@ react-simple-code-editor@^0.11.0: resolved "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz" integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw== +react-smooth@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.3.tgz#2845fa8f22914f2e4445856d5688fb8a7d72f3ae" + integrity sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg== + dependencies: + fast-equals "^5.0.0" + react-transition-group "2.9.0" + react-test-renderer@^18.1.0: version "18.1.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.1.0.tgz#35b75754834cf9ab517b6813db94aee0a6b545c3" @@ -15059,6 +15233,16 @@ react-test-renderer@^18.1.0: react-shallow-renderer "^16.15.0" scheduler "^0.22.0" +react-transition-group@2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" + integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== + dependencies: + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-lifecycles-compat "^3.0.4" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" @@ -15190,6 +15374,28 @@ recast@^0.20.3: source-map "~0.6.1" tslib "^2.0.1" +recharts-scale@^0.4.4: + version "0.4.5" + resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9" + integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w== + dependencies: + decimal.js-light "^2.4.1" + +recharts@2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.6.2.tgz#f26dc7954ab9df8e49a50aa36ed9c7177bd0a0a5" + integrity sha512-dVhNfgI21LlF+4AesO3mj+i+9YdAAjoGaDWIctUgH/G2iy14YVtb/DSUeic77xr19rbKCiq+pQGfeg2kJQDHig== + dependencies: + classnames "^2.2.5" + eventemitter3 "^4.0.1" + lodash "^4.17.19" + react-is "^16.10.2" + react-resize-detector "^8.0.4" + react-smooth "^2.0.2" + recharts-scale "^0.4.4" + reduce-css-calc "^2.1.8" + victory-vendor "^36.6.8" + rechoir@^0.6.2: version "0.6.2" resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz" @@ -15232,6 +15438,14 @@ redis-parser@^3.0.0: dependencies: redis-errors "^1.0.0" +reduce-css-calc@^2.1.8: + version "2.1.8" + resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" + integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== + dependencies: + css-unit-converter "^1.1.1" + postcss-value-parser "^3.3.0" + regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz" @@ -17769,6 +17983,26 @@ vfile@^5.0.0, vfile@^5.3.0: unist-util-stringify-position "^3.0.0" vfile-message "^3.0.0" +victory-vendor@^36.6.8: + version "36.6.11" + resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.11.tgz#acae770717c2dae541a54929c304ecab5ab6ac2a" + integrity sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg== + dependencies: + "@types/d3-array" "^3.0.3" + "@types/d3-ease" "^3.0.0" + "@types/d3-interpolate" "^3.0.1" + "@types/d3-scale" "^4.0.2" + "@types/d3-shape" "^3.1.0" + "@types/d3-time" "^3.0.0" + "@types/d3-timer" "^3.0.0" + d3-array "^3.1.6" + d3-ease "^3.0.1" + d3-interpolate "^3.0.1" + d3-scale "^4.0.2" + d3-shape "^3.1.0" + d3-time "^3.0.0" + d3-timer "^3.0.1" + vlq@^0.2.1: version "0.2.3" resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"