feat(rose): init package

conf/base.yaml

@@ -65,6 +65,14 @@ capture:
         selector: .chart-tabs__content
         output: ./packages/radar/doc/radar.png
 
+      - path: /rose
+        selector: .chart-tabs__content
+        output: ./packages/rose/doc/rose.png
+
+      - path: /rose/canvas
+        selector: .chart-tabs__content
+        output: ./packages/rose/doc/rose-canvas.png
+
       - path: /sankey
         selector: .chart-tabs__content
         output: ./packages/sankey/doc/sankey.png

packages/rose/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) Raphaël Benitte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/rose/README.md

@@ -0,0 +1,15 @@
+# `@nivo/rose`
+
+[![version](https://img.shields.io/npm/v/@nivo/rose.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/rose)
+
+## Rose
+
+[documentation](https://nivo.rocks/rose)
+
+![Rose](./doc/rose.png)
+
+## RoseCanvas
+
+[documentation](https://nivo.rocks/rose/canvas)
+
+![RoseCanvas](./doc/rose-canvas.png)

packages/rose/index.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/nivo-rose')

packages/rose/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@nivo/rose",
+  "version": "0.51.6",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "d3",
+    "charts",
+    "polar",
+    "nightingale",
+    "rose"
+  ],
+  "main": "./index.js",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "index.js",
+    "index.d.ts",
+    "cjs/",
+    "umd/"
+  ],
+  "dependencies": {
+    "@nivo/axes": "0.51.0",
+    "@nivo/core": "0.51.0",
+    "@nivo/legends": "0.51.0",
+    "@nivo/scales": "0.51.0",
+    "@nivo/voronoi": "0.51.0",
+    "d3-scale": "^2.1.2",
+    "d3-shape": "^1.2.2",
+    "lodash": "^4.17.4",
+    "react-motion": "^0.5.2",
+    "recompose": "^0.26.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.10",
+    "react": ">= 16.2.0 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/rose/src/ResponsiveRose.js

@@ -0,0 +1,19 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import { ResponsiveWrapper } from '@nivo/core'
+import Rose from './Rose'
+
+const ResponsiveRose = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <Rose width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveRose

packages/rose/src/ResponsiveRoseCanvas.js

@@ -0,0 +1,19 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import { ResponsiveWrapper } from '@nivo/core'
+import RoseCanvas from './RoseCanvas'
+
+const ResponsiveRoseCanvas = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <RoseCanvas width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveRoseCanvas

packages/rose/src/Rose.js

@@ -0,0 +1,124 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import setDisplayName from 'recompose/setDisplayName'
+import { Container, SvgWrapper } from '@nivo/core'
+import { enhanceSvg } from './enhance'
+import { RosePropTypes } from './props'
+
+class Rose extends Component {
+    static propTypes = RosePropTypes
+
+    handleMouseEnter = showTooltip => (point, event) => {
+        const { isInteractive, onMouseEnter } = this.props
+
+        if (!isInteractive) return
+
+        onMouseEnter && onMouseEnter(point, event)
+        this.showTooltip(showTooltip, point, event)
+    }
+
+    handleMouseMove = showTooltip => (point, event) => {
+        const { isInteractive, onMouseMove } = this.props
+
+        if (!isInteractive) return
+
+        onMouseMove && onMouseMove(point, event)
+        this.showTooltip(showTooltip, point, event)
+    }
+
+    handleMouseLeave = hideTooltip => (point, event) => {
+        const { isInteractive, onMouseLeave } = this.props
+
+        if (!isInteractive) return
+
+        onMouseLeave && onMouseLeave(point, event)
+        hideTooltip()
+    }
+
+    handleClick = (point, event) => {
+        const { isInteractive, onClick } = this.props
+        if (!isInteractive || onClick === undefined) return
+
+        onClick(point.data, event)
+    }
+
+    render() {
+        console.log(this.props)
+        const {
+            arcs,
+            arcGenerator,
+            centerX,
+            centerY,
+
+            borderWidth,
+
+            margin,
+            outerWidth,
+            outerHeight,
+
+            theme,
+            getColor,
+
+            animate,
+            motionStiffness,
+            motionDamping,
+
+            isInteractive,
+        } = this.props
+
+        const motionProps = {
+            animate,
+            motionDamping,
+            motionStiffness,
+        }
+        const springConfig = {
+            damping: motionDamping,
+            stiffness: motionStiffness,
+        }
+
+        return (
+            <Container isInteractive={isInteractive} theme={theme}>
+                {({ showTooltip, hideTooltip }) => {
+                    const onMouseEnter = this.handleMouseEnter(showTooltip)
+                    const onMouseMove = this.handleMouseMove(showTooltip)
+                    const onMouseLeave = this.handleMouseLeave(hideTooltip)
+
+                    return (
+                        <SvgWrapper
+                            width={outerWidth}
+                            height={outerHeight}
+                            margin={margin}
+                            theme={theme}
+                        >
+                            <g transform={`translate(${centerX}, ${centerY})`}>
+                                {arcs.map(arc => {
+                                    return (
+                                        <path
+                                            key={arc.id}
+                                            d={arcGenerator(arc)}
+                                            fill={getColor(arc)}
+                                            stroke={"white"}
+                                            strokeWidth={borderWidth}
+                                            onClick={() => {
+                                                console.log(arc)
+                                            }}
+                                        />
+                                    )
+                                })}
+                            </g>
+                        </SvgWrapper>
+                    )
+                }}
+            </Container>
+        )
+    }
+}
+
+export default setDisplayName('Rose')(enhanceSvg(Rose))

packages/rose/src/RoseCanvas.js

@@ -0,0 +1,122 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import setDisplayName from 'recompose/setDisplayName'
+import { Container, SvgWrapper } from '@nivo/core'
+import { enhanceSvg } from './enhance'
+import { RosePropTypes } from './props'
+
+class RoseCanvas extends Component {
+    static propTypes = RosePropTypes
+
+    handleMouseEnter = showTooltip => (point, event) => {
+        const { isInteractive, onMouseEnter } = this.props
+
+        if (!isInteractive) return
+
+        onMouseEnter && onMouseEnter(point, event)
+        this.showTooltip(showTooltip, point, event)
+    }
+
+    handleMouseMove = showTooltip => (point, event) => {
+        const { isInteractive, onMouseMove } = this.props
+
+        if (!isInteractive) return
+
+        onMouseMove && onMouseMove(point, event)
+        this.showTooltip(showTooltip, point, event)
+    }
+
+    handleMouseLeave = hideTooltip => (point, event) => {
+        const { isInteractive, onMouseLeave } = this.props
+
+        if (!isInteractive) return
+
+        onMouseLeave && onMouseLeave(point, event)
+        hideTooltip()
+    }
+
+    handleClick = (point, event) => {
+        const { isInteractive, onClick } = this.props
+        if (!isInteractive || onClick === undefined) return
+
+        onClick(point.data, event)
+    }
+
+    render() {
+        console.log(this.props)
+        const {
+            arcs,
+            arcGenerator,
+            centerX,
+            centerY,
+
+            margin,
+            width,
+            height,
+            outerWidth,
+            outerHeight,
+
+            theme,
+            getColor,
+
+            animate,
+            motionStiffness,
+            motionDamping,
+
+            isInteractive,
+        } = this.props
+
+        const motionProps = {
+            animate,
+            motionDamping,
+            motionStiffness,
+        }
+        const springConfig = {
+            damping: motionDamping,
+            stiffness: motionStiffness,
+        }
+
+        return (
+            <Container isInteractive={isInteractive} theme={theme}>
+                {({ showTooltip, hideTooltip }) => {
+                    const onMouseEnter = this.handleMouseEnter(showTooltip)
+                    const onMouseMove = this.handleMouseMove(showTooltip)
+                    const onMouseLeave = this.handleMouseLeave(hideTooltip)
+
+                    return (
+                        <SvgWrapper
+                            width={outerWidth}
+                            height={outerHeight}
+                            margin={margin}
+                            theme={theme}
+                        >
+                            <g transform={`translate(${centerX}, ${centerY})`}>
+                                {arcs.map(arc => {
+                                    return (
+                                        <path
+                                            key={arc.id}
+                                            d={arcGenerator(arc)}
+                                            fill={getColor(arc)}
+                                            onClick={() => {
+                                                console.log(arc)
+                                            }}
+                                        />
+                                    )
+                                })}
+                            </g>
+                        </SvgWrapper>
+                    )
+                }}
+            </Container>
+        )
+    }
+}
+
+export default setDisplayName('RoseCanvas')(enhanceSvg(RoseCanvas))