\n this.setState({\n hoveredItem: {\n ...i,\n title: `${i.title}:SELECTED`\n }\n })\n }\n onItemMouseLeave={() => this.setState({hoveredItem: false})}\n onSearchChange={this._searchChangeHandler}\n searchText={searchText}\n onItemClick={this._clickHandler}\n items={items.map(item =>\n hoveredItem && hoveredItem.title.includes(item.title)\n ? hoveredItem\n : item\n )}\n />\n );\n }\n}\n"
},
{
"path": "packages/showcase/legends/searchable-discrete-color.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport SearchableDiscreteColorLegend from 'react-vis/legends/searchable-discrete-color-legend';\n\nexport default class Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n items: [\n {title: 'Apples', color: '#3a3'},\n {title: 'Bananas', color: '#fc0'},\n {title: 'Blueberries', color: '#337'},\n {title: 'Carrots', color: '#f93'},\n {title: 'Eggplants', color: '#337'},\n {title: 'Limes', color: '#cf3'},\n {title: 'Potatoes', color: '#766'}\n ],\n searchText: ''\n };\n }\n\n _clickHandler = item => {\n const {items} = this.state;\n item.disabled = !item.disabled;\n this.setState({items});\n };\n\n _searchChangeHandler = searchText => {\n this.setState({searchText});\n };\n\n render() {\n const {items, searchText} = this.state;\n return (\n \n
\n this.setState({highlighting: true})}\n onBrush={area => this.setState({filter: area})}\n onBrushEnd={area =>\n this.setState({highlighting: false, filter: area})\n }\n onDragStart={() => this.setState({highlighting: true})}\n onDrag={area => this.setState({filter: area})}\n onDragEnd={area =>\n this.setState({highlighting: false, filter: area})\n }\n />\n (highlightPoint(d) ? '#EF5D28' : '#12939A')}\n onValueMouseOver={d => this.setState({hovered: d})}\n onValueMouseOut={() => this.setState({hovered: false})}\n data={data}\n />\n {hovered && \n
{`There are ${numSelectedPoints} selected points`}
\n
\n
\n
\n
{`ANIMATION TECHNIQUE: ${MODE[modeIndex]}`}
\n
\n
\n
\n \n
this.setState({data: generateData()})}\n buttonContent={'UPDATE DATA'}\n />\n \n setClip(e.currentTarget.checked)}\n />\n Enable Clipping\n \n \n {clip && \n \n );\n}\n"
},
{
"path": "packages/showcase/misc/dragable-chart-example.js",
"content": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {XYPlot, XAxis, YAxis, VerticalRectSeries, Highlight} from 'react-vis';\n\nconst DATA = [\n {x0: 0, x: 1, y: 1},\n {x0: 1, x: 2, y: 2},\n {x0: 2, x: 3, y: 10},\n {x0: 3, x: 4, y: 6},\n {x0: 4, x: 5, y: 5},\n {x0: 5, x: 6, y: 3},\n {x0: 6, x: 7, y: 1}\n];\n\nclass DragableChartExample extends React.Component {\n state = {\n selectionStart: null,\n selectionEnd: null\n };\n\n render() {\n const {selectionStart, selectionEnd} = this.state;\n const updateDragState = area =>\n this.setState({\n selectionStart: area && area.left,\n selectionEnd: area && area.right\n });\n\n return (\n \n
\n {\n if (selectionStart === null || selectionEnd === null) {\n return '#1E96BE';\n }\n const inX = d.x >= selectionStart && d.x <= selectionEnd;\n const inX0 = d.x0 >= selectionStart && d.x0 <= selectionEnd;\n const inStart = selectionStart >= d.x0 && selectionStart <= d.x;\n const inEnd = selectionEnd >= d.x0 && selectionEnd <= d.x;\n\n return inStart || inEnd || inX || inX0 ? '#12939A' : '#1E96BE';\n }}\n />\n\n \n\n
\n selectionStart: {`${Math.floor(selectionStart * 100) / 100},`}\n selectionEnd: {`${Math.floor(selectionEnd * 100) / 100},`}\n
\n
\n \n \n \n \n \n );\n}\n"
},
{
"path": "packages/showcase/misc/label-series-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {XYPlot, XAxis, YAxis, MarkSeries, LabelSeries} from 'react-vis';\n\nfunction generateData() {\n return [\n {\n x: Math.random() * 3,\n y: Math.random() * 20,\n label: 'Wigglytuff',\n size: 30,\n style: {fontSize: 20}\n },\n {x: Math.random() * 3, y: Math.random() * 20, label: 'Psyduck', size: 10},\n {x: Math.random() * 3, y: Math.random() * 20, label: 'Geodude', size: 1},\n {\n x: Math.random() * 3,\n y: Math.random() * 20,\n label: 'red',\n size: 12,\n rotation: 45\n },\n {x: Math.random() * 3, y: Math.random() * 20, label: 'blue', size: 4}\n ];\n}\n\nexport default class Example extends React.Component {\n state = {\n data: [\n {\n x: 3,\n y: 7,\n label: 'Wigglytuff',\n size: 30,\n style: {fontSize: 20},\n rotation: 45\n },\n {x: 2, y: 4, label: 'Psyduck', size: 10},\n {x: 1, y: 20, label: 'Geodude', size: 1},\n {x: 4, y: 12, label: 'Ditto', size: 12, rotation: 45},\n {x: 1, y: 14, label: 'Snorlax', size: 4}\n ]\n };\n render() {\n const {data} = this.state;\n return (\n \n this.setState({data: generateData()})}\n buttonContent=\"UPDATE\"\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/misc/null-data-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n AreaSeries,\n Crosshair,\n XYPlot,\n XAxis,\n YAxis,\n HorizontalGridLines,\n VerticalGridLines,\n LineMarkSeries\n} from 'react-vis';\n\nconst DATA = [\n [\n {x: 1, y: 10},\n {x: 2, y: 10},\n {x: 3, y: 13},\n {x: 4, y: 7},\n {x: 5, y: null}\n ],\n [\n {x: 1, y: 30},\n {x: 2, y: 0},\n {x: 5, y: null},\n {x: 4, y: 15},\n {x: 5, y: null}\n ]\n];\n\nexport default class NullDataExample extends React.Component {\n state = {\n crosshairValues: []\n };\n\n onMouseLeave = () => this.setState({crosshairValues: []});\n onNearestX = (value, {index}) =>\n this.setState({\n crosshairValues: DATA.map(d => d[index].y !== null && d[index])\n });\n\n render() {\n return (\n \n d.y !== null}\n onNearestX={this.onNearestX}\n data={DATA[0]}\n />\n d.y !== null} data={DATA[1]} />\n \n );\n }\n}\n"
},
{
"path": "packages/showcase/misc/selection-plot-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n MarkSeries,\n Highlight\n} from 'react-vis';\n\nimport {generateSeededRandom} from '../showcase-utils';\nconst seededRandom = generateSeededRandom(36);\n\n// randomly generated data\nconst data = [...new Array(10)].map(() => ({\n x: seededRandom() * 3,\n y: seededRandom() * 11 + 4,\n size: seededRandom() * 30 + 1\n}));\n\nexport default class SelectionPlotExample extends React.Component {\n state = {\n filter: null\n };\n render() {\n const {filter} = this.state;\n const highlightPoint = d => {\n if (!filter) {\n return false;\n }\n return d.y <= filter.top && d.y >= filter.bottom;\n };\n\n const numSelectedPoints = filter ? data.filter(highlightPoint).length : 0;\n return (\n \n
\n (highlightPoint(d) ? '#EF5D28' : '#12939A')}\n data={data}\n />\n this.setState({filter: area})}\n onBrushEnd={area => this.setState({filter: area})}\n />\n \n
{`There are ${numSelectedPoints} selected points`}
\n
\n \n \n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/misc/time-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n HorizontalGridLines,\n VerticalGridLines,\n LineSeries\n} from 'react-vis';\n\nconst MSEC_DAILY = 86400000;\n\nexport default function Example() {\n const timestamp = new Date('September 9 2017').getTime();\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/misc/triangle-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {XYPlot, PolygonSeries, XAxis, YAxis, GradientDefs} from 'react-vis';\n\nfunction buildTriangle(sideWidth, lowerLeftCoord) {\n const {x, y} = lowerLeftCoord;\n const triangle = [\n [\n {x, y},\n {x, y: y + sideWidth},\n {x: x + sideWidth, y}\n ]\n ];\n if (sideWidth < 0.5) {\n return triangle;\n }\n const newWidth = sideWidth * 0.5;\n const a = buildTriangle(newWidth, lowerLeftCoord);\n const b = buildTriangle(newWidth, {x: x + sideWidth, y});\n const c = buildTriangle(newWidth, {x, y: y + sideWidth});\n return triangle\n .concat(a)\n .concat(b)\n .concat(c);\n}\n\nconst triangles = buildTriangle(7, {x: 0, y: 0});\n\nexport default class Example extends React.Component {\n state = {\n hoveredIndex: false\n };\n\n render() {\n const {hoveredIndex} = this.state;\n\n return (\n \n \n \n \n this.setState({hoveredIndex: index})}\n onSeriesMouseOut={() => this.setState({hoveredIndex: false})}\n color={index !== hoveredIndex ? 'url(#grad1)' : null}\n style={{\n strokeWidth: 0.5,\n strokeOpacity: 1,\n opacity: 0.5,\n fill: index === hoveredIndex ? '#EF5D28' : null\n }}\n />\n );\n })}\n \n );\n }\n}\n"
},
{
"path": "packages/showcase/misc/voronoi-line-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n HorizontalGridLines,\n VerticalGridLines,\n LineSeries,\n MarkSeries,\n Voronoi\n} from 'react-vis';\n\nconst lines = [\n [\n {x: 1, y: 3},\n {x: 2, y: 5},\n {x: 3, y: 15},\n {x: 4, y: 12}\n ],\n [\n {x: 1, y: 10},\n {x: 2, y: 4},\n {x: 3, y: 2},\n {x: 4, y: 15}\n ],\n [\n {x: 1, y: 7},\n {x: 2, y: 11},\n {x: 3, y: 9},\n {x: 4, y: 2}\n ]\n].map((p, i) => p.map(d => ({...d, line: i})));\nconst nodes = lines.reduce((acc, d) => [...acc, ...d], []);\n\nconst getDomain = (data, key) => {\n const {min, max} = data.reduce(\n (acc, row) => ({\n min: Math.min(acc.min, row[key]),\n max: Math.max(acc.max, row[key])\n }),\n {min: Infinity, max: -Infinity}\n );\n return [min, max];\n};\nconst xDomain = getDomain(nodes, 'x');\nconst yDomain = getDomain(nodes, 'y');\n\nexport default class Example extends React.Component {\n state = {\n hoveredNode: null,\n showVoronoi: false\n };\n\n render() {\n const {hoveredNode, showVoronoi} = this.state;\n return (\n \n \n this.setState({showVoronoi: !showVoronoi})}\n />\n Show Voronoi\n \n \n [...acc, ...d], [])}\n onHover={node => this.setState({hoveredNode: node})}\n onBlur={() => this.setState({hoveredNode: null})}\n polygonStyle={{stroke: showVoronoi ? 'rgba(0, 0, 0, .2)' : null}}\n />\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/misc/zoomable-chart-example.js",
"content": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XAxis,\n YAxis,\n HorizontalGridLines,\n XYPlot,\n LineSeries,\n Highlight\n} from 'react-vis';\nimport {generateSeededRandom} from '../showcase-utils';\n\nconst seededRandom = generateSeededRandom(9);\nconst totalValues = 100;\n\n/**\n * Get the array of x and y pairs.\n * The function tries to avoid too large changes of the chart.\n * @param {number} total Total number of values.\n * @returns {Array} Array of data.\n * @private\n */\nfunction getRandomSeriesData(total) {\n const result = [];\n let lastY = seededRandom() * 40 - 20;\n let y;\n const firstY = lastY;\n for (let i = 0; i < total; i++) {\n y = seededRandom() * firstY - firstY / 2 + lastY;\n result.push({\n x: i,\n y\n });\n lastY = y;\n }\n return result;\n}\n\nexport default class ZoomableChartExample extends React.Component {\n state = {\n lastDrawLocation: null,\n series: [\n {\n data: getRandomSeriesData(totalValues),\n disabled: false,\n title: 'Apples'\n },\n {\n data: getRandomSeriesData(totalValues),\n disabled: false,\n title: 'Bananas'\n }\n ]\n };\n\n render() {\n const {series, lastDrawLocation} = this.state;\n return (\n \n
\n \n this.setState({lastDrawLocation: area})}\n onDrag={area => {\n this.setState({\n lastDrawLocation: {\n bottom: lastDrawLocation.bottom + (area.top - area.bottom),\n left: lastDrawLocation.left - (area.right - area.left),\n right: lastDrawLocation.right - (area.right - area.left),\n top: lastDrawLocation.top + (area.top - area.bottom)\n }\n });\n }}\n />\n \n
\n\n
this.setState({lastDrawLocation: null})}\n >\n Reset Zoom\n \n\n \n
\n Last Draw Area \n \n {lastDrawLocation ? (\n
\n \n Top: {lastDrawLocation.top}\n \n \n Right: {lastDrawLocation.right}\n \n \n Bottom: {lastDrawLocation.bottom}\n \n \n Left: {lastDrawLocation.left}\n \n \n ) : (\n
N/A \n )}\n
\n
''}\n width={400}\n height={300}\n />\n this.setState({data: generateData()})}\n buttonContent={'UPDATE DATA'}\n />\n wideFormat(t)}\n margin={50}\n colorRange={['#172d47', '#911116', '#998965']}\n domains={[\n {name: 'mileage', domain: [0, 10]},\n {\n name: 'price',\n domain: [2, 16],\n tickFormat: t => `$${basicFormat(t)}`,\n getValue: d => d.price\n },\n {name: 'safety', domain: [5, 10], getValue: d => d.safety},\n {name: 'performance', domain: [0, 10], getValue: d => d.performance},\n {name: 'interior', domain: [0, 7], getValue: d => d.interior},\n {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}\n ]}\n showMarks\n width={400}\n height={300}\n />\n );\n}\n"
},
{
"path": "packages/showcase/parallel-coordinates/brushed-parallel-coordinates.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {ParallelCoordinates} from 'react-vis';\nimport IrisData from '../datasets/iris.json';\n\n// {\"sepal length\": 5.1, \"sepal width\": 3.5, \"petal length\": 1.4, \"petal width\": 0.2, \"species\": \"setosa\"},\n\nconst SPECIES_COLORS = {\n setosa: '#12939A',\n virginica: '#79C7E3',\n versicolor: '#1A3177'\n};\n\nconst domainStructure = Object.keys(IrisData[0])\n .filter(name => name !== 'species')\n .map(name => ({name, domain: [Infinity, -Infinity]}));\n\nconst domains = IrisData.reduce((acc, row) => {\n return acc.map(d => {\n return {\n name: d.name,\n domain: [\n Math.min(d.domain[0], row[d.name]),\n Math.max(d.domain[1], row[d.name])\n ]\n };\n });\n}, domainStructure);\n\nexport default function BrushedParallelCoordinates() {\n return (\n ({...d, color: SPECIES_COLORS[d.species]}))}\n domains={domains}\n margin={60}\n width={600}\n height={400}\n />\n );\n}\n"
},
{
"path": "packages/showcase/plot/area-chart-elevated.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n LineMarkSeries,\n AreaSeries\n} from 'react-vis';\n\nexport default function AreaChartElevated() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/area-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n AreaSeries\n} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/axis-with-turned-labels.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalBarSeries\n} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/bar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalBarSeries,\n VerticalBarSeriesCanvas,\n LabelSeries\n} from 'react-vis';\n\nconst greenData = [\n {x: 'A', y: 10},\n {x: 'B', y: 5},\n {x: 'C', y: 15}\n];\n\nconst blueData = [\n {x: 'A', y: 12},\n {x: 'B', y: 2},\n {x: 'C', y: 11}\n];\n\nconst labelData = greenData.map((d, idx) => ({\n x: d.x,\n y: Math.max(greenData[idx].y, blueData[idx].y)\n}));\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n\n render() {\n const {useCanvas} = this.state;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n d.x} />\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/big-base-bar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalBarSeries,\n VerticalBarSeriesCanvas\n} from 'react-vis';\n\nconst myDATA = [\n {id: '00036', y: 200400, x: 1504121437},\n {id: '00036', y: 200350, x: 1504121156},\n {id: '00036', y: 200310, x: 1504120874},\n {id: '00036', y: 200260, x: 1504120590},\n {id: '00036', y: 200210, x: 1504120306},\n {id: '00036', y: 200160, x: 1504120024},\n {id: '00036', y: 200120, x: 1504119740},\n {id: '00036', y: 200070, x: 1504119458},\n {id: '00036', y: 200020, x: 1504119177},\n {id: '00036', y: 199980, x: 1504118893},\n {id: '00036', y: 199930, x: 1504118611},\n {id: '00036', y: 199880, x: 1504118330},\n {id: '00036', y: 199830, x: 1504118048},\n {id: '00036', y: 199790, x: 1504117763},\n {id: '00036', y: 199740, x: 1504117481}\n];\n\nconst yDomain = myDATA.reduce(\n (res, row) => {\n return {\n max: Math.max(res.max, row.y),\n min: Math.min(res.min, row.y)\n };\n },\n {max: -Infinity, min: Infinity}\n);\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n\n render() {\n const {useCanvas} = this.state;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/clustered-stacked-bar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalBarSeries,\n VerticalBarSeriesCanvas,\n DiscreteColorLegend\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/complex-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XAxis,\n YAxis,\n FlexibleWidthXYPlot,\n HorizontalGridLines,\n LineSeries,\n VerticalRectSeries,\n DiscreteColorLegend,\n Crosshair\n} from 'react-vis';\n\n/**\n * Get the array of x and y pairs.\n * The function tries to avoid too large changes of the chart.\n * @param {number} total Total number of values.\n * @returns {Array} Array of data.\n * @private\n */\nfunction getRandomSeriesData(total) {\n const result = [];\n let lastY = Math.random() * 40 - 20;\n let y;\n const firstY = lastY;\n for (let i = 0; i < Math.max(total, 3); i++) {\n y = Math.random() * firstY - firstY / 2 + lastY;\n result.push({\n left: i,\n top: y\n });\n lastY = y;\n }\n return result;\n}\n\nexport default class Example extends React.Component {\n constructor(props) {\n super(props);\n const totalValues = Math.random() * 50;\n this.state = {\n crosshairValues: [],\n series: [\n {\n title: 'Apples',\n disabled: false,\n data: getRandomSeriesData(totalValues)\n },\n {\n title: 'Bananas',\n disabled: false,\n data: getRandomSeriesData(totalValues)\n }\n ]\n };\n }\n\n /**\n * A callback to format the crosshair items.\n * @param {Object} values Array of values.\n * @returns {Array} Array of objects with titles and values.\n * @private\n */\n _formatCrosshairItems = values => {\n const {series} = this.state;\n return values.map((v, i) => {\n return {\n title: series[i].title,\n value: v.top\n };\n });\n };\n\n /**\n * Format the title line of the crosshair.\n * @param {Array} values Array of values.\n * @returns {Object} The caption and the value of the title.\n * @private\n */\n _formatCrosshairTitle = values => {\n return {\n title: 'X',\n value: values[0].left\n };\n };\n\n /**\n * Click handler for the legend.\n * @param {Object} item Clicked item of the legend.\n * @param {number} i Index of the legend.\n * @private\n */\n _legendClickHandler = (item, i) => {\n const {series} = this.state;\n series[i].disabled = !series[i].disabled;\n this.setState({series});\n };\n\n /**\n * Event handler for onMouseLeave.\n * @private\n */\n _mouseLeaveHandler = () => {\n this.setState({crosshairValues: []});\n };\n\n /**\n * Event handler for onNearestX.\n * @param {Object} value Selected value.\n * @param {number} index Index of the series.\n * @private\n */\n _nearestXHandler = (value, {index}) => {\n const {series} = this.state;\n this.setState({\n crosshairValues: series.map(s => s.data[index])\n });\n };\n\n _updateButtonClicked = () => {\n const {series} = this.state;\n const totalValues = Math.random() * 50;\n series.forEach(s => {\n s.data = getRandomSeriesData(totalValues);\n });\n this.setState({series});\n };\n\n render() {\n const {series, crosshairValues} = this.state;\n return (\n \n
\n
\n\n
\n d.left}\n getY={d => d.top}\n onMouseLeave={this._mouseLeaveHandler}\n xDomain={[-0.5, series[0].data.length - 1]}\n height={300}\n >\n ({\n x0: left - 0.5,\n left: left + 0.5,\n top\n }))}\n stroke=\"white\"\n onNearestX={this._nearestXHandler}\n {...(series[0].disabled ? {opacity: 0.2} : null)}\n />\n
\n\n
\n Click to update\n \n
\n d.waiting}\n getY={d => d.eruptions}\n height={300}\n >\n this.setState({data: updateData()})}\n buttonContent={'UPDATE'}\n />\n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/custom-scales.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n HorizontalGridLines,\n VerticalGridLines,\n LineSeries\n} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/custom-svg-all-the-marks.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n CustomSVGSeries,\n Hint\n} from 'react-vis';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nfunction generateData(reversed) {\n return ['star', 'square', 'circle', 'diamond'].reduce(\n (acc, row, rowIndex) => {\n const cellsInRow = [...new Array(5)].map((cell, index) => {\n return {\n x: index,\n y: reversed ? (5 - rowIndex) * 5 : rowIndex * 5,\n size: (index + 1) * 3,\n customComponent: row\n };\n });\n\n return acc.concat(cellsInRow);\n },\n []\n );\n}\n\nconst DATA = generateData(false);\nconst REVERSED_DATA = generateData(true);\n\nconst tipStyle = {\n display: 'flex',\n color: '#fff',\n background: '#000',\n alignItems: 'center',\n padding: '5px'\n};\n\nexport default class Example extends React.Component {\n state = {\n reverse: false\n };\n render() {\n const {reverse, hoveredCell} = this.state;\n\n return (\n \n
this.setState({reverse: !reverse})}\n />\n \n {\n this.setState({hoveredCell: v});\n }}\n onValueMouseOut={() => this.setState({hoveredCell: false})}\n />\n {hoveredCell && (\n \n {hoveredCell.customComponent}
\n \n )}\n \n \n {\n return (\n \n \n {`x: ${positionInPixels.x}`} \n {`y: ${positionInPixels.y}`} \n \n \n );\n }\n }\n ]}\n />\n \n );\n}\n"
},
{
"path": "packages/showcase/plot/custom-svg-root-level.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n CustomSVGSeries\n} from 'react-vis';\n\nexport default function CustomSVGRootLevelComponent() {\n return (\n \n {\n return (\n \n \n {`x: ${positionInPixels.x}`} \n {`y: ${positionInPixels.y}`} \n \n \n );\n }}\n data={[\n {x: 1, y: 10, size: 3},\n {x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}},\n {x: 2, y: 5},\n {x: 3, y: 15},\n {x: 2.5, y: 7}\n ]}\n />\n \n );\n}\n"
},
{
"path": "packages/showcase/plot/difference-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalBarSeries,\n VerticalBarSeriesCanvas\n} from 'react-vis';\n\n// When making a difference chart you are specifying in coordinates\n// where you want your bars to start and stop\nconst myDATA = [...new Array(15)].map((x, idx) => ({\n x: idx,\n // if the bars are above zero then we start them at zero\n y0: idx - 4 < 0 ? idx - 4 : 0,\n // if the bars are below zero then we stop them at zero\n y: idx < 5 ? 0 : Math.abs(idx - 4)\n}));\n\nconst yDomain = myDATA.reduce(\n (res, row) => ({\n max: Math.max(res.max, row.y, row.y0),\n min: Math.min(res.min, row.y, row.y0)\n }),\n {max: -Infinity, min: Infinity}\n);\n\nexport default class DifferenceChart extends React.Component {\n state = {\n useCanvas: false\n };\n\n render() {\n const {useCanvas} = this.state;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n {\n return d.y0 < 0 ? '#EF5D28' : '#1A3177';\n }}\n />\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/faux-radial-scatterplot.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {XYPlot, XAxis, YAxis, MarkSeries, CircularGridLines} from 'react-vis';\n\nconst data = [\n {r: 1, theta: Math.PI / 3, size: 30},\n {r: 1.7, theta: (2 * Math.PI) / 3, size: 10},\n {r: 2, theta: Math.PI, size: 1},\n {r: 3, theta: (3 * Math.PI) / 2, size: 12},\n {r: 2.5, theta: Math.PI / 4, size: 4},\n {r: 0, theta: Math.PI / 4, size: 1}\n];\n\nconst margin = {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n};\n\nconst WIDTH = 300;\nconst HEIGHT = 300;\n\nexport default function Example() {\n return (\n \n ({\n ...row,\n x: Math.cos(row.theta) * row.r,\n y: Math.sin(row.theta) * row.r\n }))}\n />\n \n );\n}\n"
},
{
"path": "packages/showcase/plot/grid.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/heatmap-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React, {Component} from 'react';\n\nimport {XYPlot, XAxis, YAxis, HeatmapSeries, Hint} from 'react-vis';\n\nexport default class HeatmapChart extends Component {\n state = {\n value: false\n };\n\n render() {\n const {value} = this.state;\n return (\n \n this.setState({value: v})}\n onSeriesMouseOut={() => this.setState({value: false})}\n data={[\n {x: 1, y: 0, color: 10},\n {x: 1, y: 5, color: 10},\n {x: 1, y: 10, color: 6},\n {x: 1, y: 15, color: 7},\n {x: 2, y: 0, color: 12},\n {x: 2, y: 5, color: 2},\n {x: 2, y: 10, color: 1},\n {x: 2, y: 15, color: 12},\n {x: 3, y: 0, color: 9},\n {x: 3, y: 5, color: 2},\n {x: 3, y: 10, color: 6},\n {x: 3, y: 15, color: 12}\n ]}\n />\n {value !== false && \n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/hex-heatmap.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React, {Component} from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nimport {XYPlot, XAxis, YAxis, HexbinSeries, Borders, Hint} from 'react-vis';\n\nimport DATA from '../datasets/old-faithful.json';\n\nfunction updateData() {\n return DATA.map(row => ({\n waiting: row.waiting + (Math.random() - 0.5) * 10,\n eruptions: row.eruptions + (Math.random() - 0.5) * 2\n }));\n}\nexport default class HexHeatmap extends Component {\n state = {\n data: DATA,\n hoveredNode: null,\n radius: 10,\n offset: 0\n };\n render() {\n const {data, radius, hoveredNode, offset} = this.state;\n\n return (\n \n d.waiting}\n getY={d => d.eruptions}\n onMouseLeave={() => this.setState({hoveredNode: null})}\n height={300}\n >\n this.setState({hoveredNode: d})}\n xOffset={offset}\n yOffset={offset}\n colorRange={['orange', 'cyan']}\n radius={radius}\n data={data}\n />\n d.x}\n getY={d => d.y}\n value={{\n x: hoveredNode.x,\n y: hoveredNode.y,\n value: hoveredNode.length\n }}\n />\n )}\n \n this.setState({data: updateData()})}\n buttonContent={'UPDATE DATA'}\n />\n \n this.setState({radius: (Math.random() - 0.5) * 10 + 10})\n }\n buttonContent={'UPDATE RADIUS'}\n />\n \n this.setState({offset: (Math.random() - 0.5) * 10 + 10})\n }\n buttonContent={'UPDATE OFFSET'}\n />\n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/hexbin-size-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React, {Component} from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nimport {XYPlot, XAxis, YAxis, HexbinSeries, ChartLabel} from 'react-vis';\n\nimport DATA from '../datasets/car-data.json';\n\nconst DIMENSIONS = [\n 'economy (mpg)',\n 'cylinders',\n 'displacement (cc)',\n 'power (hp)',\n 'weight (lb)',\n '0-60 mph (s)',\n 'year'\n];\n\nexport default class HexbinSizeExample extends Component {\n state = {\n xAxis: 0,\n yAxis: 3\n };\n\n updateX(increment) {\n this.setState({\n xAxis: (this.state.xAxis + (increment ? 1 : -1)) % DIMENSIONS.length\n });\n }\n\n updateY(increment) {\n this.setState({\n yAxis: (this.state.yAxis + (increment ? 1 : -1)) % DIMENSIONS.length\n });\n }\n\n render() {\n const {xAxis, yAxis} = this.state;\n const data = DATA.map(d => ({\n x: Number(d[DIMENSIONS[xAxis]]),\n y: Number(d[DIMENSIONS[yAxis]])\n }));\n\n return (\n \n
\n
this.updateX(false)}\n buttonContent={'PREV X'}\n />\n {`X AXIS ${DIMENSIONS[xAxis]}`}
\n this.updateX(true)}\n buttonContent={'NEXT X'}\n />\n \n
\n
this.updateY(false)}\n buttonContent={'PREV Y'}\n />\n {`Y AXIS ${DIMENSIONS[yAxis]}`}
\n this.updateY(true)}\n buttonContent={'NEXT Y'}\n />\n \n
this.setState({hoveredNode: null})}\n height={300}\n margin={50}\n >\n \n `${letter}1`)}\n yType=\"ordinal\"\n yDomain={alphabet.map(letter => `${letter}2`).reverse()}\n margin={50}\n width={500}\n height={500}\n >\n exampleColorScale(d.color)}\n style={{\n stroke: 'white',\n strokeWidth: '2px',\n rectStyle: {\n rx: 10,\n ry: 10\n }\n }}\n className=\"heatmap-series-example\"\n data={data}\n onValueMouseOver={v => this.setState({value: v})}\n onSeriesMouseOut={() => this.setState({value: false})}\n />\n `${d.color}`}\n />\n {value !== false && \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/line-chart-canvas.js",
"content": "// Copyright (c) 2016 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n LineMarkSeriesCanvas,\n LineMarkSeries,\n LineSeriesCanvas,\n LineSeries,\n Crosshair\n} from 'react-vis';\n\nfunction getRandomData() {\n return new Array(1000).fill(0).map((row, i) => ({\n x: i,\n y: Math.random() * 20,\n color: Math.random() * 10\n }));\n}\n\nconst randomData = getRandomData();\n\nconst colorRanges = {\n typeA: ['#59E4EC', '#0D676C'],\n typeB: ['#EFC1E3', '#B52F93']\n};\n\nconst nextType = {\n typeA: 'typeB',\n typeB: 'typeA'\n};\n\nconst nextModeContent = {\n canvas: 'SWITCH TO SVG',\n svg: 'SWITCH TO CANVAS'\n};\n\nconst drawModes = ['canvas', 'svg'];\n\nexport default class Example extends React.Component {\n state = {\n drawMode: 0,\n data: randomData,\n colorType: 'typeA',\n strokeWidth: 1,\n showMarks: true,\n value: false,\n hideComponent: false\n };\n\n render() {\n const {\n colorType,\n drawMode,\n data,\n hideComponent,\n strokeWidth,\n showMarks,\n value\n } = this.state;\n const lineSeriesProps = {\n animation: true,\n className: 'mark-series-example',\n sizeRange: [5, 15],\n color: colorType === 'typeA' ? '#0D676C' : '#B52F93',\n colorRange: colorRanges[colorType],\n opacityType: 'literal',\n strokeWidth,\n data,\n onNearestX: d => this.setState({value: d})\n };\n const SVGComponent = showMarks ? LineMarkSeries : LineSeries;\n const CanvasComponent = showMarks ? LineMarkSeriesCanvas : LineSeriesCanvas;\n\n const mode = drawModes[drawMode];\n return (\n \n
\n
{`Mode: ${mode}`}
\n
this.setState({drawMode: (drawMode + 1) % 2})}\n buttonContent={nextModeContent[mode]}\n />\n this.setState({showMarks: !showMarks})}\n buttonContent={showMarks ? 'HIDE MARKS' : 'SHOW MARKS'}\n />\n this.setState({data: getRandomData()})}\n buttonContent={'UPDATE DATA'}\n />\n this.setState({colorType: nextType[colorType]})}\n buttonContent={`TOGGLE COLOR to ${nextType[colorType]}`}\n />\n \n this.setState({strokeWidth: strokeWidth === 1 ? 2 : 1})\n }\n buttonContent={'TOGGLE STROKEWIDTH'}\n />\n this.setState({hideComponent: !hideComponent})}\n buttonContent={hideComponent ? 'SHOW' : 'HIDE'}\n />\n \n {!hideComponent && (\n
this.setState({value: false})}\n width={600}\n height={300}\n >\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/line-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport {curveCatmullRom} from 'd3-shape';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n ChartLabel,\n HorizontalGridLines,\n VerticalGridLines,\n LineSeries,\n LineSeriesCanvas\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n const Line = useCanvas ? LineSeriesCanvas : LineSeries;\n\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/line-series-canvas-nearest-xy-example.js",
"content": "// Copyright (c) 2016-2018 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\nimport React from 'react';\nimport {XYPlot, LineSeriesCanvas, MarkSeriesCanvas} from 'react-vis';\nconst k = 100;\nconst data = Array(k)\n .fill(0)\n .map((n, x) => ({x, y: x % 2 ? 180 : -180}));\n\nexport default class LineSeriesCanvasNearestXYExample extends React.Component {\n state = {\n nearestXY: data[0]\n };\n\n render() {\n const {nearestXY} = this.state;\n return (\n \n {\n this.setState({nearestXY: point})}\n data={data}\n />\n }\n {\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/mixed-stacked-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalBarSeries,\n VerticalBarSeriesCanvas,\n LineSeries\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/scatterplot-canvas.js",
"content": "// Copyright (c) 2016 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n MarkSeries,\n MarkSeriesCanvas,\n Hint\n} from 'react-vis';\n\nfunction getRandomData() {\n return new Array(100).fill(0).map(() => ({\n x: Math.random() * 10,\n y: Math.random() * 20,\n size: Math.random() * 10,\n color: Math.random() * 10,\n opacity: Math.random() * 0.5 + 0.5\n }));\n}\nconst colorRanges = {\n typeA: ['#59E4EC', '#0D676C'],\n typeB: ['#EFC1E3', '#B52F93']\n};\n\nconst randomData = getRandomData();\nconst nextType = {\n typeA: 'typeB',\n typeB: 'typeA'\n};\n\nconst nextModeContent = {\n canvas: 'SWITCH TO SVG',\n svg: 'SWITCH TO CANVAS'\n};\n\nconst drawModes = ['canvas', 'svg'];\n\nexport default class Example extends React.Component {\n state = {\n drawMode: 0,\n data: randomData,\n colorType: 'typeA',\n value: false\n };\n\n render() {\n const {drawMode, data, colorType} = this.state;\n const markSeriesProps = {\n animation: true,\n className: 'mark-series-example',\n sizeRange: [5, 15],\n seriesId: 'my-example-scatterplot',\n colorRange: colorRanges[colorType],\n opacityType: 'literal',\n data,\n onNearestXY: value => this.setState({value})\n };\n\n const mode = drawModes[drawMode];\n return (\n \n
\n
{`MODE: ${mode}`}
\n
this.setState({drawMode: (drawMode + 1) % 2})}\n buttonContent={nextModeContent[mode]}\n />\n this.setState({data: getRandomData()})}\n buttonContent={'UPDATE DATA'}\n />\n this.setState({colorType: nextType[colorType]})}\n buttonContent={'UPDATE COLOR'}\n />\n \n
this.setState({value: false})}\n width={600}\n height={300}\n >\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/stacked-histogram.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalRectSeries,\n VerticalRectSeriesCanvas\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const RectSeries = useCanvas\n ? VerticalRectSeriesCanvas\n : VerticalRectSeries;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/stacked-horizontal-bar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n HorizontalBarSeries,\n HorizontalBarSeriesCanvas\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const BarSeries = useCanvas\n ? HorizontalBarSeriesCanvas\n : HorizontalBarSeries;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/stacked-vertical-bar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n VerticalBarSeries,\n VerticalBarSeriesCanvas\n} from 'react-vis';\n\nexport default class Example extends React.Component {\n state = {\n useCanvas: false\n };\n render() {\n const {useCanvas} = this.state;\n const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries;\n const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS';\n return (\n \n this.setState({useCanvas: !useCanvas})}\n buttonContent={content}\n />\n \n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/plot/whisker-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n WhiskerSeries\n} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/plot/width-height-margin.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {XYPlot, XAxis, YAxis, VerticalGridLines, LineSeries} from 'react-vis';\n\nexport default function Example() {\n return (\n \n \n );\n}\n"
},
{
"path": "packages/showcase/radar-chart/animated-radar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React, {Component} from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport RadarChart from 'react-vis/radar-chart';\nimport CircularGridLines from 'react-vis/plot/circular-grid-lines';\n\nconst DATA = [\n {\n explosions: 7,\n wow: 10,\n dog: 8,\n sickMoves: 9,\n nice: 7\n }\n];\n\nconst DOMAIN = [\n {name: 'nice', domain: [0, 100], tickFormat: t => t},\n {name: 'explosions', domain: [6.9, 7.1]},\n {name: 'wow', domain: [0, 11]},\n {name: 'dog', domain: [0, 16]},\n {name: 'sickMoves', domain: [0, 20]}\n];\n\nfunction generateData() {\n return [\n Object.keys(DATA[0]).reduce((acc, key) => {\n acc[key] = DATA[0][key] + 5 * (Math.random() - 0.5);\n return acc;\n }, {})\n ];\n}\n\nexport default class AnimatedRadar extends Component {\n state = {\n data: DATA\n };\n\n render() {\n const {data} = this.state;\n\n return (\n \n ''}\n width={400}\n height={300}\n >\n i / 10 - 1)}\n />\n \n this.setState({data: generateData()})}\n buttonContent={'UPDATE DATA'}\n />\n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/radar-chart/basic-radar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport {format} from 'd3-format';\n\nimport RadarChart from 'react-vis/radar-chart';\n\nconst DATA = [\n {\n name: 'Mercedes',\n mileage: 7,\n price: 10,\n safety: 8,\n performance: 9,\n interior: 7,\n warranty: 7\n },\n {\n name: 'Honda',\n mileage: 8,\n price: 6,\n safety: 9,\n performance: 6,\n interior: 3,\n warranty: 9\n },\n {\n name: 'Chevrolet',\n mileage: 5,\n price: 4,\n safety: 6,\n performance: 4,\n interior: 5,\n warranty: 6\n }\n];\n\nconst basicFormat = format('.2r');\nconst wideFormat = format('.3r');\n\nexport default function BasicRadarChart() {\n return (\n wideFormat(t)}\n startingAngle={0}\n domains={[\n {name: 'mileage', domain: [0, 10]},\n {\n name: 'price',\n domain: [2, 16],\n tickFormat: t => `$${basicFormat(t)}`,\n getValue: d => d.price\n },\n {name: 'safety', domain: [5, 10], getValue: d => d.safety},\n {name: 'performance', domain: [0, 10], getValue: d => d.performance},\n {name: 'interior', domain: [0, 7], getValue: d => d.interior},\n {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}\n ]}\n width={400}\n height={300}\n />\n );\n}\n"
},
{
"path": "packages/showcase/radar-chart/four-quadrant-radar-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport RadarChart from 'react-vis/radar-chart';\n\nconst RADAR_PROPS = {\n data: [\n {\n C: 30,\n VisualBasics: 60,\n Excel: 40,\n Access: 40\n }\n ],\n domains: [\n {name: 'C', domain: [0, 100]},\n {name: 'VisualBasics', domain: [0, 100]},\n {name: 'Excel', domain: [0, 100]},\n {name: 'Access', domain: [0, 100]}\n ],\n height: 300,\n width: 400\n};\n\nexport default function FourQuadrantRadarChart() {\n return (\n wideFormat(t)}\n startingAngle={0}\n domains={[\n {name: 'mileage', domain: [0, 10]},\n {\n name: 'price',\n domain: [2, 16],\n tickFormat: t => `$${basicFormat(t)}`,\n getValue: d => d.price\n },\n {name: 'safety', domain: [5, 10], getValue: d => d.safety},\n {name: 'performance', domain: [0, 10], getValue: d => d.performance},\n {name: 'interior', domain: [0, 7], getValue: d => d.interior},\n {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}\n ]}\n width={400}\n height={300}\n onSeriesMouseOver={data => {\n this.setState({hoveredCell: data.event[0]});\n }}\n onSeriesMouseOut={() => this.setState({hoveredCell: false})}\n >\n {hoveredCell && (\n \n {hoveredCell.name}
\n \n )}\n \n );\n }\n}\n"
},
{
"path": "packages/showcase/radar-chart/radar-chart-with-tooltips.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React, {Component} from 'react';\nimport RadarChart from 'react-vis/radar-chart';\nimport {Hint} from 'react-vis';\n\n// The first 6 data elements here are to simulate a 'spider' type of radar chart -\n// similar to CircularGridLines, but straight edges instead.\nconst DATA = [\n {\n name: 'Spider5',\n mileage: 5,\n price: 5,\n safety: 5,\n performance: 5,\n interior: 5,\n warranty: 5,\n fill: '#f8f8f8',\n stroke: '#cccccc'\n },\n {\n name: 'Spider4',\n mileage: 4,\n price: 4,\n safety: 4,\n performance: 4,\n interior: 4,\n warranty: 4,\n fill: 'white',\n stroke: '#cccccc'\n },\n {\n name: 'Spider3',\n mileage: 3,\n price: 3,\n safety: 3,\n performance: 3,\n interior: 3,\n warranty: 3,\n fill: '#f8f8f8',\n stroke: '#cccccc'\n },\n {\n name: 'Spider2',\n mileage: 2,\n price: 2,\n safety: 2,\n performance: 2,\n interior: 2,\n warranty: 2,\n fill: 'white',\n stroke: '#cccccc'\n },\n {\n name: 'Spider1',\n mileage: 1,\n price: 1,\n safety: 1,\n performance: 1,\n interior: 1,\n warranty: 1,\n fill: '#f8f8f8',\n stroke: '#cccccc'\n },\n {\n name: 'Spider0',\n mileage: 0.1,\n price: 0.1,\n safety: 0.1,\n performance: 0.1,\n interior: 0.1,\n warranty: 0.1,\n fill: '#f8f8f8',\n stroke: '#cccccc'\n },\n {\n name: 'Mercedes',\n mileage: 3,\n price: 4,\n safety: 5,\n performance: 1.5,\n interior: 4,\n warranty: 4.5,\n fill: 'rgba(114,172,240,0.5)',\n stroke: 'rgba(114,172,240,0.2)'\n }\n];\n\nconst tipStyle = {\n display: 'flex',\n color: '#fff',\n background: '#000',\n alignItems: 'center',\n padding: '5px'\n};\n\nexport default class RadarChartWithTooltips extends Component {\n state = {\n hoveredCell: false\n };\n\n render() {\n const {hoveredCell} = this.state;\n\n return (\n {\n return '';\n }}\n domains={[\n {\n name: 'mileage',\n domain: [0, 5],\n tickFormat: t => {\n if (t < 5 && t > 0) {\n return Math.round(t);\n }\n return '';\n }\n },\n {\n name: 'price',\n domain: [0, 5],\n getValue: d => d.price\n },\n {name: 'safety', domain: [0, 5], getValue: d => d.safety},\n {name: 'performance', domain: [0, 5], getValue: d => d.performance},\n {name: 'interior', domain: [0, 5], getValue: d => d.interior},\n {name: 'warranty', domain: [0, 5], getValue: d => d.warranty}\n ]}\n width={300}\n height={300}\n onValueMouseOver={v => {\n this.setState({hoveredCell: v});\n }}\n onValueMouseOut={() => this.setState({hoveredCell: false})}\n style={{\n polygons: {\n strokeWidth: 1,\n strokeOpacity: 0.8,\n fillOpacity: 0.8\n },\n labels: {\n textAnchor: 'middle'\n },\n axes: {\n line: {\n fillOpacity: 0.8,\n strokeWidth: 0.5,\n strokeOpacity: 0.8\n },\n ticks: {\n fillOpacity: 0,\n strokeOpacity: 0\n },\n text: {}\n }\n }}\n colorRange={['transparent']}\n hideInnerMostValues={false}\n renderAxesOverPolygons={true}\n >\n {hoveredCell && hoveredCell.dataName === 'Mercedes' && (\n \n \n {hoveredCell.domain}: {hoveredCell.value}\n
\n \n )}\n \n );\n }\n}\n"
},
{
"path": "packages/showcase/radial-chart/arc-series-example.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport ShowcaseButton from '../showcase-components/showcase-button';\nimport {XYPlot, ArcSeries, XAxis, YAxis} from 'react-vis';\n\nimport {EXTENDED_DISCRETE_COLOR_RANGE as COLORS} from 'react-vis/theme';\n\nconst PI = Math.PI;\n\nfunction updateData() {\n const divider = Math.floor(Math.random() * 8 + 3);\n const newData = [...new Array(5)].map((row, index) => {\n return {\n color: index,\n radius0: Math.random() > 0.8 ? Math.random() + 1 : 0,\n radius: Math.random() * 3 + 1,\n angle: ((index + 1) * PI) / divider,\n angle0: (index * PI) / divider\n };\n });\n return newData.concat([\n {angle0: 0, angle: PI * 2 * Math.random(), radius: 1.1, radius0: 0.8}\n ]);\n}\n\nfunction updateLittleData() {\n const portion = Math.random();\n return [\n {\n angle0: 0,\n angle: portion * PI * 2,\n radius0: 0,\n radius: 10,\n color: COLORS[13]\n },\n {\n angle0: portion * PI * 2,\n angle: 2 * PI,\n radius0: 0,\n radius: 10,\n color: COLORS[12]\n }\n ];\n}\n\nexport default class Example extends React.Component {\n state = {\n data: updateData(),\n littleData: updateLittleData(),\n value: false\n };\n render() {\n return (\n \n
\n this.setState({\n data: updateData(),\n littleData: updateLittleData()\n })\n }\n buttonContent={'UPDATE'}\n />\n \n {\n if (this.state.value && this.state.value.color === row.color) {\n return {...row, style: {stroke: 'black', strokeWidth: '5px'}};\n }\n return row;\n })}\n colorRange={COLORS}\n onValueMouseOver={row => this.setState({value: row})}\n onSeriesMouseOut={() => this.setState({value: false})}\n colorType={'category'}\n />\n \n this.setState({hoveredSection: row.id})}\n onMouseLeave={() => this.setState({hoveredSection: false})}\n width={600}\n height={300}\n >\n d.theta}\n data={[\n {theta: 2, className: 'custom-class'},\n {theta: 6},\n {theta: 2},\n {theta: 3},\n {theta: 1}\n ]}\n onValueMouseOver={v => this.setState({value: v})}\n onSeriesMouseOut={() => this.setState({value: false})}\n width={300}\n height={300}\n padAngle={0.04}\n >\n {value !== false && `url(#${d.gradientLabel})`}\n data={[\n {angle: 1, gradientLabel: 'grad1'},\n {angle: 2, gradientLabel: 'grad2'},\n {angle: 5, gradientLabel: 'grad3'}\n ]}\n labelsRadiusMultiplier={1.1}\n labelsStyle={{fontSize: 16, fill: '#222'}}\n showLabels\n style={{stroke: '#fff', strokeWidth: 2}}\n width={400}\n height={300}\n >\n \n \n \n \n \n \n \n \n \n );\n}\n"
},
{
"path": "packages/showcase/radial-chart/simple-radial-chart.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport RadialChart from 'react-vis/radial-chart';\n\nexport default function SimpleRadialChart() {\n return (\n d.name}\n data={[\n {angle: 1, color: '#89DAC1', name: 'green', opacity: 0.2},\n {angle: 2, color: '#F6D18A', name: 'yellow'},\n {angle: 5, color: '#1E96BE', name: 'cyan'},\n {angle: 3, color: '#DA70BF', name: 'magenta'},\n {angle: 5, color: '#F6D18A', name: 'yellow again'}\n ]}\n labelsRadiusMultiplier={1.1}\n labelsStyle={{fontSize: 16, fill: '#222'}}\n showLabels\n style={{stroke: '#fff', strokeWidth: 2}}\n width={400}\n height={300}\n />\n );\n}\n"
},
{
"path": "packages/showcase/sankey/basic.js",
"content": "import React from 'react';\n\nimport Sankey from 'react-vis/sankey';\n\nconst nodes = [{name: 'a', rotation: 0}, {name: 'b'}, {name: 'c'}];\nconst links = [\n {source: 0, target: 1, value: 10, opacity: 0.2},\n {source: 0, target: 2, value: 20},\n {source: 1, target: 2, value: 20}\n];\n\nexport default function BasicSankeyExample() {\n return (\n \n
\n
\n
{MODE[modeIndex]}
\n
\n
\n
\n
\n
\n {`${\n activeLink\n ? `${nodes[activeLink.source.index].name} -> ${\n nodes[activeLink.target.index].name\n }`\n : 'None'\n } selected`}\n
\n
({...d}))}\n links={links.map((d, i) => ({\n ...d,\n opacity:\n activeLink && i === activeLink.index\n ? FOCUSED_LINK_OPACITY\n : BLURRED_LINK_OPACITY\n }))}\n width={200}\n height={200}\n onLinkMouseOver={node => this.setState({activeLink: node})}\n onLinkMouseOut={() => this.setState({activeLink: null})}\n />\n \n ({...d}))}\n links={links.map((d, i) => ({\n ...d,\n opacity:\n activeLink && i === activeLink.index\n ? FOCUSED_LINK_OPACITY\n : BLURRED_LINK_OPACITY\n }))}\n width={200}\n height={200}\n // do not use voronoi in combination with link mouse over\n hasVoronoi={false}\n onLinkMouseOver={node => this.setState({activeLink: node})}\n onLinkMouseOut={() => this.setState({activeLink: null})}\n >\n {activeLink && this._renderHint()}\n \n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/sankey/voronoi.js",
"content": "import React from 'react';\n\nimport Sankey from 'react-vis/sankey';\n\nconst BLURRED_NODE_OPACITY = 0.8;\nconst FOCUSED_NODE_OPACITY = 1;\n\nconst nodes = [{name: 'a'}, {name: 'b'}, {name: 'c'}];\nconst links = [\n {source: 0, target: 1, value: 10},\n {source: 0, target: 2, value: 20},\n {source: 1, target: 2, value: 20}\n];\n\nexport default class VoronoiSankeyExample extends React.Component {\n state = {\n activeNode: null\n };\n\n render() {\n const {activeNode} = this.state;\n\n // Note: d3.sankey currently mutates the `nodes` and `links` arrays, which doesn't play nice\n // with React's single-direction data flow. We create a copy of each before we pass to the sankey\n // component, just to be sure.\n return (\n \n
{`${activeNode ? activeNode.name : 'None'} selected`}
\n
{\n const isActiveNode = activeNode && d.name === activeNode.name;\n return {\n ...d,\n opacity: isActiveNode\n ? FOCUSED_NODE_OPACITY\n : BLURRED_NODE_OPACITY,\n name: isActiveNode ? `!${d.name}!` : d.name\n };\n })}\n links={links.map(d => ({...d}))}\n width={200}\n height={200}\n hasVoronoi\n onValueMouseOver={node => this.setState({activeNode: node})}\n onValueMouseOut={() => this.setState({activeNode: null})}\n />\n
;\n }\n return \n {!forExample && (\n \n \n
\n react-vis\n \n
{\n const {label, link, name} = section;\n const content = label ? (\n {name}
\n ) : (\n {name} \n );\n\n return {content} ;\n })}\n />\n \n )}\n {filteredSections}\n \n );\n}\n\nApp.propTypes = {\n forExample: PropTypes.bool\n};\n\nexport default App;\n"
},
{
"path": "packages/showcase/showcase-components/showcase-button.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction ShowcaseButton(props) {\n const {buttonContent, onClick} = props;\n return (\n \n {buttonContent}\n \n );\n}\n\nShowcaseButton.propTypes = {\n buttonContent: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired\n};\n\nexport default ShowcaseButton;\n"
},
{
"path": "packages/showcase/showcase-components/showcase-dropdown.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nclass ShowcaseDropdown extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false\n };\n }\n\n toggleState = () => {\n this.setState({open: !this.state.open});\n };\n\n render() {\n const {items} = this.props;\n const {open} = this.state;\n return (\n \n
\n {'SELECT SECTION'}\n
\n {open && (\n
\n )}\n {open &&
}\n
\n \n {comment && {comment}
}\n \n );\n}\n"
},
{
"path": "packages/showcase/showcase-components/source-linker.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nexport default function sourceLinker(ShowcaseComponent, link) {\n return function renderExample() {\n return (\n \n {ShowcaseComponent && \n {'> View Code'}\n \n )}\n \n );\n };\n}\n"
},
{
"path": "packages/showcase/showcase-index.js",
"content": "export AxesShowcase from './showcase-sections/axes-showcase';\nexport PlotsShowcase from './showcase-sections/plots-showcase';\nexport SunburstSection from './showcase-sections/sunburst-showcase';\nexport RadialShowcase from './showcase-sections/radial-showcase';\nexport RadarShowcase from './showcase-sections/radar-showcase';\nexport LegendsShowcase from './showcase-sections/legends-showcase';\nexport SankeysShowcase from './showcase-sections/sankeys-showcase';\nexport TreemapShowcase from './showcase-sections/treemap-showcase';\nexport ParallelCoordinatesShowcase from './showcase-sections/parallel-coordinates-showcase';\nexport MiscShowcase from './showcase-sections/misc-showcase';\n\nexport Candlestick from './examples/candlestick/candlestick-example';\nexport ForceDirectedGraph from './examples/force-directed-graph/force-directed-example';\nexport ResponsiveVis from './examples/responsive-vis/responsive-vis-example';\nexport StreamgraphExample from './examples/streamgraph/streamgraph-example';\nexport IrisDashboard from './examples/iris-dashboard/iris-dashboard';\n"
},
{
"path": "packages/showcase/showcase-links.js",
"content": "export const REACTVIS_BASE_URL =\n 'https://github.com/uber/react-vis/blob/master/packages/react-vis';\n\nexport const SHOWCASE_BASE_URL =\n 'https://github.com/uber/react-vis/blob/master/packages/showcase';\n\nexport const SHOWCASE_LINKS = {\n // AXES SHOW CASE LINKS\n AxisOn0: `${SHOWCASE_BASE_URL}/axes/axis-on-0.js`,\n CustomAxesOrientation: `${SHOWCASE_BASE_URL}/axes/custom-axes-orientation.js`,\n CustomAxisChart: `${SHOWCASE_BASE_URL}/axes/custom-axis.js`,\n CustomAxes: `${SHOWCASE_BASE_URL}/axes/custom-axes.js`,\n AxisWithTurnedLabels: `${SHOWCASE_BASE_URL}/plot/axis-with-turned-labels.js`,\n PaddedAxis: `${SHOWCASE_BASE_URL}/axes/padded-axis.js`,\n // AXES - TOOLTIPS SHOW CASE LINKS\n StaticHints: `${SHOWCASE_BASE_URL}/axes/static-hints.js`,\n DynamicHints: `${SHOWCASE_BASE_URL}/axes/dynamic-hints.js`,\n DynamicSimpleEdgeHints: `${SHOWCASE_BASE_URL}/axes/dynamic-simple-edge-hints.js`,\n DynamicSimpleTopEdgeHints: `${SHOWCASE_BASE_URL}/axes/dynamic-simple-topedge-hints.js`,\n DynamicProgrammaticRightEdgeHints: `${SHOWCASE_BASE_URL}/axes/dynamic-programmatic-rightedge-hints.js`,\n DynamicComplexEdgeHints: `${SHOWCASE_BASE_URL}/axes/dynamic-complex-edge-hints.js`,\n StaticCrosshair: `${SHOWCASE_BASE_URL}/axes/static-crosshair.js`,\n DynamicCrosshair: `${SHOWCASE_BASE_URL}/axes/dynamic-crosshair.js`,\n DynamicCrosshairScatterplot: `${SHOWCASE_BASE_URL}/axes/dynamic-crosshair-scatterplot.js`,\n // AXES - DECORATIVE_AXES SHOWCASE LINKS\n DecorativeAxisCrissCross: `${SHOWCASE_BASE_URL}/axes/decorative-axes-criss-cross.js`,\n ParallelCoordinatesExample: `${SHOWCASE_BASE_URL}/axes/parallel-coordinates-example.js`,\n // MISC SHOWCASE LINKS\n SyncedCharts: `${SHOWCASE_BASE_URL}/misc/synced-charts.js`,\n TimeChart: `${SHOWCASE_BASE_URL}/misc/time-chart.js`,\n TriangleExample: `${SHOWCASE_BASE_URL}/misc/triangle-example.js`,\n VoronoiLineChart: `${SHOWCASE_BASE_URL}/misc/voronoi-line-chart.js`,\n GradientExample: `${SHOWCASE_BASE_URL}/misc/gradient-example.js`,\n ClipExample: `${SHOWCASE_BASE_URL}/misc/clip-example.js`,\n AnimationExample: `${SHOWCASE_BASE_URL}/misc/animation-example.js`,\n LabelSeriesExample: `${SHOWCASE_BASE_URL}/misc/label-series-example.js`,\n NullDataExample: `${SHOWCASE_BASE_URL}/misc/null-data-example.js`,\n ZoomableChartExample: `${SHOWCASE_BASE_URL}/misc/zoomable-chart-example.js`,\n SelectionPlotExample: `${SHOWCASE_BASE_URL}/misc/selection-plot-example.js`,\n DragableChartExample: `${SHOWCASE_BASE_URL}/misc/dragable-chart-example.js`,\n BidirectionDragChart: `${SHOWCASE_BASE_URL}/misc/2d-dragable-plot.js`,\n // PARALLEL COORDS LINKS\n BasicParallelCoordinates: `${SHOWCASE_BASE_URL}/parallel-coordinates/animated-parallel-coordinates.js`,\n AnimatedParallelCoordinates: `${SHOWCASE_BASE_URL}/parallel-coordinates/basic-parallel-coordinates.js`,\n // PLOTS SHOWCASE LINKES\n LineChart: `${SHOWCASE_BASE_URL}/plot/line-chart.js`,\n LineChartWithStyle: `${SHOWCASE_BASE_URL}/plot/line-chart-with-style.js`,\n LineMarkChart: `${SHOWCASE_BASE_URL}/plot/linemark-chart.js`,\n LineChartCanvas: `${SHOWCASE_BASE_URL}/plot/line-chart-canvas.js`,\n LineChartManyColors: `${SHOWCASE_BASE_URL}/color/line-chart-many-colors.js`,\n ScatterplotChart: `${SHOWCASE_BASE_URL}/plot/scatterplot.js`,\n ScatterplotCanvas: `${SHOWCASE_BASE_URL}/plot/scatterplot-canvas.js`,\n WhiskerChart: `${SHOWCASE_BASE_URL}/plot/whisker-chart.js`,\n AreaChart: `${SHOWCASE_BASE_URL}/plot/area-chart.js`,\n AreaChartElevated: `${SHOWCASE_BASE_URL}/plot/area-chart-elevated.js`,\n BarChart: `${SHOWCASE_BASE_URL}/plot/bar-chart.js`,\n BigBaseBarChart: `${SHOWCASE_BASE_URL}/plot/big-base-bar-chart.js`,\n StackedHorizontalBarChart: `${SHOWCASE_BASE_URL}/plot/stacked-horizontal-bar-chart.js`,\n StackedVerticalBarChart: `${SHOWCASE_BASE_URL}/plot/stacked-vertical-bar-chart.js`,\n ClusteredStackedVerticalBarChart: `${SHOWCASE_BASE_URL}/plot/clustered-stacked-bar-chart.js`,\n StackedHistogram: `${SHOWCASE_BASE_URL}/plot/stacked-histogram.js`,\n Histogram: `${SHOWCASE_BASE_URL}/plot/histogram.js`,\n HeatmapChart: `${SHOWCASE_BASE_URL}/plot/heatmap-chart.js`,\n HexHeatmap: `${SHOWCASE_BASE_URL}/plot/hex-heatmap.js`,\n HexbinSizeExample: `${SHOWCASE_BASE_URL}/plot/hexbin-size-example.js`,\n LabeledHeatmap: `${SHOWCASE_BASE_URL}/plot/labeled-heatmap.js`,\n ContourSeriesExample: `${SHOWCASE_BASE_URL}/plot/contour-series-example.js`,\n CustomSVGExample: `${SHOWCASE_BASE_URL}/plot/custom-svg-example.js`,\n CustomSVGAllTheMarks: `${SHOWCASE_BASE_URL}/plot/custom-svg-all-the-marks.js`,\n CustomSVGRootLevel: `${SHOWCASE_BASE_URL}/plot/custom-svg-root-level.js`,\n // BASIC COMPONENTS SHOWCASE LINKS\n WidthHeightMarginChart: `${SHOWCASE_BASE_URL}/plot/width-height-margin.js`,\n CustomScales: `${SHOWCASE_BASE_URL}/plot/custom-scales.js`,\n GridLinesChart: `${SHOWCASE_BASE_URL}/plot/grid.js`,\n FauxScatterplotChart: `${SHOWCASE_BASE_URL}/plot/faux-radial-scatterplot.js`,\n EmptyChart: `${SHOWCASE_BASE_URL}/axes/empty-chart.js`,\n // RADAR CHART SHOWCASE LINKS\n AnimatedRadarChart: `${SHOWCASE_BASE_URL}/radar-chart/animated-radar-chart.js`,\n BasicRadarChart: `${SHOWCASE_BASE_URL}/radar-chart/basic-radar-chart.js`,\n FourQuadrantRadarChart: `${SHOWCASE_BASE_URL}/radar-chart/four-quadrant-radar-chart.js`,\n RadarChartWithTooltips: `${SHOWCASE_BASE_URL}/radar-chart/radar-chart-with-tooltips.js`,\n RadarChartSeriesTooltips: `${SHOWCASE_BASE_URL}/radar-chart/radar-chart-series-tooltips.js`,\n\n // RADIAL CHART SHOWCASE LINKS\n SimpleRadialChart: `${SHOWCASE_BASE_URL}/radial-chart/simple-radial-chart.js`,\n GradientPie: `${SHOWCASE_BASE_URL}/radial-chart/gradient-pie.js`,\n DonutChartExample: `${SHOWCASE_BASE_URL}/radial-chart/donut-chart.js`,\n CustomRadiusRadialChart: `${SHOWCASE_BASE_URL}/radial-chart/custom-radius-radial-chart.js`,\n // SANKEY SHOWCASE LINKS\n BasicSankeyExample: `${SHOWCASE_BASE_URL}/sankey/basic.js`,\n VoronoiSankeyExample: `${SHOWCASE_BASE_URL}/sankey/voronoi.js`,\n LinkEventSankeyExample: `${SHOWCASE_BASE_URL}/sankey/link-event.js`,\n LinkHintSankeyExample: `${SHOWCASE_BASE_URL}/sankey/link-hint.js`,\n EnergySankeyExample: `${SHOWCASE_BASE_URL}/sankey/energy-sankey.js`,\n // SUNBURST SHOWCASE LINKS\n ArcSeriesExample: `${SHOWCASE_BASE_URL}/radial-chart/arc-series-example.js`,\n BasicSunburst: `${SHOWCASE_BASE_URL}/sunbursts/basic-sunburst.js`,\n ClockExample: `${SHOWCASE_BASE_URL}/sunbursts/clock-example.js`,\n AnimatedSunburst: `${SHOWCASE_BASE_URL}/sunbursts/animated-sunburst.js`,\n SunburstWithTooltips: `${SHOWCASE_BASE_URL}/sunbursts/sunburst-with-tooltips.js`,\n // TREEMAP SHOWCASE LINKS\n SimpleTreemap: `${SHOWCASE_BASE_URL}/treemap/simple-treemap.js`,\n TreemapExample: `${SHOWCASE_BASE_URL}/treemap/dynamic-treemap.js`,\n // LEGENDS SHOWCASE LINKS\n VerticalDiscreteColorLegendExample: `${SHOWCASE_BASE_URL}/legends/vertical-discrete-color.js`,\n HorizontalDiscreteColorLegendExample: `${SHOWCASE_BASE_URL}/legends/horizontal-discrete-color.js`,\n HorizontalDiscreteCustomPalette: `${SHOWCASE_BASE_URL}/legends/horizontal-discrete-custom-palette.js`,\n SearchableDiscreteColorLegendExample: `${SHOWCASE_BASE_URL}/legends/searchable-discrete-color.js`,\n // eslint-disable-next-line max-len\n SearchableDiscreteColorLegendHoverExample: `${SHOWCASE_BASE_URL}/legends/searchable-discrete-color-hover.js`,\n ContinuousColorLegendExample: `${SHOWCASE_BASE_URL}/legends/continuous-color.js`,\n ContinuousSizeLegendExample: `${SHOWCASE_BASE_URL}/legends/continuous-size.js'`\n};\n"
},
{
"path": "packages/showcase/showcase-sections/axes-showcase.js",
"content": "import React from 'react';\n\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {showCase} from '../index';\nconst {\n AxisOn0,\n AxisWithTurnedLabels,\n CustomAxes,\n CustomAxisChart,\n CustomAxesOrientation,\n CustomAxisTickFormat,\n CustomAxisTickElement,\n DecorativeAxisCrissCross,\n DynamicComplexEdgeHints,\n DynamicCrosshair,\n DynamicCrosshairScatterplot,\n DynamicHints,\n DynamicProgrammaticRightEdgeHints,\n DynamicSimpleEdgeHints,\n DynamicSimpleTopEdgeHints,\n PaddedAxis,\n ParallelCoordinatesExample,\n StaticCrosshair,\n StaticHints\n} = showCase;\n\n/* eslint-disable max-len */\nconst AXES = [\n {\n name: 'Axis on 0',\n component: AxisOn0,\n componentName: 'AxisOn0'\n },\n {\n name: 'Custom Axes Orientation',\n component: CustomAxesOrientation,\n componentName: 'CustomAxesOrientation'\n },\n {\n name: 'Custom Axis',\n component: CustomAxisChart,\n componentName: 'CustomAxisChart'\n },\n {\n name: 'Custom axis tick format',\n component: CustomAxisTickFormat\n },\n {\n name: 'Custom axis tick label element',\n component: CustomAxisTickElement\n },\n {\n name: 'Even more Custom Axes',\n component: CustomAxes,\n componentName: 'CustomAxes'\n },\n {\n name: 'Turned axis labels',\n component: AxisWithTurnedLabels,\n componentName: 'AxisWithTurnedLabels'\n },\n {\n name: 'Unpadded Axis vs Padded Axis',\n component: PaddedAxis,\n componentName: 'PaddedAxis'\n }\n];\n\nconst TOOLTIPS = [\n {\n name: 'Static Hints',\n component: StaticHints,\n componentName: 'StaticHints'\n },\n {\n name: 'Dynamic Hints',\n comment: 'Move mouse over the point to see the hint.',\n component: DynamicHints,\n componentName: 'DynamicHints'\n },\n {\n name: 'Dynamic Simple Edge Hints',\n comment:\n 'Mouse over point. Hint appears on different edges. Left margin enables first point to show w/o break.',\n component: DynamicSimpleEdgeHints,\n componentName: 'DynamicSimpleEdgeHints'\n },\n {\n name: 'Dynamic Simple Top Edge Hints',\n comment:\n 'Mouse over point. horizontalAlign=ALIGN.AUTO, verticalAlign=ALIGN.TOP_EDGE Hint pinned to top edge, pole moves along edge, hint box on right of pole for first 2 data points and left otherwise.',\n component: DynamicSimpleTopEdgeHints,\n componentName: 'DynamicSimpleTopEdgeHints'\n },\n {\n name: 'Dynamic Programmatic Right Edge Hints',\n comment:\n 'Mouse over point. getAlignStyle method returns style object with right and top CSS props set (pinned right edge and at y position)',\n component: DynamicProgrammaticRightEdgeHints,\n componentName: 'DynamicProgrammaticRightEdgeHints'\n },\n {\n name: 'Dynamic Complex Edge Hints',\n comment:\n 'Mouse over point. Hint uses flex, css to show hint and pole from point to outside plot edge (css for margin values).',\n component: DynamicComplexEdgeHints,\n componentName: 'DynamicComplexEdgeHints'\n },\n {\n name: 'Static Crosshair',\n component: StaticCrosshair,\n componentName: 'StaticCrosshair'\n },\n {\n name: 'Dynamic Crosshair',\n comment: 'Move your mouse over the chart to see the point.',\n component: DynamicCrosshair,\n componentName: 'DynamicCrosshair'\n },\n {\n name: 'Dynamic Crosshair Scatterplot',\n comment: 'Move your mouse over the chart to see the point.',\n component: DynamicCrosshairScatterplot,\n componentName: 'DynamicCrosshairScatterplot'\n }\n];\n/* eslint-enable max-len */\nconst DECORATIVE_AXES = [\n {\n name: 'Diagonal Axes',\n component: DecorativeAxisCrissCross,\n componentName: 'DecorativeAxisCrissCross'\n },\n {\n name: 'Parallel Coordinates',\n component: ParallelCoordinatesExample,\n componentName: 'ParallelCoordinatesExample'\n }\n];\n\nfunction AxesShowcase() {\n return (\n \n Axes \n {AXES.map(mapSection)}\n Tooltips \n {TOOLTIPS.map(mapSection)}\n DecorativeAxis \n {DECORATIVE_AXES.map(mapSection)}\n \n );\n}\n\nexport default AxesShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/legends-showcase.js",
"content": "import React from 'react';\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {showCase} from '../index';\nconst {\n ContinuousColorLegendExample,\n ContinuousSizeLegendExample,\n HorizontalDiscreteColorLegendExample,\n HorizontalDiscreteCustomPalette,\n SearchableDiscreteColorLegendExample,\n SearchableDiscreteColorLegendHoverExample,\n VerticalDiscreteColorLegendExample\n} = showCase;\n/* eslint-disable max-len */\nconst DISCRETE_LEGENDS = [\n {\n name: 'Vertical legend',\n component: VerticalDiscreteColorLegendExample,\n componentName: 'VerticalDiscreteColorLegendExample'\n },\n {\n name: 'Horizontal legend with stroke styles',\n component: HorizontalDiscreteColorLegendExample,\n componentName: 'HorizontalDiscreteColorLegendExample'\n },\n {\n name: 'Custom palette with hover interaction',\n component: HorizontalDiscreteCustomPalette,\n componentName: 'HorizontalDiscreteCustomPalette'\n },\n {\n name: 'Discrete color legend with search',\n component: SearchableDiscreteColorLegendExample,\n componentName: 'SearchableDiscreteColorLegendExample'\n },\n {\n name: 'Discrete color legend with search and hover',\n component: SearchableDiscreteColorLegendHoverExample,\n componentName: 'SearchableDiscreteColorLegendHoverExample'\n }\n];\n/* eslint-enable max-len */\n\nconst CONTINOUS_COLOR_LEGEND = [\n {\n name: 'Default legend',\n component: ContinuousColorLegendExample,\n componentName: 'ContinuousColorLegendExample'\n }\n];\n\nconst CONTINOUS_SIZE_LEGEND = [\n {\n name: 'Default legend',\n component: ContinuousSizeLegendExample,\n componentName: 'ContinuousSizeLegendExample'\n }\n];\n\nfunction LegendsExample() {\n return (\n \n Legends \n Discrete color legend \n {DISCRETE_LEGENDS.map(mapSection)}\n Continuous color legend \n {CONTINOUS_COLOR_LEGEND.map(mapSection)}\n Continuous size legend \n {CONTINOUS_SIZE_LEGEND.map(mapSection)}\n \n );\n}\n\nexport default LegendsExample;\n"
},
{
"path": "packages/showcase/showcase-sections/misc-showcase.js",
"content": "import React from 'react';\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {showCase} from '../index';\nimport {SHOWCASE_BASE_URL, REACTVIS_BASE_URL} from '../showcase-links';\nconst {\n AnimationExample,\n LabelSeriesExample,\n GradientExample,\n NullDataExample,\n SyncedCharts,\n TimeChart,\n TriangleExample,\n VoronoiLineChart,\n ZoomableChartExample,\n SelectionPlotExample,\n DragableChartExample,\n BidirectionDragChart,\n ClipExample,\n FlexibleCharts\n} = showCase;\n\nconst MISC = [\n {\n name: 'Synced Charts',\n component: SyncedCharts,\n componentName: 'SyncedCharts'\n },\n {\n name: 'Time Chart',\n component: TimeChart,\n componentName: 'TimeChart'\n },\n {\n name: 'Polygon Example',\n component: TriangleExample,\n componentName: 'TriangleExample',\n sourceLink: `${REACTVIS_BASE_URL}/src/plot/series/polygon-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/polygon-series'\n },\n {\n name: 'Voronoi Line Chart',\n component: VoronoiLineChart,\n componentName: 'VoronoiLineChart'\n },\n {\n name: 'Gradient & Custom Border Example',\n component: GradientExample,\n componentName: 'GradientExample',\n sourceLink: `${SHOWCASE_BASE_URL}/misc/gradient-example.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/api-reference/gradients'\n },\n {\n name: 'Content Area Clipping',\n component: ClipExample,\n componentName: 'ClipExample',\n sourceLink: `${SHOWCASE_BASE_URL}/misc/clip-example.js`,\n docsLink: 'http://uber.github.io/react-vis/documentation/api-reference/clip'\n },\n {\n name: 'Animation Example',\n component: AnimationExample,\n componentName: 'AnimationExample',\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/label-series'\n },\n {\n name: 'Label Series Example',\n component: LabelSeriesExample,\n componentName: 'LabelSeriesExample',\n sourceLink: `${SHOWCASE_BASE_URL}/src/plot/series/label-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/label-series'\n },\n {\n name: 'Null Data Example',\n component: NullDataExample,\n componentName: 'NullDataExample'\n },\n {\n name: 'Zoomable Chart example',\n component: ZoomableChartExample,\n componentName: 'ZoomableChartExample'\n },\n {\n name: 'Selection plot example',\n component: SelectionPlotExample,\n componentName: 'SelectionPlotExample'\n },\n {\n name: 'Dragable Chart Example',\n component: DragableChartExample,\n componentName: 'DragableChartExample'\n },\n {\n name: '2d Dragable Chart',\n component: BidirectionDragChart,\n componentName: 'BidirectionDragChart'\n },\n {\n name: 'Flexible Chart',\n component: FlexibleCharts,\n componentName: 'FlexibleCharts'\n }\n];\n\nfunction MiscShowcase() {\n return (\n \n Miscellaneous \n {MISC.map(mapSection)}\n \n );\n}\n\nexport default MiscShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/parallel-coordinates-showcase.js",
"content": "import React from 'react';\n\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {showCase} from '../index';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nconst {\n AnimatedParallelCoordinates,\n BasicParallelCoordinates,\n BrushedParallelCoordinates\n} = showCase;\n\n/* eslint-disable max-len */\nconst PARALLEL_COORDINATES = [\n {\n name: 'Basic Parallel Coordinates',\n component: BasicParallelCoordinates,\n componentName: 'BasicParallelCoordinates',\n sourceLink: `${REACTVIS_BASE_URL}/radar-chart/index.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart'\n },\n {\n name: 'Animated Parallel Coordinates',\n component: AnimatedParallelCoordinates,\n componentName: 'AnimatedParallelCoordinates'\n },\n {\n name: 'Brushed Parallel Coordinates',\n component: BrushedParallelCoordinates,\n componentName: 'BrushedParallelCoordinates'\n }\n];\n\nfunction ParallelCoordinatesShowcase() {\n return (\n \n Parallel Coordinates \n {PARALLEL_COORDINATES.map(mapSection)}\n \n );\n}\n\nexport default ParallelCoordinatesShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/plots-showcase.js",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport {showCase} from '../index';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {mapSection} from '../showcase-components/showcase-utils';\nconst {\n AreaChart,\n AreaChartElevated,\n BarChart,\n BigBaseBarChart,\n ClusteredStackedVerticalBarChart,\n ContourSeriesExample,\n ComplexChart,\n CustomScales,\n CustomSVGExample,\n CustomSVGAllTheMarks,\n CustomSVGRootLevel,\n DifferenceChart,\n EmptyChart,\n FauxScatterplotChart,\n GridLinesChart,\n HeatmapChart,\n HexHeatmap,\n HexbinSizeExample,\n Histogram,\n LabeledHeatmap,\n LineChart,\n LineChartManyColors,\n LineChartWithStyle,\n LineChartCanvas,\n LineSeriesCanvasNearestXYExample,\n LineMarkChart,\n MixedStackedChart,\n StackedVerticalBarChart,\n LabeledStackedVerticalBarChart,\n StackedHorizontalBarChart,\n StackedHistogram,\n ScatterplotChart,\n ScatterplotCanvas,\n WhiskerChart,\n WidthHeightMarginChart\n} = showCase;\n\nconst PLOTS = [\n {\n component: LineChart,\n componentName: 'LineChart',\n name: 'Line Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/line-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/line-series'\n },\n {\n component: LineChartWithStyle,\n componentName: 'LineChartWithStyle',\n name: 'Line Series with style',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/line-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/line-series'\n },\n {\n component: LineMarkChart,\n componentName: 'LineMarkChart',\n name: 'LineMark Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/line-mark-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/line-mark-series'\n },\n {\n component: LineChartCanvas,\n componentName: 'LineChartCanvas',\n name: 'Line Chart Canvas'\n },\n {\n component: LineSeriesCanvasNearestXYExample,\n componentName: 'LineSeriesCanvasNearestXYExample',\n name: 'Line Series Canvas'\n },\n {\n component: LineChartManyColors,\n componentName: 'LineChartManyColors',\n name: 'Line Series With Many Colors'\n },\n {\n component: ScatterplotChart,\n componentName: 'ScatterplotChart',\n name: 'Mark Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/mark-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/mark-series'\n },\n {\n component: ScatterplotCanvas,\n componentName: 'ScatterplotCanvas',\n name: 'Mark Series Canvas'\n },\n {\n component: WhiskerChart,\n componentName: 'WhiskerChart',\n name: 'Whisker Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/whisker-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/whisker-series'\n },\n {\n component: AreaChart,\n componentName: 'AreaChart',\n name: 'Area Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/area-serie.js`\n },\n {\n component: AreaChartElevated,\n componentName: 'AreaChartElevated',\n name: 'Area Series With vertical offset',\n sourceLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/area-series'\n },\n {\n component: BarChart,\n componentName: 'BarChart',\n name: 'Bar Series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/bar-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/bar-series'\n },\n {\n component: BigBaseBarChart,\n componentName: 'BigBaseBarChart',\n name: 'Big Base Bar Series'\n },\n {\n component: DifferenceChart,\n componentName: 'DifferenceChart',\n name: 'Difference Bar Series'\n },\n {\n name: 'Stacked Horizontal Bar Series',\n component: StackedHorizontalBarChart,\n componentName: 'StackedHorizontalBarChart'\n },\n {\n name: 'Stacked Vertical Bar Series',\n component: StackedVerticalBarChart,\n componentName: 'StackedVerticalBarChart'\n },\n {\n name: 'Labeled Stacked Vertical Bar Series',\n component: LabeledStackedVerticalBarChart,\n componentName: 'LabeledStackedVerticalBarChart'\n },\n {\n name: 'Mixed Stacked Series',\n component: MixedStackedChart\n },\n {\n name: 'Clustered Stacked Vertical Bar Series',\n component: ClusteredStackedVerticalBarChart,\n componentName: 'ClusteredStackedVerticalBarChart'\n },\n {\n name: 'Stacked Vertical Rect Series (histogram)',\n component: StackedHistogram,\n componentName: 'StackedHistogram'\n },\n {\n name: 'Horizontal Rect Series',\n component: Histogram,\n componentName: 'Histogram'\n },\n {\n name: 'Heatmap Series',\n component: HeatmapChart,\n componentName: 'HeatmapChart',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/heatmap-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/heatmap-series'\n },\n {\n name: 'Hexbin Series',\n component: HexHeatmap,\n componentName: 'HexHeatmap',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/hexbin-series.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/hexbin-series'\n },\n {\n name: 'Hexbin Size',\n component: HexbinSizeExample,\n componentName: 'HexbinSizeExample'\n },\n {\n name: 'Labeled Heatmap',\n component: LabeledHeatmap,\n componentName: 'LabeledHeatmap',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/heatmap-serie.js`\n },\n {\n name: 'Contour Series',\n component: ContourSeriesExample,\n componentName: 'ContourSeriesExample'\n },\n {\n name: 'Custom SVG Series',\n component: CustomSVGExample,\n componentName: 'CustomSVGExample'\n },\n {\n name: 'Custom SVG - All The Marks (with tooltips)',\n component: CustomSVGAllTheMarks,\n componentName: 'CustomSVGAllTheMarks'\n },\n {\n name: 'Custom SVG - Root Level Function Definition',\n component: CustomSVGRootLevel,\n componentName: 'CustomSVGRootLevel'\n }\n];\n\nconst BASIC_COMPONENTS = [\n {\n name: 'Custom Size and Margin',\n component: WidthHeightMarginChart,\n componentName: 'WidthHeightMarginChart'\n },\n {\n name: 'Custom scales',\n component: CustomScales,\n componentName: 'CustomScales'\n },\n {\n name: 'Empty Chart',\n component: EmptyChart,\n componentName: 'EmptyChart'\n },\n {\n name: 'Custom GridLines',\n component: GridLinesChart,\n componentName: 'GridLinesChart'\n },\n {\n name: 'Circular Gridlines',\n component: FauxScatterplotChart,\n componentName: 'FauxScatterplotChart',\n sourceLink: `${REACTVIS_BASE_URL}/plot/circular-grid-lines.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/api-reference/grids'\n }\n];\n\nfunction PlotsShowcase(props) {\n const {forExample} = props;\n return (\n \n Plots \n {!forExample && (\n \n )}\n Series Types \n\n {PLOTS.map(mapSection)}\n Basic Components \n {BASIC_COMPONENTS.map(mapSection)}\n \n );\n}\n\nPlotsShowcase.propTypes = {\n forExample: PropTypes.bool\n};\n\nexport default PlotsShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/radar-showcase.js",
"content": "import React from 'react';\n\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {showCase} from '../index';\nconst {\n AnimatedRadarChart,\n BasicRadarChart,\n FourQuadrantRadarChart,\n RadarChartWithTooltips,\n RadarChartSeriesTooltips\n} = showCase;\n\nconst RADAR = [\n {\n name: 'Basic Radar Chart',\n component: BasicRadarChart,\n componentName: 'BasicRadarChart',\n sourceLink: `${REACTVIS_BASE_URL}/radar-chart/index.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/radar-chart'\n },\n {\n name: 'Animated Radar Chart',\n component: AnimatedRadarChart,\n componentName: 'AnimatedRadarChart'\n },\n {\n name: 'Four Quadrant Radar Chart',\n component: FourQuadrantRadarChart,\n componentName: 'FourQuadrantRadarChart'\n },\n {\n name: 'Radar Chart with Tooltips',\n component: RadarChartWithTooltips,\n componentName: 'RadarChartWithTooltips'\n },\n {\n name: 'Radar Chart with Series Tooltips',\n component: RadarChartSeriesTooltips,\n componentName: 'RadarChartSeriesTooltips'\n }\n];\n\nfunction RadarShowcase() {\n return (\n \n Radar Chart \n {RADAR.map(mapSection)}\n \n );\n}\n\nexport default RadarShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/radial-showcase.js",
"content": "import React from 'react';\n\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {showCase} from '../index';\nconst {\n CustomRadiusRadialChart,\n DonutChartExample,\n SimpleRadialChart,\n GradientPie\n} = showCase;\n/* eslint-disable max-len */\nconst RADIAL = [\n {\n name: 'Simple Radial Chart',\n component: SimpleRadialChart,\n componentName: SimpleRadialChart,\n sourceLink: `${REACTVIS_BASE_URL}/radial-chart/index.js`,\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/radial-chart'\n },\n {\n name: 'Simple Donut Chart',\n component: DonutChartExample,\n componentName: DonutChartExample\n },\n {\n name: 'Custom Radius',\n component: CustomRadiusRadialChart,\n componentName: CustomRadiusRadialChart\n },\n {\n name: 'Gradient Pie',\n component: GradientPie,\n componentName: GradientPie\n }\n];\n\nfunction RadialShowcase() {\n return (\n \n Radial Chart \n {RADIAL.map(mapSection)}\n \n );\n}\n\nexport default RadialShowcase;\n"
},
{
"path": "packages/showcase/showcase-sections/sankeys-showcase.js",
"content": "import React from 'react';\n\nimport {mapSection} from '../showcase-components/showcase-utils';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {showCase} from '../index';\nconst {\n BasicSankeyExample,\n VoronoiSankeyExample,\n EnergySankeyExample,\n LinkEventSankeyExample,\n LinkHintSankeyExample\n} = showCase;\n\nconst SANKEYS = [\n {\n name: 'Basic',\n component: BasicSankeyExample,\n componentName: 'BasicSankeyExample',\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/sankey-diagram',\n sourceLink: `${REACTVIS_BASE_URL}/sankey/index.js`\n },\n {\n name: 'With Voronoi Selection',\n component: VoronoiSankeyExample,\n componentName: 'VoronoiSankeyExample'\n },\n {\n name: 'With link selection',\n component: LinkEventSankeyExample,\n componentName: 'LinkEventSankeyExample'\n },\n {\n name: 'With hint (for links)',\n component: LinkHintSankeyExample,\n componentName: 'LinkHintSankeyExample'\n },\n {\n name: 'Energy Example',\n component: EnergySankeyExample,\n componentName: 'EnergySankeyExample'\n }\n];\n\nfunction SankeysSection() {\n return (\n \n Sankeys \n {SANKEYS.map(mapSection)}\n \n );\n}\n\nexport default SankeysSection;\n"
},
{
"path": "packages/showcase/showcase-sections/sunburst-showcase.js",
"content": "import React from 'react';\n\nimport {showCase} from '../index';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {mapSection} from '../showcase-components/showcase-utils';\nconst {\n AnimatedSunburst,\n ArcSeriesExample,\n BasicSunburst,\n ClockExample,\n SunburstWithTooltips\n} = showCase;\n\nconst SUNBURSTS = [\n {\n name: 'Arc Series Example',\n component: ArcSeriesExample,\n componentName: 'ArcSeriesExample',\n docsLink:\n 'http://uber.github.io/react-vis/documentation/series-reference/arc-series',\n sourceLink: `${REACTVIS_BASE_URL}/plot/series/arc-series.js`\n },\n {\n name: 'Basic Sunburst',\n component: BasicSunburst,\n componentName: 'BasicSunburst',\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/sunburst-diagram',\n sourceLink: `${REACTVIS_BASE_URL}/sunburst/index.js`\n },\n {\n name: 'Clock',\n component: ClockExample,\n componentName: 'ClockExample'\n },\n {\n name: 'Animated Sunburst',\n component: AnimatedSunburst,\n componentName: 'AnimatedSunburst'\n },\n {\n name: 'Sunburst with tooltips',\n component: SunburstWithTooltips,\n componentName: 'SunburstWithTooltips'\n }\n];\n\nfunction SunburstSection() {\n return (\n \n Sunbursts \n {SUNBURSTS.map(mapSection)}\n \n );\n}\n\nexport default SunburstSection;\n"
},
{
"path": "packages/showcase/showcase-sections/treemap-showcase.js",
"content": "import React from 'react';\n\nimport {showCase} from '../index';\nimport {REACTVIS_BASE_URL} from '../showcase-links';\nimport {mapSection} from '../showcase-components/showcase-utils';\n\nconst {SimpleTreemap, TreemapExample} = showCase;\n\nconst TREEMAPS = [\n {\n name: 'Simple Treemap',\n component: SimpleTreemap,\n componentName: 'SimpleTreemap',\n docsLink:\n 'http://uber.github.io/react-vis/documentation/other-charts/treemap',\n sourceLink: `${REACTVIS_BASE_URL}/treemap/index.js`\n },\n {\n name: 'Animated Treemap',\n component: TreemapExample,\n componentName: 'TreemapExample'\n }\n];\n\nfunction TreemapShowcase() {\n return (\n \n Treemap \n {TREEMAPS.map(mapSection)}\n \n );\n}\n\nexport default TreemapShowcase;\n"
},
{
"path": "packages/showcase/showcase-utils.js",
"content": "// sourced from\n// http://indiegamr.com/generate-repeatable-random-numbers-in-js/\nexport function generateSeededRandom(baseSeed = 2) {\n let seed = baseSeed;\n return function seededRandom(max, min) {\n max = max || 1;\n min = min || 0;\n\n seed = (seed * 9301 + 49297) % 233280;\n const rnd = seed / 233280;\n\n return min + rnd * (max - min);\n };\n}\n"
},
{
"path": "packages/showcase/sunbursts/animated-sunburst.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport {Sunburst} from 'react-vis';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nfunction randomLeaf() {\n return {\n size: Math.random() * 1000,\n color: Math.random()\n };\n}\n\nfunction updateData() {\n const totalLeaves = Math.random() * 20;\n const leaves = [];\n for (let i = 0; i < totalLeaves; i++) {\n const leaf = randomLeaf();\n if (Math.random() > 0.8) {\n leaf.children = [...new Array(3)].map(() => randomLeaf());\n }\n leaves.push(leaf);\n }\n return {\n title: '',\n color: 1,\n children: leaves\n };\n}\n\nconst DIVERGING_COLOR_SCALE = ['#00939C', '#85C4C8', '#EC9370', '#C22E00'];\n\nexport default class AnimatedSunburst extends React.Component {\n state = {\n data: updateData(),\n hovering: false\n };\n\n render() {\n const {data, hovering} = this.state;\n return (\n \n
this.setState({data: updateData()})}\n buttonContent={'UPDATE'}\n />\n {hovering ? 'CURRENTLY HOVERING' : 'NOT HOVERED'}
\n this.setState({hovering: true})}\n onValueMouseOut={() => this.setState({hovering: false})}\n height={300}\n width={350}\n />\n \n
\n {clicked ? 'click to unlock selection' : 'click to lock selection'}\n
\n
{\n if (clicked) {\n return;\n }\n const path = getKeyPath(node).reverse();\n const pathAsMap = path.reduce((res, row) => {\n res[row] = true;\n return res;\n }, {});\n this.setState({\n finalValue: path[path.length - 1],\n pathValue: path.join(' > '),\n data: updateData(decoratedData, pathAsMap)\n });\n }}\n onValueMouseOut={() =>\n clicked\n ? () => {}\n : this.setState({\n pathValue: false,\n finalValue: false,\n data: updateData(decoratedData, false)\n })\n }\n onValueClick={() => this.setState({clicked: !clicked})}\n style={{\n stroke: '#ddd',\n strokeOpacity: 0.3,\n strokeWidth: '0.5'\n }}\n colorType=\"literal\"\n getSize={d => d.value}\n getColor={d => d.hex}\n data={data}\n height={300}\n width={350}\n >\n {finalValue && (\n {pathValue}
\n d.time}\n getAngle0={() => 0}\n height={300}\n >\n \n this.setState({hoveredCell: v.x && v.y ? v : false})\n }\n onValueMouseOut={() => this.setState({hoveredCell: false})}\n height={300}\n margin={{top: 50, bottom: 50, left: 50, right: 50}}\n getLabel={d => d.name}\n getSize={d => d.bigness}\n getColor={d => d.clr}\n width={350}\n padAngle={() => 0.02}\n >\n {hoveredCell ? (\n \n \n
\n {hoveredCell.clr}\n
\n ) : null}\n \n );\n }\n}\n"
},
{
"path": "packages/showcase/treemap/dynamic-treemap.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport Treemap from 'react-vis/treemap';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nfunction _getRandomData(total) {\n const totalLeaves = total || Math.random() * 20;\n const leaves = [];\n for (let i = 0; i < totalLeaves; i++) {\n leaves.push({\n name: total ? total : String(Math.random()).slice(0, 3),\n size: Math.random() * 1000,\n color: Math.random(),\n style: {\n border: 'thin solid red'\n }\n });\n }\n return {\n title: '',\n color: 1,\n children: leaves\n };\n}\n\nexport default class DynamicTreemapExample extends React.Component {\n state = {\n hoveredNode: false,\n treemapData: _getRandomData(20),\n useCirclePacking: false\n };\n\n render() {\n const {hoveredNode, useCirclePacking} = this.state;\n const treeProps = {\n animation: {\n damping: 9,\n stiffness: 300\n },\n data: this.state.treemapData,\n onLeafMouseOver: x => this.setState({hoveredNode: x}),\n onLeafMouseOut: () => this.setState({hoveredNode: false}),\n onLeafClick: () => this.setState({treemapData: _getRandomData()}),\n height: 300,\n mode: this.state.useCirclePacking ? 'circlePack' : 'squarify',\n getLabel: x => x.name,\n width: 350\n };\n return (\n \n this.setState({useCirclePacking: !useCirclePacking})}\n buttonContent={'TOGGLE CIRCLE PACK'}\n />\n
\n );\n }\n}\n"
},
{
"path": "packages/showcase/treemap/simple-treemap.js",
"content": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport React from 'react';\n\nimport Treemap from 'react-vis/treemap';\n\nimport D3FlareData from '../datasets/d3-flare-example.json';\nimport ShowcaseButton from '../showcase-components/showcase-button';\n\nconst MODE = [\n 'circlePack',\n 'partition',\n 'partition-pivot',\n 'squarify',\n 'resquarify',\n 'slice',\n 'dice',\n 'slicedice',\n 'binary'\n];\n\nconst STYLES = {\n SVG: {\n stroke: '#ddd',\n strokeWidth: '0.25',\n strokeOpacity: 0.5\n },\n DOM: {\n border: 'thin solid #ddd'\n }\n};\n\nexport default class SimpleTreemapExample extends React.Component {\n state = {\n modeIndex: 0,\n useSVG: true\n };\n\n updateModeIndex = increment => () => {\n const newIndex = this.state.modeIndex + (increment ? 1 : -1);\n const modeIndex =\n newIndex < 0 ? MODE.length - 1 : newIndex >= MODE.length ? 0 : newIndex;\n this.setState({modeIndex});\n };\n\n render() {\n const {modeIndex, useSVG} = this.state;\n\n return (\n \n
\n this.setState({useSVG: !useSVG})}\n buttonContent={useSVG ? 'USE DOM' : 'USE SVG'}\n />\n
\n
\n
\n
{MODE[modeIndex]}
\n
\n
\n
d.value,\n getColor: d => d.hex,\n style: STYLES[useSVG ? 'SVG' : 'DOM']\n }}\n />\n \n {barData.map((d, i) => (\n {\n props.scrub(value.x);\n props.highlight(value.s);\n }}\n />\n ))}\n \n );\n }\n case 1: {\n // pie charts\n const pieData = props.data\n .reduce((prev, curr) => [...prev, ...curr], [])\n .reduce(\n (result, d, i) => {\n result[i % 3].angle += d.y;\n return result;\n },\n [\n {angle: 0, s: 0, color: props.s === 0 ? palette[3] : palette[0]},\n {angle: 0, s: 1, color: props.s === 1 ? palette[3] : palette[1]},\n {angle: 0, s: 2, color: props.s === 2 ? palette[3] : palette[2]}\n ]\n );\n return (\n props.highlight(value.s)}\n onSeriesMouseOut={() => props.highlight(null)}\n />\n );\n }\n case 2:\n // area charts\n return (\n \n {props.data.map((d, i) => (\n props.highlight(i)}\n />\n ))}\n \n );\n case 3: {\n // scatterplots\n const scatterData = props.data.map((scatterseries, s) =>\n scatterseries.map(d => ({\n x: d.xS,\n s,\n y: d.yS,\n size: d.size,\n color: s === props.s ? palette[3] : palette[s]\n }))\n );\n return (\n \n {scatterData.map((d, i) => (\n props.highlight(i)}\n opacity={props.s === null || props.s === i ? 0.8 : 0.5}\n />\n ))}\n \n );\n }\n case 4: {\n // treemaps\n const treeMapData = props.data.reduce(\n (prev, treeseries, s) => {\n prev.children.push(\n treeseries.reduce(\n (leaf, d) => {\n leaf.children.push({\n size: d.yS,\n index: d.x,\n series: s,\n style: {background: props.x === d.x ? palette[3] : palette[s]}\n });\n return leaf;\n },\n {\n title: '',\n style: {background: 'white'},\n children: []\n }\n )\n );\n return prev;\n },\n {\n title: '',\n children: []\n }\n );\n\n return (\n {\n props.highlight(node.data.series);\n props.scrub(node.data.index);\n }}\n style={{margin: '6px -6px -6px 6px'}}\n />\n );\n }\n default:\n // Line charts\n return (\n \n {props.data.map((d, i) => (\n {\n props.scrub(value.x);\n }}\n />\n ))}\n {props.data.map((d, i) => (\n props.highlight(i)}\n />\n ))}\n {props.x !== null && props.x < props.data[0].length ? (\n ({\n x: props.x,\n y: markseries[props.x].y,\n fill: s === props.s ? palette[3] : palette[s]\n }))}\n size={5}\n stroke=\"white\"\n />\n ) : null}\n \n );\n }\n};\n\nfunction makeData(nbSeries, nbPoints) {\n return [...Array(nbSeries).keys()].map((d, s) => series(nbPoints, s));\n}\n\nfunction series(nbPoints, s) {\n let previousPoint = random({scope: 3, rolls: 4});\n return [...Array(nbPoints).keys()].map(d => {\n const y =\n previousPoint > 17.5\n ? previousPoint - random({scope: 1, rolls: 3})\n : previousPoint < 2.5\n ? previousPoint + random({scope: 1, rolls: 3})\n : previousPoint + random({scope: 1, rolls: 5}) - 2.5;\n previousPoint = y;\n return {\n x: d,\n s,\n size: random({scope: 3, rolls: 3}),\n xS: random({scope: 20, rolls: 1}),\n yS: random({scope: 20, rolls: 1}),\n y\n };\n });\n}\n\nfunction random({scope = 5, rolls = 1, integer = false}) {\n let result = 0;\n let i = 0;\n for (i; i < rolls; i++) {\n result += Math.random() * scope;\n }\n return integer ? Math.floor(result) : result;\n}\n\nclass Hero extends Component {\n constructor() {\n super();\n this.state = {\n x: null\n };\n this._resize = this._resize.bind(this);\n }\n\n componentDidMount() {\n const chartsProps = this.generateData(100);\n window.addEventListener('resize', this._resize);\n this._resize();\n this.setState({chartsProps});\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._resize);\n }\n\n _resize = () => {\n this.setState({\n height: window.innerHeight,\n width: window.innerWidth\n });\n };\n\n changeType = i => {\n const updatedChartsProps = [...this.state.chartsProps];\n updatedChartsProps[i].type = (updatedChartsProps[i].type + 1) % 6;\n updatedChartsProps[i].changes = updatedChartsProps[i].changes + 1;\n this.setState({chartsProps: updatedChartsProps});\n };\n\n generateData = nb => {\n return [...Array(nb).keys()].map(() => {\n const nbPoints = 5 + random({scope: 5, rolls: 2, integer: true});\n const nbSeries =\n 1 + Number(Math.random() > 0.2) + Number(Math.random() > 0.5);\n const data = makeData(nbSeries, nbPoints);\n const type = random({scope: 6, integer: true});\n return {\n changes: 0,\n type,\n data\n };\n });\n };\n\n highlight = s => this.setState({s});\n scrub = x => this.setState({x});\n render() {\n const nbChartsInWidth = Math.floor((this.state.width - 24) / 132);\n const nbChartsInHeight = Math.floor(\n (0.65 * (this.state.height - 24)) / 132\n );\n const chartsToRender = nbChartsInWidth * nbChartsInHeight;\n\n const chartsWidth = nbChartsInWidth * 132;\n const chartsHeight = nbChartsInHeight * 132;\n return (\n \n \n {this.state.chartsProps\n ? this.state.chartsProps.slice(0, chartsToRender).map((d, i) => (\n this.changeType(i)}\n style={{\n cursor: 'pointer',\n display: 'inline-block',\n background: 'white',\n margin: 6,\n boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',\n transition: 'transform 0.5s',\n transform: `perspective(1000px) rotateY(${d.changes}turn)`\n }}\n >\n \n {PROJECT_NAME} \n {PROJECT_DESC}
\n Get started
\n \n \n \n );\n }\n}\n\nexport default Hero;\n"
},
{
"path": "packages/website/src/config.js",
"content": "export const PROJECT_TYPE = 'github';\n\nexport const PROJECT_NAME = 'react-vis';\nexport const PROJECT_ORG = 'uber';\nexport const PROJECT_URL = `https://github.com/${PROJECT_ORG}/${PROJECT_NAME}`;\nexport const PROJECT_DESC = 'A composable charting library';\n\nexport const PROJECTS = {};\n\nexport const HOME_HEADING = 'A composable charting library';\n\nexport const HOME_RIGHT = null;\n\nexport const HOME_BULLETS = [];\nexport const GA_TRACKING = 'UA-64694404-13';\nexport const ADDITIONAL_LINKS = [\n {name: 'Storybook', href: './storybook/index.html'}\n];\n\nexport const BASENAME = '/react-vis';\nexport const HISTORY = 'browser';\n"
},
{
"path": "packages/website/src/demos.js",
"content": "import {showCase} from '../../showcase';\nimport * as ShowcaseIndex from '../../showcase/showcase-index';\n\nexport default {\n ...showCase,\n ...ShowcaseIndex\n};\n"
},
{
"path": "packages/website/src/mdRoutes.js",
"content": "import codepen from '../../docs/getting-started/react-vis-in-codepen.md';\nimport install from '../../docs/getting-started/installing-react-vis.md';\nimport newProject from '../../docs/getting-started/new-react-vis-project.md';\nimport first from '../../docs/getting-started/your-first-chart.md';\n\nimport otherThings from '../../docs/examples/building-things-other-than-charts.md';\nimport extensibility from '../../docs/examples/extensibility.md';\nimport responsiveVis from '../../docs/examples/responsive-vis.md';\nimport irisDashboard from '../../docs/examples/iris-dashboard.md';\nimport streamGraph from '../../docs/examples/stream-graph.md';\n\nimport axesShowcase from '../../docs/examples/showcases/axes-showcase.md';\nimport legendsShowcase from '../../docs/examples/showcases/legends-showcase.md';\nimport miscShowcase from '../../docs/examples/showcases/misc-showcase.md';\nimport plotsShowcase from '../../docs/examples/showcases/plots-showcase.md';\nimport radarShowcase from '../../docs/examples/showcases/radar-chart-showcase.md';\nimport radialShowcase from '../../docs/examples/showcases/radial-showcase.md';\nimport sankeysShowcase from '../../docs/examples/showcases/sankeys-showcase.md';\nimport sunburstShowcase from '../../docs/examples/showcases/sunburst-showcase.md';\nimport treemapsShowcase from '../../docs/examples/showcases/treemaps-showcase.md';\n\nimport animation from '../../docs/animation.md';\nimport arcSeries from '../../docs/arc-series.md';\nimport areaSeries from '../../docs/area-series.md';\nimport axes from '../../docs/axes.md';\nimport barSeries from '../../docs/bar-series.md';\nimport borders from '../../docs/borders.md';\nimport chartLabel from '../../docs/chart-label.md';\nimport colors from '../../docs/colors.md';\nimport contourSeries from '../../docs/contour-series.md';\nimport crosshair from '../../docs/crosshair.md';\nimport customSvgSeries from '../../docs/custom-svg-series.md';\nimport decorativeAxis from '../../docs/decorative-axis.md';\nimport flexiblePlots from '../../docs/flexible-plots.md';\nimport gradients from '../../docs/gradients.md';\nimport grids from '../../docs/grids.md';\nimport heatmapSeries from '../../docs/heatmap-series.md';\nimport hexbinSeries from '../../docs/hexbin-series.md';\nimport highlight from '../../docs/highlight.md';\nimport hint from '../../docs/hint.md';\nimport interaction from '../../docs/interaction.md';\nimport labelSeries from '../../docs/label-series.md';\nimport legends from '../../docs/legends.md';\nimport lineMarkSeries from '../../docs/line-mark-series.md';\nimport lineSeries from '../../docs/line-series.md';\nimport markSeries from '../../docs/mark-series.md';\nimport parallel from '../../docs/parallel-coordinates.md';\nimport polygonSeries from '../../docs/polygon-series.md';\nimport presentation from '../../docs/presentation.md';\nimport radar from '../../docs/radar-chart.md';\nimport radial from '../../docs/radial-chart.md';\nimport rectSeries from '../../docs/rect-series.md';\nimport sankey from '../../docs/sankey.md';\nimport scalesAndData from '../../docs/scales-and-data.md';\nimport series from '../../docs/series.md';\nimport style from '../../docs/style.md';\nimport sunburst from '../../docs/sunburst.md';\nimport treemap from '../../docs/treemap.md';\nimport voronoi from '../../docs/voronoi.md';\nimport whiskerSeries from '../../docs/whisker-series.md';\nimport xy from '../../docs/xy-plot.md';\nimport clip from '../../docs/clip.md';\n\nconst mdRoutes = [\n {\n name: 'Examples',\n path: '/examples',\n data: [\n {\n name: 'Showcases',\n children: [\n {\n name: 'Plots',\n markdown: plotsShowcase\n },\n {\n name: 'Axes',\n markdown: axesShowcase\n },\n {\n name: 'Legends',\n markdown: legendsShowcase\n },\n {\n name: 'Sunbursts',\n markdown: sunburstShowcase\n },\n {\n name: 'Radial',\n markdown: radialShowcase\n },\n {\n name: 'Sankeys',\n markdown: sankeysShowcase\n },\n {\n name: 'Treemaps',\n markdown: treemapsShowcase\n },\n {\n name: 'Radar Charts',\n markdown: radarShowcase\n },\n {\n name: 'Misc',\n markdown: miscShowcase\n }\n ]\n },\n {\n name: 'Charts',\n children: [\n {\n name: 'Candlestick',\n markdown: extensibility\n },\n {\n name: 'Force Directed Graph',\n markdown: otherThings\n },\n {\n name: 'Streamgraph',\n markdown: streamGraph\n },\n {\n name: 'Dynamic Dashboard',\n markdown: irisDashboard\n },\n {\n name: 'Responsive Vis',\n markdown: responsiveVis\n }\n ]\n }\n ]\n },\n {\n name: 'Documentation',\n path: '/documentation',\n data: [\n {\n name: 'Welcome to React-vis',\n markdown: presentation\n },\n {\n name: 'Getting Started',\n children: [\n {\n name: 'React-vis in codepen',\n markdown: codepen\n },\n {\n name: 'Installing react-vis',\n markdown: install\n },\n {\n name: 'Creating a new react-vis project',\n markdown: newProject\n },\n {\n name: 'Your first chart',\n markdown: first\n }\n ]\n },\n {\n name: 'General principles',\n children: [\n {\n name: 'Scales and data',\n markdown: scalesAndData\n },\n {\n name: 'Colors',\n markdown: colors\n },\n {\n name: 'Interaction',\n markdown: interaction\n },\n {\n name: 'Animation',\n markdown: animation\n },\n {\n name: 'Style',\n markdown: style\n }\n ]\n },\n {\n name: 'API Reference',\n children: [\n {\n name: 'XY-Plot',\n markdown: xy\n },\n {\n name: 'Series',\n markdown: series\n },\n {\n name: 'Brushing and Dragging',\n markdown: highlight\n },\n {\n name: 'Legends',\n markdown: legends\n },\n {\n name: 'Crosshair',\n markdown: crosshair\n },\n {\n name: 'Grids',\n markdown: grids\n },\n {\n name: 'Hint',\n markdown: hint\n },\n {\n name: 'Axes',\n markdown: axes\n },\n {\n name: 'ChartLabel',\n markdown: chartLabel\n },\n {\n name: 'DecorativeAxis',\n markdown: decorativeAxis\n },\n {\n name: 'Gradients',\n markdown: gradients\n },\n {\n name: 'Flexible plots',\n markdown: flexiblePlots\n },\n {name: 'Clipping', markdown: clip},\n {\n name: 'Borders',\n markdown: borders\n },\n {\n name: 'Voronoi',\n markdown: voronoi\n }\n ]\n },\n {\n name: 'Series reference',\n children: [\n {\n name: 'Arc Series',\n markdown: arcSeries\n },\n {\n name: 'Area Series',\n markdown: areaSeries\n },\n {\n name: 'Bar Series',\n markdown: barSeries\n },\n {\n name: 'Contour Series',\n markdown: contourSeries\n },\n {\n name: 'Custom SVG Series',\n markdown: customSvgSeries\n },\n {\n name: 'Heatmap Series',\n markdown: heatmapSeries\n },\n {\n name: 'Hexbin Series',\n markdown: hexbinSeries\n },\n {\n name: 'Label Series',\n markdown: labelSeries\n },\n {\n name: 'Line Series',\n markdown: lineSeries\n },\n {\n name: 'Line-Mark Series',\n markdown: lineMarkSeries\n },\n {\n name: 'Mark Series',\n markdown: markSeries\n },\n {\n name: 'Polygon Series',\n markdown: polygonSeries\n },\n {\n name: 'Rect Series',\n markdown: rectSeries\n },\n {\n name: 'Whisker Series',\n markdown: whiskerSeries\n }\n ]\n },\n {\n name: 'Other Charts',\n children: [\n {\n name: 'Parallel Coordinates',\n markdown: parallel\n },\n {\n name: 'Radar Chart',\n markdown: radar\n },\n {\n name: 'Radial Chart',\n markdown: radial\n },\n {\n name: 'Sankey Diagram',\n markdown: sankey\n },\n {\n name: 'Sunburst Diagram',\n markdown: sunburst\n },\n {\n name: 'Treemap',\n markdown: treemap\n }\n ]\n }\n ]\n }\n];\n\n// Ocular searches for links with at least one '/' and replaces them\n// with the first route it finds that includes the same markdown name\n// (that is error prone, and that's why current Axes links will all\n// point to Example Axes page instead of Documentation Axes page)\nconst fixMarkdownLinks = markdown => {\n const markdownLinksRegex = /(?:\\(([^()/\\n]+\\.md)\\))/g;\n return markdown.replace(markdownLinksRegex, '(/$1)');\n};\n\nmdRoutes.forEach(section => {\n section.data.forEach(subsection => {\n if (subsection.markdown) {\n subsection.markdown = fixMarkdownLinks(subsection.markdown);\n } else {\n subsection.children.forEach(child => {\n child.markdown = fixMarkdownLinks(child.markdown);\n });\n }\n });\n});\n\nexport default mdRoutes;\n"
},
{
"path": "packages/website/src/styles/_variables.scss",
"content": "$primary: #00ADE6;\n$secondary: #05E3D5;\n$black: #041725;\n$black-20: #213746;\n$black-40: #5A666D;\n$white: #EDEDED;\n$white-40: #8D9BA3;\n\n$font-family: 'Source Sans Pro';\n\n$footer-height: 13rem;\n$topbar-height: 4rem;\n$topbar-maxheight: 8rem;\n$toc-width: 17rem;\n$mobile: 576px;\n\n$gradient-1: linear-gradient(to right, $primary 0%, $secondary 100%);\n$gradient-2: linear-gradient(to bottom, $primary 0%, $secondary 100%);"
},
{
"path": "packages/website/src/styles/index.scss",
"content": ".Hero .container {\n position: absolute;\n background: #fff;\n box-shadow: 1px 1px 2px rgba(0,0,0,0.1);\n cursor: pointer;\n height: 120px;\n overflow: hidden;\n transition: background 0.5s;\n padding: 12px;\n width: 384px;\n h1 {\n margin-top: 0;\n line-height: 84px;\n letter-spacing: normal;\n color: #494949;\n margin-left: 24px;\n transition: color 0.5s;\n }\n #get-started {\n left: 400px;\n opacity: 0;\n color: white;\n animation: pulse 2s infinite;\n }\n\n #project-desc {\n opacity: 1;\n left: 36px;\n }\n p {\n transition: opacity 0.5s, left 0.5s;\n font-size: 1rem;\n line-height: 30px;\n position: absolute;\n bottom: 12px;\n }\n &:hover {\n background: #17b8be;\n h1 {\n color: white;\n }\n #project-desc {\n opacity: 0;\n left: -100px;\n }\n #get-started {\n opacity: 1;\n left: 36px;\n }\n }\n}\n\n.container.f.fw {\n display: none;\n}\n\n.container {\n\n hr.short {\n display: none;\n }\n\n &.markdown-body {\n h2 + h4,\n h2 + h5 {\n margin-top: 0;\n }\n\n h4,\n h5 {\n margin-top: 2em;\n font-size: 1.1em;\n line-height: 1.5em;\n font-weight: 600;\n text-decoration: underline;\n\n & ~ ul code,\n & ~ p code {\n background: rgba(#00ADE6, 0.1);\n }\n\n & ~ p,\n & ~ pre,\n & ~ ul {\n margin-left: 2em;\n font-size: 0.9em;\n line-height: 1.5em;\n\n @media (max-width: 400px) {\n margin-left: 1em;\n }\n\n & + h2 {\n margin-top: 2em;\n }\n }\n }\n }\n\n .Contributors.m-top {\n margin-top: 0;\n\n .Contributor {\n width: 8rem;\n height: 10rem;\n background: none;\n margin: 10px;\n\n img {\n border-radius: 50%;\n border: 4px solid #17b8be;\n box-shadow: 0 0 0 #17b8be;\n transition: border 0.5s, box-shadow 0.5s;\n }\n\n span {\n display: block;\n font-size: 1rem;\n position: absolute;\n margin-left: -8px;\n bottom: 0;\n color: #494949;\n text-align: center;\n text-shadow: none;\n width: 8rem;\n }\n }\n\n .Contributor:after {\n content: '';\n position: absolute;\n left: 3px;\n top: 3px;\n width: calc(8rem - 10px);\n height: calc(8rem - 10px);\n border: 2px solid white;\n border-radius: 50%;\n }\n\n .Contributor:hover {\n img {\n border-radius: 50%;\n border: 4px solid white;\n box-shadow: 0 0 20px #17b8be;\n }\n }\n }\n}\n\n.inline-code.container > div {\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n}\n\n@keyframes pulse {\n 0% {\n font-size: 16px;\n color: #ddd;\n }\n 70% {\n font-size: 17px;\n color: white;\n }\n 100% {\n font-size: 16px;\n color: #ddd;\n }\n}\n"
},
{
"path": "packages/website/static/.gitkeep",
"content": ""
},
{
"path": "packages/website/storybook/areaseries-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {\n withKnobs,\n color,\n number,\n object,\n select\n} from '@storybook/addon-knobs/react';\n\nimport {AreaSeries, LineSeries} from 'react-vis';\n\nimport {generateLinearData, nonUniformX} from './storybook-data.js';\nimport {SimpleChartWrapper} from './storybook-utils.js';\n\nfunction styledAreaSeries(props) {\n return (\n \n \n );\n })\n .addWithJSX('Single Area chart paired with LineSeries', () => {\n return (\n \n \n );\n })\n .addWithJSX('With negative numbers', () => {\n return (\n \n \n );\n })\n .addWithJSX('With non-uniform x numbers', () => {\n return (\n \n \n );\n })\n .addWithJSX('Multiple Area series', () => {\n return (\n \n \n );\n })\n .addWithJSX('Multiple stacked Area series', () => {\n return (\n \n \n );\n });\n\nstoriesOf('Series/AreaSeries/Styling', module)\n .addDecorator(withKnobs)\n .addWithJSX('opacity', () => {\n return (\n \n {styledAreaSeries({\n data: generateLinearData({key: 'area1'}),\n opacity: 0.75\n })}\n \n );\n })\n .addWithJSX('stroke', () => {\n return (\n \n {styledAreaSeries({\n data: generateLinearData({key: 'area1'}),\n stroke: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('style object', () => {\n return (\n \n {styledAreaSeries({\n data: generateLinearData({key: 'area1'}),\n style: {\n stroke: '#E48000',\n strokeAreajoin: 'round',\n strokeWidth: '3px'\n }\n })}\n \n );\n });\n\nstoriesOf('Series/AreaSeries/Curve', module)\n .addDecorator(withKnobs)\n .addWithJSX('Curve', () => {\n return (\n \n \n );\n });\n"
},
{
"path": "packages/website/storybook/axis-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {withKnobs, number, select} from '@storybook/addon-knobs/react';\n\nimport {LineSeries, VerticalBarSeries, XAxis, YAxis} from 'react-vis';\nimport {generateLinearData, getTime, getWord} from './storybook-data.js';\n\nimport {SimpleChartWrapperNoAxes} from './storybook-utils';\n\nstoriesOf('Axes and scales/Axis Formatting/Base', module)\n .addDecorator(withKnobs)\n .addWithJSX('Axis orientation', () => {\n const XAxisOrientation = select(\n 'XAxis.orientation',\n {bottom: 'bottom', top: 'top'},\n 'bottom',\n 'XAxis'\n );\n const YAxisOrientation = select(\n 'YAxis.orientation',\n {left: 'left', right: 'right'},\n 'left',\n 'YAxis'\n );\n return (\n \n \n \n );\n })\n .addWithJSX('Tick total', () => {\n const xTickTotal = number(\n 'XAxis.tickTotal',\n 10,\n {max: 20, min: 0, range: true},\n 'XAxis'\n );\n const yTickTotal = number(\n 'YAxis.tickTotal',\n 10,\n {max: 20, min: 0, range: true},\n 'YAxis'\n );\n\n return (\n \n \n );\n })\n .addWithJSX('Tick Size', () => {\n const xTickSize = number(\n 'XAxis.tickSize',\n 6,\n {max: 10, min: 0, range: true},\n 'XAxis'\n );\n const yTickSize = number(\n 'YAxis.tickSize',\n 6,\n {max: 10, min: 0, range: true},\n 'YAxis'\n );\n\n return (\n \n \n );\n })\n .addWithJSX('Tick Size (Inner)', () => {\n const xTickSize = number(\n 'XAxis.tickSizeInner',\n 6,\n {max: 10, min: 0, range: true},\n 'XAxis'\n );\n const yTickSize = number(\n 'YAxis.tickSizeInner',\n 6,\n {max: 10, min: 0, range: true},\n 'YAxis'\n );\n\n return (\n \n \n );\n })\n .addWithJSX('Tick Size (Outer)', () => {\n const xTickSize = number(\n 'XAxis.tickSizeOuter',\n 6,\n {max: 10, min: 0, range: true},\n 'XAxis'\n );\n const yTickSize = number(\n 'YAxis.tickSizeOuter',\n 6,\n {max: 10, min: 0, range: true},\n 'YAxis'\n );\n\n return (\n \n \n );\n })\n .addWithJSX('Tick orientation', () => {\n const tickLabelAngle = number(\n 'tickLabelAngle',\n 0,\n {max: 90, min: -90, range: true},\n 'XAxis'\n );\n return (\n \n new Date(d).toLocaleDateString()}\n tickLabelAngle={tickLabelAngle}\n />\n \n );\n });\nstoriesOf('Axes and scales/Scales', module)\n .addDecorator(withKnobs)\n .addWithJSX('time Scale', () => {\n return (\n \n new Date(d).toLocaleDateString()} />\n \n );\n })\n .addWithJSX('category scale', () => {\n const data = generateLinearData({\n nbPoints: 8,\n changeRatio: 0.4,\n key: 'bar1'\n });\n return (\n \n \n );\n })\n .addWithJSX('ordinal scale', () => {\n const data = generateLinearData({\n nbPoints: 8,\n changeRatio: 0.4,\n key: 'bar-with-words',\n extraParams: [['x', getWord({})]]\n });\n return (\n \n \n );\n });\n"
},
{
"path": "packages/website/storybook/barseries-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {\n withKnobs,\n color,\n number,\n object,\n text\n} from '@storybook/addon-knobs/react';\n\nimport {HorizontalBarSeries, VerticalBarSeries} from 'react-vis';\n\nimport {generateLinearData, intRandom, random} from './storybook-data.js';\nimport {chooseColorScale, SimpleChartWrapper} from './storybook-utils.js';\n\nfunction addBarSeriesStory(isVertical = true) {\n const seriesName = isVertical ? 'VerticalBarSeries' : 'HorizontalBarSeries';\n const Series = isVertical ? VerticalBarSeries : HorizontalBarSeries;\n function styledSeries(props) {\n return (\n \n \n );\n })\n .addWithJSX(`multiple ${seriesName} - clustered`, () => {\n return (\n \n \n );\n })\n .addWithJSX(`multiple ${seriesName} - stacked`, () => {\n return (\n \n \n \n \n );\n });\n\n storiesOf(`Series/${seriesName}/Styling/At series level`, module)\n .addDecorator(withKnobs)\n .addWithJSX('fill', () => {\n return (\n \n {styledSeries({\n data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),\n fill: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('opacity', () => {\n return (\n \n {styledSeries({\n data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),\n opacity: 0.5\n })}\n \n );\n })\n .addWithJSX('stroke', () => {\n return (\n \n {styledSeries({\n data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),\n stroke: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('style', () => {\n return (\n \n {styledSeries({\n data: dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'}),\n style: {\n stroke: '#2c51be',\n strokeWidth: '3px'\n }\n })}\n \n );\n });\n}\naddBarSeriesStory();\naddBarSeriesStory(false);\n"
},
{
"path": "packages/website/storybook/index.js",
"content": "import '../../react-vis/dist/style.css';\nimport '../.storybook/storybook.css';\n\nimport './areaseries-story';\nimport './barseries-story';\nimport './lineseries-story';\nimport './markseries-story';\nimport './radial-story';\n\nimport './axis-story';\nimport './legend-story';\n\nimport './misc-story';\n"
},
{
"path": "packages/website/storybook/legend-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {\n withKnobs,\n boolean,\n color,\n number,\n select,\n text\n} from '@storybook/addon-knobs/react';\n\nimport {\n ContinuousColorLegend,\n ContinuousSizeLegend,\n DiscreteColorLegend,\n SearchableDiscreteColorLegend\n} from 'react-vis';\n\nimport {CATEGORY_PALETTE, LINEAR_PALETTE} from './storybook-utils.js';\n\nstoriesOf('Legends', module)\n .addDecorator(withKnobs)\n .addWithJSX('Discrete color legend', () => (\n \n \n );\n })\n .addWithJSX('With negative numbers', () => {\n return (\n \n \n );\n })\n .addWithJSX('With non-uniform x numbers', () => {\n return (\n \n \n );\n })\n .addWithJSX('Multiple Line series', () => {\n return (\n \n \n );\n });\n\nstoriesOf('Series/LineSeries/Styling', module)\n .addDecorator(withKnobs)\n .addWithJSX('opacity', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n opacity: 0.5\n })}\n \n );\n })\n .addWithJSX('stroke', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n stroke: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('strokeDasharray', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n strokeDasharray: '5, 5, 1, 5'\n })}\n \n );\n })\n .addWithJSX('strokeStyle', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n strokeStyle: 'dashed'\n })}\n \n );\n })\n .addWithJSX('strokeWidth', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n strokeWidth: '5px'\n })}\n \n );\n })\n .addWithJSX('style object', () => {\n return (\n \n {styledLineSeries({\n data: generateLinearData({key: 'line1'}),\n style: {\n stroke: '#E48000',\n strokeLinejoin: 'round',\n strokeWidth: '3px'\n }\n })}\n \n );\n });\n\nstoriesOf('Series/LineSeries/Curve', module)\n .addDecorator(withKnobs)\n .addWithJSX('Curve', () => {\n return (\n \n \n );\n });\n"
},
{
"path": "packages/website/storybook/markseries-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {\n withKnobs,\n color,\n number,\n object,\n select\n} from '@storybook/addon-knobs/react';\n\nimport {MarkSeries} from 'react-vis';\n\nimport {generateScatterplotData, intRandom, random} from './storybook-data.js';\nimport {chooseColorScale, SimpleChartWrapper} from './storybook-utils.js';\n\nfunction styledMarkSeries(props) {\n return (\n \n \n );\n })\n .addWithJSX('Multiple MarkSeries', () => {\n return (\n \n \n );\n });\n\nstoriesOf('Series/MarkSeries/Styling/By Datapoint', module)\n .addDecorator(withKnobs)\n .addWithJSX('color', () => {\n const {colorScale, colorRange} = chooseColorScale();\n return (\n \n \n );\n })\n .addWithJSX('fill', () => {\n const {colorScale, colorRange} = chooseColorScale();\n return (\n \n \n );\n })\n .addWithJSX('opacity', () => {\n return (\n \n \n );\n })\n .addWithJSX('size', () => {\n return (\n \n \n );\n })\n .addWithJSX('stroke', () => {\n const {colorScale, colorRange} = chooseColorScale();\n return (\n \n \n );\n });\n\nstoriesOf('Series/MarkSeries/Styling/At series level', module)\n .addDecorator(withKnobs)\n .addWithJSX('fill', () => {\n return (\n \n {styledMarkSeries({\n data: generateScatterplotData({key: 'scatter1'}),\n fill: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('opacity', () => {\n return (\n \n {styledMarkSeries({\n data: generateScatterplotData({key: 'scatter1'}),\n opacity: 0.5\n })}\n \n );\n })\n .addWithJSX('stroke', () => {\n return (\n \n {styledMarkSeries({\n data: generateScatterplotData({key: 'scatter1'}),\n stroke: '#2c51be'\n })}\n \n );\n })\n .addWithJSX('strokeWidth', () => {\n return (\n \n {styledMarkSeries({\n data: generateScatterplotData({key: 'scatter1'}),\n strokeWidth: '3px'\n })}\n \n );\n })\n .addWithJSX('style', () => {\n return (\n \n {styledMarkSeries({\n data: generateScatterplotData({key: 'scatter1'}),\n style: {\n stroke: '#E48000',\n strokeOpacity: 0.5,\n strokeWidth: '3px'\n }\n })}\n \n );\n });\n"
},
{
"path": "packages/website/storybook/misc-story.js",
"content": "/* eslint-env node */\n\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {withKnobs, boolean} from '@storybook/addon-knobs/react';\nimport {SimpleChartWrapper} from './storybook-utils';\nimport {generateLinearData} from './storybook-data';\n\nimport {LineSeries, ContentClipPath} from 'react-vis';\n\nconst data = generateLinearData({randomFactor: 10});\n\nstoriesOf('Misc', module)\n .addDecorator(withKnobs)\n .addWithJSX('Clip Content', () => {\n const margin = {left: 40, top: 40, bottom: 40, right: 40};\n const xDomain = [data[1].x, data[data.length - 2].x];\n const shouldClip = boolean(\n 'Enable Clipping',\n false,\n 'General chart options'\n );\n return (\n \n {shouldClip && \n );\n });\n"
},
{
"path": "packages/website/storybook/radial-story.js",
"content": "/* eslint-env node */\nimport React from 'react';\n\nimport {storiesOf} from '@storybook/react';\n\nimport {withKnobs, boolean, number, object} from '@storybook/addon-knobs/react';\n\nimport {generateRadialData} from './storybook-data.js';\nimport {SimpleRadialChartWrapper} from './storybook-utils.js';\n\nfunction labelProps() {\n const showLabels = boolean('showLabels', true, 'Labels');\n const labelsRadiusMultiplier = number(\n 'labelsRadiusMultiplier',\n 1.1,\n {max: 2, min: 0, range: true, step: 0.1},\n 'Labels'\n );\n const labelsStyle = object('labelStyle', {fontSize: 12}, 'Labels');\n return {labelsRadiusMultiplier, labelsStyle, showLabels};\n}\n\nstoriesOf('Series/RadialCharts/Pie Chart', module)\n .addDecorator(withKnobs)\n .addWithJSX('Single Pie Chart', () => {\n const nbSlices = number(\n 'nbSlices',\n 5,\n {max: 8, min: 1, range: true, step: 1},\n 'Pie Chart'\n );\n return (\n \n {({height, width}) => (\n \n {props.noXAxis\n ? null\n : boolean('X Axis', true, 'General chart options') && \n );\n}\n\nexport function SimpleRadialChartWrapper(props) {\n return (\n \n {({height, width}) => (\n \n );\n}\n\nexport function SimpleChartWrapperNoAxes(props) {\n return SimpleChartWrapper({...props, noXAxis: true, noYAxis: true});\n}\n\nexport function chooseColorScale() {\n const colorScale = select(\n 'colorScale',\n {linear: 'linear', category: 'category'},\n 'category'\n );\n const colorRange = {\n category: CATEGORY_PALETTE,\n linear: LINEAR_PALETTE\n }[colorScale];\n return {colorRange, colorScale};\n}\n\nexport const jsxOptions = {\n defaultProps: false,\n displayName: component => {\n if (\n component.type.name === 'SimpleChartWrapper' ||\n component.type.name === 'SimpleChartWrapperNoAxes'\n ) {\n return 'XYPlot';\n }\n if (component.type.name === 'SimpleRadialChartWrapper') {\n return 'RadialChart';\n }\n return component.type.displayName;\n },\n filterProps: ['className', 'getNull', 'nullAccessor', 'stack']\n};\n"
},
{
"path": "packages/website/webpack.config.js",
"content": "/* eslint-env node */\nconst {resolve} = require('path');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: [/node_modules/],\n options: {\n rootMode: 'upward'\n }\n }\n ]\n },\n resolve: {\n alias: {\n react: resolve(__dirname, './node_modules/react')\n }\n }\n};\n"
},
{
"path": "publish-docs.sh",
"content": "#!/bin/bash\ncd website &&\nnpm run build &&\nrm -rf /tmp/dist-vis &&\nmv dist /tmp/dist-vis &&\ngit checkout gh-pages &&\nrm -rf dist &&\nmv /tmp/dist-vis dist &&\nmv dist/index.html .. &&\ncd .. &&\ngit add . &&\ngit commit -m 'Upgrade docs' &&\ngit push && git checkout master\n"
},
{
"path": "publish.sh",
"content": "#!/bin/bash\nDRY_RUN=0\n\nwhile true; do\n case $1 in\n -v | --version ) VERSION=$2; shift 2 ;;\n -t | --tag ) TAG=$2; shift 2 ;;\n -r | --registry ) REGISTRY=$2; shift 2 ;;\n --dry-run ) DRY_RUN=1; shift ;;\n -- ) shift; break ;;\n * ) break ;;\n esac\ndone\n\nif [ -z $VERSION ]\nthen\n echo \"Error: must specify version, with the -v option.\"\n exit 0\nfi\n\nif [ -z $REGISTRY ]\nthen\n echo \"Registry unset, use the default npm registry https://registry.npmjs.org.\"\n REGISTRY=\"https://registry.npmjs.org\"\nfi\n\ncp CHANGELOG.md README.md LICENSE packages/react-vis\n\ncd packages/react-vis\n\nnpm version $VERSION\n\npublish_command=\"npm publish\"\n\nif [ -z $TAG ]\nthen\n publish_command+=\" --tag ${TAG} --registry ${REGISTRY}\"\nelse\n publish_command+=\" --registry ${REGISTRY}\"\nfi\n\nif [ $DRY_RUN -eq 1 ]\nthen\n publish_command+=\" --dry-run\"\nfi\n\neval $publish_command\n\nrm CHANGELOG.md README.md LICENSE\n"
},
{
"path": "remove-refs-to-unpm.pl",
"content": "#!/bin/bash\n\nperl -pi -e 's/unpm\\.uberinternal\\.com/registry\\.yarnpkg\\.com/g' `find . -name yarn.lock`\n"
}
] ![\"deprecated\"](\"https://img.shields.io/maintenance/no/2020?style=flat-square\")
![\"version\"](\"https://img.shields.io/npm/v/react-vis.svg?style=flat-square\")
\n \n \n ![\"build\"](\"https://img.shields.io/travis/uber/react-vis/master.svg?style=flat-square\")
\n \n \n ![\"build\"](\"https://img.shields.io/coveralls/uber/react-vis.svg?style=flat-square\")
\n \n \n ![\"downloads\"](\"https://img.shields.io/npm/dm/react-vis.svg?style=flat-square\")
\n \n