diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..4538cd1b7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +printWidth: 100 +tabWidth: 4 +bracketSpacing: true +semi: false +trailingComma: es5 +singleQuote: true +arrowParens: avoid \ No newline at end of file diff --git a/Makefile b/Makefile index 0bcc6c235..3a34de6df 100644 --- a/Makefile +++ b/Makefile @@ -51,6 +51,24 @@ init: ##@init cleanup/install/bootstrap @make packages-build @cd website && yarn install +######################################################################################################################## +# +# GLOBAL +# +######################################################################################################################## + +fmt: ##@global format code using prettier (js, css, md) + @./node_modules/.bin/prettier --color --write \ + "packages/*/{src,stories,tests}/**/*.js" \ + "packages/*/README.md" \ + "website/src/**/*.{js,css}" \ + "examples/*/src/**/*.{js,css}" \ + "README.md" + +deploy-all: ##@global deploy website & storybook + @make website-deploy + @make storybook-deploy + ######################################################################################################################## # # CLEANUP @@ -134,8 +152,3 @@ storybook-deploy: ##@storybook build and deploy storybook @echo "${YELLOW}Deploying storybook${RESET}" @./node_modules/.bin/gh-pages -d storybook-static -r git@github.com:plouc/nivo.git -b gh-pages -e storybook - - -deploy-all: ##@deploy deploy website & storybook - @make website-deploy - @make storybook-deploy diff --git a/README.md b/README.md index 3b6d2c869..9c83facfc 100644 --- a/README.md +++ b/README.md @@ -23,18 +23,18 @@ yarn add @nivo/core @nivo/bar ... ## Features -- Highly customizable -- Motion/transitions, powered by [react-motion](https://github.com/chenglou/react-motion) -- [Component playground](http://nivo.rocks) -- [Exhaustive documentation](http://nivo.rocks) -- Isomorphic rendering -- [SVG charts](http://nivo.rocks/#/components?filter=svg) -- [HTML charts](http://nivo.rocks/#/components?filter=html) -- [Canvas charts](http://nivo.rocks/#/components?filter=canvas) -- [server side rendering API](https://github.com/plouc/nivo-api) -- [SVG patterns](http://nivo.rocks/#/guides/patterns) -- [Gradients](http://nivo.rocks/#/guides/gradients) -- [responsive charts](http://nivo.rocks/#/components?q=responsive) +* Highly customizable +* Motion/transitions, powered by [react-motion](https://github.com/chenglou/react-motion) +* [Component playground](http://nivo.rocks) +* [Exhaustive documentation](http://nivo.rocks) +* Isomorphic rendering +* [SVG charts](http://nivo.rocks/#/components?filter=svg) +* [HTML charts](http://nivo.rocks/#/components?filter=html) +* [Canvas charts](http://nivo.rocks/#/components?filter=canvas) +* [server side rendering API](https://github.com/plouc/nivo-api) +* [SVG patterns](http://nivo.rocks/#/guides/patterns) +* [Gradients](http://nivo.rocks/#/guides/gradients) +* [responsive charts](http://nivo.rocks/#/components?q=responsive) ## Discussion @@ -42,92 +42,92 @@ Join the [nivo discord community](https://discord.gg/n7Ft74f). ## Components -- Bar `@nivo/bar` - - [``](http://nivo.rocks/#/bar) - - [``](http://nivo.rocks/#/bar) - - [``](http://nivo.rocks/#/bar/canvas) - - [``](http://nivo.rocks/#/bar/canvas) -- Bubble `@nivo/circle-packing` - - [``](http://nivo.rocks/#/bubble) - - [``](http://nivo.rocks/#/bubble) - - [``](http://nivo.rocks/#/bubble/html) - - [``](http://nivo.rocks/#/bubble/html) - - [``](http://nivo.rocks/#/bubble/canvas) - - [``](http://nivo.rocks/#/bubble/canvas) -- Calendar `@nivo/calendar` - - [``](http://nivo.rocks/#/calendar) - - [``](http://nivo.rocks/#/calendar) -- Chord `@nivo/chord` - - [``](http://nivo.rocks/#/chord) - - [``](http://nivo.rocks/#/chord) - - [``](http://nivo.rocks/#/chord/canvas) - - [``](http://nivo.rocks/#/chord/canvas) -- HeatMap `@nivo/heatmap` - - [``](http://nivo.rocks/#/heatmap) - - [``](http://nivo.rocks/#/heatmap) - - [``](http://nivo.rocks/#/heatmap/canvas) - - [``](http://nivo.rocks/#/heatmap/canvas) -- Line `@nivo/line` - - [``](http://nivo.rocks/#/line) - - [``](http://nivo.rocks/#/line) -- Pie `@nivo/pie` - - [``](http://nivo.rocks/#/pie) - - [``](http://nivo.rocks/#/pie) -- Radar `@nivo/radar` - - [``](http://nivo.rocks/#/radar) - - [``](http://nivo.rocks/#/radar) -- Sankey `@nivo/sankey` - - [``](http://nivo.rocks/#/sankey) - - [``](http://nivo.rocks/#/sankey) -- Stream `@nivo/stream` - - [``](http://nivo.rocks/#/stream) - - [``](http://nivo.rocks/#/stream) -- Sunburst `@nivo/sunburst` - - [``](http://nivo.rocks/#/sunburst) - - [``](http://nivo.rocks/#/sunburst) -- TreeMap `@nivo/treemap` - - [``](http://nivo.rocks/#/treemap) - - [``](http://nivo.rocks/#/treemap) - - [``](http://nivo.rocks/#/treemap/html) - - [``](http://nivo.rocks/#/treemap/html) - - [``](http://nivo.rocks/#/treemap/canvas) - - [``](http://nivo.rocks/#/treemap/canvas) -- Voronoi `@nivo/voronoi` - - [``](http://nivo.rocks/#/voronoi) - - [``](http://nivo.rocks/#/voronoi) +* Bar `@nivo/bar` + * [``](http://nivo.rocks/#/bar) + * [``](http://nivo.rocks/#/bar) + * [``](http://nivo.rocks/#/bar/canvas) + * [``](http://nivo.rocks/#/bar/canvas) +* Bubble `@nivo/circle-packing` + * [``](http://nivo.rocks/#/bubble) + * [``](http://nivo.rocks/#/bubble) + * [``](http://nivo.rocks/#/bubble/html) + * [``](http://nivo.rocks/#/bubble/html) + * [``](http://nivo.rocks/#/bubble/canvas) + * [``](http://nivo.rocks/#/bubble/canvas) +* Calendar `@nivo/calendar` + * [``](http://nivo.rocks/#/calendar) + * [``](http://nivo.rocks/#/calendar) +* Chord `@nivo/chord` + * [``](http://nivo.rocks/#/chord) + * [``](http://nivo.rocks/#/chord) + * [``](http://nivo.rocks/#/chord/canvas) + * [``](http://nivo.rocks/#/chord/canvas) +* HeatMap `@nivo/heatmap` + * [``](http://nivo.rocks/#/heatmap) + * [``](http://nivo.rocks/#/heatmap) + * [``](http://nivo.rocks/#/heatmap/canvas) + * [``](http://nivo.rocks/#/heatmap/canvas) +* Line `@nivo/line` + * [``](http://nivo.rocks/#/line) + * [``](http://nivo.rocks/#/line) +* Pie `@nivo/pie` + * [``](http://nivo.rocks/#/pie) + * [``](http://nivo.rocks/#/pie) +* Radar `@nivo/radar` + * [``](http://nivo.rocks/#/radar) + * [``](http://nivo.rocks/#/radar) +* Sankey `@nivo/sankey` + * [``](http://nivo.rocks/#/sankey) + * [``](http://nivo.rocks/#/sankey) +* Stream `@nivo/stream` + * [``](http://nivo.rocks/#/stream) + * [``](http://nivo.rocks/#/stream) +* Sunburst `@nivo/sunburst` + * [``](http://nivo.rocks/#/sunburst) + * [``](http://nivo.rocks/#/sunburst) +* TreeMap `@nivo/treemap` + * [``](http://nivo.rocks/#/treemap) + * [``](http://nivo.rocks/#/treemap) + * [``](http://nivo.rocks/#/treemap/html) + * [``](http://nivo.rocks/#/treemap/html) + * [``](http://nivo.rocks/#/treemap/canvas) + * [``](http://nivo.rocks/#/treemap/canvas) +* Voronoi `@nivo/voronoi` + * [``](http://nivo.rocks/#/voronoi) + * [``](http://nivo.rocks/#/voronoi) ## [HTTP API](https://github.com/plouc/nivo-api) -- [``](https://nivo-api.herokuapp.com/samples/bar.svg) -- [``](https://nivo-api.herokuapp.com/samples/bubble.svg) -- [``](https://nivo-api.herokuapp.com/samples/chord.svg) -- [``](https://nivo-api.herokuapp.com/samples/heatmap.svg) -- [``](https://nivo-api.herokuapp.com/samples/line.svg) -- [``](https://nivo-api.herokuapp.com/samples/pie.svg) -- [``](https://nivo-api.herokuapp.com/samples/radar.svg) -- [``](https://nivo-api.herokuapp.com/samples/sankey.svg) -- [``](https://nivo-api.herokuapp.com/samples/sunburst.svg) -- [``](https://nivo-api.herokuapp.com/samples/treemap.svg) +* [``](https://nivo-api.herokuapp.com/samples/bar.svg) +* [``](https://nivo-api.herokuapp.com/samples/bubble.svg) +* [``](https://nivo-api.herokuapp.com/samples/chord.svg) +* [``](https://nivo-api.herokuapp.com/samples/heatmap.svg) +* [``](https://nivo-api.herokuapp.com/samples/line.svg) +* [``](https://nivo-api.herokuapp.com/samples/pie.svg) +* [``](https://nivo-api.herokuapp.com/samples/radar.svg) +* [``](https://nivo-api.herokuapp.com/samples/sankey.svg) +* [``](https://nivo-api.herokuapp.com/samples/sunburst.svg) +* [``](https://nivo-api.herokuapp.com/samples/treemap.svg) ## Guides - -- [colors](http://nivo.rocks/#/guides/colors) -- [gradients](http://nivo.rocks/#/guides/gradients) -- [patterns](http://nivo.rocks/#/guides/patterns) + +* [colors](http://nivo.rocks/#/guides/colors) +* [gradients](http://nivo.rocks/#/guides/gradients) +* [patterns](http://nivo.rocks/#/guides/patterns) ## Repositories -- [nivo](https://github.com/plouc/nivo) - the nivo library -- [nivo-api](https://github.com/plouc/nivo-api) - the nivo http api -- [nivo-api-docker](https://github.com/plouc/nivo-api-docker) - a Docker image for the nivo http api -- [nivo-generators](https://github.com/plouc/nivo-generators) - the data generators used for nivo-website and http API samples +* [nivo](https://github.com/plouc/nivo) - the nivo library +* [nivo-api](https://github.com/plouc/nivo-api) - the nivo http api +* [nivo-api-docker](https://github.com/plouc/nivo-api-docker) - a Docker image for the nivo http api +* [nivo-generators](https://github.com/plouc/nivo-generators) - the data generators used for nivo-website and http API samples ## Credits -- [d3](https://d3js.org/) -- [react](https://facebook.github.io/react/) -- [react-motion](https://github.com/chenglou/react-motion) -- … +* [d3](https://d3js.org/) +* [react](https://facebook.github.io/react/) +* [react-motion](https://github.com/chenglou/react-motion) +* … [license-image]: https://img.shields.io/github/license/plouc/nivo.svg?style=flat-square [license-url]: https://github.com/plouc/nivo/blob/master/LICENSE.md diff --git a/examples/retro/src/App.css b/examples/retro/src/App.css index 3cc35e223..6d04b7308 100644 --- a/examples/retro/src/App.css +++ b/examples/retro/src/App.css @@ -1,87 +1,87 @@ .Background { - position: fixed; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; - z-index: 10; - opacity: 1; + position: fixed; + top: -5px; + right: -5px; + bottom: -5px; + left: -5px; + z-index: 10; + opacity: 1; } .App { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 100%; - width: 100%; - z-index: 100; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - grid-column-gap: 30px; - grid-row-gap: 20px; - padding: 30px; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 100; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid-column-gap: 30px; + grid-row-gap: 20px; + padding: 30px; } .App > div { - overflow: hidden; - display: flex; + overflow: hidden; + display: flex; } .Title { - border: 3px solid #000; - width: 52px; - background: #f2e7c8; - writing-mode: vertical-rl; - display: flex; - align-items: center; - text-orientation: sideways; - padding: 20px 0; - font-family: 'Montserrat', sans-serif; - font-weight: 600; + border: 3px solid #000; + width: 52px; + background: #f2e7c8; + writing-mode: vertical-rl; + display: flex; + align-items: center; + text-orientation: sideways; + padding: 20px 0; + font-family: 'Montserrat', sans-serif; + font-weight: 600; } .Info { - display: flex; - flex-direction: column; - justify-content: space-between; + display: flex; + flex-direction: column; + justify-content: space-between; } .Brand { - margin: 0; - padding: 0; - font-family: 'Montserrat', sans-serif; - font-size: 96px; - font-weight: 900; - color: #000; - line-height: 70px; + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + font-size: 96px; + font-weight: 900; + color: #000; + line-height: 70px; } .Links { - width: 100%; - display: flex; - border: 3px solid #000; - background: #f2e7c8; - font-family: 'Montserrat', sans-serif; - font-weight: 600; - font-size: 14px; + width: 100%; + display: flex; + border: 3px solid #000; + background: #f2e7c8; + font-family: 'Montserrat', sans-serif; + font-weight: 600; + font-size: 14px; } .Links a { - flex: 1; - border-left: 1px solid #000; - text-align: center; - padding: 12px 0; - cursor: pointer; + flex: 1; + border-left: 1px solid #000; + text-align: center; + padding: 12px 0; + cursor: pointer; } .Links a:first-child { - border-left: none; + border-left: none; } .Links a:hover { - background: #000; - color: #f2e7c8; -} \ No newline at end of file + background: #000; + color: #f2e7c8; +} diff --git a/examples/retro/src/components/App.js b/examples/retro/src/components/App.js index 98e4f7a45..e5b48169c 100644 --- a/examples/retro/src/components/App.js +++ b/examples/retro/src/components/App.js @@ -12,17 +12,17 @@ import Info from './Info' const App = () => (
- +
- - -
- - - - - - + + +
+ + + + + +
) diff --git a/examples/retro/src/components/Background.js b/examples/retro/src/components/Background.js index c072fd7f1..b3413f900 100644 --- a/examples/retro/src/components/Background.js +++ b/examples/retro/src/components/Background.js @@ -5,22 +5,16 @@ import { generateCountriesData } from 'nivo-generators' const Background = () => (
+ data={generateCountriesData(['rock', 'jazz', 'hip-hop', 'reggae', 'folk'], { size: 7 })} + keys={['rock', 'jazz', 'hip-hop', 'reggae', 'folk']} + colors={['#dcd6c6', '#f4e3b5', '#dea499', '#e1cc8d', '#776537']} + enableGridX={false} + enableGridY={false} + axisBottom={null} + borderColor="#000000" + offsetType="expand" + borderWidth={10} + />
) diff --git a/examples/retro/src/components/Info.js b/examples/retro/src/components/Info.js index 8ec8d40d9..a560ec8e5 100644 --- a/examples/retro/src/components/Info.js +++ b/examples/retro/src/components/Info.js @@ -7,9 +7,7 @@ const Info = () => ( twitter website
-

- nivo -

+

nivo

) diff --git a/examples/retro/src/components/charts/Bar.js b/examples/retro/src/components/charts/Bar.js index ccc8e67f9..609fd6bf9 100644 --- a/examples/retro/src/components/charts/Bar.js +++ b/examples/retro/src/components/charts/Bar.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' import { ResponsiveBar } from '@nivo/bar' import { generateCountriesData } from 'nivo-generators' import { colors } from '../../constants' @@ -28,9 +28,7 @@ const Bar = () => ( isInteractive={false} animate={false} /> -
- BAR -
+
BAR
) diff --git a/examples/retro/src/components/charts/Bubble.js b/examples/retro/src/components/charts/Bubble.js index 931ee9e8c..9ddc471f5 100644 --- a/examples/retro/src/components/charts/Bubble.js +++ b/examples/retro/src/components/charts/Bubble.js @@ -8,7 +8,7 @@ const Bubble = () => ( ( padding={6} isInteractive={false} /> -
- BUBBLE -
+
BUBBLE
) diff --git a/examples/retro/src/components/charts/Chord.js b/examples/retro/src/components/charts/Chord.js index acd62d514..c8f60f0b5 100644 --- a/examples/retro/src/components/charts/Chord.js +++ b/examples/retro/src/components/charts/Chord.js @@ -22,9 +22,7 @@ const Chord = () => ( isInteractive={false} animate={false} /> -
- CHORD -
+
CHORD
) diff --git a/examples/retro/src/components/charts/HeatMap.js b/examples/retro/src/components/charts/HeatMap.js index f9e88a0c4..e939cd4bf 100644 --- a/examples/retro/src/components/charts/HeatMap.js +++ b/examples/retro/src/components/charts/HeatMap.js @@ -12,7 +12,10 @@ const HeatMap = () => ( bottom: 1, left: 1, }} - data={generateCountriesData(['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk'], { size: 7 })} + data={generateCountriesData( + ['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk'], + { size: 7 } + )} padding={6} colors={colors} indexBy="country" @@ -28,11 +31,8 @@ const HeatMap = () => ( animate={false} cellHoverOthersOpacity={0} /> -
- HEATMAP -
+
HEATMAP
) export default HeatMap - diff --git a/examples/retro/src/components/charts/Pie.js b/examples/retro/src/components/charts/Pie.js index 6e2391b4e..9216431af 100644 --- a/examples/retro/src/components/charts/Pie.js +++ b/examples/retro/src/components/charts/Pie.js @@ -4,14 +4,14 @@ import { generateProgrammingLanguageStats } from 'nivo-generators' import { colors } from '../../constants' const Pie = () => ( -
- + ({ id: d.label, ...d, @@ -20,15 +20,13 @@ const Pie = () => ( innerRadius={0.4} enableRadialLabels={false} borderWidth={3} - borderColor="#000" - slicesLabelsSkipAngle={10} - animate={false} - isInteractive={false} - /> -
- PIE -
-
+ borderColor="#000" + slicesLabelsSkipAngle={10} + animate={false} + isInteractive={false} + /> +
PIE
+ ) export default Pie diff --git a/examples/retro/src/components/charts/Stream.js b/examples/retro/src/components/charts/Stream.js index 89a28d4d0..375deef95 100644 --- a/examples/retro/src/components/charts/Stream.js +++ b/examples/retro/src/components/charts/Stream.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' import { ResponsiveStream, patternDotsDef } from '@nivo/stream' import { generateCountriesData } from 'nivo-generators' import { colors } from '../../constants' @@ -12,7 +12,10 @@ const Stream = () => ( bottom: 1.5, left: 1.5, }} - data={generateCountriesData(['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk'], { size: 7 })} + data={generateCountriesData( + ['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk'], + { size: 7 } + )} keys={['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk']} offsetType="none" colors={colors} @@ -23,13 +26,9 @@ const Stream = () => ( animate={false} borderWidth={3} borderColor="#000000" - defs={[ - patternDotsDef('pattern') - ]} + defs={[patternDotsDef('pattern')]} /> -
- STREAM -
+
STREAM
) diff --git a/examples/retro/src/components/charts/TreeMap.js b/examples/retro/src/components/charts/TreeMap.js index f0533776d..fc942b71c 100644 --- a/examples/retro/src/components/charts/TreeMap.js +++ b/examples/retro/src/components/charts/TreeMap.js @@ -14,7 +14,7 @@ const TreeMap = () => ( }} root={{ country: 'root', - children: generateCountriesData(['value'], { size: 24 }) + children: generateCountriesData(['value'], { size: 24 }), }} identity="country" value="value" @@ -28,9 +28,7 @@ const TreeMap = () => ( isInteractive={false} animate={false} /> -
- TREEMAP -
+
TREEMAP
) diff --git a/examples/retro/src/constants.js b/examples/retro/src/constants.js index df20b8996..ed26183aa 100644 --- a/examples/retro/src/constants.js +++ b/examples/retro/src/constants.js @@ -1,9 +1 @@ -export const colors = [ - '#fae04d', - '#ff744c', - '#789792', - '#b1646a', - '#efa9a1', - '#8470c7', - '#97a66f', -] \ No newline at end of file +export const colors = ['#fae04d', '#ff744c', '#789792', '#b1646a', '#efa9a1', '#8470c7', '#97a66f'] diff --git a/examples/retro/src/index.css b/examples/retro/src/index.css index 8d05187a7..037d83b68 100644 --- a/examples/retro/src/index.css +++ b/examples/retro/src/index.css @@ -1,22 +1,24 @@ -html, body { - margin: 0; - padding: 0; - font-family: sans-serif; - background: #f4e3b5; +html, +body { + margin: 0; + padding: 0; + font-family: sans-serif; + background: #f4e3b5; } -html, body { - height: 100%; - width: 100%; +html, +body { + height: 100%; + width: 100%; } * { - box-sizing: border-box; + box-sizing: border-box; } svg text { - font-family: 'Montserrat', sans-serif; - font-size: 9px; - font-weight: 700; - letter-spacing: 0.1em; -} \ No newline at end of file + font-family: 'Montserrat', sans-serif; + font-size: 9px; + font-weight: 700; + letter-spacing: 0.1em; +} diff --git a/examples/retro/src/index.js b/examples/retro/src/index.js index 4da5f31bd..6e6600f06 100644 --- a/examples/retro/src/index.js +++ b/examples/retro/src/index.js @@ -1,8 +1,8 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './components/App'; -import registerServiceWorker from './registerServiceWorker'; +import React from 'react' +import ReactDOM from 'react-dom' +import './index.css' +import App from './components/App' +import registerServiceWorker from './registerServiceWorker' -ReactDOM.render(, document.getElementById('root')); -registerServiceWorker(); +ReactDOM.render(, document.getElementById('root')) +registerServiceWorker() diff --git a/examples/retro/src/registerServiceWorker.js b/examples/retro/src/registerServiceWorker.js index 4a3ccf021..6c3e73bf5 100644 --- a/examples/retro/src/registerServiceWorker.js +++ b/examples/retro/src/registerServiceWorker.js @@ -9,100 +9,96 @@ // This link also includes instructions on opting out of this behavior. const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) +) export default function register() { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 - return; - } + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location) + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return + } - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` - if (!isLocalhost) { - // Is not local host. Just register service worker - registerValidSW(swUrl); - } else { - // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); - } - }); - } + if (!isLocalhost) { + // Is not local host. Just register service worker + registerValidSW(swUrl) + } else { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl) + } + }) + } } function registerValidSW(swUrl) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.') + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.') + } + } + } } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); + }) + .catch(error => { + console.error('Error during service worker registration:', error) + }) } function checkValidServiceWorker(swUrl) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload() + }) + }) + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl) + } + }) + .catch(() => { + console.log('No internet connection found. App is running in offline mode.') + }) } export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister() + }) + } } diff --git a/packages/nivo-bar/README.md b/packages/nivo-bar/README.md index 27dcbb14c..eea5dc62f 100644 --- a/packages/nivo-bar/README.md +++ b/packages/nivo-bar/README.md @@ -1 +1 @@ -# `@nivo/bar` \ No newline at end of file +# `@nivo/bar` diff --git a/packages/nivo-bar/stories/bar.stories.js b/packages/nivo-bar/stories/bar.stories.js index b0b3f9e94..83e26a67d 100644 --- a/packages/nivo-bar/stories/bar.stories.js +++ b/packages/nivo-bar/stories/bar.stories.js @@ -22,45 +22,53 @@ const commonProps = { const stories = storiesOf('Bar', module) -stories.add('stacked', withInfo()(() => - -)) +stories.add('stacked', withInfo()(() => )) -stories.add('stacked horizontal', withInfo()(() => ( - -))) +stories.add( + 'stacked horizontal', + withInfo()(() => ( + + )) +) stories.add('grouped', withInfo()(() => )) -stories.add('grouped horizontal', withInfo()(() => ( - -))) - -stories.add('with marker', withInfo()(() => ( - -))) - -stories.add('using custom colorBy', withInfo()(() => ( - data[`${id}Color`]} /> -))) +stories.add( + 'grouped horizontal', + withInfo()(() => ( + + )) +) + +stories.add( + 'with marker', + withInfo()(() => ( + + )) +) + +stories.add( + 'using custom colorBy', + withInfo()(() => data[`${id}Color`]} />) +) const divergingData = range(9).map(i => { let gain = random(0, 100) @@ -128,52 +136,65 @@ const divergingCommonProps = { ], } -stories.add('diverging stacked', withInfo()(() => ( - 100$', 'lost <= 100$', 'lost > 100$']} - padding={0.4} - colors={['#97e3d5', '#61cdbb', '#f47560', '#e25c3b']} - labelFormat={v => `${v}%`} - /> -))) - -stories.add('diverging grouped', withInfo()(() => ( - 100$', 'gained <= 100$', 'lost <= 100$', 'lost > 100$']} - groupMode="grouped" - padding={0.1} - colors={['#61cdbb', '#97e3d5', '#f47560', '#e25c3b']} - innerPadding={1} - /> -))) +stories.add( + 'diverging stacked', + withInfo()(() => ( + 100$', 'lost <= 100$', 'lost > 100$']} + padding={0.4} + colors={['#97e3d5', '#61cdbb', '#f47560', '#e25c3b']} + labelFormat={v => `${v}%`} + /> + )) +) + +stories.add( + 'diverging grouped', + withInfo()(() => ( + 100$', 'gained <= 100$', 'lost <= 100$', 'lost > 100$']} + groupMode="grouped" + padding={0.1} + colors={['#61cdbb', '#97e3d5', '#f47560', '#e25c3b']} + innerPadding={1} + /> + )) +) const CustomBarComponent = ({ x, y, width, height, color }) => ( ) -stories.add('custom bar item', withInfo()(() => ( - -))) - -stories.add('with formatted values', withInfo()(() => ( - - Number(value).toLocaleString('ru-RU', { +stories.add( + 'custom bar item', + withInfo()(() => ( + + )) +) + +stories.add( + 'with formatted values', + withInfo()(() => ( + + Number(value).toLocaleString('ru-RU', { + minimumFractionDigits: 2, + }), + }} + tooltipFormat={value => + `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - }), - }} - tooltipFormat={value => - `${Number(value).toLocaleString('ru-RU', { - minimumFractionDigits: 2, - })} ₽`} - /> -))) + })} ₽` + } + /> + )) +) diff --git a/packages/nivo-calendar/README.md b/packages/nivo-calendar/README.md index 334d01f57..5ba4a9149 100644 --- a/packages/nivo-calendar/README.md +++ b/packages/nivo-calendar/README.md @@ -1 +1 @@ -# `@nivo/calendar` \ No newline at end of file +# `@nivo/calendar` diff --git a/packages/nivo-chord/README.md b/packages/nivo-chord/README.md index c720540ac..73cfd1370 100644 --- a/packages/nivo-chord/README.md +++ b/packages/nivo-chord/README.md @@ -1 +1 @@ -# `@nivo/chord` \ No newline at end of file +# `@nivo/chord` diff --git a/packages/nivo-chord/src/ChordLabels.js b/packages/nivo-chord/src/ChordLabels.js index 1892b00ba..9deb40e80 100644 --- a/packages/nivo-chord/src/ChordLabels.js +++ b/packages/nivo-chord/src/ChordLabels.js @@ -76,7 +76,9 @@ const ChordLabels = ({ return ( ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-circle-packing/README.md b/packages/nivo-circle-packing/README.md index 83cb36476..54682ebe4 100644 --- a/packages/nivo-circle-packing/README.md +++ b/packages/nivo-circle-packing/README.md @@ -1 +1 @@ -# `@nivo/circle-packing` \ No newline at end of file +# `@nivo/circle-packing` diff --git a/packages/nivo-circle-packing/stories/bubble.stories.js b/packages/nivo-circle-packing/stories/bubble.stories.js index 0e854b753..21d1e1396 100644 --- a/packages/nivo-circle-packing/stories/bubble.stories.js +++ b/packages/nivo-circle-packing/stories/bubble.stories.js @@ -23,6 +23,7 @@ storiesOf('Bubble', module) tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-core/README.md b/packages/nivo-core/README.md index eed686641..d36a215d6 100644 --- a/packages/nivo-core/README.md +++ b/packages/nivo-core/README.md @@ -1 +1 @@ -# `@nivo/core` \ No newline at end of file +# `@nivo/core` diff --git a/packages/nivo-core/src/components/cartesian/index.js b/packages/nivo-core/src/components/cartesian/index.js index ed2a61bc1..9d5cfb554 100644 --- a/packages/nivo-core/src/components/cartesian/index.js +++ b/packages/nivo-core/src/components/cartesian/index.js @@ -6,4 +6,4 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -export * from './markers' \ No newline at end of file +export * from './markers' diff --git a/packages/nivo-core/src/components/cartesian/markers/CartesianMarkersItem.js b/packages/nivo-core/src/components/cartesian/markers/CartesianMarkersItem.js index b0a95e0cf..a6abc2956 100644 --- a/packages/nivo-core/src/components/cartesian/markers/CartesianMarkersItem.js +++ b/packages/nivo-core/src/components/cartesian/markers/CartesianMarkersItem.js @@ -203,7 +203,9 @@ const CartesianMarkersItem = ({ }) legendNode = ( { const dayFormat = timeFormat('%Y-%m-%d') - return shuffle(days).slice(0, size).map(day => { - return { - day: dayFormat(day), - value: Math.round(Math.random() * 400), - } - }) + return shuffle(days) + .slice(0, size) + .map(day => { + return { + day: dayFormat(day), + value: Math.round(Math.random() * 400), + } + }) } exports.generateCountriesData = (keys, { size = 12, min = 0, max = 200, withColors = true } = {}) => diff --git a/packages/nivo-heatmap/README.md b/packages/nivo-heatmap/README.md index 76b4e2439..470d794e8 100644 --- a/packages/nivo-heatmap/README.md +++ b/packages/nivo-heatmap/README.md @@ -1 +1 @@ -# `@nivo/heatmap` \ No newline at end of file +# `@nivo/heatmap` diff --git a/packages/nivo-heatmap/stories/heatmap.stories.js b/packages/nivo-heatmap/stories/heatmap.stories.js index 5dd8c45c4..2dea125bc 100644 --- a/packages/nivo-heatmap/stories/heatmap.stories.js +++ b/packages/nivo-heatmap/stories/heatmap.stories.js @@ -118,6 +118,7 @@ stories.add('with formatted values', () => ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-line/README.md b/packages/nivo-line/README.md index c9ad49d6f..a8ac981e4 100644 --- a/packages/nivo-line/README.md +++ b/packages/nivo-line/README.md @@ -1 +1 @@ -# `@nivo/line` \ No newline at end of file +# `@nivo/line` diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js index 7a1c5b98e..5cc40b536 100644 --- a/packages/nivo-line/src/Line.js +++ b/packages/nivo-line/src/Line.js @@ -17,12 +17,7 @@ import { curveFromProp } from '@nivo/core' import { getInheritedColorGenerator } from '@nivo/core' import { withTheme, withColors, withDimensions, withMotion } from '@nivo/core' import { Container, SvgWrapper } from '@nivo/core' -import { - getScales, - getStackedScales, - generateLines, - generateStackedLines, -} from './compute' +import { getScales, getStackedScales, generateLines, generateStackedLines } from './compute' import { CartesianMarkers } from '@nivo/core' import { Axes, Grid } from '@nivo/core' import LineAreas from './LineAreas' @@ -141,16 +136,16 @@ const Line = ({ {...motionProps} /> {isInteractive && - enableStackTooltip && ( - - )} + enableStackTooltip && ( + + )} {enableDots && ( ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-pie/README.md b/packages/nivo-pie/README.md index 5d5ebf7a4..1604a2a96 100644 --- a/packages/nivo-pie/README.md +++ b/packages/nivo-pie/README.md @@ -1 +1 @@ -# `@nivo/pie` \ No newline at end of file +# `@nivo/pie` diff --git a/packages/nivo-pie/src/Pie.js b/packages/nivo-pie/src/Pie.js index f8a2861f4..5273b8ec5 100644 --- a/packages/nivo-pie/src/Pie.js +++ b/packages/nivo-pie/src/Pie.js @@ -157,7 +157,9 @@ const Pie = ({ return ( {arcsData.map(d => { const handleTooltip = e => diff --git a/packages/nivo-pie/stories/pie.stories.js b/packages/nivo-pie/stories/pie.stories.js index cd72734c4..599d85ce4 100644 --- a/packages/nivo-pie/stories/pie.stories.js +++ b/packages/nivo-pie/stories/pie.stories.js @@ -55,6 +55,7 @@ stories.add('with formatted values', () => ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-radar/README.md b/packages/nivo-radar/README.md index 91693988b..dcdab0252 100644 --- a/packages/nivo-radar/README.md +++ b/packages/nivo-radar/README.md @@ -1 +1 @@ -# `@nivo/radar` \ No newline at end of file +# `@nivo/radar` diff --git a/packages/nivo-radar/stories/radar.stories.js b/packages/nivo-radar/stories/radar.stories.js index f17246ab2..55daabbab 100644 --- a/packages/nivo-radar/stories/radar.stories.js +++ b/packages/nivo-radar/stories/radar.stories.js @@ -87,6 +87,7 @@ stories.add('with formatted values', () => ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-sankey/README.md b/packages/nivo-sankey/README.md index 77fe352fe..4ce444422 100644 --- a/packages/nivo-sankey/README.md +++ b/packages/nivo-sankey/README.md @@ -1 +1 @@ -# `@nivo/sankey` \ No newline at end of file +# `@nivo/sankey` diff --git a/packages/nivo-sankey/src/SankeyLabels.js b/packages/nivo-sankey/src/SankeyLabels.js index c53815e1d..de2031992 100644 --- a/packages/nivo-sankey/src/SankeyLabels.js +++ b/packages/nivo-sankey/src/SankeyLabels.js @@ -110,7 +110,9 @@ const SankeyLabels = ({ return ( sankeyAlignmentPropMapping[prop] - export const SankeyPropTypes = { data: PropTypes.shape({ nodes: PropTypes.arrayOf( diff --git a/packages/nivo-sankey/stories/sankey.stories.js b/packages/nivo-sankey/stories/sankey.stories.js index 6a0984f0b..7c5d059d3 100644 --- a/packages/nivo-sankey/stories/sankey.stories.js +++ b/packages/nivo-sankey/stories/sankey.stories.js @@ -57,6 +57,7 @@ stories.add('with formatted values', () => ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-stream/README.md b/packages/nivo-stream/README.md index 1d4247770..b63b428c2 100644 --- a/packages/nivo-stream/README.md +++ b/packages/nivo-stream/README.md @@ -1 +1 @@ -# `@nivo/stream` \ No newline at end of file +# `@nivo/stream` diff --git a/packages/nivo-stream/src/Stream.js b/packages/nivo-stream/src/Stream.js index cf676df56..029e2f226 100644 --- a/packages/nivo-stream/src/Stream.js +++ b/packages/nivo-stream/src/Stream.js @@ -138,16 +138,16 @@ const Stream = ({ {...motionProps} /> {isInteractive && - enableStackTooltip && ( - - )} + enableStackTooltip && ( + + )} )} diff --git a/packages/nivo-stream/stories/stream.stories.js b/packages/nivo-stream/stories/stream.stories.js index dd1fd75dd..d98f055a0 100644 --- a/packages/nivo-stream/stories/stream.stories.js +++ b/packages/nivo-stream/stories/stream.stories.js @@ -52,6 +52,7 @@ stories.add('with formatted values', () => ( tooltipFormat={value => `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, - })} ₽`} + })} ₽` + } /> )) diff --git a/packages/nivo-sunburst/README.md b/packages/nivo-sunburst/README.md index 05fdf4ec5..dd68bfede 100644 --- a/packages/nivo-sunburst/README.md +++ b/packages/nivo-sunburst/README.md @@ -1 +1 @@ -# `@nivo/sunburst` \ No newline at end of file +# `@nivo/sunburst` diff --git a/packages/nivo-treemap/README.md b/packages/nivo-treemap/README.md index 58c8fdc82..13569f5a3 100644 --- a/packages/nivo-treemap/README.md +++ b/packages/nivo-treemap/README.md @@ -1 +1 @@ -# `@nivo/treemap` \ No newline at end of file +# `@nivo/treemap` diff --git a/packages/nivo-treemap/src/TreeMapNode.js b/packages/nivo-treemap/src/TreeMapNode.js index 629f4afe4..5ebab3a8f 100644 --- a/packages/nivo-treemap/src/TreeMapNode.js +++ b/packages/nivo-treemap/src/TreeMapNode.js @@ -29,9 +29,9 @@ const TreeMapNode = ({ style, node, handlers }) => { textAnchor="middle" alignmentBaseline="central" style={{ fill: style.labelTextColor, pointerEvents: 'none' }} - transform={`translate(${style.width / 2},${style.height / 2}) rotate(${rotate - ? -90 - : 0})`} + transform={`translate(${style.width / 2},${style.height / 2}) rotate(${ + rotate ? -90 : 0 + })`} > {node.label} diff --git a/packages/nivo-treemap/src/enhance.js b/packages/nivo-treemap/src/enhance.js index ddc0daf60..30859fbed 100644 --- a/packages/nivo-treemap/src/enhance.js +++ b/packages/nivo-treemap/src/enhance.js @@ -25,7 +25,6 @@ const computeNodePath = (node, getIdentity) => .map(ancestor => getIdentity(ancestor.data)) .join('.') - const commonEnhancers = [ withHierarchy(), withDimensions(), diff --git a/packages/nivo-voronoi/README.md b/packages/nivo-voronoi/README.md index d872cd00a..79733b554 100644 --- a/packages/nivo-voronoi/README.md +++ b/packages/nivo-voronoi/README.md @@ -1 +1 @@ -# `@nivo/voronoi` \ No newline at end of file +# `@nivo/voronoi` diff --git a/website/src/components/ChartTabs.js b/website/src/components/ChartTabs.js index 7836508e2..77459d1e0 100644 --- a/website/src/components/ChartTabs.js +++ b/website/src/components/ChartTabs.js @@ -60,9 +60,9 @@ export default class ChartTabs extends Component { return (
0 - ? ` chart-tabs--${mode}` - : ''} chart-tabs--${currentTab}`} + className={`chart-tabs${ + mode.length > 0 ? ` chart-tabs--${mode}` : '' + } chart-tabs--${currentTab}`} > {content}
diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js index 5eda479bf..4b41325b5 100644 --- a/website/src/components/charts/bar/Bar.js +++ b/website/src/components/charts/bar/Bar.js @@ -180,7 +180,9 @@ export default class Bar extends Component { The bar item component can be customized to render any valid SVG element, it will receive current bar style, data and event handlers, the storybook offers an{' '} diff --git a/website/src/components/charts/bar/BarCanvas.js b/website/src/components/charts/bar/BarCanvas.js index cf97bfb93..61577d23f 100644 --- a/website/src/components/charts/bar/BarCanvas.js +++ b/website/src/components/charts/bar/BarCanvas.js @@ -132,10 +132,14 @@ export default class BarCanvas extends Component { const mappedSettings = propsMapper(settings) - const code = generateCode('BarCanvas', { - keys, - ...mappedSettings, - }, { pkg: '@nivo/bar' }) + const code = generateCode( + 'BarCanvas', + { + keys, + ...mappedSettings, + }, + { pkg: '@nivo/bar' } + ) const header = ( { onChange(null) }} @@ -34,10 +34,11 @@ export default class ComponentsFilters extends Component { {filters.map(filter => ( { onChange(filter) }} diff --git a/website/src/components/nav/MiniNav.js b/website/src/components/nav/MiniNav.js index fab26e7ef..bd6b10fae 100644 --- a/website/src/components/nav/MiniNav.js +++ b/website/src/components/nav/MiniNav.js @@ -166,8 +166,9 @@ class MiniNav extends Component { {interpolatedStyles.map(item => { const style = { opacity: item.style.opacity, - transform: `translate3d(0,${item.style.top}px,0) scale(${item - .style.scale})`, + transform: `translate3d(0,${item.style.top}px,0) scale(${ + item.style.scale + })`, zIndex: item.style.zIndex, } diff --git a/website/src/components/nav/MiniNavLink.js b/website/src/components/nav/MiniNavLink.js index d50436a72..22263efbd 100644 --- a/website/src/components/nav/MiniNavLink.js +++ b/website/src/components/nav/MiniNavLink.js @@ -49,9 +49,9 @@ export default class MiniNavLink extends Component { > {label} diff --git a/website/src/components/nav/Nav.js b/website/src/components/nav/Nav.js index e899fcfe3..4921d9fd0 100644 --- a/website/src/components/nav/Nav.js +++ b/website/src/components/nav/Nav.js @@ -34,7 +34,9 @@ class Nav extends Component { > {item.label} @@ -53,7 +55,9 @@ class Nav extends Component { > {child.label} diff --git a/website/src/components/properties/ComponentPropsList.js b/website/src/components/properties/ComponentPropsList.js index 7cef90a3f..2ecfc81d1 100644 --- a/website/src/components/properties/ComponentPropsList.js +++ b/website/src/components/properties/ComponentPropsList.js @@ -76,9 +76,9 @@ export default class ComponentPropsList extends PureComponent { return (