From fe2652fe3033273b3dbfe881520926ef8e31dccf Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 27 Dec 2021 08:50:27 +0900 Subject: [PATCH] feat(website): continue migration to TypeScript --- packages/bump/index.d.ts | 8 - packages/bump/src/area-bump/Area.js | 8 - packages/bump/src/area-bump/AreaBump.js | 8 - packages/bump/src/area-bump/AreaTooltip.js | 8 - packages/bump/src/area-bump/AreasLabels.js | 8 - .../bump/src/area-bump/ResponsiveAreaBump.js | 8 - packages/bump/src/area-bump/compute.js | 8 - packages/bump/src/area-bump/hooks.js | 8 - packages/bump/src/area-bump/index.js | 8 - packages/bump/src/area-bump/props.js | 8 - packages/bump/src/bump/Bump.js | 8 - packages/bump/src/bump/Line.js | 8 - packages/bump/src/bump/LineTooltip.js | 8 - packages/bump/src/bump/LinesLabels.js | 8 - packages/bump/src/bump/Point.js | 8 - packages/bump/src/bump/Points.js | 8 - packages/bump/src/bump/ResponsiveBump.js | 8 - packages/bump/src/bump/compute.js | 8 - packages/bump/src/bump/hooks.js | 8 - packages/bump/src/bump/index.js | 8 - packages/bump/src/bump/props.js | 8 - packages/bump/src/index.js | 8 - packages/core/index.d.ts | 31 ++- .../components/defs/patterns/PatternDots.js | 8 - .../components/defs/patterns/PatternLines.js | 8 - .../defs/patterns/PatternSquares.js | 8 - website/gatsby-config.js | 5 +- website/package.json | 5 +- website/src/@types/file_types.d.ts | 225 ++++++++++++++++++ .../{PageWrapper.js => PageWrapper.tsx} | 0 ...elector.js => ComponentFlavorSelector.tsx} | 75 +++--- ...onentSettings.js => ComponentSettings.tsx} | 77 +++--- .../components/components/ComponentTabs.tsx | 4 +- .../components/ComponentTemplate.tsx | 11 +- .../components/api-client/ApiClient.js | 196 --------------- .../components/api-client/ApiClient.tsx | 169 +++++++++++++ .../{ApiPreview.js => ApiPreview.tsx} | 51 ++-- .../components/api-client/ApiResponse.js | 49 ---- .../components/api-client/ApiResponse.tsx | 42 ++++ .../components/api-client/ApiSubmit.js | 31 --- .../components/api-client/ApiSubmit.tsx | 22 ++ .../api-client/{ApiTabs.js => ApiTabs.tsx} | 93 +++++--- ...entsExplorer.js => ComponentsExplorer.tsx} | 33 +-- ...onentsFilters.js => ComponentsFilters.tsx} | 64 ++--- .../{ComponentsGrid.js => ComponentsGrid.tsx} | 123 +++++----- ...entsGridItem.js => ComponentsGridItem.tsx} | 49 ++-- ...mponentsSearch.js => ComponentsSearch.tsx} | 19 +- .../components/components/explorer/index.ts | 1 + .../src/components/controls/ArrayControl.tsx | 2 +- .../src/components/controls/ControlsGroup.tsx | 4 +- .../components/controls/ControlsGroups.tsx | 2 +- .../src/components/controls/ObjectControl.tsx | 2 +- .../src/components/guides/GuideDemoBlock.tsx | 2 +- .../guides/patterns/PatternsDotsDemo.tsx | 8 +- .../guides/patterns/PatternsLinesDemo.tsx | 7 +- .../guides/patterns/PatternsSquaresDemo.tsx | 8 +- website/src/components/image.js | 32 --- .../area-bump/{mapper.js => mapper.ts} | 0 .../bar/{generator.js => generator.ts} | 0 .../components/bar/{mapper.js => mapper.tsx} | 4 +- .../components/bump/{mapper.js => mapper.ts} | 0 .../calendar/{mapper.js => mapper.tsx} | 0 .../components/chord/{mapper.js => mapper.ts} | 0 .../circle-packing/{mapper.js => mapper.ts} | 0 .../geo/{generator.js => generator.ts} | 0 .../components/geo/{mapper.js => mapper.tsx} | 0 .../heatmap/{generator.js => generator.ts} | 0 .../heatmap/{mapper.js => mapper.tsx} | 0 .../line/{defaults.js => defaults.ts} | 0 .../line/{generator.js => generator.ts} | 0 .../components/line/{mapper.js => mapper.ts} | 0 .../marimekko/{mapper.js => mapper.tsx} | 2 +- .../{mapper.js => mapper.ts} | 0 .../components/pie/{mapper.js => mapper.tsx} | 1 + .../{generator.js => generator.ts} | 0 .../scatterplot/{mapper.js => mapper.ts} | 1 - .../stream/{defaults.js => defaults.ts} | 0 .../stream/{generator.js => generator.ts} | 0 .../stream/{mapper.js => mapper.ts} | 0 .../sunburst/{mapper.js => mapper.tsx} | 0 .../swarmplot/{generator.js => generator.ts} | 0 .../swarmplot/{mapper.js => mapper.ts} | 0 .../time-range/{mapper.js => mapper.tsx} | 0 .../treemap/{generator.js => generator.ts} | 0 .../treemap/{mapper.js => mapper.ts} | 0 .../{CustomTooltip.js => CustomTooltip.tsx} | 0 .../waffle/{mapper.js => mapper.tsx} | 0 website/src/data/{config.js => config.ts} | 0 website/src/data/{nav.js => nav.ts} | 0 ...erateChartCode.js => generateChartCode.ts} | 26 +- .../pages/area-bump/{index.js => index.tsx} | 11 +- website/src/pages/bar/{api.js => api.tsx} | 4 +- website/src/pages/bar/canvas.js | 2 +- website/src/pages/bar/index.js | 2 +- website/src/pages/bullet/index.js | 2 +- website/src/pages/bump/index.js | 2 +- .../src/pages/calendar/{api.js => api.tsx} | 4 +- website/src/pages/calendar/canvas.js | 2 +- website/src/pages/calendar/index.js | 2 +- website/src/pages/chord/{api.js => api.tsx} | 4 +- website/src/pages/chord/canvas.js | 2 +- website/src/pages/chord/index.js | 2 +- website/src/pages/choropleth/canvas.js | 2 +- website/src/pages/choropleth/index.js | 2 +- .../pages/circle-packing/{api.js => api.tsx} | 4 +- website/src/pages/circle-packing/canvas.js | 2 +- website/src/pages/circle-packing/html.js | 2 +- website/src/pages/circle-packing/index.js | 2 +- website/src/pages/components.js | 15 -- website/src/pages/components.tsx | 27 +++ website/src/pages/funnel/index.tsx | 2 +- website/src/pages/geomap/canvas.js | 2 +- website/src/pages/geomap/index.js | 2 +- website/src/pages/guides/theming.tsx | 4 +- website/src/pages/heatmap/{api.js => api.tsx} | 4 +- website/src/pages/heatmap/canvas.js | 2 +- website/src/pages/heatmap/index.js | 2 +- website/src/pages/line/{api.js => api.tsx} | 4 +- website/src/pages/line/canvas.js | 2 +- website/src/pages/line/index.js | 2 +- website/src/pages/marimekko/index.js | 2 +- website/src/pages/network/canvas.js | 2 +- website/src/pages/network/index.js | 2 +- .../src/pages/parallel-coordinates/canvas.js | 2 +- .../src/pages/parallel-coordinates/index.js | 2 +- website/src/pages/pie/{api.js => api.tsx} | 4 +- website/src/pages/pie/canvas.js | 2 +- website/src/pages/pie/index.js | 2 +- website/src/pages/radar/{api.js => api.tsx} | 4 +- website/src/pages/radar/index.tsx | 2 +- website/src/pages/radial-bar/index.tsx | 2 +- website/src/pages/sankey/{api.js => api.tsx} | 4 +- website/src/pages/sankey/index.tsx | 2 +- website/src/pages/scatterplot/canvas.js | 2 +- website/src/pages/scatterplot/index.js | 2 +- website/src/pages/stream/index.js | 2 +- .../src/pages/sunburst/{api.js => api.tsx} | 4 +- website/src/pages/sunburst/index.js | 2 +- website/src/pages/swarmplot/canvas.js | 2 +- website/src/pages/swarmplot/index.js | 2 +- website/src/pages/treemap/{api.js => api.tsx} | 5 +- website/src/pages/treemap/canvas.js | 3 +- website/src/pages/treemap/html.js | 2 +- website/src/pages/treemap/index.js | 2 +- website/src/pages/voronoi/index.js | 2 +- website/src/pages/waffle/canvas.js | 2 +- website/src/pages/waffle/html.js | 2 +- website/src/pages/waffle/index.js | 2 +- website/src/types.ts | 19 +- yarn.lock | 21 +- 150 files changed, 933 insertions(+), 972 deletions(-) rename website/src/components/{PageWrapper.js => PageWrapper.tsx} (100%) rename website/src/components/components/{ComponentFlavorSelector.js => ComponentFlavorSelector.tsx} (80%) rename website/src/components/components/{ComponentSettings.js => ComponentSettings.tsx} (71%) delete mode 100644 website/src/components/components/api-client/ApiClient.js create mode 100644 website/src/components/components/api-client/ApiClient.tsx rename website/src/components/components/api-client/{ApiPreview.js => ApiPreview.tsx} (78%) delete mode 100644 website/src/components/components/api-client/ApiResponse.js create mode 100644 website/src/components/components/api-client/ApiResponse.tsx delete mode 100644 website/src/components/components/api-client/ApiSubmit.js create mode 100644 website/src/components/components/api-client/ApiSubmit.tsx rename website/src/components/components/api-client/{ApiTabs.js => ApiTabs.tsx} (85%) rename website/src/components/components/explorer/{ComponentsExplorer.js => ComponentsExplorer.tsx} (81%) rename website/src/components/components/explorer/{ComponentsFilters.js => ComponentsFilters.tsx} (50%) rename website/src/components/components/explorer/{ComponentsGrid.js => ComponentsGrid.tsx} (52%) rename website/src/components/components/explorer/{ComponentsGridItem.js => ComponentsGridItem.tsx} (92%) rename website/src/components/components/explorer/{ComponentsSearch.js => ComponentsSearch.tsx} (84%) create mode 100644 website/src/components/components/explorer/index.ts delete mode 100644 website/src/components/image.js rename website/src/data/components/area-bump/{mapper.js => mapper.ts} (100%) rename website/src/data/components/bar/{generator.js => generator.ts} (100%) rename website/src/data/components/bar/{mapper.js => mapper.tsx} (94%) rename website/src/data/components/bump/{mapper.js => mapper.ts} (100%) rename website/src/data/components/calendar/{mapper.js => mapper.tsx} (100%) rename website/src/data/components/chord/{mapper.js => mapper.ts} (100%) rename website/src/data/components/circle-packing/{mapper.js => mapper.ts} (100%) rename website/src/data/components/geo/{generator.js => generator.ts} (100%) rename website/src/data/components/geo/{mapper.js => mapper.tsx} (100%) rename website/src/data/components/heatmap/{generator.js => generator.ts} (100%) rename website/src/data/components/heatmap/{mapper.js => mapper.tsx} (100%) rename website/src/data/components/line/{defaults.js => defaults.ts} (100%) rename website/src/data/components/line/{generator.js => generator.ts} (100%) rename website/src/data/components/line/{mapper.js => mapper.ts} (100%) rename website/src/data/components/marimekko/{mapper.js => mapper.tsx} (97%) rename website/src/data/components/parallel-coordinates/{mapper.js => mapper.ts} (100%) rename website/src/data/components/pie/{mapper.js => mapper.tsx} (99%) rename website/src/data/components/scatterplot/{generator.js => generator.ts} (100%) rename website/src/data/components/scatterplot/{mapper.js => mapper.ts} (94%) rename website/src/data/components/stream/{defaults.js => defaults.ts} (100%) rename website/src/data/components/stream/{generator.js => generator.ts} (100%) rename website/src/data/components/stream/{mapper.js => mapper.ts} (100%) rename website/src/data/components/sunburst/{mapper.js => mapper.tsx} (100%) rename website/src/data/components/swarmplot/{generator.js => generator.ts} (100%) rename website/src/data/components/swarmplot/{mapper.js => mapper.ts} (100%) rename website/src/data/components/time-range/{mapper.js => mapper.tsx} (100%) rename website/src/data/components/treemap/{generator.js => generator.ts} (100%) rename website/src/data/components/treemap/{mapper.js => mapper.ts} (100%) rename website/src/data/components/waffle/{CustomTooltip.js => CustomTooltip.tsx} (100%) rename website/src/data/components/waffle/{mapper.js => mapper.tsx} (100%) rename website/src/data/{config.js => config.ts} (100%) rename website/src/data/{nav.js => nav.ts} (100%) rename website/src/lib/{generateChartCode.js => generateChartCode.ts} (85%) rename website/src/pages/area-bump/{index.js => index.tsx} (95%) rename website/src/pages/bar/{api.js => api.tsx} (96%) rename website/src/pages/calendar/{api.js => api.tsx} (94%) rename website/src/pages/chord/{api.js => api.tsx} (94%) rename website/src/pages/circle-packing/{api.js => api.tsx} (94%) delete mode 100644 website/src/pages/components.js create mode 100644 website/src/pages/components.tsx rename website/src/pages/heatmap/{api.js => api.tsx} (96%) rename website/src/pages/line/{api.js => api.tsx} (92%) rename website/src/pages/pie/{api.js => api.tsx} (95%) rename website/src/pages/radar/{api.js => api.tsx} (94%) rename website/src/pages/sankey/{api.js => api.tsx} (95%) rename website/src/pages/sunburst/{api.js => api.tsx} (94%) rename website/src/pages/treemap/{api.js => api.tsx} (95%) diff --git a/packages/bump/index.d.ts b/packages/bump/index.d.ts index f078ceeb8f..1d2ad5e5d1 100644 --- a/packages/bump/index.d.ts +++ b/packages/bump/index.d.ts @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { AxisProps } from '@nivo/axes' import { Component, MouseEvent } from 'react' import { Dimensions, Box, Theme, MotionProps, SvgDefsAndFill, CssMixBlendMode } from '@nivo/core' diff --git a/packages/bump/src/area-bump/Area.js b/packages/bump/src/area-bump/Area.js index b484295ea9..5f29d5e362 100644 --- a/packages/bump/src/area-bump/Area.js +++ b/packages/bump/src/area-bump/Area.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { useSpring, animated } from '@react-spring/web' diff --git a/packages/bump/src/area-bump/AreaBump.js b/packages/bump/src/area-bump/AreaBump.js index 88ea1da25c..a2e1f8a598 100644 --- a/packages/bump/src/area-bump/AreaBump.js +++ b/packages/bump/src/area-bump/AreaBump.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo, useState, Fragment, useMemo } from 'react' import { bindDefs, withContainer, useDimensions, SvgWrapper } from '@nivo/core' import { Grid, Axes } from '@nivo/axes' diff --git a/packages/bump/src/area-bump/AreaTooltip.js b/packages/bump/src/area-bump/AreaTooltip.js index 191a1d7ded..c3519a5e72 100644 --- a/packages/bump/src/area-bump/AreaTooltip.js +++ b/packages/bump/src/area-bump/AreaTooltip.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { BasicTooltip } from '@nivo/tooltip' diff --git a/packages/bump/src/area-bump/AreasLabels.js b/packages/bump/src/area-bump/AreasLabels.js index 1ef5e65e34..3756d113dc 100644 --- a/packages/bump/src/area-bump/AreasLabels.js +++ b/packages/bump/src/area-bump/AreasLabels.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { useSprings, animated } from '@react-spring/web' diff --git a/packages/bump/src/area-bump/ResponsiveAreaBump.js b/packages/bump/src/area-bump/ResponsiveAreaBump.js index 001e264582..f2efb3b181 100644 --- a/packages/bump/src/area-bump/ResponsiveAreaBump.js +++ b/packages/bump/src/area-bump/ResponsiveAreaBump.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { ResponsiveWrapper } from '@nivo/core' import AreaBump from './AreaBump' diff --git a/packages/bump/src/area-bump/compute.js b/packages/bump/src/area-bump/compute.js index 6c551627a4..fd6a8e4308 100644 --- a/packages/bump/src/area-bump/compute.js +++ b/packages/bump/src/area-bump/compute.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { scalePoint, scaleLinear } from 'd3-scale' export const computeSeries = ({ data, width, height, align, spacing, xPadding }) => { diff --git a/packages/bump/src/area-bump/hooks.js b/packages/bump/src/area-bump/hooks.js index 68ca5839aa..889fc2fabc 100644 --- a/packages/bump/src/area-bump/hooks.js +++ b/packages/bump/src/area-bump/hooks.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { createElement, useMemo, useCallback } from 'react' import { area as d3Area, curveBasis, curveLinear } from 'd3-shape' import { useTheme } from '@nivo/core' diff --git a/packages/bump/src/area-bump/index.js b/packages/bump/src/area-bump/index.js index ecd8e2d360..a9fdd8c38b 100644 --- a/packages/bump/src/area-bump/index.js +++ b/packages/bump/src/area-bump/index.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ export { default as AreaBump } from './AreaBump' export { default as ResponsiveAreaBump } from './ResponsiveAreaBump' export * from './props' diff --git a/packages/bump/src/area-bump/props.js b/packages/bump/src/area-bump/props.js index ce713815b3..6c43fc4f9b 100644 --- a/packages/bump/src/area-bump/props.js +++ b/packages/bump/src/area-bump/props.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import PropTypes from 'prop-types' import { motionPropTypes, blendModePropType } from '@nivo/core' import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors' diff --git a/packages/bump/src/bump/Bump.js b/packages/bump/src/bump/Bump.js index d642e0f3af..c33574f6ea 100644 --- a/packages/bump/src/bump/Bump.js +++ b/packages/bump/src/bump/Bump.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { createElement, memo, useMemo, useState, Fragment } from 'react' import { withContainer, useDimensions, SvgWrapper } from '@nivo/core' import { Grid, Axes } from '@nivo/axes' diff --git a/packages/bump/src/bump/Line.js b/packages/bump/src/bump/Line.js index bcb1c6858f..8b207fcbe0 100644 --- a/packages/bump/src/bump/Line.js +++ b/packages/bump/src/bump/Line.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { useSpring, animated } from '@react-spring/web' diff --git a/packages/bump/src/bump/LineTooltip.js b/packages/bump/src/bump/LineTooltip.js index 14c2c77f55..c2b7fd71dd 100644 --- a/packages/bump/src/bump/LineTooltip.js +++ b/packages/bump/src/bump/LineTooltip.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { BasicTooltip } from '@nivo/tooltip' diff --git a/packages/bump/src/bump/LinesLabels.js b/packages/bump/src/bump/LinesLabels.js index 5e5ce3642b..6c07556216 100644 --- a/packages/bump/src/bump/LinesLabels.js +++ b/packages/bump/src/bump/LinesLabels.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { useSprings, animated } from '@react-spring/web' diff --git a/packages/bump/src/bump/Point.js b/packages/bump/src/bump/Point.js index cd669f64c2..f090bf036c 100644 --- a/packages/bump/src/bump/Point.js +++ b/packages/bump/src/bump/Point.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { useSpring, animated, to } from '@react-spring/web' diff --git a/packages/bump/src/bump/Points.js b/packages/bump/src/bump/Points.js index c13942926b..4aa6414062 100644 --- a/packages/bump/src/bump/Points.js +++ b/packages/bump/src/bump/Points.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { createElement, memo } from 'react' import PropTypes from 'prop-types' diff --git a/packages/bump/src/bump/ResponsiveBump.js b/packages/bump/src/bump/ResponsiveBump.js index 63052ef643..839ae18424 100644 --- a/packages/bump/src/bump/ResponsiveBump.js +++ b/packages/bump/src/bump/ResponsiveBump.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { ResponsiveWrapper } from '@nivo/core' import Bump from './Bump' diff --git a/packages/bump/src/bump/compute.js b/packages/bump/src/bump/compute.js index 65203f9124..307d22bf4a 100644 --- a/packages/bump/src/bump/compute.js +++ b/packages/bump/src/bump/compute.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { scalePoint } from 'd3-scale' export const computeSeries = ({ width, height, data, xPadding, xOuterPadding, yOuterPadding }) => { diff --git a/packages/bump/src/bump/hooks.js b/packages/bump/src/bump/hooks.js index 674f03eac3..cdfa5e19d4 100644 --- a/packages/bump/src/bump/hooks.js +++ b/packages/bump/src/bump/hooks.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { createElement, useMemo, useCallback } from 'react' import { line as d3Line, curveBasis, curveLinear } from 'd3-shape' import { useTheme } from '@nivo/core' diff --git a/packages/bump/src/bump/index.js b/packages/bump/src/bump/index.js index 29199a5ee3..71abc3836c 100644 --- a/packages/bump/src/bump/index.js +++ b/packages/bump/src/bump/index.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ export { default as Bump } from './Bump' export { default as ResponsiveBump } from './ResponsiveBump' export * from './props' diff --git a/packages/bump/src/bump/props.js b/packages/bump/src/bump/props.js index afc343c76c..b165841db7 100644 --- a/packages/bump/src/bump/props.js +++ b/packages/bump/src/bump/props.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import PropTypes from 'prop-types' import { motionPropTypes } from '@nivo/core' import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors' diff --git a/packages/bump/src/index.js b/packages/bump/src/index.js index 3d421f2702..0ce430316f 100644 --- a/packages/bump/src/index.js +++ b/packages/bump/src/index.js @@ -1,10 +1,2 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ export * from './bump' export * from './area-bump' diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index c7f8eb9270..9057c0c6e6 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -247,6 +247,10 @@ declare module '@nivo/core' { export function useAnimatedPath(path: string): Interpolation + // ------------------------------------------------------------------------ + // Patterns & Gradients + // ------------------------------------------------------------------------ + export type GradientColor = { offset: number color: string @@ -283,10 +287,20 @@ declare module '@nivo/core' { padding?: number stagger?: boolean } + export function patternDotsDef( + id: string, + options?: Omit + ): PatternDotsDef + export function PatternDots(props: Omit): JSX.Element export type PatternSquaresDef = Omit & { type: 'patternSquares' } + export function patternSquaresDef( + id: string, + options?: Omit + ): PatternSquaresDef + export function PatternSquares(props: Omit): JSX.Element export type PatternLinesDef = { id: string @@ -297,6 +311,11 @@ declare module '@nivo/core' { color?: string lineWidth?: number } + export function patternLinesDef( + id: string, + options?: Omit + ): PatternLinesDef + export function PatternLines(props: Omit): JSX.Element export type Def = LinearGradientDef | PatternDotsDef | PatternSquaresDef | PatternLinesDef @@ -304,6 +323,12 @@ declare module '@nivo/core' { defs: Def[] } + export function Defs(props: DefsProps): JSX.Element + + // ------------------------------------------------------------------------ + // Motion + // ------------------------------------------------------------------------ + export const defaultAnimate = true export const defaultMotionStiffness = 90 export const defaultMotionDamping = 15 @@ -324,12 +349,6 @@ declare module '@nivo/core' { } export const defaultMargin: DefaultMargin - export function PatternLines(props: Omit): JSX.Element - export function PatternSquares(props: Omit): JSX.Element - export function PatternDots(props: Omit): JSX.Element - - export function Defs(props: DefsProps): JSX.Element - export function degreesToRadians(degrees: number): number export function radiansToDegrees(radians: number): number export function absoluteAngleDegrees(degrees: number): number diff --git a/packages/core/src/components/defs/patterns/PatternDots.js b/packages/core/src/components/defs/patterns/PatternDots.js index 5d4b2e2010..30c307e12f 100644 --- a/packages/core/src/components/defs/patterns/PatternDots.js +++ b/packages/core/src/components/defs/patterns/PatternDots.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' diff --git a/packages/core/src/components/defs/patterns/PatternLines.js b/packages/core/src/components/defs/patterns/PatternLines.js index 6179ee4c06..0e7402986a 100644 --- a/packages/core/src/components/defs/patterns/PatternLines.js +++ b/packages/core/src/components/defs/patterns/PatternLines.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' import { degreesToRadians } from '../../../lib/polar' diff --git a/packages/core/src/components/defs/patterns/PatternSquares.js b/packages/core/src/components/defs/patterns/PatternSquares.js index f7d0d1ac91..fc3a8e26c9 100644 --- a/packages/core/src/components/defs/patterns/PatternSquares.js +++ b/packages/core/src/components/defs/patterns/PatternSquares.js @@ -1,11 +1,3 @@ -/* - * This file is part of the nivo project. - * - * Copyright 2016-present, Raphaël Benitte. - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ import { memo } from 'react' import PropTypes from 'prop-types' diff --git a/website/gatsby-config.js b/website/gatsby-config.js index 6f7f387f41..148184e74b 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -25,10 +25,7 @@ module.exports = { `gatsby-plugin-image`, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, - { - resolve: `gatsby-plugin-styled-components`, - options: {}, - }, + `gatsby-plugin-styled-components`, { resolve: `gatsby-plugin-manifest`, options: { diff --git a/website/package.json b/website/package.json index 5a8d06540e..941cdbe7bf 100644 --- a/website/package.json +++ b/website/package.json @@ -35,7 +35,7 @@ "@nivo/waffle": "0.75.0", "@types/react-helmet": "^6.1.4", "@types/styled-components": "^5.1.18", - "babel-plugin-styled-components": "^1.13.2", + "babel-plugin-styled-components": "^2.0.2", "dedent-js": "^1.0.1", "gatsby": "^4.4.0", "gatsby-image": "^3.11.0", @@ -54,8 +54,7 @@ "react-icons": "^4.3.1", "react-markdown": "^7.1.1", "react-select": "^4.3.1", - "styled-components": "^5.3.3", - "url-search-params": "^1.1.0" + "styled-components": "^5.3.3" }, "scripts": { "build": "gatsby build", diff --git a/website/src/@types/file_types.d.ts b/website/src/@types/file_types.d.ts index 5a59dce475..5f0b97123e 100644 --- a/website/src/@types/file_types.d.ts +++ b/website/src/@types/file_types.d.ts @@ -5,6 +5,94 @@ type ChartMetaFlavors = { path: string }[] +declare module '*area-bump/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + AreaBump: ChartMeta + } + + export default meta +} + +declare module '*bar/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Bar: ChartMeta + BarCanvas: ChartMeta + } + + export default meta +} + +declare module '*bullet/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Bullet: ChartMeta + } + + export default meta +} + +declare module '*bump/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Bump: ChartMeta + } + + export default meta +} + +declare module '*calendar/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Calendar: ChartMeta + CalendarCanvas: ChartMeta + } + + export default meta +} + +declare module '*calendar/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Calendar: ChartMeta + CalendarCanvas: ChartMeta + } + + export default meta +} + +declare module '*chord/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Chord: ChartMeta + ChordCanvas: ChartMeta + } + + export default meta +} + +declare module '*choropleth/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Choropleth: ChartMeta + ChoroplethCanvas: ChartMeta + } + + export default meta +} + +declare module '*circle-packing/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + CirclePacking: ChartMeta + CirclePackingHtml: ChartMeta + CirclePackingCanvas: ChartMeta + } + + export default meta +} + declare module '*funnel/meta.yml' { const meta: { flavors: ChartMetaFlavors @@ -14,6 +102,65 @@ declare module '*funnel/meta.yml' { export default meta } +declare module '*heatmap/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + HeatMap: ChartMeta + HeatMapCanvas: ChartMeta + } + + export default meta +} + +declare module '*line/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Line: ChartMeta + LineCanvas: ChartMeta + } + + export default meta +} + +declare module '*marimekko/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Marimekko: ChartMeta + } + + export default meta +} + +declare module '*network/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Network: ChartMeta + NetworkCanvas: ChartMeta + } + + export default meta +} + +declare module '*parallel-coordinates/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + ParallelCoordinates: ChartMeta + ParallelCoordinatesCanvas: ChartMeta + } + + export default meta +} + +declare module '*pie/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Pie: ChartMeta + PieCanvas: ChartMeta + } + + export default meta +} + declare module '*radar/meta.yml' { const meta: { flavors: ChartMetaFlavors @@ -40,3 +187,81 @@ declare module '*sankey/meta.yml' { export default meta } + +declare module '*scatterplot/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + ScatterPlot: ChartMeta + ScatterPlotCanvas: ChartMeta + } + + export default meta +} + +declare module '*stream/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Stream: ChartMeta + } + + export default meta +} + +declare module '*sunburst/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Sunburst: ChartMeta + } + + export default meta +} + +declare module '*swarmplot/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + SwarmPlot: ChartMeta + SwarmPlotCanvas: ChartMeta + } + + export default meta +} + +declare module '*time-range/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + TimeRange: ChartMeta + } + + export default meta +} + +declare module '*treemap/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + TreeMap: ChartMeta + TreeMapHtml: ChartMeta + TreeMapCanvas: ChartMeta + } + + export default meta +} + +declare module '*voronoi/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Voronoi: ChartMeta + } + + export default meta +} + +declare module '*waffle/meta.yml' { + const meta: { + flavors: ChartMetaFlavors + Waffle: ChartMeta + WaffleHtml: ChartMeta + WaffleCanvas: ChartMeta + } + + export default meta +} diff --git a/website/src/components/PageWrapper.js b/website/src/components/PageWrapper.tsx similarity index 100% rename from website/src/components/PageWrapper.js rename to website/src/components/PageWrapper.tsx diff --git a/website/src/components/components/ComponentFlavorSelector.js b/website/src/components/components/ComponentFlavorSelector.tsx similarity index 80% rename from website/src/components/components/ComponentFlavorSelector.js rename to website/src/components/components/ComponentFlavorSelector.tsx index a0bd85aa57..5cbf8348a3 100644 --- a/website/src/components/components/ComponentFlavorSelector.js +++ b/website/src/components/components/ComponentFlavorSelector.tsx @@ -2,6 +2,40 @@ import React from 'react' import { Link } from 'gatsby' import styled from 'styled-components' import media from '../../theming/mediaQueries' +import { Flavor } from '../../types' + +const labelByFlavor: Record = { + svg: 'svg', + html: 'html', + canvas: 'canvas', + api: 'http api', +} + +interface ComponentFlavorSelectorProps { + flavors: { + flavor: Flavor + path: string + }[] + current: Flavor +} + +export const ComponentFlavorSelector = ({ flavors, current }: ComponentFlavorSelectorProps) => { + return ( + + {flavors.map(flavor => { + return ( + + {labelByFlavor[flavor.flavor]} + + ) + })} + + ) +} const Container = styled.div` font-size: 0.8rem; @@ -34,7 +68,7 @@ const Container = styled.div` `} ` -const Flavor = styled(Link)` +const FlavorItem = styled(Link)` display: inline-block; position: relative; font-weight: 600; @@ -78,42 +112,3 @@ const Flavor = styled(Link)` } } ` - -const labelByFlavor = { - svg: 'svg', - html: 'html', - canvas: 'canvas', - api: 'http api', -} - -/* -ComponentFlavorSelector.propTypes = { - flavors: PropTypes.arrayOf( - PropTypes.shape({ - flavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']), - path: PropTypes.string.isRequired, - }) - ).isRequired, - current: PropTypes.string.isRequired, -} -*/ - -const ComponentFlavorSelector = ({ flavors, current }) => { - return ( - - {flavors.map(flavor => { - return ( - - {labelByFlavor[flavor.flavor]} - - ) - })} - - ) -} - -export default ComponentFlavorSelector diff --git a/website/src/components/components/ComponentSettings.js b/website/src/components/components/ComponentSettings.tsx similarity index 71% rename from website/src/components/components/ComponentSettings.js rename to website/src/components/components/ComponentSettings.tsx index fa5c55e54c..1c797bdded 100644 --- a/website/src/components/components/ComponentSettings.js +++ b/website/src/components/components/ComponentSettings.tsx @@ -1,7 +1,44 @@ -import React, { Component } from 'react' +import React from 'react' import styled from 'styled-components' -import ControlsGroup from '../controls/ControlsGroup' import media from '../../theming/mediaQueries' +import { Flavor, ChartPropertiesGroup } from '../../types' +import { ControlsGroup } from '../controls/ControlsGroup' + +interface ComponentSettingsProps { + flavors: Flavor[] + currentFlavor: Flavor + settings: Settings + onChange: (settings: Settings) => void + groups: ChartPropertiesGroup[] +} + +export function ComponentSettings({ + flavors, + currentFlavor, + settings, + onChange, + groups, +}: ComponentSettingsProps) { + return ( + + {groups.map(group => { + return ( + + {group.name} + + + ) + })} + + ) +} const Container = styled.div` background: ${({ theme }) => theme.colors.cardBackground}; @@ -43,39 +80,3 @@ const Title = styled.div` } `} ` - -/* -ComponentSettings.propTypes = { - component: PropTypes.string.isRequired, - flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired, - currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired, - settings: PropTypes.object.isRequired, - onChange: PropTypes.func.isRequired, - groups: PropTypes.array.isRequired, -} -*/ - -const ComponentSettings = ({ component, flavors, currentFlavor, settings, onChange, groups }) => { - return ( - - {groups.map(group => { - return ( - - {group.name} - - - ) - })} - - ) -} - -export default ComponentSettings diff --git a/website/src/components/components/ComponentTabs.tsx b/website/src/components/components/ComponentTabs.tsx index 039a14fd35..ecd113aacb 100644 --- a/website/src/components/components/ComponentTabs.tsx +++ b/website/src/components/components/ComponentTabs.tsx @@ -161,7 +161,9 @@ const Nav = styled.nav` `} ` -const NavItem = styled.span` +const NavItem = styled.span<{ + isCurrent: boolean +}>` cursor: pointer; height: 46px; display: block; diff --git a/website/src/components/components/ComponentTemplate.tsx b/website/src/components/components/ComponentTemplate.tsx index 92f14bbebf..0094ba75b7 100644 --- a/website/src/components/components/ComponentTemplate.tsx +++ b/website/src/components/components/ComponentTemplate.tsx @@ -1,17 +1,18 @@ import React, { useState, useCallback, useMemo } from 'react' +import { IGatsbyImageData } from 'gatsby-plugin-image' import { Theme as NivoTheme } from '@nivo/core' import { startCase } from 'lodash' import { Seo } from '../Seo' import Layout from '../Layout' import { useTheme } from '../../theming/context' -import generateCode from '../../lib/generateChartCode' +import { generateChartCode } from '../../lib/generateChartCode' import { ComponentPage } from './ComponentPage' import { ComponentHeader } from './ComponentHeader' -import ComponentFlavorSelector from './ComponentFlavorSelector' +import { ComponentFlavorSelector } from './ComponentFlavorSelector' import { ComponentDescription } from './ComponentDescription' import { ComponentTabs } from './ComponentTabs' import { ActionsLogger, useActionsLogger } from './ActionsLogger' -import ComponentSettings from './ComponentSettings' +import { ComponentSettings } from './ComponentSettings' import { Stories } from './Stories' import { ChartMeta, ChartProperty, Flavor } from '../../types' @@ -40,6 +41,7 @@ interface ComponentTemplateProps number getTabData?: (data: Data) => Data children: (properties: Props, data: Data, theme: NivoTheme, logAction: any) => JSX.Element + image?: IGatsbyImageData } export const ComponentTemplate = < @@ -87,7 +89,7 @@ export const ComponentTemplate = < codeProperties = codePropertiesMapper(mappedProperties, data) } - const code = generateCode(`Responsive${name}`, codeProperties, { + const code = generateChartCode(`Responsive${name}`, codeProperties, { pkg: meta.package, defaults: defaultProperties, dataKey: hasData ? dataKey : null, @@ -122,7 +124,6 @@ export const ComponentTemplate = < ` -The \`${component}\`component is available in the nivo -HTTP rendering API. -The API generates a SVG and return a path to this SVG -which can then be easily embedded. - -The api accepts almost the same properties as the regular component, -in json, however it's not interactive and you cannot use code -in properties (functions). - -Please note that the demo API server is installed on heroku -using a free plan, so it might be unavailable from times to times. -` - -export default class ApiClient extends Component { - static propTypes = { - componentName: PropTypes.string.isRequired, - chartClass: PropTypes.string.isRequired, - apiPath: PropTypes.string.isRequired, - dataProperty: PropTypes.string.isRequired, - propsMapper: PropTypes.func.isRequired, - } - - static defaultProps = { - dataProperty: 'data', - propsMapper: props => props, - } - - constructor(props) { - super(props) - - this.state = { - props: props.defaultProps, - loading: false, - responseStatus: null, - response: null, - } - } - - handleSettingsUpdate = settings => { - this.setState({ props: settings }) - } - - handleDataUpdate = e => { - const { dataProperty } = this.props - const { props } = this.state - - this.setState({ - props: Object.assign({}, props, { - [dataProperty]: e.target.value, - }), - }) - } - - handleSubmit = () => { - const { apiPath, propsMapper } = this.props - const { props } = this.state - - this.setState({ - loading: true, - }) - - fetch(`${config.nivoApiUrl}${apiPath}`, { - method: 'POST', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify(propsMapper(props)), - }) - .then(res => { - this.setState({ - loading: false, - responseStatus: res.status, - }) - - return res.json() - }) - .then(res => { - this.setState({ response: res }) - }) - .catch(err => { - console.error(err) - }) - } - - render() { - const { - componentName, - chartClass, - apiPath, - controlGroups, - dataProperty, - propsMapper, - flavors, - } = this.props - const { props, loading, responseStatus, response } = this.state - - const flavorKeys = flavors.map(flavor => flavor.flavor) - - return ( - - - - {flavors && } - - - - - - - - - - - - ) - } -} - -const ControlPanel = styled.div` - position: fixed; - right: 0; - bottom: 0; - --innerWidth: calc(100% - ${({ theme }) => theme.dimensions.miniNavWidth}px); - --partialWidth: calc(var(--innerWidth) * 0.6); - width: var(--partialWidth); - background: ${({ theme }) => theme.colors.cardAltBackground}; - --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); - height: calc(var(--innerHeight) * 0.45); - z-index: 10; - overflow: hidden; - display: grid; - grid-template-rows: 1fr 2fr; - - ${media.tablet` - & { - right: 0; - bottom: 0; - --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); - height: calc(var(--innerHeight) * 0.45); - width: 60%; - } - `} - - ${media.mobile` - & { - position: relative; - right: auto; - bottom: auto; - width: auto; - height: auto; - border-left-width: 0; - z-index: 0; - } - `} -` - -const SubmitWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - padding: 12px 0; -` diff --git a/website/src/components/components/api-client/ApiClient.tsx b/website/src/components/components/api-client/ApiClient.tsx new file mode 100644 index 0000000000..21143ad42e --- /dev/null +++ b/website/src/components/components/api-client/ApiClient.tsx @@ -0,0 +1,169 @@ +import React, { useCallback, useState } from 'react' +import styled from 'styled-components' +import Layout from '../../Layout' +import media from '../../../theming/mediaQueries' +import { ComponentPage } from '../ComponentPage' +import { ComponentHeader } from '../ComponentHeader' +import { ComponentFlavorSelector } from '../ComponentFlavorSelector' +import { ComponentDescription } from '../ComponentDescription' +import { ComponentSettings } from '../ComponentSettings' +import { ApiTabs } from './ApiTabs' +import { ApiSubmit } from './ApiSubmit' +import { ApiResponse } from './ApiResponse' +import config from '../../../data/config' +import { ChartPropertiesGroup, Flavor } from '../../../types' + +const description = (component: string) => ` +The \`${component}\`component is available in the nivo +HTTP rendering API. +The API generates a SVG and return a path to this SVG +which can then be easily embedded. + +The api accepts almost the same properties as the regular component, +in json, however it's not interactive and you cannot use code +in properties (functions). + +Please note that the demo API server is installed on heroku +using a free plan, so it might be unavailable from times to times. +` + +interface ApiClientProps { + componentName: string + chartClass: string + apiPath: string + dataProperty?: string + propsMapper?: (props: any) => any + defaultProps: any + flavors: { + flavor: Flavor + path: string + }[] + controlGroups: ChartPropertiesGroup[] +} + +export const ApiClient = ({ + componentName, + chartClass, + apiPath, + dataProperty = 'data', + propsMapper = (props: any) => props, + defaultProps, + flavors, + controlGroups, +}: ApiClientProps) => { + const [isLoading, setIsLoading] = useState(false) + const [props, setProps] = useState(defaultProps) + const [responseStatus, setResponseStatus] = useState(null) + const [response, setResponse] = useState(null) + + const handleSettingsUpdate = useCallback( + (settings: any) => { + setProps(settings) + }, + [setProps] + ) + + const handleSubmit = useCallback(() => { + setIsLoading(true) + + fetch(`${config.nivoApiUrl}${apiPath}`, { + method: 'POST', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(propsMapper(props)), + }) + .then(res => { + setIsLoading(false) + setResponseStatus(res.status) + + return res.json() + }) + .then(setResponse) + .catch(err => { + console.error(err) + }) + }, [apiPath, propsMapper, props, setIsLoading, setIsLoading, setResponseStatus, setResponse]) + + const flavorKeys = flavors.map(flavor => flavor.flavor) + + return ( + + + + {flavors && } + + + + + + + + + + + + ) +} + +const ControlPanel = styled.div` + position: fixed; + right: 0; + bottom: 0; + --innerWidth: calc(100% - ${({ theme }) => theme.dimensions.miniNavWidth}px); + --partialWidth: calc(var(--innerWidth) * 0.6); + width: var(--partialWidth); + background: ${({ theme }) => theme.colors.cardAltBackground}; + --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); + height: calc(var(--innerHeight) * 0.45); + z-index: 10; + overflow: hidden; + display: grid; + grid-template-rows: 1fr 2fr; + + ${media.tablet` + & { + right: 0; + bottom: 0; + --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); + height: calc(var(--innerHeight) * 0.45); + width: 60%; + } + `} + + ${media.mobile` + & { + position: relative; + right: auto; + bottom: auto; + width: auto; + height: auto; + border-left-width: 0; + z-index: 0; + } + `} +` + +const SubmitWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 12px 0; +` diff --git a/website/src/components/components/api-client/ApiPreview.js b/website/src/components/components/api-client/ApiPreview.tsx similarity index 78% rename from website/src/components/components/api-client/ApiPreview.js rename to website/src/components/components/api-client/ApiPreview.tsx index 857cde7d97..25bf13cb81 100644 --- a/website/src/components/components/api-client/ApiPreview.js +++ b/website/src/components/components/api-client/ApiPreview.tsx @@ -1,7 +1,29 @@ import React from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' +interface ApiPreviewProps { + responseStatus: number | null + chartUrl: string +} + +export const ApiPreview = ({ responseStatus, chartUrl }: ApiPreviewProps) => { + if (responseStatus === 201 && chartUrl) { + return ( + + api result + + ) + } + + return ( + + Click the generate button in order to generate the chart. +
+ You can customize settings by using dedicated controls. + + ) +} + const Link = styled.a` position: relative; width: 100%; @@ -27,30 +49,3 @@ const EmptyContainer = styled.div` width: 100%; height: 100%; ` - -const ApiPreview = ({ responseStatus, chartUrl }) => { - if (responseStatus === 201 && chartUrl) { - return ( - - api result - - ) - } - - return ( - - Click the generate button in order to generate the chart. -
- You can customize settings by using dedicated controls. - - ) - - return
{content}
-} - -ApiPreview.propTypes = { - responseStatus: PropTypes.number, - chartUrl: PropTypes.string, -} - -export default ApiPreview diff --git a/website/src/components/components/api-client/ApiResponse.js b/website/src/components/components/api-client/ApiResponse.js deleted file mode 100644 index 16e45992bd..0000000000 --- a/website/src/components/components/api-client/ApiResponse.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, { Component } from 'react' -import styled from 'styled-components' - -const Container = styled.div` - background: ${({ theme }) => theme.colors.cardBackground}; - border-top: 1px solid ${({ theme }) => theme.colors.border}; - overflow-x: hidden; - overflow-y: auto; -` - -const Header = styled.div` - padding: 12px 20px; - border-bottom: 1px solid ${({ theme }) => theme.colors.borderLight}; -` - -const ResponseJson = styled.pre` - padding: 12px 20px; - font-size: 13px; - line-height: 1.6em; - overflow: hidden; - width: 100%; - margin: 0; -` - -class ApiResponse extends Component { - render() { - const { responseStatus, response } = this.props - - let responseContent = 'no response available' - if (response) { - responseContent = JSON.stringify(response, null, ' ') - } - - return ( - -
- Response {responseStatus ? {responseStatus} : 'n/a'} -
- {responseContent} - - ) - } -} - -ApiResponse.propTypes = {} - -ApiResponse.defaultProps = {} - -export default ApiResponse diff --git a/website/src/components/components/api-client/ApiResponse.tsx b/website/src/components/components/api-client/ApiResponse.tsx new file mode 100644 index 0000000000..2aa4cf4b01 --- /dev/null +++ b/website/src/components/components/api-client/ApiResponse.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import styled from 'styled-components' + +interface ApiResponseProps { + responseStatus: number | null + response: any +} + +export const ApiResponse = ({ responseStatus, response }: ApiResponseProps) => { + let responseContent = 'no response available' + if (response) { + responseContent = JSON.stringify(response, null, ' ') + } + + return ( + +
Response {responseStatus ? {responseStatus} : 'n/a'}
+ {responseContent} + + ) +} + +const Container = styled.div` + background: ${({ theme }) => theme.colors.cardBackground}; + border-top: 1px solid ${({ theme }) => theme.colors.border}; + overflow-x: hidden; + overflow-y: auto; +` + +const Header = styled.div` + padding: 12px 20px; + border-bottom: 1px solid ${({ theme }) => theme.colors.borderLight}; +` + +const ResponseJson = styled.pre` + padding: 12px 20px; + font-size: 13px; + line-height: 1.6em; + overflow: hidden; + width: 100%; + margin: 0; +` diff --git a/website/src/components/components/api-client/ApiSubmit.js b/website/src/components/components/api-client/ApiSubmit.js deleted file mode 100644 index 101370dd9e..0000000000 --- a/website/src/components/components/api-client/ApiSubmit.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { Component } from 'react' -import styled from 'styled-components' -import PropTypes from 'prop-types' - -const Button = styled.span` - display: block; - background-color: ${({ theme }) => theme.colors.accent}; - color: #fff; - text-align: center; - padding: 12px 24px; - border-radius: 2px; - cursor: pointer; - text-decoration: none; -` - -class ApiSubmit extends Component { - render() { - const { loading, onClick } = this.props - - return - } -} - -ApiSubmit.propTypes = { - loading: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, -} - -ApiSubmit.defaultProps = {} - -export default ApiSubmit diff --git a/website/src/components/components/api-client/ApiSubmit.tsx b/website/src/components/components/api-client/ApiSubmit.tsx new file mode 100644 index 0000000000..c9c8c8fcef --- /dev/null +++ b/website/src/components/components/api-client/ApiSubmit.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import styled from 'styled-components' + +interface ApiSubmitProps { + loading: boolean + onClick: () => void +} + +export const ApiSubmit = ({ loading, onClick }: ApiSubmitProps) => { + return +} + +const Button = styled.span` + display: block; + background-color: ${({ theme }) => theme.colors.accent}; + color: #fff; + text-align: center; + padding: 12px 24px; + border-radius: 2px; + cursor: pointer; + text-decoration: none; +` diff --git a/website/src/components/components/api-client/ApiTabs.js b/website/src/components/components/api-client/ApiTabs.tsx similarity index 85% rename from website/src/components/components/api-client/ApiTabs.js rename to website/src/components/components/api-client/ApiTabs.tsx index 5b834133b9..f971073bee 100644 --- a/website/src/components/components/api-client/ApiTabs.js +++ b/website/src/components/components/api-client/ApiTabs.tsx @@ -1,18 +1,35 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import styled, { keyframes } from 'styled-components' -import ApiPreview from './ApiPreview' import media from '../../../theming/mediaQueries' import { useTheme } from '../../../theming/context' import { CodeBlock } from '../../CodeBlock' +import { ApiPreview } from './ApiPreview' + +const tabs = ['preview', 'body', 'data'] as const +type Tab = typeof tabs[number] + +interface ApiTabsProps { + chartClass: string + data: Data + body: Body + isLoading: boolean + responseStatus: number | null + chartUrl: string +} -const tabs = ['preview', 'body', 'data'] - -const ApiTabs = ({ chartClass, data, body, isLoading, responseStatus, chartUrl }) => { +export function ApiTabs({ + chartClass, + data, + body, + isLoading, + responseStatus, + chartUrl, +}: ApiTabsProps) { const theme = useTheme() - const [currentTab, setCurrentTab] = useState('preview') - const [hoverTab, setHoverTab] = useState(null) + const [currentTab, setCurrentTab] = useState('preview') + const [hoverTab, setHoverTab] = useState(null) return ( @@ -39,11 +56,7 @@ const ApiTabs = ({ chartClass, data, body, isLoading, responseStatus, chartUrl } {currentTab === 'preview' && ( - + )} {currentTab === 'body' && {JSON.stringify(body, null, ' ')}} {currentTab === 'data' && {data}} @@ -58,8 +71,6 @@ ApiTabs.propTypes = { data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), } -export default ApiTabs - const Wrapper = styled.div` position: fixed; top: ${({ theme }) => theme.dimensions.headerHeight}px; @@ -106,7 +117,9 @@ const Nav = styled.nav` position: relative; ` -const NavItem = styled.span` +const NavItem = styled.span<{ + isCurrent: boolean +}>` cursor: pointer; height: 46px; display: block; @@ -141,7 +154,31 @@ const Content = styled.div` overflow-y: auto; ` -const LoaderContainer = styled.div` +const Loader = ({ isLoading }: { isLoading: boolean }) => { + return ( + + + + + + + + + + + + + + + + + + ) +} + +const LoaderContainer = styled.div<{ + isLoading: boolean +}>` position: absolute; top: 50%; left: 50%; @@ -171,7 +208,9 @@ const loaderBarAnimation = keyframes` } ` -const LoaderBar = styled.span` +const LoaderBar = styled.span<{ + index: number +}>` display: block; background: ${({ theme }) => theme.colors.accent}; width: 100%; @@ -183,25 +222,3 @@ const LoaderBar = styled.span` animation-iteration-count: infinite; animation-delay: ${({ index }) => (index + 1) * 60}ms; ` - -const Loader = ({ isLoading }) => { - return ( - - - - - - - - - - - - - - - - - - ) -} diff --git a/website/src/components/components/explorer/ComponentsExplorer.js b/website/src/components/components/explorer/ComponentsExplorer.tsx similarity index 81% rename from website/src/components/components/explorer/ComponentsExplorer.js rename to website/src/components/components/explorer/ComponentsExplorer.tsx index e42a8e43bc..20ce430dfe 100644 --- a/website/src/components/components/explorer/ComponentsExplorer.js +++ b/website/src/components/components/explorer/ComponentsExplorer.tsx @@ -1,15 +1,25 @@ import React, { useMemo, useCallback } from 'react' -import PropTypes from 'prop-types' import Helmet from 'react-helmet' import styled from 'styled-components' import media from '../../../theming/mediaQueries' import PageContent from '../../PageContent' -import URLSearchParams from 'url-search-params' -import ComponentsSearch from './ComponentsSearch' -import ComponentsFilters from './ComponentsFilters' -import ComponentsGrid from './ComponentsGrid' +import { ComponentsSearch } from './ComponentsSearch' +import { ComponentsFilters } from './ComponentsFilters' +import { ComponentsGrid } from './ComponentsGrid' -const ComponentsExplorer = ({ location, navigate }) => { +interface ComponentsExplorerProps { + location: { + search: string + } + navigate: ( + path: string, + options?: { + replace?: boolean + } + ) => void +} + +export const ComponentsExplorer = ({ location, navigate }: ComponentsExplorerProps) => { const [term, filter] = useMemo(() => { const params = new URLSearchParams(location.search) return [params.get('q'), params.get('filter')] @@ -28,7 +38,7 @@ const ComponentsExplorer = ({ location, navigate }) => { [filter, navigate] ) const handleFilter = useCallback( - filter => { + (filter: string | null) => { const params = new URLSearchParams() if (term) params.append('q', term) if (filter) params.append('filter', filter) @@ -53,13 +63,6 @@ const ComponentsExplorer = ({ location, navigate }) => { ) } -ComponentsExplorer.propTypes = { - location: PropTypes.shape({ - search: PropTypes.string.isRequired, - }).isRequired, - navigate: PropTypes.func.isRequired, -} - const Header = styled.div` height: 130px; color: white; @@ -102,5 +105,3 @@ const SearchAndFilters = styled.div` } `} ` - -export default ComponentsExplorer diff --git a/website/src/components/components/explorer/ComponentsFilters.js b/website/src/components/components/explorer/ComponentsFilters.tsx similarity index 50% rename from website/src/components/components/explorer/ComponentsFilters.js rename to website/src/components/components/explorer/ComponentsFilters.tsx index d42fca71e4..1f26f4b0ad 100644 --- a/website/src/components/components/explorer/ComponentsFilters.js +++ b/website/src/components/components/explorer/ComponentsFilters.tsx @@ -1,42 +1,44 @@ import React, { memo } from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' import media from '../../../theming/mediaQueries' -const filters = ['SVG', 'HTML', 'Canvas', 'HTTP API'] +const filters = ['SVG', 'HTML', 'Canvas', 'HTTP API'] as const -const ComponentsFilters = memo(({ filter: currentFilter, onChange }) => { - return ( - - { - onChange(null) - }} - > - All - - {filters.map(filter => ( +interface ComponentsFiltersProps { + filter: string | null + onChange: (filter: string | null) => void +} + +export const ComponentsFilters = memo( + ({ filter: currentFilter, onChange }: ComponentsFiltersProps) => { + return ( + { - onChange(filter) + onChange(null) }} > - {filter} + All - ))} - - ) -}) - -ComponentsFilters.displayName = 'ComponentsFilters' -ComponentsFilters.propTypes = { - onChange: PropTypes.func.isRequired, -} - -export default ComponentsFilters + {filters.map(filter => ( + { + onChange(filter) + }} + > + {filter} + + ))} + + ) + } +) const Container = styled.div` display: flex; @@ -48,7 +50,9 @@ const Container = styled.div` font-weight: 700; ` -const Item = styled.span` +const Item = styled.span<{ + isActive: boolean +}>` line-height: 38px; background: ${({ isActive, theme }) => isActive ? theme.colors.accent : theme.colors.cardBackground}; diff --git a/website/src/components/components/explorer/ComponentsGrid.js b/website/src/components/components/explorer/ComponentsGrid.tsx similarity index 52% rename from website/src/components/components/explorer/ComponentsGrid.js rename to website/src/components/components/explorer/ComponentsGrid.tsx index 8ef04abc1a..440ed05450 100644 --- a/website/src/components/components/explorer/ComponentsGrid.js +++ b/website/src/components/components/explorer/ComponentsGrid.tsx @@ -1,10 +1,67 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' +import React from 'react' import styled from 'styled-components' -import ComponentsGridItem from './ComponentsGridItem' +import { ComponentsGridItem } from './ComponentsGridItem' import * as nav from '../../../data/nav' import media from '../../../theming/mediaQueries' +type NavItem = { + label: string + path: string + icon: string + tags: string[] +} +type FilterFunction = (item: NavItem) => boolean + +const getFilterFunction = (term?: string | null, filter?: string | null): FilterFunction => { + let predicates: FilterFunction[] = [] + if (term && term.length > 0) { + predicates.push(({ label }) => label.toLowerCase().includes(term.toLowerCase())) + } + if (filter) { + predicates.push(({ tags }) => + tags.map(tag => tag.toLowerCase()).includes(filter.toLowerCase()) + ) + } + + return item => predicates.every(predicate => predicate(item)) +} + +interface ComponentsGridProps { + filter?: string | null + term?: string | null +} + +export const ComponentsGrid = ({ filter, term }: ComponentsGridProps) => { + let items = nav.allComponents + if (term || filter) { + const filterFunction = getFilterFunction(term, filter) + items = nav.allComponents.filter(filterFunction) + } + + if (items.length === 0) { + return ( + + {`¯\\_(ツ)_/¯`} +
no result, sorry…
+ + ) + } + + return ( + + {items.map(item => ( + + ))} + + ) +} + const Grid = styled.div` display: grid; grid-row-gap: 15px; @@ -52,63 +109,3 @@ const EmptyIcon = styled.span` white-space: pre; color: ${({ theme }) => theme.colors.accent}; ` - -const getFilterFunction = (term, filter) => { - let predicates = [] - if (term && term.length > 0) { - predicates.push(({ label }) => label.toLowerCase().includes(term.toLowerCase())) - } - if (filter) { - predicates.push(({ tags }) => - tags.map(tag => tag.toLowerCase()).includes(filter.toLowerCase()) - ) - } - - return item => predicates.every(predicate => predicate(item)) -} - -export default class ComponentsGrid extends Component { - static propTypes = { - filter: PropTypes.string, - term: PropTypes.string, - onClick: PropTypes.func, - } - - static defaultProps = { - onClick: () => {}, - } - - render() { - const { term, filter, onClick } = this.props - - let items = nav.allComponents - if (term || filter) { - const filterFunction = getFilterFunction(term, filter) - items = nav.allComponents.filter(filterFunction) - } - - if (items.length === 0) { - return ( - - {`¯\\_(ツ)_/¯`} -
no result, sorry…
- - ) - } - - return ( - - {items.map(item => ( - - ))} - - ) - } -} diff --git a/website/src/components/components/explorer/ComponentsGridItem.js b/website/src/components/components/explorer/ComponentsGridItem.tsx similarity index 92% rename from website/src/components/components/explorer/ComponentsGridItem.js rename to website/src/components/components/explorer/ComponentsGridItem.tsx index 67c0e5ab18..adb14f80ea 100644 --- a/website/src/components/components/explorer/ComponentsGridItem.js +++ b/website/src/components/components/explorer/ComponentsGridItem.tsx @@ -4,6 +4,33 @@ import styled from 'styled-components' import media from '../../../theming/mediaQueries' import { useTheme } from '../../../theming/context' +interface ComponentsGridItemProps { + path: string + name: string + icon: string + tags: string[] +} + +export const ComponentsGridItem = memo(({ path, name, icon, tags }: ComponentsGridItemProps) => { + const theme = useTheme() + + return ( + + +
+ {name} + {tags.length > 0 && ( + + {tags.map(tag => ( + {tag} + ))} + + )} +
+ + ) +}) + const Container = styled(Link)` text-decoration: none; background-color: ${({ theme }) => theme.colors.cardBackground}; @@ -86,25 +113,3 @@ const Tag = styled.span` border-left: none; } ` - -const ComponentsGridItem = memo(({ path, name, icon, tags }) => { - const theme = useTheme() - - return ( - - -
- {name} - {tags.length > 0 && ( - - {tags.map(tag => ( - {tag} - ))} - - )} -
- - ) -}) - -export default ComponentsGridItem diff --git a/website/src/components/components/explorer/ComponentsSearch.js b/website/src/components/components/explorer/ComponentsSearch.tsx similarity index 84% rename from website/src/components/components/explorer/ComponentsSearch.js rename to website/src/components/components/explorer/ComponentsSearch.tsx index d42f4f20ef..e341141a45 100644 --- a/website/src/components/components/explorer/ComponentsSearch.js +++ b/website/src/components/components/explorer/ComponentsSearch.tsx @@ -1,14 +1,18 @@ import React, { memo, useCallback } from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' import { MdSearch, MdClose } from 'react-icons/md' -const ComponentsSearch = memo(({ term, onChange, style }) => { +interface ComponentsSearchProps { + term: string + onChange: (term: string) => void +} + +export const ComponentsSearch = memo(({ term, onChange }: ComponentsSearchProps) => { const handleSearch = useCallback(event => onChange(event.target.value), [onChange]) const handleClear = useCallback(() => onChange(''), [onChange]) return ( - + {term.length > 0 && ( @@ -20,15 +24,6 @@ const ComponentsSearch = memo(({ term, onChange, style }) => { ) }) -ComponentsSearch.displayName = 'ComponentsSearch' -ComponentsSearch.propTypes = { - term: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - style: PropTypes.object, -} - -export default ComponentsSearch - const Container = styled.div` position: relative; width: 100%; diff --git a/website/src/components/components/explorer/index.ts b/website/src/components/components/explorer/index.ts new file mode 100644 index 0000000000..63eea0b14a --- /dev/null +++ b/website/src/components/components/explorer/index.ts @@ -0,0 +1 @@ +export * from './ComponentsExplorer' diff --git a/website/src/components/controls/ArrayControl.tsx b/website/src/components/controls/ArrayControl.tsx index 5423db1e2b..ba50ec8fd2 100644 --- a/website/src/components/controls/ArrayControl.tsx +++ b/website/src/components/controls/ArrayControl.tsx @@ -1,7 +1,7 @@ import React, { memo, Fragment, useMemo, useState, useCallback, MouseEvent } from 'react' import styled from 'styled-components' import { PropertyHeader } from './PropertyHeader' -import ControlsGroup from './ControlsGroup' +import { ControlsGroup } from './ControlsGroup' import { Cell, Toggle } from './styled' import { Help } from './Help' import { Flavor, ChartProperty } from '../../types' diff --git a/website/src/components/controls/ControlsGroup.tsx b/website/src/components/controls/ControlsGroup.tsx index 44c2f99f58..ee9658d9e9 100644 --- a/website/src/components/controls/ControlsGroup.tsx +++ b/website/src/components/controls/ControlsGroup.tsx @@ -420,7 +420,7 @@ interface ControlsGroupProps { context?: any } -const ControlsGroup = ({ +export const ControlsGroup = ({ name, flavors = ['svg'], currentFlavor = 'svg', @@ -444,5 +444,3 @@ const ControlsGroup = ({ ))} ) - -export default ControlsGroup diff --git a/website/src/components/controls/ControlsGroups.tsx b/website/src/components/controls/ControlsGroups.tsx index c742cb8933..d5523a4d9d 100644 --- a/website/src/components/controls/ControlsGroups.tsx +++ b/website/src/components/controls/ControlsGroups.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import ControlsGroup from '../controls/ControlsGroup' +import { ControlsGroup } from './ControlsGroup' import media from '../../theming/mediaQueries' import { ChartProperty } from '../../types' diff --git a/website/src/components/controls/ObjectControl.tsx b/website/src/components/controls/ObjectControl.tsx index 501e8335ab..f7c88e4104 100644 --- a/website/src/components/controls/ObjectControl.tsx +++ b/website/src/components/controls/ObjectControl.tsx @@ -1,6 +1,6 @@ import React, { memo, useMemo, useState, useCallback } from 'react' import styled from 'styled-components' -import ControlsGroup from './ControlsGroup' +import { ControlsGroup } from './ControlsGroup' import { PropertyHeader } from './PropertyHeader' import { Cell, Toggle } from './styled' import { Help } from './Help' diff --git a/website/src/components/guides/GuideDemoBlock.tsx b/website/src/components/guides/GuideDemoBlock.tsx index 5496511358..93fab2495d 100644 --- a/website/src/components/guides/GuideDemoBlock.tsx +++ b/website/src/components/guides/GuideDemoBlock.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, useState } from 'react' import styled from 'styled-components' import media from '../../theming/mediaQueries' import { CollapsibleCard } from '../CollapsibleCard' -import ControlsGroup from '../controls/ControlsGroup' +import { ControlsGroup } from '../controls/ControlsGroup' import { Highlight } from '../Highlight' import { ChartProperty } from '../../types' diff --git a/website/src/components/guides/patterns/PatternsDotsDemo.tsx b/website/src/components/guides/patterns/PatternsDotsDemo.tsx index 3aba7c705e..2ffaa7610e 100644 --- a/website/src/components/guides/patterns/PatternsDotsDemo.tsx +++ b/website/src/components/guides/patterns/PatternsDotsDemo.tsx @@ -1,11 +1,5 @@ import React from 'react' -import { - Defs, - // @ts-ignore - patternDotsDef, - // @ts-ignore - PatternDots, -} from '@nivo/core' +import { Defs, patternDotsDef, PatternDots } from '@nivo/core' import { ChartProperty } from '../../../types' import { GuideDemoBlock } from '../GuideDemoBlock' diff --git a/website/src/components/guides/patterns/PatternsLinesDemo.tsx b/website/src/components/guides/patterns/PatternsLinesDemo.tsx index f790f7e4dc..1841765e7f 100644 --- a/website/src/components/guides/patterns/PatternsLinesDemo.tsx +++ b/website/src/components/guides/patterns/PatternsLinesDemo.tsx @@ -1,10 +1,5 @@ import React from 'react' -import { - Defs, - PatternLines, - // @ts-ignore - patternLinesDef, -} from '@nivo/core' +import { Defs, PatternLines, patternLinesDef } from '@nivo/core' import { ChartProperty } from '../../../types' import { GuideDemoBlock } from '../GuideDemoBlock' diff --git a/website/src/components/guides/patterns/PatternsSquaresDemo.tsx b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx index 2eb3c7c398..f86fb70255 100644 --- a/website/src/components/guides/patterns/PatternsSquaresDemo.tsx +++ b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx @@ -1,11 +1,5 @@ import React from 'react' -import { - Defs, - // @ts-ignore - patternSquaresDef, - // @ts-ignore - PatternSquares, -} from '@nivo/core' +import { Defs, patternSquaresDef, PatternSquares } from '@nivo/core' import { ChartProperty } from '../../../types' import { GuideDemoBlock } from '../GuideDemoBlock' diff --git a/website/src/components/image.js b/website/src/components/image.js deleted file mode 100644 index 95b20eeea9..0000000000 --- a/website/src/components/image.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { StaticQuery, graphql } from 'gatsby' -import Img from 'gatsby-image' - -/* - * This component is built using `gatsby-image` to automatically serve optimized - * images with lazy loading and reduced file sizes. The image is loaded using a - * `StaticQuery`, which allows us to load the image from directly within this - * component, rather than having to pass the image data down from pages. - * - * For more information, see the docs: - * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `StaticQuery`: https://gatsby.dev/staticquery - */ - -const Image = () => ( - } - /> -) -export default Image diff --git a/website/src/data/components/area-bump/mapper.js b/website/src/data/components/area-bump/mapper.ts similarity index 100% rename from website/src/data/components/area-bump/mapper.js rename to website/src/data/components/area-bump/mapper.ts diff --git a/website/src/data/components/bar/generator.js b/website/src/data/components/bar/generator.ts similarity index 100% rename from website/src/data/components/bar/generator.js rename to website/src/data/components/bar/generator.ts diff --git a/website/src/data/components/bar/mapper.js b/website/src/data/components/bar/mapper.tsx similarity index 94% rename from website/src/data/components/bar/mapper.js rename to website/src/data/components/bar/mapper.tsx index b95f1b4458..baaea50cb6 100644 --- a/website/src/data/components/bar/mapper.js +++ b/website/src/data/components/bar/mapper.tsx @@ -16,7 +16,7 @@ const TooltipKey = styled.span` ` const TooltipValue = styled.span`` -const CustomTooltip = ({ color, ...bar }) => { +const CustomTooltip = ({ color, ...bar }: any) => { return ( id @@ -42,7 +42,7 @@ export default settingsMapper( axisRight: mapAxis('right'), axisBottom: mapAxis('bottom'), axisLeft: mapAxis('left'), - tooltip: (value, values) => { + tooltip: (_value: any, values: any) => { if (!values['custom tooltip example']) return undefined return CustomTooltip diff --git a/website/src/data/components/bump/mapper.js b/website/src/data/components/bump/mapper.ts similarity index 100% rename from website/src/data/components/bump/mapper.js rename to website/src/data/components/bump/mapper.ts diff --git a/website/src/data/components/calendar/mapper.js b/website/src/data/components/calendar/mapper.tsx similarity index 100% rename from website/src/data/components/calendar/mapper.js rename to website/src/data/components/calendar/mapper.tsx diff --git a/website/src/data/components/chord/mapper.js b/website/src/data/components/chord/mapper.ts similarity index 100% rename from website/src/data/components/chord/mapper.js rename to website/src/data/components/chord/mapper.ts diff --git a/website/src/data/components/circle-packing/mapper.js b/website/src/data/components/circle-packing/mapper.ts similarity index 100% rename from website/src/data/components/circle-packing/mapper.js rename to website/src/data/components/circle-packing/mapper.ts diff --git a/website/src/data/components/geo/generator.js b/website/src/data/components/geo/generator.ts similarity index 100% rename from website/src/data/components/geo/generator.js rename to website/src/data/components/geo/generator.ts diff --git a/website/src/data/components/geo/mapper.js b/website/src/data/components/geo/mapper.tsx similarity index 100% rename from website/src/data/components/geo/mapper.js rename to website/src/data/components/geo/mapper.tsx diff --git a/website/src/data/components/heatmap/generator.js b/website/src/data/components/heatmap/generator.ts similarity index 100% rename from website/src/data/components/heatmap/generator.js rename to website/src/data/components/heatmap/generator.ts diff --git a/website/src/data/components/heatmap/mapper.js b/website/src/data/components/heatmap/mapper.tsx similarity index 100% rename from website/src/data/components/heatmap/mapper.js rename to website/src/data/components/heatmap/mapper.tsx diff --git a/website/src/data/components/line/defaults.js b/website/src/data/components/line/defaults.ts similarity index 100% rename from website/src/data/components/line/defaults.js rename to website/src/data/components/line/defaults.ts diff --git a/website/src/data/components/line/generator.js b/website/src/data/components/line/generator.ts similarity index 100% rename from website/src/data/components/line/generator.js rename to website/src/data/components/line/generator.ts diff --git a/website/src/data/components/line/mapper.js b/website/src/data/components/line/mapper.ts similarity index 100% rename from website/src/data/components/line/mapper.js rename to website/src/data/components/line/mapper.ts diff --git a/website/src/data/components/marimekko/mapper.js b/website/src/data/components/marimekko/mapper.tsx similarity index 97% rename from website/src/data/components/marimekko/mapper.js rename to website/src/data/components/marimekko/mapper.tsx index 53e1568f73..dffe43697c 100644 --- a/website/src/data/components/marimekko/mapper.js +++ b/website/src/data/components/marimekko/mapper.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import { patternDotsDef, patternLinesDef } from '@nivo/core' +import { patternLinesDef } from '@nivo/core' import { mapAxis, mapFormat, settingsMapper } from '../../../lib/settings' const TooltipWrapper = styled.div` diff --git a/website/src/data/components/parallel-coordinates/mapper.js b/website/src/data/components/parallel-coordinates/mapper.ts similarity index 100% rename from website/src/data/components/parallel-coordinates/mapper.js rename to website/src/data/components/parallel-coordinates/mapper.ts diff --git a/website/src/data/components/pie/mapper.js b/website/src/data/components/pie/mapper.tsx similarity index 99% rename from website/src/data/components/pie/mapper.js rename to website/src/data/components/pie/mapper.tsx index c994ea9d7c..19769d95aa 100644 --- a/website/src/data/components/pie/mapper.js +++ b/website/src/data/components/pie/mapper.tsx @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +// @ts-ignore import { patternDotsDef, patternLinesDef } from '@nivo/core' import { mapFormat, settingsMapper } from '../../../lib/settings' diff --git a/website/src/data/components/scatterplot/generator.js b/website/src/data/components/scatterplot/generator.ts similarity index 100% rename from website/src/data/components/scatterplot/generator.js rename to website/src/data/components/scatterplot/generator.ts diff --git a/website/src/data/components/scatterplot/mapper.js b/website/src/data/components/scatterplot/mapper.ts similarity index 94% rename from website/src/data/components/scatterplot/mapper.js rename to website/src/data/components/scatterplot/mapper.ts index 46dbf8abba..3481b663a1 100644 --- a/website/src/data/components/scatterplot/mapper.js +++ b/website/src/data/components/scatterplot/mapper.ts @@ -1,4 +1,3 @@ -import React from 'react' import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings' export default settingsMapper( diff --git a/website/src/data/components/stream/defaults.js b/website/src/data/components/stream/defaults.ts similarity index 100% rename from website/src/data/components/stream/defaults.js rename to website/src/data/components/stream/defaults.ts diff --git a/website/src/data/components/stream/generator.js b/website/src/data/components/stream/generator.ts similarity index 100% rename from website/src/data/components/stream/generator.js rename to website/src/data/components/stream/generator.ts diff --git a/website/src/data/components/stream/mapper.js b/website/src/data/components/stream/mapper.ts similarity index 100% rename from website/src/data/components/stream/mapper.js rename to website/src/data/components/stream/mapper.ts diff --git a/website/src/data/components/sunburst/mapper.js b/website/src/data/components/sunburst/mapper.tsx similarity index 100% rename from website/src/data/components/sunburst/mapper.js rename to website/src/data/components/sunburst/mapper.tsx diff --git a/website/src/data/components/swarmplot/generator.js b/website/src/data/components/swarmplot/generator.ts similarity index 100% rename from website/src/data/components/swarmplot/generator.js rename to website/src/data/components/swarmplot/generator.ts diff --git a/website/src/data/components/swarmplot/mapper.js b/website/src/data/components/swarmplot/mapper.ts similarity index 100% rename from website/src/data/components/swarmplot/mapper.js rename to website/src/data/components/swarmplot/mapper.ts diff --git a/website/src/data/components/time-range/mapper.js b/website/src/data/components/time-range/mapper.tsx similarity index 100% rename from website/src/data/components/time-range/mapper.js rename to website/src/data/components/time-range/mapper.tsx diff --git a/website/src/data/components/treemap/generator.js b/website/src/data/components/treemap/generator.ts similarity index 100% rename from website/src/data/components/treemap/generator.js rename to website/src/data/components/treemap/generator.ts diff --git a/website/src/data/components/treemap/mapper.js b/website/src/data/components/treemap/mapper.ts similarity index 100% rename from website/src/data/components/treemap/mapper.js rename to website/src/data/components/treemap/mapper.ts diff --git a/website/src/data/components/waffle/CustomTooltip.js b/website/src/data/components/waffle/CustomTooltip.tsx similarity index 100% rename from website/src/data/components/waffle/CustomTooltip.js rename to website/src/data/components/waffle/CustomTooltip.tsx diff --git a/website/src/data/components/waffle/mapper.js b/website/src/data/components/waffle/mapper.tsx similarity index 100% rename from website/src/data/components/waffle/mapper.js rename to website/src/data/components/waffle/mapper.tsx diff --git a/website/src/data/config.js b/website/src/data/config.ts similarity index 100% rename from website/src/data/config.js rename to website/src/data/config.ts diff --git a/website/src/data/nav.js b/website/src/data/nav.ts similarity index 100% rename from website/src/data/nav.js rename to website/src/data/nav.ts diff --git a/website/src/lib/generateChartCode.js b/website/src/lib/generateChartCode.ts similarity index 85% rename from website/src/lib/generateChartCode.js rename to website/src/lib/generateChartCode.ts index 424fe34771..0ad2fbdab6 100644 --- a/website/src/lib/generateChartCode.js +++ b/website/src/lib/generateChartCode.ts @@ -6,7 +6,7 @@ import isNumber from 'lodash/isNumber' import isBoolean from 'lodash/isBoolean' import dedent from 'dedent-js' -const indent = (content, spaces = 8) => +const indent = (content: string, spaces: number = 8) => content .split('\n') .map((line, i) => { @@ -15,10 +15,10 @@ const indent = (content, spaces = 8) => }) .join('\n') -const toJson = value => { +const toJson = (value: any) => { const jsonString = JSON.stringify(value, null, 4) const normalized = jsonString - .replace(/^(\s+)"([a-z]{1}[a-z]*)"\: /gim, (match, space, key) => { + .replace(/^(\s+)"([a-z]{1}[a-z]*)"\: /gim, (_match, space, key) => { return `${space}${key}: ` }) .replace(/"/gm, `'`) @@ -30,10 +30,20 @@ const toJson = value => { return indent(normalized) } -const generate = ( - name, - props, - { dataKey = 'data', children = [], defaults = {}, pkg = 'nivo' } = {} +export const generateChartCode = ( + name: string, + props: any, + { + dataKey = 'data', + children = [], + defaults = {}, + pkg = 'nivo', + }: { + dataKey?: string + children?: any[] + defaults?: any + pkg?: string + } = {} ) => { const properties = [] let args = '' @@ -96,5 +106,3 @@ const My${name} = (${args}) => ( /> )` } - -export default generate diff --git a/website/src/pages/area-bump/index.js b/website/src/pages/area-bump/index.tsx similarity index 95% rename from website/src/pages/area-bump/index.js rename to website/src/pages/area-bump/index.tsx index 5f63422a31..187f944964 100644 --- a/website/src/pages/area-bump/index.js +++ b/website/src/pages/area-bump/index.tsx @@ -13,15 +13,13 @@ const serieIds = ['JavaScript', 'ReasonML', 'TypeScript', 'Elm', 'CoffeeScript'] const generateData = () => { const years = range(2000, 2006) - const series = serieIds.map(id => ({ + return serieIds.map(id => ({ id, data: years.map(year => ({ x: year, y: random(10, 30), })), })) - - return series } const initialProperties = { @@ -112,7 +110,7 @@ const AreaBump = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/area-bump.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } @@ -133,6 +131,11 @@ const AreaBump = () => { image={image} > {(properties, data, theme, logAction) => { + console.log({ + properties, + data, + }) + return ( { query { image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/bar/canvas.js b/website/src/pages/bar/canvas.js index 31b5159f46..c0a543bd14 100644 --- a/website/src/pages/bar/canvas.js +++ b/website/src/pages/bar/canvas.js @@ -108,7 +108,7 @@ const BarCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/bar-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js index 43c8d0042b..1bc9ad0d57 100644 --- a/website/src/pages/bar/index.js +++ b/website/src/pages/bar/index.js @@ -160,7 +160,7 @@ const Bar = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/bullet/index.js b/website/src/pages/bullet/index.js index 3981de72c6..be93fde5c7 100644 --- a/website/src/pages/bullet/index.js +++ b/website/src/pages/bullet/index.js @@ -55,7 +55,7 @@ const Bullet = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/bullet.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/bump/index.js b/website/src/pages/bump/index.js index cc47fec798..98e661065a 100644 --- a/website/src/pages/bump/index.js +++ b/website/src/pages/bump/index.js @@ -124,7 +124,7 @@ const Bump = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/bump.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/calendar/api.js b/website/src/pages/calendar/api.tsx similarity index 94% rename from website/src/pages/calendar/api.js rename to website/src/pages/calendar/api.tsx index 2931fcba8b..b91bae7f23 100644 --- a/website/src/pages/calendar/api.js +++ b/website/src/pages/calendar/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateDayCounts } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import mapper from '../../data/components/calendar/mapper' import { groups } from '../../data/components/calendar/props' import meta from '../../data/components/calendar/meta.yml' @@ -21,7 +21,7 @@ const CalendarApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/calendar/canvas.js b/website/src/pages/calendar/canvas.js index 6f73e751eb..9057769404 100644 --- a/website/src/pages/calendar/canvas.js +++ b/website/src/pages/calendar/canvas.js @@ -76,7 +76,7 @@ const CalendarCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/calendar/index.js b/website/src/pages/calendar/index.js index 1a9d108985..696ebb4acd 100644 --- a/website/src/pages/calendar/index.js +++ b/website/src/pages/calendar/index.js @@ -74,7 +74,7 @@ const Calendar = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/chord/api.js b/website/src/pages/chord/api.tsx similarity index 94% rename from website/src/pages/chord/api.js rename to website/src/pages/chord/api.tsx index 6bdaaf080a..5a2098e0d4 100644 --- a/website/src/pages/chord/api.js +++ b/website/src/pages/chord/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateChordData } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/chord/props' import mapper from '../../data/components/chord/mapper' import meta from '../../data/components/chord/meta.yml' @@ -20,7 +20,7 @@ const ChordApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/chord.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/chord/canvas.js b/website/src/pages/chord/canvas.js index f07a272374..d398e14040 100644 --- a/website/src/pages/chord/canvas.js +++ b/website/src/pages/chord/canvas.js @@ -96,7 +96,7 @@ const ChordCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/chord-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/chord/index.js b/website/src/pages/chord/index.js index e702f55717..0b94f319a4 100644 --- a/website/src/pages/chord/index.js +++ b/website/src/pages/chord/index.js @@ -98,7 +98,7 @@ const Chord = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/chord.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/choropleth/canvas.js b/website/src/pages/choropleth/canvas.js index 4215577f11..5299de1e06 100644 --- a/website/src/pages/choropleth/canvas.js +++ b/website/src/pages/choropleth/canvas.js @@ -72,7 +72,7 @@ const ChoroplethCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/choropleth-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/choropleth/index.js b/website/src/pages/choropleth/index.js index 1013a772fd..fdd9d9a229 100644 --- a/website/src/pages/choropleth/index.js +++ b/website/src/pages/choropleth/index.js @@ -84,7 +84,7 @@ const Choropleth = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/choropleth.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/circle-packing/api.js b/website/src/pages/circle-packing/api.tsx similarity index 94% rename from website/src/pages/circle-packing/api.js rename to website/src/pages/circle-packing/api.tsx index 2fd03ffa06..4f7dc43be6 100644 --- a/website/src/pages/circle-packing/api.js +++ b/website/src/pages/circle-packing/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateLibTree } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/circle-packing/props' import mapper from '../../data/components/circle-packing/mapper' import meta from '../../data/components/circle-packing/meta.yml' @@ -18,7 +18,7 @@ const CirclePackingApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/circle-packing/canvas.js b/website/src/pages/circle-packing/canvas.js index c9fa7b30ee..4a6be241f0 100644 --- a/website/src/pages/circle-packing/canvas.js +++ b/website/src/pages/circle-packing/canvas.js @@ -68,7 +68,7 @@ const CirclePackingCanvas = () => { absolutePath: { glob: "**/src/assets/captures/circle-packing-canvas.png" } ) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/circle-packing/html.js b/website/src/pages/circle-packing/html.js index 61706cc049..bc832ecc76 100644 --- a/website/src/pages/circle-packing/html.js +++ b/website/src/pages/circle-packing/html.js @@ -52,7 +52,7 @@ const CirclePackingHtml = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/circle-packing/index.js b/website/src/pages/circle-packing/index.js index 374eb64607..ce563adf28 100644 --- a/website/src/pages/circle-packing/index.js +++ b/website/src/pages/circle-packing/index.js @@ -66,7 +66,7 @@ const CirclePacking = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/circle-packing.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/components.js b/website/src/pages/components.js deleted file mode 100644 index b695abbadf..0000000000 --- a/website/src/pages/components.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import Layout from '../components/Layout' -import { Seo } from '../components/Seo' -import ComponentsExplorer from '../components/components/explorer/ComponentsExplorer' - -const Components = props => { - return ( - - - - - ) -} - -export default Components diff --git a/website/src/pages/components.tsx b/website/src/pages/components.tsx new file mode 100644 index 0000000000..75ef227acf --- /dev/null +++ b/website/src/pages/components.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Layout from '../components/Layout' +import { Seo } from '../components/Seo' +import { ComponentsExplorer } from '../components/components/explorer' + +interface ComponentsProps { + location: { + search: string + } + navigate: ( + path: string, + options?: { + replace?: boolean + } + ) => void +} + +const Components = ({ location, navigate }: ComponentsProps) => { + return ( + + + + + ) +} + +export default Components diff --git a/website/src/pages/funnel/index.tsx b/website/src/pages/funnel/index.tsx index 06fff469f5..5dacb9da23 100644 --- a/website/src/pages/funnel/index.tsx +++ b/website/src/pages/funnel/index.tsx @@ -66,7 +66,7 @@ const Funnel = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/funnel.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/geomap/canvas.js b/website/src/pages/geomap/canvas.js index 1ce5616e27..33e1e41b2b 100644 --- a/website/src/pages/geomap/canvas.js +++ b/website/src/pages/geomap/canvas.js @@ -44,7 +44,7 @@ const GeoMapCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/geomap-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/geomap/index.js b/website/src/pages/geomap/index.js index c7cb693867..1f3ff1fe3c 100644 --- a/website/src/pages/geomap/index.js +++ b/website/src/pages/geomap/index.js @@ -41,7 +41,7 @@ const GeoMap = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/geomap.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/guides/theming.tsx b/website/src/pages/guides/theming.tsx index ae116ed42f..8c9b487fa9 100644 --- a/website/src/pages/guides/theming.tsx +++ b/website/src/pages/guides/theming.tsx @@ -13,8 +13,7 @@ import { Seo } from '../../components/Seo' import { ComponentPage } from '../../components/components/ComponentPage' import { ComponentHeader } from '../../components/components/ComponentHeader' import { Markdown } from '../../components/Markdown' -// @ts-ignore -import ComponentSettings from '../../components/components/ComponentSettings' +import { ComponentSettings } from '../../components/components/ComponentSettings' import media from '../../theming/mediaQueries' import { ChartProperty } from '../../types' @@ -282,7 +281,6 @@ const Theming = () => { )} { query { image: file(absolutePath: { glob: "**/src/assets/captures/heatmap.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/heatmap/canvas.js b/website/src/pages/heatmap/canvas.js index 90b220ef32..d5df0bb277 100644 --- a/website/src/pages/heatmap/canvas.js +++ b/website/src/pages/heatmap/canvas.js @@ -104,7 +104,7 @@ const HeatMapCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/heatmap-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/heatmap/index.js b/website/src/pages/heatmap/index.js index 97aecda9e5..ea13a2d537 100644 --- a/website/src/pages/heatmap/index.js +++ b/website/src/pages/heatmap/index.js @@ -114,7 +114,7 @@ const HeatMap = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/heatmap.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/line/api.js b/website/src/pages/line/api.tsx similarity index 92% rename from website/src/pages/line/api.js rename to website/src/pages/line/api.tsx index 5cb60e12ef..a36a7aaa01 100644 --- a/website/src/pages/line/api.js +++ b/website/src/pages/line/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import omit from 'lodash/omit' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/line/props' import mapper from '../../data/components/line/mapper' import defaultSettings from '../../data/components/line/defaults' @@ -20,7 +20,7 @@ const LineApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/line.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/line/canvas.js b/website/src/pages/line/canvas.js index 84ab43e8e1..4476eb8e79 100644 --- a/website/src/pages/line/canvas.js +++ b/website/src/pages/line/canvas.js @@ -124,7 +124,7 @@ const LineCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/line-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/line/index.js b/website/src/pages/line/index.js index 0c733fc17d..46f4e8e959 100644 --- a/website/src/pages/line/index.js +++ b/website/src/pages/line/index.js @@ -70,7 +70,7 @@ const Line = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/line.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/marimekko/index.js b/website/src/pages/marimekko/index.js index b7706bc1b2..96f3c5b28f 100644 --- a/website/src/pages/marimekko/index.js +++ b/website/src/pages/marimekko/index.js @@ -150,7 +150,7 @@ const Marimekko = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/marimekko.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/network/canvas.js b/website/src/pages/network/canvas.js index bf9c144010..8f684e9ccb 100644 --- a/website/src/pages/network/canvas.js +++ b/website/src/pages/network/canvas.js @@ -42,7 +42,7 @@ const NetworkCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/network-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/network/index.js b/website/src/pages/network/index.js index f69ffac784..9bb59d6794 100644 --- a/website/src/pages/network/index.js +++ b/website/src/pages/network/index.js @@ -46,7 +46,7 @@ const Network = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/network.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/parallel-coordinates/canvas.js b/website/src/pages/parallel-coordinates/canvas.js index 986be423b1..6428f35f3d 100644 --- a/website/src/pages/parallel-coordinates/canvas.js +++ b/website/src/pages/parallel-coordinates/canvas.js @@ -44,7 +44,7 @@ const ParallelCoordinatesCanvas = () => { absolutePath: { glob: "**/src/assets/captures/parallel-coordinates-canvas.png" } ) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/parallel-coordinates/index.js b/website/src/pages/parallel-coordinates/index.js index 927fd3d527..dbbe1a6efd 100644 --- a/website/src/pages/parallel-coordinates/index.js +++ b/website/src/pages/parallel-coordinates/index.js @@ -40,7 +40,7 @@ const ParallelCoordinates = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/parallel-coordinates.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/pie/api.js b/website/src/pages/pie/api.tsx similarity index 95% rename from website/src/pages/pie/api.js rename to website/src/pages/pie/api.tsx index 8935c1f816..9bf06c2695 100644 --- a/website/src/pages/pie/api.js +++ b/website/src/pages/pie/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateProgrammingLanguageStats } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/pie/props' import mapper from '../../data/components/pie/mapper' import meta from '../../data/components/pie/meta.yml' @@ -25,7 +25,7 @@ const PieApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/pie.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/pie/canvas.js b/website/src/pages/pie/canvas.js index 3555d28f47..3ac3ca0242 100644 --- a/website/src/pages/pie/canvas.js +++ b/website/src/pages/pie/canvas.js @@ -98,7 +98,7 @@ const PieCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/pie-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js index cb6e8ad758..a6b612fc8f 100644 --- a/website/src/pages/pie/index.js +++ b/website/src/pages/pie/index.js @@ -110,7 +110,7 @@ const Pie = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/pie.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/radar/api.js b/website/src/pages/radar/api.tsx similarity index 94% rename from website/src/pages/radar/api.js rename to website/src/pages/radar/api.tsx index 2cec194fd9..6c04954916 100644 --- a/website/src/pages/radar/api.js +++ b/website/src/pages/radar/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateWinesTastes } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/radar/props' import mapper from '../../data/components/radar/mapper' import meta from '../../data/components/radar/meta.yml' @@ -18,7 +18,7 @@ const RadarApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/radar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/radar/index.tsx b/website/src/pages/radar/index.tsx index 79521daafc..c592cf46a7 100644 --- a/website/src/pages/radar/index.tsx +++ b/website/src/pages/radar/index.tsx @@ -89,7 +89,7 @@ const Radar = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/radar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/radial-bar/index.tsx b/website/src/pages/radial-bar/index.tsx index dbf9b03940..d9c4bd44cf 100644 --- a/website/src/pages/radial-bar/index.tsx +++ b/website/src/pages/radial-bar/index.tsx @@ -142,7 +142,7 @@ const RadialBar = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/radial-bar.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/sankey/api.js b/website/src/pages/sankey/api.tsx similarity index 95% rename from website/src/pages/sankey/api.js rename to website/src/pages/sankey/api.tsx index fbb3eda200..51ad6a5296 100644 --- a/website/src/pages/sankey/api.js +++ b/website/src/pages/sankey/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateSankeyData } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/sankey/props' import mapper from '../../data/components/sankey/mapper' import meta from '../../data/components/sankey/meta.yml' @@ -18,7 +18,7 @@ const SankeyApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/sankey.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/sankey/index.tsx b/website/src/pages/sankey/index.tsx index 3e0df32382..e7e8e4c6a5 100644 --- a/website/src/pages/sankey/index.tsx +++ b/website/src/pages/sankey/index.tsx @@ -108,7 +108,7 @@ const Sankey = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/sankey.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/scatterplot/canvas.js b/website/src/pages/scatterplot/canvas.js index 0124b55d1d..6165cd9a83 100644 --- a/website/src/pages/scatterplot/canvas.js +++ b/website/src/pages/scatterplot/canvas.js @@ -120,7 +120,7 @@ const ScatterPlotCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/scatterplot-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js index fa0262c937..138c3470c3 100644 --- a/website/src/pages/scatterplot/index.js +++ b/website/src/pages/scatterplot/index.js @@ -120,7 +120,7 @@ const ScatterPlot = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/scatterplot.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/stream/index.js b/website/src/pages/stream/index.js index 4cafdfc006..f37e39e90b 100644 --- a/website/src/pages/stream/index.js +++ b/website/src/pages/stream/index.js @@ -44,7 +44,7 @@ const Stream = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/stream.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/sunburst/api.js b/website/src/pages/sunburst/api.tsx similarity index 94% rename from website/src/pages/sunburst/api.js rename to website/src/pages/sunburst/api.tsx index 1746b6556c..7a31b8090f 100644 --- a/website/src/pages/sunburst/api.js +++ b/website/src/pages/sunburst/api.tsx @@ -1,7 +1,7 @@ import React from 'react' import { generateLibTree } from '@nivo/generators' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/sunburst/props' import mapper from '../../data/components/sunburst/mapper' import meta from '../../data/components/sunburst/meta.yml' @@ -18,7 +18,7 @@ const SunburstApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/sunburst/index.js b/website/src/pages/sunburst/index.js index 3614f8fa45..ec61e19e11 100644 --- a/website/src/pages/sunburst/index.js +++ b/website/src/pages/sunburst/index.js @@ -62,7 +62,7 @@ const Sunburst = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/sunburst.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/swarmplot/canvas.js b/website/src/pages/swarmplot/canvas.js index 3ba4cc9304..004674b2d3 100644 --- a/website/src/pages/swarmplot/canvas.js +++ b/website/src/pages/swarmplot/canvas.js @@ -102,7 +102,7 @@ const SwarmPlotCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/swarmplot-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/swarmplot/index.js b/website/src/pages/swarmplot/index.js index 22eabab9d3..966f1b8026 100644 --- a/website/src/pages/swarmplot/index.js +++ b/website/src/pages/swarmplot/index.js @@ -106,7 +106,7 @@ const SwarmPlot = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/swarmplot.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/treemap/api.js b/website/src/pages/treemap/api.tsx similarity index 95% rename from website/src/pages/treemap/api.js rename to website/src/pages/treemap/api.tsx index 2783564358..ab757ecf31 100644 --- a/website/src/pages/treemap/api.js +++ b/website/src/pages/treemap/api.tsx @@ -1,7 +1,8 @@ import React from 'react' +// @ts-ignore import { TreeMapDefaultProps } from '@nivo/treemap' import { Seo } from '../../components/Seo' -import ApiClient from '../../components/components/api-client/ApiClient' +import { ApiClient } from '../../components/components/api-client/ApiClient' import { groups } from '../../data/components/treemap/props' import mapper from '../../data/components/treemap/mapper' import { generateLightDataSet } from '../../data/components/treemap/generator' @@ -19,7 +20,7 @@ const TreeMapApi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/treemap.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/treemap/canvas.js b/website/src/pages/treemap/canvas.js index cce72be576..56cfdc1eac 100644 --- a/website/src/pages/treemap/canvas.js +++ b/website/src/pages/treemap/canvas.js @@ -1,5 +1,4 @@ import React from 'react' -import omit from 'lodash/omit' import { ResponsiveTreeMapCanvas, TreeMapCanvasDefaultProps, @@ -64,7 +63,7 @@ const TreeMapCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/treemap-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/treemap/html.js b/website/src/pages/treemap/html.js index 6375a520f8..18a8ac3321 100644 --- a/website/src/pages/treemap/html.js +++ b/website/src/pages/treemap/html.js @@ -65,7 +65,7 @@ const TreeMapHtml = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/treemap-html.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/treemap/index.js b/website/src/pages/treemap/index.js index 4820e1215b..eacafd7db5 100644 --- a/website/src/pages/treemap/index.js +++ b/website/src/pages/treemap/index.js @@ -67,7 +67,7 @@ const TreeMap = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/treemap.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/voronoi/index.js b/website/src/pages/voronoi/index.js index a9676f8392..c5ae9c5e7b 100644 --- a/website/src/pages/voronoi/index.js +++ b/website/src/pages/voronoi/index.js @@ -47,7 +47,7 @@ const Voronoi = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/voronoi.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/waffle/canvas.js b/website/src/pages/waffle/canvas.js index cc154aea5c..9e6ea7691a 100644 --- a/website/src/pages/waffle/canvas.js +++ b/website/src/pages/waffle/canvas.js @@ -121,7 +121,7 @@ const WaffleCanvas = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/waffle-canvas.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/waffle/html.js b/website/src/pages/waffle/html.js index 4ab558c9da..f3782ad20a 100644 --- a/website/src/pages/waffle/html.js +++ b/website/src/pages/waffle/html.js @@ -70,7 +70,7 @@ const WaffleHtml = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/waffle-html.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/pages/waffle/index.js b/website/src/pages/waffle/index.js index 4030f9a907..4b62fcf171 100644 --- a/website/src/pages/waffle/index.js +++ b/website/src/pages/waffle/index.js @@ -99,7 +99,7 @@ const Waffle = () => { query { image: file(absolutePath: { glob: "**/src/assets/captures/waffle.png" }) { childImageSharp { - gatsbyImageData(layout: FIXED, width: 900, quality: 100) + gatsbyImageData(layout: FIXED, width: 700, quality: 100) } } } diff --git a/website/src/types.ts b/website/src/types.ts index 76c1aebba0..8d5f5a4f75 100644 --- a/website/src/types.ts +++ b/website/src/types.ts @@ -11,17 +11,7 @@ export interface ChartMeta { }[] } -export interface ArrayPropertyControlAttrs { - props: ChartProperty[] - shouldCreate: boolean - addLabel: string - shouldRemove: boolean - removeLabel: string - defaults: object - getItemTitle: (index: number, item: unknown) => string -} - -export interface ChartProperty { +export interface ChartProperty { key: string name?: string group: string @@ -43,5 +33,10 @@ export interface ChartProperty { // for the demo and not part of the component props. excludeFromDoc?: boolean control?: ControlConfig - when?: (settings: any) => boolean + when?: (settings: Settings) => boolean +} + +export interface ChartPropertiesGroup { + name: string + properties: ChartProperty[] } diff --git a/yarn.lock b/yarn.lock index 128bbcfe0e..6b1c7cd428 100644 --- a/yarn.lock +++ b/yarn.lock @@ -118,7 +118,7 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.15.4", "@babel/helper-annotate-as-pure@^7.16.0": +"@babel/helper-annotate-as-pure@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d" integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg== @@ -236,7 +236,7 @@ dependencies: "@babel/types" "^7.16.0" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.15.4", "@babel/helper-module-imports@^7.16.0": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3" integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg== @@ -7283,7 +7283,7 @@ babel-plugin-remove-graphql-queries@^4.4.0: "@babel/runtime" "^7.15.4" gatsby-core-utils "^3.4.0" -"babel-plugin-styled-components@>= 1.12.0": +"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54" integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw== @@ -7293,16 +7293,6 @@ babel-plugin-remove-graphql-queries@^4.4.0: babel-plugin-syntax-jsx "^6.18.0" lodash "^4.17.11" -babel-plugin-styled-components@^1.13.2: - version "1.13.3" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc" - integrity sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw== - dependencies: - "@babel/helper-annotate-as-pure" "^7.15.4" - "@babel/helper-module-imports" "^7.15.4" - babel-plugin-syntax-jsx "^6.18.0" - lodash "^4.17.11" - babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -24375,11 +24365,6 @@ url-parse-lax@^3.0.0: dependencies: prepend-http "^2.0.0" -url-search-params@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/url-search-params/-/url-search-params-1.1.0.tgz#865669a6e4e9e5543f86fc972b27c91485375326" - integrity sha512-XiO5GLAxmlZgdLob/RmKZRc2INHrssMbpwD6O46JkB1aEJO4fkV3x3mR6+CDX01ijfEUwvfwCiUQZrKqfm1ILw== - url-to-options@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"