feat(bullet): init @nivo/bullet package

packages/bullet/README.md

@@ -0,0 +1,9 @@
+# `@nivo/bullet`
+
+[![version](https://img.shields.io/npm/v/@nivo/waffle.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/waffle)
+
+## Bullet
+
+[documentation](http://nivo.rocks/bullet)
+
+![Bullet](./doc/bullet.png)

packages/bullet/index.js

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

packages/bullet/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@nivo/bullet",
+  "version": "0.47.1",
+  "license": "MIT",
+  "main": "./index.js",
+  "files": [
+    "README.md",
+    "index.js",
+    "index.d.ts",
+    "cjs/"
+  ],
+  "dependencies": {
+    "@nivo/core": "^0.47.1",
+    "@nivo/legends": "^0.47.0",
+    "d3-scale": "^2.1.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/bullet/src/Bullet.js

@@ -0,0 +1,98 @@
+/*
+ * 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 { scaleLinear } from 'd3-scale'
+import setDisplayName from 'recompose/setDisplayName'
+import { Container, SvgWrapper } from '@nivo/core'
+import { BulletPropTypes } from './props'
+import enhance from './enhance'
+import BulletItem from './BulletItem'
+
+export class Bullet extends Component {
+    static propTypes = BulletPropTypes
+
+    render() {
+        const {
+            data,
+
+            spacing,
+            measureSize,
+            markerSize,
+            reverse,
+
+            margin,
+            width,
+            height,
+            outerWidth,
+            outerHeight,
+
+            theme,
+
+            animate,
+            motionStiffness,
+            motionDamping,
+
+            isInteractive,
+        } = this.props
+
+        const itemHeight = (height - spacing * (data.length - 1)) / data.length
+        const measureHeight = itemHeight * measureSize
+        const markerHeight = itemHeight * markerSize
+
+        const enhancedData = data.map(d => {
+            const all = [...d.ranges, ...d.measures, ...d.markers]
+
+            const max = Math.max(...all)
+
+            const scale = scaleLinear()
+                .domain([0, max])
+                .range(reverse === true ? [width, 0] : [0, width])
+
+            return {
+                ...d,
+                scale,
+            }
+        })
+
+        const motionProps = {
+            animate,
+            motionDamping,
+            motionStiffness,
+        }
+
+        return (
+            <Container isInteractive={isInteractive} theme={theme}>
+                {({ showTooltip, hideTooltip }) => (
+                    <SvgWrapper width={outerWidth} height={outerHeight} margin={margin}>
+                        {enhancedData.map((d, i) => (
+                            <BulletItem
+                                key={d.id}
+                                {...d}
+                                x={0}
+                                y={itemHeight * i + spacing * i}
+                                width={width}
+                                height={itemHeight}
+                                measureHeight={measureHeight}
+                                markerHeight={markerHeight}
+                                theme={theme}
+                                {...motionProps}
+                                showTooltip={showTooltip}
+                                hideTooltip={hideTooltip}
+                            />
+                        ))}
+                    </SvgWrapper>
+                )}
+            </Container>
+        )
+    }
+}
+
+Bullet.displayName = 'Bullet'
+
+export default setDisplayName(Bullet.displayName)(enhance(Bullet))

packages/bullet/src/BulletItem.js

@@ -0,0 +1,136 @@
+/*
+ * 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, Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { TransitionMotion, spring } from 'react-motion'
+import { Axis, motionPropTypes } from '@nivo/core'
+
+export default class BulletItem extends Component {
+    static propTypes = {
+        id: PropTypes.string.isRequired,
+        scale: PropTypes.func.isRequired,
+        ranges: PropTypes.arrayOf(PropTypes.number).isRequired,
+        measures: PropTypes.arrayOf(PropTypes.number).isRequired,
+        markers: PropTypes.arrayOf(PropTypes.number),
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        measureHeight: PropTypes.number.isRequired,
+        markerHeight: PropTypes.number.isRequired,
+        theme: PropTypes.object.isRequired,
+        ...motionPropTypes,
+    }
+
+    static defaultProps = {
+        markers: [],
+    }
+
+    render() {
+        const {
+            scale,
+            ranges,
+            measures,
+            markers,
+            x,
+            y,
+            width,
+            height,
+            measureHeight,
+            markerHeight,
+            theme,
+            animate,
+            motionStiffness,
+            motionDamping,
+        } = this.props
+
+        const springConfig = {
+            damping: motionDamping,
+            stiffness: motionStiffness,
+        }
+
+        return (
+            <g transform={`translate(${x},${y})`}>
+                <TransitionMotion
+                    styles={ranges.map((range, i) => ({
+                        key: `${i}`,
+                        style: {
+                            width: spring(scale(range), springConfig),
+                            height: spring(height, springConfig),
+                        },
+                    }))}
+                >
+                    {interpolatedStyles => (
+                        <Fragment>
+                            {interpolatedStyles.map(({ key, style }) => (
+                                <rect
+                                    key={key}
+                                    width={Math.max(style.width, 0)}
+                                    height={Math.max(style.height, 0)}
+                                    fill="rgba(255, 0, 0, .35)"
+                                />
+                            ))}
+                        </Fragment>
+                    )}
+                </TransitionMotion>
+                <g transform={`translate(0,${(height - measureHeight) / 2})`}>
+                    <TransitionMotion
+                        styles={measures.map((measure, i) => ({
+                            key: `${i}`,
+                            style: {
+                                width: spring(scale(measure), springConfig),
+                                height: spring(measureHeight, springConfig),
+                            },
+                        }))}
+                    >
+                        {interpolatedStyles => (
+                            <Fragment>
+                                {interpolatedStyles.map(({ key, style }) => (
+                                    <rect
+                                        key={key}
+                                        width={Math.max(style.width, 0)}
+                                        height={Math.max(style.height, 0)}
+                                        fill="rgba(0, 255, 0, .35)"
+                                    />
+                                ))}
+                            </Fragment>
+                        )}
+                    </TransitionMotion>
+                </g>
+                <TransitionMotion
+                    styles={markers.map((marker, i) => ({
+                        key: `${i}`,
+                        style: {
+                            x: spring(scale(marker), springConfig),
+                            height: spring(markerHeight, springConfig),
+                        },
+                    }))}
+                >
+                    {interpolatedStyles => (
+                        <Fragment>
+                            {interpolatedStyles.map(({ key, style }) => (
+                                <line
+                                    key={key}
+                                    y1={(height - style.height) / 2}
+                                    y2={(height - style.height) / 2 + style.height}
+                                    x1={style.x}
+                                    x2={style.x}
+                                    fill="none"
+                                    stroke="black"
+                                    strokeWidth={3}
+                                />
+                            ))}
+                        </Fragment>
+                    )}
+                </TransitionMotion>
+                <Axis width={width} height={height} scale={scale} position="bottom" theme={theme} />
+            </g>
+        )
+    }
+}

packages/bullet/src/ResponsiveBullet.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 Bullet from './Bullet'
+
+const ResponsiveBullet = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <Bullet width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveBullet