diff --git a/.gitignore b/.gitignore index 501e2523e..c8f85e918 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,16 @@ .idea *.log* node_modules -/lib -/es /coverage -/storybook-static \ No newline at end of file +/storybook-static + +package-lock.json +yarn.lock + +build + +/packages/*/lib +/packages/*/es + +*.lerna_backup + diff --git a/.storybook/config.js b/.storybook/config.js index 35020c706..48162abeb 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,8 +1,18 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import { configure } from '@storybook/react' +import { setDefaults } from '@storybook/addon-info' +import './style.css' + +setDefaults({ + header: false, + inline: true, + propTables: false, + maxPropObjectKeys: 10000, + maxPropArrayLength: 10000, + maxPropStringLength: 10000 +}) -const req = require.context('../stories', true, /\.stories\.js$/) +const req = require.context('../packages', true, /\.stories\.js$/) function loadStories() { req.keys().forEach(filename => req(filename)) diff --git a/stories/style.css b/.storybook/style.css similarity index 100% rename from stories/style.css rename to .storybook/style.css diff --git a/Makefile b/Makefile new file mode 100644 index 000000000..3bb4ced0e --- /dev/null +++ b/Makefile @@ -0,0 +1,69 @@ +SOURCES = packages + +.PHONY: help bootstrap build-all clean-all test + +######################################################################################################################## +# +# HELP +# +######################################################################################################################## + +# COLORS +RED = $(shell printf "\33[31m") +GREEN = $(shell printf "\33[32m") +WHITE = $(shell printf "\33[37m") +YELLOW = $(shell printf "\33[33m") +RESET = $(shell printf "\33[0m") + +# Add the following 'help' target to your Makefile +# And add help text after each target name starting with '\#\#' +# A category can be added with @category +HELP_HELPER = \ + %help; \ + while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-\%]+)\s*:.*\#\#(?:@([a-zA-Z\-\%]+))?\s(.*)$$/ }; \ + print "usage: make [target]\n\n"; \ + for (sort keys %help) { \ + print "${WHITE}$$_:${RESET}\n"; \ + for (@{$$help{$$_}}) { \ + $$sep = " " x (32 - length $$_->[0]); \ + print " ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \ + }; \ + print "\n"; } + +help: ##prints help + @perl -e '$(HELP_HELPER)' $(MAKEFILE_LIST) + +.DEFAULT_GOAL := help + +init: ##@init cleanup/install/bootstrap + make clean-all + yarn install + ./node_modules/.bin/lerna bootstrap + make build-all + +build-all: ##@build build all packages + $(foreach source, $(SOURCES), $(call clean-source-lib, $(source))) + ./node_modules/.bin/lerna run --ignore nivo-demo --ignore nivo-example-retro build + +######################################################################################################################## +# +# CLEANUP +# +######################################################################################################################## + +clean-all: ##@cleanup + rm -rf node_modules + rm -rf package-lock.json + $(foreach source, $(SOURCES), $(call clean-source-all, $(source))) + +define clean-source-lib + rm -rf $(1)/*/es + rm -rf $(1)/*/lib +endef + +define clean-source-all + rm -rf $(1)/*/es + rm -rf $(1)/*/lib + rm -rf $(1)/*/node_modules + rm -rf $(1)/*/package-lock.json +endef diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 000000000..c102c7e0d --- /dev/null +++ b/demo/README.md @@ -0,0 +1,11 @@ +# nivo-website + +Sources for [nivo](https://github.com/plouc/nivo) [website](https://plouc.github.io/nivo/). + +## 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-website](https://github.com/plouc/nivo-website) - the source for the nivo website diff --git a/demo/package.json b/demo/package.json new file mode 100644 index 000000000..4c93a7f6a --- /dev/null +++ b/demo/package.json @@ -0,0 +1,59 @@ +{ + "name": "nivo-demo", + "version": "0.32.0-0", + "private": true, + "description": "nivo demo", + "author": "Raphaël Benitte ", + "devDependencies": { + "gh-pages": "^1.0.0", + "prettier": "^1.7.4", + "react-scripts": "1.0.14", + "source-map-explorer": "^1.5.0" + }, + "dependencies": { + "@nivo/bar": "0.32.0-0", + "@nivo/calendar": "0.32.0-0", + "@nivo/chord": "0.32.0-0", + "@nivo/circle-packing": "0.32.0-0", + "@nivo/core": "0.32.0-0", + "@nivo/heatmap": "0.32.0-0", + "@nivo/line": "0.32.0-0", + "@nivo/pie": "0.32.0-0", + "@nivo/radar": "0.32.0-0", + "@nivo/sankey": "0.32.0-0", + "@nivo/stream": "0.32.0-0", + "@nivo/sunburst": "0.32.0-0", + "@nivo/treemap": "0.32.0-0", + "@nivo/voronoi": "0.32.0-0", + "classnames": "2.2.4", + "d3-scale": "^1.0.6", + "d3-scale-chromatic": "^1.1.1", + "d3-time": "^1.0.7", + "d3-time-format": "^2.0.5", + "dedent-js": "^1.0.1", + "lodash": "^4.17.4", + "nivo-generators": "0.9.3", + "prop-types": "^15.5.10", + "react": "16.0.0", + "react-colors-picker": "2.3.1", + "react-dom": "^16.0.0", + "react-helmet": "5.1.3", + "react-icons": "^2.2.5", + "react-motion": "^0.5.0", + "react-responsive": "1.3.4", + "react-router-dom": "^4.2.2", + "react-select": "1.0.0-rc.10", + "react-syntax-highlighter": "^5.7.0", + "styled-components": "^2.1.1", + "url-search-params": "^0.10.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "analyze": "source-map-explorer build/static/js/main.*", + "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --write 'src/**/*.js' 'src/**/*.css'", + "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different 'src/**/*.js' 'src/**/*.css'", + "demo:publish": "npm run build && gh-pages -d build -r git@github.com:plouc/nivo.git -b gh-pages", + "sprites": "glue --img src/assets --css src/styles src/assets/icons" + } +} diff --git a/demo/public/CNAME b/demo/public/CNAME new file mode 100644 index 000000000..5d0ab0a4d --- /dev/null +++ b/demo/public/CNAME @@ -0,0 +1 @@ +nivo.rocks \ No newline at end of file diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico new file mode 100644 index 000000000..df78d3eb2 Binary files /dev/null and b/demo/public/favicon.ico differ diff --git a/demo/public/index.html b/demo/public/index.html new file mode 100644 index 000000000..df50815a4 --- /dev/null +++ b/demo/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + + nivo | demo + + + +
+ + diff --git a/demo/public/manifest.json b/demo/public/manifest.json new file mode 100644 index 000000000..c97ad3eee --- /dev/null +++ b/demo/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "nivo", + "name": "nivo dataviz components", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#e25d47" +} diff --git a/demo/src/SiteMap.js b/demo/src/SiteMap.js new file mode 100644 index 000000000..51779c399 --- /dev/null +++ b/demo/src/SiteMap.js @@ -0,0 +1,571 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016-today Raphaël Benitte + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React from 'react' +import { Route } from 'react-router-dom' + +import BarPage from './components/charts/bar/BarPage' +import Bar from './components/charts/bar/Bar' +import BarCanvas from './components/charts/bar/BarCanvas' +import BarAPI from './components/charts/bar/BarAPI' +import HeatMapPage from './components/charts/heatmap/HeatMapPage' +import HeatMap from './components/charts/heatmap/HeatMap' +import HeatMapCanvas from './components/charts/heatmap/HeatMapCanvas' +import HeatMapAPI from './components/charts/heatmap/HeatMapAPI' +import LinePage from './components/charts/line/LinePage' +import Line from './components/charts/line/Line' +import LineAPI from './components/charts/line/LineAPI' +import StreamPage from './components/charts/stream/StreamPage' +import Stream from './components/charts/stream/Stream' +import PiePage from './components/charts/pie/PiePage' +import Pie from './components/charts/pie/Pie' +import PieAPI from './components/charts/pie/PieAPI' +import RadarPage from './components/charts/radar/RadarPage' +import Radar from './components/charts/radar/Radar' +import RadarAPI from './components/charts/radar/RadarAPI' +import BubblePage from './components/charts/bubble/BubblePage' +import Bubble from './components/charts/bubble/Bubble' +import BubbleHtml from './components/charts/bubble/BubbleHtml' +import BubbleCanvas from './components/charts/bubble/BubbleCanvas' +import BubbleAPI from './components/charts/bubble/BubbleAPI' +import SankeyPage from './components/charts/sankey/SankeyPage' +import Sankey from './components/charts/sankey/Sankey' +import SankeyAPI from './components/charts/sankey/SankeyAPI' +import SunburstPage from './components/charts/sunburst/SunburstPage' +import Sunburst from './components/charts/sunburst/Sunburst' +import SunburstAPI from './components/charts/sunburst/SunburstAPI' +import TreeMapPage from './components/charts/treemap/TreeMapPage' +import TreeMap from './components/charts/treemap/TreeMap' +import TreeMapHtml from './components/charts/treemap/TreeMapHtml' +import TreeMapCanvas from './components/charts/treemap/TreeMapCanvas' +import TreeMapAPI from './components/charts/treemap/TreeMapAPI' +import CalendarPage from './components/charts/calendar/CalendarPage' +import Calendar from './components/charts/calendar/Calendar' +import CalendarAPI from './components/charts/calendar/CalendarAPI' +import ChordPage from './components/charts/chord/ChordPage' +import Chord from './components/charts/chord/Chord' +import ChordCanvas from './components/charts/chord/ChordCanvas' +import ChordAPI from './components/charts/chord/ChordAPI' +import VoronoiPage from './components/charts/voronoi/VoronoiPage' +import Voronoi from './components/charts/voronoi/Voronoi' +import Colors from './components/guides/colors/Colors' +import Gradients from './components/guides/gradients/Gradients' +import Patterns from './components/guides/patterns/Patterns' +import About from './components/pages/About' +import Components from './components/components/Components' + +const SITEMAP = [ + { + label: 'Components', + children: [ + { + className: 'bar', + path: '/bar', + label: 'Bar', + component: BarPage, + children: [ + { + className: 'react', + path: '/', + label: 'Bar', + component: Bar, + exact: true, + tags: ['svg', 'isomorphic'], + }, + { + className: 'canvas', + path: '/canvas', + label: 'BarCanvas', + component: BarCanvas, + tags: ['canvas'], + }, + { + className: 'api', + path: '/api', + label: 'Bar API', + component: BarAPI, + tags: ['api'], + }, + ], + }, + { + className: 'bubble', + path: '/bubble', + label: 'Bubble', + component: BubblePage, + children: [ + { + className: 'react', + path: '/', + label: 'Bubble', + component: Bubble, + exact: true, + tags: ['svg', 'hierarchy', 'isomorphic'], + }, + { + className: 'html', + path: '/html', + label: 'BubbleHtml', + component: BubbleHtml, + tags: ['html', 'hierarchy', 'isomorphic'], + }, + { + className: 'canvas', + path: '/canvas', + label: 'BubbleCanvas', + component: BubbleCanvas, + exact: true, + tags: ['canvas', 'hierarchy'], + }, + { + className: 'api', + path: '/api', + label: 'Bubble API', + component: BubbleAPI, + tags: ['api', 'hierarchy'], + }, + ], + }, + { + className: 'calendar', + path: '/calendar', + label: 'Calendar', + component: CalendarPage, + children: [ + { + className: 'react', + path: '/', + label: 'Calendar', + component: Calendar, + exact: true, + tags: ['svg', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Calendar API', + component: CalendarAPI, + tags: ['api'], + }, + ], + }, + { + className: 'chord', + path: '/chord', + label: 'Chord', + component: ChordPage, + children: [ + { + className: 'react', + path: '/', + label: 'Chord', + component: Chord, + exact: true, + tags: ['svg', 'relational', 'isomorphic'], + }, + { + className: 'canvas', + path: '/canvas', + label: 'ChordCanvas', + component: ChordCanvas, + tags: ['canvas', 'relational'], + }, + { + className: 'api', + path: '/api', + label: 'Chord API', + component: ChordAPI, + tags: ['api', 'relational'], + }, + ], + }, + { + className: 'heatmap', + path: '/heatmap', + label: 'HeatMap', + component: HeatMapPage, + children: [ + { + className: 'react', + path: '/', + label: 'HeatMap', + component: HeatMap, + exact: true, + tags: ['svg', 'isomorphic', 'quantize'], + }, + { + className: 'canvas', + path: '/canvas', + label: 'HeatMapCanvas', + component: HeatMapCanvas, + tags: ['canvas', 'quantize'], + }, + { + className: 'api', + path: '/api', + label: 'HeatMap API', + component: HeatMapAPI, + tags: ['api', 'quantize'], + }, + ], + }, + { + className: 'line', + path: '/line', + label: 'Line', + component: LinePage, + children: [ + { + className: 'react', + path: '/', + label: 'Line', + component: Line, + exact: true, + tags: ['svg', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Line API', + component: LineAPI, + tags: ['api'], + }, + ], + }, + { + className: 'pie', + path: '/pie', + label: 'Pie', + component: PiePage, + children: [ + { + className: 'react', + path: '/', + label: 'Pie', + component: Pie, + exact: true, + tags: ['svg', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Pie API', + component: PieAPI, + tags: ['api'], + }, + ], + }, + { + className: 'radar', + path: '/radar', + label: 'Radar', + component: RadarPage, + children: [ + { + className: 'react', + path: '/', + label: 'Radar', + component: Radar, + exact: true, + tags: ['svg', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Radar API', + component: RadarAPI, + tags: ['api'], + }, + ], + }, + { + className: 'sankey', + path: '/sankey', + label: 'Sankey', + component: SankeyPage, + children: [ + { + className: 'react', + path: '/', + label: 'Sankey', + component: Sankey, + exact: true, + tags: ['svg', 'relational', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Sankey API', + component: SankeyAPI, + tags: ['api', 'relational'], + }, + ], + }, + { + className: 'stream', + path: '/stream', + label: 'Stream', + component: StreamPage, + children: [ + { + className: 'react', + path: '/', + label: 'Stream', + component: Stream, + exact: true, + tags: ['svg', 'isomorphic'], + }, + ], + }, + { + className: 'sunburst', + path: '/sunburst', + label: 'Sunburst', + component: SunburstPage, + children: [ + { + className: 'react', + path: '/', + label: 'Sunburst', + component: Sunburst, + exact: true, + tags: ['svg', 'hierarchy', 'isomorphic'], + }, + { + className: 'api', + path: '/api', + label: 'Sunburst API', + component: SunburstAPI, + tags: ['api', 'hierarchy'], + }, + ], + }, + { + className: 'treemap', + path: '/treemap', + label: 'TreeMap', + component: TreeMapPage, + children: [ + { + className: 'react', + path: '/', + label: 'TreeMap', + component: TreeMap, + exact: true, + tags: ['svg', 'hierarchy', 'isomorphic'], + }, + { + className: 'html', + path: '/html', + label: 'TreeMapHtml', + component: TreeMapHtml, + tags: ['html', 'hierarchy', 'isomorphic'], + }, + { + className: 'canvas', + path: '/canvas', + label: 'TreeMapCanvas', + component: TreeMapCanvas, + tags: ['canvas', 'hierarchy'], + }, + { + className: 'api', + path: '/api', + label: 'TreeMap API', + component: TreeMapAPI, + tags: ['api', 'hierarchy'], + }, + ], + }, + { + className: 'voronoi', + path: '/voronoi', + label: 'Voronoi', + component: VoronoiPage, + children: [ + { + className: 'react', + path: '/', + label: 'Voronoi', + component: Voronoi, + isIndex: true, + tags: ['svg', 'isomorphic'], + }, + ], + }, + ], + }, + { + label: 'Guides', + // those items must not be nested + children: [ + { + className: 'colors', + path: '/guides/colors', + label: 'Colors', + component: Colors, + description: 'Understanding nivo color related properties.', + }, + { + className: 'gradients', + path: '/guides/gradients', + label: 'Gradients', + component: Gradients, + description: 'Using gradients to fill your charts.', + }, + { + className: 'patterns', + path: '/guides/patterns', + label: 'Patterns', + component: Patterns, + description: 'Using patterns to fill your charts.', + }, + ], + }, + { + label: 'misc', + // those items must not be nested + children: [ + { + // component injected at the end of this file + // because of cyclic dependency + className: 'components', + path: '/components', + label: 'Components', + }, + { + className: 'guides', + label: 'Guides', + }, + { + className: 'about', + path: '/about', + label: 'About', + component: About, + }, + ], + }, + { + label: 'extras', + // those items must not be nested + children: [ + { + className: 'about', + path: '/about', + label: 'About', + component: About, + }, + { + className: 'storybook', + path: 'http://nivo.rocks/storybook/', + label: 'Storybook', + }, + { + className: 'nivo', + path: 'https://github.com/plouc/nivo', + label: 'nivo repository', + }, + { + className: 'nivo-api', + path: 'https://github.com/plouc/nivo-api', + label: 'nivo-api repository', + }, + { + className: 'nivo-website', + path: 'https://github.com/plouc/nivo-website', + label: 'nivo-website repository', + }, + ], + }, +] + +export const getSectionItems = sectionLabel => { + const section = SITEMAP.find(({ label }) => label === sectionLabel) + + return section.children +} + +export const getRoutes = () => { + const routes = [] + const routePaths = [] + + SITEMAP.forEach(item => { + if (item.children && item.children.length > 0) { + item.children.forEach(sectionItem => { + const routeChildren = [] + + if (sectionItem.children) { + sectionItem.children.forEach(childItem => { + routeChildren.push( + + ) + }) + } + + if ( + !sectionItem.path || + !sectionItem.component || + routePaths.includes(sectionItem.path) + ) + return + + routePaths.push(sectionItem.path) + routes.push( + } + /> + ) + }) + } + }) + + return routes +} + +export const guideItems = getSectionItems('Guides') +export const miscItems = getSectionItems('misc') + +const allComponents = getSectionItems('Components').reduce((acc, item) => { + if (item.children) { + item.children.forEach(child => { + const entry = { + key: `${item.className}.${child.className}`, + path: `${item.path}${child.path}`, + label: child.label, + className: item.className, + type: child.className, + tags: child.tags || [], + } + acc.push(entry) + + if (child.className !== 'api') { + acc.push( + Object.assign({}, entry, { + key: `${entry.key}.responsive`, + label: `Responsive${child.label}`, + tags: [...entry.tags, 'responsive'], + }) + ) + } + }) + } + + return acc +}, []) + +miscItems.find(({ label }) => label === 'Guides').children = guideItems +miscItems.find(({ label }) => label === 'Components').component = props => { + return React.createElement(Components, { ...props, components: allComponents }) +} diff --git a/demo/src/assets/color-picker-panel-alpha.png b/demo/src/assets/color-picker-panel-alpha.png new file mode 100644 index 000000000..1a1c9c15e Binary files /dev/null and b/demo/src/assets/color-picker-panel-alpha.png differ diff --git a/demo/src/assets/color-picker-panel-board-saturation.svg b/demo/src/assets/color-picker-panel-board-saturation.svg new file mode 100644 index 000000000..ffed55ee9 --- /dev/null +++ b/demo/src/assets/color-picker-panel-board-saturation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/src/assets/color-picker-panel-board-value.svg b/demo/src/assets/color-picker-panel-board-value.svg new file mode 100644 index 000000000..e37ea57d0 --- /dev/null +++ b/demo/src/assets/color-picker-panel-board-value.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/src/assets/color-picker-panel-preview.png b/demo/src/assets/color-picker-panel-preview.png new file mode 100644 index 000000000..1a1c9c15e Binary files /dev/null and b/demo/src/assets/color-picker-panel-preview.png differ diff --git a/demo/src/assets/color-picker-panel-ribbon.svg b/demo/src/assets/color-picker-panel-ribbon.svg new file mode 100644 index 000000000..69b41ce5a --- /dev/null +++ b/demo/src/assets/color-picker-panel-ribbon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/src/assets/icons.png b/demo/src/assets/icons.png new file mode 100644 index 000000000..e8f30a1fc Binary files /dev/null and b/demo/src/assets/icons.png differ diff --git a/demo/src/assets/icons/api-grey.png b/demo/src/assets/icons/api-grey.png new file mode 100644 index 000000000..2592c9122 Binary files /dev/null and b/demo/src/assets/icons/api-grey.png differ diff --git a/demo/src/assets/icons/api-red.png b/demo/src/assets/icons/api-red.png new file mode 100644 index 000000000..e602f6e71 Binary files /dev/null and b/demo/src/assets/icons/api-red.png differ diff --git a/demo/src/assets/icons/bar-grey.png b/demo/src/assets/icons/bar-grey.png new file mode 100644 index 000000000..85e513d9f Binary files /dev/null and b/demo/src/assets/icons/bar-grey.png differ diff --git a/demo/src/assets/icons/bar-red.png b/demo/src/assets/icons/bar-red.png new file mode 100644 index 000000000..96b1cbf88 Binary files /dev/null and b/demo/src/assets/icons/bar-red.png differ diff --git a/demo/src/assets/icons/bubble-grey.png b/demo/src/assets/icons/bubble-grey.png new file mode 100644 index 000000000..88b6d3652 Binary files /dev/null and b/demo/src/assets/icons/bubble-grey.png differ diff --git a/demo/src/assets/icons/bubble-red.png b/demo/src/assets/icons/bubble-red.png new file mode 100644 index 000000000..ef36fbda8 Binary files /dev/null and b/demo/src/assets/icons/bubble-red.png differ diff --git a/demo/src/assets/icons/calendar-grey.png b/demo/src/assets/icons/calendar-grey.png new file mode 100644 index 000000000..7135ac531 Binary files /dev/null and b/demo/src/assets/icons/calendar-grey.png differ diff --git a/demo/src/assets/icons/calendar-red.png b/demo/src/assets/icons/calendar-red.png new file mode 100644 index 000000000..4a5d64d46 Binary files /dev/null and b/demo/src/assets/icons/calendar-red.png differ diff --git a/demo/src/assets/icons/canvas-grey.png b/demo/src/assets/icons/canvas-grey.png new file mode 100644 index 000000000..f83f0a6ee Binary files /dev/null and b/demo/src/assets/icons/canvas-grey.png differ diff --git a/demo/src/assets/icons/canvas-red.png b/demo/src/assets/icons/canvas-red.png new file mode 100644 index 000000000..72e9cf989 Binary files /dev/null and b/demo/src/assets/icons/canvas-red.png differ diff --git a/demo/src/assets/icons/chord-grey.png b/demo/src/assets/icons/chord-grey.png new file mode 100644 index 000000000..6b894ee42 Binary files /dev/null and b/demo/src/assets/icons/chord-grey.png differ diff --git a/demo/src/assets/icons/chord-red.png b/demo/src/assets/icons/chord-red.png new file mode 100644 index 000000000..8a55f7c8c Binary files /dev/null and b/demo/src/assets/icons/chord-red.png differ diff --git a/demo/src/assets/icons/code-grey.png b/demo/src/assets/icons/code-grey.png new file mode 100644 index 000000000..d172043b8 Binary files /dev/null and b/demo/src/assets/icons/code-grey.png differ diff --git a/demo/src/assets/icons/code-red.png b/demo/src/assets/icons/code-red.png new file mode 100644 index 000000000..deb9ba893 Binary files /dev/null and b/demo/src/assets/icons/code-red.png differ diff --git a/demo/src/assets/icons/colors-grey.png b/demo/src/assets/icons/colors-grey.png new file mode 100644 index 000000000..41fefd98c Binary files /dev/null and b/demo/src/assets/icons/colors-grey.png differ diff --git a/demo/src/assets/icons/colors-red.png b/demo/src/assets/icons/colors-red.png new file mode 100644 index 000000000..d40e30c1c Binary files /dev/null and b/demo/src/assets/icons/colors-red.png differ diff --git a/demo/src/assets/icons/data-grey.png b/demo/src/assets/icons/data-grey.png new file mode 100644 index 000000000..a2b6beed9 Binary files /dev/null and b/demo/src/assets/icons/data-grey.png differ diff --git a/demo/src/assets/icons/data-red.png b/demo/src/assets/icons/data-red.png new file mode 100644 index 000000000..1a98795e8 Binary files /dev/null and b/demo/src/assets/icons/data-red.png differ diff --git a/demo/src/assets/icons/heatmap-grey.png b/demo/src/assets/icons/heatmap-grey.png new file mode 100644 index 000000000..675c44b2e Binary files /dev/null and b/demo/src/assets/icons/heatmap-grey.png differ diff --git a/demo/src/assets/icons/heatmap-red.png b/demo/src/assets/icons/heatmap-red.png new file mode 100644 index 000000000..abd950a5c Binary files /dev/null and b/demo/src/assets/icons/heatmap-red.png differ diff --git a/demo/src/assets/icons/html-grey.png b/demo/src/assets/icons/html-grey.png new file mode 100644 index 000000000..c20e63c48 Binary files /dev/null and b/demo/src/assets/icons/html-grey.png differ diff --git a/demo/src/assets/icons/html-red.png b/demo/src/assets/icons/html-red.png new file mode 100644 index 000000000..3ac513a83 Binary files /dev/null and b/demo/src/assets/icons/html-red.png differ diff --git a/demo/src/assets/icons/line-grey.png b/demo/src/assets/icons/line-grey.png new file mode 100644 index 000000000..26ee9ad63 Binary files /dev/null and b/demo/src/assets/icons/line-grey.png differ diff --git a/demo/src/assets/icons/line-red.png b/demo/src/assets/icons/line-red.png new file mode 100644 index 000000000..6accb94ae Binary files /dev/null and b/demo/src/assets/icons/line-red.png differ diff --git a/demo/src/assets/icons/nav-back-grey.png b/demo/src/assets/icons/nav-back-grey.png new file mode 100644 index 000000000..85a5c8cb7 Binary files /dev/null and b/demo/src/assets/icons/nav-back-grey.png differ diff --git a/demo/src/assets/icons/nav-back-red.png b/demo/src/assets/icons/nav-back-red.png new file mode 100644 index 000000000..b9067970e Binary files /dev/null and b/demo/src/assets/icons/nav-back-red.png differ diff --git a/demo/src/assets/icons/nivo-logo.png b/demo/src/assets/icons/nivo-logo.png new file mode 100644 index 000000000..c04a83ca3 Binary files /dev/null and b/demo/src/assets/icons/nivo-logo.png differ diff --git a/demo/src/assets/icons/pie-grey.png b/demo/src/assets/icons/pie-grey.png new file mode 100644 index 000000000..3bff58bb8 Binary files /dev/null and b/demo/src/assets/icons/pie-grey.png differ diff --git a/demo/src/assets/icons/pie-red.png b/demo/src/assets/icons/pie-red.png new file mode 100644 index 000000000..9d077e1fe Binary files /dev/null and b/demo/src/assets/icons/pie-red.png differ diff --git a/demo/src/assets/icons/placeholders-grey.png b/demo/src/assets/icons/placeholders-grey.png new file mode 100644 index 000000000..d172043b8 Binary files /dev/null and b/demo/src/assets/icons/placeholders-grey.png differ diff --git a/demo/src/assets/icons/placeholders-red.png b/demo/src/assets/icons/placeholders-red.png new file mode 100644 index 000000000..deb9ba893 Binary files /dev/null and b/demo/src/assets/icons/placeholders-red.png differ diff --git a/demo/src/assets/icons/radar-grey.png b/demo/src/assets/icons/radar-grey.png new file mode 100644 index 000000000..82b4d9aab Binary files /dev/null and b/demo/src/assets/icons/radar-grey.png differ diff --git a/demo/src/assets/icons/radar-red.png b/demo/src/assets/icons/radar-red.png new file mode 100644 index 000000000..d93e7a6ae Binary files /dev/null and b/demo/src/assets/icons/radar-red.png differ diff --git a/demo/src/assets/icons/react-grey.png b/demo/src/assets/icons/react-grey.png new file mode 100644 index 000000000..2f3ef5340 Binary files /dev/null and b/demo/src/assets/icons/react-grey.png differ diff --git a/demo/src/assets/icons/react-red.png b/demo/src/assets/icons/react-red.png new file mode 100644 index 000000000..e80307c1f Binary files /dev/null and b/demo/src/assets/icons/react-red.png differ diff --git a/demo/src/assets/icons/sankey-grey.png b/demo/src/assets/icons/sankey-grey.png new file mode 100644 index 000000000..cca2e1052 Binary files /dev/null and b/demo/src/assets/icons/sankey-grey.png differ diff --git a/demo/src/assets/icons/sankey-red.png b/demo/src/assets/icons/sankey-red.png new file mode 100644 index 000000000..b215c5ab2 Binary files /dev/null and b/demo/src/assets/icons/sankey-red.png differ diff --git a/demo/src/assets/icons/sprite.conf b/demo/src/assets/icons/sprite.conf new file mode 100644 index 000000000..2030de8ef --- /dev/null +++ b/demo/src/assets/icons/sprite.conf @@ -0,0 +1,6 @@ +[sprite] +crop=false +margin=4 +padding=0 +ratios=2,1 +url=../assets/ diff --git a/demo/src/assets/icons/stream-grey.png b/demo/src/assets/icons/stream-grey.png new file mode 100644 index 000000000..5afd5efec Binary files /dev/null and b/demo/src/assets/icons/stream-grey.png differ diff --git a/demo/src/assets/icons/stream-red.png b/demo/src/assets/icons/stream-red.png new file mode 100644 index 000000000..c9110870e Binary files /dev/null and b/demo/src/assets/icons/stream-red.png differ diff --git a/demo/src/assets/icons/sunburst-grey.png b/demo/src/assets/icons/sunburst-grey.png new file mode 100644 index 000000000..26ad90a7c Binary files /dev/null and b/demo/src/assets/icons/sunburst-grey.png differ diff --git a/demo/src/assets/icons/sunburst-red.png b/demo/src/assets/icons/sunburst-red.png new file mode 100644 index 000000000..82e89fdb2 Binary files /dev/null and b/demo/src/assets/icons/sunburst-red.png differ diff --git a/demo/src/assets/icons/treemap-grey.png b/demo/src/assets/icons/treemap-grey.png new file mode 100644 index 000000000..1b9f52df6 Binary files /dev/null and b/demo/src/assets/icons/treemap-grey.png differ diff --git a/demo/src/assets/icons/treemap-red.png b/demo/src/assets/icons/treemap-red.png new file mode 100644 index 000000000..f9ba789ed Binary files /dev/null and b/demo/src/assets/icons/treemap-red.png differ diff --git a/demo/src/assets/icons/voronoi-grey.png b/demo/src/assets/icons/voronoi-grey.png new file mode 100644 index 000000000..3f243f16e Binary files /dev/null and b/demo/src/assets/icons/voronoi-grey.png differ diff --git a/demo/src/assets/icons/voronoi-red.png b/demo/src/assets/icons/voronoi-red.png new file mode 100644 index 000000000..46e81a6c5 Binary files /dev/null and b/demo/src/assets/icons/voronoi-red.png differ diff --git a/demo/src/assets/icons@2x.png b/demo/src/assets/icons@2x.png new file mode 100644 index 000000000..f177d373f Binary files /dev/null and b/demo/src/assets/icons@2x.png differ diff --git a/demo/src/assets/nivo-logo.png b/demo/src/assets/nivo-logo.png new file mode 100644 index 000000000..d70f29d62 Binary files /dev/null and b/demo/src/assets/nivo-logo.png differ diff --git a/demo/src/assets/nivo-nav-bars.png b/demo/src/assets/nivo-nav-bars.png new file mode 100644 index 000000000..3bc7037e9 Binary files /dev/null and b/demo/src/assets/nivo-nav-bars.png differ diff --git a/demo/src/assets/nivo-settings.png b/demo/src/assets/nivo-settings.png new file mode 100644 index 000000000..36788c660 Binary files /dev/null and b/demo/src/assets/nivo-settings.png differ diff --git a/demo/src/assets/nivo-toggle.png b/demo/src/assets/nivo-toggle.png new file mode 100644 index 000000000..a64b2d0ec Binary files /dev/null and b/demo/src/assets/nivo-toggle.png differ diff --git a/demo/src/colors.js b/demo/src/colors.js new file mode 100644 index 000000000..87da0379a --- /dev/null +++ b/demo/src/colors.js @@ -0,0 +1 @@ +export const redColorRange = ['#c6432d', '#f4735e', '#d2513c', '#ed705b'] diff --git a/demo/src/components/ChartCode.js b/demo/src/components/ChartCode.js new file mode 100644 index 000000000..7db150237 --- /dev/null +++ b/demo/src/components/ChartCode.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react' +import CollapsibleCard from './CollapsibleCard' + +class ChartCode extends Component { + shouldComponentUpdate(nextProps) { + if (nextProps.code === this.props.code) { + return false + } + + return true + } + + render() { + const { code } = this.props + + return ( + +
+
{code}
+
+
+ ) + } +} + +export default ChartCode diff --git a/demo/src/components/ChartCodeAndData.js b/demo/src/components/ChartCodeAndData.js new file mode 100644 index 000000000..3d30b5c8f --- /dev/null +++ b/demo/src/components/ChartCodeAndData.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import ChartCode from './ChartCode' +import JsonData from './JsonData' + +class ChartCodeAndData extends Component { + render() { + const { code, data, onDataUpdate } = this.props + + return ( +
+ + {data && } +
+ ) + } +} + +const { func } = PropTypes + +ChartCodeAndData.propTypes = { + onDataUpdate: func, +} + +export default ChartCodeAndData diff --git a/demo/src/components/ChartHeader.js b/demo/src/components/ChartHeader.js new file mode 100644 index 000000000..f996e5188 --- /dev/null +++ b/demo/src/components/ChartHeader.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +class ChartHeader extends Component { + shouldComponentUpdate() { + return false + } + + render() { + const { chartClass, tags, diceRoll } = this.props + + return ( +
+

+ {chartClass} + {diceRoll && ( + + roll the dice + + )} +

+
+ {tags.map(tag => ( + + {tag} + + ))} +
+
+ ) + } +} + +ChartHeader.propTypes = { + chartClass: PropTypes.string.isRequired, + tags: PropTypes.array.isRequired, + diceRoll: PropTypes.func, +} + +ChartHeader.defaultProps = { + tags: [], +} + +export default ChartHeader diff --git a/demo/src/components/ChartTabs.js b/demo/src/components/ChartTabs.js new file mode 100644 index 000000000..7836508e2 --- /dev/null +++ b/demo/src/components/ChartTabs.js @@ -0,0 +1,111 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016 Raphaël Benitte + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +const tabs = ['chart', 'code', 'data'] + +export default class ChartTabs extends Component { + static propTypes = { + chartClass: PropTypes.string.isRequired, + data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + code: PropTypes.string.isRequired, + nodeCount: PropTypes.number, + mode: PropTypes.string.isRequired, + } + + static defaultProps = { + mode: '', + } + + state = { + tab: 'chart', + hoverTab: null, + } + + handleTabToggle = tab => { + this.setState({ tab }) + } + + handleTabHover = hoverTab => { + this.setState({ hoverTab }) + } + + render() { + const { chartClass, mode, data, code, children, nodeCount } = this.props + const { tab: currentTab, hoverTab } = this.state + + let content + if (currentTab === 'chart') { + content = children + } else if (currentTab === 'code') { + content = ( +
+
{code}
+
+ ) + } else if (currentTab === 'data') { + content = ( +
+
{JSON.stringify(data, null, '  ')}
+
+ ) + } + + return ( +
0 + ? ` chart-tabs--${mode}` + : ''} chart-tabs--${currentTab}`} + > + {content} +
+ + {hoverTab} + +
+ {tabs.map(tab => { + const icon = tab === 'chart' ? chartClass : tab + const iconColor = + tab === currentTab || hoverTab === tab ? 'red' : 'grey' + + return ( + { + this.handleTabToggle(tab) + }} + onMouseEnter={() => { + this.handleTabHover(tab) + }} + onMouseLeave={() => { + this.handleTabHover(null) + }} + > + + + ) + })} +
+
+ {currentTab === 'chart' && + nodeCount !== undefined && ( + + {nodeCount} nodes + + )} +
+ ) + } +} diff --git a/demo/src/components/CollapsibleCard.js b/demo/src/components/CollapsibleCard.js new file mode 100644 index 000000000..330a554e1 --- /dev/null +++ b/demo/src/components/CollapsibleCard.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import UpIcon from 'react-icons/lib/md/keyboard-arrow-up' +import DownIcon from 'react-icons/lib/md/keyboard-arrow-down' + +export default class CollapsibleCard extends Component { + static propTypes = { + expandedByDefault: PropTypes.bool.isRequired, + } + + static defaultProps = { + expandedByDefault: false, + } + + constructor(props) { + super(props) + + this.state = { + expanded: props.expandedByDefault, + } + } + + handleToggleClick = () => { + const { expanded } = this.state + this.setState({ expanded: !expanded }) + } + + render() { + const { title, children } = this.props + const { expanded } = this.state + + return ( +
+
+

{title}

+ {expanded ? : } +
+ {expanded &&
{children}
} +
+ ) + } +} diff --git a/demo/src/components/Header.js b/demo/src/components/Header.js new file mode 100644 index 000000000..5933376fb --- /dev/null +++ b/demo/src/components/Header.js @@ -0,0 +1,81 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Link } from 'react-router-dom' +import GitHubIcon from 'react-icons/lib/fa/github' +import TwitterIcon from 'react-icons/lib/fa/twitter' +import { miscItems } from '../SiteMap' + +export default class Header extends Component { + static propTypes = { + onNavToggle: PropTypes.func.isRequired, + } + + render() { + const { onNavToggle } = this.props + + return ( +
+ + + +
+ ) + } +} diff --git a/demo/src/components/JsonData.js b/demo/src/components/JsonData.js new file mode 100644 index 000000000..d171baabf --- /dev/null +++ b/demo/src/components/JsonData.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' +import CollapsibleCard from './CollapsibleCard' + +export default class JsonData extends Component { + constructor(props) { + super(props) + + this.state = { + value: JSON.stringify(props.data, null, ' '), + } + } + + /* + shouldComponentUpdate(nextProps, nextState) { + if (nextProps.data === this.props.data && nextState.show === this.state.show) { + return false; + } + + return true; + } + */ + + handleDataUpdate = e => { + const { onDataUpdate } = this.props + if (onDataUpdate) { + onDataUpdate(JSON.parse(e.target.value)) + } + this.setState({ value: e.target.value }) + } + + render() { + const { value } = this.state + + return ( + +
+