├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .prettierrc ├── .stylelintrc ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── DEPRECATED.md ├── LICENSE ├── README.md ├── ROADMAP.md ├── babel.config.json ├── docs ├── animation.md ├── arc-series.md ├── area-series.md ├── assets │ ├── gridlines-over.png │ ├── gridlines-under.png │ ├── react-vis-in-codepen.png │ ├── react-vis.gif │ └── your-first-chart.png ├── axes.md ├── bar-series.md ├── borders.md ├── chart-label.md ├── clip.md ├── colors.md ├── contour-series.md ├── crosshair.md ├── custom-svg-series.md ├── decorative-axis.md ├── examples │ ├── building-things-other-than-charts.md │ ├── extensibility.md │ ├── iris-dashboard.md │ ├── responsive-vis.md │ ├── showcases │ │ ├── axes-showcase.md │ │ ├── legends-showcase.md │ │ ├── misc-showcase.md │ │ ├── plots-showcase.md │ │ ├── radar-chart-showcase.md │ │ ├── radial-showcase.md │ │ ├── sankeys-showcase.md │ │ ├── sunburst-showcase.md │ │ └── treemaps-showcase.md │ └── stream-graph.md ├── flexible-plots.md ├── getting-started │ ├── getting-started.md │ ├── installing-react-vis.md │ ├── new-react-vis-project.md │ ├── react-vis-in-codepen.md │ └── your-first-chart.md ├── gradients.md ├── grids.md ├── heatmap-series.md ├── hexbin-series.md ├── highlight.md ├── hint.md ├── interaction.md ├── label-series.md ├── legends.md ├── line-mark-series.md ├── line-series.md ├── mark-series.md ├── parallel-coordinates.md ├── polygon-series.md ├── presentation.md ├── radar-chart.md ├── radial-chart.md ├── rect-series.md ├── sankey.md ├── scales-and-data.md ├── series.md ├── style.md ├── sunburst.md ├── treemap.md ├── voronoi.md ├── whisker-series.md └── xy-plot.md ├── package.json ├── packages ├── react-vis │ ├── .babelrc.json │ ├── build-browser.sh │ ├── jest.config.js │ ├── jest.setup.js │ ├── jestBabelTransform.js │ ├── package.json │ ├── src │ │ ├── animation.js │ │ ├── index.js │ │ ├── legends │ │ │ ├── continuous-color-legend.js │ │ │ ├── continuous-size-legend.js │ │ │ ├── discrete-color-legend-item.js │ │ │ ├── discrete-color-legend.js │ │ │ └── searchable-discrete-color-legend.js │ │ ├── main.scss │ │ ├── make-vis-flexible.js │ │ ├── parallel-coordinates │ │ │ └── index.js │ │ ├── plot │ │ │ ├── axis │ │ │ │ ├── axis-line.js │ │ │ │ ├── axis-ticks.js │ │ │ │ ├── axis-title.js │ │ │ │ ├── axis.js │ │ │ │ ├── decorative-axis-ticks.js │ │ │ │ ├── decorative-axis.js │ │ │ │ ├── x-axis.js │ │ │ │ └── y-axis.js │ │ │ ├── borders.js │ │ │ ├── chart-label.js │ │ │ ├── circular-grid-lines.js │ │ │ ├── content-clip-path.js │ │ │ ├── crosshair.js │ │ │ ├── gradient-defs.js │ │ │ ├── grid-lines.js │ │ │ ├── highlight.js │ │ │ ├── hint.js │ │ │ ├── horizontal-grid-lines.js │ │ │ ├── series │ │ │ │ ├── abstract-series.js │ │ │ │ ├── arc-series.js │ │ │ │ ├── area-series.js │ │ │ │ ├── bar-series-canvas.js │ │ │ │ ├── bar-series.js │ │ │ │ ├── canvas-wrapper.js │ │ │ │ ├── contour-series.js │ │ │ │ ├── custom-svg-series.js │ │ │ │ ├── heatmap-series.js │ │ │ │ ├── hexbin-series.js │ │ │ │ ├── horizontal-bar-series-canvas.js │ │ │ │ ├── horizontal-bar-series.js │ │ │ │ ├── horizontal-rect-series-canvas.js │ │ │ │ ├── horizontal-rect-series.js │ │ │ │ ├── label-series.js │ │ │ │ ├── line-mark-series-canvas.js │ │ │ │ ├── line-mark-series.js │ │ │ │ ├── line-series-canvas.js │ │ │ │ ├── line-series.js │ │ │ │ ├── mark-series-canvas.js │ │ │ │ ├── mark-series.js │ │ │ │ ├── polygon-series.js │ │ │ │ ├── rect-series-canvas.js │ │ │ │ ├── rect-series.js │ │ │ │ ├── vertical-bar-series-canvas.js │ │ │ │ ├── vertical-bar-series.js │ │ │ │ ├── vertical-rect-series-canvas.js │ │ │ │ ├── vertical-rect-series.js │ │ │ │ └── whisker-series.js │ │ │ ├── vertical-grid-lines.js │ │ │ ├── voronoi.js │ │ │ └── xy-plot.js │ │ ├── radar-chart │ │ │ └── index.js │ │ ├── radial-chart │ │ │ └── index.js │ │ ├── sankey │ │ │ ├── index.js │ │ │ └── sankey-link.js │ │ ├── styles │ │ │ ├── examples.scss │ │ │ ├── legends.scss │ │ │ ├── plot.scss │ │ │ ├── radial-chart.scss │ │ │ └── treemap.scss │ │ ├── sunburst │ │ │ └── index.js │ │ ├── theme.js │ │ ├── treemap │ │ │ ├── index.js │ │ │ ├── treemap-dom.js │ │ │ ├── treemap-leaf.js │ │ │ └── treemap-svg.js │ │ └── utils │ │ │ ├── axis-utils.js │ │ │ ├── chart-utils.js │ │ │ ├── data-utils.js │ │ │ ├── react-utils.js │ │ │ ├── scales-utils.js │ │ │ ├── series-utils.js │ │ │ └── styling-utils.js │ └── tests │ │ ├── .eslintrc │ │ ├── components.js │ │ ├── components │ │ ├── animation.test.js │ │ ├── arc-series.test.js │ │ ├── area-series.test.js │ │ ├── axes.test.js │ │ ├── axis-tick-format.test.js │ │ ├── axis-title.test.js │ │ ├── bar-series.test.js │ │ ├── borders.test.js │ │ ├── canvas-component.test.js │ │ ├── circular-grid-lines.test.js │ │ ├── color-article.test.js │ │ ├── contour-series.test.js │ │ ├── crosshair.test.js │ │ ├── custom-svg-series.test.js │ │ ├── data-article.test.js │ │ ├── decorative-axis.test.js │ │ ├── gradient.test.js │ │ ├── grid-lines.test.js │ │ ├── heatmap.test.js │ │ ├── hexbin-series.test.js │ │ ├── highlight.test.js │ │ ├── hints.test.js │ │ ├── interaction-article.test.js │ │ ├── label-series.test.js │ │ ├── legends.test.js │ │ ├── line-series-canvas.test.js │ │ ├── line-series.test.js │ │ ├── make-vis-flexible.test.js │ │ ├── mark-series.test.js │ │ ├── parallel-coordinates.test.js │ │ ├── polygon-series.test.js │ │ ├── radar-chart.test.js │ │ ├── radial.test.js │ │ ├── rect-series.test.js │ │ ├── sankey.test.js │ │ ├── sunburst.test.js │ │ ├── treemap.test.js │ │ ├── voronoi.test.js │ │ ├── whisker-series.test.js │ │ └── xy-plot.test.js │ │ ├── index.js │ │ ├── jsconfig.json │ │ ├── plot │ │ ├── __snapshots__ │ │ │ └── content-clip-path.test.js.snap │ │ └── content-clip-path.test.js │ │ ├── setup.js │ │ ├── test-utils.js │ │ └── utils │ │ ├── axis-utils.test.js │ │ ├── chart-utils.test.js │ │ ├── data-utils.test.js │ │ ├── react-utils.test.js │ │ ├── scales-utils.test.js │ │ ├── series-utils.test.js │ │ └── styling-utils.test.js ├── showcase │ ├── .babelrc.json │ ├── app.js │ ├── axes │ │ ├── axis-on-0.js │ │ ├── custom-axes-orientation.js │ │ ├── custom-axes.js │ │ ├── custom-axis-tick-element.js │ │ ├── custom-axis-tick-format.js │ │ ├── custom-axis.js │ │ ├── decorative-axes-criss-cross.js │ │ ├── dynamic-complex-edge-hints.js │ │ ├── dynamic-crosshair-scatterplot.js │ │ ├── dynamic-crosshair.js │ │ ├── dynamic-hints.js │ │ ├── dynamic-programmatic-rightedge-hints.js │ │ ├── dynamic-simple-edge-hints.js │ │ ├── dynamic-simple-topedge-hints.js │ │ ├── empty-chart.js │ │ ├── padded-axis.js │ │ ├── parallel-coordinates-example.js │ │ ├── static-crosshair.js │ │ └── static-hints.js │ ├── color │ │ ├── line-chart-many-colors.js │ │ └── mini-color-examples.js │ ├── data │ │ └── mini-data-examples.js │ ├── datasets │ │ ├── car-data.json │ │ ├── d3-flare-example.json │ │ ├── energy.json │ │ ├── iris.json │ │ └── old-faithful.json │ ├── examples │ │ ├── candlestick │ │ │ ├── candlestick-example.js │ │ │ ├── candlestick.js │ │ │ └── candlestick.scss │ │ ├── force-directed-graph │ │ │ ├── force-directed-example.js │ │ │ ├── force-directed-graph.js │ │ │ ├── force-directed.scss │ │ │ └── les-mis-data.json │ │ ├── iris-dashboard │ │ │ ├── iris-dashboard.js │ │ │ └── iris-dashboard.scss │ │ ├── responsive-vis │ │ │ ├── responsive-bar-chart.js │ │ │ ├── responsive-scatterplot.js │ │ │ ├── responsive-vis-example.js │ │ │ ├── responsive-vis-utils.js │ │ │ └── responsive-vis.scss │ │ └── streamgraph │ │ │ ├── streamgraph-example.js │ │ │ └── streamgraph-example.scss │ ├── flexible │ │ └── flexible-examples.js │ ├── index.html │ ├── index.js │ ├── interaction │ │ └── interaction-examples.js │ ├── legends │ │ ├── continuous-color.js │ │ ├── continuous-size.js │ │ ├── horizontal-discrete-color.js │ │ ├── horizontal-discrete-custom-palette.js │ │ ├── searchable-discrete-color-hover.js │ │ ├── searchable-discrete-color.js │ │ └── vertical-discrete-color.js │ ├── misc │ │ ├── 2d-dragable-plot.js │ │ ├── animation-example.js │ │ ├── clip-example.js │ │ ├── dragable-chart-example.js │ │ ├── gradient-example.js │ │ ├── label-series-example.js │ │ ├── null-data-example.js │ │ ├── selection-plot-example.js │ │ ├── synced-charts.js │ │ ├── time-chart.js │ │ ├── triangle-example.js │ │ ├── voronoi-line-chart.js │ │ └── zoomable-chart-example.js │ ├── package.json │ ├── parallel-coordinates │ │ ├── animated-parallel-coordinates.js │ │ ├── basic-parallel-coordinates.js │ │ └── brushed-parallel-coordinates.js │ ├── plot │ │ ├── area-chart-elevated.js │ │ ├── area-chart.js │ │ ├── axis-with-turned-labels.js │ │ ├── bar-chart.js │ │ ├── big-base-bar-chart.js │ │ ├── clustered-stacked-bar-chart.js │ │ ├── complex-chart.js │ │ ├── contour-series-example.js │ │ ├── custom-scales.js │ │ ├── custom-svg-all-the-marks.js │ │ ├── custom-svg-example.js │ │ ├── custom-svg-root-level.js │ │ ├── difference-chart.js │ │ ├── faux-radial-scatterplot.js │ │ ├── grid.js │ │ ├── heatmap-chart.js │ │ ├── hex-heatmap.js │ │ ├── hexbin-size-example.js │ │ ├── histogram.js │ │ ├── labeled-heatmap.js │ │ ├── labeled-stacked-vertical-bar-chart.js │ │ ├── line-chart-canvas.js │ │ ├── line-chart-with-style.js │ │ ├── line-chart.js │ │ ├── line-series-canvas-nearest-xy-example.js │ │ ├── linemark-chart.js │ │ ├── mixed-stacked-chart.js │ │ ├── scatterplot-canvas.js │ │ ├── scatterplot.js │ │ ├── stacked-histogram.js │ │ ├── stacked-horizontal-bar-chart.js │ │ ├── stacked-vertical-bar-chart.js │ │ ├── whisker-chart.js │ │ └── width-height-margin.js │ ├── radar-chart │ │ ├── animated-radar-chart.js │ │ ├── basic-radar-chart.js │ │ ├── four-quadrant-radar-chart.js │ │ ├── radar-chart-series-tooltips.js │ │ └── radar-chart-with-tooltips.js │ ├── radial-chart │ │ ├── arc-series-example.js │ │ ├── custom-radius-radial-chart.js │ │ ├── donut-chart.js │ │ ├── gradient-pie.js │ │ └── simple-radial-chart.js │ ├── sankey │ │ ├── basic.js │ │ ├── energy-sankey.js │ │ ├── link-event.js │ │ ├── link-hint.js │ │ └── voronoi.js │ ├── showcase-app.js │ ├── showcase-components │ │ ├── showcase-button.js │ │ ├── showcase-dropdown.js │ │ ├── showcase-utils.js │ │ └── source-linker.js │ ├── showcase-index.js │ ├── showcase-links.js │ ├── showcase-sections │ │ ├── axes-showcase.js │ │ ├── legends-showcase.js │ │ ├── misc-showcase.js │ │ ├── parallel-coordinates-showcase.js │ │ ├── plots-showcase.js │ │ ├── radar-showcase.js │ │ ├── radial-showcase.js │ │ ├── sankeys-showcase.js │ │ ├── sunburst-showcase.js │ │ └── treemap-showcase.js │ ├── showcase-utils.js │ ├── sunbursts │ │ ├── animated-sunburst.js │ │ ├── basic-sunburst.js │ │ ├── clock-example.js │ │ └── sunburst-with-tooltips.js │ ├── treemap │ │ ├── dynamic-treemap.js │ │ └── simple-treemap.js │ └── webpack.config.js └── website │ ├── .storybook │ ├── addons.js │ ├── config.js │ └── storybook.css │ ├── html.config.js │ ├── package.json │ ├── src │ ├── components │ │ └── Hero.js │ ├── config.js │ ├── demos.js │ ├── mdRoutes.js │ └── styles │ │ ├── _variables.scss │ │ └── index.scss │ ├── static │ └── .gitkeep │ ├── storybook │ ├── areaseries-story.js │ ├── axis-story.js │ ├── barseries-story.js │ ├── index.js │ ├── legend-story.js │ ├── lineseries-story.js │ ├── markseries-story.js │ ├── misc-story.js │ ├── radial-story.js │ ├── storybook-data.js │ └── storybook-utils.js │ └── webpack.config.js ├── publish-docs.sh ├── publish.sh ├── remove-refs-to-unpm.pl └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig: http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:react/recommended", 5 | "plugin:react-hooks/recommended", 6 | "plugin:jest/recommended", 7 | "prettier", 8 | "prettier/react" 9 | ], 10 | "parser": "babel-eslint", 11 | "plugins": [ 12 | "react", 13 | "react-hooks", 14 | "prettier", 15 | "babel", 16 | "jest" 17 | ], 18 | "ignorePatterns": [ 19 | "node_modules", 20 | "bundle.js", 21 | "**/dist/", 22 | "**/es/" 23 | ], 24 | "settings":{ 25 | "react":{ 26 | "version": "detect" 27 | } 28 | }, 29 | "env": { 30 | "es6": true, 31 | "browser": true, 32 | "jest": true 33 | }, 34 | "rules": { 35 | "consistent-return": 0, 36 | "max-len": [1, 110, 4], 37 | "max-params": ["error", 6], 38 | "object-curly-spacing": 0, 39 | "babel/object-curly-spacing": 2, 40 | "jest/require-top-level-describe":"error", 41 | "react/prop-types": "off", 42 | "prettier/prettier": "warn" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | yarn.lock -diff 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .sass-cache/ 3 | .nyc_output/ 4 | coverage/ 5 | dist/ 6 | es/ 7 | 8 | npm-debug.log* 9 | yarn-error.log* 10 | .DS_Store 11 | .idea/ 12 | public/ 13 | .vscode/ 14 | 15 | bundle.js 16 | bundle.css 17 | packages/showcase/app.css 18 | 19 | /index.html 20 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "none", 4 | "bracketSpacing": false, 5 | "jsxBracketSameLine": false, 6 | "semi": true, 7 | "parser": "babel" 8 | } 9 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "selector-list-comma-newline-after": "always" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '10' 4 | script: 5 | - npm run lint 6 | - cd packages/react-vis 7 | - npm run cover 8 | after_success: 9 | - npm install -g coveralls 10 | - cat coverage/lcov.info | coveralls 11 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Want to contribute? 2 | 3 | Great! That's why this is an open source project. We use this project in our infrastructure at Uber, and we hope that it's useful to others as well. 4 | 5 | Before you get started, here are some suggestions: 6 | 7 | - Check open issues for what you want. 8 | - If there is an open issue, comment on it. Otherwise open an issue describing your bug or feature with use cases. 9 | - Before undertaking a major change, please discuss this on the issue. We'd hate to see you spend a lot of time working on something that conflicts with other goals or requirements that might not be obvious. 10 | - Write code to fix the problem, then open a pull request with tests and documentation. 11 | - The pull requests gets reviewed and then merged assuming there are no problems. 12 | - A new release version gets cut. 13 | 14 | ## Hints 15 | 16 | Want to make sure your PR gets a speedy review and a quick merge? Here are some tips: 17 | 18 | - Add Tests 19 | - Add documentation about the feature you added 20 | - Make sure you have a clear description of what your PR is about 21 | - Include screenshots 22 | - Add Tests 23 | 24 | ## Releases 25 | 26 | Declaring formal releases requires peer review. 27 | 28 | - A reviewer of a pull request should recommend a new version number (patch, minor or major). 29 | - Once your change is merged feel free to bump the version as recommended by the reviewer. 30 | - A new version number should not be cut without peer review unless done by the project maintainer. 31 | 32 | ### Cutting a new version 33 | 34 | - Get your branch merged on master 35 | - Run `npm version major` or `npm version minor` or `npm version patch` 36 | - `git push origin master --tags` 37 | - If you are a project owner, then `npm publish` 38 | -------------------------------------------------------------------------------- /DEPRECATED.md: -------------------------------------------------------------------------------- 1 | # Deprecated 2 | 3 | Unfortunately, `react-vis` currently has no active maintainers. As such, we have 4 | decided to deprecate the library. This deprecation means that `react-vis` won't 5 | receive any patches or new features. If you're interested to take on ownership, 6 | please discuss on #1303. Anyone is welcome to fork this library. 7 | 8 | We're working on a new charting library that we'll introduce in 2020. We will 9 | keep you folks updated on this repo on the new library! -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Uber Technologies, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | This document will be updated with the middle-term ambition for React-vis. 4 | 5 | ## Current priority 6 | 7 | Right now the priority is to get React-Vis healthy and bug free while addressing as many open issues as possible. 8 | 9 | These efforts are essentially focused towards what we consider the core of react-vis: AbstractSeries, ArcSeries, AreaSeries, AxisUtils, ContinuousColorLegend, ContinuousSizeLegend, Crosshair, DiscreteColorLegend, GridLines, Hint, HorizontalBarSeries, HorizontalGridLines, LabelSeries, LineSeries, MarkSeries, RadialChart, ScaleUtils, SearchableDiscreteColorLegend, VerticalBarSeries, VerticalGridLines, XAxis, XYPlot and YAxis. 10 | 11 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "babelrcRoots": [ 3 | ".", 4 | "./packages/*" 5 | ], 6 | "env": { 7 | "production": { 8 | "presets": [ 9 | "@babel/preset-env", 10 | "@babel/preset-react" 11 | ], 12 | "plugins": [ 13 | "@babel/plugin-proposal-class-properties", 14 | "@babel/plugin-proposal-export-default-from", 15 | "@babel/plugin-proposal-optional-chaining", 16 | "@babel/plugin-proposal-nullish-coalescing-operator" 17 | ] 18 | }, 19 | "development": { 20 | "presets": [ 21 | "@babel/preset-env", 22 | "@babel/preset-react" 23 | ], 24 | "plugins": [ 25 | "@babel/plugin-proposal-class-properties", 26 | "@babel/plugin-proposal-export-default-from", 27 | "@babel/plugin-proposal-optional-chaining", 28 | "@babel/plugin-proposal-nullish-coalescing-operator" 29 | ] 30 | }, 31 | "es": { 32 | "presets": [ 33 | [ 34 | "@babel/preset-env", 35 | { 36 | "modules": false 37 | } 38 | ], 39 | "@babel/preset-react" 40 | ], 41 | "plugins": [ 42 | "@babel/plugin-proposal-class-properties", 43 | "@babel/plugin-proposal-export-default-from", 44 | "@babel/plugin-proposal-optional-chaining", 45 | "@babel/plugin-proposal-nullish-coalescing-operator" 46 | ] 47 | }, 48 | "browser": { 49 | "presets": [ 50 | "@babel/preset-env", 51 | "@babel/preset-react" 52 | ], 53 | "plugins": [ 54 | "@babel/plugin-proposal-class-properties", 55 | "@babel/plugin-proposal-export-default-from", 56 | "@babel/plugin-proposal-optional-chaining", 57 | "@babel/plugin-proposal-nullish-coalescing-operator", 58 | ["@babel/plugin-transform-runtime", 59 | { 60 | "regenerator": true 61 | } 62 | ] 63 | ] 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /docs/animation.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ## Animation 4 | 5 | Animation makes your charts feel physical, it makes them feel alive, shoot it makes them feel l33t. `react-vis` offers a simple portal into the [react-motion](https://github.com/chenglou/react-motion) animation system by exposing a simple animation prop on most components! This prop accepts three types of values: 6 | 7 | *Booleans*: if true is present then `react-vis` will use the `no-wobble` preset (see below) 8 | 9 | *Strings*: react-motion offers several different motion presets that cover most use cases. To access them set your animation prop to one of [noWobble, gentle, wobbly, stiff]. 10 | 11 | 12 | 13 | *Objects*: react-motion expects an object formatting like `{damping: NUMBER, stiffness: NUMBER}`, and if you want to give us an object like that, we will hand it direct to react-motion. You can also pass an object with `{nonAnimatedProps: ['foo', 'bar']}` to prevent those props from being interpolated by d3-interpolator. 14 | 15 | 16 | 17 | The above example has `animation: {damping: 9, stiffness: 300}`! 18 | 19 | **NOTE** In Jsx the presence of the animation prop is enough to trigger an animation, eg 20 | 21 | ```javascript 22 | 30 | ``` 31 | 32 | Will be treated as true. If you want to include the animation prop but not have animation be engaged, you need to use animation={null}! 33 | -------------------------------------------------------------------------------- /docs/assets/gridlines-over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/docs/assets/gridlines-over.png -------------------------------------------------------------------------------- /docs/assets/gridlines-under.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/docs/assets/gridlines-under.png -------------------------------------------------------------------------------- /docs/assets/react-vis-in-codepen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/docs/assets/react-vis-in-codepen.png -------------------------------------------------------------------------------- /docs/assets/react-vis.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/docs/assets/react-vis.gif -------------------------------------------------------------------------------- /docs/assets/your-first-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/docs/assets/your-first-chart.png -------------------------------------------------------------------------------- /docs/clip.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ## Clip 4 | 5 | Depending on the data and domain, sometimes the series in the plot will extend into the axis. This can either be solved with a [Border](border.md), or the elements can be clipped. 6 | 7 | To have the rendered series, clipped you will need to set up a `clipPath` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath)) and tell the series to use it. 8 | 9 | As seen below, the `clipPath` can be created with the `ContentClipArea` component, and its `id` can be referenced by the components that want to be clipped. 10 | 11 | ```jsx 12 | 13 | 14 | 15 | 16 | ``` 17 | 18 | 19 | 20 | ## API Reference 21 | 22 | #### id (optional) 23 | 24 | Type: `String` 25 | 26 | The id to assign to the `clipArea`. If not provided, this will default to `content-area` 27 | -------------------------------------------------------------------------------- /docs/crosshair.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ## Crosshair 4 | 5 | 6 | 7 | `Crosshair` is a tooltip for multiple values at the same time. Its purpose is to combine several values with the similar X coordinate in one tooltip. Crosshair is automatically aligned by the x coordinate depending on what values are passed. 8 | In case if custom representation of crosshair is needed, the component is able to wrap the user's JSX. In this case no CSS is applied to that. Here's a short example: 9 | 10 | ```jsx 11 | 12 |
13 |

Values of crosshair:

14 |

Series 1: {myValues[0].x}

15 |

Series 2: {myValues[1].x}

16 |
17 | 18 | ``` 19 | 20 | #### className (optional) 21 | 22 | Type: `string` 23 | 24 | Provide an additional class name for the series. 25 | 26 | #### itemsFormat (optional) 27 | 28 | Type: `function` 29 | 30 | The function that formats the list of items for the crosshair. Receives the list of data points, should return an array of objects containing `title` and `value` properties. 31 | _Note: please pass custom contents in case if you need different look for the crosshair._ 32 | 33 | #### style (optional) 34 | 35 | Type: `object` 36 | 37 | An object that contains objects of CSS properties with which the component can be entirely re-styled. 38 | As the Crosshair is composed of several elements, it is possible to provide style objects for any and all parts of the tree. See [style](style.md) 39 | Most generally, there are three top level keys: `line`, `title`, and `box`. These in turn lead to their corresponding style objects. 40 | 41 | #### titleFormat (optional) 42 | 43 | Type: `function` 44 | 45 | The function that formats the title for the crosshair. Receives the list of data points, should return an object containing `title` and `value` properties. 46 | _Note: please pass custom contents in case if you need different look for the crosshair._ 47 | 48 | #### values 49 | 50 | Type: `Array` 51 | 52 | The array of data points to show the crosshair at. Crosshair will automatically align to the horizontal position of the points passed there. 53 | -------------------------------------------------------------------------------- /docs/examples/building-things-other-than-charts.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | 5 | [Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/force-directed-graph/force-directed-graph.js) 6 | -------------------------------------------------------------------------------- /docs/examples/extensibility.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | 5 | 6 | ## Extensibility 7 | 8 | react-vis is easily extensible! If we don't have what you want it's easy to make! For instance, the above chart 9 | was made by simply extending abstract series and adding a little sugar. 10 | 11 | [Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/candlestick/candlestick.js) 12 | -------------------------------------------------------------------------------- /docs/examples/iris-dashboard.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | 5 | 6 | Click and drag on the charts! 7 | 8 | The iris data set is a well beloved data set for getting to know various technical topics. 9 | Here we use it to show how to make a small multiples dashboard with react vis. 10 | You can find out more about it at it's [wikipedia page](https://en.wikipedia.org/wiki/Iris_flower_data_set) 11 | 12 | [Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/iris-dashboard/iris-dashboard.js) 13 | -------------------------------------------------------------------------------- /docs/examples/responsive-vis.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | 5 | 6 | This demo explores the concept of "Responsive Data Visualization" (As coined by Nick Rabinowitz). The basic notion is lifted from responsive design: some features work for some screen resolutions, while others do not. Responsive design determines whether or not to use a given feature by consulting an aspect ratio (width by height). Through this notation we are able to create beautiful web experiences that work seamlessly between phones, tablets, and computers. Taking this idea on step farther we introduce a third element into the fray: data size. 7 | 8 | In data visualization, we often need to create applications that work with enormous ranges of sizes of data. Sometimes the data might be small (10 - 100 rows), or it might be gigantic (100k-1M+ row): throughout the entire range it just needs to work. Again, following our cues from responsive design, we note that maybe labels on scatterplots look great when you have under 50 data points, but bad when you have 2000. Checkout Nicks [original demo](http://nrabinowitz.github.io/rdv/) for more details on the theory, as well to see his rad implementation in raw d3. 9 | 10 | [Scatterplot source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/responsive-vis/responsive-scatterplot.js) 11 | 12 | [Barchart source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/responsive-vis/responsive-bar-chart.js) 13 | -------------------------------------------------------------------------------- /docs/examples/showcases/axes-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/legends-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/misc-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/plots-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/radar-chart-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/radial-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/sankeys-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/sunburst-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/showcases/treemaps-showcase.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/examples/stream-graph.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | 4 | 5 | 6 | [Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/streamgraph/streamgraph-example.js) 7 | -------------------------------------------------------------------------------- /docs/getting-started/installing-react-vis.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ### Install the react-vis module 4 | 5 | If you want to use react-vis in your project, add it from the command line: 6 | 7 | ``` 8 | npm install react-vis 9 | ``` 10 | 11 | (or yarn add react-vis - the following will assume that you use npm for concision's sake but you can substitute yarn if installed) 12 | -------------------------------------------------------------------------------- /docs/getting-started/new-react-vis-project.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ### Create a new project with react-vis 4 | 5 | Let's create a new vis app from scratch. 6 | To do this, let's use [create-react-app](https://github.com/facebookincubator/create-react-app), the popular Facebook scaffold. 7 | 8 | If you haven't installed yet, do so: 9 | 10 | ``` 11 | npm install -g create-react-app 12 | ``` 13 | 14 | And now: 15 | ``` 16 | create-react-app my-awesome-vis-app 17 | cd my-awesome-vis-app 18 | npm install react-vis 19 | ``` 20 | 21 | That's it! you are now ready to create amazing charts. 22 | 23 | Let's edit create-react-app's default App.js: 24 | 25 | ```jsx 26 | import React, { Component } from 'react'; 27 | import './App.css'; 28 | import '../node_modules/react-vis/dist/style.css'; 29 | import {XYPlot, LineSeries} from 'react-vis'; 30 | 31 | class App extends Component { 32 | render() { 33 | const data = [ 34 | {x: 0, y: 8}, 35 | {x: 1, y: 5}, 36 | {x: 2, y: 4}, 37 | {x: 3, y: 9}, 38 | {x: 4, y: 1}, 39 | {x: 5, y: 7}, 40 | {x: 6, y: 6}, 41 | {x: 7, y: 3}, 42 | {x: 8, y: 2}, 43 | {x: 9, y: 0} 44 | ]; 45 | return ( 46 |
47 | 48 | 49 | 50 |
51 | ); 52 | } 53 | } 54 | 55 | export default App; 56 | ``` 57 | 58 | and then on the command line interface: 59 | 60 | ``` 61 | npm run start 62 | ``` 63 | 64 | and your chart is in the browser. 65 | 66 | Note that on line 3, I have imported the react-vis stylesheet. There are many ways to do that, and it is actually optional. But apps made with create-react-app will let you import stylesheets directly, so that's a simple way to do so. 67 | -------------------------------------------------------------------------------- /docs/getting-started/react-vis-in-codepen.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ### Jump right in on codepen! 4 | 5 | You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent). 6 | Each published version of react-vis is accessible via [unpkg.com](https://unpkg.com). 7 | 8 | Add react files, and a link to the latest react-vis version - such as https://unpkg.com/react-vis@1.6.7/dist/dist.min.js. 9 | 10 | But you can simply just use that [pen](https://codepen.io/ubervisualization/pen/BZOeZB) and take it from there. 11 | -------------------------------------------------------------------------------- /docs/getting-started/your-first-chart.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ### Your first chart 4 | 5 | We tried to make react-vis syntax as close to the traditional react syntax. You have components which have props and possibly children. 6 | 7 | Every react-vis chart is inside a component called XYPlot, for which a height and a width must be specified: 8 | 9 | ```js 10 | 11 | ``` 12 | 13 | And all the elements of a chart - series, axes, gridlines, etc. are other components, which will be children of XYPlot. 14 | 15 | ```js 16 | const data = [ 17 | {x: 0, y: 8}, 18 | {x: 1, y: 5}, 19 | {x: 2, y: 4}, 20 | {x: 3, y: 9}, 21 | {x: 4, y: 1}, 22 | {x: 5, y: 7}, 23 | {x: 6, y: 6}, 24 | {x: 7, y: 3}, 25 | {x: 8, y: 2}, 26 | {x: 9, y: 0} 27 | ]; 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | And like in traditional react, order matters as components are drawn in order. In the previous example, the gridlines are drawn below the line series, but in this next example, they will be drawn above it. 38 | 39 | ```js 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ``` 48 | 49 | -------------------------------------------------------------------------------- /docs/gradients.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | ## Gradient 4 | 5 | Sometimes it is useful to style our svg components using gradients. The way that this is done in React-vis is by making use of the GradientDefs component, which is a simple wrapper on the svg tag. 6 | 7 | 8 | 9 | 10 | 11 | Simply write gradient commands as you would normally as children of the GradientDefs component, and reference them from your series! 12 | 13 | ```javascript 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 28 | 29 | ``` 30 | 31 | This approach works with both types of gradients (Linear and circular gradients)! The biggest gotcha is that react doesn't play nice the style prop that is normally specified on the gradientTags, so it is best to specify each property directly on the component as above. 32 | 33 | 34 | 35 | 36 | ## Component API Reference 37 | 38 | #### className (optional) 39 | 40 | Type: `string` 41 | 42 | Provide an additional class name for the series. 43 | -------------------------------------------------------------------------------- /docs/presentation.md: -------------------------------------------------------------------------------- 1 | > This library is deprecated. Please see `DEPRECATED.md`. 2 | 3 | # React-vis 4 | 5 | __React-vis__ is a React visualization library. It's been designed with the following principles in mind: 6 | 7 | ## React-friendly: 8 | React-vis components are designed to work just like other React components. They have properties, children and callbacks. They can be composed. If you can work with React components, you can work with React-Vis. 9 | 10 | ## High-level and customizable: 11 | You can create complex charts with a minimum amount of code and sensible defaults, however, you can also customize every aspect of your chart. 12 | 13 | ## Expressive: 14 | React-vis handles a great number of charts, from area charts to treemaps; 15 | 16 | ## Industry-strong: 17 | React-vis was built to support the many internal tools at Uber. 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-vis-master", 3 | "version": "1.12.0", 4 | "license": "MIT", 5 | "author": "Visualization Team ", 6 | "description": "Data visualization library based on React and d3.", 7 | "private": true, 8 | "workspaces": [ 9 | "packages/showcase", 10 | "packages/react-vis", 11 | "packages/website" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/uber-common/react-vis.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/uber-common/react-vis/issues/new", 19 | "email": "visualization@uber.com" 20 | }, 21 | "keywords": [ 22 | "d3", 23 | "react", 24 | "visualization", 25 | "chart", 26 | "es6", 27 | "babel" 28 | ], 29 | "scripts": { 30 | "lint": "eslint .", 31 | "remove-unpm-rfs": "./remove-refs-to-unpm.pl" 32 | }, 33 | "devDependencies": { 34 | "babel-eslint": "^10.1.0", 35 | "eslint": "6.8.0", 36 | "eslint-config-prettier": "^6.11.0", 37 | "eslint-plugin-babel": "^5.3.0", 38 | "eslint-plugin-prettier": "^3.1.3", 39 | "eslint-plugin-react": "^7.20.0", 40 | "eslint-plugin-react-hooks": "^4.0.4", 41 | "husky": "^1.1.2" 42 | }, 43 | "husky": { 44 | "hooks": { 45 | "pre-commit": "npm run remove-unpm-rfs && git add yarn.lock" 46 | } 47 | }, 48 | "volta": { 49 | "node": "14.18.0", 50 | "yarn": "1.22.4" 51 | }, 52 | "resolutions": { 53 | "js-beautify": "1.10.3", 54 | "d3-color": "3.1.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/react-vis/.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["module-resolver", { 4 | "root": ["src"] 5 | }] 6 | ] 7 | } -------------------------------------------------------------------------------- /packages/react-vis/build-browser.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # Browserify doesn't seem to support defining custom entry point for modules in node_modules 3 | # This build script replaces the entry point (the main field of package.json) of d3 libraries to the files 4 | # defined in the unpkg field when building browser bundles. 5 | # The replacement are reverted after the build finishes. 6 | D3_LIB_PATHS=$(ls -d ../../node_modules/d3-*) 7 | 8 | get_key_from_d3_path() { 9 | local KEY=$(echo $1 | sed 's/..\/..\/node_modules\/d3-//') 10 | local KEY=$(echo $KEY | sed 's/-/_/') 11 | echo $KEY 12 | } 13 | 14 | for D3_LIB_PATH in $D3_LIB_PATHS 15 | do 16 | PACKAGE_JSON=$D3_LIB_PATH/package.json 17 | UNPKG=$(jq -r '.unpkg' $PACKAGE_JSON) 18 | if ! [ -z $UNPKG ] && [ $UNPKG != null ] 19 | then 20 | # save the main field 21 | MAIN=$(jq -r '.main' $PACKAGE_JSON) 22 | KEY=$(get_key_from_d3_path $D3_LIB_PATH) 23 | declare var_$KEY=$MAIN 24 | 25 | # modify the main field 26 | MOD=$(jq --arg unpkg $UNPKG '.main = $unpkg' $PACKAGE_JSON) 27 | cat <<< $MOD | jq . > $PACKAGE_JSON 28 | fi 29 | done 30 | 31 | BABEL_ENV=browser browserify src/index.js -t [ babelify --rootMode upward --global ] --standalone reactVis | uglifyjs > dist/dist.min.js 32 | 33 | # set the main fields of package.json back to original 34 | for D3_LIB_PATH in $D3_LIB_PATHS 35 | do 36 | PACKAGE_JSON=$D3_LIB_PATH/package.json 37 | KEY=$(get_key_from_d3_path $D3_LIB_PATH) 38 | MAIN="var_$KEY" 39 | if ! [ -z "${!MAIN}" ] 40 | then 41 | MOD=$(jq --arg var "${!MAIN}" '.main = $var' $PACKAGE_JSON) 42 | cat <<< $MOD | jq . > $PACKAGE_JSON 43 | fi 44 | done 45 | 46 | -------------------------------------------------------------------------------- /packages/react-vis/jest.config.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node*/ 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | transform: { 6 | '^.+\\.js$': path.resolve(__dirname, './jestBabelTransform.js') 7 | }, 8 | setupFilesAfterEnv: ['./jest.setup.js'], 9 | snapshotSerializers: ['enzyme-to-json/serializer'], 10 | transformIgnorePatterns: [ 11 | '/node_modules/(?!(d3-color|d3-scale|d3-interpolate|d3-hierarchy|d3-format|d3-shape|d3-array|d3-contour|d3-path|internmap|d3-time|d3-geo))' 12 | ] 13 | }; 14 | -------------------------------------------------------------------------------- /packages/react-vis/jest.setup.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node*/ 2 | import 'regenerator-runtime/runtime'; 3 | import jsdom from 'jsdom'; 4 | import Enzyme from 'enzyme'; 5 | import Adapter from 'enzyme-adapter-react-16'; 6 | 7 | Enzyme.configure({adapter: new Adapter()}); 8 | 9 | global.document = jsdom.jsdom(''); 10 | global.window = document.defaultView; 11 | Object.keys(document.defaultView).forEach(function mapProperties(property) { 12 | if (typeof global[property] === 'undefined') { 13 | global[property] = document.defaultView[property]; 14 | } 15 | }); 16 | 17 | global.navigator = { 18 | userAgent: 'node.js' 19 | }; 20 | 21 | /* 22 | * Canvas mocks 23 | */ 24 | HTMLCanvasElement.prototype.getContext = () => {}; 25 | -------------------------------------------------------------------------------- /packages/react-vis/jestBabelTransform.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node*/ 2 | const babelJest = require('babel-jest'); 3 | 4 | // see https://github.com/facebook/jest/issues/7359#issuecomment-471509996 5 | module.exports = babelJest.createTransformer({ 6 | rootMode: 'upward' 7 | }); 8 | -------------------------------------------------------------------------------- /packages/react-vis/src/main.scss: -------------------------------------------------------------------------------- 1 | // special tag for using to check if the style file has been imported 2 | .react-vis-magic-css-import-rule { 3 | display: inherit; 4 | } 5 | 6 | @import 'styles/treemap'; 7 | @import 'styles/plot'; 8 | @import 'styles/legends'; 9 | @import 'styles/radial-chart'; 10 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/axis/x-axis.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import PropTypes from 'prop-types'; 24 | 25 | import {ORIENTATION} from 'utils/axis-utils'; 26 | 27 | import Axis from './axis'; 28 | 29 | const {TOP, BOTTOM} = ORIENTATION; 30 | 31 | const propTypes = { 32 | ...Axis.propTypes, 33 | orientation: PropTypes.oneOf([TOP, BOTTOM]) 34 | }; 35 | 36 | const defaultProps = { 37 | orientation: BOTTOM, 38 | attr: 'x', 39 | attrAxis: 'y' 40 | }; 41 | 42 | function XAxis(props) { 43 | return ; 44 | } 45 | 46 | XAxis.displayName = 'XAxis'; 47 | XAxis.propTypes = propTypes; 48 | XAxis.defaultProps = defaultProps; 49 | XAxis.requiresSVG = true; 50 | 51 | export default XAxis; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/axis/y-axis.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import PropTypes from 'prop-types'; 24 | 25 | import {ORIENTATION} from 'utils/axis-utils'; 26 | 27 | import Axis from './axis'; 28 | 29 | const {LEFT, RIGHT} = ORIENTATION; 30 | 31 | const propTypes = { 32 | ...Axis.propTypes, 33 | orientation: PropTypes.oneOf([LEFT, RIGHT]) 34 | }; 35 | 36 | const defaultProps = { 37 | orientation: LEFT, 38 | attr: 'y', 39 | attrAxis: 'x' 40 | }; 41 | 42 | function YAxis(props) { 43 | return ; 44 | } 45 | 46 | YAxis.displayName = 'YAxis'; 47 | YAxis.propTypes = propTypes; 48 | YAxis.defaultProps = defaultProps; 49 | YAxis.requiresSVG = true; 50 | 51 | export default YAxis; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/content-clip-path.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function ContentClipPath(props) { 4 | const {id = 'content-area', innerWidth, innerHeight} = props; 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | ContentClipPath.requiresSVG = true; 15 | ContentClipPath.displayName = 'ContentClipPath'; 16 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/gradient-defs.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | import PropTypes from 'prop-types'; 23 | 24 | import {getCombinedClassName} from 'utils/styling-utils'; 25 | 26 | const predefinedClassName = 'rv-gradient-defs'; 27 | 28 | function GradientDefs(props) { 29 | const {className} = props; 30 | return ( 31 | 32 | {props.children} 33 | 34 | ); 35 | } 36 | 37 | GradientDefs.displayName = 'GradientDefs'; 38 | GradientDefs.requiresSVG = true; 39 | GradientDefs.propTypes = { 40 | className: PropTypes.string 41 | }; 42 | GradientDefs.defaultProps = { 43 | className: '' 44 | }; 45 | 46 | export default GradientDefs; 47 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/horizontal-grid-lines.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import PropTypes from 'prop-types'; 24 | 25 | import {DIRECTION} from 'utils/axis-utils'; 26 | import GridLines from 'plot/grid-lines'; 27 | 28 | const {HORIZONTAL} = DIRECTION; 29 | 30 | const propTypes = { 31 | ...GridLines.propTypes, 32 | direction: PropTypes.oneOf([HORIZONTAL]) 33 | }; 34 | 35 | const defaultProps = { 36 | direction: HORIZONTAL, 37 | attr: 'y' 38 | }; 39 | 40 | function HorizontalGridLines(props) { 41 | return ; 42 | } 43 | 44 | HorizontalGridLines.displayName = 'HorizontalGridLines'; 45 | HorizontalGridLines.propTypes = propTypes; 46 | HorizontalGridLines.defaultProps = defaultProps; 47 | HorizontalGridLines.requiresSVG = true; 48 | 49 | export default HorizontalGridLines; 50 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/horizontal-bar-series-canvas.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import AbstractSeries from './abstract-series'; 22 | import BarSeries from './bar-series-canvas'; 23 | 24 | class HorizontalBarSeriesCanvas extends AbstractSeries { 25 | static get requiresSVG() { 26 | return false; 27 | } 28 | 29 | static get isCanvas() { 30 | return true; 31 | } 32 | 33 | static getParentConfig(attr) { 34 | const isDomainAdjustmentNeeded = attr === 'y'; 35 | const zeroBaseValue = attr === 'x'; 36 | return { 37 | isDomainAdjustmentNeeded, 38 | zeroBaseValue 39 | }; 40 | } 41 | 42 | static renderLayer(props, ctx) { 43 | BarSeries.renderLayer( 44 | { 45 | ...props, 46 | linePosAttr: 'y', 47 | valuePosAttr: 'x', 48 | lineSizeAttr: 'height', 49 | valueSizeAttr: 'width' 50 | }, 51 | ctx 52 | ); 53 | } 54 | 55 | render() { 56 | return null; 57 | } 58 | } 59 | 60 | HorizontalBarSeriesCanvas.displayName = 'HorizontalBarSeriesCanvas'; 61 | HorizontalBarSeriesCanvas.propTypes = { 62 | ...AbstractSeries.propTypes 63 | }; 64 | 65 | export default HorizontalBarSeriesCanvas; 66 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/horizontal-bar-series.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import AbstractSeries from './abstract-series'; 24 | import BarSeries from './bar-series'; 25 | 26 | class HorizontalBarSeries extends AbstractSeries { 27 | static getParentConfig(attr) { 28 | const isDomainAdjustmentNeeded = attr === 'y'; 29 | const zeroBaseValue = attr === 'x'; 30 | return { 31 | isDomainAdjustmentNeeded, 32 | zeroBaseValue 33 | }; 34 | } 35 | 36 | render() { 37 | return ( 38 | 45 | ); 46 | } 47 | } 48 | 49 | HorizontalBarSeries.displayName = 'HorizontalBarSeries'; 50 | 51 | export default HorizontalBarSeries; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/horizontal-rect-series-canvas.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import AbstractSeries from './abstract-series'; 22 | import RectSeries from './rect-series-canvas'; 23 | 24 | class HorizontalRectSeriesCanvas extends AbstractSeries { 25 | static get requiresSVG() { 26 | return false; 27 | } 28 | 29 | static get isCanvas() { 30 | return true; 31 | } 32 | 33 | static getParentConfig(attr) { 34 | const isDomainAdjustmentNeeded = false; 35 | const zeroBaseValue = attr === 'x'; 36 | return { 37 | isDomainAdjustmentNeeded, 38 | zeroBaseValue 39 | }; 40 | } 41 | 42 | static renderLayer(props, ctx) { 43 | RectSeries.renderLayer( 44 | { 45 | ...props, 46 | linePosAttr: 'y', 47 | valuePosAttr: 'x', 48 | lineSizeAttr: 'height', 49 | valueSizeAttr: 'width' 50 | }, 51 | ctx 52 | ); 53 | } 54 | 55 | render() { 56 | return null; 57 | } 58 | } 59 | 60 | HorizontalRectSeriesCanvas.displayName = 'HorizontalRectSeriesCanvas'; 61 | HorizontalRectSeriesCanvas.propTypes = { 62 | ...AbstractSeries.propTypes 63 | }; 64 | 65 | export default HorizontalRectSeriesCanvas; 66 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/horizontal-rect-series.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import AbstractSeries from './abstract-series'; 24 | import RectSeries from './rect-series'; 25 | 26 | class HorizontalRectSeries extends AbstractSeries { 27 | static getParentConfig(attr) { 28 | const isDomainAdjustmentNeeded = false; 29 | const zeroBaseValue = attr === 'x'; 30 | return { 31 | isDomainAdjustmentNeeded, 32 | zeroBaseValue 33 | }; 34 | } 35 | 36 | render() { 37 | return ( 38 | 45 | ); 46 | } 47 | } 48 | 49 | HorizontalRectSeries.displayName = 'HorizontalRectSeries'; 50 | 51 | export default HorizontalRectSeries; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/line-mark-series-canvas.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import AbstractSeries from './abstract-series'; 22 | import MarkSeriesCanvas from './mark-series-canvas'; 23 | import LineSeriesCanvas from './line-series-canvas'; 24 | 25 | class LineMarkSeriesCanvas extends AbstractSeries { 26 | static get requiresSVG() { 27 | return false; 28 | } 29 | 30 | static get isCanvas() { 31 | return true; 32 | } 33 | 34 | static renderLayer(props, ctx) { 35 | LineSeriesCanvas.renderLayer(props, ctx); 36 | MarkSeriesCanvas.renderLayer(props, ctx); 37 | } 38 | 39 | render() { 40 | return null; 41 | } 42 | } 43 | 44 | LineMarkSeriesCanvas.displayName = 'LineMarkSeriesCanvas'; 45 | LineMarkSeriesCanvas.propTypes = { 46 | ...AbstractSeries.propTypes 47 | }; 48 | 49 | export default LineMarkSeriesCanvas; 50 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/line-mark-series.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | import PropTypes from 'prop-types'; 23 | 24 | import AbstractSeries from './abstract-series'; 25 | import LineSeries from './line-series'; 26 | import MarkSeries from './mark-series'; 27 | 28 | const propTypes = { 29 | ...LineSeries.propTypes, 30 | lineStyle: PropTypes.object, 31 | markStyle: PropTypes.object 32 | }; 33 | 34 | class LineMarkSeries extends AbstractSeries { 35 | static get defaultProps() { 36 | return { 37 | ...LineSeries.defaultProps, 38 | lineStyle: {}, 39 | markStyle: {} 40 | }; 41 | } 42 | 43 | render() { 44 | const {lineStyle, markStyle, style} = this.props; 45 | return ( 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | } 53 | 54 | LineMarkSeries.displayName = 'LineMarkSeries'; 55 | LineMarkSeries.propTypes = propTypes; 56 | 57 | export default LineMarkSeries; 58 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/vertical-bar-series-canvas.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import AbstractSeries from './abstract-series'; 22 | import BarSeries from './bar-series-canvas'; 23 | 24 | class HorizontalBarSeriesCanvas extends AbstractSeries { 25 | static get requiresSVG() { 26 | return false; 27 | } 28 | 29 | static get isCanvas() { 30 | return true; 31 | } 32 | 33 | static getParentConfig(attr) { 34 | const isDomainAdjustmentNeeded = attr === 'x'; 35 | const zeroBaseValue = attr === 'y'; 36 | return { 37 | isDomainAdjustmentNeeded, 38 | zeroBaseValue 39 | }; 40 | } 41 | 42 | static renderLayer(props, ctx) { 43 | BarSeries.renderLayer( 44 | { 45 | ...props, 46 | linePosAttr: 'x', 47 | valuePosAttr: 'y', 48 | lineSizeAttr: 'width', 49 | valueSizeAttr: 'height' 50 | }, 51 | ctx 52 | ); 53 | } 54 | 55 | render() { 56 | return null; 57 | } 58 | } 59 | 60 | HorizontalBarSeriesCanvas.displayName = 'HorizontalBarSeriesCanvas'; 61 | HorizontalBarSeriesCanvas.propTypes = { 62 | ...AbstractSeries.propTypes 63 | }; 64 | 65 | export default HorizontalBarSeriesCanvas; 66 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/vertical-bar-series.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import AbstractSeries from './abstract-series'; 24 | import BarSeries from './bar-series'; 25 | 26 | class VerticalBarSeries extends AbstractSeries { 27 | static getParentConfig(attr) { 28 | const isDomainAdjustmentNeeded = attr === 'x'; 29 | const zeroBaseValue = attr === 'y'; 30 | return { 31 | isDomainAdjustmentNeeded, 32 | zeroBaseValue 33 | }; 34 | } 35 | 36 | render() { 37 | return ( 38 | 45 | ); 46 | } 47 | } 48 | 49 | VerticalBarSeries.displayName = 'VerticalBarSeries'; 50 | 51 | export default VerticalBarSeries; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/vertical-rect-series-canvas.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import AbstractSeries from './abstract-series'; 22 | import RectSeries from './rect-series-canvas'; 23 | 24 | class HorizontalRectSeriesCanvas extends AbstractSeries { 25 | static get requiresSVG() { 26 | return false; 27 | } 28 | 29 | static get isCanvas() { 30 | return true; 31 | } 32 | 33 | static getParentConfig(attr) { 34 | const isDomainAdjustmentNeeded = false; 35 | const zeroBaseValue = attr === 'y'; 36 | return { 37 | isDomainAdjustmentNeeded, 38 | zeroBaseValue 39 | }; 40 | } 41 | 42 | static renderLayer(props, ctx) { 43 | RectSeries.renderLayer( 44 | { 45 | ...props, 46 | linePosAttr: 'x', 47 | valuePosAttr: 'y', 48 | lineSizeAttr: 'width', 49 | valueSizeAttr: 'height' 50 | }, 51 | ctx 52 | ); 53 | } 54 | 55 | render() { 56 | return null; 57 | } 58 | } 59 | 60 | HorizontalRectSeriesCanvas.displayName = 'HorizontalRectSeriesCanvas'; 61 | HorizontalRectSeriesCanvas.propTypes = { 62 | ...AbstractSeries.propTypes 63 | }; 64 | 65 | export default HorizontalRectSeriesCanvas; 66 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/series/vertical-rect-series.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import AbstractSeries from './abstract-series'; 24 | import RectSeries from './rect-series'; 25 | 26 | class VerticalRectSeries extends AbstractSeries { 27 | static getParentConfig(attr) { 28 | const isDomainAdjustmentNeeded = false; 29 | const zeroBaseValue = attr === 'y'; 30 | return { 31 | isDomainAdjustmentNeeded, 32 | zeroBaseValue 33 | }; 34 | } 35 | 36 | render() { 37 | return ( 38 | 45 | ); 46 | } 47 | } 48 | 49 | VerticalRectSeries.displayName = 'VerticalRectSeries'; 50 | 51 | export default VerticalRectSeries; 52 | -------------------------------------------------------------------------------- /packages/react-vis/src/plot/vertical-grid-lines.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import PropTypes from 'prop-types'; 24 | 25 | import GridLines from 'plot/grid-lines'; 26 | import {DIRECTION} from 'utils/axis-utils'; 27 | 28 | const {VERTICAL} = DIRECTION; 29 | 30 | const propTypes = { 31 | ...GridLines.propTypes, 32 | direction: PropTypes.oneOf([VERTICAL]) 33 | }; 34 | 35 | const defaultProps = { 36 | direction: VERTICAL, 37 | attr: 'x' 38 | }; 39 | 40 | function VerticalGridLines(props) { 41 | return ; 42 | } 43 | 44 | VerticalGridLines.displayName = 'VerticalGridLines'; 45 | VerticalGridLines.propTypes = propTypes; 46 | VerticalGridLines.defaultProps = defaultProps; 47 | VerticalGridLines.requiresSVG = true; 48 | 49 | export default VerticalGridLines; 50 | -------------------------------------------------------------------------------- /packages/react-vis/src/styles/radial-chart.scss: -------------------------------------------------------------------------------- 1 | .rv-radial-chart { 2 | 3 | .rv-xy-plot__series--label { 4 | pointer-events: none; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vis/src/styles/treemap.scss: -------------------------------------------------------------------------------- 1 | .rv-treemap { 2 | font-size: 12px; 3 | position: relative; 4 | } 5 | 6 | .rv-treemap__leaf { 7 | overflow: hidden; 8 | position: absolute; 9 | } 10 | 11 | .rv-treemap__leaf--circle { 12 | align-items: center; 13 | border-radius: 100%; 14 | display: flex; 15 | justify-content: center; 16 | } 17 | 18 | .rv-treemap__leaf__content { 19 | overflow: hidden; 20 | padding: 10px; 21 | text-overflow: ellipsis; 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vis/src/theme.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | export const DISCRETE_COLOR_RANGE = [ 22 | '#12939A', 23 | '#79C7E3', 24 | '#1A3177', 25 | '#FF9833', 26 | '#EF5D28' 27 | ]; 28 | 29 | export const EXTENDED_DISCRETE_COLOR_RANGE = [ 30 | '#19CDD7', 31 | '#DDB27C', 32 | '#88572C', 33 | '#FF991F', 34 | '#F15C17', 35 | '#223F9A', 36 | '#DA70BF', 37 | '#125C77', 38 | '#4DC19C', 39 | '#776E57', 40 | '#12939A', 41 | '#17B8BE', 42 | '#F6D18A', 43 | '#B7885E', 44 | '#FFCB99', 45 | '#F89570', 46 | '#829AE3', 47 | '#E79FD5', 48 | '#1E96BE', 49 | '#89DAC1', 50 | '#B3AD9E' 51 | ]; 52 | 53 | export const CONTINUOUS_COLOR_RANGE = ['#EF5D28', '#FF9833']; 54 | 55 | export const SIZE_RANGE = [1, 10]; 56 | 57 | export const OPACITY_RANGE = [0.1, 1]; 58 | export const OPACITY_TYPE = 'literal'; 59 | export const DEFAULT_OPACITY = 1; 60 | 61 | export const DEFAULT_SIZE = 5; 62 | 63 | export const DEFAULT_COLOR = DISCRETE_COLOR_RANGE[0]; 64 | 65 | export const DEFAULT_TICK_SIZE = 7; 66 | -------------------------------------------------------------------------------- /packages/react-vis/src/utils/styling-utils.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2019 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | /** 22 | * Generates interpolated class names signature based on multiple class names 23 | * ignoring the falsy and non-string values 24 | * @param {...string} classNames CSS class signatures. 25 | * @returns {string} Interpolated string containing all valid class names. 26 | */ 27 | 28 | export function getCombinedClassName(...classNames) { 29 | return classNames.filter(cn => cn && typeof cn === 'string').join(' '); 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-vis/tests/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "max-len": "off", 4 | "react/jsx-key": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import HorizontalGrid from 'plot/horizontal-grid-lines'; 22 | import VerticalGrid from 'plot/vertical-grid-lines'; 23 | import XAxisBottom from 'plot/axis/x-axis'; 24 | import YAxisLeft from 'plot/axis/y-axis'; 25 | 26 | import {testRenderWithProps} from './test-utils'; 27 | 28 | const XYPLOT_XAXIS_PROPS = { 29 | xRange: [0, 1], 30 | xDomain: [0, 1], 31 | xType: 'linear', 32 | width: 100, 33 | height: 100, 34 | top: 0, 35 | left: 0 36 | }; 37 | 38 | const XYPLOT_YAXIS_PROPS = { 39 | yRange: [0, 1], 40 | yDomain: [0, 1], 41 | yType: 'linear', 42 | width: 100, 43 | height: 100, 44 | top: 0, 45 | left: 0 46 | }; 47 | 48 | testRenderWithProps(HorizontalGrid, XYPLOT_YAXIS_PROPS); 49 | testRenderWithProps(VerticalGrid, XYPLOT_XAXIS_PROPS); 50 | testRenderWithProps(XAxisBottom, XYPLOT_XAXIS_PROPS); 51 | testRenderWithProps(YAxisLeft, XYPLOT_YAXIS_PROPS); 52 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/animation.test.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | import {mount} from 'enzyme'; 23 | 24 | import Animation from 'animation'; 25 | import Axis from 'plot/axis/axis'; 26 | import AxisTicks from 'plot/axis/axis-ticks'; 27 | import VerticalBarSeries from 'plot/series/vertical-bar-series'; 28 | import XYPlot from 'plot/xy-plot'; 29 | 30 | describe('Animation', () => { 31 | test('interpolates xDomain when specified', () => { 32 | const wrapper = mount( 33 | 34 | 35 | 40 | 41 | ); 42 | 43 | const renderedAnimationWrapper = wrapper.find(Animation); 44 | 45 | expect(renderedAnimationWrapper.find(AxisTicks).prop('xDomain')).toEqual([ 46 | 'Black' 47 | ]); 48 | }); 49 | }); 50 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/arc-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import ArcSeries from 'plot/series/arc-series'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import ArcSeriesExample from '../../../showcase/radial-chart/arc-series-example'; 6 | 7 | testRenderWithProps(ArcSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 8 | 9 | describe('ArcSeries', () => { 10 | test('Showcase Example - ArcSeriesExample', () => { 11 | const $ = mount( 12 | 13 | 14 | 15 | ); 16 | expect($.text()).toBe('UPDATE−4−2024−4−2024'); 17 | // multiplied by two to account for shadow listeners 18 | expect($.find('.rv-xy-plot__series--arc').length).toBe(4); 19 | expect($.find('.rv-xy-plot__series--arc path').length).toBe(2 * 8); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/area-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | 4 | import XYPlot from 'plot/xy-plot'; 5 | import AreaSeries from 'plot/series/area-series'; 6 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 7 | import AreaChartElevated from '../../../showcase/plot/area-chart-elevated'; 8 | import AreaChart from '../../../showcase/plot/area-chart'; 9 | 10 | testRenderWithProps(AreaSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 11 | 12 | const AREA_PROPS = { 13 | className: 'area-chart-example', 14 | color: '#12939a', 15 | data: [ 16 | {x: 1, y: 5, y0: 6}, 17 | {x: 2, y: 20, y0: 11}, 18 | {x: 3, y: 10, y0: 9} 19 | ] 20 | }; 21 | 22 | describe('AreaSeries', () => { 23 | test('basic rendering', () => { 24 | const $ = mount( 25 | 26 | 27 | 28 | ); 29 | expect($.find('.rv-xy-plot__series').length).toBe(1); 30 | expect($.find('path.rv-xy-plot__series').length).toBe(1); 31 | expect($.find('path.area-chart-example').length).toBe(1); 32 | 33 | $.setProps({children: }); 34 | expect($.find('.rv-xy-plot__series').length).toBe(0); 35 | expect($.find('.rv-xy-plot__series path').length).toBe(0); 36 | expect($.find('.area-chart-example').length).toBe(0); 37 | }); 38 | 39 | test('AreaSeries: Showcase Example - AreaChart', () => { 40 | const $ = mount(); 41 | expect($.find('.rv-xy-plot__series').length).toBe(1); 42 | expect($.find('path.rv-xy-plot__series').length).toBe(1); 43 | expect($.find('path.area-series-example').length).toBe(1); 44 | }); 45 | 46 | test('AreaSeries: Showcase Example - AreaChartElevated', () => { 47 | const $ = mount(); 48 | expect($.find('.rv-xy-plot__series').length).toBe(5); 49 | expect($.find('path.rv-xy-plot__series').length).toBe(3); 50 | expect($.find('path.area-elevated-series-1').length).toBe(1); 51 | expect($.find('path.area-elevated-series-2').length).toBe(1); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/axis-tick-format.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | 4 | import CustomAxisTickElement from '../../../showcase/axes/custom-axis-tick-element'; 5 | 6 | describe('Axis Format', () => { 7 | test('correctly renders return values from tickFormat', () => { 8 | const element = mount(); 9 | const ticks = element.find( 10 | '.rv-xy-plot__axis--horizontal .rv-xy-plot__axis__tick' 11 | ); 12 | expect(ticks.map(tick => tick.find('text').length)).toEqual([ 13 | 0, 14 | 0, 15 | 1, 16 | 0, 17 | 1 18 | ]); 19 | expect( 20 | ticks 21 | .at(2) 22 | .find('text') 23 | .find('tspan').length 24 | ).toBe(1); 25 | expect( 26 | ticks 27 | .at(4) 28 | .find('text') 29 | .text() 30 | ).toBe('Label'); 31 | }); 32 | 33 | test('passes props to custom element', () => { 34 | const CustomLabel = props => { 35 | expect(Object.keys(props).sort()).toEqual([ 36 | 'containerWidth', 37 | 'dy', 38 | 'textAnchor', 39 | 'tickCount', 40 | 'transform' 41 | ]); 42 | return Custom Label; 43 | }; 44 | const element = mount(); 45 | element.setState({ 46 | data: [...element.state().data, {x: 5, y: 600, label: }] 47 | }); 48 | expect( 49 | element 50 | .find('.rv-xy-plot__axis--horizontal .rv-xy-plot__axis__tick') 51 | .at(5) 52 | .find('text') 53 | .text() 54 | ).toBe('Custom Label'); 55 | }); 56 | }); 57 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/axis-title.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import AxisTitle from 'plot/axis/axis-title'; 4 | import {ORIENTATION} from 'utils/axis-utils'; 5 | 6 | const {LEFT, RIGHT, TOP, BOTTOM} = ORIENTATION; 7 | 8 | const baseProps = { 9 | width: 400, 10 | height: 400, 11 | title: 'Title' 12 | }; 13 | 14 | describe('AxisTitle', () => { 15 | test('horizontal bottom axis title', () => { 16 | const props = Object.assign({}, baseProps, { 17 | orientation: BOTTOM 18 | }); 19 | const $ = mount( 20 | 21 | 22 | 23 | ); 24 | const innerGroupHtml = $.find('g > g').html(); 25 | expect(innerGroupHtml.includes('text-anchor: end')).toBeTruthy(); 26 | expect($.find('text').text()).toBe(baseProps.title); 27 | }); 28 | 29 | test('horizontal top axis title', () => { 30 | const props = Object.assign({}, baseProps, { 31 | orientation: TOP, 32 | position: 'start' 33 | }); 34 | const $ = mount( 35 | 36 | 37 | 38 | ); 39 | const innerGroupHtml = $.find('g > g').html(); 40 | expect(innerGroupHtml.includes('text-anchor: start')).toBeTruthy(); 41 | expect($.find('text').text()).toBe(baseProps.title); 42 | }); 43 | 44 | test('vertical left title', () => { 45 | const props = Object.assign({}, baseProps, { 46 | orientation: LEFT 47 | }); 48 | const $ = mount( 49 | 50 | 51 | 52 | ); 53 | const innerGroupHtml = $.find('g > g').html(); 54 | expect(innerGroupHtml.includes('text-anchor: end')).toBeTruthy(); 55 | expect($.find('text').text()).toBe(baseProps.title); 56 | }); 57 | 58 | test('vertical right title', () => { 59 | const props = Object.assign({}, baseProps, { 60 | orientation: RIGHT, 61 | position: 'start' 62 | }); 63 | const $ = mount( 64 | 65 | 66 | 67 | ); 68 | const innerGroupHtml = $.find('g > g').html(); 69 | expect(innerGroupHtml.includes('text-anchor: start')).toBeTruthy(); 70 | expect($.find('text').text()).toBe(baseProps.title); 71 | }); 72 | }); 73 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/borders.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import Borders from 'plot/borders'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import GradientExample from '../../../showcase/misc/gradient-example'; 6 | 7 | testRenderWithProps( 8 | Borders, 9 | { 10 | ...GENERIC_XYPLOT_SERIES_PROPS, 11 | marginLeft: 0, 12 | marginRight: 0, 13 | innerWidth: 100, 14 | marginTop: 0, 15 | marginBottom: 0, 16 | innerHeight: 100 17 | }, 18 | true 19 | ); 20 | 21 | describe('Borders', () => { 22 | test('GradientExample', () => { 23 | const $ = mount(); 24 | expect($.find('.rv-xy-plot__borders').length).toBe(1); 25 | expect($.find('.rv-xy-plot__borders rect').length).toBe(4); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/canvas-component.test.js: -------------------------------------------------------------------------------- 1 | import HorizontalBarSeriesCanvas from 'plot/series/horizontal-bar-series-canvas'; 2 | import VerticalBarSeriesCanvas from 'plot/series/vertical-bar-series-canvas'; 3 | import HorizontalRectSeriesCanvas from 'plot/series/horizontal-rect-series-canvas'; 4 | import VerticalRectSeriesCanvas from 'plot/series/vertical-rect-series-canvas'; 5 | import RectSeriesCanvas from 'plot/series/rect-series-canvas'; 6 | import BarSeriesCanvas from 'plot/series/bar-series-canvas'; 7 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 8 | 9 | testRenderWithProps(HorizontalBarSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 10 | testRenderWithProps(VerticalBarSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 11 | testRenderWithProps(HorizontalRectSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 12 | testRenderWithProps(VerticalRectSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 13 | testRenderWithProps(RectSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 14 | testRenderWithProps(BarSeriesCanvas, GENERIC_XYPLOT_SERIES_PROPS); 15 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/circular-grid-lines.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import CircularGridLines from 'plot/circular-grid-lines'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import FauxRadialScatterplot from '../../../showcase/plot/faux-radial-scatterplot'; 6 | 7 | describe('CircularGridLines', () => { 8 | testRenderWithProps(CircularGridLines, GENERIC_XYPLOT_SERIES_PROPS, true); 9 | 10 | test('Showcase Example - FauxRadialScatterplot', () => { 11 | const $ = mount(); 12 | expect($.text()).toBe('−3−2−10123−3−2−10123'); 13 | expect($.find('.rv-xy-plot__circular-grid-lines__line').length).toBe(7); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/contour-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import ContourSeries from 'plot/series/contour-series'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import ContourSeriesExample from '../../../showcase/plot/contour-series-example'; 6 | 7 | describe('ContourSeries', () => { 8 | testRenderWithProps(ContourSeries, GENERIC_XYPLOT_SERIES_PROPS); 9 | 10 | test('Showcase Example - ContourSeriesExample', () => { 11 | const $ = mount(); 12 | expect($.text()).toBe('4045505560657075808590951002345678UPDATE'); 13 | expect($.find('.rv-xy-plot__series--contour').length).toBe(1); 14 | expect($.find('.rv-xy-plot__series--contour-line').length).toBe(17); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/crosshair.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | 4 | import DynamicCrosshair from '../../../showcase/axes/dynamic-crosshair'; 5 | 6 | describe('Crosshair', () => { 7 | test('Dynamic Crosshair - Example', () => { 8 | const $ = mount(); 9 | simulateMouseMove(100); 10 | expect($.find('.rv-crosshair').hasClass('test-class-name')).toBe(true); 11 | 12 | function simulateMouseMove(x) { 13 | $.find('.rv-xy-plot__inner').simulate('mousemove', { 14 | nativeEvent: {clientX: x, clientY: 150} 15 | }); 16 | } 17 | }); 18 | 19 | test('Dynamic Crosshair - Touch Example', () => { 20 | const $ = mount(); 21 | simulateMouseMove(100); 22 | expect($.find('.rv-crosshair').hasClass('test-class-name')).toBe(true); 23 | 24 | function simulateMouseMove(x) { 25 | $.find('.rv-xy-plot__inner').simulate('touchmove', { 26 | nativeEvent: {type: 'touchmove', touches: [{pageX: x, pageY: 150}]} 27 | }); 28 | } 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/data-article.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | 4 | import {MiniCharts} from '../../../showcase/data/mini-data-examples'; 5 | 6 | describe('Scales and data examples', () => { 7 | test('MiniCharts', () => { 8 | const $ = mount(); 9 | expect($.find('.rv-xy-plot').length).toBe(3); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/decorative-axis.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import DecorativeAxis from 'plot/axis/decorative-axis'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import DecorativeAxisCrissCross from '../../../showcase/axes/decorative-axes-criss-cross'; 6 | import ParallelCoordinatesExample from '../../../showcase/axes/parallel-coordinates-example'; 7 | 8 | testRenderWithProps( 9 | DecorativeAxis, 10 | { 11 | ...GENERIC_XYPLOT_SERIES_PROPS, 12 | axisStart: {x: 0, y: 1}, 13 | axisEnd: {x: 0, y: 1}, 14 | axisDomain: [0, 1] 15 | }, 16 | true 17 | ); 18 | 19 | describe('DecorativeAxis', () => { 20 | test('Showcase Example - DecorativeAxisCrissCross', () => { 21 | const $ = mount(); 22 | expect($.text()).toBe( 23 | '−101.01223344556677889100¡1000!¡990!¡980!¡970!¡960!¡950!¡940!¡930!¡920!¡910!¡900!' 24 | ); 25 | expect($.find('.rv-xy-manipulable-axis').length).toBe(2); 26 | expect($.find('.rv-xy-plot__axis__tick__line').length).toBe(22); 27 | expect($.find('.rv-xy-plot__axis__tick__text').length).toBe(22); 28 | }); 29 | 30 | test('Showcase Example - ParallelCoordinatesExample', () => { 31 | const $ = mount(); 32 | expect($.text()).toBe( 33 | '0.04.79.314192328333742473.03.54.04.55.05.56.06.57.07.58.0681101501802202603003403804204600.023466992120140160180210230160020002300270030003400370041004400480051008.09.71113151618202123257071727475767778808182' 34 | ); 35 | expect($.find('.rv-xy-manipulable-axis').length).toBe(7); 36 | expect($.find('.rv-xy-plot__axis__tick__line').length).toBe(77); 37 | expect($.find('.rv-xy-plot__axis__tick__text').length).toBe(77); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/gradient.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import GradientDefs from 'plot/gradient-defs'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import TriangleExample from '../../../showcase/misc/triangle-example'; 6 | import GradientExample from '../../../showcase/misc/gradient-example'; 7 | 8 | describe('GradientDefs', () => { 9 | testRenderWithProps(GradientDefs, GENERIC_XYPLOT_SERIES_PROPS, true); 10 | 11 | test('TriangleExample', () => { 12 | const $ = mount(); 13 | expect($.find('.rv-xy-plot__series--polygon').length).toBe(121); 14 | expect($.find('.rv-gradient-defs').length).toBe(1); 15 | expect($.find('#grad1').length).toBe(1); 16 | }); 17 | 18 | test('GradientExample', () => { 19 | const $ = mount(); 20 | expect($.find('.rv-xy-plot__series--line').length).toBe(2); 21 | expect($.find('.rv-gradient-defs').length).toBe(1); 22 | expect($.find('#CoolGradient').length).toBe(1); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/grid-lines.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {shallow} from 'enzyme'; 3 | import XYPlot from 'plot/xy-plot'; 4 | import LineSeries from 'plot/series/line-series'; 5 | import HorizontalGridLines from 'plot/horizontal-grid-lines'; 6 | import VerticalGridLines from 'plot/vertical-grid-lines'; 7 | 8 | describe('GridLines', () => { 9 | test('HorizontalGridLines', () => { 10 | const wrapper = shallow( 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | expect( 18 | wrapper 19 | .find(HorizontalGridLines) 20 | .at(0) 21 | .hasClass('test-class-name') 22 | ).toBe(true); 23 | }); 24 | 25 | test('VerticalGridLines', () => { 26 | const wrapper = shallow( 27 | 28 | 29 | 30 | 31 | ); 32 | 33 | expect( 34 | wrapper 35 | .find(VerticalGridLines) 36 | .at(0) 37 | .hasClass('test-class-name') 38 | ).toBe(true); 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/hints.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {shallow} from 'enzyme'; 3 | import Hint from 'plot/hint'; 4 | 5 | describe('Hint', () => { 6 | test('Appends user-input class name to the class signatures list', () => { 7 | const wrapper = shallow( 8 | 9 | ); 10 | 11 | expect(wrapper.hasClass('test-class-name')).toBe(true); 12 | }); 13 | 14 | test('Assigns only default class names when no custom class specified', () => { 15 | const wrapper = shallow(); 16 | 17 | expect(wrapper.hasClass('undefined')).toBe(false); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/interaction-article.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | 4 | import { 5 | LinkedCharts, 6 | LineChartMouseOverXY, 7 | LineChartMouseOverSeries, 8 | ScatterPlotOnNearestXY 9 | } from '../../../showcase/interaction/interaction-examples'; 10 | 11 | describe('Interaction examples', () => { 12 | test('LinkedCharts', () => { 13 | const $ = mount(); 14 | expect($.find('.rv-xy-plot').length).toBe(3); 15 | }); 16 | 17 | test('LineChartMouseOverXY', () => { 18 | const $ = mount(); 19 | expect($.find('.rv-xy-plot').length).toBe(1); 20 | }); 21 | 22 | test('LineChartMouseOverSeries', () => { 23 | const $ = mount(); 24 | expect($.find('.rv-xy-plot').length).toBe(1); 25 | }); 26 | 27 | test('ScatterPlotOnNearestXY', () => { 28 | const $ = mount(); 29 | expect($.find('.rv-xy-plot').length).toBe(1); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/label-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import LabelSeries from 'plot/series/label-series'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import LabelSeriesExample from '../../../showcase/misc/label-series-example'; 6 | import LabeledStackedVerticalBarChart from '../../../showcase/plot/labeled-stacked-vertical-bar-chart'; 7 | 8 | testRenderWithProps(LabelSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 9 | 10 | describe('LabelSeries', () => { 11 | test('Showcase Example - LabelSeriesExample', () => { 12 | const $ = mount( 13 | 14 | 15 | 16 | ); 17 | expect($.text()).toBe( 18 | 'UPDATE−101234505101520WigglytuffPsyduckGeodudeDittoSnorlax' 19 | ); 20 | expect($.find('.rv-xy-plot__series--label text').length).toBe(5); 21 | 22 | $.find('.showcase-button').simulate('click'); 23 | expect($.text()).toBe( 24 | 'UPDATE−101234505101520WigglytuffPsyduckGeoduderedblue' 25 | ); 26 | $.find('.showcase-button').simulate('click'); 27 | expect($.text()).toBe( 28 | 'UPDATE−101234505101520WigglytuffPsyduckGeoduderedblue' 29 | ); 30 | }); 31 | 32 | test('Showcase Example - LabeledStackedVerticalBarChart', () => { 33 | const $ = mount( 34 | 35 | 36 | 37 | ); 38 | expect($.find('.rv-xy-plot__series--label text').length).toBe(9); 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/line-series-canvas.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import XYPlot from 'plot/xy-plot'; 4 | import LineSeriesCanvas from 'plot/series/line-series-canvas'; 5 | 6 | describe('LineSeriesCanvas', () => { 7 | test('should be rendered', () => { 8 | const k = 7; 9 | 10 | const $ = mount( 11 | 12 | {Array(k) 13 | .fill(0) 14 | .map((_, index) => ( 15 | 24 | ))} 25 | 26 | ); 27 | 28 | expect( 29 | $.find('CanvasWrapper') 30 | .children() 31 | .find('LineSeriesCanvas').length 32 | ).toBe(k); 33 | }); 34 | 35 | test('on onNearestXY should be called and retur ncorrect values', () => { 36 | const k = 7; 37 | expect.assertions(k); 38 | 39 | const $ = mount( 40 | 41 | {[...Array(k).keys()].map(v => ( 42 | { 51 | expect({x: v, y: v * v}).toEqual(value); 52 | }} 53 | /> 54 | ))} 55 | 56 | ); 57 | 58 | $.find('.rv-xy-plot__inner').simulate('mousemove', { 59 | nativeEvent: {clientX: 150, clientY: 150} 60 | }); 61 | }); 62 | }); 63 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/make-vis-flexible.test.js: -------------------------------------------------------------------------------- 1 | import {makeWidthFlexible} from 'make-vis-flexible'; 2 | 3 | describe('makeWidthFlexible', () => { 4 | test('displayName given', () => { 5 | function ChildComponent() {} 6 | ChildComponent.displayName = 'ChildComponentWithDisplayName'; 7 | const FlexibleComponent = makeWidthFlexible(ChildComponent); 8 | expect(FlexibleComponent.displayName).toBe( 9 | 'FlexibleChildComponentWithDisplayName' 10 | ); 11 | }); 12 | 13 | test('displayName not given', () => { 14 | function ChildComponent() {} 15 | const FlexibleComponent = makeWidthFlexible(ChildComponent); 16 | expect(FlexibleComponent.displayName).toBe('FlexibleChildComponent'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/polygon-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import PolygonSeries from 'plot/series/mark-series'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import TriangleExample from '../../../showcase/misc/triangle-example'; 6 | 7 | describe('PolygonSeries', () => { 8 | testRenderWithProps(PolygonSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 9 | 10 | test('Showcase Example - Triangle Example', () => { 11 | const $ = mount(); 12 | expect($.text()).toBe('024681012024681012'); 13 | expect($.find('.rv-xy-plot__series--polygon').length).toBe(121); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/rect-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import HorizontalRectSeries from 'plot/series/horizontal-bar-series'; 4 | import VerticalRectSeries from 'plot/series/vertical-bar-series'; 5 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 6 | import Histogram from '../../../showcase/plot/histogram'; 7 | import StackedHistogram from '../../../showcase/plot/stacked-histogram'; 8 | 9 | describe('RectSeries', () => { 10 | testRenderWithProps(HorizontalRectSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 11 | 12 | testRenderWithProps(VerticalRectSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 13 | 14 | test('Showcase Example - StackedHistogram', () => { 15 | const $ = mount(); 16 | expect($.text()).toBe('TOGGLE TO CANVAS01234567051015202530'); 17 | expect($.find('.rv-xy-plot__series--rect rect').length).toBe(6); 18 | 19 | $.find('.showcase-button').simulate('click'); 20 | expect($.find('.rv-xy-plot__series--rect rect').length).toBe(0); 21 | expect($.find('.rv-xy-canvas canvas').length).toBe(1); 22 | }); 23 | 24 | test('Showcase Example - Histogram', () => { 25 | const $ = mount(); 26 | expect($.text()).toBe('May 21May 28Jun 04Jun 11Jun 180.51.01.52.0'); 27 | expect($.find('.rv-xy-plot__series--rect rect').length).toBe(8); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/voronoi.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import Voronoi from '../../src/plot/voronoi.js'; 4 | import XYPlot from 'plot/xy-plot'; 5 | 6 | import VoronoiLineChart from '../../../showcase/misc/voronoi-line-chart'; 7 | 8 | const StatelessVoronoiWrapper = () => ( 9 | 16 | ({ 24 | x, 25 | y: 10, 26 | className: `my-class-${x}`, 27 | style: {color: 'red'} 28 | }))} 29 | /> 30 | 31 | ); 32 | 33 | describe('Voronoi', () => { 34 | test('Basic Chart', () => { 35 | const $ = mount(); 36 | 37 | expect( 38 | $.find('.rv-voronoi__cell') 39 | .at(30) 40 | .prop('style').color 41 | ).toBe('red'); 42 | expect( 43 | $.find('.rv-voronoi__cell') 44 | .at(30) 45 | .hasClass('my-class-30') 46 | ).toBe(true); 47 | expect( 48 | $.find('.rv-voronoi__cell') 49 | .at(50) 50 | .hasClass('my-class-50') 51 | ).toBe(true); 52 | }); 53 | 54 | test('VoronoiLineChart', () => { 55 | const $ = mount(); 56 | 57 | expect($.text()).toBe( 58 | 'Show Voronoi1.01.52.02.53.03.54.0X Axis2468101214Y Axis' 59 | ); 60 | expect($.find('.rv-voronoi__cell').length).toBe(12); 61 | expect($.find('.rv-xy-plot__series--line').length).toBe(3); 62 | expect($.find('circle').length).toBe(0); 63 | 64 | $.find('input').simulate('click'); 65 | $.find('.rv-voronoi__cell') 66 | .at(0) 67 | .simulate('mouseOver'); 68 | 69 | expect($.find('circle').length).toBe(1); 70 | 71 | $.find('.rv-voronoi__cell') 72 | .at(0) 73 | .simulate('mouseOut'); 74 | 75 | expect($.find('circle').length).toBe(0); 76 | }); 77 | }); 78 | -------------------------------------------------------------------------------- /packages/react-vis/tests/components/whisker-series.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mount} from 'enzyme'; 3 | import WhiskerSeries from 'plot/series/whisker-series'; 4 | import {testRenderWithProps, GENERIC_XYPLOT_SERIES_PROPS} from '../test-utils'; 5 | import WhiskerChart from '../../../showcase/plot/whisker-chart'; 6 | 7 | testRenderWithProps(WhiskerSeries, GENERIC_XYPLOT_SERIES_PROPS, true); 8 | 9 | describe('WhiskerSeries', () => { 10 | test('Showcase Example - Whisker Scatterplot', () => { 11 | const $ = mount( 12 | 13 | 14 | 15 | ); 16 | expect($.text()).toBe('1.01.52.02.53.068101214'); 17 | expect($.find('g.whisker-series-example').length).toBe(1); 18 | // 8 lines each per 5 (double) whiskers 19 | expect($.find('.rv-xy-plot__series--whisker line').length).toBe(40); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/react-vis/tests/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "typeAcquisition": { 3 | "enable": true, 4 | "include": [ 5 | "jest" 6 | ] 7 | } 8 | } -------------------------------------------------------------------------------- /packages/react-vis/tests/plot/__snapshots__/content-clip-path.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`content-clip-path should render 1`] = ` 4 | 5 | 8 | 14 | 15 | 16 | `; 17 | -------------------------------------------------------------------------------- /packages/react-vis/tests/plot/content-clip-path.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {shallow} from 'enzyme'; 3 | import ContentClipPath from '../../src/plot/content-clip-path'; 4 | 5 | describe('content-clip-path', () => { 6 | it('should render', () => { 7 | const wrapper = shallow( 8 | 9 | ); 10 | expect(wrapper).toMatchSnapshot(); 11 | }); 12 | 13 | it('should default id to content-area', () => { 14 | const wrapper = shallow( 15 | 16 | ); 17 | const clip = wrapper.find('clipPath'); 18 | expect(clip.prop('id')).toEqual('content-area'); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/react-vis/tests/setup.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | import jsdom from 'jsdom'; 3 | import Enzyme from 'enzyme'; 4 | 5 | import Adapter from 'enzyme-adapter-react-16'; 6 | Enzyme.configure({adapter: new Adapter()}); 7 | 8 | global.document = jsdom.jsdom(''); 9 | global.window = document.defaultView; 10 | Object.keys(document.defaultView).forEach(function mapProperties(property) { 11 | if (typeof global[property] === 'undefined') { 12 | global[property] = document.defaultView[property]; 13 | } 14 | }); 15 | 16 | global.navigator = { 17 | userAgent: 'node.js' 18 | }; 19 | 20 | /* eslint-enable no-undef */ 21 | -------------------------------------------------------------------------------- /packages/react-vis/tests/test-utils.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jest/no-export */ 2 | import React from 'react'; 3 | import {mount} from 'enzyme'; 4 | 5 | const NOOP = f => f; 6 | 7 | export const GENERIC_XYPLOT_SERIES_PROPS = { 8 | xDomain: [0, 1], 9 | xRange: [0, 1], 10 | xType: 'linear', 11 | xDistance: 1, 12 | yDomain: [0, 1], 13 | yRange: [0, 1], 14 | yDistance: 1, 15 | yType: 'linear', 16 | data: [ 17 | {x: 1, y: 1}, 18 | {x: 2, y: 2} 19 | ], 20 | _allData: [ 21 | [ 22 | {x: 1, y: 1}, 23 | {x: 2, y: 2} 24 | ] 25 | ], 26 | onSeriesMouseOver: NOOP, 27 | onSeriesMouseOut: NOOP, 28 | onSeriesClick: NOOP, 29 | onSeriesRightClick: NOOP, 30 | onValueMouseOver: NOOP, 31 | onValueMouseOut: NOOP, 32 | onValueClick: NOOP, 33 | onValueRightClick: NOOP 34 | }; 35 | 36 | export const testRenderWithProps = (Component, props, wrapWithSvg = false) => 37 | // eslint-disable-next-line jest/require-top-level-describe 38 | test(`Rendering ${Component.displayName}`, () => { 39 | const wrapper = mount( 40 | wrapWithSvg ? ( 41 | 42 | 43 | 44 | ) : ( 45 | 46 | ) 47 | ); 48 | 49 | const component = wrapper.find(Component); 50 | expect(component).toHaveLength(1); 51 | 52 | const componentProps = component.props(); 53 | Object.keys(props).forEach(propName => { 54 | expect(componentProps[propName]).toEqual(props[propName]); 55 | }); 56 | }); 57 | -------------------------------------------------------------------------------- /packages/react-vis/tests/utils/chart-utils.test.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import {getRadialLayoutMargin} from 'utils/chart-utils'; 22 | 23 | describe('chart-utils', () => { 24 | test('getRadialLayoutMargin', () => { 25 | expect(getRadialLayoutMargin(500, 300, 120)).toEqual({ 26 | bottom: 30, 27 | left: 130, 28 | right: 130, 29 | top: 30 30 | }); 31 | 32 | expect(getRadialLayoutMargin(300, 500, 120)).toEqual({ 33 | bottom: 130, 34 | left: 30, 35 | right: 30, 36 | top: 130 37 | }); 38 | 39 | expect(getRadialLayoutMargin(300, 300, 120)).toEqual({ 40 | bottom: 30, 41 | left: 30, 42 | right: 30, 43 | top: 30 44 | }); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /packages/react-vis/tests/utils/data-utils.test.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import { 22 | getUniquePropertyValues, 23 | addValueToArray, 24 | transformValueToString 25 | } from 'utils/data-utils'; 26 | 27 | const arr = [{a: 1}, {b: 3, a: 2}, {a: 2}]; 28 | 29 | describe('data-utils', () => { 30 | test('getUniquePropertyValues', () => { 31 | const result = getUniquePropertyValues(arr, d => d.a); 32 | expect(result.length === 2).toBeTruthy(); 33 | expect(result.indexOf(1) !== -1 && result.indexOf(2) !== -1).toBeTruthy(); 34 | }); 35 | 36 | test('addValueToArray', () => { 37 | expect(addValueToArray([-10, 10], 1)).toEqual([-10, 10]); 38 | expect(addValueToArray([-10, 0], 1)).toEqual([-10, 1]); 39 | expect(addValueToArray([0, 10], -1)).toEqual([-1, 10]); 40 | }); 41 | 42 | test('transformValueToString', () => { 43 | expect(transformValueToString(0)).toEqual(0); 44 | 45 | // 43200000 - this is the timestamp for 12PM on 1970-01-01 46 | // This plays much nicer when running tests locally for different timezones. 47 | expect(transformValueToString(new Date(43200000))).toEqual( 48 | 'Thu Jan 01 1970' 49 | ); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /packages/react-vis/tests/utils/react-utils.test.js: -------------------------------------------------------------------------------- 1 | import {isReactDOMSupported} from 'utils/react-utils'; 2 | 3 | describe('react-utils', () => { 4 | test('isReactDOMSupported', () => { 5 | expect(isReactDOMSupported()).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/react-vis/tests/utils/styling-utils.test.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2019 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import {getCombinedClassName} from 'utils/styling-utils'; 22 | 23 | describe('styling-utils', () => { 24 | test('getCombinedClassName', () => { 25 | const allValidStringParams = [ 26 | 'test_class--1', 27 | 'test_class--2', 28 | 'test_class--3' 29 | ]; 30 | const expectedAllValidStringParamsCombined = 31 | 'test_class--1 test_class--2 test_class--3'; 32 | const falsyValues = [null, undefined, false, '', 0, NaN]; 33 | const nonStringValues = [ 34 | ['invalid_class--1', 'invalid_class--2'], 35 | {foo: 'bar'}, 36 | 123, 37 | () => { 38 | return 'invalid_class--3'; 39 | } 40 | ]; 41 | 42 | expect(getCombinedClassName(...allValidStringParams)).toBe( 43 | expectedAllValidStringParamsCombined 44 | ); 45 | 46 | expect(getCombinedClassName(...allValidStringParams, ...falsyValues)).toBe( 47 | expectedAllValidStringParamsCombined 48 | ); 49 | 50 | expect( 51 | getCombinedClassName(...allValidStringParams, ...nonStringValues) 52 | ).toBe(expectedAllValidStringParamsCombined); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /packages/showcase/.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["module-resolver", { 4 | "root": ["."], 5 | "alias": { 6 | "react-vis/*": "../react-vis/src/*", 7 | "react-vis": "../react-vis/src" 8 | } 9 | }] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/showcase/app.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import ReactDOM from 'react-dom'; 22 | import React from 'react'; 23 | import document from 'global/document'; 24 | 25 | import {BrowserRouter, Route} from 'react-router-dom'; 26 | 27 | import ShowcaseApp from './showcase-app'; 28 | import '../react-vis/src/styles/examples.scss'; 29 | 30 | export default function App() { 31 | // using react-router to trigger react updates on url change 32 | return ( 33 | 34 | 35 | 36 | ); 37 | } 38 | 39 | const el = document.createElement('div'); 40 | document.body.appendChild(el); 41 | 42 | ReactDOM.render(, el); 43 | -------------------------------------------------------------------------------- /packages/showcase/axes/axis-on-0.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | export default function AxisOn0({ 33 | xDomain = [-1, 3], 34 | yDomain = [-5, 15], 35 | xAxisOn0 = true, 36 | yAxisOn0 = true, 37 | verticalTickValues = [], 38 | horizontalTickValues = [0] 39 | }) { 40 | return ( 41 | 42 | {!verticalTickValues || verticalTickValues.length ? ( 43 | 44 | ) : null} 45 | {!horizontalTickValues || horizontalTickValues.length ? ( 46 | 47 | ) : null} 48 | 49 | 50 | 59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /packages/showcase/axes/custom-axes-orientation.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | HorizontalGridLines, 28 | VerticalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 39 | 40 | 41 | 42 | 43 | 51 | 52 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /packages/showcase/axes/custom-axes.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import {XYPlot, XAxis, YAxis, MarkSeries} from 'react-vis'; 24 | 25 | const MARGIN = { 26 | left: 10, 27 | right: 10, 28 | bottom: 80, 29 | top: 20 30 | }; 31 | 32 | const WORDS = [ 33 | 'cool', 34 | 'dog', 35 | 'skateboard', 36 | 'wow', 37 | 'such', 38 | 39 | 40 | Multiline 41 | 42 | 43 | dogs 44 | 45 | 46 | ]; 47 | export default function Example() { 48 | return ( 49 | 50 | 51 | `Value is ${v}`} tickLabelAngle={-90} /> 52 | 53 | v * v} /> 54 | WORDS[v]} /> 55 | 63 | 64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /packages/showcase/axes/custom-axis.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | const axisStyle = { 34 | ticks: { 35 | fontSize: '14px', 36 | color: '#333' 37 | }, 38 | title: { 39 | fontSize: '16px', 40 | color: '#333' 41 | } 42 | }; 43 | 44 | return ( 45 | 46 | 47 | 48 | `Value is ${v}`} 52 | labelValues={[2]} 53 | tickValues={[1, 1.5, 2, 3]} 54 | style={axisStyle} 55 | /> 56 | 57 | 64 | 65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /packages/showcase/axes/decorative-axes-criss-cross.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import {XYPlot, DecorativeAxis} from 'react-vis'; 24 | 25 | const MARGIN = { 26 | left: 30, 27 | right: 30, 28 | top: 30, 29 | bottom: 30 30 | }; 31 | 32 | export default function Example() { 33 | return ( 34 | 42 | 47 | `¡${t}!`} 53 | /> 54 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /packages/showcase/axes/empty-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines 29 | } from 'react-vis'; 30 | 31 | export default function EmptyChart() { 32 | return ( 33 | 40 | 41 | 42 | `${v}!`} 46 | tickValues={[1, 1.5, 2, 3]} 47 | /> 48 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /packages/showcase/axes/static-crosshair.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | LineSeries, 30 | Crosshair 31 | } from 'react-vis'; 32 | 33 | export default function Example() { 34 | return ( 35 | 36 | 37 | 38 | 39 | 40 | 47 | 54 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /packages/showcase/axes/static-hints.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | LineSeries, 30 | Hint 31 | } from 'react-vis'; 32 | 33 | export default function Example() { 34 | return ( 35 | 36 | 37 | 38 | 39 | 40 | 48 | 49 | 54 |
55 | This is a custom hint 56 |
57 | for a non-existent value 58 |
59 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /packages/showcase/color/line-chart-many-colors.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | HorizontalGridLines, 28 | VerticalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | const data = []; 33 | 34 | for (let i = 0; i < 20; i++) { 35 | const series = []; 36 | for (let j = 0; j < 100; j++) { 37 | series.push({x: j, y: (i / 10 + 1) * Math.sin((Math.PI * (i + j)) / 50)}); 38 | } 39 | data.push({color: i, key: i, data: series, opacity: 0.8}); 40 | } 41 | 42 | export default function Example() { 43 | return ( 44 | 51 | 52 | 53 | 54 | 55 | {data.map(({key, ...props}) => ( 56 | 57 | ))} 58 | 59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /packages/showcase/data/mini-data-examples.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the 'Software'), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import {XYPlot, LineSeries, MarkSeries, VerticalBarSeries} from 'react-vis'; 24 | 25 | const data = [ 26 | {x: 0, y: 8}, 27 | {x: 1, y: 5}, 28 | {x: 2, y: 4}, 29 | {x: 3, y: 9}, 30 | {x: 4, y: 1}, 31 | {x: 5, y: 7}, 32 | {x: 6, y: 6}, 33 | {x: 7, y: 3}, 34 | {x: 8, y: 2}, 35 | {x: 9, y: 0} 36 | ]; 37 | 38 | const defaultProps = { 39 | width: 200, 40 | height: 200, 41 | margin: {top: 5, left: 5, right: 5, bottom: 5} 42 | }; 43 | 44 | export function MiniCharts() { 45 | return ( 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /packages/showcase/examples/candlestick/candlestick.scss: -------------------------------------------------------------------------------- 1 | .candlestick-example { 2 | width: 100%; 3 | 4 | .chart { 5 | width: 100%; 6 | } 7 | 8 | .dashed-example-line { 9 | stroke-dasharray: 2, 2; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/showcase/examples/force-directed-graph/force-directed-example.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React, {useState} from 'react'; 22 | import LesMisData from './les-mis-data.json'; 23 | 24 | import './force-directed.scss'; 25 | import ForceDirectedGraph from './force-directed-graph'; 26 | 27 | const makeStrength = () => Math.random() * 60 - 30; 28 | export default function ForceDirectedExample() { 29 | const [strength, setStrength] = useState(makeStrength); 30 | return ( 31 |
32 | 38 | 45 |
46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /packages/showcase/examples/force-directed-graph/force-directed.scss: -------------------------------------------------------------------------------- 1 | .candlestick-example { 2 | width: 100%; 3 | 4 | .chart { 5 | width: 100%; 6 | } 7 | 8 | .dashed-example-line { 9 | stroke-dasharray: 2, 2; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/showcase/examples/iris-dashboard/iris-dashboard.scss: -------------------------------------------------------------------------------- 1 | .iris-dasboard-example { 2 | align-items: center; 3 | display: flex; 4 | flex-direction: column; 5 | width: 100%; 6 | 7 | .chart-row { 8 | display: flex; 9 | } 10 | 11 | .rv-xy-plot__axis__title text { 12 | font-size: 8px; 13 | } 14 | 15 | .axis-label { 16 | align-items: center; 17 | display: flex; 18 | justify-content: center; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/showcase/examples/responsive-vis/responsive-vis.scss: -------------------------------------------------------------------------------- 1 | .responsive-vis-example { 2 | display: flex; 3 | flex-direction: column; 4 | 5 | .responsive-controls { 6 | display: flex; 7 | flex-direction: column; 8 | max-width: 400px; 9 | } 10 | 11 | .chart-type-selector { 12 | display: flex; 13 | justify-content: space-around; 14 | 15 | * { 16 | cursor: pointer; 17 | } 18 | } 19 | 20 | .selected-chart-type { 21 | font-weight: 600; 22 | text-decoration: underline; 23 | } 24 | 25 | .responsive-vis { 26 | display: flex; 27 | justify-content: center; 28 | } 29 | 30 | .responsive-bar-chart { 31 | display: flex; 32 | justify-content: center; 33 | 34 | .rv-hint { 35 | color: #000; 36 | } 37 | } 38 | 39 | .points-per-pixel-label { 40 | font-size: 32px; 41 | white-space: nowrap; 42 | } 43 | 44 | .features-label { 45 | font-size: 24px; 46 | white-space: nowrap; 47 | } 48 | 49 | .controls-wrapper { 50 | align-items: center; 51 | display: flex; 52 | justify-content: center; 53 | width: 100%; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/showcase/examples/streamgraph/streamgraph-example.scss: -------------------------------------------------------------------------------- 1 | .highlighted-stream { 2 | stroke: #fff !important; 3 | stroke-width: 5px; 4 | } 5 | 6 | .streamgraph .rv-xy-plot__series--line { 7 | cursor: pointer; 8 | } 9 | 10 | .markdown-example .streamgraph-example { 11 | display: flex; 12 | flex-direction: column; 13 | width: 100%; 14 | } 15 | 16 | .streamgraph-example { 17 | min-width: 400px; 18 | width: 100%; 19 | } 20 | -------------------------------------------------------------------------------- /packages/showcase/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-vis examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/showcase/legends/continuous-color.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import ContinuousColorLegend from 'react-vis/legends/continuous-color-legend'; 24 | 25 | export default class Example extends React.Component { 26 | constructor(props) { 27 | super(props); 28 | } 29 | 30 | render() { 31 | return ( 32 | 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/showcase/legends/continuous-size.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import ContinuousSizeLegend from 'react-vis/legends/continuous-size-legend'; 24 | 25 | export default class Example extends React.Component { 26 | constructor(props) { 27 | super(props); 28 | } 29 | 30 | render() { 31 | return ; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/showcase/legends/vertical-discrete-color.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import DiscreteColorLegend from 'react-vis/legends/discrete-color-legend'; 24 | 25 | const ITEMS = [ 26 | 'Options', 27 | 'Buttons', 28 | 'Select boxes', 29 | 'Date inputs', 30 | 'Password inputs', 31 | 'Forms', 32 | 'Other' 33 | ]; 34 | 35 | export default function DiscreteColorExample() { 36 | return ; 37 | } 38 | -------------------------------------------------------------------------------- /packages/showcase/misc/clip-example.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | 3 | import { 4 | XYPlot, 5 | XAxis, 6 | YAxis, 7 | VerticalGridLines, 8 | HorizontalGridLines, 9 | AreaSeries, 10 | ContentClipPath 11 | } from 'react-vis'; 12 | 13 | export default function ClipExample() { 14 | const [clip, setClip] = useState(true); 15 | 16 | return ( 17 | <> 18 | 26 | 27 | {clip && } 28 | 29 | 30 | 31 | 32 | 40 | 41 | 42 | 50 | 51 | 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /packages/showcase/misc/time-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | HorizontalGridLines, 28 | VerticalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | const MSEC_DAILY = 86400000; 33 | 34 | export default function Example() { 35 | const timestamp = new Date('September 9 2017').getTime(); 36 | return ( 37 | 38 | 39 | 40 | 41 | 42 | 50 | 51 | 59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /packages/showcase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-vis-showcase", 3 | "description": "Showcase of react-vis components", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "start": "webpack-dev-server --progress --hot --port 3001", 7 | "lint": "eslint .", 8 | "build": "NODE_ENV=production webpack", 9 | "build:windows": "set NODE_ENV=production&&.\\node_modules\\.bin\\webpack" 10 | }, 11 | "devDependencies": { 12 | "babel-loader": "^8.0.0", 13 | "css-loader": "^0.26.1", 14 | "mini-css-extract-plugin": "^0.9.0", 15 | "sass-loader": "^8.0.2", 16 | "style-loader": "^0.13.1", 17 | "webpack": "^4.43.0", 18 | "webpack-cli": "^3.3.11", 19 | "webpack-dev-server": "^3.11.0" 20 | }, 21 | "license": "MIT", 22 | "private": true, 23 | "dependencies": { 24 | "d3-force": "^1.0.6", 25 | "d3-random": "^1.1.0", 26 | "react": "^17.0.2", 27 | "react-dom": "^17.0.2", 28 | "react-router": "^5.2.0", 29 | "react-router-dom": "^5.2.0", 30 | "react-vis": "^1.11.7" 31 | }, 32 | "volta": { 33 | "node": "14.18.0", 34 | "yarn": "1.22.4" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/showcase/plot/area-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | AreaSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 48 | 49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /packages/showcase/plot/axis-with-turned-labels.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | VerticalBarSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 46 | 53 | 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /packages/showcase/plot/custom-scales.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | HorizontalGridLines, 28 | VerticalGridLines, 29 | LineSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 47 | 48 | 56 | 57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /packages/showcase/plot/grid.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis'; 24 | 25 | export default function Example() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /packages/showcase/plot/line-series-canvas-nearest-xy-example.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016-2018 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | import React from 'react'; 21 | import {XYPlot, LineSeriesCanvas, MarkSeriesCanvas} from 'react-vis'; 22 | const k = 100; 23 | const data = Array(k) 24 | .fill(0) 25 | .map((n, x) => ({x, y: x % 2 ? 180 : -180})); 26 | 27 | export default class LineSeriesCanvasNearestXYExample extends React.Component { 28 | state = { 29 | nearestXY: data[0] 30 | }; 31 | 32 | render() { 33 | const {nearestXY} = this.state; 34 | return ( 35 | 41 | { 42 | this.setState({nearestXY: point})} 44 | data={data} 45 | /> 46 | } 47 | { 48 | 55 | } 56 | 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/showcase/plot/linemark-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | LineMarkSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 52 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /packages/showcase/plot/scatterplot.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | MarkSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 52 | 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /packages/showcase/plot/whisker-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import { 24 | XYPlot, 25 | XAxis, 26 | YAxis, 27 | VerticalGridLines, 28 | HorizontalGridLines, 29 | WhiskerSeries 30 | } from 'react-vis'; 31 | 32 | export default function Example() { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /packages/showcase/plot/width-height-margin.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis'; 24 | 25 | export default function Example() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /packages/showcase/radar-chart/four-quadrant-radar-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import RadarChart from 'react-vis/radar-chart'; 24 | 25 | const RADAR_PROPS = { 26 | data: [ 27 | { 28 | C: 30, 29 | VisualBasics: 60, 30 | Excel: 40, 31 | Access: 40 32 | } 33 | ], 34 | domains: [ 35 | {name: 'C', domain: [0, 100]}, 36 | {name: 'VisualBasics', domain: [0, 100]}, 37 | {name: 'Excel', domain: [0, 100]}, 38 | {name: 'Access', domain: [0, 100]} 39 | ], 40 | height: 300, 41 | width: 400 42 | }; 43 | 44 | export default function FourQuadrantRadarChart() { 45 | return ( 46 | 64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /packages/showcase/radial-chart/donut-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React, {Component} from 'react'; 22 | 23 | import {RadialChart, Hint} from 'react-vis'; 24 | 25 | export default class SimpleRadialChart extends Component { 26 | state = { 27 | value: false 28 | }; 29 | render() { 30 | const {value} = this.state; 31 | return ( 32 | d.theta} 37 | data={[ 38 | {theta: 2, className: 'custom-class'}, 39 | {theta: 6}, 40 | {theta: 2}, 41 | {theta: 3}, 42 | {theta: 1} 43 | ]} 44 | onValueMouseOver={v => this.setState({value: v})} 45 | onSeriesMouseOut={() => this.setState({value: false})} 46 | width={300} 47 | height={300} 48 | padAngle={0.04} 49 | > 50 | {value !== false && } 51 | 52 | ); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/showcase/radial-chart/simple-radial-chart.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | import RadialChart from 'react-vis/radial-chart'; 24 | 25 | export default function SimpleRadialChart() { 26 | return ( 27 | d.name} 33 | data={[ 34 | {angle: 1, color: '#89DAC1', name: 'green', opacity: 0.2}, 35 | {angle: 2, color: '#F6D18A', name: 'yellow'}, 36 | {angle: 5, color: '#1E96BE', name: 'cyan'}, 37 | {angle: 3, color: '#DA70BF', name: 'magenta'}, 38 | {angle: 5, color: '#F6D18A', name: 'yellow again'} 39 | ]} 40 | labelsRadiusMultiplier={1.1} 41 | labelsStyle={{fontSize: 16, fill: '#222'}} 42 | showLabels 43 | style={{stroke: '#fff', strokeWidth: 2}} 44 | width={400} 45 | height={300} 46 | /> 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /packages/showcase/sankey/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Sankey from 'react-vis/sankey'; 4 | 5 | const nodes = [{name: 'a', rotation: 0}, {name: 'b'}, {name: 'c'}]; 6 | const links = [ 7 | {source: 0, target: 1, value: 10, opacity: 0.2}, 8 | {source: 0, target: 2, value: 20}, 9 | {source: 1, target: 2, value: 20} 10 | ]; 11 | 12 | export default function BasicSankeyExample() { 13 | return ( 14 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /packages/showcase/sankey/energy-sankey.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Sankey from 'react-vis/sankey'; 4 | 5 | import Energy from '../datasets/energy.json'; 6 | import ShowcaseButton from '../showcase-components/showcase-button'; 7 | 8 | const MODE = ['justify', 'center', 'left', 'right']; 9 | 10 | export default class EnergySankey extends React.Component { 11 | state = { 12 | modeIndex: 0 13 | }; 14 | 15 | updateModeIndex = increment => () => { 16 | const newIndex = this.state.modeIndex + (increment ? 1 : -1); 17 | const modeIndex = 18 | newIndex < 0 ? MODE.length - 1 : newIndex >= MODE.length ? 0 : newIndex; 19 | this.setState({modeIndex}); 20 | }; 21 | render() { 22 | const {modeIndex} = this.state; 23 | 24 | return ( 25 |
26 |
27 | 31 |
{MODE[modeIndex]}
32 | 36 |
37 | 61 |
62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/showcase/sankey/link-event.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Sankey from 'react-vis/sankey'; 4 | 5 | const BLURRED_LINK_OPACITY = 0.3; 6 | const FOCUSED_LINK_OPACITY = 0.6; 7 | 8 | const nodes = [{name: 'a'}, {name: 'b'}, {name: 'c'}]; 9 | const links = [ 10 | {source: 0, target: 1, value: 10}, 11 | {source: 0, target: 2, value: 20}, 12 | {source: 1, target: 2, value: 20} 13 | ]; 14 | 15 | export default class LinkEventSankeyExample extends React.Component { 16 | state = { 17 | activeLink: null 18 | }; 19 | 20 | render() { 21 | const {activeLink} = this.state; 22 | 23 | // Note: d3.sankey currently mutates the `nodes` and `links` arrays, which doesn't play nice 24 | // with React's single-direction data flow. We create a copy of each before we pass to the sankey 25 | // component, just to be sure. 26 | return ( 27 |
28 |
29 | {`${ 30 | activeLink 31 | ? `${nodes[activeLink.source.index].name} -> ${ 32 | nodes[activeLink.target.index].name 33 | }` 34 | : 'None' 35 | } selected`} 36 |
37 | ({...d}))} 39 | links={links.map((d, i) => ({ 40 | ...d, 41 | opacity: 42 | activeLink && i === activeLink.index 43 | ? FOCUSED_LINK_OPACITY 44 | : BLURRED_LINK_OPACITY 45 | }))} 46 | width={200} 47 | height={200} 48 | onLinkMouseOver={node => this.setState({activeLink: node})} 49 | onLinkMouseOut={() => this.setState({activeLink: null})} 50 | /> 51 |
52 | ); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/showcase/sankey/link-hint.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Sankey from 'react-vis/sankey'; 4 | import Hint from 'react-vis/plot/hint'; 5 | 6 | const BLURRED_LINK_OPACITY = 0.3; 7 | const FOCUSED_LINK_OPACITY = 0.6; 8 | 9 | const nodes = [{name: 'a'}, {name: 'b'}, {name: 'c'}]; 10 | const links = [ 11 | {source: 0, target: 1, value: 10}, 12 | {source: 0, target: 2, value: 20}, 13 | {source: 1, target: 2, value: 20} 14 | ]; 15 | 16 | export default class LinkHintSankeyExample extends React.Component { 17 | state = { 18 | activeLink: null 19 | }; 20 | 21 | _renderHint() { 22 | const {activeLink} = this.state; 23 | 24 | // calculate center x,y position of link for positioning of hint 25 | const x = 26 | activeLink.source.x1 + (activeLink.target.x0 - activeLink.source.x1) / 2; 27 | const y = activeLink.y0 - (activeLink.y0 - activeLink.y1) / 2; 28 | 29 | const hintValue = { 30 | [`${activeLink.source.name} ➞ ${activeLink.target.name}`]: activeLink.value 31 | }; 32 | 33 | return ; 34 | } 35 | 36 | render() { 37 | const {activeLink} = this.state; 38 | 39 | // Note: d3.sankey currently mutates the `nodes` and `links` arrays, which doesn't play nice 40 | // with React's single-direction data flow. We create a copy of each before we pass to the sankey 41 | // component, just to be sure. 42 | return ( 43 |
44 | ({...d}))} 46 | links={links.map((d, i) => ({ 47 | ...d, 48 | opacity: 49 | activeLink && i === activeLink.index 50 | ? FOCUSED_LINK_OPACITY 51 | : BLURRED_LINK_OPACITY 52 | }))} 53 | width={200} 54 | height={200} 55 | // do not use voronoi in combination with link mouse over 56 | hasVoronoi={false} 57 | onLinkMouseOver={node => this.setState({activeLink: node})} 58 | onLinkMouseOut={() => this.setState({activeLink: null})} 59 | > 60 | {activeLink && this._renderHint()} 61 | 62 |
63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/showcase/sankey/voronoi.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Sankey from 'react-vis/sankey'; 4 | 5 | const BLURRED_NODE_OPACITY = 0.8; 6 | const FOCUSED_NODE_OPACITY = 1; 7 | 8 | const nodes = [{name: 'a'}, {name: 'b'}, {name: 'c'}]; 9 | const links = [ 10 | {source: 0, target: 1, value: 10}, 11 | {source: 0, target: 2, value: 20}, 12 | {source: 1, target: 2, value: 20} 13 | ]; 14 | 15 | export default class VoronoiSankeyExample extends React.Component { 16 | state = { 17 | activeNode: null 18 | }; 19 | 20 | render() { 21 | const {activeNode} = this.state; 22 | 23 | // Note: d3.sankey currently mutates the `nodes` and `links` arrays, which doesn't play nice 24 | // with React's single-direction data flow. We create a copy of each before we pass to the sankey 25 | // component, just to be sure. 26 | return ( 27 |
28 |
{`${activeNode ? activeNode.name : 'None'} selected`}
29 | { 31 | const isActiveNode = activeNode && d.name === activeNode.name; 32 | return { 33 | ...d, 34 | opacity: isActiveNode 35 | ? FOCUSED_NODE_OPACITY 36 | : BLURRED_NODE_OPACITY, 37 | name: isActiveNode ? `!${d.name}!` : d.name 38 | }; 39 | })} 40 | links={links.map(d => ({...d}))} 41 | width={200} 42 | height={200} 43 | hasVoronoi 44 | onValueMouseOver={node => this.setState({activeNode: node})} 45 | onValueMouseOut={() => this.setState({activeNode: null})} 46 | /> 47 |
48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/showcase/showcase-components/showcase-button.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | import PropTypes from 'prop-types'; 23 | 24 | function ShowcaseButton(props) { 25 | const {buttonContent, onClick} = props; 26 | return ( 27 | 30 | ); 31 | } 32 | 33 | ShowcaseButton.propTypes = { 34 | buttonContent: PropTypes.string.isRequired, 35 | onClick: PropTypes.func.isRequired 36 | }; 37 | 38 | export default ShowcaseButton; 39 | -------------------------------------------------------------------------------- /packages/showcase/showcase-components/showcase-dropdown.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | import PropTypes from 'prop-types'; 23 | 24 | class ShowcaseDropdown extends React.Component { 25 | constructor(props) { 26 | super(props); 27 | this.state = { 28 | open: false 29 | }; 30 | } 31 | 32 | toggleState = () => { 33 | this.setState({open: !this.state.open}); 34 | }; 35 | 36 | render() { 37 | const {items} = this.props; 38 | const {open} = this.state; 39 | return ( 40 |
41 |
42 | {'SELECT SECTION'} 43 |
44 | {open && ( 45 |
46 | )} 47 | {open &&
    {items}
} 48 |
49 | ); 50 | } 51 | } 52 | 53 | ShowcaseDropdown.propTypes = { 54 | items: PropTypes.arrayOf(PropTypes.component) 55 | }; 56 | 57 | export default ShowcaseDropdown; 58 | -------------------------------------------------------------------------------- /packages/showcase/showcase-components/showcase-utils.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {SHOWCASE_LINKS} from '../showcase-links'; 4 | 5 | export function mapSection(section) { 6 | const {docsLink, comment, name, componentName} = section; 7 | const SectionComponent = section.component; 8 | const linkProps = { 9 | className: 'docs-link', 10 | target: '_blank', 11 | rel: 'noopener noreferrer' 12 | }; 13 | const exampleLink = SHOWCASE_LINKS[componentName]; 14 | return ( 15 |
16 |
17 |

{name}

18 |
19 | {exampleLink && ( 20 | 21 | {' '} 22 | View Code 23 | 24 | )} 25 | {docsLink && ( 26 | 27 | {' '} 28 | Documentation{' '} 29 | 30 | )} 31 |
32 |
33 | {comment &&

{comment}

} 34 | 35 |
36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /packages/showcase/showcase-components/source-linker.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016 - 2017 Uber Technologies, Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | import React from 'react'; 22 | 23 | export default function sourceLinker(ShowcaseComponent, link) { 24 | return function renderExample() { 25 | return ( 26 |
35 | {ShowcaseComponent && } 36 | {link && ( 37 | 45 | {'> View Code'} 46 | 47 | )} 48 |
49 | ); 50 | }; 51 | } 52 | -------------------------------------------------------------------------------- /packages/showcase/showcase-index.js: -------------------------------------------------------------------------------- 1 | export AxesShowcase from './showcase-sections/axes-showcase'; 2 | export PlotsShowcase from './showcase-sections/plots-showcase'; 3 | export SunburstSection from './showcase-sections/sunburst-showcase'; 4 | export RadialShowcase from './showcase-sections/radial-showcase'; 5 | export RadarShowcase from './showcase-sections/radar-showcase'; 6 | export LegendsShowcase from './showcase-sections/legends-showcase'; 7 | export SankeysShowcase from './showcase-sections/sankeys-showcase'; 8 | export TreemapShowcase from './showcase-sections/treemap-showcase'; 9 | export ParallelCoordinatesShowcase from './showcase-sections/parallel-coordinates-showcase'; 10 | export MiscShowcase from './showcase-sections/misc-showcase'; 11 | 12 | export Candlestick from './examples/candlestick/candlestick-example'; 13 | export ForceDirectedGraph from './examples/force-directed-graph/force-directed-example'; 14 | export ResponsiveVis from './examples/responsive-vis/responsive-vis-example'; 15 | export StreamgraphExample from './examples/streamgraph/streamgraph-example'; 16 | export IrisDashboard from './examples/iris-dashboard/iris-dashboard'; 17 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/legends-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {mapSection} from '../showcase-components/showcase-utils'; 3 | import {showCase} from '../index'; 4 | const { 5 | ContinuousColorLegendExample, 6 | ContinuousSizeLegendExample, 7 | HorizontalDiscreteColorLegendExample, 8 | HorizontalDiscreteCustomPalette, 9 | SearchableDiscreteColorLegendExample, 10 | SearchableDiscreteColorLegendHoverExample, 11 | VerticalDiscreteColorLegendExample 12 | } = showCase; 13 | /* eslint-disable max-len */ 14 | const DISCRETE_LEGENDS = [ 15 | { 16 | name: 'Vertical legend', 17 | component: VerticalDiscreteColorLegendExample, 18 | componentName: 'VerticalDiscreteColorLegendExample' 19 | }, 20 | { 21 | name: 'Horizontal legend with stroke styles', 22 | component: HorizontalDiscreteColorLegendExample, 23 | componentName: 'HorizontalDiscreteColorLegendExample' 24 | }, 25 | { 26 | name: 'Custom palette with hover interaction', 27 | component: HorizontalDiscreteCustomPalette, 28 | componentName: 'HorizontalDiscreteCustomPalette' 29 | }, 30 | { 31 | name: 'Discrete color legend with search', 32 | component: SearchableDiscreteColorLegendExample, 33 | componentName: 'SearchableDiscreteColorLegendExample' 34 | }, 35 | { 36 | name: 'Discrete color legend with search and hover', 37 | component: SearchableDiscreteColorLegendHoverExample, 38 | componentName: 'SearchableDiscreteColorLegendHoverExample' 39 | } 40 | ]; 41 | /* eslint-enable max-len */ 42 | 43 | const CONTINOUS_COLOR_LEGEND = [ 44 | { 45 | name: 'Default legend', 46 | component: ContinuousColorLegendExample, 47 | componentName: 'ContinuousColorLegendExample' 48 | } 49 | ]; 50 | 51 | const CONTINOUS_SIZE_LEGEND = [ 52 | { 53 | name: 'Default legend', 54 | component: ContinuousSizeLegendExample, 55 | componentName: 'ContinuousSizeLegendExample' 56 | } 57 | ]; 58 | 59 | function LegendsExample() { 60 | return ( 61 |
62 |

Legends

63 |

Discrete color legend

64 | {DISCRETE_LEGENDS.map(mapSection)} 65 |

Continuous color legend

66 | {CONTINOUS_COLOR_LEGEND.map(mapSection)} 67 |

Continuous size legend

68 | {CONTINOUS_SIZE_LEGEND.map(mapSection)} 69 |
70 | ); 71 | } 72 | 73 | export default LegendsExample; 74 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/parallel-coordinates-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {mapSection} from '../showcase-components/showcase-utils'; 4 | import {showCase} from '../index'; 5 | import {REACTVIS_BASE_URL} from '../showcase-links'; 6 | const { 7 | AnimatedParallelCoordinates, 8 | BasicParallelCoordinates, 9 | BrushedParallelCoordinates 10 | } = showCase; 11 | 12 | /* eslint-disable max-len */ 13 | const PARALLEL_COORDINATES = [ 14 | { 15 | name: 'Basic Parallel Coordinates', 16 | component: BasicParallelCoordinates, 17 | componentName: 'BasicParallelCoordinates', 18 | sourceLink: `${REACTVIS_BASE_URL}/radar-chart/index.js`, 19 | docsLink: 20 | 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart' 21 | }, 22 | { 23 | name: 'Animated Parallel Coordinates', 24 | component: AnimatedParallelCoordinates, 25 | componentName: 'AnimatedParallelCoordinates' 26 | }, 27 | { 28 | name: 'Brushed Parallel Coordinates', 29 | component: BrushedParallelCoordinates, 30 | componentName: 'BrushedParallelCoordinates' 31 | } 32 | ]; 33 | 34 | function ParallelCoordinatesShowcase() { 35 | return ( 36 |
37 |

Parallel Coordinates

38 | {PARALLEL_COORDINATES.map(mapSection)} 39 |
40 | ); 41 | } 42 | 43 | export default ParallelCoordinatesShowcase; 44 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/radar-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {mapSection} from '../showcase-components/showcase-utils'; 4 | import {REACTVIS_BASE_URL} from '../showcase-links'; 5 | import {showCase} from '../index'; 6 | const { 7 | AnimatedRadarChart, 8 | BasicRadarChart, 9 | FourQuadrantRadarChart, 10 | RadarChartWithTooltips, 11 | RadarChartSeriesTooltips 12 | } = showCase; 13 | 14 | const RADAR = [ 15 | { 16 | name: 'Basic Radar Chart', 17 | component: BasicRadarChart, 18 | componentName: 'BasicRadarChart', 19 | sourceLink: `${REACTVIS_BASE_URL}/radar-chart/index.js`, 20 | docsLink: 21 | 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart' 22 | }, 23 | { 24 | name: 'Animated Radar Chart', 25 | component: AnimatedRadarChart, 26 | componentName: 'AnimatedRadarChart' 27 | }, 28 | { 29 | name: 'Four Quadrant Radar Chart', 30 | component: FourQuadrantRadarChart, 31 | componentName: 'FourQuadrantRadarChart' 32 | }, 33 | { 34 | name: 'Radar Chart with Tooltips', 35 | component: RadarChartWithTooltips, 36 | componentName: 'RadarChartWithTooltips' 37 | }, 38 | { 39 | name: 'Radar Chart with Series Tooltips', 40 | component: RadarChartSeriesTooltips, 41 | componentName: 'RadarChartSeriesTooltips' 42 | } 43 | ]; 44 | 45 | function RadarShowcase() { 46 | return ( 47 |
48 |

Radar Chart

49 | {RADAR.map(mapSection)} 50 |
51 | ); 52 | } 53 | 54 | export default RadarShowcase; 55 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/radial-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {mapSection} from '../showcase-components/showcase-utils'; 4 | import {REACTVIS_BASE_URL} from '../showcase-links'; 5 | import {showCase} from '../index'; 6 | const { 7 | CustomRadiusRadialChart, 8 | DonutChartExample, 9 | SimpleRadialChart, 10 | GradientPie 11 | } = showCase; 12 | /* eslint-disable max-len */ 13 | const RADIAL = [ 14 | { 15 | name: 'Simple Radial Chart', 16 | component: SimpleRadialChart, 17 | componentName: SimpleRadialChart, 18 | sourceLink: `${REACTVIS_BASE_URL}/radial-chart/index.js`, 19 | docsLink: 20 | 'http://uber.github.io/react-vis/documentation/other-charts/radial-chart' 21 | }, 22 | { 23 | name: 'Simple Donut Chart', 24 | component: DonutChartExample, 25 | componentName: DonutChartExample 26 | }, 27 | { 28 | name: 'Custom Radius', 29 | component: CustomRadiusRadialChart, 30 | componentName: CustomRadiusRadialChart 31 | }, 32 | { 33 | name: 'Gradient Pie', 34 | component: GradientPie, 35 | componentName: GradientPie 36 | } 37 | ]; 38 | 39 | function RadialShowcase() { 40 | return ( 41 |
42 |

Radial Chart

43 | {RADIAL.map(mapSection)} 44 |
45 | ); 46 | } 47 | 48 | export default RadialShowcase; 49 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/sankeys-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {mapSection} from '../showcase-components/showcase-utils'; 4 | import {REACTVIS_BASE_URL} from '../showcase-links'; 5 | import {showCase} from '../index'; 6 | const { 7 | BasicSankeyExample, 8 | VoronoiSankeyExample, 9 | EnergySankeyExample, 10 | LinkEventSankeyExample, 11 | LinkHintSankeyExample 12 | } = showCase; 13 | 14 | const SANKEYS = [ 15 | { 16 | name: 'Basic', 17 | component: BasicSankeyExample, 18 | componentName: 'BasicSankeyExample', 19 | docsLink: 20 | 'http://uber.github.io/react-vis/documentation/other-charts/sankey-diagram', 21 | sourceLink: `${REACTVIS_BASE_URL}/sankey/index.js` 22 | }, 23 | { 24 | name: 'With Voronoi Selection', 25 | component: VoronoiSankeyExample, 26 | componentName: 'VoronoiSankeyExample' 27 | }, 28 | { 29 | name: 'With link selection', 30 | component: LinkEventSankeyExample, 31 | componentName: 'LinkEventSankeyExample' 32 | }, 33 | { 34 | name: 'With hint (for links)', 35 | component: LinkHintSankeyExample, 36 | componentName: 'LinkHintSankeyExample' 37 | }, 38 | { 39 | name: 'Energy Example', 40 | component: EnergySankeyExample, 41 | componentName: 'EnergySankeyExample' 42 | } 43 | ]; 44 | 45 | function SankeysSection() { 46 | return ( 47 |
48 |

Sankeys

49 | {SANKEYS.map(mapSection)} 50 |
51 | ); 52 | } 53 | 54 | export default SankeysSection; 55 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/sunburst-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {showCase} from '../index'; 4 | import {REACTVIS_BASE_URL} from '../showcase-links'; 5 | import {mapSection} from '../showcase-components/showcase-utils'; 6 | const { 7 | AnimatedSunburst, 8 | ArcSeriesExample, 9 | BasicSunburst, 10 | ClockExample, 11 | SunburstWithTooltips 12 | } = showCase; 13 | 14 | const SUNBURSTS = [ 15 | { 16 | name: 'Arc Series Example', 17 | component: ArcSeriesExample, 18 | componentName: 'ArcSeriesExample', 19 | docsLink: 20 | 'http://uber.github.io/react-vis/documentation/series-reference/arc-series', 21 | sourceLink: `${REACTVIS_BASE_URL}/plot/series/arc-series.js` 22 | }, 23 | { 24 | name: 'Basic Sunburst', 25 | component: BasicSunburst, 26 | componentName: 'BasicSunburst', 27 | docsLink: 28 | 'http://uber.github.io/react-vis/documentation/other-charts/sunburst-diagram', 29 | sourceLink: `${REACTVIS_BASE_URL}/sunburst/index.js` 30 | }, 31 | { 32 | name: 'Clock', 33 | component: ClockExample, 34 | componentName: 'ClockExample' 35 | }, 36 | { 37 | name: 'Animated Sunburst', 38 | component: AnimatedSunburst, 39 | componentName: 'AnimatedSunburst' 40 | }, 41 | { 42 | name: 'Sunburst with tooltips', 43 | component: SunburstWithTooltips, 44 | componentName: 'SunburstWithTooltips' 45 | } 46 | ]; 47 | 48 | function SunburstSection() { 49 | return ( 50 |
51 |

Sunbursts

52 | {SUNBURSTS.map(mapSection)} 53 |
54 | ); 55 | } 56 | 57 | export default SunburstSection; 58 | -------------------------------------------------------------------------------- /packages/showcase/showcase-sections/treemap-showcase.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {showCase} from '../index'; 4 | import {REACTVIS_BASE_URL} from '../showcase-links'; 5 | import {mapSection} from '../showcase-components/showcase-utils'; 6 | 7 | const {SimpleTreemap, TreemapExample} = showCase; 8 | 9 | const TREEMAPS = [ 10 | { 11 | name: 'Simple Treemap', 12 | component: SimpleTreemap, 13 | componentName: 'SimpleTreemap', 14 | docsLink: 15 | 'http://uber.github.io/react-vis/documentation/other-charts/treemap', 16 | sourceLink: `${REACTVIS_BASE_URL}/treemap/index.js` 17 | }, 18 | { 19 | name: 'Animated Treemap', 20 | component: TreemapExample, 21 | componentName: 'TreemapExample' 22 | } 23 | ]; 24 | 25 | function TreemapShowcase() { 26 | return ( 27 |
28 |

Treemap

29 | {TREEMAPS.map(mapSection)} 30 |
31 | ); 32 | } 33 | 34 | export default TreemapShowcase; 35 | -------------------------------------------------------------------------------- /packages/showcase/showcase-utils.js: -------------------------------------------------------------------------------- 1 | // sourced from 2 | // http://indiegamr.com/generate-repeatable-random-numbers-in-js/ 3 | export function generateSeededRandom(baseSeed = 2) { 4 | let seed = baseSeed; 5 | return function seededRandom(max, min) { 6 | max = max || 1; 7 | min = min || 0; 8 | 9 | seed = (seed * 9301 + 49297) % 233280; 10 | const rnd = seed / 233280; 11 | 12 | return min + rnd * (max - min); 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/showcase/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | const process = require('process'); 3 | const path = require('path'); 4 | 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | 7 | const entry = {app: './app'}; 8 | const jsRule = { 9 | test: /\.js$/, 10 | loader: 'babel-loader', 11 | exclude: [/node_modules/], 12 | options: { 13 | rootMode: 'upward' 14 | } 15 | }; 16 | const isProd = process.env.NODE_ENV === 'production'; 17 | const config = isProd 18 | ? { 19 | entry, 20 | mode: 'production', 21 | output: { 22 | path: process.cwd(), 23 | filename: 'bundle.js' 24 | }, 25 | 26 | resolve: { 27 | modules: [ 28 | 'node_modules', 29 | path.join(__dirname, '..', 'react-vis', 'src') 30 | ] 31 | }, 32 | 33 | module: { 34 | rules: [ 35 | jsRule, 36 | { 37 | test: /\.scss$/, 38 | use: [ 39 | { 40 | loader: MiniCssExtractPlugin.loader 41 | }, 42 | 'css-loader', 43 | 'sass-loader' 44 | ] 45 | } 46 | ] 47 | }, 48 | optimization: { 49 | minimize: true 50 | }, 51 | plugins: [new MiniCssExtractPlugin('bundle.css')] 52 | } 53 | : { 54 | mode: 'development', 55 | entry, 56 | devtool: 'source-maps', 57 | output: { 58 | path: path.resolve(__dirname, './dist'), 59 | filename: 'bundle.js' 60 | }, 61 | plugins: [new MiniCssExtractPlugin()], 62 | 63 | module: { 64 | rules: [ 65 | jsRule, 66 | { 67 | test: /\.(sa|sc|c)ss$/, 68 | use: [ 69 | { 70 | loader: MiniCssExtractPlugin.loader, 71 | options: { 72 | hmr: true 73 | } 74 | }, 75 | 'css-loader', 76 | 'sass-loader' 77 | ] 78 | } 79 | ] 80 | }, 81 | 82 | resolve: { 83 | modules: [ 84 | 'node_modules', 85 | path.join(__dirname, '..', 'react-vis', 'src') 86 | ] 87 | } 88 | }; 89 | 90 | module.exports = config; 91 | -------------------------------------------------------------------------------- /packages/website/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import 'storybook-addon-jsx/register'; 3 | -------------------------------------------------------------------------------- /packages/website/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import {configure, addParameters, setAddon} from '@storybook/react'; 2 | import JSXAddon, {jsxDecorator} from 'storybook-addon-jsx'; 3 | import {SimpleChartWrapper, jsxOptions} from '../storybook/storybook-utils'; 4 | 5 | setAddon(JSXAddon); 6 | addParameters({jsx: jsxOptions}); 7 | 8 | function loadStories() { 9 | require('../storybook/index.js'); 10 | // You can require as many stories as you need. 11 | } 12 | 13 | configure(loadStories, module); 14 | -------------------------------------------------------------------------------- /packages/website/.storybook/storybook.css: -------------------------------------------------------------------------------- 1 | html, body, #root { 2 | height: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /packages/website/html.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | title: 'react-vis', 4 | 5 | baseHref: process.env.NODE_ENV === 'production' ? 'website/dist/' : '/', 6 | 7 | meta: [ 8 | { 9 | name: 'description', 10 | content: 'A composable charting library' 11 | } 12 | ], 13 | 14 | scripts: ['https://uber.github.io/react-vis/redirect.js'] 15 | }; 16 | -------------------------------------------------------------------------------- /packages/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@uber/react-vis-website", 3 | "private": true, 4 | "version": "1.0.0", 5 | "description": "A composable charting library", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "ocular start", 9 | "clean": "rm -rf dist/*{.js,.css,index.html,appcache,fonts,images}", 10 | "build": "npm run clean && ocular build && npm run build-storybook", 11 | "build-storybook": "build-storybook -c .storybook -o ./dist/storybook", 12 | "lint": "ocular lint", 13 | "storybook": "start-storybook -p 9001 -c .storybook" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "@storybook/addon-knobs": "^5.3.18", 20 | "@storybook/react": "^5.3.18", 21 | "storybook-addon-jsx": "^7.2.3" 22 | }, 23 | "dependencies": { 24 | "react": "^16.8.3", 25 | "react-dom": "^16.8.3", 26 | "d3-force": "^1.0.6", 27 | "d3-random": "^1.1.0", 28 | "ocular": "0.6.2", 29 | "react-virtualized": "^9.18.5", 30 | "react-vis": "^1.11.2" 31 | }, 32 | "volta": { 33 | "node": "10.20.1", 34 | "yarn": "1.22.4" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/website/src/config.js: -------------------------------------------------------------------------------- 1 | export const PROJECT_TYPE = 'github'; 2 | 3 | export const PROJECT_NAME = 'react-vis'; 4 | export const PROJECT_ORG = 'uber'; 5 | export const PROJECT_URL = `https://github.com/${PROJECT_ORG}/${PROJECT_NAME}`; 6 | export const PROJECT_DESC = 'A composable charting library'; 7 | 8 | export const PROJECTS = {}; 9 | 10 | export const HOME_HEADING = 'A composable charting library'; 11 | 12 | export const HOME_RIGHT = null; 13 | 14 | export const HOME_BULLETS = []; 15 | export const GA_TRACKING = 'UA-64694404-13'; 16 | export const ADDITIONAL_LINKS = [ 17 | {name: 'Storybook', href: './storybook/index.html'} 18 | ]; 19 | 20 | export const BASENAME = '/react-vis'; 21 | export const HISTORY = 'browser'; 22 | -------------------------------------------------------------------------------- /packages/website/src/demos.js: -------------------------------------------------------------------------------- 1 | import {showCase} from '../../showcase'; 2 | import * as ShowcaseIndex from '../../showcase/showcase-index'; 3 | 4 | export default { 5 | ...showCase, 6 | ...ShowcaseIndex 7 | }; 8 | -------------------------------------------------------------------------------- /packages/website/src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary: #00ADE6; 2 | $secondary: #05E3D5; 3 | $black: #041725; 4 | $black-20: #213746; 5 | $black-40: #5A666D; 6 | $white: #EDEDED; 7 | $white-40: #8D9BA3; 8 | 9 | $font-family: 'Source Sans Pro'; 10 | 11 | $footer-height: 13rem; 12 | $topbar-height: 4rem; 13 | $topbar-maxheight: 8rem; 14 | $toc-width: 17rem; 15 | $mobile: 576px; 16 | 17 | $gradient-1: linear-gradient(to right, $primary 0%, $secondary 100%); 18 | $gradient-2: linear-gradient(to bottom, $primary 0%, $secondary 100%); -------------------------------------------------------------------------------- /packages/website/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uber/react-vis/92e2af2eac8269cb6aefaee9864cd1bd14666d80/packages/website/static/.gitkeep -------------------------------------------------------------------------------- /packages/website/storybook/index.js: -------------------------------------------------------------------------------- 1 | import '../../react-vis/dist/style.css'; 2 | import '../.storybook/storybook.css'; 3 | 4 | import './areaseries-story'; 5 | import './barseries-story'; 6 | import './lineseries-story'; 7 | import './markseries-story'; 8 | import './radial-story'; 9 | 10 | import './axis-story'; 11 | import './legend-story'; 12 | 13 | import './misc-story'; 14 | -------------------------------------------------------------------------------- /packages/website/storybook/misc-story.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | import React from 'react'; 4 | 5 | import {storiesOf} from '@storybook/react'; 6 | 7 | import {withKnobs, boolean} from '@storybook/addon-knobs/react'; 8 | import {SimpleChartWrapper} from './storybook-utils'; 9 | import {generateLinearData} from './storybook-data'; 10 | 11 | import {LineSeries, ContentClipPath} from 'react-vis'; 12 | 13 | const data = generateLinearData({randomFactor: 10}); 14 | 15 | storiesOf('Misc', module) 16 | .addDecorator(withKnobs) 17 | .addWithJSX('Clip Content', () => { 18 | const margin = {left: 40, top: 40, bottom: 40, right: 40}; 19 | const xDomain = [data[1].x, data[data.length - 2].x]; 20 | const shouldClip = boolean( 21 | 'Enable Clipping', 22 | false, 23 | 'General chart options' 24 | ); 25 | return ( 26 | 27 | {shouldClip && } 28 | 29 | 30 | ); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/website/storybook/radial-story.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | import React from 'react'; 3 | 4 | import {storiesOf} from '@storybook/react'; 5 | 6 | import {withKnobs, boolean, number, object} from '@storybook/addon-knobs/react'; 7 | 8 | import {generateRadialData} from './storybook-data.js'; 9 | import {SimpleRadialChartWrapper} from './storybook-utils.js'; 10 | 11 | function labelProps() { 12 | const showLabels = boolean('showLabels', true, 'Labels'); 13 | const labelsRadiusMultiplier = number( 14 | 'labelsRadiusMultiplier', 15 | 1.1, 16 | {max: 2, min: 0, range: true, step: 0.1}, 17 | 'Labels' 18 | ); 19 | const labelsStyle = object('labelStyle', {fontSize: 12}, 'Labels'); 20 | return {labelsRadiusMultiplier, labelsStyle, showLabels}; 21 | } 22 | 23 | storiesOf('Series/RadialCharts/Pie Chart', module) 24 | .addDecorator(withKnobs) 25 | .addWithJSX('Single Pie Chart', () => { 26 | const nbSlices = number( 27 | 'nbSlices', 28 | 5, 29 | {max: 8, min: 1, range: true, step: 1}, 30 | 'Pie Chart' 31 | ); 32 | return ( 33 | 36 | ); 37 | }) 38 | .addWithJSX('Single Pie Chart with Labels', () => { 39 | const nbSlices = number( 40 | 'nbSlices', 41 | 5, 42 | {max: 8, min: 1, range: true, step: 1}, 43 | 'Pie Chart' 44 | ); 45 | return ( 46 | 50 | ); 51 | }); 52 | -------------------------------------------------------------------------------- /packages/website/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | const {resolve} = require('path'); 3 | 4 | module.exports = { 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.js$/, 9 | loader: 'babel-loader', 10 | exclude: [/node_modules/], 11 | options: { 12 | rootMode: 'upward' 13 | } 14 | } 15 | ] 16 | }, 17 | resolve: { 18 | alias: { 19 | react: resolve(__dirname, './node_modules/react') 20 | } 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /publish-docs.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | cd website && 3 | npm run build && 4 | rm -rf /tmp/dist-vis && 5 | mv dist /tmp/dist-vis && 6 | git checkout gh-pages && 7 | rm -rf dist && 8 | mv /tmp/dist-vis dist && 9 | mv dist/index.html .. && 10 | cd .. && 11 | git add . && 12 | git commit -m 'Upgrade docs' && 13 | git push && git checkout master 14 | -------------------------------------------------------------------------------- /publish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | DRY_RUN=0 3 | 4 | while true; do 5 | case $1 in 6 | -v | --version ) VERSION=$2; shift 2 ;; 7 | -t | --tag ) TAG=$2; shift 2 ;; 8 | -r | --registry ) REGISTRY=$2; shift 2 ;; 9 | --dry-run ) DRY_RUN=1; shift ;; 10 | -- ) shift; break ;; 11 | * ) break ;; 12 | esac 13 | done 14 | 15 | if [ -z $VERSION ] 16 | then 17 | echo "Error: must specify version, with the -v option." 18 | exit 0 19 | fi 20 | 21 | if [ -z $REGISTRY ] 22 | then 23 | echo "Registry unset, use the default npm registry https://registry.npmjs.org." 24 | REGISTRY="https://registry.npmjs.org" 25 | fi 26 | 27 | cp CHANGELOG.md README.md LICENSE packages/react-vis 28 | 29 | cd packages/react-vis 30 | 31 | npm version $VERSION 32 | 33 | publish_command="npm publish" 34 | 35 | if [ -z $TAG ] 36 | then 37 | publish_command+=" --tag ${TAG} --registry ${REGISTRY}" 38 | else 39 | publish_command+=" --registry ${REGISTRY}" 40 | fi 41 | 42 | if [ $DRY_RUN -eq 1 ] 43 | then 44 | publish_command+=" --dry-run" 45 | fi 46 | 47 | eval $publish_command 48 | 49 | rm CHANGELOG.md README.md LICENSE 50 | -------------------------------------------------------------------------------- /remove-refs-to-unpm.pl: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | perl -pi -e 's/unpm\.uberinternal\.com/registry\.yarnpkg\.com/g' `find . -name yarn.lock` 4 | --------------------------------------------------------------------------------