From 58f03a59a365a574fdac214d1470d670829ee268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sat, 8 Sep 2018 06:37:36 +0900 Subject: [PATCH] feat(umd): git ignore umd builds --- .gitignore | 1 + packages/axes/umd/nivo-axes.js | 580 --- packages/bar/umd/nivo-bar.js | 1314 ------- packages/bullet/umd/nivo-bullet.js | 1225 ------ packages/calendar/umd/nivo-calendar.js | 684 ---- packages/chord/umd/nivo-chord.js | 1065 ----- .../circle-packing/umd/nivo-circle-packing.js | 941 ----- packages/core/umd/nivo-core.js | 3482 ----------------- packages/generators/umd/nivo-generators.js | 434 -- packages/heatmap/umd/nivo-heatmap.js | 1013 ----- packages/legends/umd/nivo-legends.js | 1061 ----- packages/line/umd/nivo-line.js | 820 ---- .../umd/nivo-parallel-coordinates.js | 951 ----- packages/pie/umd/nivo-pie.js | 1338 ------- packages/radar/umd/nivo-radar.js | 1070 ----- packages/sankey/umd/nivo-sankey.js | 1114 ------ packages/scales/umd/nivo-scales.js | 392 -- packages/scatterplot/umd/nivo-scatterplot.js | 681 ---- packages/stream/umd/nivo-stream.js | 565 --- packages/sunburst/umd/nivo-sunburst.js | 277 -- packages/treemap/umd/nivo-treemap.js | 959 ----- packages/voronoi/umd/nivo-voronoi.js | 158 - packages/waffle/umd/nivo-waffle.js | 1174 ------ 23 files changed, 1 insertion(+), 21298 deletions(-) delete mode 100644 packages/axes/umd/nivo-axes.js delete mode 100644 packages/bar/umd/nivo-bar.js delete mode 100644 packages/bullet/umd/nivo-bullet.js delete mode 100644 packages/calendar/umd/nivo-calendar.js delete mode 100644 packages/chord/umd/nivo-chord.js delete mode 100644 packages/circle-packing/umd/nivo-circle-packing.js delete mode 100644 packages/core/umd/nivo-core.js delete mode 100644 packages/generators/umd/nivo-generators.js delete mode 100644 packages/heatmap/umd/nivo-heatmap.js delete mode 100644 packages/legends/umd/nivo-legends.js delete mode 100644 packages/line/umd/nivo-line.js delete mode 100644 packages/parallel-coordinates/umd/nivo-parallel-coordinates.js delete mode 100644 packages/pie/umd/nivo-pie.js delete mode 100644 packages/radar/umd/nivo-radar.js delete mode 100644 packages/sankey/umd/nivo-sankey.js delete mode 100644 packages/scales/umd/nivo-scales.js delete mode 100644 packages/scatterplot/umd/nivo-scatterplot.js delete mode 100644 packages/stream/umd/nivo-stream.js delete mode 100644 packages/sunburst/umd/nivo-sunburst.js delete mode 100644 packages/treemap/umd/nivo-treemap.js delete mode 100644 packages/voronoi/umd/nivo-voronoi.js delete mode 100644 packages/waffle/umd/nivo-waffle.js diff --git a/.gitignore b/.gitignore index 5bdeadee5..ba7dc1554 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ package-lock.json build /packages/*/cjs +/packages/*/umd *.lerna_backup diff --git a/packages/axes/umd/nivo-axes.js b/packages/axes/umd/nivo-axes.js deleted file mode 100644 index 5e97238b7..000000000 --- a/packages/axes/umd/nivo-axes.js +++ /dev/null @@ -1,580 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/isNumber'), require('lodash/isArray'), require('@nivo/core'), require('react'), require('prop-types'), require('lodash/isFunction'), require('d3-format'), require('d3-time-format'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('recompose/setDisplayName'), require('react-motion')) : - typeof define === 'function' && define.amd ? define(['exports', 'lodash/isNumber', 'lodash/isArray', '@nivo/core', 'react', 'prop-types', 'lodash/isFunction', 'd3-format', 'd3-time-format', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'recompose/setDisplayName', 'react-motion'], factory) : - (factory((global.nivo = global.nivo || {}),global['lodash/isNumber'],global['lodash/isArray'],global.nivo,global.React,global.PropTypes,global['lodash/isFunction'],global.d3,global.d3,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.RecomposeSetDisplayName,global.ReactMotion)); -}(this, (function (exports,isNumber,isArray,core,React,PropTypes,isFunction,d3Format,d3TimeFormat,compose,withPropsOnChange,pure,setDisplayName,reactMotion) { 'use strict'; - - isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber; - isArray = isArray && isArray.hasOwnProperty('default') ? isArray['default'] : isArray; - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var centerScale = function centerScale(scale) { - var bandwidth = scale.bandwidth(); - - if (bandwidth === 0) return scale; - - var offset = bandwidth / 2; - if (scale.round()) { - offset = Math.round(offset); - } - - return function (d) { - return scale(d) + offset; - }; - }; - - var getScaleTicks = function getScaleTicks(scale, tickCount) { - if (scale.ticks) return scale.ticks(tickCount); - return scale.domain(); - }; - - var computeCartesianTicks = function computeCartesianTicks(_ref) { - var axis = _ref.axis, - scale = _ref.scale, - ticksPosition = _ref.ticksPosition, - _tickValues = _ref.tickValues, - tickSize = _ref.tickSize, - tickPadding = _ref.tickPadding, - tickRotation = _ref.tickRotation, - _ref$engine = _ref.engine, - engine = _ref$engine === undefined ? 'svg' : _ref$engine; - - var tickValues = isArray(_tickValues) ? _tickValues : undefined; - var tickCount = isNumber(_tickValues) ? _tickValues : undefined; - - var values = tickValues || getScaleTicks(scale, tickCount); - - var textProps = core.textPropsByEngine[engine]; - - var position = scale.bandwidth ? centerScale(scale) : scale; - var line = { lineX: 0, lineY: 0 }; - var text = { textX: 0, textY: 0 }; - - var translate = void 0; - var textAlign = textProps.align.center; - var textBaseline = textProps.baseline.center; - - if (axis === 'x') { - translate = function translate(d) { - return { x: position(d), y: 0 }; - }; - - line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1); - text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); - - if (ticksPosition === 'after') { - textBaseline = textProps.baseline.top; - } else { - textBaseline = textProps.baseline.bottom; - } - - if (tickRotation === 0) { - textAlign = textProps.align.center; - } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) { - textAlign = textProps.align.right; - textBaseline = textProps.baseline.center; - } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) { - textAlign = textProps.align.left; - textBaseline = textProps.baseline.center; - } - } else { - translate = function translate(d) { - return { x: 0, y: position(d) }; - }; - - line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1); - text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1); - - if (ticksPosition === 'after') { - textAlign = textProps.align.left; - } else { - textAlign = textProps.align.right; - } - } - - var ticks = values.map(function (value) { - return _extends({ - key: value, - value: value - }, translate(value), line, text); - }); - - return { - ticks: ticks, - textAlign: textAlign, - textBaseline: textBaseline - }; - }; - - var AxisTick = function (_PureComponent) { - inherits(AxisTick, _PureComponent); - - function AxisTick() { - classCallCheck(this, AxisTick); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - AxisTick.prototype.render = function render() { - var _props = this.props, - _value = _props.value, - x = _props.x, - y = _props.y, - opacity = _props.opacity, - rotate = _props.rotate, - format = _props.format, - lineX = _props.lineX, - lineY = _props.lineY, - _onClick = _props.onClick, - textX = _props.textX, - textY = _props.textY, - textBaseline = _props.textBaseline, - textAnchor = _props.textAnchor, - theme = _props.theme; - - - var value = _value; - if (format !== undefined) { - value = format(value); - } - - var gStyle = { opacity: opacity }; - if (_onClick) { - gStyle['cursor'] = 'pointer'; - } - - return React__default.createElement( - 'g', - _extends({ - transform: 'translate(' + x + ',' + y + ')' - }, _onClick ? { onClick: function onClick(e) { - return _onClick(e, value); - } } : {}, { - style: gStyle - }), - React__default.createElement('line', { x1: 0, x2: lineX, y1: 0, y2: lineY, style: theme.axis.ticks.line }), - React__default.createElement( - 'text', - { - alignmentBaseline: textBaseline, - textAnchor: textAnchor, - transform: 'translate(' + textX + ',' + textY + ') rotate(' + rotate + ')', - style: theme.axis.ticks.text - }, - value - ) - ); - }; - - return AxisTick; - }(React.PureComponent); - - AxisTick.propTypes = { - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - format: PropTypes.func, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - lineX: PropTypes.number.isRequired, - lineY: PropTypes.number.isRequired, - textX: PropTypes.number.isRequired, - textY: PropTypes.number.isRequired, - textBaseline: PropTypes.string.isRequired, - textAnchor: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - rotate: PropTypes.number.isRequired, - onClick: PropTypes.func, - theme: PropTypes.shape({ - axis: core.axisThemePropType.isRequired - }).isRequired - }; - AxisTick.defaultProps = { - opacity: 1, - rotate: 0 - }; - - var willEnter = function willEnter() { - return { - rotate: 0, - opacity: 0, - x: 0, - y: 0 - }; - }; - - var willLeave = function willLeave(springConfig) { - return function (_ref) { - var _ref$style = _ref.style, - x = _ref$style.x, - y = _ref$style.y, - rotate = _ref$style.rotate; - return { - rotate: rotate, - opacity: reactMotion.spring(0, springConfig), - x: reactMotion.spring(x.val, springConfig), - y: reactMotion.spring(y.val, springConfig) - }; - }; - }; - - var defaultTickRenderer = function defaultTickRenderer(props) { - return React__default.createElement(AxisTick, props); - }; - - var Axis = function (_Component) { - inherits(Axis, _Component); - - function Axis() { - classCallCheck(this, Axis); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - Axis.prototype.render = function render() { - var _props = this.props, - axis = _props.axis, - scale = _props.scale, - x = _props.x, - y = _props.y, - length = _props.length, - ticksPosition = _props.ticksPosition, - tickValues = _props.tickValues, - tickSize = _props.tickSize, - tickPadding = _props.tickPadding, - tickRotation = _props.tickRotation, - tickValueFormat = _props.tickValueFormat, - renderTick = _props.renderTick, - legend = _props.legend, - legendPosition = _props.legendPosition, - legendOffset = _props.legendOffset, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - onClick = _props.onClick; - - var _computeCartesianTick = computeCartesianTicks({ - axis: axis, - scale: scale, - ticksPosition: ticksPosition, - tickValues: tickValues, - tickSize: tickSize, - tickPadding: tickPadding, - tickRotation: tickRotation - }), - ticks = _computeCartesianTick.ticks, - textAlign = _computeCartesianTick.textAlign, - textBaseline = _computeCartesianTick.textBaseline; - - var legendNode = null; - if (legend !== undefined) { - var legendX = 0; - var legendY = 0; - var legendRotation = 0; - var textAnchor = void 0; - - if (axis === 'y') { - legendRotation = -90; - legendX = legendOffset; - if (legendPosition === 'start') { - textAnchor = 'start'; - legendY = length; - } else if (legendPosition === 'center') { - textAnchor = 'middle'; - legendY = length / 2; - } else if (legendPosition === 'end') { - textAnchor = 'end'; - } - } else { - legendY = legendOffset; - if (legendPosition === 'start') { - textAnchor = 'start'; - } else if (legendPosition === 'center') { - textAnchor = 'middle'; - legendX = length / 2; - } else if (legendPosition === 'end') { - textAnchor = 'end'; - legendX = length; - } - } - - legendNode = React__default.createElement( - 'text', - { - transform: 'translate(' + legendX + ', ' + legendY + ') rotate(' + legendRotation + ')', - textAnchor: textAnchor, - style: theme.axis.legend.text - }, - legend - ); - } - - if (animate !== true) { - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - ticks.map(function (tick) { - return renderTick(_extends({ - format: tickValueFormat, - rotate: tickRotation, - textBaseline: textBaseline, - textAnchor: textAlign, - theme: theme - }, tick, onClick ? { onClick: onClick } : {})); - }), - React__default.createElement('line', { - style: theme.axis.domain.line, - x1: 0, - x2: axis === 'x' ? length : 0, - y1: 0, - y2: axis === 'x' ? 0 : length - }), - legendNode - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - reactMotion.Motion, - { style: { x: reactMotion.spring(x, springConfig), y: reactMotion.spring(y, springConfig) } }, - function (xy) { - return React__default.createElement( - 'g', - { transform: 'translate(' + xy.x + ',' + xy.y + ')' }, - React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: willEnter, - willLeave: willLeave(springConfig), - styles: ticks.map(function (tick) { - return { - key: '' + tick.key, - data: tick, - style: { - opacity: reactMotion.spring(1, springConfig), - x: reactMotion.spring(tick.x, springConfig), - y: reactMotion.spring(tick.y, springConfig), - rotate: reactMotion.spring(tickRotation, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref2) { - var style = _ref2.style, - tick = _ref2.data; - return renderTick(_extends({ - format: tickValueFormat, - textBaseline: textBaseline, - textAnchor: textAlign, - theme: theme - }, tick, style, onClick ? { onClick: onClick } : {})); - }) - ); - } - ), - React__default.createElement( - reactMotion.Motion, - { - style: { - x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig), - y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig) - } - }, - function (values) { - return React__default.createElement('line', _extends({ style: theme.axis.domain.line, x1: 0, y1: 0 }, values)); - } - ), - legendNode - ); - } - ); - }; - - return Axis; - }(React.Component); - - Axis.propTypes = _extends({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - scale: PropTypes.func.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - length: PropTypes.number.isRequired, - ticksPosition: PropTypes.oneOf(['before', 'after']).isRequired, - tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]), - tickSize: PropTypes.number.isRequired, - tickPadding: PropTypes.number.isRequired, - tickRotation: PropTypes.number.isRequired, - tickFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - renderTick: PropTypes.func.isRequired, - legend: PropTypes.node, - legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired, - legendOffset: PropTypes.number.isRequired, - theme: PropTypes.shape({ - axis: core.axisThemePropType.isRequired - }).isRequired - }, core.motionPropTypes); - Axis.defaultProps = { - x: 0, - y: 0, - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - renderTick: defaultTickRenderer, - legendPosition: 'end', - legendOffset: 0 - }; - - - var enhance = compose(core.withMotion(), withPropsOnChange(['format', 'scale'], function (_ref3) { - var format = _ref3.format, - scale = _ref3.scale; - - if (!format || isFunction(format)) { - return { format: format }; - } else if (scale.type === 'time') { - var f = d3TimeFormat.timeFormat(format); - return { format: function format(d) { - return f(new Date(d)); - } }; - } else { - return { format: d3Format.format(format) }; - } - }), pure); - - var Axis$1 = setDisplayName('Axis')(enhance(Axis)); - - var degreesToRadians = function degreesToRadians(degrees) { - return degrees * Math.PI / 180; - }; - - var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) { - var axis = _ref.axis, - scale = _ref.scale, - _ref$x = _ref.x, - x = _ref$x === undefined ? 0 : _ref$x, - _ref$y = _ref.y, - y = _ref$y === undefined ? 0 : _ref$y, - length = _ref.length, - ticksPosition = _ref.ticksPosition, - tickValues = _ref.tickValues, - _ref$tickSize = _ref.tickSize, - tickSize = _ref$tickSize === undefined ? 5 : _ref$tickSize, - _ref$tickPadding = _ref.tickPadding, - tickPadding = _ref$tickPadding === undefined ? 5 : _ref$tickPadding, - _ref$tickRotation = _ref.tickRotation, - tickRotation = _ref$tickRotation === undefined ? 0 : _ref$tickRotation, - tickValueFormat = _ref.tickValueFormat, - theme = _ref.theme; - - var _computeCartesianTick = computeCartesianTicks({ - axis: axis, - scale: scale, - ticksPosition: ticksPosition, - tickValues: tickValues, - tickSize: tickSize, - tickPadding: tickPadding, - tickRotation: tickRotation, - engine: 'canvas' - }), - ticks = _computeCartesianTick.ticks, - textAlign = _computeCartesianTick.textAlign, - textBaseline = _computeCartesianTick.textBaseline; - - ctx.save(); - ctx.translate(x, y); - - ctx.textAlign = textAlign; - ctx.textBaseline = textBaseline; - ctx.font = theme.axis.ticks.text.fontSize + 'px sans-serif'; - - ctx.lineWidth = theme.axis.domain.line.strokeWidth; - ctx.lineCap = 'square'; - ctx.strokeStyle = theme.axis.domain.line.stroke; - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length); - ctx.stroke(); - - ticks.forEach(function (tick) { - ctx.lineWidth = theme.axis.ticks.line.strokeWidth; - ctx.lineCap = 'square'; - ctx.strokeStyle = theme.axis.ticks.line.stroke; - ctx.beginPath(); - ctx.moveTo(tick.x, tick.y); - ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY); - ctx.stroke(); - - var value = tickValueFormat !== undefined ? tickValueFormat(tick.value) : tick.value; - - ctx.save(); - ctx.translate(tick.x + tick.textX, tick.y + tick.textY); - ctx.rotate(degreesToRadians(tickRotation)); - ctx.fillStyle = theme.axis.ticks.text.fill; - ctx.fillText(value, 0, 0); - ctx.restore(); - }); - - ctx.restore(); - }; - - exports.Axis = Axis$1; - exports.renderAxisToCanvas = renderAxisToCanvas; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/bar/umd/nivo-bar.js b/packages/bar/umd/nivo-bar.js deleted file mode 100644 index 56d1313ec..000000000 --- a/packages/bar/umd/nivo-bar.js +++ /dev/null @@ -1,1314 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-scale'), require('lodash/min'), require('lodash/max'), require('lodash/range'), require('lodash/flattenDepth'), require('d3-shape'), require('react'), require('prop-types'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('@nivo/core'), require('@nivo/legends'), require('recompose/defaultProps'), require('react-motion'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'd3-scale', 'lodash/min', 'lodash/max', 'lodash/range', 'lodash/flattenDepth', 'd3-shape', 'react', 'prop-types', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', '@nivo/core', '@nivo/legends', 'recompose/defaultProps', 'react-motion', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global.d3,global['lodash/min'],global['lodash/max'],global['lodash/range'],global['lodash/flattenDepth'],global.d3,global.React,global.PropTypes,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.nivo,global.nivo,global.RecomposeDefaultProps,global.ReactMotion,global.RecomposeSetDisplayName)); -}(this, (function (exports,d3Scale,min,max,range,flattenDepth,d3Shape,React,PropTypes,compose,withPropsOnChange,pure,core,legends,defaultProps,reactMotion,setDisplayName) { 'use strict'; - - min = min && min.hasOwnProperty('default') ? min['default'] : min; - max = max && max.hasOwnProperty('default') ? max['default'] : max; - range = range && range.hasOwnProperty('default') ? range['default'] : range; - flattenDepth = flattenDepth && flattenDepth.hasOwnProperty('default') ? flattenDepth['default'] : flattenDepth; - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - /** - * Generates indexed scale. - * - * @param {Array.} data - * @param {Function} getIndex - * @param {Array.} range - * @param {number} padding - * @returns {Function} - */ - var getIndexedScale = function getIndexedScale(data, getIndex, range$$1, padding) { - return d3Scale.scaleBand().rangeRound(range$$1).domain(data.map(getIndex)).padding(padding); - }; - - /** - * Generates scale for grouped bar chart. - * - * @param {Array.} data - * @param {Array.} keys - * @param {number} _minValue - * @param {number|string} _maxValue - * @param {Array.} range - * @returns {Function} - */ - var getGroupedScale = function getGroupedScale(data, keys, _minValue, _maxValue, range$$1) { - var allValues = data.reduce(function (acc, entry) { - return [].concat(acc, keys.map(function (k) { - return entry[k]; - })); - }, []); - - var maxValue = _maxValue; - if (maxValue === 'auto') { - maxValue = max(allValues); - } - - var minValue = _minValue; - if (minValue === 'auto') { - minValue = min(allValues); - if (minValue > 0) minValue = 0; - } - - return d3Scale.scaleLinear().rangeRound(range$$1).domain([minValue, maxValue]); - }; - - /** - * Generates x/y scales & bars for vertical grouped bar chart. - * - * @param {Array.} data - * @param {Function} getIndex - * @param {Array.} keys - * @param {number} minValue - * @param {number} maxValue - * @param {boolean} reverse - * @param {number} width - * @param {number} height - * @param {Function} getColor - * @param {number} [padding=0] - * @param {number} [innerPadding=0] - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateVerticalGroupedBars = function generateVerticalGroupedBars(_ref) { - var data = _ref.data, - getIndex = _ref.getIndex, - keys = _ref.keys, - minValue = _ref.minValue, - maxValue = _ref.maxValue, - reverse = _ref.reverse, - width = _ref.width, - height = _ref.height, - getColor = _ref.getColor, - _ref$padding = _ref.padding, - padding = _ref$padding === undefined ? 0 : _ref$padding, - _ref$innerPadding = _ref.innerPadding, - innerPadding = _ref$innerPadding === undefined ? 0 : _ref$innerPadding; - - var xScale = getIndexedScale(data, getIndex, [0, width], padding); - var yRange = reverse ? [0, height] : [height, 0]; - var yScale = getGroupedScale(data, keys, minValue, maxValue, yRange); - - var barWidth = (xScale.bandwidth() - innerPadding * (keys.length - 1)) / keys.length; - var yRef = yScale(0); - - var getY = function getY(d) { - return d > 0 ? yScale(d) : yRef; - }; - var getHeight = function getHeight(d, y) { - return d > 0 ? yRef - y : yScale(d) - yRef; - }; - if (reverse) { - getY = function getY(d) { - return d < 0 ? yScale(d) : yRef; - }; - getHeight = function getHeight(d, y) { - return d < 0 ? yRef - y : yScale(d) - yRef; - }; - } - - var bars = []; - if (barWidth > 0) { - keys.forEach(function (key, i) { - range(xScale.domain().length).forEach(function (index) { - var x = xScale(getIndex(data[index])) + barWidth * i + innerPadding * i; - var y = getY(data[index][key]); - var barHeight = getHeight(data[index][key], y); - - if (barWidth > 0 && barHeight > 0) { - var barData = { - id: key, - value: data[index][key], - index: index, - indexValue: getIndex(data[index]), - data: data[index] - }; - - bars.push({ - key: key + '.' + barData.indexValue, - data: barData, - x: x, - y: y, - width: barWidth, - height: barHeight, - color: getColor(barData) - }); - } - }); - }); - } - - return { xScale: xScale, yScale: yScale, bars: bars }; - }; - - /** - * Generates x/y scales & bars for horizontal grouped bar chart. - * - * @param {Array.} data - * @param {Function} getIndex - * @param {Array.} keys - * @param {number} minValue - * @param {number} maxValue - * @param {boolean} reverse - * @param {number} width - * @param {number} height - * @param {Function} getColor - * @param {number} [padding=0] - * @param {number} [innerPadding=0] - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateHorizontalGroupedBars = function generateHorizontalGroupedBars(_ref2) { - var data = _ref2.data, - getIndex = _ref2.getIndex, - keys = _ref2.keys, - minValue = _ref2.minValue, - maxValue = _ref2.maxValue, - reverse = _ref2.reverse, - width = _ref2.width, - height = _ref2.height, - getColor = _ref2.getColor, - _ref2$padding = _ref2.padding, - padding = _ref2$padding === undefined ? 0 : _ref2$padding, - _ref2$innerPadding = _ref2.innerPadding, - innerPadding = _ref2$innerPadding === undefined ? 0 : _ref2$innerPadding; - - var xRange = reverse ? [width, 0] : [0, width]; - var xScale = getGroupedScale(data, keys, minValue, maxValue, xRange); - var yScale = getIndexedScale(data, getIndex, [height, 0], padding); - - var barHeight = (yScale.bandwidth() - innerPadding * (keys.length - 1)) / keys.length; - var xRef = xScale(0); - - var getX = function getX(d) { - return d > 0 ? xRef : xScale(d); - }; - var getWidth = function getWidth(d, x) { - return d > 0 ? xScale(d) - xRef : xRef - x; - }; - if (reverse) { - getX = function getX(d) { - return d < 0 ? xRef : xScale(d); - }; - getWidth = function getWidth(d, x) { - return d < 0 ? xScale(d) - xRef : xRef - x; - }; - } - - var bars = []; - if (barHeight > 0) { - keys.forEach(function (key, i) { - range(yScale.domain().length).forEach(function (index) { - var x = getX(data[index][key]); - var y = yScale(getIndex(data[index])) + barHeight * i + innerPadding * i; - var barWidth = getWidth(data[index][key], x); - - if (barWidth > 0) { - var barData = { - id: key, - value: data[index][key], - index: index, - indexValue: getIndex(data[index]), - data: data[index] - }; - - bars.push({ - key: key + '.' + barData.indexValue, - data: barData, - x: x, - y: y, - width: barWidth, - height: barHeight, - color: getColor(barData) - }); - } - }); - }); - } - - return { xScale: xScale, yScale: yScale, bars: bars }; - }; - - /** - * Generates x/y scales & bars for grouped bar chart. - * - * @param {Object} options - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateGroupedBars = function generateGroupedBars(options) { - return options.layout === 'vertical' ? generateVerticalGroupedBars(options) : generateHorizontalGroupedBars(options); - }; - - /** - * Generates scale for stacked bar chart. - * - * @param {Array.} data - * @param {number|string} _minValue - * @param {number|string} _maxValue - * @param {Array.} range - * @returns {Function} - */ - var getStackedScale = function getStackedScale(data, _minValue, _maxValue, range$$1) { - var allValues = flattenDepth(data, 2); - - var minValue = _minValue; - if (minValue === 'auto') { - minValue = min(allValues); - } - - var maxValue = _maxValue; - if (maxValue === 'auto') { - maxValue = max(allValues); - } - - return d3Scale.scaleLinear().rangeRound(range$$1).domain([minValue, maxValue]); - }; - - /** - * Generates x/y scales & bars for vertical stacked bar chart. - * - * @param {Array.} data - * @param {Function} getIndex - * @param {Array.} keys - * @param {number} minValue - * @param {number} maxValue - * @param {boolean} reverse - * @param {number} width - * @param {number} height - * @param {Function} getColor - * @param {number} [padding=0] - * @param {number} [innerPadding=0] - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateVerticalStackedBars = function generateVerticalStackedBars(_ref) { - var data = _ref.data, - getIndex = _ref.getIndex, - keys = _ref.keys, - minValue = _ref.minValue, - maxValue = _ref.maxValue, - reverse = _ref.reverse, - width = _ref.width, - height = _ref.height, - getColor = _ref.getColor, - _ref$padding = _ref.padding, - padding = _ref$padding === undefined ? 0 : _ref$padding, - _ref$innerPadding = _ref.innerPadding, - innerPadding = _ref$innerPadding === undefined ? 0 : _ref$innerPadding; - - var stackedData = d3Shape.stack().keys(keys).offset(d3Shape.stackOffsetDiverging)(data); - - var xScale = getIndexedScale(data, getIndex, [0, width], padding); - var yRange = reverse ? [0, height] : [height, 0]; - var yScale = getStackedScale(stackedData, minValue, maxValue, yRange); - - var bars = []; - var barWidth = xScale.bandwidth(); - - var getY = function getY(d) { - return yScale(d[1]); - }; - var getHeight = function getHeight(d, y) { - return yScale(d[0]) - y; - }; - if (reverse) { - getY = function getY(d) { - return yScale(d[0]); - }; - getHeight = function getHeight(d, y) { - return yScale(d[1]) - y; - }; - } - - if (barWidth > 0) { - stackedData.forEach(function (stackedDataItem) { - xScale.domain().forEach(function (index, i) { - var d = stackedDataItem[i]; - var x = xScale(getIndex(d.data)); - - var y = getY(d); - var barHeight = getHeight(d, y); - if (innerPadding > 0) { - y += innerPadding * 0.5; - barHeight -= innerPadding; - } - - if (barHeight > 0) { - var barData = { - id: stackedDataItem.key, - value: d.data[stackedDataItem.key], - index: i, - indexValue: index, - data: d.data - }; - - bars.push({ - key: stackedDataItem.key + '.' + index, - data: barData, - x: x, - y: y, - width: barWidth, - height: barHeight, - color: getColor(barData) - }); - } - }); - }); - } - - return { xScale: xScale, yScale: yScale, bars: bars }; - }; - - /** - * Generates x/y scales & bars for horizontal stacked bar chart. - * - * @param {Array.} data - * @param {Function} getIndex - * @param {Array.} keys - * @param {number} minValue - * @param {number} maxValue - * @param {boolean} reverse - * @param {number} width - * @param {number} height - * @param {Function} getColor - * @param {number} [padding=0] - * @param {number} [innerPadding=0] - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateHorizontalStackedBars = function generateHorizontalStackedBars(_ref2) { - var data = _ref2.data, - getIndex = _ref2.getIndex, - keys = _ref2.keys, - minValue = _ref2.minValue, - maxValue = _ref2.maxValue, - reverse = _ref2.reverse, - width = _ref2.width, - height = _ref2.height, - getColor = _ref2.getColor, - _ref2$padding = _ref2.padding, - padding = _ref2$padding === undefined ? 0 : _ref2$padding, - _ref2$innerPadding = _ref2.innerPadding, - innerPadding = _ref2$innerPadding === undefined ? 0 : _ref2$innerPadding; - - var stackedData = d3Shape.stack().keys(keys).offset(d3Shape.stackOffsetDiverging)(data); - - var xRange = reverse ? [width, 0] : [0, width]; - var xScale = getStackedScale(stackedData, minValue, maxValue, xRange); - var yScale = getIndexedScale(data, getIndex, [height, 0], padding); - - var bars = []; - var barHeight = yScale.bandwidth(); - - var getX = function getX(d) { - return xScale(d[0]); - }; - var getWidth = function getWidth(d, x) { - return xScale(d[1]) - x; - }; - if (reverse) { - getX = function getX(d) { - return xScale(d[1]); - }; - getWidth = function getWidth(d, y) { - return xScale(d[0]) - y; - }; - } - - if (barHeight > 0) { - stackedData.forEach(function (stackedDataItem) { - yScale.domain().forEach(function (index, i) { - var d = stackedDataItem[i]; - var y = yScale(getIndex(d.data)); - - var barData = { - id: stackedDataItem.key, - value: d.data[stackedDataItem.key], - index: i, - indexValue: index, - data: d.data - }; - - var x = getX(d); - var barWidth = getWidth(d, x); - if (innerPadding > 0) { - x += innerPadding * 0.5; - barWidth -= innerPadding; - } - - if (barWidth > 0) { - bars.push({ - key: stackedDataItem.key + '.' + index, - data: barData, - x: x, - y: y, - width: barWidth, - height: barHeight, - color: getColor(barData) - }); - } - }); - }); - } - - return { xScale: xScale, yScale: yScale, bars: bars }; - }; - - /** - * Generates x/y scales & bars for stacked bar chart. - * - * @param {Object} options - * @return {{ xScale: Function, yScale: Function, bars: Array. }} - */ - var generateStackedBars = function generateStackedBars(options) { - return options.layout === 'vertical' ? generateVerticalStackedBars(options) : generateHorizontalStackedBars(options); - }; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var BarItem = function BarItem(_ref) { - var data = _ref.data, - x = _ref.x, - y = _ref.y, - width = _ref.width, - height = _ref.height, - borderRadius = _ref.borderRadius, - color = _ref.color, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - label = _ref.label, - shouldRenderLabel = _ref.shouldRenderLabel, - labelColor = _ref.labelColor, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - onClick = _ref.onClick, - tooltip = _ref.tooltip, - theme = _ref.theme; - - var handleTooltip = function handleTooltip(e) { - return showTooltip(tooltip, e); - }; - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ', ' + y + ')' }, - React__default.createElement('rect', { - width: width, - height: height, - rx: borderRadius, - ry: borderRadius, - fill: data.fill ? data.fill : color, - strokeWidth: borderWidth, - stroke: borderColor, - onMouseEnter: handleTooltip, - onMouseMove: handleTooltip, - onMouseLeave: hideTooltip, - onClick: onClick - }), - shouldRenderLabel && React__default.createElement( - 'text', - { - x: width / 2, - y: height / 2, - textAnchor: 'middle', - alignmentBaseline: 'central', - style: _extends({}, theme.labels.text, { - pointerEvents: 'none', - fill: labelColor - }) - }, - label - ) - ); - }; - - BarItem.propTypes = { - data: PropTypes.shape({ - id: PropTypes.string.isRequired, - value: PropTypes.number.isRequired, - indexValue: PropTypes.string.isRequired - }).isRequired, - - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderRadius: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - shouldRenderLabel: PropTypes.bool.isRequired, - labelColor: PropTypes.string.isRequired, - - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - onClick: PropTypes.func, - tooltip: PropTypes.element.isRequired, - - theme: PropTypes.shape({ - tooltip: PropTypes.shape({}).isRequired - }).isRequired - }; - - var enhance = compose(withPropsOnChange(['data', 'color', 'onClick'], function (_ref2) { - var data = _ref2.data, - color = _ref2.color, - _onClick = _ref2.onClick; - return { - onClick: function onClick(event) { - return _onClick(_extends({ color: color }, data), event); - } - }; - }), withPropsOnChange(['data', 'color', 'theme', 'tooltip', 'tooltipFormat'], function (_ref3) { - var data = _ref3.data, - color = _ref3.color, - theme = _ref3.theme, - tooltip = _ref3.tooltip, - tooltipFormat = _ref3.tooltipFormat; - return { - tooltip: React__default.createElement(core.BasicTooltip, { - id: data.id + ' - ' + data.indexValue, - value: data.value, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null - }) - }; - }), pure); - - var BarItem$1 = enhance(BarItem); - - var BarPropTypes = _extends({ - // data - data: PropTypes.arrayOf(PropTypes.object).isRequired, - indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getIndex: PropTypes.func.isRequired, // computed - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - - groupMode: PropTypes.oneOf(['stacked', 'grouped']).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - reverse: PropTypes.bool.isRequired, - - minValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired, - maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired, - padding: PropTypes.number.isRequired, - innerPadding: PropTypes.number.isRequired, - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - gridXValues: PropTypes.arrayOf(PropTypes.number), - gridYValues: PropTypes.arrayOf(PropTypes.number), - - // customization - barComponent: PropTypes.func.isRequired, - - // labels - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - getLabel: PropTypes.func.isRequired, // computed - labelSkipWidth: PropTypes.number.isRequired, - labelSkipHeight: PropTypes.number.isRequired, - labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getLabelTextColor: PropTypes.func.isRequired, // computed - labelLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getLabelLinkColor: PropTypes.func.isRequired, // computed - - // styling - borderRadius: PropTypes.number.isRequired, - getColor: PropTypes.func.isRequired }, core.defsPropTypes, { - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.any.isRequired, - getBorderColor: PropTypes.func.isRequired, - - // interactivity - isInteractive: PropTypes.bool, - onClick: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - - legends: PropTypes.arrayOf(PropTypes.shape(_extends({ - dataFrom: PropTypes.oneOf(['indexes', 'keys']).isRequired - }, legends.LegendPropShape))).isRequired, - - // canvas specific - pixelRatio: PropTypes.number.isRequired - }); - - var BarDefaultProps = { - indexBy: 'id', - keys: ['value'], - - groupMode: 'stacked', - layout: 'vertical', - reverse: false, - - minValue: 'auto', - maxValue: 'auto', - padding: 0.1, - innerPadding: 0, - - // axes & grid - axisBottom: {}, - axisLeft: {}, - enableGridX: false, - enableGridY: true, - - // customization - barComponent: BarItem$1, - - // labels - enableLabel: true, - label: 'value', - labelSkipWidth: 0, - labelSkipHeight: 0, - labelLinkColor: 'theme', - labelTextColor: 'theme', - - defs: [], - fill: [], - borderRadius: 0, - borderWidth: 0, - borderColor: 'inherit', - - // interactivity - isInteractive: true, - onClick: core.noop, - - legends: [], - - // canvas specific - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }; - - var enhance$1 = (function (Component) { - return compose(defaultProps(BarDefaultProps), core.withTheme(), core.withColors(), core.withDimensions(), core.withMotion(), withPropsOnChange(['indexBy'], function (_ref) { - var indexBy = _ref.indexBy; - return { - getIndex: core.getAccessorFor(indexBy) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref2) { - var labelTextColor = _ref2.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor, 'axis.ticks.text.fill') - }; - }), withPropsOnChange(['labelLinkColor'], function (_ref3) { - var labelLinkColor = _ref3.labelLinkColor; - return { - getLabelLinkColor: core.getInheritedColorGenerator(labelLinkColor, 'axis.ticks.line.stroke') - }; - }), withPropsOnChange(['label', 'labelFormat'], function (_ref4) { - var label = _ref4.label, - labelFormat = _ref4.labelFormat; - return { - getLabel: core.getLabelGenerator(label, labelFormat) - }; - }), withPropsOnChange(['borderColor'], function (_ref5) { - var borderColor = _ref5.borderColor; - return { - getBorderColor: core.getInheritedColorGenerator(borderColor) - }; - }), pure)(Component); - }); - - var barWillEnterHorizontal = function barWillEnterHorizontal(_ref) { - var style = _ref.style; - return { - x: style.x.val, - y: style.y.val, - width: 0, - height: style.height.val - }; - }; - - var barWillEnterVertical = function barWillEnterVertical(_ref2) { - var style = _ref2.style; - return { - x: style.x.val, - y: style.y.val + style.height.val, - width: style.width.val, - height: 0 - }; - }; - - var barWillLeaveHorizontal = function barWillLeaveHorizontal(springConfig) { - return function (_ref3) { - var style = _ref3.style; - return { - x: style.x, - y: style.y, - width: reactMotion.spring(0, springConfig), - height: style.height - }; - }; - }; - - var barWillLeaveVertical = function barWillLeaveVertical(springConfig) { - return function (_ref4) { - var style = _ref4.style; - return { - x: style.x, - y: reactMotion.spring(style.y.val + style.height.val, springConfig), - width: style.width, - height: reactMotion.spring(0, springConfig) - }; - }; - }; - - var Bar = function Bar(_ref5) { - var data = _ref5.data, - getIndex = _ref5.getIndex, - keys = _ref5.keys, - groupMode = _ref5.groupMode, - layout = _ref5.layout, - reverse = _ref5.reverse, - minValue = _ref5.minValue, - maxValue = _ref5.maxValue, - margin = _ref5.margin, - width = _ref5.width, - height = _ref5.height, - outerWidth = _ref5.outerWidth, - outerHeight = _ref5.outerHeight, - padding = _ref5.padding, - innerPadding = _ref5.innerPadding, - axisTop = _ref5.axisTop, - axisRight = _ref5.axisRight, - axisBottom = _ref5.axisBottom, - axisLeft = _ref5.axisLeft, - enableGridX = _ref5.enableGridX, - enableGridY = _ref5.enableGridY, - gridXValues = _ref5.gridXValues, - gridYValues = _ref5.gridYValues, - barComponent = _ref5.barComponent, - enableLabel = _ref5.enableLabel, - getLabel = _ref5.getLabel, - labelSkipWidth = _ref5.labelSkipWidth, - labelSkipHeight = _ref5.labelSkipHeight, - getLabelTextColor = _ref5.getLabelTextColor, - markers = _ref5.markers, - theme = _ref5.theme, - getColor = _ref5.getColor, - defs = _ref5.defs, - fill = _ref5.fill, - borderRadius = _ref5.borderRadius, - borderWidth = _ref5.borderWidth, - getBorderColor = _ref5.getBorderColor, - animate = _ref5.animate, - motionStiffness = _ref5.motionStiffness, - motionDamping = _ref5.motionDamping, - isInteractive = _ref5.isInteractive, - tooltipFormat = _ref5.tooltipFormat, - tooltip = _ref5.tooltip, - onClick = _ref5.onClick, - legends$$1 = _ref5.legends; - - var options = { - layout: layout, - reverse: reverse, - data: data, - getIndex: getIndex, - keys: keys, - minValue: minValue, - maxValue: maxValue, - width: width, - height: height, - getColor: getColor, - padding: padding, - innerPadding: innerPadding - }; - var result = groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options); - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - var willEnter = layout === 'vertical' ? barWillEnterVertical : barWillEnterHorizontal; - var willLeave = layout === 'vertical' ? barWillLeaveVertical(springConfig) : barWillLeaveHorizontal(springConfig); - - var shouldRenderLabel = function shouldRenderLabel(_ref6) { - var width = _ref6.width, - height = _ref6.height; - - if (!enableLabel) return false; - if (labelSkipWidth > 0 && width < labelSkipWidth) return false; - if (labelSkipHeight > 0 && height < labelSkipHeight) return false; - return true; - }; - - var boundDefs = core.bindDefs(defs, result.bars, fill, { - dataKey: 'data', - targetKey: 'data.fill' - }); - - var legendDataForKeys = result.bars.filter(function (bar) { - return bar.data.index === 0; - }).map(function (bar) { - return { - id: bar.data.id, - label: bar.data.id, - color: bar.color, - fill: bar.data.fill - }; - }).reverse(); - - var legendDataForIndexes = result.bars.filter(function (bar) { - return bar.data.id === keys[0]; - }).map(function (bar) { - return { - id: bar.data.indexValue, - label: bar.data.indexValue, - color: bar.color, - fill: bar.data.fill - }; - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref7) { - var showTooltip = _ref7.showTooltip, - hideTooltip = _ref7.hideTooltip; - - var commonProps = { - borderRadius: borderRadius, - borderWidth: borderWidth, - enableLabel: enableLabel, - labelSkipWidth: labelSkipWidth, - labelSkipHeight: labelSkipHeight, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - onClick: onClick, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }; - - var bars = void 0; - if (animate === true) { - bars = React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: willEnter, - willLeave: willLeave, - styles: result.bars.map(function (bar) { - return { - key: bar.key, - data: bar, - style: { - x: reactMotion.spring(bar.x, springConfig), - y: reactMotion.spring(bar.y, springConfig), - width: reactMotion.spring(bar.width, springConfig), - height: reactMotion.spring(bar.height, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref8) { - var key = _ref8.key, - style = _ref8.style, - bar = _ref8.data; - - var baseProps = _extends({}, bar, style); - - return React__default.createElement(barComponent, _extends({ - key: key - }, baseProps, commonProps, { - shouldRenderLabel: shouldRenderLabel(baseProps), - width: Math.max(style.width, 0), - height: Math.max(style.height, 0), - label: getLabel(bar.data), - labelColor: getLabelTextColor(baseProps, theme), - borderColor: getBorderColor(baseProps), - theme: theme - })); - }) - ); - } - ); - } else { - bars = result.bars.map(function (d) { - return React__default.createElement(barComponent, _extends({ - key: d.key - }, d, commonProps, { - label: getLabel(d.data), - shouldRenderLabel: shouldRenderLabel(d), - labelColor: getLabelTextColor(d, theme), - borderColor: getBorderColor(d), - theme: theme - })); - }); - } - - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: boundDefs, - theme: theme - }, - React__default.createElement(core.Grid, _extends({ - theme: theme, - width: width, - height: height, - xScale: enableGridX ? result.xScale : null, - yScale: enableGridY ? result.yScale : null, - xValues: gridXValues, - yValues: gridYValues - }, motionProps)), - React__default.createElement(core.Axes, _extends({ - xScale: result.xScale, - yScale: result.yScale, - width: width, - height: height, - theme: theme, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft - }, motionProps)), - bars, - React__default.createElement(core.CartesianMarkers, { - markers: markers, - width: width, - height: height, - xScale: result.xScale, - yScale: result.yScale, - theme: theme - }), - legends$$1.map(function (legend, i) { - var legendData = void 0; - if (legend.dataFrom === 'keys') { - legendData = legendDataForKeys; - } else if (legend.dataFrom === 'indexes') { - legendData = legendDataForIndexes; - } - - if (legendData === undefined) return null; - - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Bar.propTypes = BarPropTypes; - - var Bar$1 = setDisplayName('Bar')(enhance$1(Bar)); - - var findNodeUnderCursor = function findNodeUnderCursor(nodes, margin, x, y) { - return nodes.find(function (node) { - return core.isCursorInRect(node.x + margin.left, node.y + margin.top, node.width, node.height, x, y); - }); - }; - - var BarCanvas = function (_Component) { - inherits(BarCanvas, _Component); - - function BarCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, BarCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip) { - return function (event) { - if (!_this.bars) return; - - var _this$props = _this.props, - margin = _this$props.margin, - theme = _this$props.theme, - tooltip = _this$props.tooltip; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var bar = findNodeUnderCursor(_this.bars, margin, x, y); - - if (bar !== undefined) { - showTooltip(React__default.createElement(core.BasicTooltip, { - id: bar.data.id + ' - ' + bar.data.indexValue, - value: bar.data.value, - enableChip: true, - color: bar.color, - theme: theme, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: bar.color }, bar.data)) : null - }), event); - } else { - hideTooltip(); - } - }; - }, _this.handleMouseLeave = function (hideTooltip) { - return function () { - hideTooltip(); - }; - }, _this.handleClick = function (event) { - if (!_this.bars) return; - - var _this$props2 = _this.props, - margin = _this$props2.margin, - onClick = _this$props2.onClick; - - var _getRelativeCursor2 = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor2[0], - y = _getRelativeCursor2[1]; - - var node = findNodeUnderCursor(_this.bars, margin, x, y); - if (node !== undefined) onClick(node.data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - BarCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - BarCanvas.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } else { - this.draw(props); - return false; - } - }; - - BarCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - BarCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var data = props.data, - keys = props.keys, - getIndex = props.getIndex, - minValue = props.minValue, - maxValue = props.maxValue, - width = props.width, - height = props.height, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - pixelRatio = props.pixelRatio, - margin = props.margin, - layout = props.layout, - reverse = props.reverse, - groupMode = props.groupMode, - padding = props.padding, - innerPadding = props.innerPadding, - axisTop = props.axisTop, - axisRight = props.axisRight, - axisBottom = props.axisBottom, - axisLeft = props.axisLeft, - theme = props.theme, - getColor = props.getColor; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - - var options = { - layout: layout, - reverse: reverse, - data: data, - getIndex: getIndex, - keys: keys, - minValue: minValue, - maxValue: maxValue, - width: width, - height: height, - getColor: getColor, - padding: padding, - innerPadding: innerPadding - }; - - var result = groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options); - - this.bars = result.bars; - - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - core.renderAxesToCanvas(this.ctx, { - xScale: result.xScale, - yScale: result.yScale, - width: width, - height: height, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft, - theme: theme - }); - - result.bars.forEach(function (_ref) { - var x = _ref.x, - y = _ref.y, - color = _ref.color, - width = _ref.width, - height = _ref.height; - - _this2.ctx.fillStyle = color; - _this2.ctx.fillRect(x, y, width, height); - }); - }; - - BarCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseLeave: _this3.handleMouseLeave(hideTooltip), - onClick: _this3.handleClick - }); - } - ); - }; - - return BarCanvas; - }(React.Component); - - BarCanvas.propTypes = BarPropTypes; - - var BarCanvas$1 = setDisplayName('BarCanvas')(enhance$1(BarCanvas)); - - var ResponsiveBar = function ResponsiveBar(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(Bar$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var ResponsiveBarCanvas = function ResponsiveBarCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(BarCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Bar = Bar$1; - exports.BarCanvas = BarCanvas$1; - exports.ResponsiveBar = ResponsiveBar; - exports.ResponsiveBarCanvas = ResponsiveBarCanvas; - exports.BarPropTypes = BarPropTypes; - exports.BarDefaultProps = BarDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/bullet/umd/nivo-bullet.js b/packages/bullet/umd/nivo-bullet.js deleted file mode 100644 index efa618735..000000000 --- a/packages/bullet/umd/nivo-bullet.js +++ /dev/null @@ -1,1225 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/last'), require('react'), require('prop-types'), require('react-motion'), require('@nivo/core'), require('lodash/partial'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('lodash/isString'), require('recompose/defaultProps'), require('d3-scale'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'lodash/last', 'react', 'prop-types', 'react-motion', '@nivo/core', 'lodash/partial', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'lodash/isString', 'recompose/defaultProps', 'd3-scale', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global['lodash/last'],global.React,global.PropTypes,global.ReactMotion,global.nivo,global['lodash/partial'],global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global['lodash/isString'],global.RecomposeDefaultProps,global.d3,global.RecomposeSetDisplayName)); -}(this, (function (exports,last,React,PropTypes,reactMotion,core,partial,compose,withPropsOnChange,pure,isString,defaultProps,d3Scale,setDisplayName) { 'use strict'; - - last = last && last.hasOwnProperty('default') ? last['default'] : last; - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - partial = partial && partial.hasOwnProperty('default') ? partial['default'] : partial; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - isString = isString && isString.hasOwnProperty('default') ? isString['default'] : isString; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var stackValues = function stackValues(values, colorScale) { - var useAverage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; - - var normalized = [].concat(values).filter(function (v) { - return v !== 0; - }).sort(function (a, b) { - return a - b; - }); - - return normalized.reduce(function (acc, v1, index) { - var v0 = last(acc) !== undefined ? last(acc).v1 : 0; - var sequentialValue = useAverage === true ? v0 + (v1 - v0) / 2 : v1; - - return [].concat(acc, [{ - index: index, - v0: v0, - v1: v1, - color: colorScale(colorScale.type === 'sequential' ? sequentialValue : index) - }]); - }, []); - }; - - var getComputeRect = function getComputeRect(_ref) { - var layout = _ref.layout, - reverse = _ref.reverse, - scale = _ref.scale, - height = _ref.height; - - if (layout === 'horizontal') { - if (reverse === true) { - return function (d) { - var x = scale(d.v1); - var w = scale(d.v0) - x; - - return { x: x, y: 0, width: w, height: height }; - }; - } - - return function (d) { - var x = scale(d.v0); - var w = scale(d.v1) - x; - - return { x: x, y: 0, width: w, height: height }; - }; - } - - if (reverse === true) { - return function (d) { - var y = scale(d.v0); - var h = scale(d.v1) - y; - - return { x: 0, y: y, width: height, height: h }; - }; - } - - return function (d) { - var y = scale(d.v1); - var h = scale(d.v0) - y; - - return { x: 0, y: y, width: height, height: h }; - }; - }; - - var computeRects = function computeRects(_ref2) { - var data = _ref2.data, - layout = _ref2.layout, - reverse = _ref2.reverse, - scale = _ref2.scale, - height = _ref2.height; - - var computeRect = getComputeRect({ - layout: layout, - reverse: reverse, - scale: scale, - height: height - }); - - return data.map(function (d) { - return _extends({ - data: d - }, computeRect(d)); - }); - }; - - var getPositionGenerator = function getPositionGenerator(_ref) { - var layout = _ref.layout, - reverse = _ref.reverse, - scale = _ref.scale, - height = _ref.height, - markerSize = _ref.markerSize; - - if (layout === 'horizontal') { - return function (marker) { - var x = scale(marker.value); - var y = height / 2; - var rotation = reverse === true ? 180 : 0; - - return { x: x, y: y, size: markerSize, rotation: rotation }; - }; - } - - return function (marker) { - var x = height / 2; - var y = scale(marker.value); - var rotation = reverse === true ? 270 : 90; - - return { x: x, y: y, size: markerSize, rotation: rotation }; - }; - }; - - var BulletMarkers = function (_Component) { - inherits(BulletMarkers, _Component); - - function BulletMarkers() { - var _temp, _this, _ret; - - classCallCheck(this, BulletMarkers); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseEnter = function (data, event) { - _this.props.onMouseEnter(data, event); - }, _this.handleMouseLeave = function (data, event) { - _this.props.onMouseLeave(data, event); - }, _this.handleClick = function (data, event) { - _this.props.onClick(data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - BulletMarkers.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - scale = _props.scale, - layout = _props.layout, - reverse = _props.reverse, - markers = _props.markers, - height = _props.height, - markerSize = _props.markerSize, - component = _props.component, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var getPosition = getPositionGenerator({ layout: layout, reverse: reverse, scale: scale, height: height, markerSize: markerSize }); - - if (animate !== true) { - return React__default.createElement( - React.Fragment, - null, - markers.map(function (marker) { - return React__default.createElement(component, _extends({ - key: marker.index - }, marker, getPosition(marker), { - data: marker, - onMouseEnter: partial(_this2.handleMouseEnter, marker), - onMouseMove: partial(_this2.handleMouseEnter, marker), - onMouseLeave: partial(_this2.handleMouseLeave, marker), - onClick: partial(_this2.handleClick, marker) - })); - }) - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: markers.map(function (marker, i) { - var position = getPosition(marker); - - return { - key: '' + i, - data: marker, - style: _extends({ - x: reactMotion.spring(position.x, springConfig), - y: reactMotion.spring(position.y, springConfig), - size: reactMotion.spring(position.size, springConfig), - rotation: reactMotion.spring(position.rotation, springConfig) - }, core.colorMotionSpring(marker.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - marker = _ref2.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement(component, _extends({ - key: key - }, marker, style, { - color: color, - data: marker, - onMouseEnter: partial(_this2.handleMouseEnter, marker), - onMouseMove: partial(_this2.handleMouseEnter, marker), - onMouseLeave: partial(_this2.handleMouseLeave, marker), - onClick: partial(_this2.handleClick, marker) - })); - }) - ); - } - ); - }; - - return BulletMarkers; - }(React.Component); - - BulletMarkers.propTypes = _extends({ - scale: PropTypes.func.isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - reverse: PropTypes.bool.isRequired, - markers: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.number.isRequired, - index: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - height: PropTypes.number.isRequired, - markerSize: PropTypes.number.isRequired, - component: PropTypes.func.isRequired, - onMouseEnter: PropTypes.func.isRequired, - onMouseLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }, core.motionPropTypes); - - var BulletRects = function (_Component) { - inherits(BulletRects, _Component); - - function BulletRects() { - var _temp, _this, _ret; - - classCallCheck(this, BulletRects); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseEnter = function (data, event) { - _this.props.onMouseEnter(data, event); - }, _this.handleMouseLeave = function (data, event) { - _this.props.onMouseLeave(data, event); - }, _this.handleClick = function (data, event) { - _this.props.onClick(data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - BulletRects.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - rects = _props.rects, - layout = _props.layout, - y = _props.y, - component = _props.component, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var transform = 'translate(' + (layout === 'horizontal' ? 0 : y) + ',' + (layout === 'horizontal' ? y : 0) + ')'; - - if (animate !== true) { - return React__default.createElement( - 'g', - { transform: transform }, - rects.map(function (rect) { - return React__default.createElement(component, _extends({ - key: rect.data.index, - index: rect.data.index, - color: rect.data.color - }, rect, { - onMouseEnter: partial(_this2.handleMouseEnter, rect.data), - onMouseMove: partial(_this2.handleMouseEnter, rect.data), - onMouseLeave: partial(_this2.handleMouseLeave, rect.data), - onClick: partial(_this2.handleClick, rect.data) - })); - }) - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - 'g', - { transform: transform }, - React__default.createElement( - reactMotion.TransitionMotion, - { - styles: rects.map(function (rect) { - return { - key: '' + rect.data.index, - data: rect.data, - style: _extends({ - x: reactMotion.spring(rect.x, springConfig), - y: reactMotion.spring(rect.y, springConfig), - width: reactMotion.spring(rect.width, springConfig), - height: reactMotion.spring(rect.height, springConfig) - }, core.colorMotionSpring(rect.data.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref) { - var key = _ref.key, - style = _ref.style, - data = _ref.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement(component, { - key: key, - index: Number(key), - data: data, - x: style.x, - y: style.y, - width: Math.max(style.width, 0), - height: Math.max(style.height, 0), - color: color, - onMouseEnter: partial(_this2.handleMouseEnter, data), - onMouseMove: partial(_this2.handleMouseEnter, data), - onMouseLeave: partial(_this2.handleMouseLeave, data), - onClick: partial(_this2.handleClick, data) - }); - }) - ); - } - ) - ); - }; - - return BulletRects; - }(React.Component); - - BulletRects.propTypes = _extends({ - scale: PropTypes.func.isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - v0: PropTypes.number.isRequired, - v1: PropTypes.number.isRequired - })).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - reverse: PropTypes.bool.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - rects: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - data: PropTypes.shape({ - index: PropTypes.number.isRequired, - v0: PropTypes.number.isRequired, - v1: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - }).isRequired - })).isRequired, - component: PropTypes.func.isRequired, - onMouseEnter: PropTypes.func.isRequired, - onMouseLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }, core.motionPropTypes); - - - var EnhancedBulletRects = compose(withPropsOnChange(['data', 'layout', 'reverse', 'scale', 'height'], function (_ref2) { - var data = _ref2.data, - layout = _ref2.layout, - reverse = _ref2.reverse, - scale = _ref2.scale, - height = _ref2.height; - return { - rects: computeRects({ - data: data, - layout: layout, - reverse: reverse, - scale: scale, - height: height - }) - }; - }), pure)(BulletRects); - - EnhancedBulletRects.displayName = 'BulletRects'; - - var BulletRectsItem = function (_PureComponent) { - inherits(BulletRectsItem, _PureComponent); - - function BulletRectsItem() { - classCallCheck(this, BulletRectsItem); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - BulletRectsItem.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - width = _props.width, - height = _props.height, - color = _props.color, - onMouseEnter = _props.onMouseEnter, - onMouseMove = _props.onMouseMove, - onMouseLeave = _props.onMouseLeave, - onClick = _props.onClick; - - - return React__default.createElement('rect', { - x: x, - y: y, - width: width, - height: height, - fill: color, - onMouseMove: onMouseMove, - onMouseEnter: onMouseEnter, - onMouseLeave: onMouseLeave, - onClick: onClick - }); - }; - - return BulletRectsItem; - }(React.PureComponent); - - BulletRectsItem.propTypes = { - index: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - data: PropTypes.shape({ - v0: PropTypes.number.isRequired, - v1: PropTypes.number.isRequired - }).isRequired, - onMouseEnter: PropTypes.func.isRequired, - onMouseMove: PropTypes.func.isRequired, - onMouseLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - - var BulletMarkersItem = function (_PureComponent) { - inherits(BulletMarkersItem, _PureComponent); - - function BulletMarkersItem() { - classCallCheck(this, BulletMarkersItem); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - BulletMarkersItem.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - size = _props.size, - rotation = _props.rotation, - color = _props.color, - onMouseEnter = _props.onMouseEnter, - onMouseMove = _props.onMouseMove, - onMouseLeave = _props.onMouseLeave, - onClick = _props.onClick; - - - return React__default.createElement('line', { - transform: 'rotate(' + rotation + ', ' + x + ', ' + y + ')', - x1: x, - x2: x, - y1: y - size / 2, - y2: y + size / 2, - fill: 'none', - stroke: color, - strokeWidth: '5', - onMouseMove: onMouseMove, - onMouseEnter: onMouseEnter, - onMouseLeave: onMouseLeave, - onClick: onClick - }); - }; - - return BulletMarkersItem; - }(React.PureComponent); - - BulletMarkersItem.propTypes = { - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - rotation: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - data: PropTypes.shape({ - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - }).isRequired, - onMouseEnter: PropTypes.func.isRequired, - onMouseMove: PropTypes.func.isRequired, - onMouseLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - - var BulletItem = function (_Component) { - inherits(BulletItem, _Component); - - function BulletItem() { - var _temp, _this, _ret; - - classCallCheck(this, BulletItem); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleRangeTooltip = function (showTooltip, range, event) { - var theme = _this.props.theme; - - showTooltip(React__default.createElement(core.BasicTooltip, { - id: React__default.createElement( - 'span', - null, - React__default.createElement( - 'strong', - null, - range.v0 - ), - ' to ', - React__default.createElement( - 'strong', - null, - range.v1 - ) - ), - enableChip: true, - color: range.color, - theme: theme - //format={format} - //renderContent={typeof tooltip === 'function' ? tooltip.bind(null, { ...node }) : null} - }), event); - }, _this.handleMeasureTooltip = function (showTooltip, measure, event) { - var theme = _this.props.theme; - - showTooltip(React__default.createElement(core.BasicTooltip, { - id: React__default.createElement( - 'strong', - null, - measure.v1 - ), - enableChip: true, - color: measure.color, - theme: theme - //format={format} - //renderContent={typeof tooltip === 'function' ? tooltip.bind(null, { ...node }) : null} - }), event); - }, _this.handleMarkerTooltip = function (showTooltip, marker, event) { - var theme = _this.props.theme; - - showTooltip(React__default.createElement(core.BasicTooltip, { - id: React__default.createElement( - 'strong', - null, - marker.value - ), - enableChip: true, - color: marker.color, - theme: theme - //format={format} - //renderContent={typeof tooltip === 'function' ? tooltip.bind(null, { ...node }) : null} - }), event); - }, _this.handleRangeClick = function (range, event) { - var _this$props = _this.props, - id = _this$props.id, - onRangeClick = _this$props.onRangeClick; - - onRangeClick(_extends({ id: id }, range), event); - }, _this.handleMeasureClick = function (measure, event) { - var _this$props2 = _this.props, - id = _this$props2.id, - onMeasureClick = _this$props2.onMeasureClick; - - onMeasureClick(_extends({ id: id }, measure), event); - }, _this.handleMarkerClick = function (marker, event) { - var _this$props3 = _this.props, - id = _this$props3.id, - onMarkerClick = _this$props3.onMarkerClick; - - onMarkerClick(_extends({ id: id }, marker), event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - BulletItem.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - id = _props.id, - scale = _props.scale, - layout = _props.layout, - reverse = _props.reverse, - _axisPosition = _props.axisPosition, - x = _props.x, - y = _props.y, - width = _props.width, - height = _props.height, - _title = _props.title, - titlePosition = _props.titlePosition, - titleAlign = _props.titleAlign, - titleOffsetX = _props.titleOffsetX, - titleOffsetY = _props.titleOffsetY, - titleRotation = _props.titleRotation, - computedRanges = _props.computedRanges, - rangeComponent = _props.rangeComponent, - computedMeasures = _props.computedMeasures, - measureComponent = _props.measureComponent, - measureHeight = _props.measureHeight, - computedMarkers = _props.computedMarkers, - markerComponent = _props.markerComponent, - markerHeight = _props.markerHeight, - theme = _props.theme, - showTooltip = _props.showTooltip, - hideTooltip = _props.hideTooltip, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var motionProps = { - animate: animate, - motionStiffness: motionStiffness, - motionDamping: motionDamping - }; - - var axisPosition = void 0; - if (layout === 'horizontal') { - axisPosition = _axisPosition === 'before' ? 'top' : 'bottom'; - } else { - axisPosition = _axisPosition === 'before' ? 'left' : 'right'; - } - - var rangeNodes = React__default.createElement(EnhancedBulletRects, _extends({ - data: computedRanges, - scale: scale, - layout: layout, - reverse: reverse, - x: 0, - y: 0, - width: width, - height: height, - component: rangeComponent, - onMouseEnter: partial(this.handleRangeTooltip, showTooltip), - onMouseLeave: hideTooltip, - onClick: this.handleRangeClick - }, motionProps)); - - var markerNodes = React__default.createElement(BulletMarkers, _extends({ - markers: computedMarkers, - scale: scale, - layout: layout, - reverse: reverse, - height: height, - markerSize: markerHeight, - component: markerComponent, - onMouseEnter: partial(this.handleMarkerTooltip, showTooltip), - onMouseLeave: hideTooltip, - onClick: this.handleMarkerClick - }, motionProps)); - - var axis = React__default.createElement(core.Axis, _extends({ - width: layout === 'horizontal' ? width : height, - height: layout === 'horizontal' ? height : width, - scale: scale, - position: axisPosition, - theme: theme - }, motionProps)); - - var title = _title || id; - var titleX = void 0; - var titleY = void 0; - if (layout === 'horizontal') { - titleX = titlePosition === 'before' ? titleOffsetX : width + titleOffsetX; - titleY = height / 2 + titleOffsetY; - } else { - titleX = height / 2 + titleOffsetX; - titleY = titlePosition === 'before' ? titleOffsetY : width + titleOffsetY; - } - - var titleNode = React__default.createElement( - 'g', - { transform: 'translate(' + titleX + ',' + titleY + ') rotate(' + titleRotation + ')' }, - isString(title) ? React__default.createElement( - 'text', - { - style: _extends({}, theme.labels.text, { - alignmentBaseline: 'central', - textAnchor: titleAlign - }) - }, - title - ) : title - ); - - if (animate !== true) { - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - rangeNodes, - React__default.createElement(EnhancedBulletRects, _extends({ - data: computedMeasures, - scale: scale, - layout: layout, - reverse: reverse, - x: 0, - y: (height - measureHeight) / 2, - width: width, - height: measureHeight, - component: measureComponent, - onMouseEnter: partial(this.handleMeasureTooltip, showTooltip), - onMouseLeave: hideTooltip, - onClick: this.handleMeasureClick - }, motionProps)), - axis, - markerNodes, - titleNode - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.Motion, - { - style: { - x: reactMotion.spring(x, springConfig), - y: reactMotion.spring(y, springConfig), - measuresY: reactMotion.spring((height - measureHeight) / 2, springConfig) - } - }, - function (values) { - return React__default.createElement( - 'g', - { transform: 'translate(' + values.x + ',' + values.y + ')' }, - rangeNodes, - React__default.createElement(EnhancedBulletRects, _extends({ - data: computedMeasures, - scale: scale, - layout: layout, - reverse: reverse, - x: 0, - y: values.measuresY, - width: width, - height: measureHeight, - component: measureComponent, - onMouseEnter: partial(_this2.handleMeasureTooltip, showTooltip), - onMouseLeave: hideTooltip, - onClick: _this2.handleMeasureClick - }, motionProps)), - axis, - markerNodes, - titleNode - ); - } - ); - }; - - return BulletItem; - }(React.Component); - - BulletItem.propTypes = { - id: PropTypes.string.isRequired, - scale: PropTypes.func.isRequired, - ranges: PropTypes.arrayOf(PropTypes.number).isRequired, - computedRanges: PropTypes.arrayOf(PropTypes.shape({ - index: PropTypes.number.isRequired, - v0: PropTypes.number.isRequired, - v1: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - measures: PropTypes.arrayOf(PropTypes.number).isRequired, - computedMeasures: PropTypes.arrayOf(PropTypes.shape({ - index: PropTypes.number.isRequired, - v0: PropTypes.number.isRequired, - v1: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - markers: PropTypes.arrayOf(PropTypes.number).isRequired, - computedMarkers: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.number.isRequired, - index: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - reverse: PropTypes.bool.isRequired, - axisPosition: PropTypes.oneOf(['before', 'after']).isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - title: PropTypes.node, - titlePosition: PropTypes.oneOf(['before', 'after']).isRequired, - titleAlign: PropTypes.oneOf(['start', 'middle', 'end']).isRequired, - titleOffsetX: PropTypes.number.isRequired, - titleOffsetY: PropTypes.number.isRequired, - titleRotation: PropTypes.number.isRequired, - - rangeComponent: PropTypes.func.isRequired, - rangeColors: PropTypes.any.isRequired, - rangeColorScale: PropTypes.func.isRequired, - onRangeClick: PropTypes.func.isRequired, - - measureHeight: PropTypes.number.isRequired, - measureComponent: PropTypes.func.isRequired, - measureColors: PropTypes.any.isRequired, - measureColorScale: PropTypes.func.isRequired, - onMeasureClick: PropTypes.func.isRequired, - - markerHeight: PropTypes.number.isRequired, - markerComponent: PropTypes.func.isRequired, - markerColors: PropTypes.any.isRequired, - markerColorScale: PropTypes.func.isRequired, - onMarkerClick: PropTypes.func.isRequired, - - theme: core.themePropType.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired - }; - - - var EnhancedBulletItem = compose(defaultProps({ - layout: 'horizontal', - reverse: false, - axisPosition: 'after', - titlePosition: 'before', - titleAlign: 'middle', - titleRotation: 0, - titleOffsetX: 0, - titleOffsetY: 0, - rangeComponent: BulletRectsItem, - rangeColors: 'seq:cool', - onRangeClick: core.noop, - measureComponent: BulletRectsItem, - measureColors: 'seq:red_purple', - onMeasureClick: core.noop, - markers: [], - markerComponent: BulletMarkersItem, - markerColors: 'seq:red_purple', - onMarkerClick: core.noop, - showTooltip: core.noop, - hideTooltip: core.noop - }), core.withMotion(), withPropsOnChange(['rangeColors', 'scale'], function (_ref) { - var rangeColors = _ref.rangeColors, - scale = _ref.scale; - return { - rangeColorScale: core.getColorScale(rangeColors, scale, true) - }; - }), withPropsOnChange(['ranges', 'rangeColorScale'], function (_ref2) { - var ranges = _ref2.ranges, - rangeColorScale = _ref2.rangeColorScale; - return { - computedRanges: stackValues(ranges, rangeColorScale) - }; - }), withPropsOnChange(['measureColors', 'scale'], function (_ref3) { - var measureColors = _ref3.measureColors, - scale = _ref3.scale; - return { - measureColorScale: core.getColorScale(measureColors, scale) - }; - }), withPropsOnChange(['measures', 'measureColorScale'], function (_ref4) { - var measures = _ref4.measures, - measureColorScale = _ref4.measureColorScale; - return { - computedMeasures: stackValues(measures, measureColorScale) - }; - }), withPropsOnChange(['markerColors', 'scale'], function (_ref5) { - var markerColors = _ref5.markerColors, - scale = _ref5.scale; - return { - markerColorScale: core.getColorScale(markerColors, scale) - }; - }), withPropsOnChange(['markers', 'markerColorScale'], function (_ref6) { - var markers = _ref6.markers, - markerColorScale = _ref6.markerColorScale; - return { - computedMarkers: markers.map(function (marker, index) { - return { - value: marker, - index: index, - color: markerColorScale(markerColorScale.type === 'sequential' ? marker : index) - }; - }) - }; - }), pure)(BulletItem); - - EnhancedBulletItem.displayName = 'BulletItem'; - - var commonPropTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - title: PropTypes.node, - ranges: PropTypes.arrayOf(PropTypes.number).isRequired, - measures: PropTypes.arrayOf(PropTypes.number).isRequired, - markers: PropTypes.arrayOf(PropTypes.number) - })).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - reverse: PropTypes.bool.isRequired, - spacing: PropTypes.number.isRequired, - - titlePosition: PropTypes.oneOf(['before', 'after']).isRequired, - titleAlign: PropTypes.oneOf(['start', 'middle', 'end']).isRequired, - titleOffsetX: PropTypes.number.isRequired, - titleOffsetY: PropTypes.number.isRequired, - titleRotation: PropTypes.number.isRequired, - - rangeColors: PropTypes.any.isRequired, - rangeBorderWidth: PropTypes.number.isRequired, - rangeBorderColor: PropTypes.any.isRequired, - onRangeClick: PropTypes.func, - - measureColors: PropTypes.any.isRequired, - measureSize: PropTypes.number.isRequired, - measureBorderWidth: PropTypes.number.isRequired, - measureBorderColor: PropTypes.any.isRequired, - onMeasureClick: PropTypes.func, - - markerColors: PropTypes.any.isRequired, - markerSize: PropTypes.number.isRequired, - onMarkerClick: PropTypes.func, - - axisPosition: PropTypes.oneOf(['before', 'after']).isRequired, - - theme: core.themePropType.isRequired, - - overrides: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - reverse: PropTypes.bool, - rangeColors: PropTypes.any, - rangeBorderWidth: PropTypes.number, - rangeBorderColor: PropTypes.any, - measureColors: PropTypes.any, - measureBorderWidth: PropTypes.number, - measureBorderColor: PropTypes.any, - axis: PropTypes.shape({ - position: PropTypes.oneOf(['before', 'after']), - min: PropTypes.number, - max: PropTypes.number - }) - })).isRequired - }; - - var BulletPropTypes = _extends({}, commonPropTypes); - - var commonDefaultProps = { - layout: EnhancedBulletItem.defaultProps.layout, - reverse: EnhancedBulletItem.defaultProps.reverse, - spacing: 30, - titlePosition: EnhancedBulletItem.defaultProps.titlePosition, - titleAlign: EnhancedBulletItem.defaultProps.titleAlign, - titleOffsetX: EnhancedBulletItem.defaultProps.titleOffsetX, - titleOffsetY: EnhancedBulletItem.defaultProps.titleOffsetY, - titleRotation: EnhancedBulletItem.defaultProps.titleRotation, - rangeBorderWidth: 0, - rangeBorderColor: 'inherit', - measureSize: 0.4, - measureBorderWidth: 0, - measureBorderColor: 'inherit', - markerSize: 0.6, - markerColors: EnhancedBulletItem.defaultProps.markerColors, - axisPosition: EnhancedBulletItem.defaultProps.axisPosition, - rangeColors: EnhancedBulletItem.defaultProps.rangeColors, - measureColors: EnhancedBulletItem.defaultProps.measureColors, - isInteractive: true, - onClick: core.noop, - overrides: [] - }; - - var BulletDefaultProps = _extends({}, commonDefaultProps); - - var props = /*#__PURE__*/Object.freeze({ - BulletPropTypes: BulletPropTypes, - BulletDefaultProps: BulletDefaultProps - }); - - var commonEnhancers = [core.withDimensions(), core.withTheme()]; - - var enhance = (function (Component) { - var implDefaultProps = props[Component.displayName + 'DefaultProps']; - - switch (Component.displayName) { - case 'Bullet': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [core.withMotion(), pure]))(Component); - } - - return Component; - }); - - var Bullet = function (_Component) { - inherits(Bullet, _Component); - - function Bullet() { - classCallCheck(this, Bullet); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - Bullet.prototype.render = function render() { - var _props = this.props, - data = _props.data, - layout = _props.layout, - spacing = _props.spacing, - measureSize = _props.measureSize, - markerSize = _props.markerSize, - reverse = _props.reverse, - axisPosition = _props.axisPosition, - margin = _props.margin, - width = _props.width, - height = _props.height, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - titlePosition = _props.titlePosition, - titleAlign = _props.titleAlign, - titleOffsetX = _props.titleOffsetX, - titleOffsetY = _props.titleOffsetY, - titleRotation = _props.titleRotation, - rangeComponent = _props.rangeComponent, - rangeColors = _props.rangeColors, - measureComponent = _props.measureComponent, - measureColors = _props.measureColors, - markerComponent = _props.markerComponent, - markerColors = _props.markerColors, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - isInteractive = _props.isInteractive, - onRangeClick = _props.onRangeClick, - onMeasureClick = _props.onMeasureClick, - onMarkerClick = _props.onMarkerClick; - - - var itemHeight = void 0; - if (layout === 'horizontal') { - itemHeight = (height - spacing * (data.length - 1)) / data.length; - } else { - itemHeight = (width - spacing * (data.length - 1)) / data.length; - } - var measureHeight = itemHeight * measureSize; - var markerHeight = itemHeight * markerSize; - - var enhancedData = data.map(function (d) { - var all = [].concat(d.ranges, d.measures, d.markers); - - var max = Math.max.apply(Math, all); - - var scale = d3Scale.scaleLinear().domain([0, max]); - - if (layout === 'horizontal') { - scale.range(reverse === true ? [width, 0] : [0, width]); - } else { - scale.range(reverse === true ? [0, height] : [height, 0]); - } - - return _extends({}, d, { - scale: scale - }); - }); - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - theme: theme - }, - enhancedData.map(function (d, i) { - return React__default.createElement(EnhancedBulletItem, _extends({ - key: d.id - }, d, { - layout: layout, - reverse: reverse, - x: layout === 'vertical' ? itemHeight * i + spacing * i : 0, - y: layout === 'horizontal' ? itemHeight * i + spacing * i : 0, - width: width, - height: itemHeight, - titlePosition: titlePosition, - titleAlign: titleAlign, - titleOffsetX: titleOffsetX, - titleOffsetY: titleOffsetY, - titleRotation: titleRotation, - measureHeight: measureHeight, - markerHeight: markerHeight, - rangeComponent: rangeComponent, - rangeColors: rangeColors, - measureComponent: measureComponent, - measureColors: measureColors, - markerComponent: markerComponent, - markerColors: markerColors, - theme: theme, - axisPosition: axisPosition - }, motionProps, { - showTooltip: showTooltip, - hideTooltip: hideTooltip, - onRangeClick: onRangeClick, - onMeasureClick: onMeasureClick, - onMarkerClick: onMarkerClick - })); - }) - ); - } - ); - }; - - return Bullet; - }(React.Component); - - Bullet.propTypes = BulletPropTypes; - Bullet.displayName = 'Bullet'; - - var Bullet$1 = setDisplayName(Bullet.displayName)(enhance(Bullet)); - - var ResponsiveBullet = function ResponsiveBullet(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(Bullet$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Bullet = Bullet$1; - exports.BulletItem = EnhancedBulletItem; - exports.ResponsiveBullet = ResponsiveBullet; - exports.BulletPropTypes = BulletPropTypes; - exports.BulletDefaultProps = BulletDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/calendar/umd/nivo-calendar.js b/packages/calendar/umd/nivo-calendar.js deleted file mode 100644 index 029c91327..000000000 --- a/packages/calendar/umd/nivo-calendar.js +++ /dev/null @@ -1,684 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/memoize'), require('lodash/isDate'), require('lodash/range'), require('lodash/max'), require('lodash/assign'), require('d3-time-format'), require('d3-time'), require('prop-types'), require('@nivo/core'), require('@nivo/legends'), require('react'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('recompose/defaultProps'), require('lodash/minBy'), require('lodash/maxBy'), require('d3-scale'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'lodash/memoize', 'lodash/isDate', 'lodash/range', 'lodash/max', 'lodash/assign', 'd3-time-format', 'd3-time', 'prop-types', '@nivo/core', '@nivo/legends', 'react', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'recompose/defaultProps', 'lodash/minBy', 'lodash/maxBy', 'd3-scale', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global['lodash/memoize'],global['lodash/isDate'],global['lodash/range'],global['lodash/max'],global['lodash/assign'],global.d3,global.d3,global.PropTypes,global.nivo,global.nivo,global.React,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.RecomposeDefaultProps,global['lodash/minBy'],global['lodash/maxBy'],global.d3,global.RecomposeSetDisplayName)); -}(this, (function (exports,memoize,isDate,range,max,assign,d3TimeFormat,d3Time,PropTypes,core,legends,React,compose,withPropsOnChange,pure,defaultProps,minBy,maxBy,d3Scale,setDisplayName) { 'use strict'; - - memoize = memoize && memoize.hasOwnProperty('default') ? memoize['default'] : memoize; - isDate = isDate && isDate.hasOwnProperty('default') ? isDate['default'] : isDate; - range = range && range.hasOwnProperty('default') ? range['default'] : range; - max = max && max.hasOwnProperty('default') ? max['default'] : max; - assign = assign && assign.hasOwnProperty('default') ? assign['default'] : assign; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - React = React && React.hasOwnProperty('default') ? React['default'] : React; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - minBy = minBy && minBy.hasOwnProperty('default') ? minBy['default'] : minBy; - maxBy = maxBy && maxBy.hasOwnProperty('default') ? maxBy['default'] : maxBy; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var DIRECTION_HORIZONTAL = 'horizontal'; - var DIRECTION_VERTICAL = 'vertical'; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - /** - * Compute day cell size according to current context. - * - * @param {number} width - * @param {number} height - * @param {number} direction - * @param {array} yearRange - * @param {number} yearSpacing - * @param {number} daySpacing - * @param {number} maxWeeks - * @returns {number} - */ - var computeCellSize = function computeCellSize(_ref) { - var width = _ref.width, - height = _ref.height, - direction = _ref.direction, - yearRange = _ref.yearRange, - yearSpacing = _ref.yearSpacing, - daySpacing = _ref.daySpacing, - maxWeeks = _ref.maxWeeks; - - var hCellSize = void 0; - var vCellSize = void 0; - - if (direction === DIRECTION_HORIZONTAL) { - hCellSize = (width - daySpacing * maxWeeks) / maxWeeks; - vCellSize = (height - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) / (yearRange.length * 7); - } else { - hCellSize = (width - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) / (yearRange.length * 7); - vCellSize = (height - daySpacing * maxWeeks) / maxWeeks; - } - - return Math.min(hCellSize, vCellSize); - }; - - /** - * Computes month path and bounding box. - * - * @param {Date} date - * @param {number} cellSize - * @param {number} yearIndex - * @param {number} yearSpacing - * @param {number} daySpacing - * @param {string} direction - * @returns { { path: string, bbox: { x: number, y: number, width: number, height: number } } } - */ - var monthPathAndBBox = function monthPathAndBBox(_ref2) { - var date = _ref2.date, - cellSize = _ref2.cellSize, - yearIndex = _ref2.yearIndex, - yearSpacing = _ref2.yearSpacing, - daySpacing = _ref2.daySpacing, - direction = _ref2.direction; - - var t1 = new Date(date.getFullYear(), date.getMonth() + 1, 0); // first day of next month - var d0 = date.getDay(); // first day of month - var w0 = d3Time.timeWeek.count(d3Time.timeYear(date), date); // first week of month - var d1 = t1.getDay(); // last day of month - var w1 = d3Time.timeWeek.count(d3Time.timeYear(t1), t1); // last week of month - - // offset according to year index - var xO = 0; - var yO = 0; - var yearOffset = yearIndex * (7 * (cellSize + daySpacing) + yearSpacing); - if (direction === DIRECTION_HORIZONTAL) { - yO = yearOffset; - } else { - xO = yearOffset; - } - - var path = void 0; - var bbox = { x: xO, y: yO, width: 0, height: 0 }; - if (direction === DIRECTION_HORIZONTAL) { - path = ['M' + (xO + (w0 + 1) * (cellSize + daySpacing)) + ',' + (yO + d0 * (cellSize + daySpacing)), 'H' + (xO + w0 * (cellSize + daySpacing)) + 'V' + (yO + 7 * (cellSize + daySpacing)), 'H' + (xO + w1 * (cellSize + daySpacing)) + 'V' + (yO + (d1 + 1) * (cellSize + daySpacing)), 'H' + (xO + (w1 + 1) * (cellSize + daySpacing)) + 'V' + yO, 'H' + (xO + (w0 + 1) * (cellSize + daySpacing)) + 'Z'].join(''); - - bbox.x = xO + w0 * (cellSize + daySpacing); - bbox.width = (w1 + 1) * (cellSize + daySpacing) - bbox.x; - bbox.height = 7 * (cellSize + daySpacing); - } else { - path = ['M' + (xO + d0 * (cellSize + daySpacing)) + ',' + (yO + (w0 + 1) * (cellSize + daySpacing)), 'H' + xO + 'V' + (yO + (w1 + 1) * (cellSize + daySpacing)), 'H' + (xO + (d1 + 1) * (cellSize + daySpacing)) + 'V' + (yO + w1 * (cellSize + daySpacing)), 'H' + (xO + 7 * (cellSize + daySpacing)) + 'V' + (yO + w0 * (cellSize + daySpacing)), 'H' + (xO + d0 * (cellSize + daySpacing)) + 'Z'].join(''); - - bbox.y = yO + w0 * (cellSize + daySpacing); - bbox.width = 7 * (cellSize + daySpacing); - bbox.height = (w1 + 1) * (cellSize + daySpacing) - bbox.y; - } - - return { path: path, bbox: bbox }; - }; - - /** - * Creates a memoized version of monthPathAndBBox function. - */ - var memoMonthPathAndBBox = memoize(monthPathAndBBox, function (_ref3) { - var date = _ref3.date, - cellSize = _ref3.cellSize, - yearIndex = _ref3.yearIndex, - yearSpacing = _ref3.yearSpacing, - daySpacing = _ref3.daySpacing, - direction = _ref3.direction; - - return date.toString() + '.' + cellSize + '.' + yearIndex + '.' + yearSpacing + '.' + daySpacing + '.' + direction; - }); - - /** - * Returns a function to Compute day cell position for horizontal layout. - * - * @param {number} cellSize - * @param {number} yearSpacing - * @param {number} daySpacing - * @returns { function(): { x: number, y: number } } - */ - var cellPositionHorizontal = function cellPositionHorizontal(cellSize, yearSpacing, daySpacing) { - return function (d, yearIndex) { - var weekOfYear = d3Time.timeWeek.count(d3Time.timeYear(d), d); - - return { - x: weekOfYear * (cellSize + daySpacing) + daySpacing / 2, - y: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)) - }; - }; - }; - - /** - * Returns a function to Compute day cell position for vertical layout. - * - * @param {number} cellSize - * @param {number} yearSpacing - * @param {number} daySpacing - * @returns { function(): { x: number, y: number } } - */ - var cellPositionVertical = function cellPositionVertical(cellSize, yearSpacing, daySpacing) { - return function (d, yearIndex) { - var weekOfYear = d3Time.timeWeek.count(d3Time.timeYear(d), d); - - return { - x: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)), - y: weekOfYear * (cellSize + daySpacing) + daySpacing / 2 - }; - }; - }; - - // used for days range and data matching - var dayFormat = d3TimeFormat.timeFormat('%Y-%m-%d'); - - /** - * This layout is responsible for computing Calendar chart data/positions…. - * It's used for all Calendar related chart components. - * - * @param {number} width - * @param {number} height - * @param {string|Date} from - * @param {string|Date} to - * @param {array} data - * @param {string} direction - * @param {object} colorScale - * @param {string} emptyColor - * @param {number} yearSpacing - * @param {number} daySpacing - * @returns {object} - */ - var CalendarLayout = function CalendarLayout(_ref4) { - var width = _ref4.width, - height = _ref4.height, - from = _ref4.from, - to = _ref4.to, - data = _ref4.data, - direction = _ref4.direction, - colorScale = _ref4.colorScale, - emptyColor = _ref4.emptyColor, - yearSpacing = _ref4.yearSpacing, - daySpacing = _ref4.daySpacing; - - // time related data - var fromDate = isDate(from) ? from : new Date(from); - var toDate = isDate(to) ? to : new Date(to); - - var yearRange = range(fromDate.getFullYear(), toDate.getFullYear() + 1); - var maxWeeks = max(yearRange.map(function (year) { - return d3Time.timeWeeks(new Date(year, 0, 1), new Date(year + 1, 0, 1)).length; - })) + 1; - - // —————————————————————————————————————————————————————————————————————————————————————————————————————— - // Computes years/months/days - // —————————————————————————————————————————————————————————————————————————————————————————————————————— - // compute cellSize - var cellSize = computeCellSize({ - width: width, - height: height, - direction: direction, - yearRange: yearRange, - yearSpacing: yearSpacing, - daySpacing: daySpacing, - maxWeeks: maxWeeks - }); - - // determine day cells positioning function according to layout direction - var cellPosition = void 0; - if (direction === DIRECTION_HORIZONTAL) { - cellPosition = cellPositionHorizontal(cellSize, yearSpacing, daySpacing); - } else { - cellPosition = cellPositionVertical(cellSize, yearSpacing, daySpacing); - } - - var years = []; - var months = []; - var days = []; - - yearRange.forEach(function (year, i) { - var yearStart = new Date(year, 0, 1); - var yearEnd = new Date(year + 1, 0, 1); - - days = days.concat(d3Time.timeDays(yearStart, yearEnd).map(function (dayDate) { - return assign({ - date: dayDate, - day: dayFormat(dayDate), - size: cellSize - }, cellPosition(dayDate, i)); - })); - - var yearMonths = d3Time.timeMonths(yearStart, yearEnd).map(function (monthDate) { - return _extends({ - date: monthDate, - year: monthDate.getFullYear(), - month: monthDate.getMonth() - }, memoMonthPathAndBBox({ - date: monthDate, - direction: direction, - yearIndex: i, - yearSpacing: yearSpacing, - daySpacing: daySpacing, - cellSize: cellSize - })); - }); - - months = months.concat(yearMonths); - - years.push({ - year: year, - bbox: { - x: yearMonths[0].bbox.x, - y: yearMonths[0].bbox.y, - width: yearMonths[11].bbox.x - yearMonths[0].bbox.x + yearMonths[11].bbox.width, - height: yearMonths[11].bbox.y - yearMonths[0].bbox.y + yearMonths[11].bbox.height - } - }); - }); - - // —————————————————————————————————————————————————————————————————————————————————————————————————————— - // Computes days/data intersection - // —————————————————————————————————————————————————————————————————————————————————————————————————————— - //const color = scalePropToD3Scale(colorScale) - - days.forEach(function (day) { - day.color = emptyColor; - data.forEach(function (dataDay) { - if (dataDay.day === day.day) { - day.value = dataDay.value; - day.color = colorScale(dataDay.value); - } - }); - }); - - return { years: years, months: months, days: days, cellSize: cellSize }; - }; - - var monthLabelFormat = d3TimeFormat.timeFormat('%b'); - - /** - * Calendar components propTypes. - * - * @type {object} - */ - var CalendarPropTypes = { - from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - day: PropTypes.string.isRequired, - value: PropTypes.number.isRequired - })).isRequired, - - domain: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.arrayOf(PropTypes.number)]).isRequired, - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - colorScale: PropTypes.func.isRequired, - - direction: PropTypes.oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]), - emptyColor: PropTypes.string.isRequired, - - // years - yearLegend: PropTypes.func.isRequired, - yearSpacing: PropTypes.number.isRequired, - yearLegendOffset: PropTypes.number.isRequired, - - // months - monthLegend: PropTypes.func.isRequired, - monthBorderWidth: PropTypes.number.isRequired, - monthBorderColor: PropTypes.string.isRequired, - monthLegendOffset: PropTypes.number.isRequired, - - // days - daySpacing: PropTypes.number.isRequired, - dayBorderWidth: PropTypes.number.isRequired, - dayBorderColor: PropTypes.string.isRequired, - - // interactivity - isInteractive: PropTypes.bool, - onClick: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - - legends: PropTypes.arrayOf(PropTypes.shape(_extends({}, legends.LegendPropShape, { - itemCount: PropTypes.number.isRequired - }))).isRequired - - /** - * Calendar components defaultProps. - * - * @type {object} - */ - };var CalendarDefaultProps = { - domain: 'auto', - colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'], - - direction: DIRECTION_HORIZONTAL, - emptyColor: '#fff', - - // years - yearLegend: function yearLegend(year) { - return year; - }, - yearSpacing: 30, - yearLegendOffset: 10, - - // months - monthLegend: function monthLegend(year, month, date) { - return monthLabelFormat(date); - }, - monthBorderWidth: 2, - monthBorderColor: '#000', - monthLegendOffset: 6, - - // days - daySpacing: 0, - dayBorderWidth: 1, - dayBorderColor: '#000', - - // interactivity - isInteractive: true, - onClick: core.noop, - - legends: [] - }; - - var CalendarDay = function CalendarDay(_ref) { - var x = _ref.x, - y = _ref.y, - size = _ref.size, - color = _ref.color, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - onClick = _ref.onClick, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React.createElement('rect', { - x: x, - y: y, - width: size, - height: size, - style: { - fill: color, - strokeWidth: borderWidth, - stroke: borderColor - }, - onClick: onClick, - onMouseEnter: showTooltip, - onMouseMove: showTooltip, - onMouseLeave: hideTooltip - }); - }; - - CalendarDay.propTypes = { - onClick: PropTypes.func.isRequired, - data: PropTypes.object.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - - theme: PropTypes.shape({ - tooltip: PropTypes.shape({}).isRequired - }).isRequired - }; - - var enhance = compose(withPropsOnChange(['data', 'onClick'], function (_ref2) { - var data = _ref2.data, - _onClick = _ref2.onClick; - return { - onClick: function onClick(event) { - return _onClick(data, event); - } - }; - }), withPropsOnChange(['data', 'color', 'showTooltip', 'tooltipFormat', 'tooltip', 'theme'], function (_ref3) { - var data = _ref3.data, - color = _ref3.color, - _showTooltip = _ref3.showTooltip, - tooltipFormat = _ref3.tooltipFormat, - tooltip = _ref3.tooltip, - theme = _ref3.theme; - - if (data.value === undefined) return { showTooltip: core.noop }; - - return { - showTooltip: function showTooltip(event) { - return _showTooltip(React.createElement(core.BasicTooltip, { - id: '' + data.day, - value: data.value, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null - }), event); - } - }; - }), pure); - - var CalendarDay$1 = enhance(CalendarDay); - - var CalendarMonthPath = function CalendarMonthPath(_ref) { - var path = _ref.path, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor; - return React.createElement('path', { - d: path, - style: { - fill: 'none', - strokeWidth: borderWidth, - stroke: borderColor - } - }); - }; - - CalendarMonthPath.propTypes = { - path: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired - }; - - var CalendarMonthPath$1 = pure(CalendarMonthPath); - - var enhance$1 = (function (Component) { - return compose(defaultProps(CalendarDefaultProps), core.withTheme(), core.withDimensions(), withPropsOnChange(['data', 'domain', 'colors'], function (_ref) { - var data = _ref.data, - domain = _ref.domain, - colors = _ref.colors; - - var colorDomain = void 0; - if (domain === 'auto') { - if (data.length === 0) { - colorDomain = [0, 0]; - } else { - colorDomain = [minBy(data, 'value').value, maxBy(data, 'value').value]; - } - } else { - colorDomain = [].concat(domain); - } - - var colorScale = d3Scale.scaleQuantize().domain(colorDomain).range(colors); - - return { colorScale: colorScale }; - }), pure)(Component); - }); - - var Calendar = function Calendar(_ref) { - var data = _ref.data, - from = _ref.from, - to = _ref.to, - colorScale = _ref.colorScale, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - direction = _ref.direction, - yearLegend = _ref.yearLegend, - yearSpacing = _ref.yearSpacing, - yearLegendOffset = _ref.yearLegendOffset, - monthLegend = _ref.monthLegend, - monthBorderWidth = _ref.monthBorderWidth, - monthBorderColor = _ref.monthBorderColor, - monthLegendOffset = _ref.monthLegendOffset, - daySpacing = _ref.daySpacing, - dayBorderWidth = _ref.dayBorderWidth, - dayBorderColor = _ref.dayBorderColor, - emptyColor = _ref.emptyColor, - theme = _ref.theme, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - onClick = _ref.onClick, - legends$$1 = _ref.legends; - - var _computeCalendar = CalendarLayout({ - width: width, - height: height, - from: from, - to: to, - data: data, - direction: direction, - colorScale: colorScale, - emptyColor: emptyColor, - yearSpacing: yearSpacing, - daySpacing: daySpacing - }), - years = _computeCalendar.years, - months = _computeCalendar.months, - days = _computeCalendar.days; - - return React.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - days.map(function (d) { - return React.createElement(CalendarDay$1, { - key: d.date.toString(), - data: d, - x: d.x, - y: d.y, - size: d.size, - color: d.color, - borderWidth: dayBorderWidth, - borderColor: dayBorderColor, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - tooltipFormat: tooltipFormat, - tooltip: tooltip, - theme: theme, - onClick: onClick - }); - }), - months.map(function (m) { - return React.createElement(CalendarMonthPath$1, { - key: m.date.toString(), - path: m.path, - borderWidth: monthBorderWidth, - borderColor: monthBorderColor - }); - }), - months.map(function (month) { - var transform = void 0; - if (direction === DIRECTION_HORIZONTAL) { - transform = 'translate(' + (month.bbox.x + month.bbox.width / 2) + ',' + (month.bbox.y - monthLegendOffset) + ')'; - } else { - transform = 'translate(' + (month.bbox.x - monthLegendOffset) + ',' + (month.bbox.y + month.bbox.height / 2) + ') rotate(-90)'; - } - - return React.createElement( - 'text', - { - key: month.date.toString() + '.legend', - className: 'nivo_calendar_month_legend', - transform: transform, - textAnchor: 'middle', - style: theme.labels.text - }, - monthLegend(month.year, month.month, month.date) - ); - }), - years.map(function (year) { - var transform = void 0; - if (direction === DIRECTION_HORIZONTAL) { - transform = 'translate(' + (year.bbox.x - yearLegendOffset) + ',' + (year.bbox.y + year.bbox.height / 2) + ') rotate(-90)'; - } else { - transform = 'translate(' + (year.bbox.x + year.bbox.width / 2) + ',' + (year.bbox.y - yearLegendOffset) + ')'; - } - - return React.createElement( - 'text', - { - key: year.year, - className: 'nivo_calendar_year_legend', - transform: transform, - textAnchor: 'middle', - style: theme.labels.text - }, - yearLegend(year.year) - ); - }), - legends$$1.map(function (legend, i) { - var legendData = colorScale.ticks(legend.itemCount).map(function (value) { - return { - id: value, - label: value, - color: colorScale(value) - }; - }); - - return React.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Calendar.propTypes = CalendarPropTypes; - - var Calendar$1 = setDisplayName('Calendar')(enhance$1(Calendar)); - - var ResponsiveCalendar = function ResponsiveCalendar(props) { - return React.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React.createElement(Calendar$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Calendar = Calendar$1; - exports.ResponsiveCalendar = ResponsiveCalendar; - exports.CalendarPropTypes = CalendarPropTypes; - exports.CalendarDefaultProps = CalendarDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/chord/umd/nivo-chord.js b/packages/chord/umd/nivo-chord.js deleted file mode 100644 index 9ffe5ee46..000000000 --- a/packages/chord/umd/nivo-chord.js +++ /dev/null @@ -1,1065 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/legends'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withState'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('d3-shape'), require('d3-chord'), require('@nivo/core'), require('react'), require('lodash/isFunction'), require('lodash/mapValues'), require('react-motion'), require('d3-format'), require('recompose/setDisplayName'), require('lodash/partial')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/legends', 'recompose/compose', 'recompose/defaultProps', 'recompose/withState', 'recompose/withPropsOnChange', 'recompose/pure', 'd3-shape', 'd3-chord', '@nivo/core', 'react', 'lodash/isFunction', 'lodash/mapValues', 'react-motion', 'd3-format', 'recompose/setDisplayName', 'lodash/partial'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithState,global.RecomposeWithPropsOnChange,global.RecomposePure,global.d3,global.d3,global.nivo,global.React,global['lodash/isFunction'],global['lodash/mapValues'],global.ReactMotion,global.d3,global.RecomposeSetDisplayName,global['lodash/partial'])); -}(this, (function (exports,PropTypes,legends,compose,defaultProps,withState,withPropsOnChange,pure,d3Shape,d3Chord,core,React,isFunction,mapValues,reactMotion,d3Format,setDisplayName,partial) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - var React__default = 'default' in React ? React['default'] : React; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - mapValues = mapValues && mapValues.hasOwnProperty('default') ? mapValues['default'] : mapValues; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - partial = partial && partial.hasOwnProperty('default') ? partial['default'] : partial; - - var ChordPropTypes = { - matrix: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, - keys: PropTypes.arrayOf(PropTypes.string).isRequired, - - padAngle: PropTypes.number.isRequired, - innerRadiusRatio: PropTypes.number.isRequired, - innerRadiusOffset: PropTypes.number.isRequired, - - // arcs - arcOpacity: PropTypes.number.isRequired, - arcBorderWidth: PropTypes.number.isRequired, - arcBorderColor: PropTypes.any.isRequired, - getArcBorderColor: PropTypes.func.isRequired, - - // ribbons - ribbonOpacity: PropTypes.number.isRequired, - ribbonBorderWidth: PropTypes.number.isRequired, - ribbonBorderColor: PropTypes.any.isRequired, - getRibbonBorderColor: PropTypes.func.isRequired, - - // labels - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getLabel: PropTypes.func.isRequired, // computed - labelOffset: PropTypes.number.isRequired, - labelRotation: PropTypes.number.isRequired, - labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getLabelTextColor: PropTypes.func.isRequired, // computed - - // colors - colors: PropTypes.any.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - arcHoverOpacity: PropTypes.number.isRequired, - arcHoverOthersOpacity: PropTypes.number.isRequired, - ribbonHoverOpacity: PropTypes.number.isRequired, - ribbonHoverOthersOpacity: PropTypes.number.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - // canvas specific - pixelRatio: PropTypes.number.isRequired, - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }; - - var ChordDefaultProps = { - padAngle: 0, - innerRadiusRatio: 0.9, - innerRadiusOffset: 0, - - // arcs - arcOpacity: 1, - arcBorderWidth: 1, - arcBorderColor: 'inherit:darker(0.4)', - - // ribbons - ribbonOpacity: 0.5, - ribbonBorderWidth: 1, - ribbonBorderColor: 'inherit:darker(0.4)', - - // labels - enableLabel: true, - label: 'id', - labelOffset: 12, - labelRotation: 0, - labelTextColor: 'inherit:darker(1)', - - // colors - colors: 'nivo', - - // interactivity - isInteractive: true, - arcHoverOpacity: 1, - arcHoverOthersOpacity: 0.15, - ribbonHoverOpacity: 0.85, - ribbonHoverOthersOpacity: 0.15, - - // canvas specific - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1, - - legends: [] - }; - - var enhance = (function (Component) { - return compose(defaultProps(ChordDefaultProps), withState('currentArc', 'setCurrentArc', null), withState('currentRibbon', 'setCurrentRibbon', null), core.withMotion(), core.withTheme(), core.withDimensions(), withPropsOnChange(['label'], function (_ref) { - var label = _ref.label; - return { - getLabel: core.getLabelGenerator(label) - }; - }), withPropsOnChange(['padAngle'], function (_ref2) { - var padAngle = _ref2.padAngle; - return { - chord: d3Chord.chord().padAngle(padAngle) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref3) { - var labelTextColor = _ref3.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor, 'labels.textColor') - }; - }), withPropsOnChange(['colors', 'keys'], function (_ref4) { - var colors = _ref4.colors, - keys = _ref4.keys; - - var color = core.getColorRange(colors); - - return { - colorById: keys.reduce(function (acc, key) { - acc[key] = color(key); - return acc; - }, {}) - }; - }), withPropsOnChange(['width', 'height', 'innerRadiusRatio', 'innerRadiusOffset'], function (_ref5) { - var width = _ref5.width, - height = _ref5.height, - innerRadiusRatio = _ref5.innerRadiusRatio, - innerRadiusOffset = _ref5.innerRadiusOffset; - - var radius = Math.min(width, height) / 2; - var innerRadius = radius * innerRadiusRatio; - var ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset); - - var arcGenerator = d3Shape.arc().outerRadius(radius).innerRadius(innerRadius); - var ribbonGenerator = d3Chord.ribbon().radius(ribbonRadius); - - return { radius: radius, innerRadius: innerRadius, arcGenerator: arcGenerator, ribbonGenerator: ribbonGenerator }; - }), withPropsOnChange(['arcOpacity', 'ribbonOpacity'], function (_ref6) { - var arcOpacity = _ref6.arcOpacity, - ribbonOpacity = _ref6.ribbonOpacity; - return { - getArcOpacity: function getArcOpacity() { - return arcOpacity; - }, - getRibbonOpacity: function getRibbonOpacity() { - return ribbonOpacity; - } - }; - }), withPropsOnChange(['isInteractive', 'currentArc', 'arcHoverOpacity', 'arcHoverOthersOpacity', 'currentRibbon', 'ribbonHoverOpacity', 'ribbonHoverOthersOpacity'], function (_ref7) { - var isInteractive = _ref7.isInteractive, - currentArc = _ref7.currentArc, - arcHoverOpacity = _ref7.arcHoverOpacity, - arcHoverOthersOpacity = _ref7.arcHoverOthersOpacity, - currentRibbon = _ref7.currentRibbon, - ribbonHoverOpacity = _ref7.ribbonHoverOpacity, - ribbonHoverOthersOpacity = _ref7.ribbonHoverOthersOpacity; - - if (!isInteractive || !currentArc && !currentRibbon) return null; - - var getArcOpacity = void 0; - var getRibbonOpacity = void 0; - if (isInteractive) { - if (currentArc) { - getArcOpacity = function getArcOpacity(arc) { - if (arc.id === currentArc.id) return arcHoverOpacity; - return arcHoverOthersOpacity; - }; - getRibbonOpacity = function getRibbonOpacity(ribbon) { - if (ribbon.source.id === currentArc.id || ribbon.target.id === currentArc.id) return ribbonHoverOpacity; - return ribbonHoverOthersOpacity; - }; - } else if (currentRibbon) { - getArcOpacity = function getArcOpacity(arc) { - if (arc.id === currentRibbon.source.id || arc.id === currentRibbon.target.id) return arcHoverOpacity; - return arcHoverOthersOpacity; - }; - getRibbonOpacity = function getRibbonOpacity(ribbon) { - if (ribbon.source.id === currentRibbon.source.id && ribbon.target.id === currentRibbon.target.id) return ribbonHoverOpacity; - return ribbonHoverOthersOpacity; - }; - } - } - - return { getArcOpacity: getArcOpacity, getRibbonOpacity: getRibbonOpacity }; - }), withPropsOnChange(['chord', 'colorById', 'matrix', 'keys'], function (_ref8) { - var chord = _ref8.chord, - colorById = _ref8.colorById, - matrix = _ref8.matrix, - keys = _ref8.keys; - - var ribbons = chord(matrix); - ribbons.forEach(function (ribbon) { - ribbon.source.id = keys[ribbon.source.index]; - ribbon.source.color = colorById[ribbon.source.id]; - ribbon.target.id = keys[ribbon.target.index]; - ribbon.target.color = colorById[ribbon.target.id]; - var ribbonKeys = [ribbon.source.id, ribbon.target.id]; - ribbonKeys.sort(); - ribbon.key = ribbonKeys.sort().join('.'); - }); - - var arcs = ribbons.groups.map(function (arc) { - arc.key = arc.id = keys[arc.index]; - arc.color = colorById[arc.id]; - return arc; - }); - - return { ribbons: ribbons, arcs: arcs }; - }), withPropsOnChange(['arcBorderColor'], function (_ref9) { - var arcBorderColor = _ref9.arcBorderColor; - return { - getArcBorderColor: core.getInheritedColorGenerator(arcBorderColor) - }; - }), withPropsOnChange(['ribbonBorderColor'], function (_ref10) { - var ribbonBorderColor = _ref10.ribbonBorderColor; - return { - getRibbonBorderColor: core.getInheritedColorGenerator(ribbonBorderColor) - }; - }), pure)(Component); - }); - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - /** - * Used to get ribbon angles, instead of using source and target arcs, - * we sort arcs by value to have smooth transitions, otherwise, - * if source|target arc value becomes greater than the other, - * the ribbon will be reversed. - * - * @param {Object} source - * @param {Object} target - * @param {boolean} useMiddleAngle - * @param {Object} [springConfig] - * @return {Object} - */ - var getRibbonAngles = function getRibbonAngles(_ref, useMiddleAngle, springConfig) { - var source = _ref.source, - target = _ref.target; - - var firstArc = void 0; - var secondArc = void 0; - if (source.startAngle < target.startAngle) { - firstArc = source; - secondArc = target; - } else { - firstArc = target; - secondArc = source; - } - - var angles = void 0; - if (useMiddleAngle === true) { - var firstMiddleAngle = core.midAngle(firstArc); - var secondMiddleAngle = core.midAngle(secondArc); - - angles = { - sourceStartAngle: firstMiddleAngle, - sourceEndAngle: firstMiddleAngle, - targetStartAngle: secondMiddleAngle, - targetEndAngle: secondMiddleAngle - }; - } else { - angles = { - sourceStartAngle: firstArc.startAngle, - sourceEndAngle: firstArc.endAngle, - targetStartAngle: secondArc.startAngle, - targetEndAngle: secondArc.endAngle - }; - } - - if (!springConfig) return angles; - - return mapValues(angles, function (angle) { - return reactMotion.spring(angle, springConfig); - }); - }; - - var ribbonWillEnter = function ribbonWillEnter(_ref2) { - var ribbon = _ref2.data; - return _extends({}, getRibbonAngles(ribbon, true), { - opacity: 0 - }, core.colorMotionSpring(ribbon.source.color)); - }; - - var ribbonWillLeave = function ribbonWillLeave(springConfig) { - return function (_ref3) { - var ribbon = _ref3.data; - return _extends({}, getRibbonAngles(ribbon, true, springConfig), { - opacity: 0 - }, core.colorMotionSpring(ribbon.source.color, springConfig)); - }; - }; - - var ChordRibbons = function ChordRibbons(_ref4) { - var ribbons = _ref4.ribbons, - shapeGenerator = _ref4.shapeGenerator, - borderWidth = _ref4.borderWidth, - getBorderColor = _ref4.getBorderColor, - getOpacity = _ref4.getOpacity, - theme = _ref4.theme, - tooltipFormat = _ref4.tooltipFormat, - setCurrent = _ref4.setCurrent, - showTooltip = _ref4.showTooltip, - hideTooltip = _ref4.hideTooltip, - animate = _ref4.animate, - motionDamping = _ref4.motionDamping, - motionStiffness = _ref4.motionStiffness; - - var commonProps = function commonProps(ribbon) { - var ribbonTooltip = React__default.createElement(core.TableTooltip, { - theme: theme, - rows: [[React__default.createElement(core.Chip, { key: 'chip', color: ribbon.source.color }), React__default.createElement( - 'strong', - { key: 'id' }, - ribbon.source.id - ), tooltipFormat ? tooltipFormat(ribbon.source.value) : ribbon.source.value], [React__default.createElement(core.Chip, { key: 'chip', color: ribbon.target.color }), React__default.createElement( - 'strong', - { key: 'id' }, - ribbon.target.id - ), tooltipFormat ? tooltipFormat(ribbon.target.value) : ribbon.target.value]] - }); - - return { - strokeWidth: borderWidth, - onMouseEnter: function onMouseEnter(e) { - setCurrent(ribbon); - showTooltip(ribbonTooltip, e); - }, - onMouseMove: function onMouseMove(e) { - showTooltip(ribbonTooltip, e); - }, - onMouseLeave: function onMouseLeave() { - setCurrent(null); - hideTooltip(); - } - }; - }; - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - ribbons.map(function (ribbon) { - var opacity = getOpacity(ribbon); - - return React__default.createElement('path', _extends({ - key: ribbon.key, - d: shapeGenerator(ribbon), - fill: ribbon.source.color, - fillOpacity: opacity, - stroke: getBorderColor(_extends({}, ribbon, { color: ribbon.source.color })), - strokeOpacity: opacity - }, commonProps(ribbon))); - }) - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness, - precision: 0.001 - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: ribbonWillEnter, - willLeave: ribbonWillLeave(springConfig), - styles: ribbons.map(function (ribbon) { - return { - key: ribbon.key, - data: ribbon, - style: _extends({}, getRibbonAngles(ribbon, false, springConfig), { - opacity: reactMotion.spring(getOpacity(ribbon), springConfig) - }, core.colorMotionSpring(ribbon.source.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref5) { - var key = _ref5.key, - style = _ref5.style, - ribbon = _ref5.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement('path', _extends({ - key: key, - d: shapeGenerator({ - source: { - startAngle: style.sourceStartAngle, - endAngle: Math.max(style.sourceEndAngle, style.sourceStartAngle) - }, - target: { - startAngle: style.targetStartAngle, - endAngle: Math.max(style.targetEndAngle, style.targetStartAngle) - } - }), - fill: color, - fillOpacity: style.opacity, - stroke: getBorderColor(_extends({}, ribbon, { color: color })), - strokeOpacity: style.opacity - }, commonProps(ribbon))); - }) - ); - } - ); - }; - - ChordRibbons.propTypes = _extends({ - ribbons: PropTypes.array.isRequired, - shapeGenerator: PropTypes.func.isRequired, - borderWidth: PropTypes.number.isRequired, - getBorderColor: PropTypes.func.isRequired, - getOpacity: PropTypes.func.isRequired, - setCurrent: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - }, core.motionPropTypes); - - var enhance$1 = compose(withPropsOnChange(['tooltipFormat'], function (_ref6) { - var tooltipFormat = _ref6.tooltipFormat; - - if (!tooltipFormat || isFunction(tooltipFormat)) return { tooltipFormat: tooltipFormat }; - return { tooltipFormat: d3Format.format(tooltipFormat) }; - }), pure); - - var ChordRibbons$1 = enhance$1(ChordRibbons); - - var ChordArcTooltip = function ChordArcTooltip(_ref) { - var arc = _ref.arc, - theme = _ref.theme, - format = _ref.format; - return React__default.createElement(core.BasicTooltip, { - id: arc.id, - value: arc.value, - color: arc.color, - enableChip: true, - theme: theme, - format: format - }); - }; - - ChordArcTooltip.propTypes = { - arc: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, - format: PropTypes.func - }; - - var ChordArcTooltip$1 = pure(ChordArcTooltip); - - var ChordArcs = function ChordArcs(_ref) { - var arcs = _ref.arcs, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - getOpacity = _ref.getOpacity, - shapeGenerator = _ref.shapeGenerator, - theme = _ref.theme, - tooltipFormat = _ref.tooltipFormat, - setCurrent = _ref.setCurrent, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness; - - var commonProps = function commonProps(arc) { - var arcTooltip = React__default.createElement(ChordArcTooltip$1, { arc: arc, theme: theme, format: tooltipFormat }); - - return { - strokeWidth: borderWidth, - onMouseEnter: function onMouseEnter(e) { - setCurrent(arc); - showTooltip(arcTooltip, e); - }, - onMouseMove: function onMouseMove(e) { - showTooltip(arcTooltip, e); - }, - onMouseLeave: function onMouseLeave() { - setCurrent(null); - hideTooltip(); - } - }; - }; - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - arcs.map(function (arc) { - var opacity = getOpacity(arc); - - return React__default.createElement('path', _extends({ - key: arc.key, - d: shapeGenerator(arc), - fill: arc.color, - fillOpacity: opacity, - stroke: getBorderColor(arc), - strokeOpacity: opacity - }, commonProps(arc))); - }) - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness, - precision: 0.001 - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: arcs.map(function (arc) { - return { - key: arc.key, - data: arc, - style: _extends({ - startAngle: reactMotion.spring(arc.startAngle, springConfig), - endAngle: reactMotion.spring(arc.endAngle, springConfig), - opacity: reactMotion.spring(getOpacity(arc), springConfig) - }, core.colorMotionSpring(arc.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - arc = _ref2.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement('path', _extends({ - key: key, - d: shapeGenerator({ - startAngle: style.startAngle, - endAngle: style.endAngle - }), - fill: color, - fillOpacity: style.opacity, - stroke: getBorderColor(_extends({}, arc, { color: color })), - strokeOpacity: style.opacity - }, commonProps(arc))); - }) - ); - } - ); - }; - - ChordArcs.propTypes = _extends({ - arcs: PropTypes.array.isRequired, - shapeGenerator: PropTypes.func.isRequired, - borderWidth: PropTypes.number.isRequired, - getBorderColor: PropTypes.func.isRequired, - getOpacity: PropTypes.func.isRequired, - setCurrent: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - }, core.motionPropTypes); - - var ChordArcs$1 = pure(ChordArcs); - - var ChordLabels = function ChordLabels(_ref) { - var arcs = _ref.arcs, - radius = _ref.radius, - rotation = _ref.rotation, - getLabel = _ref.getLabel, - getColor = _ref.getColor, - theme = _ref.theme, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness; - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - arcs.map(function (arc) { - var color = getColor(arc, theme); - var angle = core.midAngle(arc); - var textProps = core.getPolarLabelProps(radius, angle, rotation); - - return React__default.createElement( - 'text', - { - key: arc.key, - transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')', - style: _extends({}, theme.labels.text, { - pointerEvents: 'none', - fill: color - }), - textAnchor: textProps.align, - alignmentBaseline: textProps.baseline - }, - getLabel(arc) - ); - }) - ); - } - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: arcs.map(function (arc) { - var angle = core.midAngle(arc); - - return { - key: arc.key, - data: arc, - style: { - angle: reactMotion.spring(angle, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - arc = _ref2.data; - - var color = getColor(arc, theme); - var textProps = core.getPolarLabelProps(radius, style.angle, rotation); - - return React__default.createElement( - 'text', - { - key: key, - transform: 'translate(' + textProps.x + ', ' + textProps.y + ') rotate(' + textProps.rotate + ')', - style: _extends({}, theme.labels.text, { - pointerEvents: 'none', - fill: color - }), - textAnchor: textProps.align, - alignmentBaseline: textProps.baseline - }, - getLabel(arc) - ); - }) - ); - } - ); - }; - - ChordLabels.propTypes = _extends({ - arcs: PropTypes.array.isRequired, - radius: PropTypes.number.isRequired, - rotation: PropTypes.number.isRequired, - getLabel: PropTypes.func.isRequired, - getColor: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired - }, core.motionPropTypes); - - var Chord = function Chord(_ref) { - var margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - arcBorderWidth = _ref.arcBorderWidth, - getArcBorderColor = _ref.getArcBorderColor, - ribbonBorderWidth = _ref.ribbonBorderWidth, - getRibbonBorderColor = _ref.getRibbonBorderColor, - enableLabel = _ref.enableLabel, - getLabel = _ref.getLabel, - labelOffset = _ref.labelOffset, - labelRotation = _ref.labelRotation, - getLabelTextColor = _ref.getLabelTextColor, - arcGenerator = _ref.arcGenerator, - ribbonGenerator = _ref.ribbonGenerator, - theme = _ref.theme, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness, - ribbons = _ref.ribbons, - arcs = _ref.arcs, - radius = _ref.radius, - setCurrentArc = _ref.setCurrentArc, - setCurrentRibbon = _ref.setCurrentRibbon, - getArcOpacity = _ref.getArcOpacity, - getRibbonOpacity = _ref.getRibbonOpacity, - legends$$1 = _ref.legends; - - var centerX = width / 2; - var centerY = height / 2; - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var legendData = arcs.map(function (arc) { - return { - id: arc.id, - label: arc.id, - color: arc.color - }; - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - theme: theme - }, - React__default.createElement( - 'g', - { transform: 'translate(' + centerX + ', ' + centerY + ')' }, - React__default.createElement(ChordRibbons$1, _extends({ - ribbons: ribbons, - shapeGenerator: ribbonGenerator, - borderWidth: ribbonBorderWidth, - getBorderColor: getRibbonBorderColor, - getOpacity: getRibbonOpacity, - setCurrent: setCurrentRibbon, - theme: theme, - tooltipFormat: tooltipFormat, - showTooltip: showTooltip, - hideTooltip: hideTooltip - }, motionProps)), - React__default.createElement(ChordArcs$1, _extends({ - arcs: arcs, - shapeGenerator: arcGenerator, - borderWidth: arcBorderWidth, - getBorderColor: getArcBorderColor, - getOpacity: getArcOpacity, - setCurrent: setCurrentArc, - theme: theme, - tooltipFormat: tooltipFormat, - showTooltip: showTooltip, - hideTooltip: hideTooltip - }, motionProps)), - enableLabel && React__default.createElement(ChordLabels, _extends({ - arcs: arcs, - radius: radius + labelOffset, - rotation: labelRotation, - getLabel: getLabel, - getColor: getLabelTextColor, - theme: theme - }, motionProps)) - ), - legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Chord.propTypes = ChordPropTypes; - - var Chord$1 = setDisplayName('Chord')(enhance(Chord)); - - var ChordCanvas = function (_Component) { - inherits(ChordCanvas, _Component); - - function ChordCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, ChordCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip, event) { - if (_this.props.isInteractive !== true) return; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var _this$props = _this.props, - width = _this$props.width, - height = _this$props.height, - margin = _this$props.margin, - radius = _this$props.radius, - innerRadius = _this$props.innerRadius, - arcs = _this$props.arcs, - setCurrentArc = _this$props.setCurrentArc, - theme = _this$props.theme; - - - var centerX = width / 2 + margin.left; - var centerY = height / 2 + margin.top; - - var arc = core.getHoveredArc(centerX, centerY, radius, innerRadius, arcs, x, y); - if (arc) { - setCurrentArc(arc); - showTooltip(React__default.createElement(ChordArcTooltip$1, { arc: arc, theme: theme }), event); - } else { - setCurrentArc(null); - hideTooltip(); - } - }, _this.handleMouseLeave = function (hideTooltip) { - if (_this.props.isInteractive !== true) return; - - _this.props.setCurrentArc(null); - hideTooltip(); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - ChordCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ChordCanvas.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } else { - this.draw(props); - return false; - } - }; - - ChordCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ChordCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var pixelRatio = props.pixelRatio, - width = props.width, - height = props.height, - margin = props.margin, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - enableLabel = props.enableLabel, - getLabel = props.getLabel, - labelOffset = props.labelOffset, - labelRotation = props.labelRotation, - getLabelTextColor = props.getLabelTextColor, - arcGenerator = props.arcGenerator, - ribbonGenerator = props.ribbonGenerator, - theme = props.theme, - ribbons = props.ribbons, - arcs = props.arcs, - radius = props.radius, - getArcOpacity = props.getArcOpacity, - getRibbonOpacity = props.getRibbonOpacity; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - - var centerX = width / 2 + margin.left; - var centerY = height / 2 + margin.top; - - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(centerX, centerY); - - this.ctx.font = theme.labels.text.fontSize + 'px sans-serif'; - - ribbonGenerator.context(this.ctx); - ribbons.forEach(function (ribbon) { - _this2.ctx.save(); - _this2.ctx.globalAlpha = getRibbonOpacity(ribbon); - - _this2.ctx.beginPath(); - ribbonGenerator(ribbon); - _this2.ctx.fillStyle = ribbon.source.color; - _this2.ctx.fill(); - - _this2.ctx.restore(); - }); - - arcGenerator.context(this.ctx); - arcs.forEach(function (arc) { - _this2.ctx.save(); - _this2.ctx.globalAlpha = getArcOpacity(arc); - - _this2.ctx.beginPath(); - arcGenerator(arc); - _this2.ctx.fillStyle = arc.color; - _this2.ctx.fill(); - - _this2.ctx.restore(); - - if (enableLabel) { - var labelTextColor = getLabelTextColor(arc, theme); - var angle = core.midAngle(arc); - var _props = core.getPolarLabelProps(radius + labelOffset, angle, labelRotation); - - _this2.ctx.save(); - _this2.ctx.translate(_props.x, _props.y); - _this2.ctx.rotate(core.degreesToRadians(_props.rotate)); - - _this2.ctx.textAlign = _props.align; - _this2.ctx.textBaseline = _props.baseline; - _this2.ctx.fillStyle = labelTextColor; - _this2.ctx.fillText(getLabel(arc), 0, 0); - - _this2.ctx.restore(); - } - }); - }; - - ChordCanvas.prototype.render = function render() { - var _this3 = this; - - var _props2 = this.props, - outerWidth = _props2.outerWidth, - outerHeight = _props2.outerHeight, - pixelRatio = _props2.pixelRatio, - isInteractive = _props2.isInteractive, - theme = _props2.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: partial(_this3.handleMouseHover, showTooltip, hideTooltip), - onMouseMove: partial(_this3.handleMouseHover, showTooltip, hideTooltip), - onMouseLeave: partial(_this3.handleMouseLeave, hideTooltip) - }); - } - ); - }; - - return ChordCanvas; - }(React.Component); - - ChordCanvas.propTypes = ChordPropTypes; - - var ChordCanvas$1 = enhance(ChordCanvas); - - var ResponsiveChord = function ResponsiveChord(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(Chord$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var ResponsiveChordCanvas = function ResponsiveChordCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(ChordCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Chord = Chord$1; - exports.ChordCanvas = ChordCanvas$1; - exports.ResponsiveChord = ResponsiveChord; - exports.ResponsiveChordCanvas = ResponsiveChordCanvas; - exports.ChordPropTypes = ChordPropTypes; - exports.ChordDefaultProps = ChordDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/circle-packing/umd/nivo-circle-packing.js b/packages/circle-packing/umd/nivo-circle-packing.js deleted file mode 100644 index d4ee30e3c..000000000 --- a/packages/circle-packing/umd/nivo-circle-packing.js +++ /dev/null @@ -1,941 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@nivo/core'), require('d3-hierarchy'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/withStateHandlers'), require('recompose/pure'), require('react-motion'), require('lodash/pick')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@nivo/core', 'd3-hierarchy', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/withStateHandlers', 'recompose/pure', 'react-motion', 'lodash/pick'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.nivo,global.d3,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposeWithStateHandlers,global.RecomposePure,global.ReactMotion,global['lodash/pick'])); -}(this, (function (exports,React,PropTypes,core,d3Hierarchy,compose,defaultProps,withPropsOnChange,withStateHandlers,pure,reactMotion,pick) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - withStateHandlers = withStateHandlers && withStateHandlers.hasOwnProperty('default') ? withStateHandlers['default'] : withStateHandlers; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - pick = pick && pick.hasOwnProperty('default') ? pick['default'] : pick; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var computeNodePath = function computeNodePath(node, getIdentity) { - return node.ancestors().map(function (ancestor) { - return getIdentity(ancestor.data); - }).join('.'); - }; - - var computeNodes = function computeNodes(_ref) { - var root = _ref.root, - pack = _ref.pack, - leavesOnly = _ref.leavesOnly, - getIdentity = _ref.getIdentity, - getColor = _ref.getColor; - - // assign a unique id depending on node path to each node - root.each(function (node) { - node.id = getIdentity(node.data); - node.path = computeNodePath(node, getIdentity); - }); - - pack(root); - - var nodes = leavesOnly ? root.leaves() : root.descendants(); - nodes = nodes.map(function (node) { - node.color = getColor(_extends({}, node.data, { depth: node.depth })); - node.label = false; - - return node; - }); - - return nodes; - }; - - var computeZoom = function computeZoom(nodes, currentNodePath, width, height) { - var currentNode = nodes.find(function (_ref2) { - var path = _ref2.path; - return path === currentNodePath; - }); - - if (!currentNode) return nodes; - - var ratio = Math.min(width, height) / (currentNode.r * 2); - var offsetX = width / 2 - currentNode.x * ratio; - var offsetY = height / 2 - currentNode.y * ratio; - - return nodes.map(function (node) { - return _extends({}, node, { - r: node.r * ratio, - x: node.x * ratio + offsetX, - y: node.y * ratio + offsetY - }); - }); - }; - - var BubbleNode = function BubbleNode(_ref) { - var node = _ref.node, - style = _ref.style, - handlers = _ref.handlers, - theme = _ref.theme; - - if (style.r <= 0) return null; - - return React__default.createElement( - 'g', - { transform: 'translate(' + style.x + ',' + style.y + ')' }, - React__default.createElement('circle', _extends({ - r: style.r - }, handlers, { - fill: style.fill ? style.fill : style.color, - stroke: style.borderColor, - strokeWidth: style.borderWidth - })), - node.label !== false && React__default.createElement( - 'text', - { - textAnchor: 'middle', - alignmentBaseline: 'central', - style: _extends({}, theme.labels.text, { - fill: style.labelTextColor, - pointerEvents: 'none' - }) - }, - node.label - ) - ); - }; - - BubbleNode.propTypes = { - node: PropTypes.object.isRequired, - style: PropTypes.shape({ - r: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - fill: PropTypes.string, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - labelTextColor: PropTypes.string.isRequired - }).isRequired, - handlers: PropTypes.object.isRequired, - theme: core.themePropType.isRequired - }; - - var BubbleHtmlNode = function BubbleHtmlNode(_ref) { - var node = _ref.node, - style = _ref.style, - handlers = _ref.handlers; - - if (style.r <= 0) return null; - - return React__default.createElement( - 'div', - _extends({ - id: (node.data && node.data.id ? node.data.id : // replace special characters with "-" - node.id).replace(/[^\w]/gi, '-'), - style: { - position: 'absolute', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - background: style.color, - color: style.labelTextColor, - borderWidth: style.borderWidth, - borderColor: style.borderColor, - top: style.y - style.r, - left: style.x - style.r, - width: style.r * 2, - height: style.r * 2, - borderStyle: 'solid', - borderRadius: style.r - } - }, handlers), - node.label !== false && node.label - ); - }; - - BubbleHtmlNode.propTypes = { - node: PropTypes.object.isRequired, - style: PropTypes.shape({ - r: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - fill: PropTypes.string, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - labelTextColor: PropTypes.string.isRequired - }).isRequired, - handlers: PropTypes.object.isRequired - }; - - /*————————————————————————————————————————————————————————————————————————————— - - Prop types - - —————————————————————————————————————————————————————————————————————————————*/ - - var commonPropTypes = { - // data - // `root` managed by `withHierarchy()` HOC - identity: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - - // dimensions managed by `withDimensions()` HOC - - // styling - // theme managed by `withTheme()` HOC - // colors managed by `withColors()` HOC - - leavesOnly: PropTypes.bool.isRequired, - padding: PropTypes.number.isRequired, - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.any.isRequired, - - // labels - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.string, - labelTextColor: PropTypes.any.isRequired, - labelSkipRadius: PropTypes.number.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, - isZoomable: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func - }; - - var BubblePropTypes = _extends({}, commonPropTypes, { - nodeComponent: PropTypes.func.isRequired - }, core.defsPropTypes); - - var BubbleHtmlPropTypes = _extends({}, commonPropTypes, { - nodeComponent: PropTypes.func.isRequired - }); - - var BubbleCanvasPropTypes = _extends({}, commonPropTypes, { - pixelRatio: PropTypes.number.isRequired - - /*————————————————————————————————————————————————————————————————————————————— - - Default props - - —————————————————————————————————————————————————————————————————————————————*/ - - });var commonDefaultProps = { - identity: 'id', - - leavesOnly: false, - padding: 1, - - // border - borderWidth: 0, - borderColor: 'inherit', - - // labels - enableLabel: true, - label: 'id', - labelTextColor: 'inherit:darker(1)', - labelSkipRadius: 8, - - // interactivity - isInteractive: true, - onClick: core.noop, - isZoomable: true - }; - - var BubbleDefaultProps = _extends({}, commonDefaultProps, { - nodeComponent: BubbleNode, - defs: [], - fill: [] - }); - - var BubbleHtmlDefaultProps = _extends({}, commonDefaultProps, { - nodeComponent: BubbleHtmlNode - }); - - var BubbleCanvasDefaultProps = _extends({}, commonDefaultProps, { - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }); - - var props = /*#__PURE__*/Object.freeze({ - BubblePropTypes: BubblePropTypes, - BubbleHtmlPropTypes: BubbleHtmlPropTypes, - BubbleCanvasPropTypes: BubbleCanvasPropTypes, - BubbleDefaultProps: BubbleDefaultProps, - BubbleHtmlDefaultProps: BubbleHtmlDefaultProps, - BubbleCanvasDefaultProps: BubbleCanvasDefaultProps - }); - - var commonEnhancers = [core.withHierarchy(), core.withDimensions(), core.withTheme(), core.withColors({ defaultColorBy: 'depth' }), withPropsOnChange(['width', 'height', 'padding'], function (_ref) { - var width = _ref.width, - height = _ref.height, - padding = _ref.padding; - return { - pack: d3Hierarchy.pack().size([width, height]).padding(padding) - }; - }), withPropsOnChange(['identity'], function (_ref2) { - var identity = _ref2.identity; - return { - getIdentity: core.getAccessorFor(identity) - }; - }), - - // border - withPropsOnChange(['borderColor'], function (_ref3) { - var borderColor = _ref3.borderColor; - return { - getBorderColor: core.getInheritedColorGenerator(borderColor) - }; - }), - - // labels - withPropsOnChange(['label', 'labelFormat'], function (_ref4) { - var label = _ref4.label, - labelFormat = _ref4.labelFormat; - return { - getLabel: core.getLabelGenerator(label, labelFormat) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref5) { - var labelTextColor = _ref5.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor) - }; - }), - - // zoom - withStateHandlers(function (_ref6) { - var _ref6$currentNodePath = _ref6.currentNodePath, - currentNodePath = _ref6$currentNodePath === undefined ? null : _ref6$currentNodePath; - return { - currentNodePath: currentNodePath - }; - }, { - zoomToNode: function zoomToNode(_ref7) { - var currentNodePath = _ref7.currentNodePath; - return function (path) { - if (path === currentNodePath) return { currentNodePath: null }; - return { currentNodePath: path }; - }; - } - }), withPropsOnChange(['root', 'pack', 'leavesOnly', 'getIdentity', 'getColor'], function (_ref8) { - var root = _ref8.root, - pack = _ref8.pack, - leavesOnly = _ref8.leavesOnly, - getIdentity = _ref8.getIdentity, - getColor = _ref8.getColor; - - var nodes = computeNodes({ root: root, pack: pack, leavesOnly: leavesOnly, getIdentity: getIdentity, getColor: getColor }); - - return { nodes: nodes }; - }), withPropsOnChange(['enableLabel', 'nodes', 'getLabel', 'labelSkipRadius'], function (_ref9) { - var enableLabel = _ref9.enableLabel, - nodes = _ref9.nodes, - getLabel = _ref9.getLabel, - labelSkipRadius = _ref9.labelSkipRadius; - - if (!enableLabel) return; - var nodesWithLabel = nodes.map(function (node) { - if (node.height !== 0 || labelSkipRadius > 0 && node.r < labelSkipRadius) return node; - return _extends({}, node, { label: getLabel(node) }); - }); - - return { nodes: nodesWithLabel }; - }), withPropsOnChange(['nodes', 'isZoomable', 'currentNodePath'], function (_ref10) { - var nodes = _ref10.nodes, - isZoomable = _ref10.isZoomable, - currentNodePath = _ref10.currentNodePath, - width = _ref10.width, - height = _ref10.height; - - if (currentNodePath && isZoomable) { - return { - nodes: computeZoom(nodes, currentNodePath, width, height) - }; - } - })]; - - var svgEnhancers = [withPropsOnChange(['nodes', 'defs', 'fill'], function (_ref11) { - var nodes = _ref11.nodes, - defs = _ref11.defs, - fill = _ref11.fill; - - return { - defs: core.bindDefs(defs, nodes, fill, { targetKey: 'fill' }) - }; - })]; - - var enhance = (function (Component) { - var implPropTypes = props[Component.displayName + 'PropTypes']; - var implDefaultProps = props[Component.displayName + 'DefaultProps']; - - Component.propTypes = implPropTypes; - - switch (Component.displayName) { - case 'Bubble': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, svgEnhancers, [core.withMotion(), pure]))(Component); - - case 'BubbleHtml': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [core.withMotion(), pure]))(Component); - - case 'BubbleCanvas': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [pure]))(Component); - } - - return Component; - }); - - var nodeWillEnter = function nodeWillEnter(_ref) { - var data = _ref.data; - return _extends({ - scale: 0, - r: 0, - x: data.x, - y: data.y - }, core.colorMotionSpring(data.color)); - }; - - var nodeWillLeave = function nodeWillLeave(springConfig) { - return function (_ref2) { - var data = _ref2.data; - return _extends({ - scale: reactMotion.spring(0, springConfig), - r: reactMotion.spring(0, springConfig), - x: reactMotion.spring(data.x, springConfig), - y: reactMotion.spring(data.y, springConfig) - }, core.colorMotionSpring(data.color, springConfig)); - }; - }; - - var getNodeHandlers = function getNodeHandlers(node, _ref) { - var isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - isZoomable = _ref.isZoomable, - zoomToNode = _ref.zoomToNode, - theme = _ref.theme, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip; - - if (!isInteractive) return {}; - - var handleTooltip = function handleTooltip(e) { - showTooltip(React__default.createElement(core.BasicTooltip, { - id: node.id, - value: node.value, - enableChip: true, - color: node.color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ node: node }, node)) : null - }), e); - }; - - var clickHandler = onClick; - if (isZoomable) { - clickHandler = function clickHandler(event) { - onClick(node, event); - zoomToNode(node.path); - }; - } - - return { - onMouseEnter: handleTooltip, - onMouseMove: handleTooltip, - onMouseLeave: hideTooltip, - onClick: clickHandler - }; - }; - - /* eslint-disable react/prop-types */ - - var Bubble = function Bubble(_ref) { - var nodes = _ref.nodes, - nodeComponent = _ref.nodeComponent, - margin = _ref.margin, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - theme = _ref.theme, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - defs = _ref.defs, - getLabelTextColor = _ref.getLabelTextColor, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - isZoomable = _ref.isZoomable, - zoomToNode = _ref.zoomToNode; - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - var getHandlers = function getHandlers(node, showTooltip, hideTooltip) { - return getNodeHandlers(node, { - isInteractive: isInteractive, - onClick: onClick, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - isZoomable: isZoomable, - zoomToNode: zoomToNode, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }); - }; - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: defs, - theme: theme - }, - !animate && React__default.createElement( - 'g', - null, - nodes.map(function (node) { - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, pick(node, ['scale', 'r', 'x', 'y', 'color']), { - fill: node.fill, - borderWidth: borderWidth, - borderColor: getBorderColor(node), - labelTextColor: getLabelTextColor(node) - }), - handlers: getHandlers(node, showTooltip, hideTooltip), - theme: theme - }); - }) - ), - animate && React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: nodeWillEnter, - willLeave: nodeWillLeave(springConfig), - styles: nodes.map(function (node) { - return { - key: node.path, - data: node, - style: _extends({ - scale: reactMotion.spring(1, springConfig), - r: reactMotion.spring(node.r, springConfig), - x: reactMotion.spring(node.x, springConfig), - y: reactMotion.spring(node.y, springConfig), - opacity: reactMotion.spring(1, springConfig) - }, core.colorMotionSpring(node.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref3) { - var style = _ref3.style, - node = _ref3.data; - - style.color = core.getInterpolatedColor(style); - - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, style, { - fill: node.fill, - borderWidth: borderWidth, - borderColor: getBorderColor(style), - labelTextColor: getLabelTextColor(style) - }), - handlers: getHandlers(node, showTooltip, hideTooltip), - theme: theme - }); - }) - ); - } - ) - ); - } - ); - }; - - Bubble.displayName = 'Bubble'; - - var enhancedBubble = enhance(Bubble); - enhancedBubble.displayName = 'Bubble'; - - var ResponsiveBubble = function ResponsiveBubble(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedBubble, _extends({ width: width, height: height }, props)); - } - ); - }; - - /* eslint-disable react/prop-types */ - - var BubbleHtml = function BubbleHtml(_ref) { - var nodes = _ref.nodes, - nodeComponent = _ref.nodeComponent, - margin = _ref.margin, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - theme = _ref.theme, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - getLabelTextColor = _ref.getLabelTextColor, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - isZoomable = _ref.isZoomable, - zoomToNode = _ref.zoomToNode, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip; - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - var getHandlers = function getHandlers(node, showTooltip, hideTooltip) { - return getNodeHandlers(node, { - isInteractive: isInteractive, - onClick: onClick, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - isZoomable: isZoomable, - zoomToNode: zoomToNode, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }); - }; - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - 'div', - { - style: { - position: 'relative', - width: outerWidth, - height: outerHeight - } - }, - !animate && React__default.createElement( - 'div', - { style: { position: 'absolute', top: margin.top, left: margin.left } }, - nodes.map(function (node) { - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, pick(node, ['scale', 'r', 'x', 'y', 'color']), { - borderWidth: borderWidth, - borderColor: getBorderColor(node), - labelTextColor: getLabelTextColor(node) - }), - handlers: getHandlers(node, showTooltip, hideTooltip) - }); - }) - ), - animate && React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: nodeWillEnter, - willLeave: nodeWillLeave(springConfig), - styles: nodes.map(function (node) { - return { - key: node.path, - data: node, - style: _extends({ - scale: reactMotion.spring(1, springConfig), - r: reactMotion.spring(node.r, springConfig), - x: reactMotion.spring(node.x, springConfig), - y: reactMotion.spring(node.y, springConfig), - opacity: reactMotion.spring(1, springConfig) - }, core.colorMotionSpring(node.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'div', - { - style: { - position: 'absolute', - top: margin.top, - left: margin.left - } - }, - interpolatedStyles.map(function (_ref3) { - var style = _ref3.style, - node = _ref3.data; - - style.color = core.getInterpolatedColor(style); - - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, style, { - borderWidth: borderWidth, - borderColor: getBorderColor(style), - labelTextColor: getLabelTextColor(style) - }), - handlers: getHandlers(node, showTooltip, hideTooltip) - }); - }) - ); - } - ) - ); - } - ); - }; - - BubbleHtml.displayName = 'BubbleHtml'; - - var enhancedBubbleHtml = enhance(BubbleHtml); - enhancedBubbleHtml.displayName = 'BubbleHtml'; - - var ResponsiveBubbleHtml = function ResponsiveBubbleHtml(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedBubbleHtml, _extends({ width: width, height: height }, props)); - } - ); - }; - - /* eslint-disable react/prop-types */ - - var BubbleCanvas = function (_Component) { - inherits(BubbleCanvas, _Component); - - function BubbleCanvas() { - classCallCheck(this, BubbleCanvas); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - BubbleCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - BubbleCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - BubbleCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var nodes = props.nodes, - pixelRatio = props.pixelRatio, - margin = props.margin, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - theme = props.theme, - borderWidth = props.borderWidth, - getBorderColor = props.getBorderColor, - enableLabel = props.enableLabel, - getLabel = props.getLabel, - labelSkipRadius = props.labelSkipRadius, - getLabelTextColor = props.getLabelTextColor; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - /* - Could be used to compute metaballs, - grouping nodes by depth + common parent - using marching squares, but it really is a bonus feature… - const maxDepth = _.maxBy(nodes, 'depth').depth - const nodesByDepth = _.range(maxDepth + 1).map(depth => - _.values( - _.groupBy(nodes.filter(({ depth: nodeDepth }) => nodeDepth === depth), 'parent.id') - ) - ) - nodesByDepth.forEach(layer => { - layer.forEach(node => { - console.log(node) - }) - }) - */ - - nodes.forEach(function (node) { - _this2.ctx.save(); - - if (borderWidth > 0) { - _this2.ctx.strokeStyle = getBorderColor(node); - _this2.ctx.lineWidth = borderWidth; - } - - _this2.ctx.beginPath(); - _this2.ctx.arc(node.x, node.y, node.r, 0, 2 * Math.PI); - _this2.ctx.fillStyle = node.color; - _this2.ctx.fill(); - - if (borderWidth > 0) { - _this2.ctx.stroke(); - } - }); - - if (enableLabel) { - this.ctx.textAlign = 'center'; - this.ctx.textBaseline = 'middle'; - this.ctx.font = theme.labels.text.fontSize + 'px sans-serif'; - - // draw labels on top - nodes.filter(function (_ref) { - var r = _ref.r; - return r > labelSkipRadius; - }).forEach(function (node) { - var label = getLabel(node); - var labelTextColor = getLabelTextColor(node); - - _this2.ctx.fillStyle = labelTextColor; - _this2.ctx.fillText(label, node.x, node.y); - }); - } - }; - - BubbleCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function () { - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - } - }); - } - ); - }; - - return BubbleCanvas; - }(React.Component); - - BubbleCanvas.displayName = 'BubbleCanvas'; - - var enhancedBubbleCanvas = enhance(BubbleCanvas); - enhancedBubbleCanvas.displayName = 'BubbleCanvas'; - - var ResponsiveBubbleCanvas = function ResponsiveBubbleCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedBubbleCanvas, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Bubble = enhancedBubble; - exports.ResponsiveBubble = ResponsiveBubble; - exports.BubbleHtml = enhancedBubbleHtml; - exports.ResponsiveBubbleHtml = ResponsiveBubbleHtml; - exports.BubbleCanvas = enhancedBubbleCanvas; - exports.ResponsiveBubbleCanvas = ResponsiveBubbleCanvas; - exports.BubblePropTypes = BubblePropTypes; - exports.BubbleHtmlPropTypes = BubbleHtmlPropTypes; - exports.BubbleCanvasPropTypes = BubbleCanvasPropTypes; - exports.BubbleDefaultProps = BubbleDefaultProps; - exports.BubbleHtmlDefaultProps = BubbleHtmlDefaultProps; - exports.BubbleCanvasDefaultProps = BubbleCanvasDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/core/umd/nivo-core.js b/packages/core/umd/nivo-core.js deleted file mode 100644 index 479d1f94c..000000000 --- a/packages/core/umd/nivo-core.js +++ /dev/null @@ -1,3482 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-measure'), require('recompose/pure'), require('react-motion'), require('d3-interpolate'), require('lodash/isFunction'), require('d3-format'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('lodash/memoize'), require('lodash/get'), require('d3-color'), require('lodash/last'), require('lodash/isArray'), require('d3-scale'), require('d3-scale-chromatic'), require('lodash/isString'), require('recompose/setPropTypes'), require('recompose/defaultProps'), require('lodash/without'), require('d3-shape'), require('d3-hierarchy'), require('recompose/withProps'), require('lodash/isEqual'), require('lodash/partialRight'), require('lodash/merge'), require('lodash/isNumber'), require('d3-time-format'), require('recompose/shouldUpdate'), require('lodash/isPlainObject'), require('lodash/pick'), require('lodash/set')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-measure', 'recompose/pure', 'react-motion', 'd3-interpolate', 'lodash/isFunction', 'd3-format', 'recompose/compose', 'recompose/withPropsOnChange', 'lodash/memoize', 'lodash/get', 'd3-color', 'lodash/last', 'lodash/isArray', 'd3-scale', 'd3-scale-chromatic', 'lodash/isString', 'recompose/setPropTypes', 'recompose/defaultProps', 'lodash/without', 'd3-shape', 'd3-hierarchy', 'recompose/withProps', 'lodash/isEqual', 'lodash/partialRight', 'lodash/merge', 'lodash/isNumber', 'd3-time-format', 'recompose/shouldUpdate', 'lodash/isPlainObject', 'lodash/pick', 'lodash/set'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global['react-measure'],global.RecomposePure,global.ReactMotion,global.d3,global['lodash/isFunction'],global.d3,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global['lodash/memoize'],global['lodash/get'],global.d3,global['lodash/last'],global['lodash/isArray'],global.d3,global.d3,global['lodash/isString'],global.RecomposeSetPropTypes,global.RecomposeDefaultProps,global['lodash/without'],global.d3,global.d3,global.RecomposeWithProps,global['lodash/isEqual'],global['lodash/partialRight'],global['lodash/merge'],global['lodash/isNumber'],global.d3,global.RecomposeShouldUpdate,global['lodash/isPlainObject'],global['lodash/pick'],global['lodash/set'])); -}(this, (function (exports,React,PropTypes,Measure,pure,reactMotion,d3Interpolate,isFunction,d3Format,compose,withPropsOnChange,memoize,get,d3Color,last,isArray,d3Scale,d3ScaleChromatic,isString,setPropTypes,defaultProps,without,d3Shape,d3Hierarchy,withProps,isEqual,partialRight,merge,isNumber,d3TimeFormat,shouldUpdate,isPlainObject,pick,set) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - Measure = Measure && Measure.hasOwnProperty('default') ? Measure['default'] : Measure; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - memoize = memoize && memoize.hasOwnProperty('default') ? memoize['default'] : memoize; - get = get && get.hasOwnProperty('default') ? get['default'] : get; - last = last && last.hasOwnProperty('default') ? last['default'] : last; - isArray = isArray && isArray.hasOwnProperty('default') ? isArray['default'] : isArray; - isString = isString && isString.hasOwnProperty('default') ? isString['default'] : isString; - setPropTypes = setPropTypes && setPropTypes.hasOwnProperty('default') ? setPropTypes['default'] : setPropTypes; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - without = without && without.hasOwnProperty('default') ? without['default'] : without; - withProps = withProps && withProps.hasOwnProperty('default') ? withProps['default'] : withProps; - isEqual = isEqual && isEqual.hasOwnProperty('default') ? isEqual['default'] : isEqual; - partialRight = partialRight && partialRight.hasOwnProperty('default') ? partialRight['default'] : partialRight; - merge = merge && merge.hasOwnProperty('default') ? merge['default'] : merge; - isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber; - shouldUpdate = shouldUpdate && shouldUpdate.hasOwnProperty('default') ? shouldUpdate['default'] : shouldUpdate; - isPlainObject = isPlainObject && isPlainObject.hasOwnProperty('default') ? isPlainObject['default'] : isPlainObject; - pick = pick && pick.hasOwnProperty('default') ? pick['default'] : pick; - set = set && set.hasOwnProperty('default') ? set['default'] : set; - - var noop = (function () {}); - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var objectWithoutProperties = function (obj, keys) { - var target = {}; - - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; - } - - return target; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var containerStyle = { - position: 'relative' - }; - - var tooltipStyle = { - pointerEvents: 'none', - position: 'absolute', - zIndex: 10 - }; - - var noopHandlers = { - showTooltip: noop, - hideTooltip: noop - }; - - var Container = function (_Component) { - inherits(Container, _Component); - - function Container() { - var _temp, _this, _ret; - - classCallCheck(this, Container); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { - isTooltipVisible: false, - tooltipContent: null, - position: {} - }, _this.showTooltip = function (content, event) { - var clientX = event.clientX, - clientY = event.clientY; - - var bounds = _this.container.getBoundingClientRect(); - - var x = clientX - bounds.left; - var y = clientY - bounds.top; - - var position = {}; - - if (x < bounds.width / 2) position.left = x + 20;else position.right = bounds.width - x + 20; - - if (y < bounds.height / 2) position.top = y - 12;else position.bottom = bounds.height - y - 12; - - _this.setState({ - isTooltipVisible: true, - tooltipContent: content, - position: position - }); - }, _this.hideTooltip = function () { - _this.setState({ isTooltipVisible: false, tooltipContent: null }); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - Container.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - children = _props.children, - isInteractive = _props.isInteractive, - theme = _props.theme; - var _state = this.state, - isTooltipVisible = _state.isTooltipVisible, - tooltipContent = _state.tooltipContent, - position = _state.position; - - - if (!isInteractive) return children(noopHandlers); - - return React__default.createElement( - 'div', - { - style: containerStyle, - ref: function ref(container) { - _this2.container = container; - } - }, - children({ - showTooltip: this.showTooltip, - hideTooltip: this.hideTooltip - }), - isTooltipVisible && React__default.createElement( - 'div', - { - style: _extends({}, tooltipStyle, position, theme.tooltip) - }, - tooltipContent - ) - ); - }; - - return Container; - }(React.Component); - - Container.propTypes = { - children: PropTypes.func.isRequired, - isInteractive: PropTypes.bool.isRequired, - theme: PropTypes.object.isRequired - }; - Container.defaultProps = { - isInteractive: true - }; - - var ResponsiveWrapper = function (_Component) { - inherits(ResponsiveWrapper, _Component); - - function ResponsiveWrapper() { - var _temp, _this, _ret; - - classCallCheck(this, ResponsiveWrapper); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { - dimensions: { - width: -1, - height: -1 - } - }, _temp), possibleConstructorReturn(_this, _ret); - } - - ResponsiveWrapper.prototype.render = function render() { - var _this2 = this; - - var _state$dimensions = this.state.dimensions, - width = _state$dimensions.width, - height = _state$dimensions.height; - - - var shouldRender = width > 0 && height > 0; - - return React__default.createElement( - Measure, - { - bounds: true, - onResize: function onResize(contentRect) { - _this2.setState({ dimensions: contentRect.bounds }); - } - }, - function (_ref) { - var measureRef = _ref.measureRef; - return React__default.createElement( - 'div', - { ref: measureRef, style: { width: '100%', height: '100%' } }, - shouldRender && _this2.props.children({ width: width, height: height }) - ); - } - ); - }; - - return ResponsiveWrapper; - }(React.Component); - - ResponsiveWrapper.propTypes = { - children: PropTypes.func.isRequired - }; - - var LinearGradient = function LinearGradient(_ref) { - var id = _ref.id, - colors = _ref.colors; - return React__default.createElement( - 'linearGradient', - { id: id, x1: 0, x2: 0, y1: 0, y2: 1 }, - colors.map(function (_ref2) { - var offset = _ref2.offset, - color = _ref2.color, - opacity = _ref2.opacity; - return React__default.createElement('stop', { - key: offset, - offset: offset + '%', - stopColor: color, - stopOpacity: opacity !== undefined ? opacity : 1 - }); - }) - ); - }; - - LinearGradient.propTypes = { - id: PropTypes.string.isRequired, - colors: PropTypes.arrayOf(PropTypes.shape({ - offset: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired - }; - - var linearGradientDef = function linearGradientDef(id, colors) { - var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - return _extends({ - id: id, - type: 'linearGradient', - colors: colors - }, options); - }; - - var gradientTypes = { - linearGradient: LinearGradient - }; - - var PatternDots = pure(function (_ref) { - var id = _ref.id, - background = _ref.background, - color = _ref.color, - size = _ref.size, - padding = _ref.padding, - stagger = _ref.stagger; - - var fullSize = size + padding; - var radius = size / 2; - var halfPadding = padding / 2; - if (stagger === true) { - fullSize = size * 2 + padding * 2; - } - - return React__default.createElement( - 'pattern', - { id: id, width: fullSize, height: fullSize, patternUnits: 'userSpaceOnUse' }, - React__default.createElement('rect', { width: fullSize, height: fullSize, fill: background }), - React__default.createElement('circle', { cx: halfPadding + radius, cy: halfPadding + radius, r: radius, fill: color }), - stagger && React__default.createElement('circle', { - cx: padding * 1.5 + size + radius, - cy: padding * 1.5 + size + radius, - r: radius, - fill: color - }) - ); - }); - - PatternDots.propTypes = { - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - background: PropTypes.string.isRequired, - size: PropTypes.number.isRequired, - padding: PropTypes.number.isRequired, - stagger: PropTypes.bool.isRequired - }; - - PatternDots.defaultProps = { - color: '#000000', - background: '#ffffff', - size: 4, - padding: 4, - stagger: false - }; - - var patternDotsDef = function patternDotsDef(id) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - return _extends({ - id: id, - type: 'patternDots' - }, options); - }; - - var TWO_PI = Math.PI * 2; - - var degreesToRadians = function degreesToRadians(degrees) { - return degrees * Math.PI / 180; - }; - - var radiansToDegrees = function radiansToDegrees(radians) { - return 180 * radians / Math.PI; - }; - - var midAngle = function midAngle(arc) { - return arc.startAngle + (arc.endAngle - arc.startAngle) / 2; - }; - - var positionFromAngle = function positionFromAngle(angle, distance) { - return { - x: Math.cos(angle) * distance, - y: Math.sin(angle) * distance - }; - }; - - /** - * Normalize given angle (degrees) in the 0~360 range. - * - * @param {number} angle - * - * @return {number} - */ - var absoluteAngleDegrees = function absoluteAngleDegrees(angle) { - var absAngle = angle % 360; - if (absAngle < 0) { - absAngle += 360; - } - - return absAngle; - }; - - var absoluteAngleRadians = function absoluteAngleRadians(angle) { - return angle - TWO_PI * Math.floor((angle + Math.PI) / TWO_PI); - }; - - /** - * Computes the bounding box for a circle arc. - * - * Assumptions: - * - Anywhere the arc intersects an axis will be a max or a min. - * - If the arc doesn't intersect an axis, then the center - * will be one corner of the bounding rectangle, - * and this is the only case when it will be. - * - The only other possible extreme points of the sector to consider - * are the endpoints of the radii. - * - * This script was built within the help of this answer on stackoverflow: - * https://stackoverflow.com/questions/1336663/2d-bounding-box-of-a-sector - * - * @param {number} ox - circle x origin - * @param {number} oy - circle y origin - * @param {number} radius - circle radius - * @param {number} startAngle - arc start angle - * @param {number} endAngle - arc end angle - * @param {boolean} [includeCenter=true] - if true, include the center - * - * @return {{ points: *[][], x: number, y: number, width: number, height: number }} - */ - var computeArcBoundingBox = function computeArcBoundingBox(ox, oy, radius, startAngle, endAngle) { - var includeCenter = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; - - var points = []; - - var p0 = positionFromAngle(degreesToRadians(startAngle), radius); - points.push([p0.x, p0.y]); - - var p1 = positionFromAngle(degreesToRadians(endAngle), radius); - points.push([p1.x, p1.y]); - - for (var angle = Math.round(Math.min(startAngle, endAngle)); angle <= Math.round(Math.max(startAngle, endAngle)); angle++) { - if (angle % 90 === 0) { - var p = positionFromAngle(degreesToRadians(angle), radius); - points.push([p.x, p.y]); - } - } - - points = points.map(function (_ref) { - var x = _ref[0], - y = _ref[1]; - return [ox + x, oy + y]; - }); - if (includeCenter === true) points.push([ox, oy]); - - var xs = points.map(function (_ref2) { - var x = _ref2[0]; - return x; - }); - var ys = points.map(function (_ref3) { - var y = _ref3[1]; - return y; - }); - - var x0 = Math.min.apply(Math, xs); - var x1 = Math.max.apply(Math, xs); - - var y0 = Math.min.apply(Math, ys); - var y1 = Math.max.apply(Math, ys); - - return { - points: points, - x: x0, - y: y0, - width: x1 - x0, - height: y1 - y0 - }; - }; - - var textPropsByEngine = { - svg: { - align: { - left: 'start', - center: 'middle', - right: 'end' - }, - baseline: { - top: 'before-edge', - center: 'central', - bottom: 'after-edge' - } - }, - canvas: { - align: { - left: 'left', - center: 'center', - right: 'right' - }, - baseline: { - top: 'top', - center: 'middle', - bottom: 'bottom' - } - } - }; - - /** - * @param {number} radius - * @param {number} angle angle (radians) - * @param {number} [rotation=0] label rotation (degrees) - * @param {string} [engine='svg'] one of: 'svg', 'canvas' - * @return {{ x: number, y: number, rotate: number, align: string, baseline: string }} - */ - var getPolarLabelProps = function getPolarLabelProps(radius, angle, rotation) { - var engine = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'svg'; - - var textProps = textPropsByEngine[engine]; - - var _positionFromAngle = positionFromAngle(angle - Math.PI / 2, radius), - x = _positionFromAngle.x, - y = _positionFromAngle.y; - - var rotate = radiansToDegrees(angle); - var align = textProps.align.center; - var baseline = textProps.baseline.bottom; - - if (rotation > 0) { - align = textProps.align.right; - baseline = textProps.baseline.center; - } else if (rotation < 0) { - align = textProps.align.left; - baseline = textProps.baseline.center; - } - - // reverse labels after 180° - if (rotation !== 0 && rotate > 180) { - rotate -= 180; - align = align === textProps.align.right ? textProps.align.left : textProps.align.right; - } - - rotate += rotation; - - return { x: x, y: y, rotate: rotate, align: align, baseline: baseline }; - }; - - var PatternLines = pure(function (_ref) { - var id = _ref.id, - _spacing = _ref.spacing, - _rotation = _ref.rotation, - background = _ref.background, - color = _ref.color, - lineWidth = _ref.lineWidth; - - var rotation = Math.round(_rotation) % 360; - var spacing = Math.abs(_spacing); - - if (rotation > 180) rotation = rotation - 360;else if (rotation > 90) rotation = rotation - 180;else if (rotation < -180) rotation = rotation + 360;else if (rotation < -90) rotation = rotation + 180; - - var width = spacing; - var height = spacing; - var path = void 0; - - if (rotation === 0) { - path = '\n M 0 0 L ' + width + ' 0\n M 0 ' + height + ' L ' + width + ' ' + height + '\n '; - } else if (rotation === 90) { - path = '\n M 0 0 L 0 ' + height + '\n M ' + width + ' 0 L ' + width + ' ' + height + '\n '; - } else { - width = Math.abs(spacing / Math.sin(degreesToRadians(rotation))); - height = spacing / Math.sin(degreesToRadians(90 - rotation)); - - if (rotation > 0) { - path = '\n M 0 ' + -height + ' L ' + width * 2 + ' ' + height + '\n M ' + -width + ' ' + -height + ' L ' + width + ' ' + height + '\n M ' + -width + ' 0 L ' + width + ' ' + height * 2 + '\n '; - } else { - path = '\n M ' + -width + ' ' + height + ' L ' + width + ' ' + -height + '\n M ' + -width + ' ' + height * 2 + ' L ' + width * 2 + ' ' + -height + '\n M 0 ' + height * 2 + ' L ' + width * 2 + ' 0\n '; - } - } - - return React__default.createElement( - 'pattern', - { id: id, width: width, height: height, patternUnits: 'userSpaceOnUse' }, - React__default.createElement('rect', { - width: width, - height: height, - fill: background, - stroke: 'rgba(255, 0, 0, 0.1)', - strokeWidth: 0 - }), - React__default.createElement('path', { d: path, strokeWidth: lineWidth, stroke: color, strokeLinecap: 'square' }) - ); - }); - - PatternLines.propTypes = { - id: PropTypes.string.isRequired, - spacing: PropTypes.number.isRequired, - rotation: PropTypes.number.isRequired, - background: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - lineWidth: PropTypes.number.isRequired - }; - - PatternLines.defaultProps = { - spacing: 5, - rotation: 0, - color: '#000000', - background: '#ffffff', - lineWidth: 2 - }; - - var patternLinesDef = function patternLinesDef(id) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - return _extends({ - id: id, - type: 'patternLines' - }, options); - }; - - var PatternSquares = pure(function (_ref) { - var id = _ref.id, - background = _ref.background, - color = _ref.color, - size = _ref.size, - padding = _ref.padding, - stagger = _ref.stagger; - - var fullSize = size + padding; - var halfPadding = padding / 2; - if (stagger === true) { - fullSize = size * 2 + padding * 2; - } - - return React__default.createElement( - 'pattern', - { id: id, width: fullSize, height: fullSize, patternUnits: 'userSpaceOnUse' }, - React__default.createElement('rect', { width: fullSize, height: fullSize, fill: background }), - React__default.createElement('rect', { x: halfPadding, y: halfPadding, width: size, height: size, fill: color }), - stagger && React__default.createElement('rect', { - x: padding * 1.5 + size, - y: padding * 1.5 + size, - width: size, - height: size, - fill: color - }) - ); - }); - - PatternSquares.propTypes = { - id: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - background: PropTypes.string.isRequired, - size: PropTypes.number.isRequired, - padding: PropTypes.number.isRequired, - stagger: PropTypes.bool.isRequired - }; - - PatternSquares.defaultProps = { - color: '#000000', - background: '#ffffff', - size: 4, - padding: 4, - stagger: false - }; - - var patternSquaresDef = function patternSquaresDef(id) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - return _extends({ - id: id, - type: 'patternSquares' - }, options); - }; - - var patternTypes = { - patternDots: PatternDots, - patternLines: PatternLines, - patternSquares: PatternSquares - }; - - var defsMapping = _extends({}, gradientTypes, patternTypes); - - var Defs = pure(function (_ref) { - var definitions = _ref.defs; - - if (!definitions || definitions.length < 1) return null; - - return React__default.createElement( - 'defs', - null, - definitions.map(function (_ref2) { - var type = _ref2.type, - def = objectWithoutProperties(_ref2, ['type']); - - if (defsMapping[type]) return React__default.createElement(defsMapping[type], _extends({ key: def.id }, def)); - - return null; - }) - ); - }); - Defs.propTypes = { - defs: PropTypes.arrayOf(PropTypes.shape({ - type: PropTypes.oneOf(Object.keys(defsMapping)).isRequired, - id: PropTypes.string.isRequired - })) - }; - - var axisThemePropType = PropTypes.shape({ - domain: PropTypes.shape({ - line: PropTypes.shape({ - stroke: PropTypes.string.isRequired, - strokeWidth: PropTypes.number.isRequired, - strokeDasharray: PropTypes.string - }).isRequired - }).isRequired, - ticks: PropTypes.shape({ - line: PropTypes.shape({ - stroke: PropTypes.string.isRequired, - strokeWidth: PropTypes.number.isRequired, - strokeDasharray: PropTypes.string - }).isRequired, - text: PropTypes.shape({ - fill: PropTypes.string.isRequired, - fontSize: PropTypes.number.isRequired - }).isRequired - }).isRequired, - legend: PropTypes.shape({ - text: PropTypes.shape({ - fill: PropTypes.string.isRequired, - fontSize: PropTypes.number.isRequired - }).isRequired - }).isRequired - }); - - var gridThemePropType = PropTypes.shape({ - line: PropTypes.shape({ - stroke: PropTypes.string.isRequired, - strokeWidth: PropTypes.number.isRequired, - strokeDasharray: PropTypes.string - }).isRequired - }); - - var legendsThemePropType = PropTypes.shape({ - text: PropTypes.shape({ - fill: PropTypes.string.isRequired, - fontSize: PropTypes.number.isRequired - }).isRequired - }); - - var labelsThemePropType = PropTypes.shape({ - text: PropTypes.shape({ - fill: PropTypes.string.isRequired, - fontSize: PropTypes.number.isRequired - }).isRequired - }); - - var dotsThemePropType = PropTypes.shape({ - text: PropTypes.shape({ - fill: PropTypes.string.isRequired, - fontSize: PropTypes.number.isRequired - }).isRequired - }); - - var themePropType = PropTypes.shape({ - background: PropTypes.string.isRequired, - axis: axisThemePropType.isRequired, - grid: gridThemePropType.isRequired, - legends: legendsThemePropType.isRequired, - labels: labelsThemePropType.isRequired, - dots: dotsThemePropType.isRequired - }); - - var defaultTextColor = '#333333'; - var defaultFontSize = 11; - - var defaultTheme = { - background: 'transparent', - axis: { - domain: { - line: { - stroke: 'transparent', - strokeWidth: 1 - } - }, - ticks: { - line: { - stroke: '#777', - strokeWidth: 1 - }, - text: { - fill: defaultTextColor, - fontSize: defaultFontSize - } - }, - legend: { - text: { - fill: defaultTextColor, - fontSize: defaultFontSize - } - } - }, - grid: { - line: { - stroke: '#ddd', - strokeWidth: 1 - } - }, - legends: { - text: { - fill: defaultTextColor, - fontSize: defaultFontSize - } - }, - labels: { - text: { - fill: defaultTextColor, - fontSize: defaultFontSize - } - }, - markers: { - lineColor: '#000', - lineStrokeWidth: 1, - textColor: defaultTextColor, - fontSize: defaultFontSize - }, - dots: { - text: { - fill: defaultTextColor, - fontSize: defaultFontSize - } - }, - tooltip: { - container: { - background: 'white', - color: 'inherit', - fontSize: 'inherit', - borderRadius: '2px', - boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)', - padding: '5px 9px' - }, - basic: { - whiteSpace: 'pre', - display: 'flex', - alignItems: 'center' - }, - table: {}, - tableCell: { - padding: '3px 5px' - } - } - }; - - var SvgWrapper = function SvgWrapper(_ref) { - var width = _ref.width, - height = _ref.height, - margin = _ref.margin, - defs = _ref.defs, - children = _ref.children, - theme = _ref.theme; - return React__default.createElement( - 'svg', - { xmlns: 'http://www.w3.org/2000/svg', role: 'img', width: width, height: height }, - React__default.createElement(Defs, { defs: defs }), - React__default.createElement('rect', { width: width, height: height, fill: theme.background }), - React__default.createElement( - 'g', - { transform: 'translate(' + margin.left + ',' + margin.top + ')' }, - children - ) - ); - }; - - SvgWrapper.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - margin: PropTypes.shape({ - top: PropTypes.number.isRequired, - left: PropTypes.number.isRequired - }).isRequired, - defs: PropTypes.array, - children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired, - theme: themePropType.isRequired - }; - - // credit to Tanner Linsey from this issue on react motion repository: - - var enhancedSpring = function enhancedSpring(value, config) { - if (typeof value !== 'number') { - return { - value: value, - config: config, - interpolator: config && config.interpolator ? config.interpolator : d3Interpolate.interpolate - }; - } - return reactMotion.spring(value, config); - }; - - var SmartMotion = function (_PureComponent) { - inherits(SmartMotion, _PureComponent); - - function SmartMotion() { - var _temp, _this, _ret; - - classCallCheck(this, SmartMotion); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.oldValues = {}, _this.newInters = {}, _this.currentStepValues = {}, _this.stepValues = {}, _this.stepInterpolators = {}, _temp), possibleConstructorReturn(_this, _ret); - } - - SmartMotion.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - style = _props.style, - children = _props.children, - rest = objectWithoutProperties(_props, ['style', 'children']); - - - var resolvedStyle = style(enhancedSpring); - - for (var key in resolvedStyle) { - if ( - // If key is a non-numeric interpolation - resolvedStyle[key] && resolvedStyle[key].interpolator) { - // Make sure the steps start at 0 - this.currentStepValues[key] = this.currentStepValues[key] || 0; - if ( - // And the value has changed - typeof this.newInters[key] === 'undefined' || resolvedStyle[key].value !== this.newInters[key].value) { - // Save the new value - this.newInters[key] = resolvedStyle[key]; - - // Increment the stepInterValue for this key by 1 - this.stepValues[key] = this.currentStepValues[key] + 1; - - // Set up the new interpolator - this.stepInterpolators[key] = this.newInters[key].interpolator(this.oldValues[key], this.newInters[key].value); - } - // Return the spring with the destination stepValue and spring config - resolvedStyle[key] = reactMotion.spring(this.stepValues[key], this.newInters[key].config); - // console.log(resolvedStyle[key]) - } - } - - return React__default.createElement( - reactMotion.Motion, - _extends({}, rest, { style: resolvedStyle }), - function (values) { - var newValues = {}; - for (var _key2 in values) { - if (_this2.stepValues[_key2]) { - // Save the currentStepValue - _this2.currentStepValues[_key2] = values[_key2]; - // Figure the percentage - var percentage = _this2.currentStepValues[_key2] - _this2.stepValues[_key2] + 1; - // Save the current value and replace the value in the interpolated object - _this2.oldValues[_key2] = newValues[_key2] = _this2.stepInterpolators[_key2](percentage); - } - } - return children(_extends({}, values, newValues)); - } - ); - }; - - return SmartMotion; - }(React.PureComponent); - - SmartMotion.propTypes = { - children: PropTypes.func.isRequired, - style: PropTypes.func.isRequired - }; - - var DotsItemSymbol = function DotsItemSymbol(_ref) { - var size = _ref.size, - color = _ref.color, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor; - return React__default.createElement('circle', { - r: size / 2, - fill: color, - stroke: borderColor, - strokeWidth: borderWidth, - style: { pointerEvents: 'none' } - }); - }; - - DotsItemSymbol.propTypes = { - size: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired - }; - - var DotsItemSymbol$1 = pure(DotsItemSymbol); - - var DotsItem = function DotsItem(_ref) { - var x = _ref.x, - y = _ref.y, - symbol = _ref.symbol, - size = _ref.size, - color = _ref.color, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - label = _ref.label, - labelTextAnchor = _ref.labelTextAnchor, - labelYOffset = _ref.labelYOffset, - theme = _ref.theme; - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ', ' + y + ')', style: { pointerEvents: 'none' } }, - React__default.createElement(symbol, { - size: size, - color: color, - borderWidth: borderWidth, - borderColor: borderColor - }), - label && React__default.createElement( - 'text', - { textAnchor: labelTextAnchor, y: labelYOffset, style: theme.dots.text }, - label - ) - ); - }; - - DotsItem.propTypes = { - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - - size: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - symbol: PropTypes.func.isRequired, - - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - labelTextAnchor: PropTypes.oneOf(['start', 'middle', 'end']), - labelYOffset: PropTypes.number.isRequired, - - theme: PropTypes.shape({ - dots: dotsThemePropType.isRequired - }).isRequired - }; - - var DotsItemDefaultProps = { - symbol: DotsItemSymbol$1, - - // label - labelTextAnchor: 'middle', - labelYOffset: -12 - }; - - DotsItem.defaultProps = DotsItemDefaultProps; - - var DotsItem$1 = pure(DotsItem); - - var Chip = function Chip(_ref) { - var size = _ref.size, - color = _ref.color, - style = _ref.style; - return React__default.createElement('span', { style: _extends({ display: 'block', width: size, height: size, background: color }, style) }); - }; - - Chip.propTypes = { - size: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - style: PropTypes.object.isRequired - }; - - Chip.defaultProps = { - size: 12, - style: {} - }; - - var Chip$1 = pure(Chip); - - var chipStyle = { marginRight: 7 }; - - var BasicTooltip = function BasicTooltip(props) { - var id = props.id, - _value = props.value, - format = props.format, - enableChip = props.enableChip, - color = props.color, - theme = props.theme, - renderContent = props.renderContent; - - - var content = void 0; - if (typeof renderContent === 'function') { - content = renderContent(); - } else { - var value = _value; - if (format !== undefined && value !== undefined) { - value = format(value); - } - content = React__default.createElement( - 'div', - { style: theme.tooltip.basic }, - enableChip && React__default.createElement(Chip$1, { color: color, style: chipStyle }), - value !== undefined ? React__default.createElement( - 'span', - null, - id, - ': ', - React__default.createElement( - 'strong', - null, - isNaN(value) ? String(value) : value - ) - ) : id - ); - } - - return React__default.createElement( - 'div', - { style: theme.tooltip.container }, - content - ); - }; - - BasicTooltip.propTypes = { - id: PropTypes.node.isRequired, - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - enableChip: PropTypes.bool.isRequired, - color: PropTypes.string, - format: PropTypes.func, - renderContent: PropTypes.func, - - theme: PropTypes.shape({ - tooltip: PropTypes.shape({ - container: PropTypes.object.isRequired, - basic: PropTypes.object.isRequired - }).isRequired - }).isRequired - }; - - BasicTooltip.defaultProps = { - enableChip: false - }; - - var enhance = compose(withPropsOnChange(['format'], function (_ref) { - var format = _ref.format; - - if (!format || isFunction(format)) return { format: format }; - return { format: d3Format.format(format) }; - }), pure); - - var BasicTooltip$1 = enhance(BasicTooltip); - - var tableStyle = { - width: '100%', - borderCollapse: 'collapse' - }; - - var TableTooltip = function TableTooltip(_ref) { - var title = _ref.title, - rows = _ref.rows, - theme = _ref.theme, - renderContent = _ref.renderContent; - - if (!rows.length) return null; - - var content = void 0; - if (typeof renderContent === 'function') { - content = renderContent(); - } else { - content = React__default.createElement( - 'div', - null, - title && title, - React__default.createElement( - 'table', - { style: _extends({}, tableStyle, theme.tooltip.table) }, - React__default.createElement( - 'tbody', - null, - rows.map(function (row, i) { - return React__default.createElement( - 'tr', - { key: i }, - row.map(function (column, j) { - return React__default.createElement( - 'td', - { key: j, style: theme.tooltip.tableCell }, - column - ); - }) - ); - }) - ) - ) - ); - } - return React__default.createElement( - 'div', - { style: theme.tooltip.container }, - content - ); - }; - - TableTooltip.propTypes = { - title: PropTypes.node, - rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.node)).isRequired, - theme: PropTypes.shape({ - tooltip: PropTypes.shape({ - container: PropTypes.object.isRequired, - table: PropTypes.object.isRequired, - tableCell: PropTypes.object.isRequired - }).isRequired - }).isRequired, - renderContent: PropTypes.func - }; - - TableTooltip.defaultProps = {}; - - var TableTooltip$1 = pure(TableTooltip); - - /** - * Memoize both color generator & color generator result. - */ - var memoizedColorModifier = memoize(function (method, _amount) { - var amount = parseFloat(_amount); - - return memoize(function (d) { - return d3Color.rgb(d.color)[method](amount) // eslint-disable-line no-unexpected-multiline - .toString(); - }, function (d) { - return d.color; - }); - }, function (method, amount) { - return method + '.' + amount; - }); - - var noneGenerator = function noneGenerator() { - return 'none'; - }; - var inheritGenerator = function inheritGenerator(d) { - return d.color; - }; - - /** - * @param {string|Function} instruction - * @param {string} [themeKey] - * @return {Function} - */ - var getInheritedColorGenerator = function getInheritedColorGenerator(instruction, themeKey) { - if (instruction === 'none') return noneGenerator; - - if (isFunction(instruction)) return instruction; - - if (instruction === 'theme') { - if (!themeKey) { - throw new Error('Cannot use \'theme\' directive without providing \'themeKey\''); - } - - return function (d, theme) { - return get(theme, themeKey); - }; - } - - if (instruction === 'inherit') return inheritGenerator; - - var inheritMatches = instruction.match(/inherit:(darker|brighter)\(([0-9.]+)\)/); - if (inheritMatches) { - var method = inheritMatches[1]; - var amount = inheritMatches[2]; - - return memoizedColorModifier(method, amount); - } - - return function () { - return instruction; - }; - }; - - /** - * Decompose a color for use with react-motion. - * - * @param {string} _color - * @param {Object} [_config] - * @return {Object} - */ - var colorMotionSpring = function colorMotionSpring(_color, _config) { - var color = d3Color.rgb(_color); - - if (!_config) return { - colorR: color.r, - colorG: color.g, - colorB: color.b - }; - - var config = Object.assign({}, _config, { precision: 1 }); - - return { - colorR: reactMotion.spring(color.r, config), - colorG: reactMotion.spring(color.g, config), - colorB: reactMotion.spring(color.b, config) - }; - }; - - /** - * Re-assemble interpolated color components for easy use. - * - * @param {number} colorR - * @param {number} colorG - * @param {number} colorB - * @return {string} - */ - var getInterpolatedColor = function getInterpolatedColor(_ref) { - var colorR = _ref.colorR, - colorG = _ref.colorG, - colorB = _ref.colorB; - return 'rgb(' + Math.round(Math.max(colorR, 0)) + ',' + Math.round(Math.max(colorG, 0)) + ',' + Math.round(Math.max(colorB, 0)) + ')'; - }; - - var quantizeColorScales = { - nivo: ['#d76445', '#f47560', '#e8c1a0', '#97e3d5', '#61cdbb', '#00b0a7'], - - // Diverging - BrBG: last(d3ScaleChromatic.schemeBrBG), - PRGn: last(d3ScaleChromatic.schemePRGn), - PiYG: last(d3ScaleChromatic.schemePiYG), - PuOr: last(d3ScaleChromatic.schemePuOr), - RdBu: last(d3ScaleChromatic.schemeRdBu), - RdGy: last(d3ScaleChromatic.schemeRdGy), - RdYlBu: last(d3ScaleChromatic.schemeRdYlBu), - RdYlGn: last(d3ScaleChromatic.schemeRdYlGn), - spectral: last(d3ScaleChromatic.schemeSpectral), - - // Sequential (Single Hue) - blues: last(d3ScaleChromatic.schemeBlues), - greens: last(d3ScaleChromatic.schemeGreens), - greys: last(d3ScaleChromatic.schemeGreys), - oranges: last(d3ScaleChromatic.schemeOranges), - purples: last(d3ScaleChromatic.schemePurples), - reds: last(d3ScaleChromatic.schemeReds), - - // Sequential (Multi-Hue) - BuGn: last(d3ScaleChromatic.schemeBuGn), - BuPu: last(d3ScaleChromatic.schemeBuPu), - GnBu: last(d3ScaleChromatic.schemeGnBu), - OrRd: last(d3ScaleChromatic.schemeOrRd), - PuBuGn: last(d3ScaleChromatic.schemePuBuGn), - PuBu: last(d3ScaleChromatic.schemePuBu), - PuRd: last(d3ScaleChromatic.schemePuRd), - RdPu: last(d3ScaleChromatic.schemeRdPu), - YlGnBu: last(d3ScaleChromatic.schemeYlGnBu), - YlGn: last(d3ScaleChromatic.schemeYlGn), - YlOrBr: last(d3ScaleChromatic.schemeYlOrBr), - YlOrRd: last(d3ScaleChromatic.schemeYlOrRd) - }; - - var quantizeColorScalesKeys = Object.keys(quantizeColorScales); - - var guessQuantizeColorScale = function guessQuantizeColorScale(colors) { - // colors is already a valid scale - if (isFunction(colors)) { - if (!isFunction(colors.domain)) { - throw new Error('Provided colors should be a valid quantize scale providing a \'domain()\' function'); - } - - return colors; - } - - if (quantizeColorScales[colors]) { - // use predefined d3 quantize color scale - return d3Scale.scaleQuantize().range(quantizeColorScales[colors]); - } - - // user defined colors - if (isArray(colors)) return d3Scale.scaleQuantize().range(colors); - - throw new Error('Unable to guess quantize color scale from \'' + colors + '\',\nmust be a function or one of:\n\'' + quantizeColorScalesKeys.join('\', \'') + '\''); - }; - - // used for ordinal color scales - var colorSchemes = { - nivo: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb', '#97e3d5'], - // categorical - category10: d3ScaleChromatic.schemeCategory10, - accent: d3ScaleChromatic.schemeAccent, - dark2: d3ScaleChromatic.schemeDark2, - paired: d3ScaleChromatic.schemePaired, - pastel1: d3ScaleChromatic.schemePastel1, - pastel2: d3ScaleChromatic.schemePastel2, - set1: d3ScaleChromatic.schemeSet1, - set2: d3ScaleChromatic.schemeSet2, - set3: d3ScaleChromatic.schemeSet3, - // diverging - brown_blueGreen: last(d3ScaleChromatic.schemeBrBG), - purpleRed_green: last(d3ScaleChromatic.schemePRGn), - pink_yellowGreen: last(d3ScaleChromatic.schemePiYG), - purple_orange: last(d3ScaleChromatic.schemePuOr), - red_blue: last(d3ScaleChromatic.schemeRdBu), - red_grey: last(d3ScaleChromatic.schemeRdGy), - red_yellow_blue: last(d3ScaleChromatic.schemeRdYlBu), - red_yellow_green: last(d3ScaleChromatic.schemeRdYlGn), - spectral: last(d3ScaleChromatic.schemeSpectral), - // sequential single hue - blues: last(d3ScaleChromatic.schemeBlues), - greens: last(d3ScaleChromatic.schemeGreens), - greys: last(d3ScaleChromatic.schemeGreys), - oranges: last(d3ScaleChromatic.schemeOranges), - purples: last(d3ScaleChromatic.schemePurples), - reds: last(d3ScaleChromatic.schemeReds), - // sequential multi hue - blue_green: last(d3ScaleChromatic.schemeBuGn), - blue_purple: last(d3ScaleChromatic.schemeBuPu), - green_blue: last(d3ScaleChromatic.schemeGnBu), - orange_red: last(d3ScaleChromatic.schemeOrRd), - purple_blue_green: last(d3ScaleChromatic.schemePuBuGn), - purple_blue: last(d3ScaleChromatic.schemePuBu), - purple_red: last(d3ScaleChromatic.schemePuRd), - red_purple: last(d3ScaleChromatic.schemeRdPu), - yellow_green_blue: last(d3ScaleChromatic.schemeYlGnBu), - yellow_green: last(d3ScaleChromatic.schemeYlGn), - yellow_orange_brown: last(d3ScaleChromatic.schemeYlOrBr), - yellow_orange_red: last(d3ScaleChromatic.schemeYlOrRd) - }; - - var colorSchemeIds = ['nivo', - // categorical - 'category10', 'accent', 'dark2', 'paired', 'pastel1', 'pastel2', 'set1', 'set2', 'set3', - // diverging - 'brown_blueGreen', 'purpleRed_green', 'pink_yellowGreen', 'purple_orange', 'red_blue', 'red_grey', 'red_yellow_blue', 'red_yellow_green', 'spectral', - // sequential single hue - 'blues', 'greens', 'greys', 'oranges', 'purples', 'reds', - // sequential multi hue - 'blue_green', 'blue_purple', 'green_blue', 'orange_red', 'purple_blue_green', 'purple_blue', 'purple_red', 'red_purple', 'yellow_green_blue', 'yellow_green', 'yellow_orange_brown', 'yellow_orange_red']; - - // used for sequential color scales - var colorInterpolators = { - // diverging - brown_blueGreen: d3ScaleChromatic.interpolateBrBG, - purpleRed_green: d3ScaleChromatic.interpolatePRGn, - pink_yellowGreen: d3ScaleChromatic.interpolatePiYG, - purple_orange: d3ScaleChromatic.interpolatePuOr, - red_blue: d3ScaleChromatic.interpolateRdBu, - red_grey: d3ScaleChromatic.interpolateRdGy, - red_yellow_blue: d3ScaleChromatic.interpolateRdYlBu, - red_yellow_green: d3ScaleChromatic.interpolateRdYlGn, - spectral: d3ScaleChromatic.interpolateSpectral, - // sequential single hue - blues: d3ScaleChromatic.interpolateBlues, - greens: d3ScaleChromatic.interpolateGreens, - greys: d3ScaleChromatic.interpolateGreys, - oranges: d3ScaleChromatic.interpolateOranges, - purples: d3ScaleChromatic.interpolatePurples, - reds: d3ScaleChromatic.interpolateReds, - // sequential multi hue - viridis: d3ScaleChromatic.interpolateViridis, - inferno: d3ScaleChromatic.interpolateInferno, - magma: d3ScaleChromatic.interpolateMagma, - plasma: d3ScaleChromatic.interpolatePlasma, - warm: d3ScaleChromatic.interpolateWarm, - cool: d3ScaleChromatic.interpolateCool, - cubehelixDefault: d3ScaleChromatic.interpolateCubehelixDefault, - blue_green: d3ScaleChromatic.interpolateBuGn, - blue_purple: d3ScaleChromatic.interpolateBuPu, - green_blue: d3ScaleChromatic.interpolateGnBu, - orange_red: d3ScaleChromatic.interpolateOrRd, - purple_blue_green: d3ScaleChromatic.interpolatePuBuGn, - purple_blue: d3ScaleChromatic.interpolatePuBu, - purple_red: d3ScaleChromatic.interpolatePuRd, - red_purple: d3ScaleChromatic.interpolateRdPu, - yellow_green_blue: d3ScaleChromatic.interpolateYlGnBu, - yellow_green: d3ScaleChromatic.interpolateYlGn, - yellow_orange_brown: d3ScaleChromatic.interpolateYlOrBr, - yellow_orange_red: d3ScaleChromatic.interpolateYlOrRd, - // cyclical - rainbow: d3ScaleChromatic.interpolateRainbow, - sinebow: d3ScaleChromatic.interpolateSinebow - }; - - var colorInterpolatorIds = [ - // diverging - 'brown_blueGreen', 'purpleRed_green', 'pink_yellowGreen', 'purple_orange', 'red_blue', 'red_grey', 'red_yellow_blue', 'red_yellow_green', 'spectral', - // sequential single hue - 'blues', 'greens', 'greys', 'oranges', 'purples', 'reds', - // sequential multi hue - 'viridis', 'inferno', 'magma', 'plasma', 'warm', 'cool', 'cubehelixDefault', 'blue_green', 'blue_purple', 'green_blue', 'orange_red', 'purple_blue_green', 'purple_blue', 'purple_red', 'red_purple', 'yellow_green_blue', 'yellow_green', 'yellow_orange_brown', 'yellow_orange_red', - // cyclical - 'rainbow', 'sinebow']; - - var ordinalColorScales = { - category10: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10), - accent: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeAccent), - dark2: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeDark2), - paired: d3Scale.scaleOrdinal(d3ScaleChromatic.schemePaired), - pastel1: d3Scale.scaleOrdinal(d3ScaleChromatic.schemePastel1), - pastel2: d3Scale.scaleOrdinal(d3ScaleChromatic.schemePastel2), - set1: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeSet1), - set2: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeSet2), - set3: d3Scale.scaleOrdinal(d3ScaleChromatic.schemeSet3) - }; - - var nivoCategoricalColors = function nivoCategoricalColors() { - return d3Scale.scaleOrdinal(['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb', '#97e3d5']); - }; - - var dataColor = function dataColor(d) { - return d.color || d.data.color; - }; - - var getColorRange = function getColorRange(instruction) { - if (instruction === 'data') return dataColor; - - if (instruction === 'nivo') return nivoCategoricalColors(); - - if (isFunction(instruction)) return instruction; - - if (ordinalColorScales[instruction]) return ordinalColorScales[instruction]; - - if (isArray(instruction)) return d3Scale.scaleOrdinal(instruction); - - return function () { - return instruction; - }; - }; - - var getColorScale = function getColorScale(colors, dataScale) { - if (isString(colors)) { - var scheme = colorSchemes[colors]; - if (scheme !== undefined) { - var scale = d3Scale.scaleOrdinal(scheme); - scale.type = 'ordinal'; - - return scale; - } - - if (dataScale !== undefined && colors.indexOf('seq:') === 0) { - var interpolator = colorInterpolators[colors.slice(4)]; - if (interpolator !== undefined) { - var _scale = d3Scale.scaleSequential(interpolator).domain(dataScale.domain()); - _scale.type = 'sequential'; - - return _scale; - } - } - } - - if (isArray(colors)) { - var _scale2 = d3Scale.scaleOrdinal(colors); - _scale2.type = 'ordinal'; - - return _scale2; - } - - // just use provided value, - // all elements will have identical color - return function () { - return colors; - }; - }; - - var getColorsGenerator = function getColorsGenerator(colors, colorBy) { - // skip range, color should be bound to data - if (isFunction(colorBy)) return colorBy; - - var scale = void 0; - var getColorId = function getColorId(d) { - return get(d, colorBy); - }; - - if (isString(colors) && colorSchemes[colors] !== undefined) { - scale = d3Scale.scaleOrdinal(colorSchemes[colors]); - scale.type = 'ordinal'; - } else if (isArray(colors)) { - // user defined color range - scale = d3Scale.scaleOrdinal(colors); - scale.type = 'ordinal'; - } else { - // just use provided value, - // all elements will have identical color - return function () { - return colors; - }; - } - - var colorGenerator = function colorGenerator(d) { - return scale(getColorId(d)); - }; - colorGenerator.type = scale.type; - - return colorGenerator; - }; - - /** - * This HOC watch colors related props change - * and returns the corresponding color generator function. - * Using it prevent from having a new ref each time - * we pass through the component, useful for shallow comparison. - */ - var withColors = (function () { - var _defaultProps, _setPropTypes; - - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$colorsKey = _ref.colorsKey, - colorsKey = _ref$colorsKey === undefined ? 'colors' : _ref$colorsKey, - _ref$colorByKey = _ref.colorByKey, - colorByKey = _ref$colorByKey === undefined ? 'colorBy' : _ref$colorByKey, - _ref$destKey = _ref.destKey, - destKey = _ref$destKey === undefined ? 'getColor' : _ref$destKey, - _ref$defaultColors = _ref.defaultColors, - defaultColors = _ref$defaultColors === undefined ? 'nivo' : _ref$defaultColors, - _ref$defaultColorBy = _ref.defaultColorBy, - defaultColorBy = _ref$defaultColorBy === undefined ? 'id' : _ref$defaultColorBy; - - return compose(defaultProps((_defaultProps = {}, _defaultProps[colorsKey] = defaultColors, _defaultProps[colorByKey] = defaultColorBy, _defaultProps)), setPropTypes((_setPropTypes = {}, _setPropTypes[colorsKey] = PropTypes.any.isRequired, _setPropTypes[colorByKey] = PropTypes.oneOfType([PropTypes.string, PropTypes.func]), _setPropTypes)), withPropsOnChange([colorsKey, colorByKey], function (props) { - var _ref2; - - return _ref2 = {}, _ref2[destKey] = getColorsGenerator(props[colorsKey], props[colorByKey]), _ref2; - })); - }); - - var quantizeColorScalePropType = PropTypes.oneOfType([PropTypes.oneOf(quantizeColorScalesKeys), PropTypes.func, PropTypes.arrayOf(PropTypes.string)]); - - var curvePropMapping = { - basis: d3Shape.curveBasis, - basisClosed: d3Shape.curveBasisClosed, - basisOpen: d3Shape.curveBasisOpen, - bundle: d3Shape.curveBundle, - cardinal: d3Shape.curveCardinal, - cardinalClosed: d3Shape.curveCardinalClosed, - cardinalOpen: d3Shape.curveCardinalOpen, - catmullRom: d3Shape.curveCatmullRom, - catmullRomClosed: d3Shape.curveCatmullRomClosed, - catmullRomOpen: d3Shape.curveCatmullRomOpen, - linear: d3Shape.curveLinear, - linearClosed: d3Shape.curveLinearClosed, - monotoneX: d3Shape.curveMonotoneX, - monotoneY: d3Shape.curveMonotoneY, - natural: d3Shape.curveNatural, - step: d3Shape.curveStep, - stepAfter: d3Shape.curveStepAfter, - stepBefore: d3Shape.curveStepBefore - }; - - var curvePropKeys = Object.keys(curvePropMapping); - - var curvePropType = PropTypes.oneOf(curvePropKeys); - - var closedCurvePropKeys = curvePropKeys.filter(function (c) { - return c.endsWith('Closed'); - }); - - var closedCurvePropType = PropTypes.oneOf(closedCurvePropKeys); - - // Safe curves to be used with d3 area shape generator - var areaCurvePropKeys = without(curvePropKeys, 'bundle', 'basisClosed', 'basisOpen', 'cardinalClosed', 'cardinalOpen', 'catmullRomClosed', 'catmullRomOpen', 'linearClosed'); - - var areaCurvePropType = PropTypes.oneOf(areaCurvePropKeys); - - // Safe curves to be used with d3 line shape generator - var lineCurvePropKeys = without(curvePropKeys, 'bundle', 'basisClosed', 'basisOpen', 'cardinalClosed', 'cardinalOpen', 'catmullRomClosed', 'catmullRomOpen', 'linearClosed'); - - var lineCurvePropType = PropTypes.oneOf(lineCurvePropKeys); - - /** - * Returns curve interpolator from given identifier. - * - * @param {string} id - Curve interpolator identifier - * @return {Function} - */ - var curveFromProp = function curveFromProp(id) { - var curveInterpolator = curvePropMapping[id]; - if (!curveInterpolator) { - throw new TypeError('\'' + id + '\', is not a valid curve interpolator identifier.'); - } - - return curvePropMapping[id]; - }; - - var defsPropTypes = { - defs: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired - })).isRequired, - fill: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired - })).isRequired - }; - - var stackOrderPropMapping = { - ascending: d3Shape.stackOrderAscending, - descending: d3Shape.stackOrderDescending, - insideOut: d3Shape.stackOrderInsideOut, - none: d3Shape.stackOrderNone, - reverse: d3Shape.stackOrderReverse - }; - - var stackOrderPropKeys = Object.keys(stackOrderPropMapping); - - var stackOrderPropType = PropTypes.oneOf(stackOrderPropKeys); - - var stackOrderFromProp = function stackOrderFromProp(prop) { - return stackOrderPropMapping[prop]; - }; - - var stackOffsetPropMapping = { - expand: d3Shape.stackOffsetExpand, - diverging: d3Shape.stackOffsetDiverging, - none: d3Shape.stackOffsetNone, - silhouette: d3Shape.stackOffsetSilhouette, - wiggle: d3Shape.stackOffsetWiggle - }; - - var stackOffsetPropKeys = Object.keys(stackOffsetPropMapping); - - var stackOffsetPropType = PropTypes.oneOf(stackOffsetPropKeys); - - var stackOffsetFromProp = function stackOffsetFromProp(prop) { - return stackOffsetPropMapping[prop]; - }; - - var treeMapTilePropMapping = { - binary: d3Hierarchy.treemapBinary, - dice: d3Hierarchy.treemapDice, - slice: d3Hierarchy.treemapSlice, - sliceDice: d3Hierarchy.treemapSliceDice, - squarify: d3Hierarchy.treemapSquarify, - resquarify: d3Hierarchy.treemapResquarify - }; - - var treeMapTilePropKeys = Object.keys(treeMapTilePropMapping); - - var treeMapTilePropType = PropTypes.oneOf(treeMapTilePropKeys); - - var treeMapTileFromProp = function treeMapTileFromProp(prop) { - return treeMapTilePropMapping[prop]; - }; - - var scalePropType = PropTypes.shape({ - type: PropTypes.string.isRequired, - domain: PropTypes.array.isRequired, - range: PropTypes.array.isRequired - }); - - var marginPropType = PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number - }).isRequired; - - var motionPropTypes = { - animate: PropTypes.bool.isRequired, - motionStiffness: PropTypes.number.isRequired, - motionDamping: PropTypes.number.isRequired - }; - - /** - * This HOC transform d3 curve interpolation identifier - * to its corresponding interpolator. - */ - var withCurve = (function () { - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$srcKey = _ref.srcKey, - srcKey = _ref$srcKey === undefined ? 'curve' : _ref$srcKey, - _ref$destKey = _ref.destKey, - destKey = _ref$destKey === undefined ? 'curveInterpolator' : _ref$destKey; - - return withProps(function (props) { - var _ref2; - - return _ref2 = {}, _ref2[destKey] = curveFromProp(props[srcKey]), _ref2; - }); - }); - - // motion - var defaultAnimate = true; - var defaultMotionStiffness = 90; - var defaultMotionDamping = 13; - - // colors - var defaultCategoricalColors = nivoCategoricalColors; - var defaultColorRange = d3Scale.scaleOrdinal(d3ScaleChromatic.schemeSet3); - - // margin - var defaultMargin = { - top: 0, - right: 0, - bottom: 0, - left: 0 - }; - - /** - * This HOC watch width, height & margin props change - * and returns new width/height plus outer dimensions. - * Using it prevent from having a new ref each time - * we pass through the component, useful for shallow comparison. - * It also add required propTypes & set default margin. - */ - var withDimensions = (function () { - return compose(defaultProps({ - margin: defaultMargin - }), setPropTypes({ - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - margin: marginPropType - }), withPropsOnChange(function (props, nextProps) { - return props.width !== nextProps.width || props.height !== nextProps.height || !isEqual(props.margin, nextProps.margin); - }, function (props) { - var margin = Object.assign({}, defaultMargin, props.margin); - - return { - margin: margin, - width: props.width - margin.left - margin.right, - height: props.height - margin.top - margin.bottom, - outerWidth: props.width, - outerHeight: props.height - }; - })); - }); - - var getLabelGenerator = function getLabelGenerator(_label, labelFormat) { - var getRawLabel = isFunction(_label) ? _label : function (d) { - return get(d, _label); - }; - var formatter = void 0; - if (labelFormat) { - formatter = isFunction(labelFormat) ? labelFormat : d3Format.format(labelFormat); - } - - if (formatter) return function (d) { - return formatter(getRawLabel(d)); - }; - return getRawLabel; - }; - - var getAccessorFor = function getAccessorFor(directive) { - return isFunction(directive) ? directive : function (d) { - return d[directive]; - }; - }; - - var getAccessorOrValue = function getAccessorOrValue(value) { - return isFunction(value) ? value : function () { - return value; - }; - }; - - /** - * This HOC watch hierarchical data props change - * and returns the corresponding summed hierarchy. - * Using it prevent from having a new ref each time - * we pass through the component, useful for shallow comparison. - */ - var withHierarchy = (function () { - var _defaultProps, _setPropTypes; - - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$srcKey = _ref.srcKey, - srcKey = _ref$srcKey === undefined ? 'root' : _ref$srcKey, - _ref$destKey = _ref.destKey, - destKey = _ref$destKey === undefined ? 'root' : _ref$destKey, - _ref$valueKey = _ref.valueKey, - valueKey = _ref$valueKey === undefined ? 'value' : _ref$valueKey, - _ref$valueDefault = _ref.valueDefault, - valueDefault = _ref$valueDefault === undefined ? 'value' : _ref$valueDefault; - - return compose(defaultProps((_defaultProps = {}, _defaultProps[valueKey] = valueDefault, _defaultProps)), setPropTypes((_setPropTypes = {}, _setPropTypes[srcKey] = PropTypes.object.isRequired, _setPropTypes[valueKey] = PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, _setPropTypes)), withPropsOnChange([srcKey, valueKey], function (props) { - var _ref2; - - return _ref2 = {}, _ref2[destKey] = d3Hierarchy.hierarchy(props[srcKey]).sum(getAccessorFor(props[valueKey])), _ref2; - })); - }); - - var withMotion = (function () { - return compose(setPropTypes(motionPropTypes), defaultProps({ - animate: defaultAnimate, - motionDamping: defaultMotionDamping, - motionStiffness: defaultMotionStiffness - }), withPropsOnChange(['motionDamping', 'motionStiffness'], function (_ref) { - var motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness; - return { - boundSpring: partialRight(reactMotion.spring, { - damping: motionDamping, - stiffness: motionStiffness - }) - }; - })); - }); - - /** - * This HOC watch theme prop change - * and returns it deeply merged with default theme. - * Using it prevent from having a new ref each time - * we pass through the component, useful for shallow comparison. - */ - var withTheme = (function () { - var _setPropTypes; - - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$srcKey = _ref.srcKey, - srcKey = _ref$srcKey === undefined ? 'theme' : _ref$srcKey, - _ref$destKey = _ref.destKey, - destKey = _ref$destKey === undefined ? 'theme' : _ref$destKey; - - return compose(setPropTypes((_setPropTypes = {}, _setPropTypes[srcKey] = PropTypes.object, _setPropTypes)), withPropsOnChange([srcKey], function (props) { - var _ref2; - - return _ref2 = {}, _ref2[destKey] = merge({}, defaultTheme, props[srcKey]), _ref2; - })); - }); - - var horizontalPositions = ['top', 'bottom']; - var verticalPositions = ['left', 'right']; - - /** - * @param {Object} scale - * - * @return {Object} centered scale - */ - var centerScale = function centerScale(scale) { - var bandwidth = scale.bandwidth(); - - if (bandwidth === 0) return scale; - - var offset = bandwidth / 2; - if (scale.round()) { - offset = Math.round(offset); - } - - return function (d) { - return scale(d) + offset; - }; - }; - - /** - * @param {Object} scale - * @param {number} [tickCount] - * - * @return {Array.} - */ - var getScaleValues = function getScaleValues(scale, tickCount) { - if (scale.ticks) return scale.ticks(tickCount); - return scale.domain(); - }; - - /** - * @typedef {Object} AxisTick - * @param {number} x - * @param {number} y - * @param {number} lineX - * @param {number} lineY - * @param {number} textX - * @param {number} textY - */ - - /** - * @param {number} width - * @param {number} height - * @param {string} _position - * @param {Object} scale - * @param {number|Array.} [_tickValues] - * @param {number} [tickSize=5] - * @param {number} [tickPadding=5] - * @param {number} [tickRotation=0] - * @parem {string} [engine='svg'] - * - * @return {{ x: number, y: number, ticks: Array., textAlign: string, textBaseline: string }} - */ - var computeAxisTicks = function computeAxisTicks(_ref) { - var width = _ref.width, - height = _ref.height, - _position = _ref.position, - scale = _ref.scale, - _tickValues = _ref.tickValues, - _ref$tickSize = _ref.tickSize, - tickSize = _ref$tickSize === undefined ? 5 : _ref$tickSize, - _ref$tickPadding = _ref.tickPadding, - tickPadding = _ref$tickPadding === undefined ? 5 : _ref$tickPadding, - _ref$tickRotation = _ref.tickRotation, - tickRotation = _ref$tickRotation === undefined ? 0 : _ref$tickRotation, - _ref$engine = _ref.engine, - engine = _ref$engine === undefined ? 'svg' : _ref$engine; - - var tickValues = isArray(_tickValues) ? _tickValues : undefined; - var tickCount = isNumber(_tickValues) ? _tickValues : undefined; - - var values = tickValues || getScaleValues(scale, tickCount); - - var textProps = textPropsByEngine[engine]; - - var orient = _position; - var position = scale.bandwidth ? centerScale(scale) : scale; - var line = { lineX: 0, lineY: 0 }; - var text = { textX: 0, textY: 0 }; - - var x = 0; - var y = 0; - var translate = void 0; - var textAlign = textProps.align.center; - var textBaseline = textProps.baseline.center; - - if (horizontalPositions.includes(orient)) { - translate = function translate(d) { - return { x: position(d), y: 0 }; - }; - - line.lineY = tickSize * (orient === 'bottom' ? 1 : -1); - text.textY = (tickSize + tickPadding) * (orient === 'bottom' ? 1 : -1); - - if (orient === 'bottom') { - y = height; - textBaseline = textProps.baseline.top; - } else { - textBaseline = textProps.baseline.bottom; - } - - if (tickRotation === 0) { - textAlign = textProps.align.center; - } else if (orient === 'bottom' && tickRotation < 0 || orient === 'top' && tickRotation > 0) { - textAlign = textProps.align.right; - textBaseline = textProps.baseline.center; - } else if (orient === 'bottom' && tickRotation > 0 || orient === 'top' && tickRotation < 0) { - textAlign = textProps.align.left; - textBaseline = textProps.baseline.center; - } - } else if (verticalPositions.includes(orient)) { - translate = function translate(d) { - return { x: 0, y: position(d) }; - }; - - line.lineX = tickSize * (orient === 'right' ? 1 : -1); - text.textX = (tickSize + tickPadding) * (orient === 'right' ? 1 : -1); - - if (orient === 'right') { - x = width; - textAlign = textProps.align.left; - } else { - textAlign = textProps.align.right; - } - } - - var ticks = values.map(function (value) { - return _extends({ - key: value, - value: value - }, translate(value), line, text); - }); - - return { - x: x, - y: y, - ticks: ticks, - textAlign: textAlign, - textBaseline: textBaseline - }; - }; - - /** - * @param {number} width - * @param {number} height - * @param {Object} scale - * @param {string} axis - * - * @return {Array.} - */ - var computeGridLines = function computeGridLines(_ref2) { - var width = _ref2.width, - height = _ref2.height, - scale = _ref2.scale, - axis = _ref2.axis, - _ref2$values = _ref2.values, - values = _ref2$values === undefined ? getScaleValues(scale) : _ref2$values; - - var position = scale.bandwidth ? centerScale(scale) : scale; - - var lines = void 0; - if (axis === 'x') { - lines = values.map(function (v) { - return { - key: '' + v, - x1: position(v), - x2: position(v), - y1: 0, - y2: height - }; - }); - } else if (axis === 'y') { - lines = values.map(function (v) { - return { - key: '' + v, - x1: 0, - x2: width, - y1: position(v), - y2: position(v) - }; - }); - } - - return lines; - }; - - var AxisTick = function (_Component) { - inherits(AxisTick, _Component); - - function AxisTick() { - classCallCheck(this, AxisTick); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - AxisTick.prototype.render = function render() { - var _props = this.props, - _value = _props.value, - x = _props.x, - y = _props.y, - opacity = _props.opacity, - rotate = _props.rotate, - format = _props.format, - lineX = _props.lineX, - lineY = _props.lineY, - _onClick = _props.onClick, - textX = _props.textX, - textY = _props.textY, - textBaseline = _props.textBaseline, - textAnchor = _props.textAnchor, - theme = _props.theme; - - - var value = _value; - if (format !== undefined) { - value = format(value); - } - - var gStyle = { opacity: opacity }; - if (_onClick) { - gStyle['cursor'] = 'pointer'; - } - - return React__default.createElement( - 'g', - _extends({ - transform: 'translate(' + x + ',' + y + ')' - }, _onClick ? { onClick: function onClick(e) { - return _onClick(e, value); - } } : {}, { - style: gStyle - }), - React__default.createElement('line', { x1: 0, x2: lineX, y1: 0, y2: lineY, style: theme.axis.ticks.line }), - React__default.createElement( - 'text', - { - alignmentBaseline: textBaseline, - textAnchor: textAnchor, - transform: 'translate(' + textX + ',' + textY + ') rotate(' + rotate + ')', - style: theme.axis.ticks.text - }, - value - ) - ); - }; - - return AxisTick; - }(React.Component); - - AxisTick.propTypes = { - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - format: PropTypes.func, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - lineX: PropTypes.number.isRequired, - lineY: PropTypes.number.isRequired, - textX: PropTypes.number.isRequired, - textY: PropTypes.number.isRequired, - textBaseline: PropTypes.string.isRequired, - textAnchor: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - rotate: PropTypes.number.isRequired, - onClick: PropTypes.func, - theme: PropTypes.shape({ - axis: axisThemePropType.isRequired - }).isRequired - }; - AxisTick.defaultProps = { - opacity: 1, - rotate: 0 - }; - - var axisPositions = ['top', 'right', 'bottom', 'left']; - var legendPositions = ['start', 'center', 'end']; - - var axisPropType = PropTypes.shape({ - orient: PropTypes.oneOf(axisPositions), - - tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]), - tickSize: PropTypes.number, - tickPadding: PropTypes.number, - tickRotation: PropTypes.number, - format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legend: PropTypes.node, - legendPosition: PropTypes.oneOf(legendPositions), - legendOffset: PropTypes.number - }); - - var willEnter = function willEnter() { - return { - opacity: 0, - x: 0, - y: 0 - }; - }; - - var willLeave = function willLeave(springConfig) { - return function (_ref) { - var _ref$style = _ref.style, - x = _ref$style.x, - y = _ref$style.y; - return { - opacity: reactMotion.spring(0, springConfig), - x: reactMotion.spring(x.val, springConfig), - y: reactMotion.spring(y.val, springConfig) - }; - }; - }; - - var Axis = function Axis(_ref2) { - var scale = _ref2.scale, - width = _ref2.width, - height = _ref2.height, - _position = _ref2.position, - tickValues = _ref2.tickValues, - tickSize = _ref2.tickSize, - tickPadding = _ref2.tickPadding, - tickRotation = _ref2.tickRotation, - format = _ref2.format, - _legend = _ref2.legend, - legendPosition = _ref2.legendPosition, - legendOffset = _ref2.legendOffset, - theme = _ref2.theme, - animate = _ref2.animate, - motionStiffness = _ref2.motionStiffness, - motionDamping = _ref2.motionDamping, - onClick = _ref2.onClick; - - var _computeAxisTicks = computeAxisTicks({ - width: width, - height: height, - scale: scale, - position: _position, - tickValues: tickValues, - tickSize: tickSize, - tickPadding: tickPadding, - tickRotation: tickRotation - }), - x = _computeAxisTicks.x, - y = _computeAxisTicks.y, - ticks = _computeAxisTicks.ticks, - textAlign = _computeAxisTicks.textAlign, - textBaseline = _computeAxisTicks.textBaseline; - - var isHorizontal = ['top', 'bottom'].includes(_position); - var isVertical = !isHorizontal; - - var legend = null; - if (_legend !== undefined) { - var legendX = 0; - var legendY = 0; - var legendRotation = 0; - var textAnchor = void 0; - - if (isVertical) { - legendRotation = -90; - legendX = legendOffset; - if (legendPosition === 'start') { - textAnchor = 'start'; - legendY = height; - } else if (legendPosition === 'center') { - textAnchor = 'middle'; - legendY = height / 2; - } else if (legendPosition === 'end') { - textAnchor = 'end'; - } - } else { - legendY = legendOffset; - if (legendPosition === 'start') { - textAnchor = 'start'; - } else if (legendPosition === 'center') { - textAnchor = 'middle'; - legendX = width / 2; - } else if (legendPosition === 'end') { - textAnchor = 'end'; - legendX = width; - } - } - - legend = React__default.createElement( - 'text', - { - transform: 'translate(' + legendX + ', ' + legendY + ') rotate(' + legendRotation + ')', - textAnchor: textAnchor, - style: theme.axis.legend.text - }, - _legend - ); - } - - var tickElements = void 0; - if (!animate) { - tickElements = React__default.createElement( - 'g', - null, - ticks.map(function (tick) { - return React__default.createElement(AxisTick, _extends({ - key: tick.key, - value: tick.key, - format: format, - lineX: tick.lineX, - lineY: tick.lineY, - rotate: tickRotation, - textX: tick.textX, - textY: tick.textY, - textBaseline: textBaseline, - textAnchor: textAlign, - theme: theme, - x: tick.x, - y: tick.y - }, onClick ? { onClick: onClick } : {})); - }) - ); - } else { - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - tickElements = React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: willEnter, - willLeave: willLeave(springConfig), - styles: ticks.map(function (tick) { - return { - key: '' + tick.key, - data: tick, - style: { - opacity: reactMotion.spring(1, springConfig), - x: reactMotion.spring(tick.x, springConfig), - y: reactMotion.spring(tick.y, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref3) { - var key = _ref3.key, - style = _ref3.style, - tick = _ref3.data; - return React__default.createElement(AxisTick, _extends({ - key: key, - value: key, - format: format, - lineX: tick.lineX, - lineY: tick.lineY, - rotate: tickRotation, - textX: tick.textX, - textY: tick.textY, - textBaseline: textBaseline, - textAnchor: textAlign, - theme: theme - }, onClick ? { onClick: onClick } : {}, style)); - }) - ); - } - ); - } - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - legend, - tickElements, - React__default.createElement('line', { - style: theme.axis.domain.line, - x1: 0, - x2: isHorizontal ? width : 0, - y1: 0, - y2: isHorizontal ? 0 : height - }) - ); - }; - - Axis.propTypes = _extends({ - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - position: PropTypes.oneOf(axisPositions).isRequired, - scale: PropTypes.func.isRequired, - - tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]), - tickSize: PropTypes.number.isRequired, - tickPadding: PropTypes.number.isRequired, - tickRotation: PropTypes.number.isRequired, - format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legend: PropTypes.node, - legendPosition: PropTypes.oneOf(legendPositions).isRequired, - legendOffset: PropTypes.number.isRequired, - - theme: PropTypes.shape({ - axis: axisThemePropType.isRequired - }).isRequired, - - onClick: PropTypes.func - - }, motionPropTypes); - - Axis.defaultProps = { - tickSize: 5, - tickPadding: 5, - tickRotation: 0, - - legendPosition: 'end', - legendOffset: 0 - }; - - var enhance$1 = compose(withMotion(), withPropsOnChange(['format', 'scale'], function (_ref4) { - var format = _ref4.format, - scale = _ref4.scale; - - if (!format || isFunction(format)) { - return { format: format }; - } else if (scale.type === 'time') { - var f = d3TimeFormat.timeFormat(format); - return { format: function format(d) { - return f(new Date(d)); - } }; - } else { - return { format: d3Format.format(format) }; - } - }), pure); - - var Axis$1 = enhance$1(Axis); - - var horizontalPositions$1 = ['top', 'bottom']; - var verticalPositions$1 = ['left', 'right']; - var positions = [].concat(horizontalPositions$1, verticalPositions$1); - - var Axes = function Axes(_ref) { - var xScale = _ref.xScale, - yScale = _ref.yScale, - width = _ref.width, - height = _ref.height, - top = _ref.top, - right = _ref.right, - bottom = _ref.bottom, - left = _ref.left, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var axes = { top: top, right: right, bottom: bottom, left: left }; - - return React__default.createElement( - 'g', - null, - positions.map(function (position) { - var axis = axes[position]; - - if (!axis) return null; - - var scale = horizontalPositions$1.includes(position) ? xScale : yScale; - - return React__default.createElement(Axis$1, _extends({ - theme: theme - }, axis, { - key: position, - width: width, - height: height, - position: position, - scale: scale, - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - })); - }) - ); - }; - - Axes.propTypes = _extends({ - xScale: PropTypes.func.isRequired, - yScale: PropTypes.func.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - top: axisPropType, - right: axisPropType, - bottom: axisPropType, - left: axisPropType, - - theme: PropTypes.shape({ - axis: axisThemePropType.isRequired - }).isRequired - - }, motionPropTypes); - - var Axes$1 = shouldUpdate(function (props, nextProps) { - return props.xScale !== nextProps.xScale || props.yScale !== nextProps.yScale || props.width !== nextProps.width || props.height !== nextProps.height || props.theme !== nextProps.theme || props.animate !== nextProps.animate || props.motionDamping !== nextProps.motionDamping || props.motionStiffness !== nextProps.motionStiffness || !isEqual(props.top, nextProps.top) || !isEqual(props.right, nextProps.right) || !isEqual(props.bottom, nextProps.bottom) || !isEqual(props.left, nextProps.left); - })(Axes); - - var GridLine = function GridLine(props) { - return React__default.createElement('line', props); - }; - - GridLine.propTypes = { - x1: PropTypes.number.isRequired, - x2: PropTypes.number.isRequired, - y1: PropTypes.number.isRequired, - y2: PropTypes.number.isRequired - }; - - GridLine.defaultProps = { - x1: 0, - x2: 0, - y1: 0, - y2: 0 - }; - - var GridLines = function (_Component) { - inherits(GridLines, _Component); - - function GridLines(props) { - classCallCheck(this, GridLines); - - var _this = possibleConstructorReturn(this, _Component.call(this, props)); - - _this.willEnter = _this.willEnter.bind(_this); - _this.willLeave = _this.willLeave.bind(_this); - return _this; - } - - GridLines.prototype.willEnter = function willEnter(_ref) { - var style = _ref.style; - var type = this.props.type; - - - return { - opacity: 0, - x1: type === 'x' ? 0 : style.x1.val, - x2: type === 'x' ? 0 : style.x2.val, - y1: type === 'y' ? 0 : style.y1.val, - y2: type === 'y' ? 0 : style.y2.val - }; - }; - - GridLines.prototype.willLeave = function willLeave(_ref2) { - var style = _ref2.style; - var _props = this.props, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return { - opacity: reactMotion.spring(0, springConfig), - x1: reactMotion.spring(style.x1.val, springConfig), - x2: reactMotion.spring(style.x2.val, springConfig), - y1: reactMotion.spring(style.y1.val, springConfig), - y2: reactMotion.spring(style.y2.val, springConfig) - }; - }; - - GridLines.prototype.render = function render() { - var _props2 = this.props, - lines = _props2.lines, - animate = _props2.animate, - motionStiffness = _props2.motionStiffness, - motionDamping = _props2.motionDamping, - theme = _props2.theme; - - - if (!animate) { - return React__default.createElement( - 'g', - null, - lines.map(function (line) { - return React__default.createElement(GridLine, _extends({ key: line.key }, line, theme.grid.line)); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: this.willEnter, - willLeave: this.willLeave, - styles: lines.map(function (line) { - return { - key: line.key, - style: { - opacity: reactMotion.spring(1, springConfig), - x1: reactMotion.spring(line.x1 || 0, springConfig), - x2: reactMotion.spring(line.x2 || 0, springConfig), - y1: reactMotion.spring(line.y1 || 0, springConfig), - y2: reactMotion.spring(line.y2 || 0, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (interpolatedStyle) { - var key = interpolatedStyle.key, - style = interpolatedStyle.style; - - - return React__default.createElement(GridLine, _extends({ key: key }, theme.grid.line, style)); - }) - ); - } - ); - }; - - return GridLines; - }(React.Component); - - GridLines.propTypes = { - type: PropTypes.oneOf(['x', 'y']).isRequired, - lines: PropTypes.arrayOf(PropTypes.shape({ - key: PropTypes.string.isRequired, - x1: PropTypes.number, - x2: PropTypes.number, - y1: PropTypes.number, - y2: PropTypes.number - })).isRequired, - theme: PropTypes.object.isRequired, - // motion - animate: PropTypes.bool.isRequired, - motionStiffness: PropTypes.number.isRequired, - motionDamping: PropTypes.number.isRequired - }; - - var Grid = function Grid(_ref) { - var width = _ref.width, - height = _ref.height, - xScale = _ref.xScale, - yScale = _ref.yScale, - xValues = _ref.xValues, - yValues = _ref.yValues, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var xLines = xScale ? computeGridLines({ - width: width, - height: height, - scale: xScale, - axis: 'x', - values: xValues - }) : false; - - var yLines = yScale ? computeGridLines({ - width: width, - height: height, - scale: yScale, - axis: 'y', - values: yValues - }) : false; - - return React__default.createElement( - 'g', - null, - xLines && React__default.createElement(GridLines, { - type: 'x', - lines: xLines, - theme: theme, - animate: animate, - motionStiffness: motionStiffness, - motionDamping: motionDamping - }), - yLines && React__default.createElement(GridLines, { - type: 'y', - lines: yLines, - theme: theme, - animate: animate, - motionStiffness: motionStiffness, - motionDamping: motionDamping - }) - ); - }; - - Grid.propTypes = _extends({ - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - xScale: PropTypes.func, - yScale: PropTypes.func, - xValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), - yValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), - - theme: PropTypes.object.isRequired - - }, motionPropTypes); - - Grid.defaultProps = { - // motion - animate: true, - motionStiffness: defaultMotionStiffness, - motionDamping: defaultMotionDamping - }; - - var Grid$1 = pure(Grid); - - /** - * - * @param {string} axis - * @param {number} width - * @param {number} height - * @param {string} position - * @param {number} offsetX - * @param {number} offsetY - * @param {string} orientation - * @return {{ x: number, y: number, textAnchor: string }} - */ - var computeLabel = function computeLabel(_ref) { - var axis = _ref.axis, - width = _ref.width, - height = _ref.height, - position = _ref.position, - offsetX = _ref.offsetX, - offsetY = _ref.offsetY, - orientation = _ref.orientation; - - var x = 0; - var y = 0; - var rotation = orientation === 'vertical' ? -90 : 0; - var textAnchor = 'start'; - - if (axis === 'x') { - switch (position) { - case 'top-left': - x = -offsetX; - y = offsetY; - textAnchor = 'end'; - break; - case 'top': - y = -offsetY; - if (orientation === 'horizontal') { - textAnchor = 'middle'; - } else { - textAnchor = 'start'; - } - break; - case 'top-right': - x = offsetX; - y = offsetY; - if (orientation === 'horizontal') { - textAnchor = 'start'; - } else { - textAnchor = 'end'; - } - break; - case 'right': - x = offsetX; - y = height / 2; - if (orientation === 'horizontal') { - textAnchor = 'start'; - } else { - textAnchor = 'middle'; - } - break; - case 'bottom-right': - x = offsetX; - y = height - offsetY; - textAnchor = 'start'; - break; - case 'bottom': - y = height + offsetY; - if (orientation === 'horizontal') { - textAnchor = 'middle'; - } else { - textAnchor = 'end'; - } - break; - case 'bottom-left': - y = height - offsetY; - x = -offsetX; - if (orientation === 'horizontal') { - textAnchor = 'end'; - } else { - textAnchor = 'start'; - } - break; - case 'left': - x = -offsetX; - y = height / 2; - if (orientation === 'horizontal') { - textAnchor = 'end'; - } else { - textAnchor = 'middle'; - } - break; - } - } else { - switch (position) { - case 'top-left': - x = offsetX; - y = -offsetY; - textAnchor = 'start'; - break; - case 'top': - x = width / 2; - y = -offsetY; - if (orientation === 'horizontal') { - textAnchor = 'middle'; - } else { - textAnchor = 'start'; - } - break; - case 'top-right': - x = width - offsetX; - y = -offsetY; - if (orientation === 'horizontal') { - textAnchor = 'end'; - } else { - textAnchor = 'start'; - } - break; - case 'right': - x = width + offsetX; - if (orientation === 'horizontal') { - textAnchor = 'start'; - } else { - textAnchor = 'middle'; - } - break; - case 'bottom-right': - x = width - offsetX; - y = offsetY; - textAnchor = 'end'; - break; - case 'bottom': - x = width / 2; - y = offsetY; - if (orientation === 'horizontal') { - textAnchor = 'middle'; - } else { - textAnchor = 'end'; - } - break; - case 'bottom-left': - x = offsetX; - y = offsetY; - if (orientation === 'horizontal') { - textAnchor = 'start'; - } else { - textAnchor = 'end'; - } - break; - case 'left': - x = -offsetX; - if (orientation === 'horizontal') { - textAnchor = 'end'; - } else { - textAnchor = 'middle'; - } - break; - } - } - - return { x: x, y: y, rotation: rotation, textAnchor: textAnchor }; - }; - - var CartesianMarkersItem = function CartesianMarkersItem(_ref2) { - var width = _ref2.width, - height = _ref2.height, - axis = _ref2.axis, - scale = _ref2.scale, - value = _ref2.value, - theme = _ref2.theme, - lineStyle = _ref2.lineStyle, - textStyle = _ref2.textStyle, - legend = _ref2.legend, - legendPosition = _ref2.legendPosition, - legendOffsetX = _ref2.legendOffsetX, - legendOffsetY = _ref2.legendOffsetY, - legendOrientation = _ref2.legendOrientation; - - var x = 0; - var x2 = 0; - var y = 0; - var y2 = 0; - - if (axis === 'y') { - y = scale(value); - x2 = width; - } else { - x = scale(value); - y2 = height; - } - - var legendNode = null; - if (legend) { - var legendProps = computeLabel({ - axis: axis, - width: width, - height: height, - position: legendPosition, - offsetX: legendOffsetX, - offsetY: legendOffsetY, - orientation: legendOrientation - }); - legendNode = React__default.createElement( - 'text', - { - transform: 'translate(' + legendProps.x + ', ' + legendProps.y + ') rotate(' + legendProps.rotation + ')', - textAnchor: legendProps.textAnchor, - alignmentBaseline: 'central', - style: textStyle - }, - legend - ); - } - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ', ' + y + ')' }, - React__default.createElement('line', { - x1: 0, - x2: x2, - y1: 0, - y2: y2, - stroke: theme.markers.lineColor, - strokeWidth: theme.markers.lineStrokeWidth, - style: lineStyle - }), - legendNode - ); - }; - - CartesianMarkersItem.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - axis: PropTypes.oneOf(['x', 'y']).isRequired, - scale: PropTypes.func.isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - lineStyle: PropTypes.object, - textStyle: PropTypes.object, - - legend: PropTypes.string, - legendPosition: PropTypes.oneOf(['top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left']), - legendOffsetX: PropTypes.number.isRequired, - legendOffsetY: PropTypes.number.isRequired, - legendOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - - theme: PropTypes.shape({ - markers: PropTypes.shape({ - textColor: PropTypes.string.isRequired, - fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired - }).isRequired - }).isRequired - }; - - CartesianMarkersItem.defaultProps = { - legendPosition: 'top-right', - legendOffsetX: 14, - legendOffsetY: 14, - legendOrientation: 'horizontal' - }; - - var CartesianMarkersItem$1 = pure(CartesianMarkersItem); - - var CartesianMarkers = function CartesianMarkers(_ref) { - var markers = _ref.markers, - width = _ref.width, - height = _ref.height, - xScale = _ref.xScale, - yScale = _ref.yScale, - theme = _ref.theme; - - if (!markers || markers.length === 0) return null; - - return React__default.createElement( - 'g', - null, - markers.map(function (marker, i) { - return React__default.createElement(CartesianMarkersItem$1, _extends({ - key: i - }, marker, { - width: width, - height: height, - scale: marker.axis === 'y' ? yScale : xScale, - theme: theme - })); - }) - ); - }; - - CartesianMarkers.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - xScale: PropTypes.func.isRequired, - yScale: PropTypes.func.isRequired, - - theme: PropTypes.shape({ - markers: PropTypes.shape({ - lineColor: PropTypes.string.isRequired, - lineStrokeWidth: PropTypes.number.isRequired, - textColor: PropTypes.string.isRequired, - fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired - }).isRequired - }).isRequired, - - markers: PropTypes.arrayOf(PropTypes.shape({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - style: PropTypes.object - })) - }; - - var CartesianMarkers$1 = pure(CartesianMarkers); - - /** - * Computes distance between two points. - * - * @param {number} x1 - * @param {number} y1 - * @param {number} x2 - * @param {number} y2 - * @return {number} - */ - var getDistance = function getDistance(x1, y1, x2, y2) { - var deltaX = x2 - x1; - var deltaY = y2 - y1; - - deltaX *= deltaX; - deltaY *= deltaY; - - return Math.sqrt(deltaX + deltaY); - }; - - /** - * Computes angle (radians) between two points. - * - * @param {number} x1 - * @param {number} y1 - * @param {number} x2 - * @param {number} y2 - * @return {number} - */ - var getAngle = function getAngle(x1, y1, x2, y2) { - var angle = Math.atan2(y2 - y1, x2 - x1) - Math.PI / 2; - - return angle > 0 ? angle : Math.PI * 2 + angle; - }; - - /** - * Check if cursor is in given rectangle. - * - * @param {number} x - * @param {number} y - * @param {number} width - * @param {number} height - * @param {number} cursorX - * @param {number} cursorY - * @return {boolean} - */ - var isCursorInRect = function isCursorInRect(x, y, width, height, cursorX, cursorY) { - return x <= cursorX && cursorX <= x + width && y <= cursorY && cursorY <= y + height; - }; - - /** - * Check if cursor is in given ring. - * - * @param {number} centerX - * @param {number} centerY - * @param {number} radius - * @param {number} innerRadius - * @param {number} cursorX - * @param {number} cursorY - * @return {boolean} - */ - var isCursorInRing = function isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY) { - var distance = getDistance(cursorX, cursorY, centerX, centerY); - - return distance < radius && distance > innerRadius; - }; - - /** - * Search for an arc being under cursor. - * - * @param {number} centerX - * @param {number} centerY - * @param {number} radius - * @param {number} innerRadius - * @param {Array.} arcs - * @param {number} cursorX - * @param {number} cursorY - * @return {*} - */ - var getHoveredArc = function getHoveredArc(centerX, centerY, radius, innerRadius, arcs, cursorX, cursorY) { - if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) return null; - - var cursorAngle = getAngle(cursorX, cursorY, centerX, centerY); - - return arcs.find(function (_ref) { - var startAngle = _ref.startAngle, - endAngle = _ref.endAngle; - return cursorAngle >= startAngle && cursorAngle < endAngle; - }); - }; - - var getRelativeCursor = function getRelativeCursor(el, event) { - var clientX = event.clientX, - clientY = event.clientY; - - var bounds = el.getBoundingClientRect(); - - return [clientX - bounds.left, clientY - bounds.top]; - }; - - var horizontalPositions$2 = ['top', 'bottom']; - var positions$1 = ['top', 'right', 'bottom', 'left']; - - var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) { - var width = _ref.width, - height = _ref.height, - position = _ref.position, - scale = _ref.scale, - _ref$tickSize = _ref.tickSize, - tickSize = _ref$tickSize === undefined ? 5 : _ref$tickSize, - _ref$tickPadding = _ref.tickPadding, - tickPadding = _ref$tickPadding === undefined ? 5 : _ref$tickPadding, - _ref$tickRotation = _ref.tickRotation, - tickRotation = _ref$tickRotation === undefined ? 0 : _ref$tickRotation, - format = _ref.format, - theme = _ref.theme; - - var _computeAxisTicks = computeAxisTicks({ - width: width, - height: height, - position: position, - scale: scale, - tickSize: tickSize, - tickPadding: tickPadding, - tickRotation: tickRotation, - engine: 'canvas' - }), - x = _computeAxisTicks.x, - y = _computeAxisTicks.y, - ticks = _computeAxisTicks.ticks, - textAlign = _computeAxisTicks.textAlign, - textBaseline = _computeAxisTicks.textBaseline; - - ctx.save(); - ctx.translate(x, y); - ctx.textAlign = textAlign; - ctx.textBaseline = textBaseline; - ctx.font = theme.axis.ticks.text.fontSize + 'px sans-serif'; - - ticks.forEach(function (tick) { - ctx.lineWidth = theme.axis.ticks.line.strokeWidth; - ctx.strokeStyle = theme.axis.ticks.line.stroke; - ctx.beginPath(); - ctx.moveTo(tick.x, tick.y); - ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY); - ctx.stroke(); - - var value = format !== undefined ? format(tick.value) : tick.value; - - ctx.save(); - ctx.translate(tick.x + tick.textX, tick.y + tick.textY); - ctx.rotate(degreesToRadians(tickRotation)); - ctx.fillStyle = theme.axis.ticks.text.fill; - ctx.fillText(value, 0, 0); - ctx.restore(); - }); - - ctx.restore(); - }; - - var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) { - var xScale = _ref2.xScale, - yScale = _ref2.yScale, - width = _ref2.width, - height = _ref2.height, - top = _ref2.top, - right = _ref2.right, - bottom = _ref2.bottom, - left = _ref2.left, - theme = _ref2.theme; - - var axes = { top: top, right: right, bottom: bottom, left: left }; - - positions$1.map(function (position) { - if (!axes[position]) return null; - - var axis = axes[position]; - var scale = horizontalPositions$2.includes(position) ? xScale : yScale; - - renderAxisToCanvas(ctx, _extends({}, axis, { - width: width, - height: height, - position: position, - scale: scale, - theme: theme - })); - }); - }; - - /** - * @param {CanvasRenderingContext2D} ctx - * @param {number} width - * @param {number} height - * @param {number} scale - * @param {('x'|'y')} axis - */ - var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) { - var width = _ref3.width, - height = _ref3.height, - scale = _ref3.scale, - axis = _ref3.axis; - - var lines = computeGridLines({ width: width, height: height, scale: scale, axis: axis }); - - lines.forEach(function (line) { - ctx.beginPath(); - ctx.moveTo(line.x1, line.y1); - ctx.lineTo(line.x2, line.y2); - ctx.stroke(); - }); - }; - - var gradientKeys = Object.keys(gradientTypes); - var patternKeys = Object.keys(patternTypes); - - /** - * Check a node matches given def predicate. - * - * @param {string|Function|Object} predicate - * @param {Object} node - * @param {string} [dataKey] - Optional path to access node data - * @returns {boolean} - */ - var isMatchingDef = function isMatchingDef(predicate, node, dataKey) { - if (predicate === '*') { - return true; - } else if (isFunction(predicate)) { - return predicate(node); - } else if (isPlainObject(predicate)) { - var data = dataKey ? get(node, dataKey) : node; - return isEqual(pick(data, Object.keys(predicate)), predicate); - } - - return false; - }; - - /** - * Compute SVG defs. - * - * @param {Array.} defs - Base SVG defs configs - * @param {Array.} nodes - Data nodes to apply defs on - * @param {Array.} rules - Rules used to conditionally apply defs on data nodes - * @param {string} [dataKey] - Path to node data, used for rule object query based predicate - * @param {string} [colorKey='color'] - Node color path, required when inheritance is involved - * @param {string} [targetKey='fill'] - Node target property to apply def ID on - * @returns {Array} - */ - var bindDefs = function bindDefs(defs, nodes, rules) { - var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, - dataKey = _ref.dataKey, - _ref$colorKey = _ref.colorKey, - colorKey = _ref$colorKey === undefined ? 'color' : _ref$colorKey, - _ref$targetKey = _ref.targetKey, - targetKey = _ref$targetKey === undefined ? 'fill' : _ref$targetKey; - - var boundDefs = []; - - // will hold generated variation ids, - // to avoid generating multiple identical defs - var generatedIds = {}; - - if (defs.length && nodes.length) { - // first, add base defs - boundDefs = [].concat(defs); - - nodes.forEach(function (node) { - var _loop = function _loop(i) { - var _rules$i = rules[i], - id = _rules$i.id, - match = _rules$i.match; - - if (isMatchingDef(match, node, dataKey)) { - var def = defs.find(function (_ref2) { - var defId = _ref2.id; - return defId === id; - }); - if (def) { - if (patternKeys.includes(def.type)) { - if (def.background === 'inherit' || def.color === 'inherit') { - var nodeColor = get(node, colorKey); - var background = def.background; - var color = def.color; - - var inheritedId = id; - if (def.background === 'inherit') { - inheritedId = inheritedId + '.bg.' + nodeColor; - background = nodeColor; - } - if (def.color === 'inherit') { - inheritedId = inheritedId + '.fg.' + nodeColor; - color = nodeColor; - } - - set(node, targetKey, 'url(#' + inheritedId + ')'); - if (!generatedIds[inheritedId]) { - boundDefs.push(_extends({}, def, { - id: inheritedId, - background: background, - color: color - })); - generatedIds[inheritedId] = 1; - } - } else { - // do not generate new def as there's no inheritance involved - set(node, targetKey, 'url(#' + id + ')'); - } - } else if (gradientKeys.includes(def.type)) { - var allColors = def.colors.map(function (_ref3) { - var color = _ref3.color; - return color; - }); - - if (allColors.includes('inherit')) { - var _nodeColor = get(node, colorKey); - - var _inheritedId = id; - var inheritedDef = _extends({}, def, { - colors: def.colors.map(function (colorStop, i) { - if (colorStop.color !== 'inherit') return colorStop; - - _inheritedId = _inheritedId + '.' + i + '.' + _nodeColor; - - return _extends({}, colorStop, { - color: colorStop.color === 'inherit' ? _nodeColor : colorStop.color - }); - }) - }); - inheritedDef.id = _inheritedId; - - set(node, targetKey, 'url(#' + _inheritedId + ')'); - if (!generatedIds[_inheritedId]) { - boundDefs.push(inheritedDef); - generatedIds[_inheritedId] = 1; - } - } else { - // do not generate new def as there's no inheritance involved - set(node, targetKey, 'url(#' + id + ')'); - } - } - } - - // break loop on first match - return 'break'; - } - }; - - for (var i = 0; i < rules.length; i++) { - var _ret = _loop(i); - - if (_ret === 'break') break; - } - }); - } - - return boundDefs; - }; - - exports.Container = Container; - exports.ResponsiveWrapper = ResponsiveWrapper; - exports.SvgWrapper = SvgWrapper; - exports.SmartMotion = SmartMotion; - exports.noop = noop; - exports.DotsItem = DotsItem$1; - exports.DotsItemDefaultProps = DotsItemDefaultProps; - exports.gradientTypes = gradientTypes; - exports.LinearGradient = LinearGradient; - exports.linearGradientDef = linearGradientDef; - exports.patternTypes = patternTypes; - exports.PatternDots = PatternDots; - exports.patternDotsDef = patternDotsDef; - exports.PatternLines = PatternLines; - exports.patternLinesDef = patternLinesDef; - exports.PatternSquares = PatternSquares; - exports.patternSquaresDef = patternSquaresDef; - exports.defsMapping = defsMapping; - exports.Defs = Defs; - exports.BasicTooltip = BasicTooltip$1; - exports.Chip = Chip$1; - exports.TableTooltip = TableTooltip$1; - exports.Axis = Axis$1; - exports.Axes = Axes$1; - exports.Grid = Grid$1; - exports.CartesianMarkers = CartesianMarkers$1; - exports.CartesianMarkersItem = CartesianMarkersItem$1; - exports.withColors = withColors; - exports.withCurve = withCurve; - exports.withDimensions = withDimensions; - exports.withHierarchy = withHierarchy; - exports.withMotion = withMotion; - exports.withTheme = withTheme; - exports.getLabelGenerator = getLabelGenerator; - exports.getAccessorFor = getAccessorFor; - exports.getAccessorOrValue = getAccessorOrValue; - exports.scalePropType = scalePropType; - exports.marginPropType = marginPropType; - exports.motionPropTypes = motionPropTypes; - exports.quantizeColorScalePropType = quantizeColorScalePropType; - exports.curvePropMapping = curvePropMapping; - exports.curvePropKeys = curvePropKeys; - exports.curvePropType = curvePropType; - exports.closedCurvePropKeys = closedCurvePropKeys; - exports.closedCurvePropType = closedCurvePropType; - exports.areaCurvePropKeys = areaCurvePropKeys; - exports.areaCurvePropType = areaCurvePropType; - exports.lineCurvePropKeys = lineCurvePropKeys; - exports.lineCurvePropType = lineCurvePropType; - exports.curveFromProp = curveFromProp; - exports.defsPropTypes = defsPropTypes; - exports.stackOrderPropMapping = stackOrderPropMapping; - exports.stackOrderPropKeys = stackOrderPropKeys; - exports.stackOrderPropType = stackOrderPropType; - exports.stackOrderFromProp = stackOrderFromProp; - exports.stackOffsetPropMapping = stackOffsetPropMapping; - exports.stackOffsetPropKeys = stackOffsetPropKeys; - exports.stackOffsetPropType = stackOffsetPropType; - exports.stackOffsetFromProp = stackOffsetFromProp; - exports.treeMapTilePropMapping = treeMapTilePropMapping; - exports.treeMapTilePropKeys = treeMapTilePropKeys; - exports.treeMapTilePropType = treeMapTilePropType; - exports.treeMapTileFromProp = treeMapTileFromProp; - exports.colorSchemes = colorSchemes; - exports.colorSchemeIds = colorSchemeIds; - exports.colorInterpolators = colorInterpolators; - exports.colorInterpolatorIds = colorInterpolatorIds; - exports.nivoCategoricalColors = nivoCategoricalColors; - exports.getColorRange = getColorRange; - exports.getColorScale = getColorScale; - exports.getColorsGenerator = getColorsGenerator; - exports.getInheritedColorGenerator = getInheritedColorGenerator; - exports.colorMotionSpring = colorMotionSpring; - exports.getInterpolatedColor = getInterpolatedColor; - exports.quantizeColorScales = quantizeColorScales; - exports.quantizeColorScalesKeys = quantizeColorScalesKeys; - exports.guessQuantizeColorScale = guessQuantizeColorScale; - exports.TWO_PI = TWO_PI; - exports.degreesToRadians = degreesToRadians; - exports.radiansToDegrees = radiansToDegrees; - exports.midAngle = midAngle; - exports.positionFromAngle = positionFromAngle; - exports.absoluteAngleDegrees = absoluteAngleDegrees; - exports.absoluteAngleRadians = absoluteAngleRadians; - exports.computeArcBoundingBox = computeArcBoundingBox; - exports.getPolarLabelProps = getPolarLabelProps; - exports.getRelativeCursor = getRelativeCursor; - exports.getDistance = getDistance; - exports.getAngle = getAngle; - exports.isCursorInRect = isCursorInRect; - exports.isCursorInRing = isCursorInRing; - exports.getHoveredArc = getHoveredArc; - exports.renderAxisToCanvas = renderAxisToCanvas; - exports.renderAxesToCanvas = renderAxesToCanvas; - exports.renderGridLinesToCanvas = renderGridLinesToCanvas; - exports.isMatchingDef = isMatchingDef; - exports.bindDefs = bindDefs; - exports.textPropsByEngine = textPropsByEngine; - exports.axisThemePropType = axisThemePropType; - exports.gridThemePropType = gridThemePropType; - exports.legendsThemePropType = legendsThemePropType; - exports.labelsThemePropType = labelsThemePropType; - exports.dotsThemePropType = dotsThemePropType; - exports.themePropType = themePropType; - exports.defaultTheme = defaultTheme; - exports.defaultAnimate = defaultAnimate; - exports.defaultMotionStiffness = defaultMotionStiffness; - exports.defaultMotionDamping = defaultMotionDamping; - exports.defaultCategoricalColors = defaultCategoricalColors; - exports.defaultColorRange = defaultColorRange; - exports.defaultMargin = defaultMargin; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/generators/umd/nivo-generators.js b/packages/generators/umd/nivo-generators.js deleted file mode 100644 index 843dae7ff..000000000 --- a/packages/generators/umd/nivo-generators.js +++ /dev/null @@ -1,434 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/range'), require('lodash/random'), require('lodash/shuffle'), require('d3-time'), require('d3-time-format')) : - typeof define === 'function' && define.amd ? define(['exports', 'lodash/range', 'lodash/random', 'lodash/shuffle', 'd3-time', 'd3-time-format'], factory) : - (factory((global.nivo = global.nivo || {}),global['lodash/range'],global['lodash/random'],global['lodash/shuffle'],global.d3,global.d3)); -}(this, (function (exports,range,random,shuffle,d3Time,d3TimeFormat) { 'use strict'; - - range = range && range.hasOwnProperty('default') ? range['default'] : range; - random = random && random.hasOwnProperty('default') ? random['default'] : random; - shuffle = shuffle && shuffle.hasOwnProperty('default') ? shuffle['default'] : shuffle; - - var randColor = function randColor() { - return "hsl(" + Math.round(Math.random() * 360) + ", 70%, 50%)"; - }; - - var countryCodes = ['AD', 'AE', 'AF', 'AG', 'AI', 'AL', 'AM', 'AO', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AW', 'AX', 'AZ', 'BA', 'BB', 'BD', 'BE', 'BF', 'BG', 'BH', 'BI', 'BJ', 'BL', 'BM', 'BN', 'BO', 'BQ', 'BQ', 'BR', 'BS', 'BT', 'BV', 'BW', 'BY', 'BZ', 'CA', 'CC', 'CD', 'CF', 'CG', 'CH', 'CI', 'CK', 'CL', 'CM', 'CN', 'CO', 'CR', 'CU', 'CV', 'CW', 'CX', 'CY', 'CZ', 'DE', 'DJ', 'DK', 'DM', 'DO', 'DZ', 'EC', 'EE', 'EG', 'EH', 'ER', 'ES', 'ET', 'FI', 'FJ', 'FK', 'FM', 'FO', 'FR', 'GA', 'GB', 'GD', 'GE', 'GF', 'GG', 'GH', 'GI', 'GL', 'GM', 'GN', 'GP', 'GQ', 'GR', 'GS', 'GT', 'GU', 'GW', 'GY', 'HK', 'HM', 'HN', 'HR', 'HT', 'HU', 'ID', 'IE', 'IL', 'IM', 'IN', 'IO', 'IQ', 'IR', 'IS', 'IT', 'JE', 'JM', 'JO', 'JP', 'KE', 'KG', 'KH', 'KI', 'KM', 'KN', 'KP', 'KR', 'KW', 'KY', 'KZ', 'LA', 'LB', 'LC', 'LI', 'LK', 'LR', 'LS', 'LT', 'LU', 'LV', 'LY', 'MA', 'MC', 'MD', 'ME', 'MF', 'MG', 'MH', 'MK', 'ML', 'MM', 'MN', 'MO', 'MP', 'MQ', 'MR', 'MS', 'MT', 'MU', 'MV', 'MW', 'MX', 'MY', 'MZ', 'NA', 'NC', 'NE', 'NF', 'NG', 'NI', 'NL', 'NO', 'NP', 'NR', 'NU', 'NZ', 'OM', 'PA', 'PE', 'PF', 'PG', 'PH', 'PK', 'PL', 'PM', 'PN', 'PR', 'PS', 'PT', 'PW', 'PY', 'QA', 'RE', 'RO', 'RS', 'RU', 'RW', 'SA', 'SB', 'SC', 'SD', 'SE', 'SG', 'SH', 'SI', 'SJ', 'SK', 'SL', 'SM', 'SN', 'SO', 'SR', 'SS', 'ST', 'SV', 'SX', 'SY', 'SZ', 'TC', 'TD', 'TF', 'TG', 'TH', 'TJ', 'TK', 'TL', 'TM', 'TN', 'TO', 'TR', 'TT', 'TV', 'TW', 'TZ', 'UA', 'UG', 'UM', 'US', 'UY', 'UZ', 'VA', 'VC', 'VE', 'VG', 'VI', 'VN', 'VU', 'WF', 'WS', 'YE', 'YT', 'ZA', 'ZM', 'ZW']; - - var names = ['John', 'Raoul', 'Jane', 'Marcel', 'Ibrahim', 'Junko', 'Lyu', 'André', 'Maki', 'Véronique', 'Thibeau', 'Josiane', 'Raphaël', 'Mathéo', 'Margot', 'Hugo', 'Christian', 'Louis', 'Ella', 'Alton', 'Jimmy', 'Guillaume', 'Sébastien', 'Alfred', 'Bon', 'Solange', 'Kendrick', 'Jared', 'Satoko', 'Tomoko', 'Line', 'Delphine', 'Leonard', 'Alphonse', 'Lisa', 'Bart', 'Benjamin', 'Homer', 'Jack']; - - var programmingLanguages = ['php', 'make', 'javascript', 'go', 'erlang', 'elixir', 'lisp', 'haskell', 'python', 'ruby', 'hack', 'scala', 'java', 'rust', 'c', 'css', 'sass', 'stylus']; - - - - var index = /*#__PURE__*/Object.freeze({ - countryCodes: countryCodes, - names: names, - programmingLanguages: programmingLanguages - }); - - var generateBulletData = function generateBulletData(id, max) { - var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, - title = _ref.title, - subtitle = _ref.subtitle, - _ref$rangeCount = _ref.rangeCount, - rangeCount = _ref$rangeCount === undefined ? 5 : _ref$rangeCount, - _ref$measureCount = _ref.measureCount, - measureCount = _ref$measureCount === undefined ? 1 : _ref$measureCount, - _ref$markerCount = _ref.markerCount, - markerCount = _ref$markerCount === undefined ? 1 : _ref$markerCount, - _ref$float = _ref.float, - float = _ref$float === undefined ? false : _ref$float; - - var ranges = range(rangeCount - 1).reduce(function (acc) { - var remaining = max - acc[0]; - return [random(remaining, float)].concat(acc); - }, [max]); - - var measures = range(measureCount).reduce(function (acc) { - if (acc.length === 0) return [random(max, float)]; - return [random(acc[0], float)].concat(acc); - }, []); - - var markers = range(markerCount).map(function () { - return max * 0.6 + random(max * 0.4); - }); - - return { - id: id, - title: title, - subtitle: subtitle, - ranges: ranges, - measures: measures, - markers: markers - }; - }; - - var generateChordData = function generateChordData() { - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$keys = _ref.keys, - keys = _ref$keys === undefined ? names : _ref$keys, - _ref$size = _ref.size, - size = _ref$size === undefined ? 7 : _ref$size, - _ref$minValue = _ref.minValue, - minValue = _ref$minValue === undefined ? 0 : _ref$minValue, - _ref$maxValue = _ref.maxValue, - maxValue = _ref$maxValue === undefined ? 2000 : _ref$maxValue; - - var maxSize = Math.min(keys.length, size); - var selectedKeys = keys.slice(0, maxSize); - - var matrix = range(maxSize).map(function () { - return range(maxSize).map(function () { - if (Math.random() < 0.66) return random(minValue, maxValue / 4); - return random(minValue, maxValue); - }); - }); - - return { matrix: matrix, keys: selectedKeys }; - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var generateParallelCoordinatesData = function generateParallelCoordinatesData() { - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref$size = _ref.size, - size = _ref$size === undefined ? 26 : _ref$size, - _ref$keys = _ref.keys, - keys = _ref$keys === undefined ? [{ key: 'temp', random: [-10, 40] }, { key: 'cost', random: [200, 400000] }, { key: 'color', shuffle: ['red', 'yellow', 'green'] }, { key: 'target', shuffle: ['A', 'B', 'C', 'D', 'E'] }, { key: 'volume', random: [0.2, 7.6] }] : _ref$keys; - - var datumGenerator = function datumGenerator() { - return keys.reduce(function (acc, key) { - var _babelHelpers$extends; - - var value = void 0; - if (key.random !== undefined) { - value = random.apply(undefined, key.random); - } else if (key.shuffle !== undefined) { - value = shuffle(key.shuffle)[0]; - } - - return _extends({}, acc, (_babelHelpers$extends = {}, _babelHelpers$extends[key.key] = value, _babelHelpers$extends)); - }, {}); - }; - - return range(size).map(datumGenerator); - }; - - var availableNodes = names.map(function (name) { - return { id: name }; - }); - - var getNodeTargets = function getNodeTargets(id, links, currentPath) { - var targets = links.filter(function (_ref) { - var source = _ref.source; - return source === id; - }).map(function (_ref2) { - var target = _ref2.target; - - if (target === id) { - throw new Error('[sankey] a node cannot be linked on itself:\n link: ' + id + ' \u2014> ' + id); - } - if (currentPath && currentPath.includes(target)) { - throw new Error('[sankey] found cyclic dependency:\n link: ' + currentPath.join(' —> ') + ' \u2014> ' + target); - } - return target; - }); - - return targets.reduce(function (acc, targetId) { - return acc.concat(getNodeTargets(targetId, links, currentPath ? [].concat(currentPath, [targetId]) : [id, targetId])); - }, targets); - }; - - var getNodesTargets = function getNodesTargets(links) { - return links.reduce(function (targetsById, link) { - if (!targetsById[link.source]) { - targetsById[link.source] = getNodeTargets(link.source, links); - } - - return targetsById; - }, {}); - }; - - var generateSankeyData = function generateSankeyData() { - var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - nodeCount = _ref3.nodeCount, - _ref3$maxIterations = _ref3.maxIterations, - maxIterations = _ref3$maxIterations === undefined ? 3 : _ref3$maxIterations; - - var nodes = availableNodes.slice(0, nodeCount).map(function (node) { - return Object.assign({}, node, { - color: randColor() - }); - }); - - var links = []; - shuffle(nodes).forEach(function (_ref4) { - var id = _ref4.id; - - range(random(1, maxIterations)).forEach(function () { - var targetsById = getNodesTargets(links); - var randId = shuffle(nodes.filter(function (n) { - return n.id !== id; - }).map(function (n) { - return n.id; - }))[0]; - if ((!targetsById[randId] || !targetsById[randId].includes(id)) && (!targetsById[id] || !targetsById[id].includes(randId))) { - links.push({ - source: id, - target: randId, - value: random(5, 200) - }); - } - }); - }); - - return { nodes: nodes, links: links }; - }; - - var randColor$1 = randColor; - - var generateProgrammingLanguageStats = function generateProgrammingLanguageStats() { - var shouldShuffle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; - var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1; - - var langs = programmingLanguages; - if (shouldShuffle) { - langs = shuffle(langs); - } - if (limit < 1) { - limit = 1 + Math.round(Math.random() * (programmingLanguages.length - 1)); - } - - return langs.slice(0, limit).map(function (language) { - return { - label: language, - value: Math.round(Math.random() * 600), - color: randColor$1() - }; - }); - }; - - var uniqRand = function uniqRand(generator) { - var used = []; - - return function () { - var value = void 0; - do { - value = generator.apply(undefined, arguments); - } while (used.includes(value)); - - used.push(value); - - return value; - }; - }; - - var randCountryCode = function randCountryCode() { - return shuffle(countryCodes)[0]; - }; - - var generateDrinkStats = function generateDrinkStats() { - var xSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 16; - - var rand = function rand() { - return random(0, 60); - }; - var types = ['whisky', 'rhum', 'gin', 'vodka', 'cognac']; - var country = uniqRand(randCountryCode); - - var data = types.map(function (id) { - return { - id: id, - color: randColor$1(), - data: [] - }; - }); - - range(xSize).forEach(function () { - var x = country(); - types.forEach(function (id) { - data.find(function (d) { - return d.id === id; - }).data.push({ - color: randColor$1(), - x: x, - y: rand() - }); - }); - }); - - return data; - }; - - var generateSerie = function generateSerie() { - var xSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20; - - var max = 100 + Math.random() * (Math.random() * 600); - - return range(xSize).map(function () { - return Math.round(Math.random() * max); - }); - }; - - var generateSeries = function generateSeries(ids, xKeys) { - return ids.map(function (id) { - return { - id: id, - color: randColor$1(), - data: xKeys.map(function (x) { - return { x: x, y: Math.round(Math.random() * 300) }; - }) - }; - }); - }; - - var generateStackData = function generateStackData() { - var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3; - - var length = 16; - return range(size).map(function () { - return generateSerie(length).map(function (v, i) { - return { x: i, y: v }; - }); - }); - }; - - var generateCountriesPopulation = function generateCountriesPopulation(size) { - var countryCode = uniqRand(randCountryCode()); - - return range(size).map(function () { - return { - country: countryCode(), - population: 200 + Math.round(Math.random() * Math.random() * 1000000) - }; - }); - }; - - var generateDayCounts = function generateDayCounts(from, to) { - var maxSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.9; - - var days = d3Time.timeDays(from, to); - - var size = Math.round(days.length * (maxSize * 0.4)) + Math.round(Math.random() * (days.length * (maxSize * 0.6))); - - var dayFormat = d3TimeFormat.timeFormat('%Y-%m-%d'); - - return shuffle(days).slice(0, size).map(function (day) { - return { - day: dayFormat(day), - value: Math.round(Math.random() * 400) - }; - }); - }; - - var generateCountriesData = function generateCountriesData(keys) { - var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - _ref$size = _ref.size, - size = _ref$size === undefined ? 12 : _ref$size, - _ref$min = _ref.min, - min = _ref$min === undefined ? 0 : _ref$min, - _ref$max = _ref.max, - max = _ref$max === undefined ? 200 : _ref$max, - _ref$withColors = _ref.withColors, - withColors = _ref$withColors === undefined ? true : _ref$withColors; - - return countryCodes.slice(0, size).map(function (country) { - var d = { - country: country - }; - keys.forEach(function (key) { - d[key] = random(min, max); - if (withColors === true) { - d[key + 'Color'] = randColor$1(); - } - }); - - return d; - }); - }; - - var libTreeItems = [['viz', [['stack', [['chart'], ['xAxis'], ['yAxis'], ['layers']]], ['pie', [['chart', [['pie', [['outline'], ['slices'], ['bbox']]], ['donut'], ['gauge']]], ['legends']]]]], ['colors', [['rgb'], ['hsl']]], ['utils', [['randomize'], ['resetClock'], ['noop'], ['tick'], ['forceGC'], ['stackTrace'], ['dbg']]], ['generators', [['address'], ['city'], ['animal'], ['movie'], ['user']]], ['set', [['clone'], ['intersect'], ['merge'], ['reverse'], ['toArray'], ['toObject'], ['fromCSV'], ['slice'], ['append'], ['prepend'], ['shuffle'], ['pick'], ['plouc']]], ['text', [['trim'], ['slugify'], ['snakeCase'], ['camelCase'], ['repeat'], ['padLeft'], ['padRight'], ['sanitize'], ['ploucify']]], ['misc', [['whatever', [['hey'], ['WTF'], ['lol'], ['IMHO']]], ['other'], ['crap', [['crapA'], ['crapB', [['crapB1'], ['crapB2'], ['crapB3'], ['crapB4']]], ['crapC', [['crapC1'], ['crapC2'], ['crapC3'], ['crapC4'], ['crapC5'], ['crapC6'], ['crapC7'], ['crapC8'], ['crapC9']]]]]]]]; - - var generateLibTree = function generateLibTree() { - var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'nivo'; - var limit = arguments[1]; - var children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : libTreeItems; - - limit = limit || children.length; - if (limit > children.length) { - limit = children.length; - } - - var tree = { - name: name, - color: randColor$1() - }; - if (children && children.length > 0) { - tree.children = range(limit).map(function (o, i) { - var leaf = children[i]; - - // full path `${name}.${leaf[0]}` - return generateLibTree(leaf[0], null, leaf[1] || []); - }); - } else { - tree.loc = Math.round(Math.random() * 200000); - } - - return tree; - }; - - var wines = ['chardonay', 'carmenere', 'syrah']; - var wineTastes = ['fruity', 'bitter', 'heavy', 'strong', 'sunny']; - var generateWinesTastes = function generateWinesTastes() { - var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - _ref2$randMin = _ref2.randMin, - randMin = _ref2$randMin === undefined ? 20 : _ref2$randMin, - _ref2$randMax = _ref2.randMax, - randMax = _ref2$randMax === undefined ? 120 : _ref2$randMax; - - var data = wineTastes.map(function (taste) { - var d = { taste: taste }; - wines.forEach(function (wine) { - d[wine] = random(randMin, randMax); - }); - - return d; - }); - - return { data: data, keys: wines }; - }; - - exports.sets = index; - exports.randColor = randColor$1; - exports.generateProgrammingLanguageStats = generateProgrammingLanguageStats; - exports.uniqRand = uniqRand; - exports.randCountryCode = randCountryCode; - exports.generateDrinkStats = generateDrinkStats; - exports.generateSerie = generateSerie; - exports.generateSeries = generateSeries; - exports.generateStackData = generateStackData; - exports.generateCountriesPopulation = generateCountriesPopulation; - exports.generateDayCounts = generateDayCounts; - exports.generateCountriesData = generateCountriesData; - exports.generateLibTree = generateLibTree; - exports.generateWinesTastes = generateWinesTastes; - exports.generateBulletData = generateBulletData; - exports.generateChordData = generateChordData; - exports.generateParallelCoordinatesData = generateParallelCoordinatesData; - exports.generateSankeyData = generateSankeyData; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/heatmap/umd/nivo-heatmap.js b/packages/heatmap/umd/nivo-heatmap.js deleted file mode 100644 index 077fc1c8a..000000000 --- a/packages/heatmap/umd/nivo-heatmap.js +++ /dev/null @@ -1,1013 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/core'), require('lodash/min'), require('lodash/max'), require('lodash/isEqual'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/withState'), require('recompose/pure'), require('d3-scale'), require('react'), require('lodash/partial'), require('react-motion'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/core', 'lodash/min', 'lodash/max', 'lodash/isEqual', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/withState', 'recompose/pure', 'd3-scale', 'react', 'lodash/partial', 'react-motion', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global['lodash/min'],global['lodash/max'],global['lodash/isEqual'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposeWithState,global.RecomposePure,global.d3,global.React,global['lodash/partial'],global.ReactMotion,global.RecomposeSetDisplayName)); -}(this, (function (exports,PropTypes,core,min,max,isEqual,compose,defaultProps,withPropsOnChange,withState,pure,d3Scale,React,partial,reactMotion,setDisplayName) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - min = min && min.hasOwnProperty('default') ? min['default'] : min; - max = max && max.hasOwnProperty('default') ? max['default'] : max; - isEqual = isEqual && isEqual.hasOwnProperty('default') ? isEqual['default'] : isEqual; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - var React__default = 'default' in React ? React['default'] : React; - partial = partial && partial.hasOwnProperty('default') ? partial['default'] : partial; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var HeatMapPropTypes = { - // data - data: PropTypes.arrayOf(PropTypes.object).isRequired, - indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getIndex: PropTypes.func.isRequired, // computed - keys: PropTypes.arrayOf(PropTypes.string).isRequired, - - minValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, - maxValue: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, - - forceSquare: PropTypes.bool.isRequired, - sizeVariation: PropTypes.number.isRequired, - padding: PropTypes.number.isRequired, - - // cells - cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired, - cellOpacity: PropTypes.number.isRequired, - cellBorderWidth: PropTypes.number.isRequired, - cellBorderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getCellBorderColor: PropTypes.func.isRequired, // computed - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - - // labels - enableLabels: PropTypes.bool.isRequired, - labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getLabelTextColor: PropTypes.func.isRequired, // computed - - // theming - colors: core.quantizeColorScalePropType.isRequired, - colorScale: PropTypes.func.isRequired, // computed - nanColor: PropTypes.string, - - // interactivity - isInteractive: PropTypes.bool, - onClick: PropTypes.func.isRequired, - hoverTarget: PropTypes.oneOf(['cell', 'row', 'column', 'rowColumn']).isRequired, - cellHoverOpacity: PropTypes.number.isRequired, - cellHoverOthersOpacity: PropTypes.number.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - - // canvas specific - pixelRatio: PropTypes.number.isRequired - }; - - var HeatMapDefaultProps = { - indexBy: 'id', - - minValue: 'auto', - maxValue: 'auto', - - forceSquare: false, - sizeVariation: 0, - padding: 0, - - // cells - cellShape: 'rect', - cellOpacity: 0.85, - cellBorderWidth: 0, - cellBorderColor: 'inherit', - - // axes & grid - axisTop: {}, - axisLeft: {}, - enableGridX: false, - enableGridY: false, - - // labels - enableLabels: true, - labelTextColor: 'inherit:darker(1.4)', - - // theming - colors: 'nivo', - nanColor: '#000000', - - // interactivity - isInteractive: true, - onClick: core.noop, - hoverTarget: 'rowColumn', - cellHoverOpacity: 1, - cellHoverOthersOpacity: 0.35, - - // canvas specific - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }; - - var isHoverTargetByType = { - cell: function cell(node, current) { - return node.xKey === current.xKey && node.yKey === current.yKey; - }, - row: function row(node, current) { - return node.yKey === current.yKey; - }, - column: function column(node, current) { - return node.xKey === current.xKey; - }, - rowColumn: function rowColumn(node, current) { - return node.xKey === current.xKey || node.yKey === current.yKey; - } - }; - - var computeNodes = (function (_ref) { - var data = _ref.data, - keys = _ref.keys, - getIndex = _ref.getIndex, - xScale = _ref.xScale, - yScale = _ref.yScale, - sizeScale = _ref.sizeScale, - cellOpacity = _ref.cellOpacity, - cellWidth = _ref.cellWidth, - cellHeight = _ref.cellHeight, - colorScale = _ref.colorScale, - nanColor = _ref.nanColor, - getLabelTextColor = _ref.getLabelTextColor, - currentNode = _ref.currentNode, - hoverTarget = _ref.hoverTarget, - cellHoverOpacity = _ref.cellHoverOpacity, - cellHoverOthersOpacity = _ref.cellHoverOthersOpacity; - - var isHoverTarget = isHoverTargetByType[hoverTarget]; - - return data.reduce(function (acc, d) { - keys.forEach(function (key) { - var width = sizeScale ? Math.min(sizeScale(d[key]) * cellWidth, cellWidth) : cellWidth; - var height = sizeScale ? Math.min(sizeScale(d[key]) * cellHeight, cellHeight) : cellHeight; - - var node = { - key: key + "." + getIndex(d), - xKey: key, - yKey: getIndex(d), - x: xScale(key), - y: yScale(getIndex(d)), - width: width, - height: height, - value: d[key], - color: isNaN(d[key]) ? nanColor : colorScale(d[key]) - }; - - var opacity = cellOpacity; - if (currentNode) { - opacity = isHoverTarget(node, currentNode) ? cellHoverOpacity : cellHoverOthersOpacity; - } - - acc.push(Object.assign(node, { - labelTextColor: getLabelTextColor(node), - opacity: opacity - })); - }); - - return acc; - }, []); - }); - - var computeX = function computeX(column, cellWidth, padding) { - return column * cellWidth + cellWidth * 0.5 + padding * column + padding; - }; - var computeY = function computeY(row, cellHeight, padding) { - return row * cellHeight + cellHeight * 0.5 + padding * row + padding; - }; - - var enhance = (function (Component) { - return compose(defaultProps(HeatMapDefaultProps), withState('currentNode', 'setCurrentNode', null), core.withTheme(), core.withDimensions(), core.withMotion(), withPropsOnChange(['colors'], function (_ref) { - var colors = _ref.colors; - return { - colorScale: core.guessQuantizeColorScale(colors) - }; - }), withPropsOnChange(['indexBy'], function (_ref2) { - var indexBy = _ref2.indexBy; - return { - getIndex: core.getAccessorFor(indexBy) - }; - }), withPropsOnChange(['data', 'keys', 'width', 'height', 'padding', 'forceSquare'], function (_ref3) { - var data = _ref3.data, - keys = _ref3.keys, - width = _ref3.width, - height = _ref3.height, - padding = _ref3.padding, - forceSquare = _ref3.forceSquare; - - var columns = keys.length; - var rows = data.length; - - var cellWidth = Math.max((width - padding * (columns + 1)) / columns, 0); - var cellHeight = Math.max((height - padding * (rows + 1)) / rows, 0); - - var offsetX = 0; - var offsetY = 0; - if (forceSquare === true) { - var cellSize = Math.min(cellWidth, cellHeight); - cellWidth = cellSize; - cellHeight = cellSize; - - offsetX = (width - ((cellWidth + padding) * columns + padding)) / 2; - offsetY = (height - ((cellHeight + padding) * rows + padding)) / 2; - } - - return { - cellWidth: cellWidth, - cellHeight: cellHeight, - offsetX: offsetX, - offsetY: offsetY - }; - }), withPropsOnChange(['data', 'getIndex'], function (_ref4) { - var data = _ref4.data, - getIndex = _ref4.getIndex; - return { - indices: data.map(getIndex) - }; - }), withPropsOnChange(function (prev, next) { - return prev.keys !== next.keys || prev.cellWidth !== next.cellWidth || prev.cellHeight !== next.cellHeight || prev.padding !== next.padding || !isEqual(prev.indices, next.indices); - }, function (_ref5) { - var indices = _ref5.indices, - keys = _ref5.keys, - cellWidth = _ref5.cellWidth, - cellHeight = _ref5.cellHeight, - padding = _ref5.padding; - return { - xScale: d3Scale.scaleOrdinal(keys.map(function (key, i) { - return computeX(i, cellWidth, padding); - })).domain(keys), - yScale: d3Scale.scaleOrdinal(indices.map(function (d, i) { - return computeY(i, cellHeight, padding); - })).domain(indices) - }; - }), withPropsOnChange(['data', 'keys', 'minValue', 'maxValue'], function (_ref6) { - var data = _ref6.data, - keys = _ref6.keys, - _minValue = _ref6.minValue, - _maxValue = _ref6.maxValue; - - var minValue = _minValue; - var maxValue = _maxValue; - if (minValue === 'auto' || maxValue === 'auto') { - var allValues = data.reduce(function (acc, row) { - return acc.concat(keys.map(function (key) { - return row[key]; - })); - }, []); - - if (minValue === 'auto') minValue = min(allValues); - if (maxValue === 'auto') maxValue = max(allValues); - } - - return { - minValue: Math.min(minValue, maxValue), - maxValue: Math.max(maxValue, minValue) - }; - }), withPropsOnChange(['colorScale', 'minValue', 'maxValue'], function (_ref7) { - var colorScale = _ref7.colorScale, - minValue = _ref7.minValue, - maxValue = _ref7.maxValue; - return { - colorScale: colorScale.domain([minValue, maxValue]) - }; - }), withPropsOnChange(['sizeVariation', 'minValue', 'maxValue'], function (_ref8) { - var sizeVariation = _ref8.sizeVariation, - minValue = _ref8.minValue, - maxValue = _ref8.maxValue; - - var sizeScale = void 0; - if (sizeVariation > 0) { - sizeScale = d3Scale.scaleLinear().range([1 - sizeVariation, 1]).domain([minValue, maxValue]); - } - - return { sizeScale: sizeScale }; - }), withPropsOnChange(['cellBorderColor'], function (_ref9) { - var cellBorderColor = _ref9.cellBorderColor; - return { - getCellBorderColor: core.getInheritedColorGenerator(cellBorderColor) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref10) { - var labelTextColor = _ref10.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor) - }; - }), pure)(Component); - }); - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var style = { cursor: 'pointer' }; - - var HeatMapCellRect = function HeatMapCellRect(_ref) { - var data = _ref.data, - value = _ref.value, - x = _ref.x, - y = _ref.y, - width = _ref.width, - height = _ref.height, - color = _ref.color, - opacity = _ref.opacity, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - textColor = _ref.textColor, - onHover = _ref.onHover, - onLeave = _ref.onLeave, - _onClick = _ref.onClick, - theme = _ref.theme; - return React__default.createElement( - 'g', - { - transform: 'translate(' + x + ', ' + y + ')', - onMouseEnter: onHover, - onMouseMove: onHover, - onMouseLeave: onLeave, - onClick: function onClick(e) { - _onClick(data, e); - }, - style: style - }, - React__default.createElement('rect', { - x: width * -0.5, - y: height * -0.5, - width: width, - height: height, - fill: color, - fillOpacity: opacity, - strokeWidth: borderWidth, - stroke: borderColor, - strokeOpacity: opacity - }), - React__default.createElement( - 'text', - { - alignmentBaseline: 'central', - textAnchor: 'middle', - style: _extends({}, theme.labels.text, { - fill: textColor - }), - fillOpacity: opacity - }, - value - ) - ); - }; - - HeatMapCellRect.propTypes = { - data: PropTypes.object.isRequired, - value: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - textColor: PropTypes.string.isRequired, - onHover: PropTypes.func.isRequired, - onLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired, - theme: core.themePropType.isRequired - }; - - var HeatMapCellRect$1 = pure(HeatMapCellRect); - - var style$1 = { cursor: 'pointer' }; - - var HeatMapCellCircle = function HeatMapCellCircle(_ref) { - var data = _ref.data, - value = _ref.value, - x = _ref.x, - y = _ref.y, - width = _ref.width, - height = _ref.height, - color = _ref.color, - opacity = _ref.opacity, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - textColor = _ref.textColor, - onHover = _ref.onHover, - onLeave = _ref.onLeave, - _onClick = _ref.onClick, - theme = _ref.theme; - return React__default.createElement( - 'g', - { - transform: 'translate(' + x + ', ' + y + ')', - style: style$1, - onMouseEnter: onHover, - onMouseMove: onHover, - onMouseLeave: onLeave, - onClick: function onClick(e) { - _onClick(data, e); - } - }, - React__default.createElement('circle', { - r: Math.min(width, height) / 2, - fill: color, - fillOpacity: opacity, - strokeWidth: borderWidth, - stroke: borderColor, - strokeOpacity: opacity - }), - React__default.createElement( - 'text', - { - alignmentBaseline: 'central', - textAnchor: 'middle', - style: _extends({}, theme.labels, { - fill: textColor - }), - fillOpacity: opacity - }, - value - ) - ); - }; - - HeatMapCellCircle.propTypes = { - data: PropTypes.object.isRequired, - value: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - textColor: PropTypes.string.isRequired, - onHover: PropTypes.func.isRequired, - onLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired, - theme: core.themePropType.isRequired - }; - - var HeatMapCellCircle$1 = pure(HeatMapCellCircle); - - var HeatMapCellTooltip = function HeatMapCellTooltip(_ref) { - var node = _ref.node, - theme = _ref.theme, - format = _ref.format, - tooltip = _ref.tooltip; - return React__default.createElement(core.BasicTooltip, { - id: node.yKey + ' - ' + node.xKey, - value: node.value, - enableChip: true, - color: node.color, - theme: theme, - format: format, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({}, node)) : null - }); - }; - - HeatMapCellTooltip.propTypes = { - node: PropTypes.shape({ - xKey: PropTypes.string.isRequired, - yKey: PropTypes.string.isRequired, - value: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - }).isRequired, - format: PropTypes.func, - tooltip: PropTypes.func, - theme: PropTypes.shape({ - tooltip: PropTypes.shape({ - container: PropTypes.object.isRequired, - basic: PropTypes.object.isRequired - }).isRequired - }).isRequired - }; - - var HeatMapCellTooltip$1 = pure(HeatMapCellTooltip); - - var HeatMap = function (_Component) { - inherits(HeatMap, _Component); - - function HeatMap() { - var _temp, _this, _ret; - - classCallCheck(this, HeatMap); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleNodeHover = function (showTooltip, node, event) { - var _this$props = _this.props, - setCurrentNode = _this$props.setCurrentNode, - theme = _this$props.theme, - tooltipFormat = _this$props.tooltipFormat, - tooltip = _this$props.tooltip; - - setCurrentNode(node); - showTooltip(React__default.createElement(HeatMapCellTooltip$1, { - node: node, - theme: theme, - format: tooltipFormat, - tooltip: tooltip - }), event); - }, _this.handleNodeLeave = function (hideTooltip) { - _this.props.setCurrentNode(null); - hideTooltip(); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - HeatMap.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - xScale = _props.xScale, - yScale = _props.yScale, - offsetX = _props.offsetX, - offsetY = _props.offsetY, - margin = _props.margin, - width = _props.width, - height = _props.height, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - cellShape = _props.cellShape, - cellBorderWidth = _props.cellBorderWidth, - getCellBorderColor = _props.getCellBorderColor, - axisTop = _props.axisTop, - axisRight = _props.axisRight, - axisBottom = _props.axisBottom, - axisLeft = _props.axisLeft, - enableGridX = _props.enableGridX, - enableGridY = _props.enableGridY, - getLabelTextColor = _props.getLabelTextColor, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - boundSpring = _props.boundSpring, - isInteractive = _props.isInteractive, - onClick = _props.onClick; - - - var Cell = void 0; - if (cellShape === 'rect') { - Cell = HeatMapCellRect$1; - } else if (cellShape === 'circle') { - Cell = HeatMapCellCircle$1; - } else { - Cell = cellShape; - } - - var nodes = computeNodes(this.props); - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - - var onHover = partial(_this2.handleNodeHover, showTooltip); - var onLeave = partial(_this2.handleNodeLeave, hideTooltip); - - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: Object.assign({}, margin, { - top: margin.top + offsetY, - left: margin.left + offsetX - }), - theme: theme - }, - React__default.createElement(core.Grid, _extends({ - theme: theme, - width: width - offsetX * 2, - height: height - offsetY * 2, - xScale: enableGridX ? xScale : null, - yScale: enableGridY ? yScale : null - }, motionProps)), - React__default.createElement(core.Axes, _extends({ - xScale: xScale, - yScale: yScale, - width: width, - height: height, - theme: theme, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft - }, motionProps)), - !animate && nodes.map(function (node) { - return React__default.createElement(Cell, { - key: node.key, - data: node, - value: node.value, - x: node.x, - y: node.y, - width: node.width, - height: node.height, - color: node.color, - opacity: node.opacity, - borderWidth: cellBorderWidth, - borderColor: getCellBorderColor(node), - textColor: getLabelTextColor(node), - onHover: partial(onHover, node), - onLeave: onLeave, - onClick: onClick, - theme: theme - }); - }), - animate === true && React__default.createElement( - reactMotion.TransitionMotion, - { - styles: nodes.map(function (node) { - return { - key: node.key, - data: node, - style: _extends({ - x: boundSpring(node.x), - y: boundSpring(node.y), - width: boundSpring(node.width), - height: boundSpring(node.height), - opacity: boundSpring(node.opacity) - }, core.colorMotionSpring(node.color, { - damping: motionDamping, - stiffness: motionStiffness - })) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - node = _ref2.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement(Cell, { - key: key, - data: node, - value: node.value, - x: style.x, - y: style.y, - width: Math.max(style.width, 0), - height: Math.max(style.height, 0), - color: color, - opacity: style.opacity, - borderWidth: cellBorderWidth, - borderColor: getCellBorderColor(_extends({}, node, { - color: color - })), - textColor: getLabelTextColor(_extends({}, node, { - color: color - })), - onHover: partial(onHover, node), - onLeave: onLeave, - onClick: onClick, - theme: theme - }); - }) - ); - } - ) - ); - } - ); - }; - - return HeatMap; - }(React.Component); - - HeatMap.propTypes = HeatMapPropTypes; - - - var HeatMap$1 = setDisplayName('HeatMap')(enhance(HeatMap)); - - /** - * Render heatmap rect cell. - * - * @param {Object} ctx - * @param {number} x - * @param {number} y - * @param {number} width - * @param {number} height - * @param {string) color - * @param {number} opacity - * @param {string} labelTextColor - * @param {number} value - */ - var renderRect = function renderRect(ctx, _ref) { - var x = _ref.x, - y = _ref.y, - width = _ref.width, - height = _ref.height, - color = _ref.color, - opacity = _ref.opacity, - labelTextColor = _ref.labelTextColor, - value = _ref.value; - - ctx.save(); - ctx.globalAlpha = opacity; - - ctx.fillStyle = color; - ctx.fillRect(x - width / 2, y - height / 2, width, height); - - ctx.fillStyle = labelTextColor; - ctx.fillText(value, x, y); - - ctx.restore(); - }; - - /** - * Render heatmap circle cell. - * - * @param {Object} ctx - * @param {number} x - * @param {number} y - * @param {number} width - * @param {number} height - * @param {string) color - * @param {number} opacity - * @param {string} labelTextColor - * @param {number} value - */ - var renderCircle = function renderCircle(ctx, _ref2) { - var x = _ref2.x, - y = _ref2.y, - width = _ref2.width, - height = _ref2.height, - color = _ref2.color, - opacity = _ref2.opacity, - labelTextColor = _ref2.labelTextColor, - value = _ref2.value; - - ctx.save(); - ctx.globalAlpha = opacity; - - var radius = Math.min(width, height) / 2; - - ctx.fillStyle = color; - ctx.beginPath(); - ctx.arc(x, y, radius, 0, 2 * Math.PI); - ctx.fill(); - - ctx.fillStyle = labelTextColor; - ctx.fillText(value, x, y); - - ctx.restore(); - }; - - var HeatMapCanvas = function (_Component) { - inherits(HeatMapCanvas, _Component); - - function HeatMapCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, HeatMapCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip, event) { - if (!_this.nodes) return; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var _this$props = _this.props, - margin = _this$props.margin, - offsetX = _this$props.offsetX, - offsetY = _this$props.offsetY, - theme = _this$props.theme, - setCurrentNode = _this$props.setCurrentNode, - tooltip = _this$props.tooltip; - - var node = _this.nodes.find(function (node) { - return core.isCursorInRect(node.x + margin.left + offsetX - node.width / 2, node.y + margin.top + offsetY - node.height / 2, node.width, node.height, x, y); - }); - - if (node !== undefined) { - setCurrentNode(node); - showTooltip(React__default.createElement(HeatMapCellTooltip$1, { node: node, theme: theme, tooltip: tooltip }), event); - } else { - setCurrentNode(null); - hideTooltip(); - } - }, _this.handleMouseLeave = function (hideTooltip) { - _this.props.setCurrentNode(null); - hideTooltip(); - }, _this.handleClick = function (event) { - if (!_this.props.currentNode) return; - - _this.props.onClick(_this.props.currentNode, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - HeatMapCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - HeatMapCanvas.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } else { - this.draw(props); - return false; - } - }; - - HeatMapCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - HeatMapCanvas.prototype.draw = function draw(props) { - var width = props.width, - height = props.height, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - pixelRatio = props.pixelRatio, - margin = props.margin, - offsetX = props.offsetX, - offsetY = props.offsetY, - xScale = props.xScale, - yScale = props.yScale, - cellShape = props.cellShape, - theme = props.theme; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - - var renderNode = void 0; - if (cellShape === 'rect') { - renderNode = partial(renderRect, this.ctx); - } else { - renderNode = partial(renderCircle, this.ctx); - } - - var nodes = computeNodes(props); - - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left + offsetX, margin.top + offsetY); - - core.renderAxesToCanvas(this.ctx, { - xScale: xScale, - yScale: yScale, - width: width - offsetX * 2, - height: height - offsetY * 2, - top: props.axisTop, - right: props.axisRight, - bottom: props.axisBottom, - left: props.axisLeft, - theme: theme - }); - - this.ctx.textAlign = 'center'; - this.ctx.textBaseline = 'middle'; - - nodes.forEach(renderNode); - - this.nodes = nodes; - }; - - HeatMapCanvas.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this2.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: partial(_this2.handleMouseHover, showTooltip, hideTooltip), - onMouseMove: partial(_this2.handleMouseHover, showTooltip, hideTooltip), - onMouseLeave: partial(_this2.handleMouseLeave, hideTooltip), - onClick: _this2.handleClick - }); - } - ); - }; - - return HeatMapCanvas; - }(React.Component); - - HeatMapCanvas.propTypes = HeatMapPropTypes; - - var HeatMapCanvas$1 = enhance(HeatMapCanvas); - - var ResponsiveHeatMap = function ResponsiveHeatMap(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(HeatMap$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var ResponsiveHeatMapCanvas = function ResponsiveHeatMapCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(HeatMapCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.HeatMap = HeatMap$1; - exports.HeatMapCanvas = HeatMapCanvas$1; - exports.ResponsiveHeatMap = ResponsiveHeatMap; - exports.ResponsiveHeatMapCanvas = ResponsiveHeatMapCanvas; - exports.HeatMapPropTypes = HeatMapPropTypes; - exports.HeatMapDefaultProps = HeatMapDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/legends/umd/nivo-legends.js b/packages/legends/umd/nivo-legends.js deleted file mode 100644 index 99ed47184..000000000 --- a/packages/legends/umd/nivo-legends.js +++ /dev/null @@ -1,1061 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('lodash/isNumber'), require('lodash/isPlainObject'), require('react'), require('lodash')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'lodash/isNumber', 'lodash/isPlainObject', 'react', 'lodash'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global['lodash/isNumber'],global['lodash/isPlainObject'],global.React,global.lodash)); -}(this, (function (exports,PropTypes,isNumber,isPlainObject,React,lodash) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber; - isPlainObject = isPlainObject && isPlainObject.hasOwnProperty('default') ? isPlainObject['default'] : isPlainObject; - var React__default = 'default' in React ? React['default'] : React; - - var DIRECTION_ROW = 'row'; - var DIRECTION_COLUMN = 'column'; - - var ANCHOR_TOP = 'top'; - var ANCHOR_TOP_RIGHT = 'top-right'; - var ANCHOR_RIGHT = 'right'; - var ANCHOR_BOTTOM_RIGHT = 'bottom-right'; - var ANCHOR_BOTTOM = 'bottom'; - var ANCHOR_BOTTOM_LEFT = 'bottom-left'; - var ANCHOR_LEFT = 'left'; - var ANCHOR_TOP_LEFT = 'top-left'; - var ANCHOR_CENTER = 'center'; - - var DIRECTION_LEFT_TO_RIGHT = 'left-to-right'; - var DIRECTION_RIGHT_TO_LEFT = 'right-to-left'; - var DIRECTION_TOP_TO_BOTTOM = 'top-to-bottom'; - var DIRECTION_BOTTOM_TO_TOP = 'bottom-to-top'; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - /** - * This can be used to add effect on legends on interaction. - */ - var legendEffectPropType = PropTypes.shape({ - on: PropTypes.oneOfType([PropTypes.oneOf(['hover'])]).isRequired, - style: PropTypes.shape({ - itemTextColor: PropTypes.string, - itemBackground: PropTypes.string, - itemOpacity: PropTypes.number, - symbolSize: PropTypes.number, - symbolBorderWidth: PropTypes.number, - symbolBorderColor: PropTypes.string - }).isRequired - }); - - var symbolPropTypes = { - symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - symbolSize: PropTypes.number, - symbolSpacing: PropTypes.number, - symbolBorderWidth: PropTypes.number, - symbolBorderColor: PropTypes.string - }; - - var interactivityPropTypes = { - onClick: PropTypes.func, - onMouseEnter: PropTypes.func, - onMouseLeave: PropTypes.func - }; - - var datumPropType = PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - color: PropTypes.string.isRequired, - fill: PropTypes.string - }); - - /** - * The prop type is exported as a simple object instead of `PropTypes.shape` - * to be able to add extra properties. - * - * @example - * ```javascript - * import { LegendPropShape } from '@nivo/legends' - * - * const customLegendPropType = PropTypes.shape({ - * ...LegendPropShape, - * extra: PropTypes.any.isRequired, - * }) - * ``` - */ - var LegendPropShape = _extends({ - data: PropTypes.arrayOf(datumPropType), - - // position & layout - anchor: PropTypes.oneOf([ANCHOR_TOP, ANCHOR_TOP_RIGHT, ANCHOR_RIGHT, ANCHOR_BOTTOM_RIGHT, ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_LEFT, ANCHOR_TOP_LEFT, ANCHOR_CENTER]).isRequired, - translateX: PropTypes.number, - translateY: PropTypes.number, - direction: PropTypes.oneOf([DIRECTION_ROW, DIRECTION_COLUMN]).isRequired, - - // item - itemsSpacing: PropTypes.number, - itemWidth: PropTypes.number.isRequired, - itemHeight: PropTypes.number.isRequired, - itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]), - itemTextColor: PropTypes.string, - itemBackground: PropTypes.string, - itemOpacity: PropTypes.number - - }, symbolPropTypes, interactivityPropTypes, { - - effects: PropTypes.arrayOf(legendEffectPropType) - }); - - var zeroPadding = { - top: 0, - right: 0, - bottom: 0, - left: 0 - }; - - var computeDimensions = function computeDimensions(_ref) { - var itemCount = _ref.itemCount, - itemWidth = _ref.itemWidth, - itemHeight = _ref.itemHeight, - direction = _ref.direction, - itemsSpacing = _ref.itemsSpacing, - _padding = _ref.padding; - - var padding = void 0; - if (isNumber(_padding)) { - padding = { - top: _padding, - right: _padding, - bottom: _padding, - left: _padding - }; - } else if (isPlainObject(_padding)) { - padding = _extends({}, zeroPadding, _padding); - } else { - throw new TypeError('Invalid property padding, must be one of: number, object'); - } - - var horizontalPadding = padding.left + padding.right; - var verticalPadding = padding.top + padding.bottom; - var width = itemWidth + horizontalPadding; - var height = itemHeight + verticalPadding; - var spacing = (itemCount - 1) * itemsSpacing; - if (direction === DIRECTION_ROW) { - width = itemWidth * itemCount + spacing + horizontalPadding; - } else if (direction === DIRECTION_COLUMN) { - height = itemHeight * itemCount + spacing + verticalPadding; - } - - return { width: width, height: height, padding: padding }; - }; - - var computePositionFromAnchor = function computePositionFromAnchor(_ref2) { - var anchor = _ref2.anchor, - translateX = _ref2.translateX, - translateY = _ref2.translateY, - containerWidth = _ref2.containerWidth, - containerHeight = _ref2.containerHeight, - width = _ref2.width, - height = _ref2.height; - - var x = translateX; - var y = translateY; - - switch (anchor) { - case ANCHOR_TOP: - x += (containerWidth - width) / 2; - break; - - case ANCHOR_TOP_RIGHT: - x += containerWidth - width; - break; - - case ANCHOR_RIGHT: - x += containerWidth - width; - y += (containerHeight - height) / 2; - break; - - case ANCHOR_BOTTOM_RIGHT: - x += containerWidth - width; - y += containerHeight - height; - break; - - case ANCHOR_BOTTOM: - x += (containerWidth - width) / 2; - y += containerHeight - height; - break; - - case ANCHOR_BOTTOM_LEFT: - y += containerHeight - height; - break; - - case ANCHOR_LEFT: - y += (containerHeight - height) / 2; - break; - - case ANCHOR_CENTER: - x += (containerWidth - width) / 2; - y += (containerHeight - height) / 2; - break; - } - - return { x: x, y: y }; - }; - - var computeItemLayout = function computeItemLayout(_ref3) { - var direction = _ref3.direction, - justify = _ref3.justify, - symbolSize = _ref3.symbolSize, - symbolSpacing = _ref3.symbolSpacing, - width = _ref3.width, - height = _ref3.height; - - var symbolX = void 0; - var symbolY = void 0; - - var labelX = void 0; - var labelY = void 0; - var labelAnchor = void 0; - var labelAlignment = void 0; - - switch (direction) { - case DIRECTION_LEFT_TO_RIGHT: - symbolX = 0; - symbolY = (height - symbolSize) / 2; - - labelY = height / 2; - labelAlignment = 'middle'; - if (justify === true) { - labelX = width; - labelAnchor = 'end'; - } else { - labelX = symbolSize + symbolSpacing; - labelAnchor = 'start'; - } - break; - - case DIRECTION_RIGHT_TO_LEFT: - symbolX = width - symbolSize; - symbolY = (height - symbolSize) / 2; - - labelY = height / 2; - labelAlignment = 'middle'; - if (justify === true) { - labelX = 0; - labelAnchor = 'start'; - } else { - labelX = width - symbolSize - symbolSpacing; - labelAnchor = 'end'; - } - break; - - case DIRECTION_TOP_TO_BOTTOM: - symbolX = (width - symbolSize) / 2; - symbolY = 0; - - labelX = width / 2; - - labelAnchor = 'middle'; - if (justify === true) { - labelY = height; - labelAlignment = 'baseline'; - } else { - labelY = symbolSize + symbolSpacing; - labelAlignment = 'hanging'; - } - break; - - case DIRECTION_BOTTOM_TO_TOP: - symbolX = (width - symbolSize) / 2; - symbolY = height - symbolSize; - - labelX = width / 2; - labelAnchor = 'middle'; - if (justify === true) { - labelY = 0; - labelAlignment = 'hanging'; - } else { - labelY = height - symbolSize - symbolSpacing; - labelAlignment = 'baseline'; - } - break; - } - - return { - symbolX: symbolX, - symbolY: symbolY, - - labelX: labelX, - labelY: labelY, - labelAnchor: labelAnchor, - labelAlignment: labelAlignment - }; - }; - - var symbolPropTypes$1 = { - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - fill: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired - }; - - var symbolDefaultProps = { - borderWidth: 0, - borderColor: 'transparent' - }; - - var SymbolCircle = function (_PureComponent) { - inherits(SymbolCircle, _PureComponent); - - function SymbolCircle() { - classCallCheck(this, SymbolCircle); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - SymbolCircle.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - size = _props.size, - fill = _props.fill, - borderWidth = _props.borderWidth, - borderColor = _props.borderColor; - - - return React__default.createElement('circle', { - r: size / 2, - cx: x + size / 2, - cy: y + size / 2, - fill: fill, - strokeWidth: borderWidth, - stroke: borderColor, - style: { - pointerEvents: 'none' - } - }); - }; - - return SymbolCircle; - }(React.PureComponent); - - SymbolCircle.propTypes = _extends({}, symbolPropTypes$1); - SymbolCircle.defaultProps = _extends({}, symbolDefaultProps); - - var SymbolDiamond = function (_PureComponent) { - inherits(SymbolDiamond, _PureComponent); - - function SymbolDiamond() { - classCallCheck(this, SymbolDiamond); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - SymbolDiamond.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - size = _props.size, - fill = _props.fill, - borderWidth = _props.borderWidth, - borderColor = _props.borderColor; - - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - React__default.createElement('path', { - d: '\n M' + size / 2 + ' 0\n L' + size * 0.8 + ' ' + size / 2 + '\n L' + size / 2 + ' ' + size + '\n L' + size * 0.2 + ' ' + size / 2 + '\n L' + size / 2 + ' 0\n ', - fill: fill, - strokeWidth: borderWidth, - stroke: borderColor, - style: { - pointerEvents: 'none' - } - }) - ); - }; - - return SymbolDiamond; - }(React.PureComponent); - - SymbolDiamond.propTypes = _extends({}, symbolPropTypes$1); - SymbolDiamond.defaultProps = _extends({}, symbolDefaultProps); - - var SymbolSquare = function (_PureComponent) { - inherits(SymbolSquare, _PureComponent); - - function SymbolSquare() { - classCallCheck(this, SymbolSquare); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - SymbolSquare.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - size = _props.size, - fill = _props.fill, - borderWidth = _props.borderWidth, - borderColor = _props.borderColor; - - - return React__default.createElement('rect', { - x: x, - y: y, - fill: fill, - strokeWidth: borderWidth, - stroke: borderColor, - width: size, - height: size, - style: { - pointerEvents: 'none' - } - }); - }; - - return SymbolSquare; - }(React.PureComponent); - - SymbolSquare.propTypes = _extends({}, symbolPropTypes$1); - SymbolSquare.defaultProps = _extends({}, symbolDefaultProps); - - var SymbolTriangle = function (_PureComponent) { - inherits(SymbolTriangle, _PureComponent); - - function SymbolTriangle() { - classCallCheck(this, SymbolTriangle); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - SymbolTriangle.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - size = _props.size, - fill = _props.fill, - borderWidth = _props.borderWidth, - borderColor = _props.borderColor; - - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - React__default.createElement('path', { - d: '\n M' + size / 2 + ' 0\n L' + size + ' ' + size + '\n L0 ' + size + '\n L' + size / 2 + ' 0\n ', - fill: fill, - strokeWidth: borderWidth, - stroke: borderColor, - style: { - pointerEvents: 'none' - } - }) - ); - }; - - return SymbolTriangle; - }(React.PureComponent); - - SymbolTriangle.propTypes = _extends({}, symbolPropTypes$1); - SymbolTriangle.defaultProps = _extends({}, symbolDefaultProps); - - var symbolByShape = { - circle: SymbolCircle, - diamond: SymbolDiamond, - square: SymbolSquare, - triangle: SymbolTriangle - }; - - var LegendSvgItem = function (_Component) { - inherits(LegendSvgItem, _Component); - - function LegendSvgItem() { - var _temp, _this, _ret; - - classCallCheck(this, LegendSvgItem); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { - style: {} - }, _this.handleClick = function (event) { - var _this$props = _this.props, - onClick = _this$props.onClick, - data = _this$props.data; - - - if (onClick === undefined) return; - onClick(data, event); - }, _this.handleMouseEnter = function (event) { - var _this$props2 = _this.props, - onMouseEnter = _this$props2.onMouseEnter, - data = _this$props2.data, - effects = _this$props2.effects; - - - if (effects.length > 0) { - var applyEffects = effects.filter(function (_ref) { - var on = _ref.on; - return on === 'hover'; - }); - var style = applyEffects.reduce(function (acc, effect) { - return _extends({}, acc, effect.style); - }, {}); - _this.setState({ style: style }); - } - - if (onMouseEnter === undefined) return; - onMouseEnter(data, event); - }, _this.handleMouseLeave = function () { - var _this$props3 = _this.props, - onMouseLeave = _this$props3.onMouseLeave, - data = _this$props3.data, - effects = _this$props3.effects; - - - if (effects.length > 0) { - var applyEffects = effects.filter(function (_ref2) { - var on = _ref2.on; - return on !== 'hover'; - }); - var style = applyEffects.reduce(function (acc, effect) { - return _extends({}, acc, effect.style); - }, {}); - _this.setState({ style: style }); - } - - if (onMouseLeave === undefined) return; - onMouseLeave(data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - LegendSvgItem.prototype.render = function render() { - var _props = this.props, - x = _props.x, - y = _props.y, - width = _props.width, - height = _props.height, - data = _props.data, - direction = _props.direction, - justify = _props.justify, - textColor = _props.textColor, - background = _props.background, - opacity = _props.opacity, - symbolShape = _props.symbolShape, - symbolSize = _props.symbolSize, - symbolSpacing = _props.symbolSpacing, - symbolBorderWidth = _props.symbolBorderWidth, - symbolBorderColor = _props.symbolBorderColor, - onClick = _props.onClick, - onMouseEnter = _props.onMouseEnter, - onMouseLeave = _props.onMouseLeave, - theme = _props.theme; - var style = this.state.style; - - var _computeItemLayout = computeItemLayout({ - direction: direction, - justify: justify, - symbolSize: style.symbolSize || symbolSize, - symbolSpacing: symbolSpacing, - width: width, - height: height - }), - symbolX = _computeItemLayout.symbolX, - symbolY = _computeItemLayout.symbolY, - labelX = _computeItemLayout.labelX, - labelY = _computeItemLayout.labelY, - labelAnchor = _computeItemLayout.labelAnchor, - labelAlignment = _computeItemLayout.labelAlignment; - - var isInteractive = [onClick, onMouseEnter, onMouseLeave].some(function (handler) { - return handler !== undefined; - }); - - var Symbol = void 0; - if (lodash.isFunction(symbolShape)) { - Symbol = symbolShape; - } else { - Symbol = symbolByShape[symbolShape]; - } - - return React__default.createElement( - 'g', - { - transform: 'translate(' + x + ',' + y + ')', - style: { - opacity: style.itemOpacity !== undefined ? style.itemOpacity : opacity - } - }, - React__default.createElement('rect', { - width: width, - height: height, - fill: style.itemBackground || background, - style: { - cursor: isInteractive ? 'pointer' : 'auto' - }, - onClick: this.handleClick, - onMouseEnter: this.handleMouseEnter, - onMouseLeave: this.handleMouseLeave - }), - React__default.createElement(Symbol, { - x: symbolX, - y: symbolY, - size: style.symbolSize || symbolSize, - fill: data.fill || data.color, - borderWidth: style.symbolBorderWidth !== undefined ? style.symbolBorderWidth : symbolBorderWidth, - borderColor: style.symbolBorderColor || symbolBorderColor - }), - React__default.createElement( - 'text', - { - textAnchor: labelAnchor, - style: _extends({}, theme.legends.text, { - fill: style.itemTextColor || textColor, - alignmentBaseline: labelAlignment, - pointerEvents: 'none', - userSelect: 'none' - }), - x: labelX, - y: labelY - }, - data.label - ) - ); - }; - - return LegendSvgItem; - }(React.Component); - - LegendSvgItem.propTypes = _extends({ - data: datumPropType.isRequired, - - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - textColor: PropTypes.string, - background: PropTypes.string, - opacity: PropTypes.number, - - direction: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]).isRequired, - justify: PropTypes.bool.isRequired - - }, symbolPropTypes, interactivityPropTypes); - LegendSvgItem.defaultProps = { - direction: DIRECTION_LEFT_TO_RIGHT, - justify: false, - - textColor: 'black', - background: 'transparent', - opacity: 1, - - // symbol - symbolShape: 'square', - symbolSize: 16, - symbolSpacing: 8, - symbolBorderWidth: 0, - symbolBorderColor: 'transparent', - - effects: [] - }; - - var LegendSvg = function LegendSvg(_ref) { - var data = _ref.data, - x = _ref.x, - y = _ref.y, - direction = _ref.direction, - _padding = _ref.padding, - justify = _ref.justify, - effects = _ref.effects, - itemWidth = _ref.itemWidth, - itemHeight = _ref.itemHeight, - itemDirection = _ref.itemDirection, - itemsSpacing = _ref.itemsSpacing, - itemTextColor = _ref.itemTextColor, - itemBackground = _ref.itemBackground, - itemOpacity = _ref.itemOpacity, - symbolShape = _ref.symbolShape, - symbolSize = _ref.symbolSize, - symbolSpacing = _ref.symbolSpacing, - symbolBorderWidth = _ref.symbolBorderWidth, - symbolBorderColor = _ref.symbolBorderColor, - onClick = _ref.onClick, - onMouseEnter = _ref.onMouseEnter, - onMouseLeave = _ref.onMouseLeave, - theme = _ref.theme; - - // eslint-disable-next-line no-unused-vars - var _computeDimensions = computeDimensions({ - itemCount: data.length, - itemWidth: itemWidth, - itemHeight: itemHeight, - itemsSpacing: itemsSpacing, - direction: direction, - padding: _padding - }), - padding = _computeDimensions.padding; - - var xStep = 0; - var yStep = 0; - if (direction === DIRECTION_ROW) { - xStep = itemWidth + itemsSpacing; - } else if (direction === DIRECTION_COLUMN) { - yStep = itemHeight + itemsSpacing; - } - - return React__default.createElement( - 'g', - { transform: 'translate(' + x + ',' + y + ')' }, - data.map(function (data, i) { - return React__default.createElement(LegendSvgItem, { - key: i, - data: data, - x: i * xStep + padding.left, - y: i * yStep + padding.top, - width: itemWidth, - height: itemHeight, - direction: itemDirection, - justify: justify, - effects: effects, - textColor: itemTextColor, - background: itemBackground, - opacity: itemOpacity, - symbolShape: symbolShape, - symbolSize: symbolSize, - symbolSpacing: symbolSpacing, - symbolBorderWidth: symbolBorderWidth, - symbolBorderColor: symbolBorderColor, - onClick: onClick, - onMouseEnter: onMouseEnter, - onMouseLeave: onMouseLeave, - theme: theme - }); - }) - ); - }; - - LegendSvg.propTypes = _extends({ - data: PropTypes.arrayOf(datumPropType).isRequired, - - // position/layout - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - direction: PropTypes.oneOf([DIRECTION_COLUMN, DIRECTION_ROW]).isRequired, - padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number - })]).isRequired, - justify: PropTypes.bool.isRequired, - - // items - itemsSpacing: PropTypes.number.isRequired, - itemWidth: PropTypes.number.isRequired, - itemHeight: PropTypes.number.isRequired, - itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]).isRequired, - itemTextColor: PropTypes.string.isRequired, - itemBackground: PropTypes.string.isRequired, - itemOpacity: PropTypes.number.isRequired - - }, symbolPropTypes, interactivityPropTypes); - - LegendSvg.defaultProps = { - // position/layout - padding: 0, - justify: false, - - // items - itemsSpacing: 0, - itemDirection: DIRECTION_LEFT_TO_RIGHT, - itemTextColor: 'black', - itemBackground: 'transparent', - itemOpacity: 1 - }; - - var BoxLegendSvg = function BoxLegendSvg(_ref) { - var data = _ref.data, - containerWidth = _ref.containerWidth, - containerHeight = _ref.containerHeight, - translateX = _ref.translateX, - translateY = _ref.translateY, - anchor = _ref.anchor, - direction = _ref.direction, - padding = _ref.padding, - justify = _ref.justify, - itemsSpacing = _ref.itemsSpacing, - itemWidth = _ref.itemWidth, - itemHeight = _ref.itemHeight, - itemDirection = _ref.itemDirection, - itemTextColor = _ref.itemTextColor, - itemBackground = _ref.itemBackground, - itemOpacity = _ref.itemOpacity, - symbolShape = _ref.symbolShape, - symbolSize = _ref.symbolSize, - symbolSpacing = _ref.symbolSpacing, - symbolBorderWidth = _ref.symbolBorderWidth, - symbolBorderColor = _ref.symbolBorderColor, - onClick = _ref.onClick, - onMouseEnter = _ref.onMouseEnter, - onMouseLeave = _ref.onMouseLeave, - effects = _ref.effects, - theme = _ref.theme; - - var _computeDimensions = computeDimensions({ - itemCount: data.length, - itemsSpacing: itemsSpacing, - itemWidth: itemWidth, - itemHeight: itemHeight, - direction: direction, - padding: padding - }), - width = _computeDimensions.width, - height = _computeDimensions.height; - - var _computePositionFromA = computePositionFromAnchor({ - anchor: anchor, - translateX: translateX, - translateY: translateY, - containerWidth: containerWidth, - containerHeight: containerHeight, - width: width, - height: height - }), - x = _computePositionFromA.x, - y = _computePositionFromA.y; - - return React__default.createElement(LegendSvg, { - data: data, - x: x, - y: y, - direction: direction, - padding: padding, - justify: justify, - effects: effects, - itemsSpacing: itemsSpacing, - itemWidth: itemWidth, - itemHeight: itemHeight, - itemDirection: itemDirection, - itemTextColor: itemTextColor, - itemBackground: itemBackground, - itemOpacity: itemOpacity, - symbolShape: symbolShape, - symbolSize: symbolSize, - symbolSpacing: symbolSpacing, - symbolBorderWidth: symbolBorderWidth, - symbolBorderColor: symbolBorderColor, - onClick: onClick, - onMouseEnter: onMouseEnter, - onMouseLeave: onMouseLeave, - theme: theme - }); - }; - - BoxLegendSvg.propTypes = _extends({ - data: PropTypes.arrayOf(datumPropType).isRequired, - containerWidth: PropTypes.number.isRequired, - containerHeight: PropTypes.number.isRequired, - translateX: PropTypes.number.isRequired, - translateY: PropTypes.number.isRequired, - anchor: PropTypes.oneOf([ANCHOR_TOP, ANCHOR_TOP_RIGHT, ANCHOR_RIGHT, ANCHOR_BOTTOM_RIGHT, ANCHOR_BOTTOM, ANCHOR_BOTTOM_LEFT, ANCHOR_LEFT, ANCHOR_TOP_LEFT, ANCHOR_CENTER]).isRequired, - direction: PropTypes.oneOf([DIRECTION_ROW, DIRECTION_COLUMN]).isRequired, - padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ - top: PropTypes.number, - right: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number - })]).isRequired, - justify: PropTypes.bool, - - itemWidth: PropTypes.number.isRequired, - itemHeight: PropTypes.number.isRequired, - itemDirection: PropTypes.oneOf([DIRECTION_LEFT_TO_RIGHT, DIRECTION_RIGHT_TO_LEFT, DIRECTION_TOP_TO_BOTTOM, DIRECTION_BOTTOM_TO_TOP]), - itemsSpacing: PropTypes.number.isRequired, - itemTextColor: PropTypes.string, - itemBackground: PropTypes.string, - itemOpacity: PropTypes.number - - }, symbolPropTypes, interactivityPropTypes); - - BoxLegendSvg.defaultProps = { - translateX: 0, - translateY: 0, - itemsSpacing: LegendSvg.defaultProps.itemsSpacing, - padding: LegendSvg.defaultProps.padding - }; - - var textPropsMapping = { - align: { - start: 'left', - middle: 'center', - end: 'right' - }, - baseline: { - hanging: 'top', - middle: 'middle', - baseline: 'bottom' - } - }; - - var renderLegendToCanvas = function renderLegendToCanvas(ctx, _ref) { - var data = _ref.data, - containerWidth = _ref.containerWidth, - containerHeight = _ref.containerHeight, - _ref$translateX = _ref.translateX, - translateX = _ref$translateX === undefined ? BoxLegendSvg.defaultProps.translateX : _ref$translateX, - _ref$translateY = _ref.translateY, - translateY = _ref$translateY === undefined ? BoxLegendSvg.defaultProps.translateY : _ref$translateY, - anchor = _ref.anchor, - direction = _ref.direction, - _ref$padding = _ref.padding, - _padding = _ref$padding === undefined ? LegendSvg.defaultProps.padding : _ref$padding, - _ref$justify = _ref.justify, - justify = _ref$justify === undefined ? LegendSvgItem.defaultProps.justify : _ref$justify, - _ref$itemsSpacing = _ref.itemsSpacing, - itemsSpacing = _ref$itemsSpacing === undefined ? LegendSvg.defaultProps.itemsSpacing : _ref$itemsSpacing, - itemWidth = _ref.itemWidth, - itemHeight = _ref.itemHeight, - _ref$itemDirection = _ref.itemDirection, - itemDirection = _ref$itemDirection === undefined ? LegendSvgItem.defaultProps.direction : _ref$itemDirection, - _ref$itemTextColor = _ref.itemTextColor, - itemTextColor = _ref$itemTextColor === undefined ? LegendSvg.defaultProps.textColor : _ref$itemTextColor, - _ref$symbolSize = _ref.symbolSize, - symbolSize = _ref$symbolSize === undefined ? LegendSvgItem.defaultProps.symbolSize : _ref$symbolSize, - _ref$symbolSpacing = _ref.symbolSpacing, - symbolSpacing = _ref$symbolSpacing === undefined ? LegendSvgItem.defaultProps.symbolSpacing : _ref$symbolSpacing; - - var _computeDimensions = computeDimensions({ - itemCount: data.length, - itemWidth: itemWidth, - itemHeight: itemHeight, - itemsSpacing: itemsSpacing, - direction: direction, - padding: _padding - }), - width = _computeDimensions.width, - height = _computeDimensions.height, - padding = _computeDimensions.padding; - - var _computePositionFromA = computePositionFromAnchor({ - anchor: anchor, - translateX: translateX, - translateY: translateY, - containerWidth: containerWidth, - containerHeight: containerHeight, - width: width, - height: height - }), - x = _computePositionFromA.x, - y = _computePositionFromA.y; - - var xStep = 0; - var yStep = 0; - if (direction === DIRECTION_ROW) { - xStep = itemWidth + itemsSpacing; - } else if (direction === DIRECTION_COLUMN) { - yStep = itemHeight + itemsSpacing; - } - - ctx.save(); - ctx.translate(x, y); - - data.forEach(function (d, i) { - var itemX = i * xStep + padding.left; - var itemY = i * yStep + padding.top; - - var _computeItemLayout = computeItemLayout({ - direction: itemDirection, - justify: justify, - symbolSize: symbolSize, - symbolSpacing: symbolSpacing, - width: itemWidth, - height: itemHeight - }), - symbolX = _computeItemLayout.symbolX, - symbolY = _computeItemLayout.symbolY, - labelX = _computeItemLayout.labelX, - labelY = _computeItemLayout.labelY, - labelAnchor = _computeItemLayout.labelAnchor, - labelAlignment = _computeItemLayout.labelAlignment; - - ctx.fillStyle = d.color; - ctx.fillRect(itemX + symbolX, itemY + symbolY, symbolSize, symbolSize); - - ctx.textAlign = textPropsMapping.align[labelAnchor]; - ctx.textBaseline = textPropsMapping.baseline[labelAlignment]; - ctx.fillStyle = itemTextColor; - ctx.fillText(d.label, itemX + labelX, itemY + labelY); - }); - - ctx.restore(); - }; - - exports.BoxLegendSvg = BoxLegendSvg; - exports.LegendSvg = LegendSvg; - exports.LegendSvgItem = LegendSvgItem; - exports.renderLegendToCanvas = renderLegendToCanvas; - exports.DIRECTION_ROW = DIRECTION_ROW; - exports.DIRECTION_COLUMN = DIRECTION_COLUMN; - exports.ANCHOR_TOP = ANCHOR_TOP; - exports.ANCHOR_TOP_RIGHT = ANCHOR_TOP_RIGHT; - exports.ANCHOR_RIGHT = ANCHOR_RIGHT; - exports.ANCHOR_BOTTOM_RIGHT = ANCHOR_BOTTOM_RIGHT; - exports.ANCHOR_BOTTOM = ANCHOR_BOTTOM; - exports.ANCHOR_BOTTOM_LEFT = ANCHOR_BOTTOM_LEFT; - exports.ANCHOR_LEFT = ANCHOR_LEFT; - exports.ANCHOR_TOP_LEFT = ANCHOR_TOP_LEFT; - exports.ANCHOR_CENTER = ANCHOR_CENTER; - exports.DIRECTION_LEFT_TO_RIGHT = DIRECTION_LEFT_TO_RIGHT; - exports.DIRECTION_RIGHT_TO_LEFT = DIRECTION_RIGHT_TO_LEFT; - exports.DIRECTION_TOP_TO_BOTTOM = DIRECTION_TOP_TO_BOTTOM; - exports.DIRECTION_BOTTOM_TO_TOP = DIRECTION_BOTTOM_TO_TOP; - exports.legendEffectPropType = legendEffectPropType; - exports.symbolPropTypes = symbolPropTypes; - exports.interactivityPropTypes = interactivityPropTypes; - exports.datumPropType = datumPropType; - exports.LegendPropShape = LegendPropShape; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/line/umd/nivo-line.js b/packages/line/umd/nivo-line.js deleted file mode 100644 index 97eb4982c..000000000 --- a/packages/line/umd/nivo-line.js +++ /dev/null @@ -1,820 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('recompose/pure'), require('@nivo/core'), require('lodash/isFunction'), require('d3-format'), require('recompose/compose'), require('recompose/withState'), require('recompose/withHandlers'), require('recompose/withPropsOnChange'), require('react-motion'), require('@nivo/scales'), require('@nivo/legends'), require('d3-shape'), require('recompose/defaultProps')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'recompose/pure', '@nivo/core', 'lodash/isFunction', 'd3-format', 'recompose/compose', 'recompose/withState', 'recompose/withHandlers', 'recompose/withPropsOnChange', 'react-motion', '@nivo/scales', '@nivo/legends', 'd3-shape', 'recompose/defaultProps'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.RecomposePure,global.nivo,global['lodash/isFunction'],global.d3,global.RecomposeCompose,global.RecomposeWithState,global.RecomposeWithHandlers,global.RecomposeWithPropsOnChange,global.ReactMotion,global.nivo,global.nivo,global.d3,global.RecomposeDefaultProps)); -}(this, (function (exports,React,PropTypes,pure,core,isFunction,d3Format,compose,withState,withHandlers,withPropsOnChange,reactMotion,scales,legends,d3Shape,defaultProps) { 'use strict'; - - React = React && React.hasOwnProperty('default') ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - withHandlers = withHandlers && withHandlers.hasOwnProperty('default') ? withHandlers['default'] : withHandlers; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var LineAreas = function LineAreas(_ref) { - var areaGenerator = _ref.areaGenerator, - areaOpacity = _ref.areaOpacity, - lines = _ref.lines, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - if (animate !== true) { - return React.createElement( - 'g', - null, - lines.slice(0).reverse().map(function (_ref2) { - var id = _ref2.id, - data = _ref2.data, - areaColor = _ref2.color; - return React.createElement('path', { - key: id, - d: areaGenerator(data.map(function (d) { - return d.position; - })), - fill: areaColor, - fillOpacity: areaOpacity, - strokeWidth: 0 - }); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React.createElement( - 'g', - null, - lines.slice(0).reverse().map(function (_ref3) { - var id = _ref3.id, - data = _ref3.data, - areaColor = _ref3.color; - return React.createElement( - core.SmartMotion, - { - key: id, - style: function style(spring) { - return { - d: spring(areaGenerator(data.map(function (d) { - return d.position; - })), springConfig), - fill: spring(areaColor, springConfig) - }; - } - }, - function (style) { - return React.createElement('path', { - key: id, - d: style.d, - fill: areaColor, - fillOpacity: areaOpacity, - strokeWidth: 0 - }); - } - ); - }) - ); - }; - - LineAreas.propTypes = _extends({ - areaOpacity: PropTypes.number.isRequired - }, core.motionPropTypes); - - var LineAreas$1 = pure(LineAreas); - - var LineLine = function LineLine(_ref) { - var lineGenerator = _ref.lineGenerator, - id = _ref.id, - points = _ref.points, - color = _ref.color, - thickness = _ref.thickness, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - if (animate !== true) { - return React.createElement('path', { - key: id, - d: lineGenerator(points), - fill: 'none', - strokeWidth: thickness, - stroke: color - }); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React.createElement( - core.SmartMotion, - { - key: id, - style: function style(spring) { - return { - d: spring(lineGenerator(points), springConfig), - stroke: spring(color, springConfig) - }; - } - }, - function (style) { - return React.createElement('path', { - key: id, - d: style.d, - fill: 'none', - strokeWidth: thickness, - stroke: style.stroke - }); - } - ); - }; - - LineLine.propTypes = _extends({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - points: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - })), - lineGenerator: PropTypes.func.isRequired, - color: PropTypes.string.isRequired, - thickness: PropTypes.number.isRequired - }, core.motionPropTypes); - - var Line = pure(LineLine); - - var LineLines = function LineLines(_ref) { - var lines = _ref.lines, - lineGenerator = _ref.lineGenerator, - lineWidth = _ref.lineWidth, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - return React.createElement( - 'g', - null, - lines.map(function (_ref2) { - var id = _ref2.id, - data = _ref2.data, - color = _ref2.color; - - return React.createElement(Line, { - key: id, - id: id, - points: data.map(function (d) { - return d.position; - }), - lineGenerator: lineGenerator, - color: color, - thickness: lineWidth, - animate: animate, - motionStiffness: motionStiffness, - motionDamping: motionDamping - }); - }) - ); - }; - - LineLines.propTypes = _extends({ - lines: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - color: PropTypes.string.isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - data: PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]), - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]) - }).isRequired, - position: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number - }).isRequired - })).isRequired - })).isRequired, - lineWidth: PropTypes.number.isRequired, - lineGenerator: PropTypes.func.isRequired - }, core.motionPropTypes); - - var LineLines$1 = pure(LineLines); - - var Chip = function Chip(_ref) { - var color = _ref.color; - return React.createElement('span', { style: { display: 'block', width: '12px', height: '12px', background: color } }); - }; - - Chip.propTypes = { - color: PropTypes.string.isRequired - }; - - var LineSlicesItem = function LineSlicesItem(_ref2) { - var slice = _ref2.slice, - height = _ref2.height, - showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip, - isHover = _ref2.isHover; - return React.createElement( - 'g', - { transform: 'translate(' + slice.x + ', 0)' }, - isHover && React.createElement('line', { - x1: 0, - x2: 0, - y1: 0, - y2: height, - stroke: '#000', - strokeOpacity: 0.35, - strokeWidth: 1 - }), - React.createElement('rect', { - x: -20, - width: 40, - height: height, - fill: '#F00', - fillOpacity: 0, - onMouseEnter: showTooltip, - onMouseMove: showTooltip, - onMouseLeave: hideTooltip - }) - ); - }; - - LineSlicesItem.propTypes = { - slice: PropTypes.object.isRequired, - height: PropTypes.number.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - isHover: PropTypes.bool.isRequired, - theme: PropTypes.object.isRequired, - tooltip: PropTypes.func, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - }; - - var enhance = compose(withState('isHover', 'setIsHover', false), withPropsOnChange(['slice', 'theme', 'tooltip', 'tooltipFormat'], function (_ref3) { - var slice = _ref3.slice, - theme = _ref3.theme, - tooltip = _ref3.tooltip, - tooltipFormat = _ref3.tooltipFormat; - - var format = !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format.format(tooltipFormat); - var hasValues = slice.data.some(function (d) { - return d.position.x !== null && d.position.y !== null; - }); - - return { - tooltipElement: hasValues ? React.createElement(core.TableTooltip, { - theme: theme, - rows: slice.data.filter(function (d) { - return d.position.x !== null && d.position.y !== null; - }).map(function (d) { - return [React.createElement(Chip, { key: d.id, color: d.serie.color }), d.serie.id, format ? format(d.data.y) : d.data.y]; - }), - format: format, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({}, slice)) : null - }) : null - }; - }), withHandlers({ - showTooltip: function showTooltip(_ref4) { - var _showTooltip = _ref4.showTooltip, - setIsHover = _ref4.setIsHover, - tooltipElement = _ref4.tooltipElement; - return function (e) { - setIsHover(true); - _showTooltip(tooltipElement, e); - }; - }, - hideTooltip: function hideTooltip(_ref5) { - var _hideTooltip = _ref5.hideTooltip, - setIsHover = _ref5.setIsHover; - return function () { - setIsHover(false); - _hideTooltip(); - }; - } - }), pure); - - var LineSlicesItem$1 = enhance(LineSlicesItem); - - var LineSlices = function LineSlices(_ref) { - var slices = _ref.slices, - height = _ref.height, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - theme = _ref.theme, - tooltip = _ref.tooltip, - tooltipFormat = _ref.tooltipFormat; - return React.createElement( - 'g', - null, - slices.map(function (slice) { - return React.createElement(LineSlicesItem$1, { - key: slice.id, - slice: slice, - height: height, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }); - }) - ); - }; - - LineSlices.propTypes = { - slices: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - x: PropTypes.number.isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - data: PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]), - y: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]) - }), - position: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number - }).isRequired, - serie: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - color: PropTypes.string.isRequired - }).isRequired - })).isRequired - })).isRequired, - height: PropTypes.number.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired, - tooltip: PropTypes.func, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - }; - - var LineSlices$1 = pure(LineSlices); - - var LineDots = function LineDots(_ref) { - var lines = _ref.lines, - symbol = _ref.symbol, - size = _ref.size, - color = _ref.color, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - enableLabel = _ref.enableLabel, - label = _ref.label, - labelFormat = _ref.labelFormat, - labelYOffset = _ref.labelYOffset, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var getLabel = core.getLabelGenerator(label, labelFormat); - - var points = lines.reduce(function (acc, line) { - var id = line.id, - data = line.data; - - - return [].concat(acc, data.filter(function (datum) { - return datum.position.x !== null && datum.position.y !== null; - }).map(function (datum) { - return { - key: id + '.' + datum.data.x, - x: datum.position.x, - y: datum.position.y, - fill: color(line), - stroke: borderColor(line), - label: enableLabel ? getLabel(datum.data) : null - }; - })); - }, []); - - if (animate !== true) { - return React.createElement( - 'g', - null, - points.map(function (point) { - return React.createElement(core.DotsItem, { - key: point.key, - x: point.x, - y: point.y, - symbol: symbol, - size: size, - color: point.fill, - borderWidth: borderWidth, - borderColor: point.stroke, - label: point.label, - labelYOffset: labelYOffset, - theme: theme - }); - }) - ); - } - var springConfig = { - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React.createElement( - reactMotion.TransitionMotion, - { - styles: points.map(function (point) { - return { - key: point.key, - data: point, - style: { - x: reactMotion.spring(point.x, springConfig), - y: reactMotion.spring(point.y, springConfig), - size: reactMotion.spring(size, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - point = _ref2.data; - return React.createElement(core.DotsItem, _extends({ - key: key - }, style, { - symbol: symbol, - color: point.fill, - borderWidth: borderWidth, - borderColor: point.stroke, - label: point.label, - labelYOffset: labelYOffset, - theme: theme - })); - }) - ); - } - ); - }; - - LineDots.propTypes = _extends({ - lines: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired - })), - - symbol: PropTypes.func, - size: PropTypes.number.isRequired, - color: PropTypes.func.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.func.isRequired, - - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - labelYOffset: PropTypes.number, - - theme: PropTypes.shape({ - dots: core.dotsThemePropType.isRequired - }).isRequired - - }, core.motionPropTypes); - - LineDots.defaultProps = { - // labels - enableLabel: false, - label: 'y' - }; - - var LinePropTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]), - y: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]) - })).isRequired - })).isRequired, - - xScale: scales.scalePropType.isRequired, - yScale: scales.scalePropType.isRequired, - - computedData: PropTypes.object.isRequired, - - curve: core.lineCurvePropType.isRequired, - areaGenerator: PropTypes.func.isRequired, - lineGenerator: PropTypes.func.isRequired, - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - gridXValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), - gridYValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), - - // dots - enableDots: PropTypes.bool.isRequired, - dotSymbol: PropTypes.func, - dotSize: PropTypes.number.isRequired, - dotColor: PropTypes.any.isRequired, - dotBorderWidth: PropTypes.number.isRequired, - dotBorderColor: PropTypes.any.isRequired, - enableDotLabel: PropTypes.bool.isRequired, - - // markers - markers: PropTypes.arrayOf(PropTypes.shape({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - style: PropTypes.object - })), - - // styling - getColor: PropTypes.func.isRequired, - enableArea: PropTypes.bool.isRequired, - areaOpacity: PropTypes.number.isRequired, - areaBaselineValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired, - lineWidth: PropTypes.number.isRequired, - defs: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired - })).isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - enableStackTooltip: PropTypes.bool.isRequired, - tooltip: PropTypes.func, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }; - - var LineDefaultProps = { - stacked: false, - curve: 'linear', - - xScale: { - type: 'point' - }, - yScale: { - type: 'linear', - min: 0, - max: 'auto' - }, - - // axes & grid - axisBottom: {}, - axisLeft: {}, - enableGridX: true, - enableGridY: true, - - // dots - enableDots: true, - dotSize: 6, - dotColor: 'inherit', - dotBorderWidth: 0, - dotBorderColor: 'inherit', - enableDotLabel: false, - - // styling - colors: 'nivo', - colorBy: 'id', - enableArea: false, - areaBaselineValue: 0, - areaOpacity: 0.2, - lineWidth: 2, - defs: [], - - // interactivity - isInteractive: true, - enableStackTooltip: true, - - legends: [] - }; - - var Line$1 = function Line(_ref) { - var computedData = _ref.computedData, - lineGenerator = _ref.lineGenerator, - areaGenerator = _ref.areaGenerator, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - axisTop = _ref.axisTop, - axisRight = _ref.axisRight, - axisBottom = _ref.axisBottom, - axisLeft = _ref.axisLeft, - enableGridX = _ref.enableGridX, - enableGridY = _ref.enableGridY, - gridXValues = _ref.gridXValues, - gridYValues = _ref.gridYValues, - lineWidth = _ref.lineWidth, - enableArea = _ref.enableArea, - areaOpacity = _ref.areaOpacity, - enableDots = _ref.enableDots, - dotSymbol = _ref.dotSymbol, - dotSize = _ref.dotSize, - dotColor = _ref.dotColor, - dotBorderWidth = _ref.dotBorderWidth, - dotBorderColor = _ref.dotBorderColor, - enableDotLabel = _ref.enableDotLabel, - dotLabel = _ref.dotLabel, - dotLabelFormat = _ref.dotLabelFormat, - dotLabelYOffset = _ref.dotLabelYOffset, - markers = _ref.markers, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - enableStackTooltip = _ref.enableStackTooltip, - legends$$1 = _ref.legends; - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - React.createElement(core.Grid, _extends({ - theme: theme, - width: width, - height: height, - xScale: enableGridX ? computedData.xScale : null, - yScale: enableGridY ? computedData.yScale : null, - xValues: gridXValues, - yValues: gridYValues - }, motionProps)), - React.createElement(core.CartesianMarkers, { - markers: markers, - width: width, - height: height, - xScale: computedData.xScale, - yScale: computedData.yScale, - theme: theme - }), - React.createElement(core.Axes, _extends({ - xScale: computedData.xScale, - yScale: computedData.yScale, - width: width, - height: height, - theme: theme, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft - }, motionProps)), - enableArea && React.createElement(LineAreas$1, _extends({ - areaGenerator: areaGenerator, - areaOpacity: areaOpacity, - lines: computedData.series - }, motionProps)), - React.createElement(LineLines$1, _extends({ - lines: computedData.series, - lineGenerator: lineGenerator, - lineWidth: lineWidth - }, motionProps)), - isInteractive && enableStackTooltip && React.createElement(LineSlices$1, { - slices: computedData.slices, - height: height, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }), - enableDots && React.createElement(LineDots, _extends({ - lines: computedData.series, - symbol: dotSymbol, - size: dotSize, - color: core.getInheritedColorGenerator(dotColor), - borderWidth: dotBorderWidth, - borderColor: core.getInheritedColorGenerator(dotBorderColor), - enableLabel: enableDotLabel, - label: dotLabel, - labelFormat: dotLabelFormat, - labelYOffset: dotLabelYOffset, - theme: theme - }, motionProps)), - legends$$1.map(function (legend, i) { - var legendData = computedData.series.map(function (line) { - return { - id: line.id, - label: line.id, - color: line.color - }; - }).reverse(); - - return React.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Line$1.propTypes = LinePropTypes; - - var enhance$1 = compose(defaultProps(LineDefaultProps), core.withTheme(), core.withColors(), core.withDimensions(), core.withMotion(), withPropsOnChange(['curve'], function (_ref3) { - var curve = _ref3.curve; - return { - lineGenerator: d3Shape.line().defined(function (d) { - return d.x !== null && d.y !== null; - }).x(function (d) { - return d.x; - }).y(function (d) { - return d.y; - }).curve(core.curveFromProp(curve)) - }; - }), withPropsOnChange(['data', 'xScale', 'yScale', 'width', 'height'], function (_ref4) { - var data = _ref4.data, - xScale = _ref4.xScale, - yScale = _ref4.yScale, - width = _ref4.width, - height = _ref4.height; - return { - computedData: scales.computeXYScalesForSeries(data, xScale, yScale, width, height) - }; - }), withPropsOnChange(['getColor', 'computedData'], function (_ref5) { - var getColor = _ref5.getColor, - _computedData = _ref5.computedData; - - var computedData = _extends({}, _computedData, { - series: _computedData.series.map(function (serie) { - return _extends({}, serie, { - color: getColor(serie) - }); - }) - }); - - computedData.slices = scales.computeYSlices(computedData); - - return { computedData: computedData }; - }), withPropsOnChange(['curve', 'computedData', 'areaBaselineValue'], function (_ref6) { - var curve = _ref6.curve, - computedData = _ref6.computedData, - areaBaselineValue = _ref6.areaBaselineValue; - return { - areaGenerator: d3Shape.area().defined(function (d) { - return d.x !== null && d.y !== null; - }).x(function (d) { - return d.x; - }).y1(function (d) { - return d.y; - }).curve(core.curveFromProp(curve)).y0(computedData.yScale(areaBaselineValue)) - }; - }), pure); - - var enhancedLine = enhance$1(Line$1); - enhancedLine.displayName = 'Line'; - - var ResponsiveLine = function ResponsiveLine(props) { - return React.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React.createElement(enhancedLine, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Line = enhancedLine; - exports.ResponsiveLine = ResponsiveLine; - exports.LinePropTypes = LinePropTypes; - exports.LineDefaultProps = LineDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/parallel-coordinates/umd/nivo-parallel-coordinates.js b/packages/parallel-coordinates/umd/nivo-parallel-coordinates.js deleted file mode 100644 index e5b2ae95f..000000000 --- a/packages/parallel-coordinates/umd/nivo-parallel-coordinates.js +++ /dev/null @@ -1,951 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/core'), require('recompose/withPropsOnChange'), require('d3-shape'), require('d3-scale'), require('react'), require('react-motion'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/pure'), require('recompose/setDisplayName'), require('@nivo/axes')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/core', 'recompose/withPropsOnChange', 'd3-shape', 'd3-scale', 'react', 'react-motion', 'recompose/compose', 'recompose/defaultProps', 'recompose/pure', 'recompose/setDisplayName', '@nivo/axes'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global.RecomposeWithPropsOnChange,global.d3,global.d3,global.React,global.ReactMotion,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposePure,global.RecomposeSetDisplayName,global.nivo)); -}(this, (function (exports,PropTypes,core,withPropsOnChange,d3Shape,d3Scale,React,reactMotion,compose,defaultProps,pure,setDisplayName,axes) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - var React__default = 'default' in React ? React['default'] : React; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var objectWithoutProperties = function (obj, keys) { - var target = {}; - - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; - } - - return target; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var commonVariablePropTypes = { - key: PropTypes.string.isRequired, - enableDensity: PropTypes.bool, - densityType: PropTypes.oneOf(['circles', 'poly']) - }; - - var commonPropTypes = { - data: PropTypes.arrayOf(PropTypes.object).isRequired, - variables: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(_extends({}, commonVariablePropTypes, { - key: PropTypes.string.isRequired, - type: PropTypes.oneOf(['point']).isRequired, - values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])) - })), PropTypes.shape(_extends({}, commonVariablePropTypes, { - type: PropTypes.oneOf(['linear']).isRequired, - min: PropTypes.number, - max: PropTypes.number - }))])).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - curve: core.lineCurvePropType.isRequired, - lineGenerator: PropTypes.func.isRequired, - strokeWidth: PropTypes.number.isRequired, - lineOpacity: PropTypes.number.isRequired, - axesPlan: PropTypes.oneOf(['foreground', 'background']).isRequired, - axesTicksPosition: PropTypes.oneOf(['before', 'after']).isRequired, - theme: core.themePropType.isRequired - }; - - var commonDefaultProps = { - layout: 'horizontal', - curve: 'linear', - colors: 'yellow_orange_red', - colorBy: 'index', - strokeWidth: 2, - lineOpacity: 0.35, - axesPlan: 'foreground', - axesTicksPosition: 'after' - }; - - var commonEnhancers = [core.withDimensions(), core.withColors({ - defaultColors: commonDefaultProps.colors, - defaultColorBy: commonDefaultProps.colorBy, - destKey: 'getLineColor' - }), core.withTheme(), withPropsOnChange(['curve'], function (_ref) { - var curve = _ref.curve; - return { - lineGenerator: d3Shape.line().x(function (d) { - return d.x; - }).y(function (d) { - return d.y; - }).curve(core.curveFromProp(curve)) - }; - })]; - - var computeParallelCoordinatesVariableKernels = function computeParallelCoordinatesVariableKernels(variable, data) { - if (variable.type === 'point') { - var kernels = data.reduce(function (acc, datum) { - var value = datum[variable.key]; - var kernel = acc.find(function (k) { - return k.id === value; - }); - if (kernel === undefined) { - kernel = { id: value, count: 0 }; - acc.push(kernel); - } - kernel.count++; - - return acc; - }, []); - kernels = variable.scale.domain().map(function (d) { - return kernels.find(function (k) { - return k.id === d; - }); - }); - - var scale = d3Scale.scaleLinear().rangeRound([0, 60]).domain([0, Math.max.apply(Math, kernels.map(function (k) { - return k.count; - }))]); - - return kernels.map(function (k) { - return { - id: k.id, - position: variable.scale(k.id), - size: scale(k.count) - }; - }); - } - }; - - var computeParallelCoordinatesLayout = function computeParallelCoordinatesLayout(_ref) { - var width = _ref.width, - height = _ref.height, - data = _ref.data, - variables = _ref.variables, - layout = _ref.layout; - - var variablesScale = d3Scale.scalePoint().range(layout === 'horizontal' ? [0, width] : [height, 0]).domain(variables.map(function (_ref2) { - var key = _ref2.key; - return key; - })); - - var range = layout === 'horizontal' ? [height, 0] : [0, width]; - var variablesWithScale = variables.map(function (variable) { - var allValues = new Set(); - data.forEach(function (d) { - return allValues.add(d[variable.key]); - }); - - var scale = void 0; - if (variable.type === 'linear') { - scale = d3Scale.scaleLinear().rangeRound(range).domain([Math.min.apply(Math, Array.from(allValues)), Math.max.apply(Math, Array.from(allValues))]); - } - - if (variable.type === 'point') { - scale = d3Scale.scalePoint().range(range).domain(variable.values || allValues); - } - - var enhancedVariable = _extends({}, variable, { - scale: scale, - values: Array.from(allValues) - }); - - if (variable.enableDensity === true) { - enhancedVariable.densityBins = computeParallelCoordinatesVariableKernels(enhancedVariable, data); - } - - return enhancedVariable; - }); - - var dataWithPoints = data.map(function (datum, index) { - var points = variablesWithScale.map(function (variable) { - return { - x: layout === 'horizontal' ? variablesScale(variable.key) : variable.scale(datum[variable.key]), - y: layout === 'horizontal' ? variable.scale(datum[variable.key]) : variablesScale(variable.key) - }; - }); - - return _extends({ index: index }, datum, { points: points }); - }); - - return { - variablesScale: variablesScale, - variablesWithScale: variablesWithScale, - dataWithPoints: dataWithPoints - }; - }; - - var ParallelCoordinatesLayout = function (_PureComponent) { - inherits(ParallelCoordinatesLayout, _PureComponent); - - function ParallelCoordinatesLayout() { - classCallCheck(this, ParallelCoordinatesLayout); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - ParallelCoordinatesLayout.prototype.render = function render() { - var _props = this.props, - width = _props.width, - height = _props.height, - data = _props.data, - variables = _props.variables, - layout = _props.layout, - children = _props.children; - - - return children(computeParallelCoordinatesLayout({ - width: width, - height: height, - data: data, - variables: variables, - layout: layout - })); - }; - - return ParallelCoordinatesLayout; - }(React.PureComponent); - - ParallelCoordinatesLayout.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.array])).isRequired, - variables: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({ - key: PropTypes.string.isRequired, - type: PropTypes.oneOf(['point']).isRequired, - values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])) - }), PropTypes.shape({ - key: PropTypes.string.isRequired, - type: PropTypes.oneOf(['linear']).isRequired, - min: PropTypes.number, - max: PropTypes.number - })])).isRequired, - layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - children: PropTypes.func.isRequired - }; - - var ParallelCoordinatesLineTooltip = function (_PureComponent) { - inherits(ParallelCoordinatesLineTooltip, _PureComponent); - - function ParallelCoordinatesLineTooltip() { - classCallCheck(this, ParallelCoordinatesLineTooltip); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - ParallelCoordinatesLineTooltip.prototype.render = function render() { - var _props = this.props, - data = _props.data, - variables = _props.variables, - theme = _props.theme; - - - return React__default.createElement(core.TableTooltip, { - theme: theme, - rows: variables.map(function (variable) { - return [variable.key, React__default.createElement( - 'strong', - null, - data[variable.key] - )]; - } // eslint-disable-line react/jsx-key - ) - }); - }; - - return ParallelCoordinatesLineTooltip; - }(React.PureComponent); - - ParallelCoordinatesLineTooltip.propTypes = { - data: PropTypes.object.isRequired, - variables: PropTypes.arrayOf(PropTypes.shape({ - key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - })).isRequired, - theme: core.themePropType.isRequired - }; - - var ParallelCoordinatesLine = function (_PureComponent) { - inherits(ParallelCoordinatesLine, _PureComponent); - - function ParallelCoordinatesLine() { - var _temp, _this, _ret; - - classCallCheck(this, ParallelCoordinatesLine); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.handleActiveMouse = function (event) { - var _this$props = _this.props, - showTooltip = _this$props.showTooltip, - data = _this$props.data, - variables = _this$props.variables, - theme = _this$props.theme; - - showTooltip(React__default.createElement(ParallelCoordinatesLineTooltip, { data: data, variables: variables, theme: theme }), event); - }, _this.handleMouseLeave = function () { - _this.props.hideTooltip(); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - ParallelCoordinatesLine.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - lineGenerator = _props.lineGenerator, - points = _props.points, - strokeWidth = _props.strokeWidth, - color = _props.color, - opacity = _props.opacity, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var pathDefinition = lineGenerator(points); - - if (animate !== true) { - return React__default.createElement('path', { - d: pathDefinition, - stroke: color, - strokeWidth: strokeWidth, - strokeLinecap: 'round', - opacity: opacity, - fill: 'none', - onMouseEnter: this.handleActiveMouse, - onMouseMove: this.handleActiveMouse, - onMouseLeave: this.handleMouseLeave - }); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - core.SmartMotion, - { - style: function style(spring) { - return { - d: spring(pathDefinition, springConfig), - opacity: spring(opacity, springConfig) - }; - } - }, - function (style) { - return React__default.createElement('path', { - d: style.d, - stroke: color, - strokeWidth: strokeWidth, - strokeLinecap: 'round', - opacity: style.opacity, - fill: 'none', - onMouseEnter: _this2.handleActiveMouse, - onMouseMove: _this2.handleActiveMouse, - onMouseLeave: _this2.handleMouseLeave - }); - } - ); - }; - - return ParallelCoordinatesLine; - }(React.PureComponent); - - ParallelCoordinatesLine.propTypes = _extends({ - data: PropTypes.object.isRequired, - variables: PropTypes.arrayOf(PropTypes.shape({ - key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - })).isRequired, - lineGenerator: PropTypes.func.isRequired, - points: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired - })).isRequired, - strokeWidth: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - theme: core.themePropType.isRequired - }, core.motionPropTypes); - - var ParallelCoordinatesAxisDensityCircles = function (_PureComponent) { - inherits(ParallelCoordinatesAxisDensityCircles, _PureComponent); - - function ParallelCoordinatesAxisDensityCircles() { - classCallCheck(this, ParallelCoordinatesAxisDensityCircles); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - ParallelCoordinatesAxisDensityCircles.prototype.render = function render() { - var _props = this.props, - axis = _props.axis, - variable = _props.variable, - variablesScale = _props.variablesScale, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var otherPosition = variablesScale(variable.key); - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - variable.densityBins.map(function (bin) { - return React__default.createElement('circle', { - key: bin.id, - r: bin.size / 2, - cx: axis === 'y' ? otherPosition : bin.position, - cy: axis === 'y' ? bin.position : otherPosition, - fill: 'rgba(255,0,0,.1)' - }); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: variable.densityBins.map(function (bin) { - return { - key: '' + bin.id, - data: bin, - style: { - r: reactMotion.spring(bin.size / 2, springConfig), - cx: reactMotion.spring(axis === 'y' ? otherPosition : bin.position, springConfig), - cy: reactMotion.spring(axis === 'y' ? bin.position : otherPosition, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref) { - var style = _ref.style, - bin = _ref.data; - return React__default.createElement('circle', _extends({ - key: bin.id - }, style, { - r: Math.max(style.r, 0), - fill: 'rgba(255,0,0,.1)' - })); - }) - ); - } - ); - }; - - return ParallelCoordinatesAxisDensityCircles; - }(React.PureComponent); - - ParallelCoordinatesAxisDensityCircles.propTypes = _extends({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - variable: PropTypes.shape({ - key: PropTypes.string.isRequired, - densityBins: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - size: PropTypes.number.isRequired - })).isRequired - }).isRequired, - variablesScale: PropTypes.func.isRequired - }, core.motionPropTypes); - - var lineGenerator = d3Shape.line().x(function (d) { - return d.x; - }).y(function (d) { - return d.y; - }).curve(core.curveFromProp('catmullRomClosed')); - - var ParallelCoordinatesAxisDensityPoly = function (_PureComponent) { - inherits(ParallelCoordinatesAxisDensityPoly, _PureComponent); - - function ParallelCoordinatesAxisDensityPoly() { - classCallCheck(this, ParallelCoordinatesAxisDensityPoly); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - ParallelCoordinatesAxisDensityPoly.prototype.render = function render() { - var _props = this.props, - axis = _props.axis, - variable = _props.variable, - variablesScale = _props.variablesScale, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var otherPosition = variablesScale(variable.key); - - var axisValue = function axisValue(x, y) { - return axis === 'x' ? x : y; - }; - - var lastIndex = variable.densityBins.length - 1; - var points = variable.densityBins.reduce(function (acc, bin, index) { - if (index === 0) { - acc.push({ - x: axisValue(bin.position - bin.size * 0.5, otherPosition), - y: axisValue(otherPosition, bin.position + bin.size * 0.5) - }); - } - acc.push({ - x: axisValue(bin.position, otherPosition + bin.size * 0.5), - y: axisValue(otherPosition + bin.size * 0.5, bin.position) - }); - if (index === lastIndex) { - acc.push({ - x: axisValue(bin.position + bin.size * 0.5, otherPosition), - y: axisValue(otherPosition, bin.position - bin.size * 0.5) - }); - } - - return acc; - }, []); - - var reversed = [].concat(variable.densityBins).reverse(); - reversed.forEach(function (bin) { - points.push({ - x: axisValue(bin.position, otherPosition - bin.size * 0.5), - y: axisValue(otherPosition - bin.size * 0.5, bin.position) - }); - }); - - if (animate !== true) { - return React__default.createElement('path', { - d: lineGenerator(points), - fill: 'rgba(0,0,0,.06)', - stroke: 'rgba(0,0,0,.3)', - strokeWidth: 1 - }); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - core.SmartMotion, - { - style: function style(spring) { - return { - d: spring(lineGenerator(points), springConfig) - }; - } - }, - function (style) { - return React__default.createElement('path', { - d: style.d, - fill: 'rgba(0,0,0,.06)', - stroke: 'rgba(0,0,0,.3)', - strokeWidth: 1 - }); - } - ); - }; - - return ParallelCoordinatesAxisDensityPoly; - }(React.PureComponent); - - ParallelCoordinatesAxisDensityPoly.propTypes = _extends({ - axis: PropTypes.oneOf(['x', 'y']).isRequired, - variable: PropTypes.shape({ - key: PropTypes.string.isRequired, - densityBins: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - size: PropTypes.number.isRequired - })).isRequired - }).isRequired, - variablesScale: PropTypes.func.isRequired - }, core.motionPropTypes); - - var ParallelCoordinatesAxisDensity = function (_PureComponent) { - inherits(ParallelCoordinatesAxisDensity, _PureComponent); - - function ParallelCoordinatesAxisDensity() { - classCallCheck(this, ParallelCoordinatesAxisDensity); - return possibleConstructorReturn(this, _PureComponent.apply(this, arguments)); - } - - ParallelCoordinatesAxisDensity.prototype.render = function render() { - var _props = this.props, - type = _props.type, - forwardProps = objectWithoutProperties(_props, ['type']); - - - return React__default.createElement( - React.Fragment, - null, - React__default.createElement(ParallelCoordinatesAxisDensityCircles, forwardProps), - React__default.createElement(ParallelCoordinatesAxisDensityPoly, forwardProps) - ); - - if (type === 'poly') { - return React__default.createElement(ParallelCoordinatesAxisDensityPoly, forwardProps); - } - - return React__default.createElement(ParallelCoordinatesAxisDensityCircles, forwardProps); - }; - - return ParallelCoordinatesAxisDensity; - }(React.PureComponent); - - ParallelCoordinatesAxisDensity.propTypes = _extends({ - type: PropTypes.oneOf(['circles', 'poly']).isRequired, - axis: PropTypes.oneOf(['x', 'y']).isRequired, - variable: PropTypes.shape({ - key: PropTypes.string.isRequired, - densityBins: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - size: PropTypes.number.isRequired - })).isRequired - }).isRequired, - variablesScale: PropTypes.func.isRequired - }, core.motionPropTypes); - ParallelCoordinatesAxisDensity.defaultProps = { - type: 'circles' - }; - - var ParallelCoordinates = function (_Component) { - inherits(ParallelCoordinates, _Component); - - function ParallelCoordinates() { - classCallCheck(this, ParallelCoordinates); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - ParallelCoordinates.prototype.render = function render() { - var _props = this.props, - data = _props.data, - variables = _props.variables, - layout = _props.layout, - margin = _props.margin, - width = _props.width, - height = _props.height, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - axesPlan = _props.axesPlan, - axesTicksPosition = _props.axesTicksPosition, - lineGenerator = _props.lineGenerator, - strokeWidth = _props.strokeWidth, - lineOpacity = _props.lineOpacity, - getLineColor = _props.getLineColor, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - isInteractive = _props.isInteractive; - - - var motionProps = { - animate: animate, - motionStiffness: motionStiffness, - motionDamping: motionDamping - }; - - return React__default.createElement( - ParallelCoordinatesLayout, - { - width: width, - height: height, - data: data, - variables: variables, - layout: layout - }, - function (_ref) { - var variablesScale = _ref.variablesScale, - variablesWithScale = _ref.variablesWithScale, - dataWithPoints = _ref.dataWithPoints; - - var axes$$1 = variablesWithScale.map(function (variable) { - return React__default.createElement(axes.Axis, _extends({ - key: variable.key, - axis: layout === 'horizontal' ? 'y' : 'x', - length: layout === 'horizontal' ? height : width, - x: layout === 'horizontal' ? variablesScale(variable.key) : 0, - y: layout === 'horizontal' ? 0 : variablesScale(variable.key), - scale: variable.scale, - ticksPosition: axesTicksPosition, - theme: theme - }, motionProps)); - }); - - var densities = variablesWithScale.filter(function (v) { - return v.enableDensity === true; - }).map(function (variable) { - return React__default.createElement(ParallelCoordinatesAxisDensity, _extends({ - key: variable.key, - type: variable.densityType, - axis: layout === 'horizontal' ? 'y' : 'x', - variable: variable, - variablesScale: variablesScale - }, motionProps)); - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - theme: theme - }, - densities, - axesPlan === 'background' && axes$$1, - dataWithPoints.map(function (datum) { - return React__default.createElement(ParallelCoordinatesLine, _extends({ - key: datum.index, - data: datum, - variables: variables, - lineGenerator: lineGenerator, - points: datum.points, - strokeWidth: strokeWidth, - opacity: lineOpacity, - color: getLineColor(datum), - theme: theme, - showTooltip: showTooltip, - hideTooltip: hideTooltip - }, motionProps)); - }), - axesPlan === 'foreground' && axes$$1 - ); - } - ); - } - ); - }; - - return ParallelCoordinates; - }(React.Component); - - ParallelCoordinates.propTypes = commonPropTypes; - var enhance = compose.apply(undefined, [defaultProps(commonDefaultProps)].concat(commonEnhancers, [core.withMotion(), pure])); - - var ParallelCoordinates$1 = setDisplayName('ParallelCoordinates')(enhance(ParallelCoordinates)); - - var ResponsiveParallelCoordinates = function ResponsiveParallelCoordinates(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(ParallelCoordinates$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var ParallelCoordinatesCanvas = function (_Component) { - inherits(ParallelCoordinatesCanvas, _Component); - - function ParallelCoordinatesCanvas() { - classCallCheck(this, ParallelCoordinatesCanvas); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - ParallelCoordinatesCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ParallelCoordinatesCanvas.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } else { - this.draw(props); - return false; - } - }; - - ParallelCoordinatesCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ParallelCoordinatesCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var layout = props.layout, - dataWithPoints = props.dataWithPoints, - variablesWithScale = props.variablesWithScale, - variablesScale = props.variablesScale, - width = props.width, - height = props.height, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - pixelRatio = props.pixelRatio, - getLineColor = props.getLineColor, - margin = props.margin, - lineOpacity = props.lineOpacity, - strokeWidth = props.strokeWidth, - lineGenerator = props.lineGenerator, - axesTicksPosition = props.axesTicksPosition, - theme = props.theme; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - lineGenerator.context(this.ctx); - dataWithPoints.forEach(function (datum) { - _this2.ctx.save(); - _this2.ctx.globalAlpha = lineOpacity; - - _this2.ctx.beginPath(); - lineGenerator(datum.points); - _this2.ctx.strokeStyle = getLineColor(datum); - _this2.ctx.lineWidth = strokeWidth; - _this2.ctx.stroke(); - - _this2.ctx.restore(); - }); - - variablesWithScale.map(function (variable) { - axes.renderAxisToCanvas(_this2.ctx, { - axis: layout === 'horizontal' ? 'y' : 'x', - scale: variable.scale, - x: layout === 'horizontal' ? variablesScale(variable.key) : 0, - y: layout === 'horizontal' ? 0 : variablesScale(variable.key), - length: layout === 'horizontal' ? height : width, - ticksPosition: axesTicksPosition, - theme: theme - }); - }); - }; - - ParallelCoordinatesCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - pixelRatio = _props.pixelRatio, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - theme = _props.theme, - isInteractive = _props.isInteractive; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function () { - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - } - }); - } - ); - }; - - return ParallelCoordinatesCanvas; - }(React.Component); - - ParallelCoordinatesCanvas.propTypes = _extends({}, commonPropTypes, { - pixelRatio: PropTypes.number.isRequired - }); - var enhance$1 = compose.apply(undefined, [defaultProps(_extends({}, commonDefaultProps, { - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }))].concat(commonEnhancers, [withPropsOnChange(['width', 'height', 'data', 'variables', 'layout'], function (_ref) { - var width = _ref.width, - height = _ref.height, - data = _ref.data, - variables = _ref.variables, - layout = _ref.layout; - return computeParallelCoordinatesLayout({ - width: width, - height: height, - data: data, - variables: variables, - layout: layout - }); - }), pure])); - - var ParallelCoordinatesCanvas$1 = setDisplayName('ParallelCoordinatesCanvas')(enhance$1(ParallelCoordinatesCanvas)); - - var ResponsiveParallelCoordinatesCanvas = function ResponsiveParallelCoordinatesCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(ParallelCoordinatesCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.ParallelCoordinates = ParallelCoordinates$1; - exports.ResponsiveParallelCoordinates = ResponsiveParallelCoordinates; - exports.ParallelCoordinatesCanvas = ParallelCoordinatesCanvas$1; - exports.ResponsiveParallelCoordinatesCanvas = ResponsiveParallelCoordinatesCanvas; - exports.commonPropTypes = commonPropTypes; - exports.commonDefaultProps = commonDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/pie/umd/nivo-pie.js b/packages/pie/umd/nivo-pie.js deleted file mode 100644 index bef7fc6d8..000000000 --- a/packages/pie/umd/nivo-pie.js +++ /dev/null @@ -1,1338 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('d3-shape'), require('recompose/setDisplayName'), require('recompose/compose'), require('recompose/pure'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('@nivo/core'), require('@nivo/legends')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'd3-shape', 'recompose/setDisplayName', 'recompose/compose', 'recompose/pure', 'recompose/defaultProps', 'recompose/withPropsOnChange', '@nivo/core', '@nivo/legends'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.d3,global.RecomposeSetDisplayName,global.RecomposeCompose,global.RecomposePure,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.nivo,global.nivo)); -}(this, (function (exports,React,PropTypes,d3Shape,setDisplayName,compose,pure,defaultProps,withPropsOnChange,core,legends) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var objectWithoutProperties = function (obj, keys) { - var target = {}; - - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; - } - - return target; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var PieLayout = function (_Component) { - inherits(PieLayout, _Component); - - function PieLayout() { - classCallCheck(this, PieLayout); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - PieLayout.prototype.render = function render() { - var _props = this.props, - arcs = _props.arcs, - arcGenerator = _props.arcGenerator, - startAngle = _props.startAngle, - endAngle = _props.endAngle, - width = _props.width, - height = _props.height, - centerX = _props.centerX, - centerY = _props.centerY, - radius = _props.radius, - innerRadius = _props.innerRadius, - debug = _props.debug, - render = _props.children; - - - return render({ - arcs: arcs, - arcGenerator: arcGenerator, - startAngle: startAngle, - endAngle: endAngle, - width: width, - height: height, - centerX: centerX, - centerY: centerY, - radius: radius, - innerRadius: innerRadius, - debug: debug - }); - }; - - return PieLayout; - }(React.Component); - - PieLayout.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - value: PropTypes.number.isRequired - })).isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - fit: PropTypes.bool.isRequired, - sortByValue: PropTypes.bool.isRequired, - startAngle: PropTypes.number.isRequired, - endAngle: PropTypes.number.isRequired, - padAngle: PropTypes.number.isRequired, - arcs: PropTypes.array.isRequired, // computed - arcGenerator: PropTypes.func.isRequired, // computed - centerX: PropTypes.number.isRequired, // computed - centerY: PropTypes.number.isRequired, // computed - radius: PropTypes.number.isRequired, // computed - innerRadius: PropTypes.number.isRequired, // re-computed - cornerRadius: PropTypes.number.isRequired, - debug: PropTypes.shape({ - points: PropTypes.array.isRequired, - box: PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired - }).isRequired, - ratio: PropTypes.number.isRequired - }), // computed - children: PropTypes.func.isRequired - }; - - - var PieLayoutDefaultProps = { - fit: true, - sortByValue: false, - innerRadius: 0, - startAngle: 0, - endAngle: 360, - padAngle: 0, - cornerRadius: 0 - }; - - var enhance = function enhance(Component) { - return compose(defaultProps(PieLayoutDefaultProps), core.withColors(), withPropsOnChange(['width', 'height', 'innerRadius', 'startAngle', 'endAngle', 'fit', 'cornerRadius'], function (_ref) { - var width = _ref.width, - height = _ref.height, - _innerRadius = _ref.innerRadius, - startAngle = _ref.startAngle, - endAngle = _ref.endAngle, - fit = _ref.fit, - cornerRadius = _ref.cornerRadius; - - var radius = Math.min(width, height) / 2; - var innerRadius = radius * Math.min(_innerRadius, 1); - - var centerX = width / 2; - var centerY = height / 2; - - var boundingBox = void 0; - if (fit === true) { - var _computeArcBoundingBo = core.computeArcBoundingBox(centerX, centerY, radius, startAngle - 90, endAngle - 90), - points = _computeArcBoundingBo.points, - box = objectWithoutProperties(_computeArcBoundingBo, ['points']); - - var ratio = Math.min(width / box.width, height / box.height); - - var adjustedBox = { - width: box.width * ratio, - height: box.height * ratio - }; - adjustedBox.x = (width - adjustedBox.width) / 2; - adjustedBox.y = (height - adjustedBox.height) / 2; - - centerX = (centerX - box.x) / box.width * box.width * ratio + adjustedBox.x; - centerY = (centerY - box.y) / box.height * box.height * ratio + adjustedBox.y; - - boundingBox = { box: box, ratio: ratio, points: points }; - - radius = radius * ratio; - innerRadius = innerRadius * ratio; - } - - var arcGenerator = d3Shape.arc().outerRadius(radius).innerRadius(innerRadius).cornerRadius(cornerRadius); - - return { - centerX: centerX, - centerY: centerY, - radius: radius, - innerRadius: innerRadius, - arcGenerator: arcGenerator, - debug: boundingBox - }; - }), withPropsOnChange(['sortByValue', 'padAngle', 'startAngle', 'endAngle'], function (_ref2) { - var sortByValue = _ref2.sortByValue, - padAngle = _ref2.padAngle, - startAngle = _ref2.startAngle, - endAngle = _ref2.endAngle; - - var pie = d3Shape.pie().value(function (d) { - return d.value; - }).padAngle(core.degreesToRadians(padAngle)).startAngle(core.degreesToRadians(startAngle)).endAngle(core.degreesToRadians(endAngle)); - - if (sortByValue !== true) pie.sortValues(null); - - return { pie: pie }; - }), withPropsOnChange(['pie', 'data'], function (_ref3) { - var pie = _ref3.pie, - data = _ref3.data; - return { - arcs: pie(data).map(function (arc) { - var angle = Math.abs(arc.endAngle - arc.startAngle); - - return _extends({}, arc, { - angle: angle, - angleDeg: core.radiansToDegrees(angle) - }); - }) - }; - }), withPropsOnChange(['arcs', 'getColor'], function (_ref4) { - var arcs = _ref4.arcs, - getColor = _ref4.getColor; - return { - arcs: arcs.map(function (arc) { - return _extends({}, arc, { - color: getColor(arc.data) - }); - }) - }; - }), pure)(Component); - }; - var PieLayout$1 = setDisplayName('PieLayout')(enhance(PieLayout)); - - var arcPropType = PropTypes.shape({ - startAngle: PropTypes.number.isRequired, - endAngle: PropTypes.number.isRequired, - angle: PropTypes.number.isRequired, - angleDeg: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - data: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - value: PropTypes.number.isRequired - }).isRequired - }); - - var PiePropTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - value: PropTypes.number.isRequired - })).isRequired, - - // layout - startAngle: PropTypes.number.isRequired, - endAngle: PropTypes.number.isRequired, - fit: PropTypes.bool.isRequired, - padAngle: PropTypes.number.isRequired, - sortByValue: PropTypes.bool.isRequired, - innerRadius: PropTypes.number.isRequired, - cornerRadius: PropTypes.number.isRequired, - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - // radial labels - enableRadialLabels: PropTypes.bool.isRequired, - radialLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - radialLabelsSkipAngle: PropTypes.number, - radialLabelsTextXOffset: PropTypes.number, - radialLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - radialLabelsLinkOffset: PropTypes.number, - radialLabelsLinkDiagonalLength: PropTypes.number, - radialLabelsLinkHorizontalLength: PropTypes.number, - radialLabelsLinkStrokeWidth: PropTypes.number, - radialLabelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - // slices labels - enableSlicesLabels: PropTypes.bool.isRequired, - sliceLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - slicesLabelsSkipAngle: PropTypes.number, - slicesLabelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - // styling - defs: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired - })).isRequired, - fill: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string, - match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired - })).isRequired, - //boundDefs: PropTypes.array.isRequired, // computed - - // interactivity - isInteractive: PropTypes.bool, - onClick: PropTypes.func.isRequired, - - // tooltip - lockTooltip: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - - // legends - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - /* - legendData: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string.isRequired, - fill: PropTypes.string.isRequired, - }) - ).isRequired, - */ - }; - - var PieDefaultProps = { - sortByValue: false, - innerRadius: 0, - padAngle: 0, - cornerRadius: 0, - - // layout - startAngle: 0, - endAngle: core.radiansToDegrees(Math.PI * 2), - fit: true, - - // border - borderWidth: 0, - borderColor: 'inherit:darker(1)', - - // radial labels - enableRadialLabels: true, - radialLabel: 'id', - radialLabelsTextColor: 'theme', - radialLabelsLinkColor: 'theme', - - // slices labels - enableSlicesLabels: true, - sliceLabel: 'value', - slicesLabelsTextColor: 'theme', - - // styling - defs: [], - fill: [], - - // interactivity - isInteractive: true, - onClick: core.noop, - - // tooltip - lockTooltip: true, - - // legends - legends: [] - }; - - var PieSlice = function PieSlice(_ref) { - var data = _ref.data, - path = _ref.path, - color = _ref.color, - fill = _ref.fill, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - theme = _ref.theme; - - var handleTooltip = function handleTooltip(e) { - return showTooltip(React__default.createElement(core.BasicTooltip, { - id: data.label, - value: data.value, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null - }), e); - }; - - return React__default.createElement('path', { - key: data.id, - d: path, - fill: fill, - strokeWidth: borderWidth, - stroke: borderColor, - onMouseEnter: handleTooltip, - onMouseMove: handleTooltip, - onMouseLeave: hideTooltip, - onClick: onClick - }); - }; - - PieSlice.propTypes = { - data: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - value: PropTypes.number.isRequired - }).isRequired, - - path: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, - fill: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - onClick: PropTypes.func, - - theme: PropTypes.shape({ - tooltip: PropTypes.shape({}).isRequired - }).isRequired - }; - - var enhance$1 = compose(withPropsOnChange(['data', 'onClick'], function (_ref2) { - var data = _ref2.data, - _onClick = _ref2.onClick; - return { - onClick: function onClick(event) { - return _onClick(data, event); - } - }; - }), pure); - - var PieSlice$1 = enhance$1(PieSlice); - - var computeRadialLabels = function computeRadialLabels(arcs, _ref) { - var getLabel = _ref.getLabel, - radius = _ref.radius, - skipAngle = _ref.skipAngle, - linkOffset = _ref.linkOffset, - linkDiagonalLength = _ref.linkDiagonalLength, - linkHorizontalLength = _ref.linkHorizontalLength, - textXOffset = _ref.textXOffset; - return arcs.filter(function (arc) { - return skipAngle === 0 || arc.angleDeg > skipAngle; - }).map(function (arc) { - var angle = core.absoluteAngleRadians(core.midAngle(arc) - Math.PI / 2); - var positionA = core.positionFromAngle(angle, radius + linkOffset); - var positionB = core.positionFromAngle(angle, radius + linkOffset + linkDiagonalLength); - - var positionC = void 0; - var labelPosition = void 0; - var textAlign = void 0; - - if (core.absoluteAngleDegrees(core.radiansToDegrees(angle)) < 90 || core.absoluteAngleDegrees(core.radiansToDegrees(angle)) >= 270) { - positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y }; - labelPosition = { - x: positionB.x + linkHorizontalLength + textXOffset, - y: positionB.y - }; - textAlign = 'left'; - } else { - positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y }; - labelPosition = { - x: positionB.x - linkHorizontalLength - textXOffset, - y: positionB.y - }; - textAlign = 'right'; - } - - return { - arc: arc, - text: getLabel(arc.data), - position: labelPosition, - align: textAlign, - line: [positionA, positionB, positionC] - }; - }); - }; - - var lineGenerator = d3Shape.line().x(function (d) { - return d.x; - }).y(function (d) { - return d.y; - }); - - var PieRadialLabels = function (_Component) { - inherits(PieRadialLabels, _Component); - - function PieRadialLabels() { - classCallCheck(this, PieRadialLabels); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - PieRadialLabels.prototype.render = function render() { - var _props = this.props, - arcs = _props.arcs, - label = _props.label, - radius = _props.radius, - skipAngle = _props.skipAngle, - linkOffset = _props.linkOffset, - linkDiagonalLength = _props.linkDiagonalLength, - linkHorizontalLength = _props.linkHorizontalLength, - linkStrokeWidth = _props.linkStrokeWidth, - textXOffset = _props.textXOffset, - textColor = _props.textColor, - linkColor = _props.linkColor, - theme = _props.theme; - - - var labels = computeRadialLabels(arcs, { - getLabel: label, - radius: radius, - skipAngle: skipAngle, - linkOffset: linkOffset, - linkDiagonalLength: linkDiagonalLength, - linkHorizontalLength: linkHorizontalLength, - textXOffset: textXOffset - }); - - return labels.map(function (label) { - return React__default.createElement( - React.Fragment, - { key: label.arc.data.id }, - React__default.createElement('path', { - d: lineGenerator(label.line), - fill: 'none', - style: { fill: 'none', stroke: linkColor(label.arc, theme) }, - strokeWidth: linkStrokeWidth - }), - React__default.createElement( - 'g', - { transform: 'translate(' + label.position.x + ', ' + label.position.y + ')' }, - React__default.createElement( - 'text', - { - textAnchor: core.textPropsByEngine.svg.align[label.align], - dy: '0.3em', - style: _extends({}, theme.labels.text, { - fill: textColor(label.arc.data, theme) - }) - }, - label.text - ) - ) - ); - }); - }; - - return PieRadialLabels; - }(React.Component); - - PieRadialLabels.propTypes = { - arcs: PropTypes.arrayOf(arcPropType).isRequired, - label: PropTypes.func.isRequired, - skipAngle: PropTypes.number.isRequired, - radius: PropTypes.number.isRequired, - linkOffset: PropTypes.number.isRequired, - linkDiagonalLength: PropTypes.number.isRequired, - linkHorizontalLength: PropTypes.number.isRequired, - linkStrokeWidth: PropTypes.number.isRequired, - textXOffset: PropTypes.number.isRequired, - textColor: PropTypes.func.isRequired, - linkColor: PropTypes.func.isRequired, - theme: PropTypes.shape({ - axis: core.axisThemePropType.isRequired, - labels: core.labelsThemePropType.isRequired - }).isRequired - }; - PieRadialLabels.defaultProps = { - skipAngle: 0, - linkOffset: 0, - linkDiagonalLength: 16, - linkHorizontalLength: 24, - linkStrokeWidth: 1, - textXOffset: 6 - }; - - var sliceStyle = { - pointerEvents: 'none' - }; - - var PieSlicesLabels = function (_Component) { - inherits(PieSlicesLabels, _Component); - - function PieSlicesLabels() { - classCallCheck(this, PieSlicesLabels); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - PieSlicesLabels.prototype.render = function render() { - var _props = this.props, - arcs = _props.arcs, - label = _props.label, - radius = _props.radius, - skipAngle = _props.skipAngle, - innerRadius = _props.innerRadius, - textColor = _props.textColor, - theme = _props.theme; - - - var centerRadius = innerRadius + (radius - innerRadius) / 2; - - return React__default.createElement( - React.Fragment, - null, - arcs.filter(function (arc) { - return skipAngle === 0 || arc.angleDeg > skipAngle; - }).map(function (arc) { - var angle = core.midAngle(arc) - Math.PI / 2; - var position = core.positionFromAngle(angle, centerRadius); - - return React__default.createElement( - 'g', - { - key: arc.data.id, - transform: 'translate(' + position.x + ', ' + position.y + ')', - style: sliceStyle - }, - React__default.createElement( - 'text', - { - textAnchor: 'middle', - style: _extends({}, theme.labels.text, { - fill: textColor(arc.data, theme) - }) - }, - label(arc.data) - ) - ); - }) - ); - }; - - return PieSlicesLabels; - }(React.Component); - - PieSlicesLabels.propTypes = { - arcs: PropTypes.arrayOf(arcPropType).isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - skipAngle: PropTypes.number.isRequired, - radius: PropTypes.number.isRequired, - innerRadius: PropTypes.number.isRequired, - textColor: PropTypes.func.isRequired, - theme: PropTypes.shape({ - labels: core.labelsThemePropType.isRequired - }).isRequired - }; - PieSlicesLabels.defaultProps = { - skipAngle: 0 - }; - - var PieLegends = function (_Component) { - inherits(PieLegends, _Component); - - function PieLegends() { - classCallCheck(this, PieLegends); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - PieLegends.prototype.render = function render() { - var _props = this.props, - width = _props.width, - height = _props.height, - legends$$1 = _props.legends, - data = _props.data, - theme = _props.theme; - - - return legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: data, - theme: theme - })); - }); - }; - - return PieLegends; - }(React.Component); - - PieLegends.propTypes = { - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - arcs: PropTypes.arrayOf(arcPropType).isRequired, - data: PropTypes.arrayOf(PropTypes.object).isRequired, - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired, - theme: core.themePropType.isRequired - }; - - - var enhance$2 = function enhance(Component) { - return compose(withPropsOnChange(['arcs'], function (_ref) { - var arcs = _ref.arcs; - return { - data: arcs.map(function (arc) { - return { - id: arc.data.id, - label: arc.data.id, - color: arc.color, - fill: arc.fill - }; - }) - }; - }), pure)(Component); - }; - - var PieLegends$1 = setDisplayName('PieLegends')(enhance$2(PieLegends)); - - var Pie = function (_Component) { - inherits(Pie, _Component); - - function Pie() { - classCallCheck(this, Pie); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - Pie.prototype.render = function render() { - var _props = this.props, - data = _props.data, - sortByValue = _props.sortByValue, - startAngle = _props.startAngle, - endAngle = _props.endAngle, - padAngle = _props.padAngle, - fit = _props.fit, - innerRadius = _props.innerRadius, - cornerRadius = _props.cornerRadius, - margin = _props.margin, - width = _props.width, - height = _props.height, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - colors = _props.colors, - colorBy = _props.colorBy, - borderWidth = _props.borderWidth, - _borderColor = _props.borderColor, - enableRadialLabels = _props.enableRadialLabels, - getRadialLabel = _props.getRadialLabel, - radialLabelsSkipAngle = _props.radialLabelsSkipAngle, - radialLabelsLinkOffset = _props.radialLabelsLinkOffset, - radialLabelsLinkDiagonalLength = _props.radialLabelsLinkDiagonalLength, - radialLabelsLinkHorizontalLength = _props.radialLabelsLinkHorizontalLength, - radialLabelsLinkStrokeWidth = _props.radialLabelsLinkStrokeWidth, - radialLabelsTextXOffset = _props.radialLabelsTextXOffset, - radialLabelsTextColor = _props.radialLabelsTextColor, - radialLabelsLinkColor = _props.radialLabelsLinkColor, - enableSlicesLabels = _props.enableSlicesLabels, - getSliceLabel = _props.getSliceLabel, - slicesLabelsSkipAngle = _props.slicesLabelsSkipAngle, - slicesLabelsTextColor = _props.slicesLabelsTextColor, - theme = _props.theme, - defs = _props.defs, - fill = _props.fill, - isInteractive = _props.isInteractive, - onClick = _props.onClick, - tooltipFormat = _props.tooltipFormat, - tooltip = _props.tooltip, - legends$$1 = _props.legends; - - - var borderColor = core.getInheritedColorGenerator(_borderColor); - - return React__default.createElement( - PieLayout$1, - { - width: width, - height: height, - data: data, - sortByValue: sortByValue, - startAngle: startAngle, - endAngle: endAngle, - fit: fit, - padAngle: padAngle, - innerRadius: innerRadius, - cornerRadius: cornerRadius, - colors: colors, - colorBy: colorBy - }, - function (_ref) { - var centerX = _ref.centerX, - centerY = _ref.centerY, - radius = _ref.radius, - innerRadius = _ref.innerRadius, - arcs = _ref.arcs, - arcGenerator = _ref.arcGenerator; - - var boundDefs = core.bindDefs(defs, arcs, fill, { - dataKey: 'data' - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: boundDefs, - theme: theme - }, - React__default.createElement( - 'g', - { transform: 'translate(' + centerX + ',' + centerY + ')' }, - arcs.map(function (arc) { - return React__default.createElement(PieSlice$1, { - key: arc.data.id, - data: arc.data, - path: arcGenerator(arc), - color: arc.color, - fill: arc.fill ? arc.fill : arc.color, - borderWidth: borderWidth, - borderColor: borderColor(arc), - showTooltip: showTooltip, - hideTooltip: hideTooltip, - tooltipFormat: tooltipFormat, - tooltip: tooltip, - onClick: onClick, - theme: theme - }); - }), - enableRadialLabels && React__default.createElement(PieRadialLabels, { - arcs: arcs, - radius: radius, - label: getRadialLabel, - skipAngle: radialLabelsSkipAngle, - linkOffset: radialLabelsLinkOffset, - linkDiagonalLength: radialLabelsLinkDiagonalLength, - linkHorizontalLength: radialLabelsLinkHorizontalLength, - linkStrokeWidth: radialLabelsLinkStrokeWidth, - textXOffset: radialLabelsTextXOffset, - textColor: core.getInheritedColorGenerator(radialLabelsTextColor, 'labels.text.fill'), - linkColor: core.getInheritedColorGenerator(radialLabelsLinkColor, 'axis.ticks.line.stroke'), - theme: theme - }), - enableSlicesLabels && React__default.createElement(PieSlicesLabels, { - arcs: arcs, - radius: radius, - innerRadius: innerRadius, - theme: theme, - label: getSliceLabel, - skipAngle: slicesLabelsSkipAngle, - textColor: core.getInheritedColorGenerator(slicesLabelsTextColor, 'labels.text.fill') - }) - ), - React__default.createElement(PieLegends$1, { - width: width, - height: height, - arcs: arcs, - legends: legends$$1, - theme: theme - }) - ); - } - ); - } - ); - }; - - return Pie; - }(React.Component); - - Pie.propTypes = PiePropTypes; - - - var enhance$3 = function enhance$$1(Component) { - return compose(defaultProps(PieDefaultProps), core.withTheme(), core.withDimensions(), withPropsOnChange(['radialLabel'], function (_ref3) { - var radialLabel = _ref3.radialLabel; - return { - getRadialLabel: core.getLabelGenerator(radialLabel) - }; - }), withPropsOnChange(['sliceLabel'], function (_ref4) { - var sliceLabel = _ref4.sliceLabel; - return { - getSliceLabel: core.getLabelGenerator(sliceLabel) - }; - }), pure)(Component); - }; - - var Pie$1 = setDisplayName('Pie')(enhance$3(Pie)); - - var ResponsivePie = function ResponsivePie(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(Pie$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var enhance$4 = (function (Component) { - return compose(defaultProps(PieDefaultProps), core.withTheme(), core.withDimensions(), pure)(Component); - }); - - var drawSliceLabels = function drawSliceLabels(ctx, arcs, _ref) { - var arcGenerator = _ref.arcGenerator, - getLabel = _ref.getLabel, - skipAngle = _ref.skipAngle, - getTextColor = _ref.getTextColor, - theme = _ref.theme; - - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.font = theme.labels.text.fontSize + 'px sans-serif'; - - arcs.filter(function (arc) { - return skipAngle === 0 || arc.angleDeg > skipAngle; - }).forEach(function (arc) { - var _arcGenerator$centroi = arcGenerator.centroid(arc), - centroidX = _arcGenerator$centroi[0], - centroidY = _arcGenerator$centroi[1]; - - var sliceLabel = getLabel(arc.data); - var textColor = getTextColor(arc, theme); - - ctx.save(); - ctx.translate(centroidX, centroidY); - ctx.fillStyle = textColor; - ctx.fillText(sliceLabel, 0, 0); - ctx.restore(); - }); - }; - - var drawRadialLabels = function drawRadialLabels(ctx, arcs, _ref2) { - var radius = _ref2.radius, - getLabel = _ref2.getLabel, - skipAngle = _ref2.skipAngle, - linkOffset = _ref2.linkOffset, - linkDiagonalLength = _ref2.linkDiagonalLength, - linkHorizontalLength = _ref2.linkHorizontalLength, - linkStrokeWidth = _ref2.linkStrokeWidth, - textXOffset = _ref2.textXOffset, - getTextColor = _ref2.getTextColor, - getLinkColor = _ref2.getLinkColor, - theme = _ref2.theme; - - var radialLabels = computeRadialLabels(arcs, { - getLabel: getLabel, - radius: radius, - skipAngle: skipAngle, - linkOffset: linkOffset, - linkDiagonalLength: linkDiagonalLength, - linkHorizontalLength: linkHorizontalLength, - textXOffset: textXOffset - }); - - ctx.textBaseline = 'middle'; - ctx.font = theme.labels.text.fontSize + 'px sans-serif'; - - radialLabels.forEach(function (label) { - var dataWithColor = _extends({}, label.arc.data, { - color: label.arc.color - }); - - ctx.save(); - ctx.translate(label.position.x, label.position.y); - ctx.fillStyle = getTextColor(dataWithColor, theme); - ctx.textAlign = core.textPropsByEngine.canvas.align[label.align]; - ctx.fillText(label.text, 0, 0); - ctx.restore(); - - ctx.beginPath(); - ctx.strokeStyle = getLinkColor(dataWithColor, theme); - ctx.lineWidth = linkStrokeWidth; - label.line.forEach(function (point, index) { - if (index === 0) ctx.moveTo(point.x, point.y);else ctx.lineTo(point.x, point.y); - }); - if (linkStrokeWidth > 0) ctx.stroke(); - }); - }; - - var PieTooltip = function PieTooltip(_ref) { - var data = _ref.data, - color = _ref.color, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - theme = _ref.theme; - - return React__default.createElement(core.BasicTooltip, { - id: data.label, - value: data.value, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null - }); - }; - - PieTooltip.propTypes = { - data: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - value: PropTypes.number.isRequired - }).isRequired, - color: PropTypes.string.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - theme: PropTypes.shape({ - tooltip: PropTypes.shape({}).isRequired - }).isRequired - }; - - var PieTooltip$1 = pure(PieTooltip); - - var PieCanvasRenderer = function (_Component) { - inherits(PieCanvasRenderer, _Component); - - function PieCanvasRenderer() { - var _temp, _this, _ret; - - classCallCheck(this, PieCanvasRenderer); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.getArcFromMouse = function (event) { - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var _this$props = _this.props, - centerX = _this$props.centerX, - centerY = _this$props.centerY, - margin = _this$props.margin, - radius = _this$props.radius, - innerRadius = _this$props.innerRadius, - arcs = _this$props.arcs; - - - return core.getHoveredArc(margin.left + centerX, margin.top + centerY, radius, innerRadius, arcs, x, y); - }, _this.handleMouseHover = function (showTooltip, hideTooltip) { - return function (event) { - if (_this.props.isInteractive !== true) return; - - var arc = _this.getArcFromMouse(event); - if (arc) { - showTooltip(React__default.createElement(PieTooltip$1, { data: arc.data, color: arc.color, theme: _this.props.theme }), event); - } else { - hideTooltip(); - } - }; - }, _this.handleMouseLeave = function (hideTooltip) { - return function () { - if (_this.props.isInteractive !== true) return; - - hideTooltip(); - }; - }, _this.handleClick = function (event) { - var arc = _this.getArcFromMouse(event); - if (arc) _this.props.onClick(arc.data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - PieCanvasRenderer.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - PieCanvasRenderer.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - // only update if the DOM needs to be updated - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } - - this.draw(props); - return false; - }; - - PieCanvasRenderer.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - PieCanvasRenderer.prototype.draw = function draw(props) { - var _this2 = this; - - var arcs = props.arcs, - arcGenerator = props.arcGenerator, - width = props.width, - height = props.height, - centerX = props.centerX, - centerY = props.centerY, - radius = props.radius, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - pixelRatio = props.pixelRatio, - margin = props.margin, - borderWidth = props.borderWidth, - borderColor = props.borderColor, - enableSlicesLabels = props.enableSlicesLabels, - enableRadialLabels = props.enableRadialLabels, - legends$$1 = props.legends, - theme = props.theme; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.save(); - this.ctx.translate(margin.left, margin.top); - - arcGenerator.context(this.ctx); - - this.ctx.save(); - this.ctx.translate(centerX, centerY); - - var getBorderColor = core.getInheritedColorGenerator(borderColor); - - arcs.forEach(function (arc) { - _this2.ctx.beginPath(); - _this2.ctx.fillStyle = arc.color; - _this2.ctx.strokeStyle = getBorderColor(_extends({}, arc.data, { color: arc.color })); - _this2.ctx.lineWidth = borderWidth; - arcGenerator(arc); - _this2.ctx.fill(); - if (borderWidth > 0) _this2.ctx.stroke(); - }); - - if (enableSlicesLabels === true) { - var sliceLabel = props.sliceLabel, - slicesLabelsSkipAngle = props.slicesLabelsSkipAngle, - slicesLabelsTextColor = props.slicesLabelsTextColor; - - - drawSliceLabels(this.ctx, arcs, { - arcGenerator: arcGenerator, - skipAngle: slicesLabelsSkipAngle, - getLabel: core.getLabelGenerator(sliceLabel), - getTextColor: core.getInheritedColorGenerator(slicesLabelsTextColor, 'labels.text.fill'), - theme: theme - }); - } - - if (enableRadialLabels === true) { - var radialLabel = props.radialLabel, - radialLabelsSkipAngle = props.radialLabelsSkipAngle, - radialLabelsLinkOffset = props.radialLabelsLinkOffset, - radialLabelsLinkStrokeWidth = props.radialLabelsLinkStrokeWidth, - radialLabelsLinkDiagonalLength = props.radialLabelsLinkDiagonalLength, - radialLabelsLinkHorizontalLength = props.radialLabelsLinkHorizontalLength, - radialLabelsTextXOffset = props.radialLabelsTextXOffset, - radialLabelsTextColor = props.radialLabelsTextColor, - radialLabelsLinkColor = props.radialLabelsLinkColor; - - - drawRadialLabels(this.ctx, arcs, { - radius: radius, - getLabel: core.getLabelGenerator(radialLabel), - skipAngle: radialLabelsSkipAngle, - linkOffset: radialLabelsLinkOffset, - linkDiagonalLength: radialLabelsLinkDiagonalLength, - linkHorizontalLength: radialLabelsLinkHorizontalLength, - linkStrokeWidth: radialLabelsLinkStrokeWidth, - textXOffset: radialLabelsTextXOffset, - getTextColor: core.getInheritedColorGenerator(radialLabelsTextColor, 'labels.text.fill'), - getLinkColor: core.getInheritedColorGenerator(radialLabelsLinkColor, 'axis.ticks.line.stroke'), - theme: theme - }); - } - - this.ctx.restore(); - - legends$$1.forEach(function (legend) { - legends.renderLegendToCanvas(_this2.ctx, _extends({}, legend, { - data: arcs.map(function (arc) { - return { - id: arc.data.id, - label: arc.data.id, - color: arc.color - }; - }), - containerWidth: width, - containerHeight: height - })); - }); - }; - - PieCanvasRenderer.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseLeave: _this3.handleMouseLeave(hideTooltip), - onClick: _this3.handleClick - }); - } - ); - }; - - return PieCanvasRenderer; - }(React.Component); - - PieCanvasRenderer.propTypes = { - arcs: PropTypes.arrayOf(arcPropType).isRequired, - arcGenerator: PropTypes.func.isRequired, - - // resolution - pixelRatio: PropTypes.number.isRequired, - - // dimensions/layout - outerWidth: PropTypes.number.isRequired, - outerHeight: PropTypes.number.isRequired, - centerX: PropTypes.number.isRequired, - centerY: PropTypes.number.isRequired, - margin: PropTypes.object.isRequired, - radius: PropTypes.number.isRequired, - innerRadius: PropTypes.number.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, - - // theming - theme: PropTypes.object.isRequired - }; - - var PieCanvas = function (_Component) { - inherits(PieCanvas, _Component); - - function PieCanvas() { - classCallCheck(this, PieCanvas); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - PieCanvas.prototype.render = function render() { - var _props = this.props, - data = _props.data, - sortByValue = _props.sortByValue, - startAngle = _props.startAngle, - endAngle = _props.endAngle, - fit = _props.fit, - padAngle = _props.padAngle, - innerRadius = _props.innerRadius, - cornerRadius = _props.cornerRadius, - width = _props.width, - height = _props.height, - colors = _props.colors, - colorBy = _props.colorBy, - topProps = objectWithoutProperties(_props, ['data', 'sortByValue', 'startAngle', 'endAngle', 'fit', 'padAngle', 'innerRadius', 'cornerRadius', 'width', 'height', 'colors', 'colorBy']); - - - return React__default.createElement( - PieLayout$1, - { - width: width, - height: height, - data: data, - sortByValue: sortByValue, - startAngle: startAngle, - endAngle: endAngle, - fit: fit, - padAngle: padAngle, - innerRadius: innerRadius, - cornerRadius: cornerRadius, - colors: colors, - colorBy: colorBy - }, - function (props) { - return React__default.createElement(PieCanvasRenderer, _extends({}, topProps, props)); - } - ); - }; - - return PieCanvas; - }(React.Component); - - PieCanvas.propTypes = PiePropTypes; - - - var PieCanvas$1 = setDisplayName('PieCanvas')(enhance$4(PieCanvas)); - - var ResponsivePieCanvas = function ResponsivePieCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(PieCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.PieLayout = PieLayout$1; - exports.Pie = Pie$1; - exports.ResponsivePie = ResponsivePie; - exports.PieCanvas = PieCanvas$1; - exports.ResponsivePieCanvas = ResponsivePieCanvas; - exports.arcPropType = arcPropType; - exports.PiePropTypes = PiePropTypes; - exports.PieDefaultProps = PieDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/radar/umd/nivo-radar.js b/packages/radar/umd/nivo-radar.js deleted file mode 100644 index aa4ca9762..000000000 --- a/packages/radar/umd/nivo-radar.js +++ /dev/null @@ -1,1070 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('prop-types'), require('@nivo/core'), require('d3-shape'), require('react-motion'), require('lodash/range'), require('lodash/isFunction'), require('lodash/sortBy'), require('d3-format'), require('recompose/withState'), require('recompose/withHandlers'), require('lodash/max'), require('recompose/defaultProps'), require('d3-scale'), require('@nivo/legends')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'prop-types', '@nivo/core', 'd3-shape', 'react-motion', 'lodash/range', 'lodash/isFunction', 'lodash/sortBy', 'd3-format', 'recompose/withState', 'recompose/withHandlers', 'lodash/max', 'recompose/defaultProps', 'd3-scale', '@nivo/legends'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.PropTypes,global.nivo,global.d3,global.ReactMotion,global['lodash/range'],global['lodash/isFunction'],global['lodash/sortBy'],global.d3,global.RecomposeWithState,global.RecomposeWithHandlers,global['lodash/max'],global.RecomposeDefaultProps,global.d3,global.nivo)); -}(this, (function (exports,React,compose,withPropsOnChange,pure,PropTypes,core,d3Shape,reactMotion,range,isFunction,sortBy,d3Format,withState,withHandlers,max,defaultProps,d3Scale,legends) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - range = range && range.hasOwnProperty('default') ? range['default'] : range; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - sortBy = sortBy && sortBy.hasOwnProperty('default') ? sortBy['default'] : sortBy; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - withHandlers = withHandlers && withHandlers.hasOwnProperty('default') ? withHandlers['default'] : withHandlers; - max = max && max.hasOwnProperty('default') ? max['default'] : max; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var RadarShapes = function RadarShapes(_ref) { - var data = _ref.data, - keys = _ref.keys, - colorByKey = _ref.colorByKey, - lineGenerator = _ref.lineGenerator, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - fillOpacity = _ref.fillOpacity, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - keys.map(function (key) { - return React__default.createElement('path', { - key: key, - d: lineGenerator(data.map(function (d) { - return d[key]; - })), - fill: colorByKey[key], - fillOpacity: fillOpacity, - stroke: borderColor({ key: key, color: colorByKey[key] }), - strokeWidth: borderWidth - }); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - 'g', - null, - keys.map(function (key) { - return React__default.createElement( - core.SmartMotion, - { - key: key, - style: function style(spring) { - return { - d: spring(lineGenerator(data.map(function (d) { - return d[key]; - })), springConfig), - fill: spring(colorByKey[key], springConfig), - stroke: spring(borderColor({ key: key, color: colorByKey[key] }), springConfig) - }; - } - }, - function (style) { - return React__default.createElement('path', _extends({ fillOpacity: fillOpacity, strokeWidth: borderWidth }, style)); - } - ); - }) - ); - }; - - RadarShapes.propTypes = _extends({ - // data - data: PropTypes.arrayOf(PropTypes.object).isRequired, - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - colorByKey: PropTypes.object.isRequired, - - radiusScale: PropTypes.func.isRequired, - angleStep: PropTypes.number.isRequired, - - curveInterpolator: PropTypes.func.isRequired, - lineGenerator: PropTypes.func.isRequired, - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.func.isRequired, - - // theming - fillOpacity: PropTypes.number.isRequired - - }, core.motionPropTypes); - - var enhance = compose(withPropsOnChange(['borderColor'], function (props) { - return { - borderColor: core.getInheritedColorGenerator(props.borderColor) - }; - }), withPropsOnChange(['radiusScale', 'angleStep', 'curveInterpolator'], function (_ref2) { - var radiusScale = _ref2.radiusScale, - angleStep = _ref2.angleStep, - curveInterpolator = _ref2.curveInterpolator; - return { - lineGenerator: d3Shape.lineRadial().radius(function (d) { - return radiusScale(d); - }).angle(function (d, i) { - return i * angleStep; - }).curve(curveInterpolator) - }; - }), pure); - - var RadarShapes$1 = enhance(RadarShapes); - - var textAnchorFromAngle = function textAnchorFromAngle(_angle) { - var angle = core.radiansToDegrees(_angle) + 90; - if (angle <= 10 || angle >= 350 || angle >= 170 && angle <= 190) return 'middle'; - if (angle > 180) return 'end'; - return 'start'; - }; - - var renderLabel = function renderLabel(label, theme, labelComponent) { - var labelNode = void 0; - if (labelComponent === undefined) { - labelNode = React__default.createElement( - 'text', - { style: theme.axis.ticks.text, dy: '0.5em', textAnchor: label.anchor }, - label.id - ); - } else { - labelNode = React__default.createElement(labelComponent, label); - } - - return React__default.createElement( - 'g', - { key: label.id, transform: 'translate(' + label.x + ', ' + label.y + ')' }, - labelNode - ); - }; - - var RadarGridLabels = function RadarGridLabels(_ref) { - var radius = _ref.radius, - angles = _ref.angles, - indices = _ref.indices, - labelComponent = _ref.label, - labelOffset = _ref.labelOffset, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var springConfig = { - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var labels = indices.map(function (index, i) { - var position = core.positionFromAngle(angles[i], radius + labelOffset); - var textAnchor = textAnchorFromAngle(angles[i]); - - return _extends({ - id: index, - angle: core.radiansToDegrees(angles[i]), - anchor: textAnchor - }, position); - }); - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - labels.map(function (label) { - return renderLabel(label, theme, labelComponent); - }) - ); - } - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: labels.map(function (label) { - return { - key: label.id, - data: label, - style: { - x: reactMotion.spring(label.x, springConfig), - y: reactMotion.spring(label.y, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var data = _ref2.data; - return renderLabel(data, theme, labelComponent); - }) - ); - } - ); - }; - - RadarGridLabels.propTypes = _extends({ - radius: PropTypes.number.isRequired, - angles: PropTypes.arrayOf(PropTypes.number).isRequired, - indices: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - label: PropTypes.func, - labelOffset: PropTypes.number.isRequired, - theme: PropTypes.object.isRequired - }, core.motionPropTypes); - - var RadialGridLabels = pure(RadarGridLabels); - - var levelWillEnter = function levelWillEnter() { - return { r: 0 }; - }; - - var RadarGridLevels = function RadarGridLevels(_ref) { - var shape = _ref.shape, - radii = _ref.radii, - angleStep = _ref.angleStep, - dataLength = _ref.dataLength, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var springConfig = { - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var levelsTransitionProps = { - willEnter: levelWillEnter, - willLeave: function willLeave() { - return { r: reactMotion.spring(0, springConfig) }; - }, - styles: radii.map(function (r, i) { - return { - key: 'level.' + i, - style: { - r: reactMotion.spring(r, springConfig) - } - }; - }) - }; - - if (shape === 'circular') { - if (animate !== true) { - return React__default.createElement( - 'g', - null, - radii.map(function (r, i) { - return React__default.createElement('circle', _extends({ key: 'level.' + i, fill: 'none', r: r }, theme.grid.line)); - }) - ); - } - - return React__default.createElement( - reactMotion.TransitionMotion, - levelsTransitionProps, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style; - return React__default.createElement('circle', _extends({ key: key, fill: 'none', r: style.r }, theme.grid.line)); - }) - ); - } - ); - } - - var radarLineGenerator = d3Shape.lineRadial().angle(function (i) { - return i * angleStep; - }).curve(d3Shape.curveLinearClosed); - - var points = range(dataLength); - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - radii.map(function (radius, i) { - return React__default.createElement('path', _extends({ - key: 'level.' + i, - fill: 'none', - d: radarLineGenerator.radius(radius)(points) - }, theme.grid)); - }) - ); - } - - return React__default.createElement( - reactMotion.TransitionMotion, - levelsTransitionProps, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref3) { - var key = _ref3.key, - style = _ref3.style; - return React__default.createElement('path', _extends({ - key: key, - fill: 'none', - d: radarLineGenerator.radius(style.r)(points) - }, theme.grid)); - }) - ); - } - ); - }; - - RadarGridLevels.propTypes = _extends({ - shape: PropTypes.oneOf(['circular', 'linear']).isRequired, - radii: PropTypes.arrayOf(PropTypes.number).isRequired, - angleStep: PropTypes.number.isRequired, - dataLength: PropTypes.number.isRequired, - - theme: PropTypes.object.isRequired - - }, core.motionPropTypes); - - var RadarGridLevels$1 = pure(RadarGridLevels); - - var RadarGrid = function RadarGrid(_ref) { - var indices = _ref.indices, - shape = _ref.shape, - radius = _ref.radius, - radii = _ref.radii, - angles = _ref.angles, - angleStep = _ref.angleStep, - label = _ref.label, - labelOffset = _ref.labelOffset, - theme = _ref.theme, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React__default.createElement( - 'g', - null, - angles.map(function (angle, i) { - var position = core.positionFromAngle(angle, radius); - return React__default.createElement('line', _extends({ - key: 'axis.' + i, - x1: 0, - y1: 0, - x2: position.x, - y2: position.y - }, theme.grid)); - }), - React__default.createElement(RadarGridLevels$1, _extends({ - shape: shape, - radii: radii, - angleStep: angleStep, - dataLength: indices.length, - theme: theme - }, motionProps)), - React__default.createElement(RadialGridLabels, _extends({ - radius: radius, - angles: angles, - indices: indices, - labelOffset: labelOffset, - theme: theme, - label: label - }, motionProps)) - ); - }; - - RadarGrid.propTypes = _extends({ - indices: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - shape: PropTypes.oneOf(['circular', 'linear']).isRequired, - radius: PropTypes.number.isRequired, - angleStep: PropTypes.number.isRequired, - label: PropTypes.func, - labelOffset: PropTypes.number.isRequired, - theme: PropTypes.object.isRequired - }, core.motionPropTypes); - - var enhance$1 = compose(withPropsOnChange(['indices', 'levels', 'radius', 'angleStep'], function (props) { - return { - radii: range(props.levels).map(function (i) { - return props.radius / props.levels * (i + 1); - }).reverse(), - angles: range(props.indices.length).map(function (i) { - return i * props.angleStep - Math.PI / 2; - }) - }; - }), pure); - - var RadarGrid$1 = enhance$1(RadarGrid); - - var RadarTooltipItem = function RadarTooltipItem(_ref) { - var path = _ref.path, - tipX = _ref.tipX, - tipY = _ref.tipY, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - isHover = _ref.isHover; - return React__default.createElement( - 'g', - null, - React__default.createElement('line', { x1: 0, y1: 0, x2: tipX, y2: tipY, stroke: '#000', strokeOpacity: isHover ? 0.35 : 0 }), - React__default.createElement('path', { - d: path, - fill: '#F00', - fillOpacity: 0, - onMouseEnter: showTooltip, - onMouseMove: showTooltip, - onMouseLeave: hideTooltip - }) - ); - }; - - RadarTooltipItem.propTypes = { - datum: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired, - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - colorByKey: PropTypes.object.isRequired, - - startAngle: PropTypes.number.isRequired, - endAngle: PropTypes.number.isRequired, - radius: PropTypes.number.isRequired, - tipX: PropTypes.number.isRequired, // computed - tipY: PropTypes.number.isRequired, // computed - - arcGenerator: PropTypes.func.isRequired, // computed - path: PropTypes.string.isRequired, // computed - - theme: PropTypes.object.isRequired, - - showTooltip: PropTypes.func.isRequired, // re-computed - hideTooltip: PropTypes.func.isRequired, // re-computed - - isHover: PropTypes.bool.isRequired // computed - }; - - var enhance$2 = compose(withState('isHover', 'setIsHover', false), withPropsOnChange(['datum', 'keys', 'index', 'colorByKey', 'theme', 'tooltipFormat'], function (_ref2) { - var datum = _ref2.datum, - keys = _ref2.keys, - index = _ref2.index, - colorByKey = _ref2.colorByKey, - theme = _ref2.theme, - tooltipFormat = _ref2.tooltipFormat; - - var format = !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format.format(tooltipFormat); - - return { - tooltip: React__default.createElement(core.TableTooltip, { - title: React__default.createElement( - 'strong', - null, - index - ), - rows: sortBy(keys.map(function (key) { - return [React__default.createElement(core.Chip, { key: key, color: colorByKey[key] }), key, format ? format(datum[key]) : datum[key]]; - }), '2').reverse(), - theme: theme - }) - }; - }), withPropsOnChange(['startAngle', 'endAngle', 'radius', 'arcGenerator'], function (_ref3) { - var startAngle = _ref3.startAngle, - endAngle = _ref3.endAngle, - radius = _ref3.radius, - arcGenerator = _ref3.arcGenerator; - - var position = core.positionFromAngle(startAngle + (endAngle - startAngle) * 0.5 - Math.PI / 2, radius); - - return { - path: arcGenerator({ startAngle: startAngle, endAngle: endAngle }), - tipX: position.x, - tipY: position.y - }; - }), withHandlers({ - showTooltip: function showTooltip(_ref4) { - var _showTooltip = _ref4.showTooltip, - setIsHover = _ref4.setIsHover, - tooltip = _ref4.tooltip; - return function (e) { - setIsHover(true); - _showTooltip(tooltip, e); - }; - }, - hideTooltip: function hideTooltip(_ref5) { - var _hideTooltip = _ref5.hideTooltip, - setIsHover = _ref5.setIsHover; - return function () { - setIsHover(false); - _hideTooltip(); - }; - } - }), pure); - - var RadarTooltipItem$1 = enhance$2(RadarTooltipItem); - - var RadarTooltip = function RadarTooltip(_ref) { - var data = _ref.data, - keys = _ref.keys, - getIndex = _ref.getIndex, - colorByKey = _ref.colorByKey, - radius = _ref.radius, - angleStep = _ref.angleStep, - theme = _ref.theme, - tooltipFormat = _ref.tooltipFormat, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - - var arc = d3Shape.arc().outerRadius(radius).innerRadius(0); - - var halfAngleStep = angleStep * 0.5; - var rootStartAngle = -halfAngleStep; - - return React__default.createElement( - 'g', - null, - data.map(function (d) { - var index = getIndex(d); - var startAngle = rootStartAngle; - var endAngle = startAngle + angleStep; - - rootStartAngle += angleStep; - - return React__default.createElement(RadarTooltipItem$1, { - key: index, - datum: d, - keys: keys, - index: index, - colorByKey: colorByKey, - startAngle: startAngle, - endAngle: endAngle, - radius: radius, - arcGenerator: arc, - theme: theme, - tooltipFormat: tooltipFormat, - showTooltip: showTooltip, - hideTooltip: hideTooltip - }); - }) - ); - }; - - RadarTooltip.propTypes = { - data: PropTypes.array.isRequired, - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - getIndex: PropTypes.func.isRequired, - colorByKey: PropTypes.object.isRequired, - - radius: PropTypes.number.isRequired, - angleStep: PropTypes.number.isRequired, - - theme: PropTypes.object.isRequired, - - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) - }; - - var RadarTooltip$1 = pure(RadarTooltip); - - var RadarDots = function (_Component) { - inherits(RadarDots, _Component); - - function RadarDots() { - classCallCheck(this, RadarDots); - return possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - RadarDots.prototype.render = function render() { - var _props = this.props, - data = _props.data, - keys = _props.keys, - getIndex = _props.getIndex, - colorByKey = _props.colorByKey, - radiusScale = _props.radiusScale, - angleStep = _props.angleStep, - symbol = _props.symbol, - size = _props.size, - color = _props.color, - borderWidth = _props.borderWidth, - borderColor = _props.borderColor, - enableLabel = _props.enableLabel, - label = _props.label, - labelFormat = _props.labelFormat, - labelYOffset = _props.labelYOffset, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping; - - - var fillColor = core.getInheritedColorGenerator(color); - var strokeColor = core.getInheritedColorGenerator(borderColor); - var getLabel = core.getLabelGenerator(label, labelFormat); - - var points = data.reduce(function (acc, datum, i) { - var index = getIndex(datum); - keys.forEach(function (key) { - var pointData = { - index: index, - key: key, - value: datum[key], - color: colorByKey[key] - }; - acc.push({ - key: key + '.' + index, - label: enableLabel ? getLabel(pointData) : null, - style: _extends({ - fill: fillColor(pointData), - stroke: strokeColor(pointData) - }, core.positionFromAngle(angleStep * i - Math.PI / 2, radiusScale(datum[key]))), - data: pointData - }); - }); - - return acc; - }, []); - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - points.map(function (point) { - return React__default.createElement(core.DotsItem, { - key: point.key, - x: point.style.x, - y: point.style.y, - symbol: symbol, - size: size, - color: point.style.fill, - borderWidth: borderWidth, - borderColor: point.style.stroke, - label: point.label, - labelYOffset: labelYOffset, - theme: theme - }); - }) - ); - } - - var springConfig = { - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: points.map(function (point) { - return { - key: point.key, - data: point, - style: { - x: reactMotion.spring(point.style.x, springConfig), - y: reactMotion.spring(point.style.y, springConfig), - size: reactMotion.spring(size, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref) { - var key = _ref.key, - style = _ref.style, - point = _ref.data; - return React__default.createElement(core.DotsItem, _extends({ - key: key - }, style, { - symbol: symbol, - color: point.style.fill, - borderWidth: borderWidth, - borderColor: point.style.stroke, - label: point.label, - labelYOffset: labelYOffset, - theme: theme - })); - }) - ); - } - ); - }; - - return RadarDots; - }(React.Component); - - RadarDots.propTypes = _extends({ - data: PropTypes.arrayOf(PropTypes.object).isRequired, - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - getIndex: PropTypes.func.isRequired, - - colorByKey: PropTypes.object.isRequired, - - radiusScale: PropTypes.func.isRequired, - angleStep: PropTypes.number.isRequired, - - symbol: PropTypes.func, - size: PropTypes.number.isRequired, - color: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.string, - labelYOffset: PropTypes.number, - - theme: PropTypes.shape({ - dots: core.dotsThemePropType.isRequired - }).isRequired - - }, core.motionPropTypes); - RadarDots.defaultProps = { - size: 6, - color: 'inherit', - borderWidth: 0, - borderColor: 'inherit', - enableLabel: false, - label: 'value' - }; - - var Radar = function Radar(_ref) { - var data = _ref.data, - keys = _ref.keys, - getIndex = _ref.getIndex, - indices = _ref.indices, - curveInterpolator = _ref.curveInterpolator, - radius = _ref.radius, - radiusScale = _ref.radiusScale, - angleStep = _ref.angleStep, - centerX = _ref.centerX, - centerY = _ref.centerY, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - gridLevels = _ref.gridLevels, - gridShape = _ref.gridShape, - gridLabel = _ref.gridLabel, - gridLabelOffset = _ref.gridLabelOffset, - enableDots = _ref.enableDots, - dotSymbol = _ref.dotSymbol, - dotSize = _ref.dotSize, - dotColor = _ref.dotColor, - dotBorderWidth = _ref.dotBorderWidth, - dotBorderColor = _ref.dotBorderColor, - enableDotLabel = _ref.enableDotLabel, - dotLabel = _ref.dotLabel, - dotLabelFormat = _ref.dotLabelFormat, - dotLabelYOffset = _ref.dotLabelYOffset, - theme = _ref.theme, - fillOpacity = _ref.fillOpacity, - colorByKey = _ref.colorByKey, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - legends$$1 = _ref.legends; - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var legendData = keys.map(function (key) { - return { - id: key, - label: key, - color: colorByKey[key] - }; - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - React__default.createElement( - 'g', - { transform: 'translate(' + centerX + ', ' + centerY + ')' }, - React__default.createElement(RadarGrid$1, _extends({ - levels: gridLevels, - shape: gridShape, - radius: radius, - angleStep: angleStep, - theme: theme, - indices: indices, - label: gridLabel, - labelOffset: gridLabelOffset - }, motionProps)), - React__default.createElement(RadarShapes$1, _extends({ - data: data, - keys: keys, - colorByKey: colorByKey, - radiusScale: radiusScale, - angleStep: angleStep, - curveInterpolator: curveInterpolator, - borderWidth: borderWidth, - borderColor: borderColor, - fillOpacity: fillOpacity - }, motionProps)), - isInteractive && React__default.createElement(RadarTooltip$1, { - data: data, - keys: keys, - getIndex: getIndex, - colorByKey: colorByKey, - radius: radius, - angleStep: angleStep, - theme: theme, - tooltipFormat: tooltipFormat, - showTooltip: showTooltip, - hideTooltip: hideTooltip - }), - enableDots && React__default.createElement(RadarDots, _extends({ - data: data, - keys: keys, - getIndex: getIndex, - radiusScale: radiusScale, - angleStep: angleStep, - symbol: dotSymbol, - size: dotSize, - colorByKey: colorByKey, - color: dotColor, - borderWidth: dotBorderWidth, - borderColor: dotBorderColor, - enableLabel: enableDotLabel, - label: dotLabel, - labelFormat: dotLabelFormat, - labelYOffset: dotLabelYOffset, - theme: theme - }, motionProps)) - ), - legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Radar.propTypes = { - // data - data: PropTypes.arrayOf(PropTypes.object).isRequired, - keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - indexBy: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]).isRequired, - maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired, - getIndex: PropTypes.func.isRequired, // computed - indices: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, // computed - - centerX: PropTypes.number.isRequired, // computed - centerY: PropTypes.number.isRequired, // computed - - radius: PropTypes.number.isRequired, // computed - radiusScale: PropTypes.func.isRequired, // computed - angleStep: PropTypes.number.isRequired, // computed - - curve: core.closedCurvePropType.isRequired, - curveInterpolator: PropTypes.func.isRequired, // computed - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - // grid - gridLevels: PropTypes.number, - gridShape: PropTypes.oneOf(['circular', 'linear']), - gridLabel: PropTypes.func, - gridLabelOffset: PropTypes.number, - - // dots - enableDots: PropTypes.bool.isRequired, - dotSymbol: PropTypes.func, - dotSize: PropTypes.number, - dotColor: PropTypes.any, - dotBorderWidth: PropTypes.number, - dotBorderColor: PropTypes.any, - enableDotLabel: PropTypes.bool, - dotLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - dotLabelFormat: PropTypes.string, - dotLabelYOffset: PropTypes.number, - - // theming - getColor: PropTypes.func.isRequired, // computed - colorByKey: PropTypes.object.isRequired, // computed - fillOpacity: PropTypes.number.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }; - - var RadarDefaultProps = { - maxValue: 'auto', - - curve: 'linearClosed', - - // border - borderWidth: 2, - borderColor: 'inherit', - - // grid - gridLevels: 5, - gridShape: 'circular', - gridLabelOffset: 16, - - // dots - enableDots: true, - - // theming - fillOpacity: 0.15, - - // interactivity - isInteractive: true, - - legends: [] - }; - - var enhance$3 = compose(defaultProps(RadarDefaultProps), core.withTheme(), core.withColors({ - defaultColorBy: 'key' - }), core.withCurve(), core.withDimensions(), core.withMotion(), withPropsOnChange(['indexBy'], function (_ref3) { - var indexBy = _ref3.indexBy; - return { - getIndex: core.getAccessorFor(indexBy) - }; - }), withPropsOnChange(['data', 'getIndex'], function (_ref4) { - var data = _ref4.data, - getIndex = _ref4.getIndex; - return { - indices: data.map(getIndex) - }; - }), withPropsOnChange(['keys', 'getColor'], function (_ref5) { - var keys = _ref5.keys, - getColor = _ref5.getColor; - return { - colorByKey: keys.reduce(function (mapping, key, index) { - mapping[key] = getColor({ key: key, index: index }); - return mapping; - }, {}) - }; - }), withPropsOnChange(['keys', 'indexBy', 'data', 'maxValue', 'width', 'height'], function (_ref6) { - var data = _ref6.data, - keys = _ref6.keys, - _maxValue = _ref6.maxValue, - width = _ref6.width, - height = _ref6.height; - - var maxValue = _maxValue !== 'auto' ? _maxValue : max(data.reduce(function (acc, d) { - return [].concat(acc, keys.map(function (key) { - return d[key]; - })); - }, [])); - - var radius = Math.min(width, height) / 2; - var radiusScale = d3Scale.scaleLinear().range([0, radius]).domain([0, maxValue]); - - return { - data: data, - radius: radius, - radiusScale: radiusScale, - centerX: width / 2, - centerY: height / 2, - angleStep: Math.PI * 2 / data.length - }; - }), pure); - - var enhancedRadar = enhance$3(Radar); - enhancedRadar.displayName = 'Radar'; - - var ResponsiveRadar = function ResponsiveRadar(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedRadar, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Radar = enhancedRadar; - exports.ResponsiveRadar = ResponsiveRadar; - exports.RadarDots = RadarDots; - exports.RadarDefaultProps = RadarDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/sankey/umd/nivo-sankey.js b/packages/sankey/umd/nivo-sankey.js deleted file mode 100644 index bd205aad0..000000000 --- a/packages/sankey/umd/nivo-sankey.js +++ /dev/null @@ -1,1114 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/withHandlers'), require('recompose/pure'), require('@nivo/core'), require('react-motion'), require('d3-sankey'), require('@nivo/legends'), require('recompose/defaultProps'), require('recompose/withState'), require('lodash/cloneDeep'), require('lodash/uniq')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/withHandlers', 'recompose/pure', '@nivo/core', 'react-motion', 'd3-sankey', '@nivo/legends', 'recompose/defaultProps', 'recompose/withState', 'lodash/cloneDeep', 'lodash/uniq'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposeWithHandlers,global.RecomposePure,global.nivo,global.ReactMotion,global.d3,global.nivo,global.RecomposeDefaultProps,global.RecomposeWithState,global['lodash/cloneDeep'],global['lodash/uniq'])); -}(this, (function (exports,React,PropTypes,compose,withPropsOnChange,withHandlers,pure,core,reactMotion,d3Sankey,legends,defaultProps,withState,cloneDeep,uniq) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - withHandlers = withHandlers && withHandlers.hasOwnProperty('default') ? withHandlers['default'] : withHandlers; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - cloneDeep = cloneDeep && cloneDeep.hasOwnProperty('default') ? cloneDeep['default'] : cloneDeep; - uniq = uniq && uniq.hasOwnProperty('default') ? uniq['default'] : uniq; - - var SankeyNodesItem = function SankeyNodesItem(_ref) { - var x = _ref.x, - y = _ref.y, - width = _ref.width, - height = _ref.height, - color = _ref.color, - opacity = _ref.opacity, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - handleMouseEnter = _ref.handleMouseEnter, - handleMouseMove = _ref.handleMouseMove, - handleMouseLeave = _ref.handleMouseLeave, - onClick = _ref.onClick; - return React__default.createElement('rect', { - x: x, - y: y, - width: width, - height: height, - fill: color, - fillOpacity: opacity, - strokeWidth: borderWidth, - stroke: borderColor, - strokeOpacity: opacity, - onMouseEnter: handleMouseEnter, - onMouseMove: handleMouseMove, - onMouseLeave: handleMouseLeave, - onClick: onClick - }); - }; - - SankeyNodesItem.propTypes = { - node: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - color: PropTypes.string.isRequired - }), - - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - // interactivity - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - setCurrent: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired, - handleMouseEnter: PropTypes.func.isRequired, - handleMouseMove: PropTypes.func.isRequired, - handleMouseLeave: PropTypes.func.isRequired, - - tooltip: PropTypes.element.isRequired, - theme: PropTypes.object.isRequired - }; - - var enhance = compose(withPropsOnChange(['node', 'theme', 'tooltip'], function (_ref2) { - var node = _ref2.node, - theme = _ref2.theme, - tooltip = _ref2.tooltip; - - if (tooltip) { - return { - tooltip: React__default.createElement(core.BasicTooltip, { id: tooltip(node), enableChip: false, theme: theme }) - }; - } - return { - tooltip: React__default.createElement(core.BasicTooltip, { id: node.label, enableChip: true, color: node.color, theme: theme }) - }; - }), withPropsOnChange(['onClick', 'node'], function (_ref3) { - var _onClick = _ref3.onClick, - node = _ref3.node; - return { - onClick: function onClick(event) { - return _onClick(node, event); - } - }; - }), withHandlers({ - handleMouseEnter: function handleMouseEnter(_ref4) { - var showTooltip = _ref4.showTooltip, - setCurrent = _ref4.setCurrent, - node = _ref4.node, - tooltip = _ref4.tooltip; - return function (e) { - setCurrent(node); - showTooltip(tooltip, e); - }; - }, - handleMouseMove: function handleMouseMove(_ref5) { - var showTooltip = _ref5.showTooltip, - tooltip = _ref5.tooltip; - return function (e) { - showTooltip(tooltip, e); - }; - }, - handleMouseLeave: function handleMouseLeave(_ref6) { - var hideTooltip = _ref6.hideTooltip, - setCurrent = _ref6.setCurrent; - return function () { - setCurrent(null); - hideTooltip(); - }; - } - }), pure); - - var SankeyNodesItem$1 = enhance(SankeyNodesItem); - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var SankeyNodes = function SankeyNodes(_ref) { - var nodes = _ref.nodes, - nodeOpacity = _ref.nodeOpacity, - nodeHoverOpacity = _ref.nodeHoverOpacity, - nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity, - nodeBorderWidth = _ref.nodeBorderWidth, - getNodeBorderColor = _ref.getNodeBorderColor, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - setCurrentNode = _ref.setCurrentNode, - currentNode = _ref.currentNode, - currentLink = _ref.currentLink, - isCurrentNode = _ref.isCurrentNode, - onClick = _ref.onClick, - tooltip = _ref.tooltip, - theme = _ref.theme; - - var getOpacity = function getOpacity(node) { - if (!currentNode && !currentLink) return nodeOpacity; - if (isCurrentNode(node)) return nodeHoverOpacity; - return nodeHoverOthersOpacity; - }; - - if (!animate) { - return React__default.createElement( - React.Fragment, - null, - nodes.map(function (node) { - return React__default.createElement(SankeyNodesItem$1, { - key: node.id, - node: node, - x: node.x, - y: node.y, - width: node.width, - height: node.height, - color: node.color, - opacity: getOpacity(node), - borderWidth: nodeBorderWidth, - borderColor: getNodeBorderColor(node), - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrent: setCurrentNode, - onClick: onClick, - tooltip: tooltip, - theme: theme - }); - }) - ); - } - - var springProps = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: nodes.map(function (node) { - return { - key: node.id, - data: node, - style: _extends({ - x: reactMotion.spring(node.x, springProps), - y: reactMotion.spring(node.y, springProps), - width: reactMotion.spring(node.width, springProps), - height: reactMotion.spring(node.height, springProps), - opacity: reactMotion.spring(getOpacity(node), springProps) - }, core.colorMotionSpring(node.color, springProps)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - node = _ref2.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement(SankeyNodesItem$1, { - key: key, - node: node, - x: style.x, - y: style.y, - width: Math.max(style.width, 0), - height: Math.max(style.height, 0), - color: color, - opacity: style.opacity, - borderWidth: nodeBorderWidth, - borderColor: getNodeBorderColor(_extends({}, node, { color: color })), - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrent: setCurrentNode, - onClick: onClick, - tooltip: tooltip, - theme: theme - }); - }) - ); - } - ); - }; - - SankeyNodes.propTypes = _extends({ - nodes: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - - nodePaddingX: PropTypes.number.isRequired, - nodeOpacity: PropTypes.number.isRequired, - nodeHoverOpacity: PropTypes.number.isRequired, - nodeHoverOthersOpacity: PropTypes.number.isRequired, - nodeBorderWidth: PropTypes.number.isRequired, - getNodeBorderColor: PropTypes.func.isRequired, - - theme: PropTypes.object.isRequired, - tooltip: PropTypes.func - - }, core.motionPropTypes, { - - // interactivity - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - setCurrentNode: PropTypes.func.isRequired, - currentNode: PropTypes.object, - currentLink: PropTypes.object, - isCurrentNode: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }); - - var SankeyNodes$1 = pure(SankeyNodes); - - var sankeyAlignmentPropMapping = { - center: d3Sankey.sankeyCenter, - justify: d3Sankey.sankeyJustify, - left: d3Sankey.sankeyLeft, - right: d3Sankey.sankeyRight - }; - - var sankeyAlignmentPropKeys = Object.keys(sankeyAlignmentPropMapping); - - var sankeyAlignmentPropType = PropTypes.oneOf(sankeyAlignmentPropKeys); - - var sankeyAlignmentFromProp = function sankeyAlignmentFromProp(prop) { - return sankeyAlignmentPropMapping[prop]; - }; - - var blendModePropType = PropTypes.oneOf(['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']); - - var SankeyPropTypes = { - data: PropTypes.shape({ - nodes: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - })).isRequired, - links: PropTypes.arrayOf(PropTypes.shape({ - source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - target: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - })).isRequired - }).isRequired, - - align: sankeyAlignmentPropType.isRequired, - - // nodes - nodeOpacity: PropTypes.number.isRequired, - nodeHoverOpacity: PropTypes.number.isRequired, - nodeHoverOthersOpacity: PropTypes.number.isRequired, - nodeWidth: PropTypes.number.isRequired, - nodePaddingX: PropTypes.number.isRequired, - nodePaddingY: PropTypes.number.isRequired, - nodeBorderWidth: PropTypes.number.isRequired, - nodeBorderColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - - // links - linkOpacity: PropTypes.number.isRequired, - linkHoverOpacity: PropTypes.number.isRequired, - linkHoverOthersOpacity: PropTypes.number.isRequired, - linkContract: PropTypes.number.isRequired, - linkBlendMode: blendModePropType.isRequired, - enableLinkGradient: PropTypes.bool.isRequired, - - // labels - enableLabels: PropTypes.bool.isRequired, - labelPosition: PropTypes.oneOf(['inside', 'outside']).isRequired, - labelPadding: PropTypes.number.isRequired, - labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - getLabelTextColor: PropTypes.func.isRequired, // computed - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - getLabel: PropTypes.func.isRequired, // computed - - // tooltip - nodeTooltip: PropTypes.func, - linkTooltip: PropTypes.func, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }; - - var SankeyDefaultProps = { - align: 'center', - - // nodes - nodeOpacity: 0.75, - nodeHoverOpacity: 1, - nodeHoverOthersOpacity: 0.15, - nodeWidth: 12, - nodePaddingX: 0, - nodePaddingY: 12, - nodeBorderWidth: 1, - nodeBorderColor: 'inherit:darker(0.5)', - - // links - linkOpacity: 0.25, - linkHoverOpacity: 0.6, - linkHoverOthersOpacity: 0.15, - linkContract: 0, - linkBlendMode: 'multiply', - enableLinkGradient: false, - - // labels - enableLabels: true, - label: 'id', - labelPosition: 'inside', - labelPadding: 9, - labelOrientation: 'horizontal', - labelTextColor: 'inherit:darker(0.8)', - - // interactivity - isInteractive: true, - onClick: core.noop, - - legends: [] - }; - - var tooltipStyles = { - container: { - display: 'flex', - alignItems: 'center' - }, - sourceChip: { - marginRight: 7 - }, - targetChip: { - marginLeft: 7, - marginRight: 7 - } - }; - - var TooltipContent = function TooltipContent(_ref) { - var link = _ref.link, - format = _ref.format; - return React__default.createElement( - 'span', - { style: tooltipStyles.container }, - React__default.createElement(core.Chip, { color: link.source.color, style: tooltipStyles.sourceChip }), - React__default.createElement( - 'strong', - null, - link.source.label - ), - ' > ', - React__default.createElement( - 'strong', - null, - link.target.label - ), - React__default.createElement(core.Chip, { color: link.target.color, style: tooltipStyles.targetChip }), - React__default.createElement( - 'strong', - null, - format ? format(link.value) : link.value - ) - ); - }; - - TooltipContent.propTypes = { - link: PropTypes.shape({ - source: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - }).isRequired, - target: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - }).isRequired, - color: PropTypes.string.isRequired, - value: PropTypes.number.isRequired - }).isRequired, - format: PropTypes.func - }; - - var SankeyLinksItem = function SankeyLinksItem(_ref2) { - var path = _ref2.path, - width = _ref2.width, - color = _ref2.color, - opacity = _ref2.opacity, - contract = _ref2.contract, - blendMode = _ref2.blendMode, - enableGradient = _ref2.enableGradient, - handleMouseEnter = _ref2.handleMouseEnter, - handleMouseMove = _ref2.handleMouseMove, - handleMouseLeave = _ref2.handleMouseLeave, - onClick = _ref2.onClick, - link = _ref2.link; - return React__default.createElement( - React.Fragment, - null, - enableGradient && React__default.createElement( - 'linearGradient', - { - id: link.source.id + '.' + link.target.id, - gradientUnits: 'userSpaceOnUse', - x1: link.source.x, - x2: link.target.x - }, - React__default.createElement('stop', { offset: '0%', stopColor: link.source.color }), - React__default.createElement('stop', { offset: '100%', stopColor: link.target.color }) - ), - React__default.createElement('path', { - fill: 'none', - d: path, - strokeWidth: Math.max(1, width - contract * 2), - stroke: enableGradient ? 'url(#' + link.source.id + '.' + link.target.id + ')' : color, - strokeOpacity: opacity, - onMouseEnter: handleMouseEnter, - onMouseMove: handleMouseMove, - onMouseLeave: handleMouseLeave, - onClick: onClick, - style: { mixBlendMode: blendMode } - }) - ); - }; - - SankeyLinksItem.propTypes = { - link: PropTypes.shape({ - source: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - color: PropTypes.string.isRequired - }).isRequired, - target: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - color: PropTypes.string.isRequired - }).isRequired, - color: PropTypes.string.isRequired, - value: PropTypes.number.isRequired - }).isRequired, - - path: PropTypes.string.isRequired, - width: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - contract: PropTypes.number.isRequired, - blendMode: blendModePropType.isRequired, - enableGradient: PropTypes.bool.isRequired, - - theme: PropTypes.object.isRequired, - - // interactivity - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - setCurrent: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired, - handleMouseEnter: PropTypes.func.isRequired, - handleMouseMove: PropTypes.func.isRequired, - handleMouseLeave: PropTypes.func.isRequired - }; - - var enhance$1 = compose(withPropsOnChange(['link', 'theme', 'tooltip', 'tooltipFormat'], function (_ref3) { - var link = _ref3.link, - theme = _ref3.theme, - tooltip = _ref3.tooltip, - tooltipFormat = _ref3.tooltipFormat; - - if (tooltip) { - return { - tooltip: React__default.createElement(core.BasicTooltip, { id: tooltip(link), enableChip: false, theme: theme }) - }; - } - return { - tooltip: React__default.createElement(core.BasicTooltip, { - id: React__default.createElement(TooltipContent, { format: tooltipFormat, link: link }), - theme: theme - }) - }; - }), withPropsOnChange(['onClick', 'link'], function (_ref4) { - var _onClick = _ref4.onClick, - link = _ref4.link; - return { - onClick: function onClick(event) { - return _onClick(link, event); - } - }; - }), withHandlers({ - handleMouseEnter: function handleMouseEnter(_ref5) { - var showTooltip = _ref5.showTooltip, - setCurrent = _ref5.setCurrent, - link = _ref5.link, - tooltip = _ref5.tooltip; - return function (e) { - setCurrent(link); - showTooltip(tooltip, e); - }; - }, - handleMouseMove: function handleMouseMove(_ref6) { - var showTooltip = _ref6.showTooltip, - tooltip = _ref6.tooltip; - return function (e) { - showTooltip(tooltip, e); - }; - }, - handleMouseLeave: function handleMouseLeave(_ref7) { - var hideTooltip = _ref7.hideTooltip, - setCurrent = _ref7.setCurrent; - return function () { - setCurrent(null); - hideTooltip(); - }; - } - }), pure); - - var SankeyLinksItem$1 = enhance$1(SankeyLinksItem); - - var getLinkPath = d3Sankey.sankeyLinkHorizontal(); - - var SankeyLinks = function SankeyLinks(_ref) { - var links = _ref.links, - linkOpacity = _ref.linkOpacity, - linkHoverOpacity = _ref.linkHoverOpacity, - linkHoverOthersOpacity = _ref.linkHoverOthersOpacity, - linkContract = _ref.linkContract, - linkBlendMode = _ref.linkBlendMode, - enableLinkGradient = _ref.enableLinkGradient, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - setCurrentLink = _ref.setCurrentLink, - currentNode = _ref.currentNode, - currentLink = _ref.currentLink, - isCurrentLink = _ref.isCurrentLink, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - theme = _ref.theme; - - var getOpacity = function getOpacity(link) { - if (!currentNode && !currentLink) return linkOpacity; - if (isCurrentLink(link)) return linkHoverOpacity; - return linkHoverOthersOpacity; - }; - - if (animate !== true) { - return React__default.createElement( - 'g', - null, - links.map(function (link) { - return React__default.createElement(SankeyLinksItem$1, { - key: link.source.id + '.' + link.target.id, - link: link, - path: getLinkPath(link), - width: Math.max(1, link.width - linkContract * 2), - color: link.color, - opacity: getOpacity(link), - contract: linkContract, - blendMode: linkBlendMode, - enableGradient: enableLinkGradient, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrent: setCurrentLink, - onClick: onClick, - tooltip: tooltip, - theme: theme, - tooltipFormat: tooltipFormat - }); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React__default.createElement( - React.Fragment, - null, - links.map(function (link) { - return React__default.createElement( - core.SmartMotion, - { - key: link.source.id + '.' + link.target.id, - style: function style(spring) { - return { - path: spring(getLinkPath(link), springConfig), - width: spring(Math.max(1, link.width - linkContract * 2), springConfig), - color: spring(link.color, springConfig), - opacity: spring(getOpacity(link), springConfig), - contract: spring(linkContract, springConfig) - }; - } - }, - function (style) { - return React__default.createElement(SankeyLinksItem$1, _extends({ - link: link - }, style, { - blendMode: linkBlendMode, - enableGradient: enableLinkGradient, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrent: setCurrentLink, - onClick: onClick, - tooltip: tooltip, - theme: theme, - tooltipFormat: tooltipFormat - })); - } - ); - }) - ); - }; - - SankeyLinks.propTypes = _extends({ - links: PropTypes.arrayOf(PropTypes.shape({ - source: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - }).isRequired, - target: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - }).isRequired, - width: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - })).isRequired, - - // links - linkOpacity: PropTypes.number.isRequired, - linkHoverOpacity: PropTypes.number.isRequired, - linkHoverOthersOpacity: PropTypes.number.isRequired, - linkContract: PropTypes.number.isRequired, - linkBlendMode: blendModePropType.isRequired, - enableLinkGradient: PropTypes.bool.isRequired, - - theme: PropTypes.object.isRequired, - tooltip: PropTypes.func - - }, core.motionPropTypes, { - - // interactivity - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - setCurrentLink: PropTypes.func.isRequired, - currentLink: PropTypes.object, - isCurrentLink: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }); - - var SankeyLinks$1 = pure(SankeyLinks); - - var SankeyLabels = function SankeyLabels(_ref) { - var nodes = _ref.nodes, - width = _ref.width, - labelPosition = _ref.labelPosition, - labelPadding = _ref.labelPadding, - labelOrientation = _ref.labelOrientation, - getLabelTextColor = _ref.getLabelTextColor, - theme = _ref.theme, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness; - - var labelRotation = labelOrientation === 'vertical' ? -90 : 0; - var labels = nodes.map(function (node) { - var x = void 0; - var textAnchor = void 0; - if (node.x < width / 2) { - if (labelPosition === 'inside') { - x = node.x1 + labelPadding; - textAnchor = labelOrientation === 'vertical' ? 'middle' : 'start'; - } else { - x = node.x - labelPadding; - textAnchor = labelOrientation === 'vertical' ? 'middle' : 'end'; - } - } else { - if (labelPosition === 'inside') { - x = node.x - labelPadding; - textAnchor = labelOrientation === 'vertical' ? 'middle' : 'end'; - } else { - x = node.x1 + labelPadding; - textAnchor = labelOrientation === 'vertical' ? 'middle' : 'start'; - } - } - - return { - id: node.id, - label: node.label, - x: x, - y: node.y + node.height / 2, - textAnchor: textAnchor, - color: getLabelTextColor(node) - }; - }); - - if (!animate) { - return React__default.createElement( - 'g', - null, - labels.map(function (label) { - return React__default.createElement( - 'text', - { - key: label.id, - alignmentBaseline: 'central', - textAnchor: label.textAnchor, - transform: 'translate(' + label.x + ', ' + label.y + ') rotate(' + labelRotation + ')', - style: _extends({}, theme.labels.text, { - fill: label.color - }) - }, - label.label - ); - }) - ); - } - - var springProps = { - damping: motionDamping, - stiffness: motionStiffness - }; - - return React__default.createElement( - reactMotion.TransitionMotion, - { - styles: labels.map(function (label) { - return { - key: label.id, - data: label, - style: _extends({ - x: reactMotion.spring(label.x, springProps), - y: reactMotion.spring(label.y, springProps), - rotation: reactMotion.spring(labelRotation, springProps) - }, core.colorMotionSpring(label.color, springProps)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - React.Fragment, - null, - interpolatedStyles.map(function (_ref2) { - var key = _ref2.key, - style = _ref2.style, - data = _ref2.data; - - var color = core.getInterpolatedColor(style); - - return React__default.createElement( - 'text', - { - key: key, - transform: 'translate(' + style.x + ', ' + style.y + ') rotate(' + style.rotation + ')', - alignmentBaseline: 'central', - textAnchor: data.textAnchor, - style: _extends({}, theme.labels.text, { - fill: color, - pointerEvents: 'none' - }) - }, - data.label - ); - }) - ); - } - ); - }; - - SankeyLabels.propTypes = _extends({ - nodes: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - x1: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired - })).isRequired, - - width: PropTypes.number.isRequired, - - labelPosition: PropTypes.oneOf(['inside', 'outside']).isRequired, - labelPadding: PropTypes.number.isRequired, - labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, - getLabelTextColor: PropTypes.func.isRequired, - - theme: PropTypes.object.isRequired - - }, core.motionPropTypes); - - var SankeyLabels$1 = pure(SankeyLabels); - - var enhance$2 = (function (Component) { - return compose(defaultProps(SankeyDefaultProps), withState('currentNode', 'setCurrentNode', null), withState('currentLink', 'setCurrentLink', null), core.withColors(), core.withColors({ - colorByKey: 'linkColorBy', - destKey: 'getLinkColor', - defaultColorBy: 'source.id' - }), core.withTheme(), core.withDimensions(), core.withMotion(), withPropsOnChange(['nodeBorderColor'], function (_ref) { - var nodeBorderColor = _ref.nodeBorderColor; - return { - getNodeBorderColor: core.getInheritedColorGenerator(nodeBorderColor) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref2) { - var labelTextColor = _ref2.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor) - }; - }), withPropsOnChange(['label', 'labelFormat'], function (_ref3) { - var label = _ref3.label, - labelFormat = _ref3.labelFormat; - return { - getLabel: core.getLabelGenerator(label, labelFormat) - }; - }), pure)(Component); - }); - - var getId = function getId(d) { - return d.id; - }; - - var Sankey = function Sankey(_ref) { - var _data = _ref.data, - align = _ref.align, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - nodeOpacity = _ref.nodeOpacity, - nodeHoverOpacity = _ref.nodeHoverOpacity, - nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity, - nodeWidth = _ref.nodeWidth, - nodePaddingX = _ref.nodePaddingX, - nodePaddingY = _ref.nodePaddingY, - nodeBorderWidth = _ref.nodeBorderWidth, - getNodeBorderColor = _ref.getNodeBorderColor, - setCurrentNode = _ref.setCurrentNode, - currentNode = _ref.currentNode, - linkOpacity = _ref.linkOpacity, - linkHoverOpacity = _ref.linkHoverOpacity, - linkHoverOthersOpacity = _ref.linkHoverOthersOpacity, - linkContract = _ref.linkContract, - linkBlendMode = _ref.linkBlendMode, - enableLinkGradient = _ref.enableLinkGradient, - getLinkColor = _ref.getLinkColor, - setCurrentLink = _ref.setCurrentLink, - currentLink = _ref.currentLink, - enableLabels = _ref.enableLabels, - getLabel = _ref.getLabel, - labelPosition = _ref.labelPosition, - labelPadding = _ref.labelPadding, - labelOrientation = _ref.labelOrientation, - getLabelTextColor = _ref.getLabelTextColor, - theme = _ref.theme, - getColor = _ref.getColor, - nodeTooltip = _ref.nodeTooltip, - linkTooltip = _ref.linkTooltip, - animate = _ref.animate, - motionDamping = _ref.motionDamping, - motionStiffness = _ref.motionStiffness, - isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - legends$$1 = _ref.legends; - - var sankey = d3Sankey.sankey().nodeAlign(sankeyAlignmentFromProp(align)).nodeWidth(nodeWidth).nodePadding(nodePaddingY).size([width, height]).nodeId(getId); - - // deep clone is required as the sankey diagram mutates data - var data = cloneDeep(_data); - sankey(data); - - data.nodes.forEach(function (node) { - node.color = getColor(node); - node.label = getLabel(node); - node.x = node.x0 + nodePaddingX; - node.y = node.y0; - node.width = Math.max(node.x1 - node.x0 - nodePaddingX * 2, 0); - node.height = Math.max(node.y1 - node.y0, 0); - }); - - data.links.forEach(function (link) { - link.color = getLinkColor(link); - }); - - var legendData = data.nodes.map(function (node) { - return { - id: node.id, - label: node.label, - color: node.color - }; - }); - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var isCurrentNode = function isCurrentNode() { - return false; - }; - var isCurrentLink = function isCurrentLink() { - return false; - }; - - if (currentLink) { - isCurrentNode = function isCurrentNode(_ref2) { - var id = _ref2.id; - return id === currentLink.source.id || id === currentLink.target.id; - }; - isCurrentLink = function isCurrentLink(_ref3) { - var source = _ref3.source, - target = _ref3.target; - return source.id === currentLink.source.id && target.id === currentLink.target.id; - }; - } - - if (currentNode) { - var currentNodeIds = [currentNode.id]; - data.links.filter(function (_ref4) { - var source = _ref4.source, - target = _ref4.target; - return source.id === currentNode.id || target.id === currentNode.id; - }).forEach(function (_ref5) { - var source = _ref5.source, - target = _ref5.target; - - currentNodeIds.push(source.id); - currentNodeIds.push(target.id); - }); - - currentNodeIds = uniq(currentNodeIds); - isCurrentNode = function isCurrentNode(_ref6) { - var id = _ref6.id; - return currentNodeIds.includes(id); - }; - isCurrentLink = function isCurrentLink(_ref7) { - var source = _ref7.source, - target = _ref7.target; - return source.id === currentNode.id || target.id === currentNode.id; - }; - } - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref8) { - var showTooltip = _ref8.showTooltip, - hideTooltip = _ref8.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - React__default.createElement(SankeyLinks$1, _extends({ - links: data.links, - linkContract: linkContract, - linkOpacity: linkOpacity, - linkHoverOpacity: linkHoverOpacity, - linkHoverOthersOpacity: linkHoverOthersOpacity, - linkBlendMode: linkBlendMode, - enableLinkGradient: enableLinkGradient, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrentLink: setCurrentLink, - currentNode: currentNode, - currentLink: currentLink, - isCurrentLink: isCurrentLink, - onClick: onClick, - tooltip: linkTooltip, - theme: theme, - tooltipFormat: tooltipFormat - }, motionProps)), - React__default.createElement(SankeyNodes$1, _extends({ - nodes: data.nodes, - nodePaddingX: nodePaddingX, - nodeOpacity: nodeOpacity, - nodeHoverOpacity: nodeHoverOpacity, - nodeHoverOthersOpacity: nodeHoverOthersOpacity, - nodeBorderWidth: nodeBorderWidth, - getNodeBorderColor: getNodeBorderColor, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - setCurrentNode: setCurrentNode, - currentNode: currentNode, - currentLink: currentLink, - isCurrentNode: isCurrentNode, - onClick: onClick, - tooltip: nodeTooltip, - theme: theme, - tooltipFormat: tooltipFormat - }, motionProps)), - enableLabels && React__default.createElement(SankeyLabels$1, _extends({ - nodes: data.nodes, - width: width, - labelPosition: labelPosition, - labelPadding: labelPadding, - labelOrientation: labelOrientation, - getLabelTextColor: getLabelTextColor, - theme: theme - }, motionProps)), - legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Sankey.propTypes = SankeyPropTypes; - - var enhancedSankey = enhance$2(Sankey); - enhancedSankey.displayName = 'Sankey'; - - var ResponsiveSankey = function ResponsiveSankey(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedSankey, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Sankey = enhancedSankey; - exports.ResponsiveSankey = ResponsiveSankey; - exports.sankeyAlignmentPropMapping = sankeyAlignmentPropMapping; - exports.sankeyAlignmentPropKeys = sankeyAlignmentPropKeys; - exports.sankeyAlignmentPropType = sankeyAlignmentPropType; - exports.sankeyAlignmentFromProp = sankeyAlignmentFromProp; - exports.blendModePropType = blendModePropType; - exports.SankeyPropTypes = SankeyPropTypes; - exports.SankeyDefaultProps = SankeyDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/scales/umd/nivo-scales.js b/packages/scales/umd/nivo-scales.js deleted file mode 100644 index 9ceb16505..000000000 --- a/packages/scales/umd/nivo-scales.js +++ /dev/null @@ -1,392 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-scale'), require('prop-types'), require('d3-time-format'), require('lodash/uniq'), require('lodash/uniqBy'), require('lodash/sortBy'), require('lodash/last'), require('lodash/isDate')) : - typeof define === 'function' && define.amd ? define(['exports', 'd3-scale', 'prop-types', 'd3-time-format', 'lodash/uniq', 'lodash/uniqBy', 'lodash/sortBy', 'lodash/last', 'lodash/isDate'], factory) : - (factory((global.nivo = global.nivo || {}),global.d3,global.PropTypes,global.d3,global['lodash/uniq'],global['lodash/uniqBy'],global['lodash/sortBy'],global['lodash/last'],global['lodash/isDate'])); -}(this, (function (exports,d3Scale,PropTypes,d3TimeFormat,uniq,uniqBy,sortBy,last,isDate) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - uniq = uniq && uniq.hasOwnProperty('default') ? uniq['default'] : uniq; - uniqBy = uniqBy && uniqBy.hasOwnProperty('default') ? uniqBy['default'] : uniqBy; - sortBy = sortBy && sortBy.hasOwnProperty('default') ? sortBy['default'] : sortBy; - last = last && last.hasOwnProperty('default') ? last['default'] : last; - isDate = isDate && isDate.hasOwnProperty('default') ? isDate['default'] : isDate; - - var linearScale = function linearScale(_ref, xy, width, height) { - var axis = _ref.axis, - _ref$min = _ref.min, - min = _ref$min === undefined ? 0 : _ref$min, - _ref$max = _ref.max, - max = _ref$max === undefined ? 'auto' : _ref$max, - _ref$stacked = _ref.stacked, - stacked = _ref$stacked === undefined ? false : _ref$stacked; - - var values = xy[axis]; - var size = axis === 'x' ? width : height; - - var minValue = min; - if (min === 'auto') { - minValue = stacked === true ? values.minStacked : values.min; - } - var maxValue = max; - if (max === 'auto') { - maxValue = stacked === true ? values.maxStacked : values.max; - } - - var scale = d3Scale.scaleLinear().rangeRound(axis === 'x' ? [0, size] : [size, 0]).domain([minValue, maxValue]); - - scale.type = 'linear'; - scale.stacked = stacked; - - return scale; - }; - - var linearScalePropTypes = { - type: PropTypes.oneOf(['linear']).isRequired, - min: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), - max: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), - stacked: PropTypes.bool - }; - - var pointScale = function pointScale(_ref, xy, width, height) { - var axis = _ref.axis; - - var values = xy[axis]; - var size = axis === 'x' ? width : height; - - var scale = d3Scale.scalePoint().range([0, size]).domain(values.all); - - scale.type = 'point'; - - return scale; - }; - - var pointScalePropTypes = { - type: PropTypes.oneOf(['point']).isRequired - }; - - var _precisionCutOffsByTy; - - var TIME_PRECISION_MILLISECOND = 'millisecond'; - var TIME_PRECISION_SECOND = 'second'; - var TIME_PRECISION_MINUTE = 'minute'; - var TIME_PRECISION_HOUR = 'hour'; - var TIME_PRECISION_DAY = 'day'; - var TIME_PRECISION_MONTH = 'month'; - var TIME_PRECISION_YEAR = 'year'; - - var timePrecisions = [TIME_PRECISION_MILLISECOND, TIME_PRECISION_SECOND, TIME_PRECISION_MINUTE, TIME_PRECISION_HOUR, TIME_PRECISION_DAY, TIME_PRECISION_MONTH, TIME_PRECISION_YEAR]; - - var precisionCutOffs = [function (date) { - return date.setMilliseconds(0); - }, function (date) { - return date.setSeconds(0); - }, function (date) { - return date.setMinutes(0); - }, function (date) { - return date.setHours(0); - }, function (date) { - return date.setDate(1); - }, function (date) { - return date.setMonth(0); - }]; - - var precisionCutOffsByType = (_precisionCutOffsByTy = {}, _precisionCutOffsByTy[TIME_PRECISION_MILLISECOND] = [], _precisionCutOffsByTy[TIME_PRECISION_SECOND] = precisionCutOffs.slice(0, 1), _precisionCutOffsByTy[TIME_PRECISION_MINUTE] = precisionCutOffs.slice(0, 2), _precisionCutOffsByTy[TIME_PRECISION_HOUR] = precisionCutOffs.slice(0, 3), _precisionCutOffsByTy[TIME_PRECISION_DAY] = precisionCutOffs.slice(0, 4), _precisionCutOffsByTy[TIME_PRECISION_MONTH] = precisionCutOffs.slice(0, 5), _precisionCutOffsByTy[TIME_PRECISION_YEAR] = precisionCutOffs.slice(0, 6), _precisionCutOffsByTy); - - var createPrecisionMethod = function createPrecisionMethod(precision) { - return function (date) { - precisionCutOffsByType[precision].forEach(function (cutOff) { - cutOff(date); - }); - return date; - }; - }; - - var createDateNormalizer = function createDateNormalizer(_ref) { - var _ref$format = _ref.format, - format = _ref$format === undefined ? 'native' : _ref$format, - _ref$precision = _ref.precision, - precision = _ref$precision === undefined ? 'millisecond' : _ref$precision; - - var precisionFn = createPrecisionMethod(precision); - if (format === 'native') return function (v) { - return precisionFn(v); - }; - - var parseTime = d3TimeFormat.timeParse(format); - return function (v) { - return precisionFn(parseTime(v)); - }; - }; - - var timeScale = function timeScale(_ref, xy, width, height) { - var axis = _ref.axis, - _ref$format = _ref.format, - format = _ref$format === undefined ? 'native' : _ref$format, - _ref$precision = _ref.precision, - precision = _ref$precision === undefined ? TIME_PRECISION_MILLISECOND : _ref$precision, - _ref$min = _ref.min, - min = _ref$min === undefined ? 'auto' : _ref$min, - _ref$max = _ref.max, - max = _ref$max === undefined ? 'auto' : _ref$max; - - var values = xy[axis]; - var size = axis === 'x' ? width : height; - - var normalize = createDateNormalizer({ format: format, precision: precision }); - - var minValue = min; - if (min === 'auto') { - minValue = values.min; - } else if (format !== 'native') { - minValue = normalize(values.min); - } - - var maxValue = max; - if (max === 'auto') { - maxValue = values.max; - } else if (format !== 'native') { - maxValue = normalize(values.max); - } - - var scale = d3Scale.scaleTime().domain([minValue, maxValue]).range([0, size]); - - scale.type = 'time'; - - return scale; - }; - - var timeScalePropTypes = { - type: PropTypes.oneOf(['time']).isRequired, - format: PropTypes.string, - precision: PropTypes.oneOf(timePrecisions) - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var getOtherAxis = function getOtherAxis(axis) { - return axis === 'x' ? 'y' : 'x'; - }; - - var compareValues = function compareValues(a, b) { - return a === b; - }; - var compareDateValues = function compareDateValues(a, b) { - return a.getTime() === b.getTime(); - }; - - var computeXYScalesForSeries = function computeXYScalesForSeries(_series, xScaleSpec, yScaleSpec, width, height) { - var series = _series.map(function (serie) { - return _extends({}, serie, { - data: serie.data.map(function (d) { - return { data: _extends({}, d) }; - }) - }); - }); - - var xy = generateSeriesXY(series, xScaleSpec, yScaleSpec); - if (xScaleSpec.stacked === true) { - stackX(yScaleSpec.type, xy, series); - } - if (yScaleSpec.stacked === true) { - stackY(xScaleSpec.type, xy, series); - } - - var xScale = computeScale(_extends({}, xScaleSpec, { axis: 'x' }), xy, width, height); - var yScale = computeScale(_extends({}, yScaleSpec, { axis: 'y' }), xy, width, height); - - series.forEach(function (serie) { - serie.data.forEach(function (d) { - d.position = { - x: xScale.stacked === true ? d.data.xStacked === null ? null : xScale(d.data.xStacked) : d.data.x === null ? null : xScale(d.data.x), - y: yScale.stacked === true ? d.data.yStacked === null ? null : yScale(d.data.yStacked) : d.data.y === null ? null : yScale(d.data.y) - }; - }); - }); - - return _extends({}, xy, { - series: series, - xScale: xScale, - yScale: yScale - }); - }; - - var computeScale = function computeScale(spec, xy, width, height) { - if (spec.type === 'linear') return linearScale(spec, xy, width, height);else if (spec.type === 'point') return pointScale(spec, xy, width, height);else if (spec.type === 'time') return timeScale(spec, xy, width, height); - }; - - var generateSeriesXY = function generateSeriesXY(series, xScaleSpec, yScaleSpec) { - return { - x: generateSeriesAxis(series, 'x', xScaleSpec), - y: generateSeriesAxis(series, 'y', yScaleSpec) - }; - }; - - /** - * Normalize data according to scale type, (time => Date, linear => Number) - * compute sorted unique values and min/max. - */ - var generateSeriesAxis = function generateSeriesAxis(series, axis, scaleSpec) { - if (scaleSpec.type === 'linear') { - series.forEach(function (serie) { - serie.data.forEach(function (d) { - d.data[axis] = d.data[axis] === null ? null : parseFloat(d.data[axis]); - }); - }); - } else if (scaleSpec.type === 'time' && scaleSpec.format !== 'native') { - var parseTime = createDateNormalizer(scaleSpec); - series.forEach(function (serie) { - serie.data.forEach(function (d) { - d.data[axis] = d.data[axis] === null ? null : parseTime(d.data[axis]); - }); - }); - } - - var all = []; - series.forEach(function (serie) { - serie.data.forEach(function (d) { - all.push(d.data[axis]); - }); - }); - - var min = void 0, - max = void 0; - if (scaleSpec.type === 'linear') { - all = uniq(all); - all = sortBy(all, function (v) { - return v; - }); - min = Math.min.apply(Math, all); - max = Math.max.apply(Math, all); - } else if (scaleSpec.type === 'time') { - all = uniqBy(all, function (v) { - return v.getTime(); - }); - all = all.slice(0).sort(function (a, b) { - return b - a; - }).reverse(); - min = all[0]; - max = last(all); - } else { - all = uniq(all); - min = all[0]; - max = last(all); - } - - return { all: all, min: min, max: max }; - }; - - var stackAxis = function stackAxis(axis, otherType, xy, series) { - var otherAxis = getOtherAxis(axis); - - var all = []; - xy[otherAxis].all.forEach(function (v) { - var compare = isDate(v) ? compareDateValues : compareValues; - var stack = []; - series.forEach(function (serie) { - var datum = serie.data.find(function (d) { - return compare(d.data[otherAxis], v); - }); - var value = null; - var stackValue = null; - if (datum !== undefined) { - value = datum.data[axis]; - if (value !== null) { - var head = last(stack); - if (head === undefined) { - stackValue = value; - } else if (head !== null) { - stackValue = head + value; - } - } - datum.data[axis + 'Stacked'] = stackValue; - } - stack.push(stackValue); - all.push(stackValue); - }); - }); - all = all.filter(function (v) { - return v !== null; - }); - - xy[axis].minStacked = Math.min.apply(Math, all); - xy[axis].maxStacked = Math.max.apply(Math, all); - }; - - var stackX = function stackX(xy, otherType, series) { - return stackAxis('x', xy, otherType, series); - }; - var stackY = function stackY(xy, otherType, series) { - return stackAxis('y', xy, otherType, series); - }; - - var computeAxisSlices = function computeAxisSlices(axis, data) { - var otherAxis = getOtherAxis(axis); - - return data[otherAxis].all.map(function (v) { - var _slice; - - var slice = (_slice = { - id: v - }, _slice[otherAxis] = data[otherAxis + 'Scale'](v), _slice.data = [], _slice); - var compare = isDate(v) ? compareDateValues : compareValues; - data.series.forEach(function (serie) { - var datum = serie.data.find(function (d) { - return compare(d.data[otherAxis], v); - }); - if (datum !== undefined) { - slice.data.push(_extends({}, datum, { - serie: serie - })); - } - }); - slice.data.reverse(); - - return slice; - }); - }; - - var computeXSlices = function computeXSlices(data) { - return computeAxisSlices('x', data); - }; - var computeYSlices = function computeYSlices(data) { - return computeAxisSlices('y', data); - }; - - var scalePropType = PropTypes.oneOfType([PropTypes.shape(linearScalePropTypes), PropTypes.shape(pointScalePropTypes), PropTypes.shape(timeScalePropTypes)]); - - exports.scalePropType = scalePropType; - exports.getOtherAxis = getOtherAxis; - exports.compareValues = compareValues; - exports.compareDateValues = compareDateValues; - exports.computeXYScalesForSeries = computeXYScalesForSeries; - exports.computeScale = computeScale; - exports.generateSeriesXY = generateSeriesXY; - exports.generateSeriesAxis = generateSeriesAxis; - exports.stackAxis = stackAxis; - exports.stackX = stackX; - exports.stackY = stackY; - exports.computeAxisSlices = computeAxisSlices; - exports.computeXSlices = computeXSlices; - exports.computeYSlices = computeYSlices; - exports.linearScale = linearScale; - exports.linearScalePropTypes = linearScalePropTypes; - exports.pointScale = pointScale; - exports.pointScalePropTypes = pointScalePropTypes; - exports.timeScale = timeScale; - exports.timeScalePropTypes = timeScalePropTypes; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/scatterplot/umd/nivo-scatterplot.js b/packages/scatterplot/umd/nivo-scatterplot.js deleted file mode 100644 index ff65fc164..000000000 --- a/packages/scatterplot/umd/nivo-scatterplot.js +++ /dev/null @@ -1,681 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/legends'), require('d3-scale'), require('lodash/minBy'), require('lodash/maxBy'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('@nivo/core'), require('react'), require('react-motion'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/legends', 'd3-scale', 'lodash/minBy', 'lodash/maxBy', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/pure', '@nivo/core', 'react', 'react-motion', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global.d3,global['lodash/minBy'],global['lodash/maxBy'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposePure,global.nivo,global.React,global.ReactMotion,global.RecomposeSetDisplayName)); -}(this, (function (exports,PropTypes,legends,d3Scale,minBy,maxBy,compose,defaultProps,withPropsOnChange,pure,core,React,reactMotion,setDisplayName) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - minBy = minBy && minBy.hasOwnProperty('default') ? minBy['default'] : minBy; - maxBy = maxBy && maxBy.hasOwnProperty('default') ? maxBy['default'] : maxBy; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - var React__default = 'default' in React ? React['default'] : React; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var ScatterPlotPropTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired - })).isRequired - })).isRequired, - - scales: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - axis: PropTypes.oneOf(['x', 'y']).isRequired, - domain: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])])).isRequired - })).isRequired, - - xScale: PropTypes.func.isRequired, // computed - yScale: PropTypes.func.isRequired, // computed - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - - // symbols - symbolSize: PropTypes.oneOfType([PropTypes.func, PropTypes.number]).isRequired, - symbolShape: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'square'])]).isRequired, - - // styling - getColor: PropTypes.func.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired, - - // canvas specific - pixelRatio: PropTypes.number.isRequired - }; - - var ScatterPlotDefaultProps = { - scales: [{ id: 'x', axis: 'x', domain: [0, 'auto'] }, { id: 'y', axis: 'y', domain: [0, 'auto'] }], - - // axes & grid - axisBottom: {}, - axisLeft: {}, - enableGridX: true, - enableGridY: true, - - // symbols - symbolSize: 6, - symbolShape: 'circle', - - // styling - colors: 'nivo', - colorBy: 'id', - - // interactivity - isInteractive: true, - enableStackTooltip: true, - - legends: [], - - // canvas specific - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }; - - var computeScales = function computeScales(_ref) { - var data = _ref.data, - width = _ref.width, - height = _ref.height, - _scales = _ref.scales; - - var scales = _scales.map(function (scaleConfig) { - var id = scaleConfig.id, - axis = scaleConfig.axis, - _scaleConfig$domain = scaleConfig.domain, - min = _scaleConfig$domain[0], - max = _scaleConfig$domain[1]; - - - var minValue = min; - var maxValue = max; - - data.forEach(function (serie) { - if (min === 'auto') { - if (minValue === 'auto') minValue = minBy(serie.data, axis)[axis];else minValue = Math.min(minBy(serie.data, axis)[axis], minValue); - } - if (max === 'auto') { - if (maxValue === 'auto') maxValue = maxBy(serie.data, axis)[axis];else maxValue = Math.max(maxBy(serie.data, axis)[axis], maxValue); - } - }); - - var scale = d3Scale.scaleLinear().domain([minValue, maxValue]); - - // add `id` property to able to target this scale later - scale.id = id; - - if (axis === 'x') scale.range([0, width]);else scale.range([height, 0]); - - return scale; - }); - - return { - xScale: scales.find(function (s) { - return s.id === 'x'; - }), - yScale: scales.find(function (s) { - return s.id === 'y'; - }) - }; - }; - - var enhance = (function (Component) { - return compose(defaultProps(ScatterPlotDefaultProps), core.withTheme(), core.withColors(), core.withDimensions(), core.withMotion(), withPropsOnChange(['symbolSize'], function (_ref2) { - var symbolSize = _ref2.symbolSize; - return { - getSymbolSize: core.getAccessorOrValue(symbolSize) - }; - }), withPropsOnChange(['data', 'width', 'height', 'scales'], computeScales), pure)(Component); - }); - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var ScatterPlotItem = function ScatterPlotItem(_ref) { - var data = _ref.data, - x = _ref.x, - y = _ref.y, - size = _ref.size, - color = _ref.color, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - onClick = _ref.onClick, - tooltip = _ref.tooltip; - - var handleTooltip = function handleTooltip(e) { - return showTooltip(tooltip, e); - }; - - return React__default.createElement('circle', { - cx: x, - cy: y, - r: size / 2, - fill: color, - onMouseEnter: handleTooltip, - onMouseMove: handleTooltip, - onMouseLeave: hideTooltip, - onClick: onClick - }); - }; - - ScatterPlotItem.propTypes = { - data: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - serie: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired - }).isRequired, - - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - onClick: PropTypes.func, - tooltip: PropTypes.element.isRequired, - - theme: PropTypes.shape({ - tooltip: PropTypes.shape({}).isRequired - }).isRequired - }; - - var enhance$1 = compose(withPropsOnChange(['data', 'onClick'], function (_ref2) { - var data = _ref2.data, - _onClick = _ref2.onClick; - return { - onClick: function onClick(event) { - return _onClick(data, event); - } - }; - }), withPropsOnChange(['data', 'color', 'theme', 'tooltip', 'tooltipFormat'], function (_ref3) { - var data = _ref3.data, - color = _ref3.color, - theme = _ref3.theme, - tooltip = _ref3.tooltip, - tooltipFormat = _ref3.tooltipFormat; - return { - tooltip: React__default.createElement(core.BasicTooltip, { - id: data.serie, - value: 'x: ' + data.x + ', y: ' + data.y, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ color: color }, data)) : null - }) - }; - }), pure); - - var ScatterPlotItem$1 = enhance$1(ScatterPlotItem); - - var ScatterPlot = function ScatterPlot(_ref) { - var data = _ref.data, - xScale = _ref.xScale, - yScale = _ref.yScale, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - axisTop = _ref.axisTop, - axisRight = _ref.axisRight, - axisBottom = _ref.axisBottom, - axisLeft = _ref.axisLeft, - enableGridX = _ref.enableGridX, - enableGridY = _ref.enableGridY, - theme = _ref.theme, - getColor = _ref.getColor, - getSymbolSize = _ref.getSymbolSize, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip, - onClick = _ref.onClick, - legends$$1 = _ref.legends; - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var springConfig = { - damping: motionDamping, - stiffness: motionStiffness - }; - - var legendData = data.map(function (serie) { - return { - id: serie.id, - label: serie.id, - color: getColor(serie) - }; - }); - - var symbols = data.reduce(function (agg, serie) { - return [].concat(agg, serie.data.map(function (d) { - return { - id: serie.id + '.' + d.id, - x: xScale(d.x), - y: yScale(d.y), - color: getColor(serie), - data: _extends({}, d, { serie: serie.id }) - }; - })); - }, []); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - React__default.createElement(core.Grid, _extends({ - theme: theme, - width: width, - height: height, - xScale: enableGridX ? xScale : null, - yScale: enableGridY ? yScale : null - }, motionProps)), - React__default.createElement(core.Axes, _extends({ - xScale: xScale, - yScale: yScale, - width: width, - height: height, - theme: theme, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft - }, motionProps)), - !animate && symbols.map(function (symbol) { - return React__default.createElement(ScatterPlotItem$1, { - key: symbol.id, - x: symbol.x, - y: symbol.y, - size: getSymbolSize(symbol.data), - color: symbol.color, - data: symbol.data, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - tooltipFormat: tooltipFormat, - tooltip: tooltip, - onClick: onClick, - theme: theme - }); - }), - animate === true && React__default.createElement( - reactMotion.TransitionMotion, - { - styles: symbols.map(function (symbol) { - return { - key: symbol.id, - data: symbol, - style: { - x: reactMotion.spring(symbol.x, springConfig), - y: reactMotion.spring(symbol.y, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref3) { - var key = _ref3.key, - style = _ref3.style, - symbol = _ref3.data; - return React__default.createElement(ScatterPlotItem$1, { - key: key, - x: style.x, - y: style.y, - size: getSymbolSize(symbol.data), - color: symbol.color, - data: symbol.data, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - tooltipFormat: tooltipFormat, - tooltip: tooltip, - onClick: onClick, - theme: theme - }); - }) - ); - } - ), - legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - ScatterPlot.propTypes = ScatterPlotPropTypes; - - var ScatterPlot$1 = setDisplayName('ScatterPlot')(enhance(ScatterPlot)); - - var ResponsiveScatterPlot = function ResponsiveScatterPlot(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(ScatterPlot$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var findNodeUnderCursor = function findNodeUnderCursor(nodes, margin, x, y) { - return nodes.find(function (node) { - return core.isCursorInRect(node.x + margin.left - node.size / 2, node.y + margin.top - node.size / 2, node.size, node.size, x, y); - }); - }; - - var ScatterPlotCanvas = function (_Component) { - inherits(ScatterPlotCanvas, _Component); - - function ScatterPlotCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, ScatterPlotCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip) { - return function (event) { - if (!_this.items) return; - - var _this$props = _this.props, - margin = _this$props.margin, - theme = _this$props.theme; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var item = findNodeUnderCursor(_this.items, margin, x, y); - if (item !== undefined) { - showTooltip(React__default.createElement(core.BasicTooltip, { - id: item.data.serie, - value: 'x: ' + item.data.x + ', y: ' + item.data.y, - enableChip: true, - color: item.color, - theme: theme - }), event); - } else { - hideTooltip(); - } - }; - }, _this.handleMouseLeave = function (hideTooltip) { - return function () { - hideTooltip(); - }; - }, _this.handleClick = function (event) { - if (!_this.items) return; - - var _this$props2 = _this.props, - margin = _this$props2.margin, - onClick = _this$props2.onClick; - - var _getRelativeCursor2 = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor2[0], - y = _getRelativeCursor2[1]; - - var item = findNodeUnderCursor(_this.items, margin, x, y); - if (item !== undefined) onClick(item.data, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - ScatterPlotCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ScatterPlotCanvas.prototype.shouldComponentUpdate = function shouldComponentUpdate(props) { - if (this.props.outerWidth !== props.outerWidth || this.props.outerHeight !== props.outerHeight || this.props.isInteractive !== props.isInteractive || this.props.theme !== props.theme) { - return true; - } else { - this.draw(props); - return false; - } - }; - - ScatterPlotCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - ScatterPlotCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var data = props.data, - xScale = props.xScale, - yScale = props.yScale, - width = props.width, - height = props.height, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - pixelRatio = props.pixelRatio, - margin = props.margin, - axisTop = props.axisTop, - axisRight = props.axisRight, - axisBottom = props.axisBottom, - axisLeft = props.axisLeft, - enableGridX = props.enableGridX, - enableGridY = props.enableGridY, - symbolSize = props.symbolSize, - theme = props.theme, - getColor = props.getColor, - legends$$1 = props.legends; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - this.ctx.strokeStyle = '#dddddd'; - enableGridX && core.renderGridLinesToCanvas(this.ctx, { - width: width, - height: height, - scale: xScale, - axis: 'x' - }); - enableGridY && core.renderGridLinesToCanvas(this.ctx, { - width: width, - height: height, - scale: yScale, - axis: 'y' - }); - - this.ctx.strokeStyle = '#000000'; - core.renderAxesToCanvas(this.ctx, { - xScale: xScale, - yScale: yScale, - width: width, - height: height, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft, - theme: theme - }); - - var items = data.reduce(function (agg, serie) { - return [].concat(agg, serie.data.map(function (d) { - return { - x: xScale(d.x), - y: yScale(d.y), - size: symbolSize, - color: getColor(serie), - data: _extends({}, d, { serie: serie.id }) - }; - })); - }, []); - - items.forEach(function (d) { - _this2.ctx.fillStyle = d.color; - _this2.ctx.fillRect(d.x - symbolSize / 2, d.y - symbolSize / 2, symbolSize, symbolSize); - }); - - this.items = items; - - var legendData = data.map(function (serie) { - return { - id: serie.id, - label: serie.id, - color: getColor(serie) - }; - }); - - legends$$1.forEach(function (legend) { - legends.renderLegendToCanvas(_this2.ctx, _extends({}, legend, { - data: legendData, - containerWidth: width, - containerHeight: height - })); - }); - }; - - ScatterPlotCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseLeave: _this3.handleMouseLeave(hideTooltip), - onClick: _this3.handleClick - }); - } - ); - }; - - return ScatterPlotCanvas; - }(React.Component); - - ScatterPlotCanvas.propTypes = ScatterPlotPropTypes; - - var ScatterPlotCanvas$1 = enhance(ScatterPlotCanvas); - - var ResponsiveScatterPlotCanvas = function ResponsiveScatterPlotCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(ScatterPlotCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.ScatterPlot = ScatterPlot$1; - exports.ResponsiveScatterPlot = ResponsiveScatterPlot; - exports.ScatterPlotCanvas = ScatterPlotCanvas$1; - exports.ResponsiveScatterPlotCanvas = ResponsiveScatterPlotCanvas; - exports.ScatterPlotPropTypes = ScatterPlotPropTypes; - exports.ScatterPlotDefaultProps = ScatterPlotDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/stream/umd/nivo-stream.js b/packages/stream/umd/nivo-stream.js deleted file mode 100644 index c6ca70ba9..000000000 --- a/packages/stream/umd/nivo-stream.js +++ /dev/null @@ -1,565 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@nivo/core'), require('lodash/isFunction'), require('d3-format'), require('recompose/compose'), require('recompose/pure'), require('recompose/withState'), require('recompose/withHandlers'), require('recompose/withPropsOnChange'), require('@nivo/legends'), require('lodash/min'), require('lodash/max'), require('lodash/range'), require('d3-shape'), require('d3-scale'), require('recompose/defaultProps'), require('lodash/sortBy')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@nivo/core', 'lodash/isFunction', 'd3-format', 'recompose/compose', 'recompose/pure', 'recompose/withState', 'recompose/withHandlers', 'recompose/withPropsOnChange', '@nivo/legends', 'lodash/min', 'lodash/max', 'lodash/range', 'd3-shape', 'd3-scale', 'recompose/defaultProps', 'lodash/sortBy'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.nivo,global['lodash/isFunction'],global.d3,global.RecomposeCompose,global.RecomposePure,global.RecomposeWithState,global.RecomposeWithHandlers,global.RecomposeWithPropsOnChange,global.nivo,global['lodash/min'],global['lodash/max'],global['lodash/range'],global.d3,global.d3,global.RecomposeDefaultProps,global['lodash/sortBy'])); -}(this, (function (exports,React,PropTypes,core,isFunction,d3Format,compose,pure,withState,withHandlers,withPropsOnChange,legends,min,max,range,d3Shape,d3Scale,defaultProps,sortBy) { 'use strict'; - - React = React && React.hasOwnProperty('default') ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - withHandlers = withHandlers && withHandlers.hasOwnProperty('default') ? withHandlers['default'] : withHandlers; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - min = min && min.hasOwnProperty('default') ? min['default'] : min; - max = max && max.hasOwnProperty('default') ? max['default'] : max; - range = range && range.hasOwnProperty('default') ? range['default'] : range; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - sortBy = sortBy && sortBy.hasOwnProperty('default') ? sortBy['default'] : sortBy; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var StreamLayers = function StreamLayers(_ref) { - var layers = _ref.layers, - fillOpacity = _ref.fillOpacity, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - theme = _ref.theme, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping; - - if (animate !== true) { - return React.createElement( - 'g', - null, - layers.map(function (layer, i) { - var id = layer.id, - path = layer.path, - color = layer.color; - - - var handleTooltip = function handleTooltip(e) { - return showTooltip(React.createElement(core.BasicTooltip, { id: id, enableChip: true, color: color, theme: theme }), e); - }; - - return React.createElement('path', { - key: i, - onMouseMove: handleTooltip, - onMouseEnter: handleTooltip, - onMouseLeave: hideTooltip, - d: path, - fill: layer.fill ? layer.fill : layer.color, - fillOpacity: fillOpacity, - stroke: getBorderColor(layer), - strokeWidth: borderWidth - }); - }) - ); - } - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - return React.createElement( - 'g', - null, - layers.map(function (layer, i) { - var id = layer.id, - path = layer.path, - color = layer.color; - - - var handleTooltip = function handleTooltip(e) { - return showTooltip(React.createElement(core.BasicTooltip, { id: id, enableChip: true, color: color, theme: theme }), e); - }; - - return React.createElement( - core.SmartMotion, - { - key: i, - style: function style(spring) { - return { - d: spring(path, springConfig), - fill: spring(color, springConfig), - fillOpacity: spring(fillOpacity, springConfig) - }; - } - }, - function (style) { - return React.createElement('path', _extends({ - onMouseMove: handleTooltip, - onMouseEnter: handleTooltip, - onMouseLeave: hideTooltip - }, style, { - fill: layer.fill ? layer.fill : style.fill, - stroke: getBorderColor(layer), - strokeWidth: borderWidth - })); - } - ); - }) - ); - }; - - StreamLayers.propTypes = _extends({ - fillOpacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - getBorderColor: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired - - }, core.motionPropTypes); - - var StreamSlicesItem = function StreamSlicesItem(_ref) { - var slice = _ref.slice, - height = _ref.height, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - isHover = _ref.isHover; - return React.createElement( - 'g', - { transform: 'translate(' + slice.x + ', 0)' }, - isHover && React.createElement('line', { - x1: 0, - x2: 0, - y1: 0, - y2: height, - stroke: '#000', - strokeOpacity: 0.35, - strokeWidth: 1 - }), - React.createElement('rect', { - x: -20, - width: 40, - height: height, - fill: '#000', - fillOpacity: 0, - onMouseEnter: showTooltip, - onMouseMove: showTooltip, - onMouseLeave: hideTooltip - }) - ); - }; - - StreamSlicesItem.propTypes = { - slice: PropTypes.object.isRequired, - height: PropTypes.number.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - isHover: PropTypes.bool.isRequired, - theme: PropTypes.object.isRequired - }; - - var enhance = compose(withState('isHover', 'setIsHover', false), withPropsOnChange(['slice', 'theme', 'tooltipFormat'], function (_ref2) { - var slice = _ref2.slice, - theme = _ref2.theme, - tooltipFormat = _ref2.tooltipFormat; - - var format = !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format.format(tooltipFormat); - - return { - tooltip: React.createElement(core.TableTooltip, { - theme: theme, - rows: slice.stack.map(function (p) { - return [React.createElement(core.Chip, { key: p.id, color: p.color }), p.id, format ? format(p.value) : p.value]; - }) - }) - }; - }), withHandlers({ - showTooltip: function showTooltip(_ref3) { - var _showTooltip = _ref3.showTooltip, - setIsHover = _ref3.setIsHover, - tooltip = _ref3.tooltip; - return function (e) { - setIsHover(true); - _showTooltip(tooltip, e); - }; - }, - hideTooltip: function hideTooltip(_ref4) { - var _hideTooltip = _ref4.hideTooltip, - setIsHover = _ref4.setIsHover; - return function () { - setIsHover(false); - _hideTooltip(); - }; - } - }), pure); - - var StreamSlicesItem$1 = enhance(StreamSlicesItem); - - var StreamSlices = function StreamSlices(_ref) { - var slices = _ref.slices, - height = _ref.height, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - theme = _ref.theme, - tooltipFormat = _ref.tooltipFormat; - return React.createElement( - 'g', - null, - slices.map(function (slice) { - return React.createElement(StreamSlicesItem$1, { - key: slice.index, - slice: slice, - height: height, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat - }); - }) - ); - }; - - StreamSlices.propTypes = { - slices: PropTypes.arrayOf(PropTypes.shape({ - index: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - stack: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - color: PropTypes.string.isRequired - })).isRequired - })).isRequired, - height: PropTypes.number.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - theme: PropTypes.object.isRequired - }; - - var StreamSlices$1 = pure(StreamSlices); - - var StreamPropTypes = { - // data - data: PropTypes.arrayOf(PropTypes.object).isRequired, - keys: PropTypes.array.isRequired, - - stack: PropTypes.func.isRequired, - xScale: PropTypes.func.isRequired, - yScale: PropTypes.func.isRequired, - - order: core.stackOrderPropType.isRequired, - offsetType: core.stackOffsetPropType.isRequired, - curve: core.areaCurvePropType.isRequired, - areaGenerator: PropTypes.func.isRequired, - - // axes & grid - axisTop: PropTypes.object, - axisRight: PropTypes.object, - axisBottom: PropTypes.object, - axisLeft: PropTypes.object, - enableGridX: PropTypes.bool.isRequired, - enableGridY: PropTypes.bool.isRequired, - - // styling - colors: PropTypes.any.isRequired, - fillOpacity: PropTypes.number.isRequired, - getColor: PropTypes.func.isRequired, // computed - defs: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired - })).isRequired, - fill: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string, - match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired - })).isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.any.isRequired, - getBorderColor: PropTypes.func.isRequired, // computed - - // interactivity - isInteractive: PropTypes.bool, - enableStackTooltip: PropTypes.bool.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }; - - var StreamDefaultProps = { - order: 'none', - offsetType: 'wiggle', - curve: 'catmullRom', - - // axes & grid - axisBottom: {}, - enableGridX: true, - enableGridY: false, - - borderWidth: 0, - borderColor: 'inherit:darker(1)', - - // styling - colors: 'nivo', - fillOpacity: 1, - defs: [], - fill: [], - - // interactivity - isInteractive: true, - - // stack tooltip - enableStackTooltip: true, - - legends: [] - }; - - var stackMin = function stackMin(layers) { - return min(layers.reduce(function (acc, layer) { - return [].concat(acc, layer.map(function (d) { - return d[0]; - })); - }, [])); - }; - var stackMax = function stackMax(layers) { - return max(layers.reduce(function (acc, layer) { - return [].concat(acc, layer.map(function (d) { - return d[1]; - })); - }, [])); - }; - - var enhance$1 = (function (Component) { - return compose(defaultProps(StreamDefaultProps), core.withTheme(), core.withCurve(), core.withDimensions(), core.withMotion(), withPropsOnChange(['curveInterpolator'], function (_ref) { - var curveInterpolator = _ref.curveInterpolator; - return { - areaGenerator: d3Shape.area().x(function (_ref2) { - var x = _ref2.x; - return x; - }).y0(function (_ref3) { - var y1 = _ref3.y1; - return y1; - }).y1(function (_ref4) { - var y2 = _ref4.y2; - return y2; - }).curve(curveInterpolator) - }; - }), withPropsOnChange(['colors'], function (_ref5) { - var colors = _ref5.colors; - return { - getColor: core.getColorRange(colors) - }; - }), withPropsOnChange(['borderColor'], function (_ref6) { - var borderColor = _ref6.borderColor; - return { - getBorderColor: core.getInheritedColorGenerator(borderColor) - }; - }), withPropsOnChange(['keys', 'offsetType', 'order'], function (_ref7) { - var keys = _ref7.keys, - offsetType = _ref7.offsetType, - order = _ref7.order; - return { - stack: d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order)) - }; - }), withPropsOnChange(['stack', 'data', 'width', 'height'], function (_ref8) { - var stack = _ref8.stack, - data = _ref8.data, - width = _ref8.width, - height = _ref8.height; - - var layers = stack(data); - layers.forEach(function (layer) { - layer.forEach(function (point) { - point.value = point.data[layer.key]; - }); - }); - - var minValue = stackMin(layers); - var maxValue = stackMax(layers); - - return { - layers: layers, - xScale: d3Scale.scalePoint().domain(range(data.length)).range([0, width]), - yScale: d3Scale.scaleLinear().domain([minValue, maxValue]).range([height, 0]) - }; - }), pure)(Component); - }); - - var Stream = function Stream(_ref) { - var data = _ref.data, - keys = _ref.keys, - xScale = _ref.xScale, - yScale = _ref.yScale, - layers = _ref.layers, - areaGenerator = _ref.areaGenerator, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - axisTop = _ref.axisTop, - axisRight = _ref.axisRight, - axisBottom = _ref.axisBottom, - axisLeft = _ref.axisLeft, - enableGridX = _ref.enableGridX, - enableGridY = _ref.enableGridY, - theme = _ref.theme, - getColor = _ref.getColor, - fillOpacity = _ref.fillOpacity, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - defs = _ref.defs, - fill = _ref.fill, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - tooltipFormat = _ref.tooltipFormat, - enableStackTooltip = _ref.enableStackTooltip, - legends$$1 = _ref.legends; - - var enhancedLayers = layers.map(function (points, i) { - var layer = points.map(function (point, i) { - return { - index: i, - x: xScale(i), - value: point.value, - y1: yScale(point[0]), - y2: yScale(point[1]) - }; - }); - - return { - id: keys[i], - layer: layer, - path: areaGenerator(layer), - color: getColor(i) - }; - }); - - var slices = range(data.length).map(function (i) { - return { - index: i, - x: enhancedLayers[0].layer[i].x, - stack: sortBy(enhancedLayers.map(function (layer) { - return _extends({ - id: layer.id, - color: layer.color - }, layer.layer[i]); - }), 'y2') - }; - }); - - var motionProps = { - animate: animate, - motionDamping: motionDamping, - motionStiffness: motionStiffness - }; - - var boundDefs = core.bindDefs(defs, enhancedLayers, fill); - - return React.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: boundDefs, - theme: theme - }, - React.createElement(core.Grid, _extends({ - theme: theme, - width: width, - height: height, - xScale: enableGridX ? xScale : null, - yScale: enableGridY ? yScale : null - }, motionProps)), - React.createElement(StreamLayers, _extends({ - layers: enhancedLayers, - fillOpacity: fillOpacity, - borderWidth: borderWidth, - getBorderColor: getBorderColor, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme - }, motionProps)), - React.createElement(core.Axes, _extends({ - xScale: xScale, - yScale: yScale, - width: width, - height: height, - theme: theme, - top: axisTop, - right: axisRight, - bottom: axisBottom, - left: axisLeft - }, motionProps)), - isInteractive && enableStackTooltip && React.createElement(StreamSlices$1, { - slices: slices, - height: height, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat - }), - legends$$1.map(function (legend, i) { - var legendData = enhancedLayers.map(function (l) { - return { - id: l.id, - label: l.id, - color: l.color, - fill: l.fill - }; - }).reverse(); - - return React.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - Stream.propTypes = StreamPropTypes; - - var enhancedStream = enhance$1(Stream); - enhancedStream.displayName = 'Stream'; - - var ResponsiveStream = function ResponsiveStream(props) { - return React.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React.createElement(enhancedStream, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Stream = enhancedStream; - exports.ResponsiveStream = ResponsiveStream; - exports.StreamPropTypes = StreamPropTypes; - exports.StreamDefaultProps = StreamDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/sunburst/umd/nivo-sunburst.js b/packages/sunburst/umd/nivo-sunburst.js deleted file mode 100644 index 45a4a8c4a..000000000 --- a/packages/sunburst/umd/nivo-sunburst.js +++ /dev/null @@ -1,277 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('@nivo/core'), require('lodash/sortBy'), require('lodash/cloneDeep'), require('recompose/defaultProps'), require('recompose/withProps'), require('d3-hierarchy'), require('d3-shape')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', '@nivo/core', 'lodash/sortBy', 'lodash/cloneDeep', 'recompose/defaultProps', 'recompose/withProps', 'd3-hierarchy', 'd3-shape'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.nivo,global['lodash/sortBy'],global['lodash/cloneDeep'],global.RecomposeDefaultProps,global.RecomposeWithProps,global.d3,global.d3)); -}(this, (function (exports,React,PropTypes,compose,withPropsOnChange,pure,core,sortBy,cloneDeep,defaultProps,withProps,d3Hierarchy,d3Shape) { 'use strict'; - - React = React && React.hasOwnProperty('default') ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - sortBy = sortBy && sortBy.hasOwnProperty('default') ? sortBy['default'] : sortBy; - cloneDeep = cloneDeep && cloneDeep.hasOwnProperty('default') ? cloneDeep['default'] : cloneDeep; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withProps = withProps && withProps.hasOwnProperty('default') ? withProps['default'] : withProps; - - var SunburstArc = function SunburstArc(_ref) { - var node = _ref.node, - path = _ref.path, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React.createElement('path', { - d: path, - fill: node.data.color, - stroke: borderColor, - strokeWidth: borderWidth, - onMouseEnter: showTooltip, - onMouseMove: showTooltip, - onMouseLeave: hideTooltip - }); - }; - - SunburstArc.propTypes = { - node: PropTypes.shape({}).isRequired, - arcGenerator: PropTypes.func.isRequired, - path: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - showTooltip: PropTypes.func.isRequired, - hideTooltip: PropTypes.func.isRequired, - theme: PropTypes.object.isRequired - }; - - var enhance = compose(withPropsOnChange(['node', 'arcGenerator'], function (_ref2) { - var node = _ref2.node, - arcGenerator = _ref2.arcGenerator; - return { - path: arcGenerator(node) - }; - }), withPropsOnChange(['node', 'showTooltip', 'theme'], function (_ref3) { - var node = _ref3.node, - _showTooltip = _ref3.showTooltip, - theme = _ref3.theme; - return { - showTooltip: function showTooltip(e) { - _showTooltip(React.createElement(core.BasicTooltip, { - id: node.data.id, - enableChip: true, - color: node.data.color, - value: node.data.percentage.toFixed(2) + '%', - theme: theme - }), e); - } - }; - }), pure); - - var SunburstArc$1 = enhance(SunburstArc); - - var getAncestor = function getAncestor(node) { - if (node.depth === 1) return node; - if (node.parent) return getAncestor(node.parent); - return node; - }; - - var Sunburst = function Sunburst(_ref) { - var nodes = _ref.nodes, - margin = _ref.margin, - centerX = _ref.centerX, - centerY = _ref.centerY, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - arcGenerator = _ref.arcGenerator, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - theme = _ref.theme, - isInteractive = _ref.isInteractive; - - return React.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - React.createElement( - 'g', - { transform: 'translate(' + centerX + ', ' + centerY + ')' }, - nodes.filter(function (node) { - return node.depth > 0; - }).map(function (node, i) { - return React.createElement(SunburstArc$1, { - key: i, - node: node, - arcGenerator: arcGenerator, - borderWidth: borderWidth, - borderColor: borderColor, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme - }); - }) - ) - ); - } - ); - }; - - Sunburst.propTypes = { - data: PropTypes.object.isRequired, - identity: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getIdentity: PropTypes.func.isRequired, // computed - value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - getValue: PropTypes.func.isRequired, // computed - nodes: PropTypes.array.isRequired, // computed - - partition: PropTypes.func.isRequired, // computed - - cornerRadius: PropTypes.number.isRequired, - arcGenerator: PropTypes.func.isRequired, // computed - - radius: PropTypes.number.isRequired, // computed - centerX: PropTypes.number.isRequired, // computed - centerY: PropTypes.number.isRequired, // computed - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - - childColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - - // interactivity - isInteractive: PropTypes.bool - }; - - var SunburstDefaultProps = { - identity: 'id', - value: 'value', - - cornerRadius: 0, - - // border - borderWidth: 1, - borderColor: 'white', - - childColor: 'inherit', - - // interactivity - isInteractive: true - }; - - var enhance$1 = compose(defaultProps(SunburstDefaultProps), core.withTheme(), core.withDimensions(), core.withColors(), withProps(function (_ref3) { - var width = _ref3.width, - height = _ref3.height; - - var radius = Math.min(width, height) / 2; - - var partition = d3Hierarchy.partition().size([2 * Math.PI, radius * radius]); - - return { radius: radius, partition: partition, centerX: width / 2, centerY: height / 2 }; - }), withPropsOnChange(['cornerRadius'], function (_ref4) { - var cornerRadius = _ref4.cornerRadius; - return { - arcGenerator: d3Shape.arc().startAngle(function (d) { - return d.x0; - }).endAngle(function (d) { - return d.x1; - }).innerRadius(function (d) { - return Math.sqrt(d.y0); - }).outerRadius(function (d) { - return Math.sqrt(d.y1); - }).cornerRadius(cornerRadius) - }; - }), withPropsOnChange(['identity'], function (_ref5) { - var identity = _ref5.identity; - return { - getIdentity: core.getAccessorFor(identity) - }; - }), withPropsOnChange(['value'], function (_ref6) { - var value = _ref6.value; - return { - getValue: core.getAccessorFor(value) - }; - }), withPropsOnChange(['data', 'getValue'], function (_ref7) { - var data = _ref7.data, - getValue = _ref7.getValue; - return { - data: d3Hierarchy.hierarchy(data).sum(getValue) - }; - }), withPropsOnChange(['childColor'], function (_ref8) { - var childColor = _ref8.childColor; - return { - getChildColor: core.getInheritedColorGenerator(childColor) - }; - }), withPropsOnChange(['data', 'partition', 'getIdentity', 'getChildColor'], function (_ref9) { - var data = _ref9.data, - partition = _ref9.partition, - getIdentity = _ref9.getIdentity, - getColor = _ref9.getColor, - getChildColor = _ref9.getChildColor; - - var total = data.value; - - var nodes = sortBy(partition(cloneDeep(data)).descendants(), 'depth'); - nodes.forEach(function (node) { - var ancestor = getAncestor(node).data; - - delete node.children; - delete node.data.children; - - Object.assign(node.data, { - id: getIdentity(node.data), - value: node.value, - percentage: 100 * node.value / total, - depth: node.depth, - ancestor: ancestor - }); - - if (node.depth === 1) { - node.data.color = getColor(node.data); - } else if (node.depth > 1) { - node.data.color = getChildColor(node.parent.data); - } - }); - - return { nodes: nodes }; - }), pure); - - var enhancedSunburst = enhance$1(Sunburst); - enhancedSunburst.displayName = 'Sunburst'; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var ResponsiveSunburst = function ResponsiveSunburst(props) { - return React.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React.createElement(enhancedSunburst, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Sunburst = enhancedSunburst; - exports.ResponsiveSunburst = ResponsiveSunburst; - exports.SunburstDefaultProps = SunburstDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/treemap/umd/nivo-treemap.js b/packages/treemap/umd/nivo-treemap.js deleted file mode 100644 index 39e33b857..000000000 --- a/packages/treemap/umd/nivo-treemap.js +++ /dev/null @@ -1,959 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@nivo/core'), require('d3-hierarchy'), require('lodash/cloneDeep'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('react-motion')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@nivo/core', 'd3-hierarchy', 'lodash/cloneDeep', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/pure', 'react-motion'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.nivo,global.d3,global['lodash/cloneDeep'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposePure,global.ReactMotion)); -}(this, (function (exports,React,PropTypes,core,d3Hierarchy,cloneDeep,compose,defaultProps,withPropsOnChange,pure,reactMotion) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - cloneDeep = cloneDeep && cloneDeep.hasOwnProperty('default') ? cloneDeep['default'] : cloneDeep; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var TreeMapNode = function TreeMapNode(_ref) { - var style = _ref.style, - node = _ref.node, - handlers = _ref.handlers, - theme = _ref.theme; - - if (style.width <= 0 || style.height <= 0) return null; - - var rotate = node.label && style.orientLabel && style.height > style.width; - - return React__default.createElement( - 'g', - { transform: 'translate(' + style.x + ',' + style.y + ')' }, - React__default.createElement('rect', _extends({ - width: style.width, - height: style.height, - fill: style.fill ? style.fill : style.color, - strokeWidth: style.borderWidth, - stroke: style.borderColor - }, handlers)), - node.label && React__default.createElement( - 'text', - { - textAnchor: 'middle', - alignmentBaseline: 'central', - style: _extends({}, theme.labels.text, { - fill: style.labelTextColor, - pointerEvents: 'none' - }), - transform: 'translate(' + style.width / 2 + ',' + style.height / 2 + ') rotate(' + (rotate ? -90 : 0) + ')' - }, - node.label - ) - ); - }; - - TreeMapNode.propTypes = { - node: PropTypes.object.isRequired, - style: PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - labelTextColor: PropTypes.string.isRequired, - orientLabel: PropTypes.bool.isRequired - }).isRequired, - handlers: PropTypes.object.isRequired, - theme: core.themePropType.isRequired - }; - - var TreeMapHtmlNode = function TreeMapHtmlNode(_ref) { - var node = _ref.node, - style = _ref.style, - handlers = _ref.handlers; - - if (style.width <= 0 || style.height <= 0) return null; - - var rotate = node.label && style.orientLabel && style.height > style.width; - - return React__default.createElement( - 'div', - _extends({ - id: (node.data && node.data.id ? node.data.id : // replace special characters with "-" - node.id).replace(/[^\w]/gi, '-'), - style: { - boxSizing: 'border-box', - position: 'absolute', - top: style.y, - left: style.x, - width: style.width, - height: style.height, - background: style.color, - overflow: 'hidden', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - borderWidth: style.borderWidth, - borderStyle: 'solid', - borderColor: style.borderColor - } - }, handlers), - node.label !== false && React__default.createElement( - 'span', - { - style: { - color: style.labelTextColor, - transform: 'rotate(' + (rotate ? '-90' : '0') + 'deg)', - WebkitUserSelect: 'none', - MozUserSelect: 'none', - MsUserSelect: 'none', - userSelect: 'none' - } - }, - node.label - ) - ); - }; - - TreeMapHtmlNode.propTypes = { - node: PropTypes.object.isRequired, - style: PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - labelTextColor: PropTypes.string.isRequired, - orientLabel: PropTypes.bool.isRequired - }).isRequired, - handlers: PropTypes.object.isRequired - }; - - /*————————————————————————————————————————————————————————————————————————————— - - Prop types - - —————————————————————————————————————————————————————————————————————————————*/ - - var commonPropTypes = { - // data - // `root` managed by `withHierarchy()` HOC - identity: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - - // dimensions managed by `withDimensions()` HOC - - // styling - // theme managed by `withTheme()` HOC - // colors managed by `withColors()` HOC - - leavesOnly: PropTypes.bool.isRequired, - tile: core.treeMapTilePropType.isRequired, - innerPadding: PropTypes.number.isRequired, - outerPadding: PropTypes.number.isRequired, - - // labels - enableLabel: PropTypes.bool.isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired, - labelFormat: PropTypes.string, - labelSkipSize: PropTypes.number.isRequired, - orientLabel: PropTypes.bool.isRequired, - - // border - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.any.isRequired, - - // interactivity - isInteractive: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired, - tooltip: PropTypes.func - }; - - var TreeMapPropTypes = _extends({}, commonPropTypes, { - nodeComponent: PropTypes.func.isRequired - }, core.defsPropTypes); - - var TreeMapHtmlPropTypes = _extends({}, commonPropTypes, { - nodeComponent: PropTypes.func.isRequired - }); - - var TreeMapCanvasPropTypes = _extends({}, commonPropTypes, { - pixelRatio: PropTypes.number.isRequired - - /*————————————————————————————————————————————————————————————————————————————— - - Default props - - —————————————————————————————————————————————————————————————————————————————*/ - - });var commonDefaultProps = { - // data - identity: 'id', - - tile: 'squarify', - leavesOnly: false, - - // labels - enableLabel: true, - label: 'id', - labelSkipSize: 0, - labelTextColor: 'inherit:darker(1)', - orientLabel: true, - - innerPadding: 0, - outerPadding: 0, - - borderWidth: 0, - borderColor: 'inherit', - - // interactivity - isInteractive: true, - onClick: core.noop - }; - - var TreeMapDefaultProps = _extends({}, commonDefaultProps, { - nodeComponent: TreeMapNode, - defs: [], - fill: [] - }); - - var TreeMapHtmlDefaultProps = _extends({}, commonDefaultProps, { - nodeComponent: TreeMapHtmlNode - }); - - var TreeMapCanvasDefaultProps = _extends({}, commonDefaultProps, { - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }); - - var props = /*#__PURE__*/Object.freeze({ - TreeMapPropTypes: TreeMapPropTypes, - TreeMapHtmlPropTypes: TreeMapHtmlPropTypes, - TreeMapCanvasPropTypes: TreeMapCanvasPropTypes, - TreeMapDefaultProps: TreeMapDefaultProps, - TreeMapHtmlDefaultProps: TreeMapHtmlDefaultProps, - TreeMapCanvasDefaultProps: TreeMapCanvasDefaultProps - }); - - var computeNodePath = function computeNodePath(node, getIdentity) { - return node.ancestors().map(function (ancestor) { - return getIdentity(ancestor.data); - }).join('.'); - }; - - var commonEnhancers = [core.withHierarchy(), core.withDimensions(), core.withColors({ defaultColorBy: 'depth' }), core.withTheme(), core.withMotion(), withPropsOnChange(['identity'], function (_ref) { - var identity = _ref.identity; - return { - getIdentity: core.getAccessorFor(identity) - }; - }), withPropsOnChange(['borderColor'], function (_ref2) { - var borderColor = _ref2.borderColor; - return { - getBorderColor: core.getInheritedColorGenerator(borderColor) - }; - }), withPropsOnChange(['label', 'labelFormat'], function (_ref3) { - var label = _ref3.label, - labelFormat = _ref3.labelFormat; - return { - getLabel: core.getLabelGenerator(label, labelFormat) - }; - }), withPropsOnChange(['labelTextColor'], function (_ref4) { - var labelTextColor = _ref4.labelTextColor; - return { - getLabelTextColor: core.getInheritedColorGenerator(labelTextColor) - }; - }), withPropsOnChange(['width', 'height', 'tile', 'innerPadding', 'outerPadding'], function (_ref5) { - var width = _ref5.width, - height = _ref5.height, - tile = _ref5.tile, - innerPadding = _ref5.innerPadding, - outerPadding = _ref5.outerPadding; - return { - treemap: d3Hierarchy.treemap().size([width, height]).tile(core.treeMapTileFromProp(tile)).round(true).paddingInner(innerPadding).paddingOuter(outerPadding) - }; - }), withPropsOnChange(['root', 'treemap', 'leavesOnly', 'getIdentity', 'getColor'], function (_ref6) { - var _root = _ref6.root, - treemap = _ref6.treemap, - leavesOnly = _ref6.leavesOnly, - getIdentity = _ref6.getIdentity, - getColor = _ref6.getColor; - - var root = cloneDeep(_root); - - treemap(root); - - var nodes = leavesOnly ? root.leaves() : root.descendants(); - nodes = nodes.map(function (d) { - d.path = computeNodePath(d, getIdentity); - - d.nodeHeight = d.height; - - d.x = d.x0; - d.y = d.y0; - d.width = d.x1 - d.x0; - d.height = d.y1 - d.y0; - d.data.color = d.color = getColor(_extends({}, d.data, { depth: d.depth })); - - d.data.id = d.id = getIdentity(d.data); - d.data.value = d.value; - - return d; - }); - - return { nodes: nodes }; - }), withPropsOnChange(['enableLabel', 'nodes', 'getLabel', 'labelSkipSize'], function (_ref7) { - var enableLabel = _ref7.enableLabel, - nodes = _ref7.nodes, - getLabel = _ref7.getLabel, - labelSkipSize = _ref7.labelSkipSize; - - if (!enableLabel) return; - - var nodesWithLabel = nodes.map(function (node) { - if (node.nodeHeight > 0 || labelSkipSize !== 0 && Math.min(node.width, node.height) <= labelSkipSize) return node; - return _extends({}, node, { label: getLabel(node.data) }); - }); - - return { nodes: nodesWithLabel }; - })]; - - var svgEnhancers = [withPropsOnChange(['nodes', 'defs', 'fill'], function (_ref8) { - var nodes = _ref8.nodes, - defs = _ref8.defs, - fill = _ref8.fill; - - return { - defs: core.bindDefs(defs, nodes, fill, { targetKey: 'fill' }) - }; - })]; - - var enhance = (function (Component) { - var implDefaultProps = props[Component.displayName + 'DefaultProps']; - - switch (Component.displayName) { - case 'TreeMap': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, svgEnhancers, [core.withMotion(), pure]))(Component); - - case 'TreeMapHtml': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [core.withMotion(), pure]))(Component); - - case 'TreeMapCanvas': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [pure]))(Component); - } - - return Component; - }); - - var nodeWillEnter = function nodeWillEnter(_ref) { - var node = _ref.data; - return _extends({ - x: node.x, - y: node.y, - width: node.width, - height: node.height - }, core.colorMotionSpring(node.color)); - }; - - var nodeWillLeave = function nodeWillLeave(springConfig) { - return function (_ref2) { - var node = _ref2.data; - return _extends({ - x: reactMotion.spring(node.x + node.width / 2, springConfig), - y: reactMotion.spring(node.y + node.height / 2, springConfig), - width: reactMotion.spring(0, springConfig), - height: reactMotion.spring(0, springConfig) - }, core.colorMotionSpring(node.color, springConfig)); - }; - }; - - var TreeMapNodeTooltip = function TreeMapNodeTooltip(_ref) { - var node = _ref.node, - theme = _ref.theme, - tooltip = _ref.tooltip; - return React__default.createElement(core.BasicTooltip, { - id: node.id, - value: node.value, - enableChip: true, - color: node.color, - theme: theme, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ node: node }, node)) : null - }); - }; - - TreeMapNodeTooltip.propTypes = { - node: PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - value: PropTypes.number.isRequired, - color: PropTypes.string.isRequired - }).isRequired, - theme: PropTypes.object.isRequired, - tooltip: PropTypes.func - }; - - var TreeMapNodeTooltip$1 = pure(TreeMapNodeTooltip); - - var getNodeHandlers = function getNodeHandlers(node, _ref) { - var isInteractive = _ref.isInteractive, - _onClick = _ref.onClick, - showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip, - theme = _ref.theme, - tooltip = _ref.tooltip; - - if (!isInteractive) return {}; - - var handleTooltip = function handleTooltip(e) { - showTooltip(React__default.createElement(TreeMapNodeTooltip$1, { node: node, theme: theme, tooltip: tooltip }), e); - }; - - return { - onMouseEnter: handleTooltip, - onMouseMove: handleTooltip, - onMouseLeave: hideTooltip, - onClick: function onClick(event) { - return _onClick(node, event); - } - }; - }; - - var TreeMap = function TreeMap(_ref) { - var nodes = _ref.nodes, - nodeComponent = _ref.nodeComponent, - margin = _ref.margin, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - theme = _ref.theme, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - defs = _ref.defs, - getLabelTextColor = _ref.getLabelTextColor, - orientLabel = _ref.orientLabel, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip; - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - var getHandlers = function getHandlers(node, showTooltip, hideTooltip) { - return getNodeHandlers(node, { - isInteractive: isInteractive, - onClick: onClick, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }); - }; - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: defs, - theme: theme - }, - !animate && React__default.createElement( - 'g', - null, - nodes.map(function (node) { - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: { - fill: node.fill, - x: node.x0, - y: node.y0, - width: node.width, - height: node.height, - color: node.color, - borderWidth: borderWidth, - borderColor: getBorderColor(node), - labelTextColor: getLabelTextColor(node), - orientLabel: orientLabel - }, - handlers: getHandlers(node, showTooltip, hideTooltip), - theme: theme - }); - }) - ), - animate && React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: nodeWillEnter, - willLeave: nodeWillLeave(springConfig), - styles: nodes.map(function (node) { - return { - key: node.path, - data: node, - style: _extends({ - x: reactMotion.spring(node.x, springConfig), - y: reactMotion.spring(node.y, springConfig), - width: reactMotion.spring(node.width, springConfig), - height: reactMotion.spring(node.height, springConfig) - }, core.colorMotionSpring(node.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'g', - null, - interpolatedStyles.map(function (_ref3) { - var style = _ref3.style, - node = _ref3.data; - - style.color = core.getInterpolatedColor(style); - - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, style, { - fill: node.fill, - borderWidth: borderWidth, - borderColor: getBorderColor(style), - labelTextColor: getLabelTextColor(style), - orientLabel: orientLabel - }), - handlers: getHandlers(node, showTooltip, hideTooltip), - theme: theme - }); - }) - ); - } - ) - ); - } - ); - }; - - TreeMap.propTypes = TreeMapPropTypes; - TreeMap.displayName = 'TreeMap'; - - var enhancedTreeMap = enhance(TreeMap); - enhancedTreeMap.displayName = 'TreeMap'; - - var ResponsiveTreeMap = function ResponsiveTreeMap(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedTreeMap, _extends({ width: width, height: height }, props)); - } - ); - }; - - var TreeMapHtml = function TreeMapHtml(_ref) { - var nodes = _ref.nodes, - nodeComponent = _ref.nodeComponent, - margin = _ref.margin, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - theme = _ref.theme, - borderWidth = _ref.borderWidth, - getBorderColor = _ref.getBorderColor, - getLabelTextColor = _ref.getLabelTextColor, - orientLabel = _ref.orientLabel, - animate = _ref.animate, - motionStiffness = _ref.motionStiffness, - motionDamping = _ref.motionDamping, - isInteractive = _ref.isInteractive, - onClick = _ref.onClick, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip; - - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - var getHandlers = function getHandlers(node, showTooltip, hideTooltip) { - return getNodeHandlers(node, { - isInteractive: isInteractive, - onClick: onClick, - showTooltip: showTooltip, - hideTooltip: hideTooltip, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }); - }; - - return React__default.createElement( - core.Container, - { theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement( - 'div', - { - style: { - position: 'relative', - width: outerWidth, - height: outerHeight - } - }, - !animate && React__default.createElement( - 'div', - { style: { position: 'absolute', top: margin.top, left: margin.left } }, - nodes.map(function (node) { - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: { - x: node.x, - y: node.y, - width: node.width, - height: node.height, - color: node.color, - borderWidth: borderWidth, - borderColor: getBorderColor(node), - labelTextColor: getLabelTextColor(node), - orientLabel: orientLabel - }, - handlers: getHandlers(node, showTooltip, hideTooltip) - }); - }) - ), - animate && React__default.createElement( - reactMotion.TransitionMotion, - { - willEnter: nodeWillEnter, - willLeave: nodeWillLeave(springConfig), - styles: nodes.map(function (node) { - return { - key: node.path, - data: node, - style: _extends({ - x: reactMotion.spring(node.x, springConfig), - y: reactMotion.spring(node.y, springConfig), - width: reactMotion.spring(node.width, springConfig), - height: reactMotion.spring(node.height, springConfig) - }, core.colorMotionSpring(node.color, springConfig)) - }; - }) - }, - function (interpolatedStyles) { - return React__default.createElement( - 'div', - { - style: { - position: 'absolute', - top: margin.top, - left: margin.left - } - }, - interpolatedStyles.map(function (_ref3) { - var style = _ref3.style, - node = _ref3.data; - - style.color = core.getInterpolatedColor(style); - - return React__default.createElement(nodeComponent, { - key: node.path, - node: node, - style: _extends({}, style, { - fill: node.fill, - borderWidth: borderWidth, - borderColor: getBorderColor(style), - labelTextColor: getLabelTextColor(style), - orientLabel: orientLabel - }), - handlers: getHandlers(node, showTooltip, hideTooltip) - }); - }) - ); - } - ) - ); - } - ); - }; - - TreeMapHtml.propTypes = TreeMapHtmlPropTypes; - TreeMapHtml.displayName = 'TreeMapHtml'; - - var enhancedTreeMapHtml = enhance(TreeMapHtml); - enhancedTreeMapHtml.displayName = 'TreeMapHtml'; - - var ResponsiveTreeMapHtml = function ResponsiveTreeMapHtml(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedTreeMapHtml, _extends({ width: width, height: height }, props)); - } - ); - }; - - var findNodeUnderCursor = function findNodeUnderCursor(nodes, margin, x, y) { - return nodes.find(function (node) { - return core.isCursorInRect(node.x + margin.left, node.y + margin.top, node.width, node.height, x, y); - }); - }; - - var TreeMapCanvas = function (_Component) { - inherits(TreeMapCanvas, _Component); - - function TreeMapCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, TreeMapCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip) { - return function (event) { - var _this$props = _this.props, - isInteractive = _this$props.isInteractive, - nodes = _this$props.nodes, - margin = _this$props.margin, - theme = _this$props.theme; - - - if (!isInteractive) return; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var node = findNodeUnderCursor(nodes, margin, x, y); - - if (node !== undefined) { - showTooltip(React__default.createElement(TreeMapNodeTooltip$1, { node: node, theme: theme }), event); - } else { - hideTooltip(); - } - }; - }, _this.handleMouseLeave = function (hideTooltip) { - return function () { - hideTooltip(); - }; - }, _this.handleClick = function (event) { - var _this$props2 = _this.props, - isInteractive = _this$props2.isInteractive, - nodes = _this$props2.nodes, - margin = _this$props2.margin, - onClick = _this$props2.onClick; - - - if (!isInteractive) return; - - var _getRelativeCursor2 = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor2[0], - y = _getRelativeCursor2[1]; - - var node = findNodeUnderCursor(nodes, margin, x, y); - if (node !== undefined) onClick(node, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - TreeMapCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - TreeMapCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - TreeMapCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var nodes = props.nodes, - pixelRatio = props.pixelRatio, - margin = props.margin, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - borderWidth = props.borderWidth, - getBorderColor = props.getBorderColor, - enableLabel = props.enableLabel, - getLabelTextColor = props.getLabelTextColor, - orientLabel = props.orientLabel, - theme = props.theme; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - nodes.forEach(function (node) { - _this2.ctx.fillStyle = node.color; - _this2.ctx.fillRect(node.x, node.y, node.width, node.height); - - if (borderWidth > 0) { - _this2.ctx.strokeStyle = getBorderColor(node); - _this2.ctx.lineWidth = borderWidth; - _this2.ctx.strokeRect(node.x, node.y, node.width, node.height); - } - }); - - if (enableLabel) { - this.ctx.textAlign = 'center'; - this.ctx.textBaseline = 'middle'; - this.ctx.font = theme.labels.text.fontSize + 'px sans-serif'; - - // draw labels on top - nodes.filter(function (_ref) { - var label = _ref.label; - return label !== undefined; - }).forEach(function (node) { - var labelTextColor = getLabelTextColor(node); - - var rotate = orientLabel && node.height > node.width; - - _this2.ctx.save(); - _this2.ctx.translate(node.x + node.width / 2, node.y + node.height / 2); - _this2.ctx.rotate(core.degreesToRadians(rotate ? -90 : 0)); - - _this2.ctx.fillStyle = labelTextColor; - _this2.ctx.fillText(node.label, 0, 0); - - _this2.ctx.restore(); - }); - } - }; - - TreeMapCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref2) { - var showTooltip = _ref2.showTooltip, - hideTooltip = _ref2.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseLeave: _this3.handleMouseLeave(hideTooltip), - onClick: _this3.handleClick - }); - } - ); - }; - - return TreeMapCanvas; - }(React.Component); - - TreeMapCanvas.propTypes = TreeMapCanvasPropTypes; - TreeMapCanvas.displayName = 'TreeMapCanvas'; - - var enhancedTreeMapCanvas = enhance(TreeMapCanvas); - enhancedTreeMapCanvas.displayName = 'TreeMapCanvas'; - - var ResponsiveTreeMapCanvas = function ResponsiveTreeMapCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(enhancedTreeMapCanvas, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.TreeMap = enhancedTreeMap; - exports.ResponsiveTreeMap = ResponsiveTreeMap; - exports.TreeMapHtml = enhancedTreeMapHtml; - exports.ResponsiveTreeMapHtml = ResponsiveTreeMapHtml; - exports.TreeMapCanvas = enhancedTreeMapCanvas; - exports.ResponsiveTreeMapCanvas = ResponsiveTreeMapCanvas; - exports.TreeMapPropTypes = TreeMapPropTypes; - exports.TreeMapHtmlPropTypes = TreeMapHtmlPropTypes; - exports.TreeMapCanvasPropTypes = TreeMapCanvasPropTypes; - exports.TreeMapDefaultProps = TreeMapDefaultProps; - exports.TreeMapHtmlDefaultProps = TreeMapHtmlDefaultProps; - exports.TreeMapCanvasDefaultProps = TreeMapCanvasDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/voronoi/umd/nivo-voronoi.js b/packages/voronoi/umd/nivo-voronoi.js deleted file mode 100644 index 3295bd323..000000000 --- a/packages/voronoi/umd/nivo-voronoi.js +++ /dev/null @@ -1,158 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/pure'), require('@nivo/core'), require('react'), require('d3-voronoi')) : - typeof define === 'function' && define.amd ? define(['exports', 'prop-types', 'recompose/compose', 'recompose/defaultProps', 'recompose/pure', '@nivo/core', 'react', 'd3-voronoi'], factory) : - (factory((global.nivo = global.nivo || {}),global.PropTypes,global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposePure,global.nivo,global.React,global.d3)); -}(this, (function (exports,PropTypes,compose,defaultProps,pure,core,React,d3Voronoi) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - React = React && React.hasOwnProperty('default') ? React['default'] : React; - - var VoronoiPropTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired - })).isRequired, - enablePolygons: PropTypes.bool.isRequired, - enableSites: PropTypes.bool.isRequired, - enableLinks: PropTypes.bool.isRequired, - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - linkWidth: PropTypes.number.isRequired, - linkColor: PropTypes.string.isRequired, - siteSize: PropTypes.number.isRequired, - siteColor: PropTypes.string.isRequired - }; - - var VoronoiDefaultProps = { - enablePolygons: true, - enableSites: false, - enableLinks: false, - x: 0, - y: 1, - borderWidth: 2, - borderColor: '#000', - linkWidth: 1, - linkColor: '#bbb', - siteSize: 4, - siteColor: '#666' - }; - - var enhance = (function (Component) { - return compose(defaultProps(VoronoiDefaultProps), core.withTheme(), core.withDimensions(), pure)(Component); - }); - - var Voronoi = function Voronoi(_ref) { - var data = _ref.data, - margin = _ref.margin, - width = _ref.width, - height = _ref.height, - outerWidth = _ref.outerWidth, - outerHeight = _ref.outerHeight, - enableSites = _ref.enableSites, - enableLinks = _ref.enableLinks, - enablePolygons = _ref.enablePolygons, - theme = _ref.theme, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - linkWidth = _ref.linkWidth, - linkColor = _ref.linkColor, - siteSize = _ref.siteSize, - siteColor = _ref.siteColor; - - var voronoi = d3Voronoi.voronoi().x(function (d) { - return d.x; - }).y(function (d) { - return d.y; - }).extent([[0, 0], [width, height]]); - - var polygons = voronoi.polygons(data); - var links = voronoi.links(data); - - return React.createElement( - core.Container, - { isInteractive: false, theme: theme }, - function () { - return (/*{ showTooltip, hideTooltip }*/React.createElement( - core.SvgWrapper, - { width: outerWidth, height: outerHeight, margin: margin, theme: theme }, - enableLinks && links.map(function (l) { - return React.createElement('line', { - key: l.source.id + '.' + l.target.id, - fill: 'none', - stroke: linkColor, - strokeWidth: linkWidth, - x1: l.source.x, - y1: l.source.y, - x2: l.target.x, - y2: l.target.y - }); - }), - enablePolygons && polygons.map(function (p) { - return React.createElement('path', { - key: p.data.id, - fill: 'none', - stroke: borderColor, - strokeWidth: borderWidth, - d: 'M' + p.join('L') + 'Z' - }); - }), - enableSites && data.map(function (d) { - return React.createElement('circle', { - key: d.id, - r: siteSize / 2, - cx: d.x, - cy: d.y, - fill: siteColor, - stroke: 'none' - }); - }) - ) - ); - } - ); - }; - - Voronoi.propTypes = VoronoiPropTypes; - - var Voronoi$1 = enhance(Voronoi); - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var ResponsiveVoronoi = function ResponsiveVoronoi(props) { - return React.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React.createElement(Voronoi$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Voronoi = Voronoi$1; - exports.ResponsiveVoronoi = ResponsiveVoronoi; - exports.VoronoiPropTypes = VoronoiPropTypes; - exports.VoronoiDefaultProps = VoronoiDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/packages/waffle/umd/nivo-waffle.js b/packages/waffle/umd/nivo-waffle.js deleted file mode 100644 index 0bfa95b64..000000000 --- a/packages/waffle/umd/nivo-waffle.js +++ /dev/null @@ -1,1174 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('recompose/pure'), require('@nivo/core'), require('@nivo/legends'), require('lodash/range'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/withState'), require('lodash/partial'), require('react-motion'), require('recompose/setDisplayName')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'recompose/pure', '@nivo/core', '@nivo/legends', 'lodash/range', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/withState', 'lodash/partial', 'react-motion', 'recompose/setDisplayName'], factory) : - (factory((global.nivo = global.nivo || {}),global.React,global.PropTypes,global.RecomposePure,global.nivo,global.nivo,global['lodash/range'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposeWithState,global['lodash/partial'],global.ReactMotion,global.RecomposeSetDisplayName)); -}(this, (function (exports,React,PropTypes,pure,core,legends,range,compose,defaultProps,withPropsOnChange,withState,partial,reactMotion,setDisplayName) { 'use strict'; - - var React__default = 'default' in React ? React['default'] : React; - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - pure = pure && pure.hasOwnProperty('default') ? pure['default'] : pure; - range = range && range.hasOwnProperty('default') ? range['default'] : range; - compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose; - defaultProps = defaultProps && defaultProps.hasOwnProperty('default') ? defaultProps['default'] : defaultProps; - withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange; - withState = withState && withState.hasOwnProperty('default') ? withState['default'] : withState; - partial = partial && partial.hasOwnProperty('default') ? partial['default'] : partial; - setDisplayName = setDisplayName && setDisplayName.hasOwnProperty('default') ? setDisplayName['default'] : setDisplayName; - - var WaffleCell = function WaffleCell(_ref) { - var position = _ref.position, - size = _ref.size, - x = _ref.x, - y = _ref.y, - color = _ref.color, - fill = _ref.fill, - opacity = _ref.opacity, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - data = _ref.data, - onHover = _ref.onHover, - onLeave = _ref.onLeave, - _onClick = _ref.onClick; - return React__default.createElement('rect', { - width: size, - height: size, - x: x, - y: y, - fill: fill || color, - strokeWidth: borderWidth, - stroke: borderColor, - opacity: opacity, - onMouseEnter: onHover, - onMouseMove: onHover, - onMouseLeave: onLeave, - onClick: function onClick(event) { - _onClick({ position: position, color: color, x: x, y: y, data: data }, event); - } - }); - }; - - WaffleCell.propTypes = { - position: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - fill: PropTypes.string, - opacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - data: PropTypes.object.isRequired, - onHover: PropTypes.func.isRequired, - onLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - WaffleCell.defaultProps = { - data: {} - }; - WaffleCell.displayName = 'WaffleCell'; - - var WaffleCell$1 = pure(WaffleCell); - - var WaffleCellHtml = function WaffleCellHtml(_ref) { - var position = _ref.position, - size = _ref.size, - x = _ref.x, - y = _ref.y, - color = _ref.color, - opacity = _ref.opacity, - borderWidth = _ref.borderWidth, - borderColor = _ref.borderColor, - data = _ref.data, - onHover = _ref.onHover, - onLeave = _ref.onLeave, - _onClick = _ref.onClick; - - return React__default.createElement('div', { - style: { - position: 'absolute', - top: y, - left: x, - width: size, - height: size, - background: color, - opacity: opacity, - boxSizing: 'content-box', - borderStyle: 'solid', - borderWidth: borderWidth + 'px', - borderColor: borderColor - }, - onMouseEnter: onHover, - onMouseMove: onHover, - onMouseLeave: onLeave, - onClick: function onClick(event) { - _onClick({ position: position, color: color, x: x, y: y, data: data }, event); - } - }); - }; - - WaffleCellHtml.propTypes = { - position: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - opacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - data: PropTypes.object.isRequired, - onHover: PropTypes.func.isRequired, - onLeave: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - WaffleCellHtml.defaultProps = { - data: {} - }; - WaffleCellHtml.displayName = 'WaffleCellHtml'; - - var WaffleCellHtml$1 = pure(WaffleCellHtml); - - var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - }; - - var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; - }; - - var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; - }; - - var commonPropTypes = { - // data - total: PropTypes.number.isRequired, - data: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - value: PropTypes.number.isRequired - })).isRequired, - hiddenIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired, - - // layout - rows: PropTypes.number.isRequired, - columns: PropTypes.number.isRequired, - fillDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired, - padding: PropTypes.number.isRequired, - - // styling - emptyColor: PropTypes.string.isRequired, - emptyOpacity: PropTypes.number.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.any.isRequired, - getBorderColor: PropTypes.func.isRequired, // computed - - // interactivity - isInteractive: PropTypes.bool, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func, - - // computed - cellSize: PropTypes.number.isRequired, - cells: PropTypes.array.isRequired, - origin: PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired - }).isRequired - }; - - var WafflePropTypes = _extends({}, commonPropTypes, { - cellComponent: PropTypes.func.isRequired - }, core.defsPropTypes, { - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }); - - var WaffleHtmlPropTypes = _extends({}, commonPropTypes, { - cellComponent: PropTypes.func.isRequired - }); - - var WaffleCanvasPropTypes = _extends({}, commonPropTypes, { - pixelRatio: PropTypes.number.isRequired, - legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired - }); - - var commonDefaultProps = { - hiddenIds: [], - - // layout - fillDirection: 'bottom', - padding: 1, - - // styling - emptyColor: '#cccccc', - emptyOpacity: 1, - borderWidth: 0, - borderColor: 'inherit:darker(1)', - colors: 'nivo', - defs: [], - fill: [], - - // interactivity - isInteractive: true, - onClick: core.noop - }; - - var WaffleDefaultProps = _extends({}, commonDefaultProps, { - cellComponent: WaffleCell$1, - defs: [], - fill: [], - legends: [] - }); - - var WaffleHtmlDefaultProps = _extends({}, commonDefaultProps, { - cellComponent: WaffleCellHtml$1 - }); - - var WaffleCanvasDefaultProps = _extends({}, commonDefaultProps, { - legends: [], - pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 - }); - - var props = /*#__PURE__*/Object.freeze({ - WafflePropTypes: WafflePropTypes, - WaffleHtmlPropTypes: WaffleHtmlPropTypes, - WaffleCanvasPropTypes: WaffleCanvasPropTypes, - WaffleDefaultProps: WaffleDefaultProps, - WaffleHtmlDefaultProps: WaffleHtmlDefaultProps, - WaffleCanvasDefaultProps: WaffleCanvasDefaultProps - }); - - /** - * Computes optimal cell size according to dimensions/layout/padding. - * - * @param {number} width - * @param {number} height - * @param {number} rows - * @param {number} columns - * @param {number} padding - * - * @return {number} - */ - var computeCellSize = function computeCellSize(width, height, rows, columns, padding) { - var sizeX = (width - (columns - 1) * padding) / columns; - var sizeY = (height - (rows - 1) * padding) / rows; - - return Math.min(sizeX, sizeY); - }; - - /** - * Computes empty cells according to dimensions/layout/padding. - * - * @param {number} width - * @param {number} height - * @param {number} rows - * @param {number} columns - * @param {'top'|'right'|'bottom'|'left'} fillDirection - * @param {number} padding - * - * @return {{ cells: Array, cellSize: number, origin: { x: number, y: number } } } - */ - var computeGrid = function computeGrid(width, height, rows, columns, fillDirection, padding) { - var cellSize = computeCellSize(width, height, rows, columns, padding); - - var cells = []; - switch (fillDirection) { - case 'top': - range(rows).forEach(function (row) { - range(columns).forEach(function (column) { - cells.push({ - position: row * columns + column, - row: row, - column: column, - x: column * (cellSize + padding), - y: row * (cellSize + padding) - }); - }); - }); - break; - - case 'bottom': - range(rows - 1, -1).forEach(function (row) { - range(columns).forEach(function (column) { - cells.push({ - position: row * columns + column, - row: row, - column: column, - x: column * (cellSize + padding), - y: row * (cellSize + padding) - }); - }); - }); - break; - - case 'left': - range(columns).forEach(function (column) { - range(rows).forEach(function (row) { - cells.push({ - position: row * columns + column, - row: row, - column: column, - x: column * (cellSize + padding), - y: row * (cellSize + padding) - }); - }); - }); - break; - - case 'right': - range(columns - 1, -1).forEach(function (column) { - range(rows - 1, -1).forEach(function (row) { - cells.push({ - position: row * columns + column, - row: row, - column: column, - x: column * (cellSize + padding), - y: row * (cellSize + padding) - }); - }); - }); - break; - - default: - throw new Error('Invalid fill direction provided: ' + fillDirection); - } - - var origin = { - x: (width - (cellSize * columns + padding * (columns - 1))) / 2, - y: (height - (cellSize * rows + padding * (rows - 1))) / 2 - }; - - return { cells: cells, cellSize: cellSize, origin: origin }; - }; - - var applyDataToGrid = function applyDataToGrid(_cells, data) { - var cells = _cells.map(function (cell) { - return _extends({}, cell); - }); - - data.forEach(function (datum) { - range(datum.startAt, datum.endAt).forEach(function (position) { - var cell = cells[position]; - if (cell !== undefined) { - cell.data = datum; - cell.groupIndex = datum.groupIndex; - cell.color = datum.color; - } - }); - }); - - return cells; - }; - - var commonEnhancers = [core.withDimensions(), core.withColors({ defaultColorBy: 'id' }), core.withTheme(), core.withMotion(), withPropsOnChange(['borderColor'], function (_ref) { - var borderColor = _ref.borderColor; - return { - getBorderColor: core.getInheritedColorGenerator(borderColor) - }; - }), withState('currentCell', 'setCurrentCell', null), withPropsOnChange(['rows', 'columns', 'total'], function (_ref2) { - var rows = _ref2.rows, - columns = _ref2.columns, - total = _ref2.total; - return { - unit: total / (rows * columns) - }; - }), withPropsOnChange(['width', 'height', 'rows', 'columns', 'fillDirection', 'padding'], function (_ref3) { - var width = _ref3.width, - height = _ref3.height, - rows = _ref3.rows, - columns = _ref3.columns, - fillDirection = _ref3.fillDirection, - padding = _ref3.padding; - - return computeGrid(width, height, rows, columns, fillDirection, padding); - }), withPropsOnChange(['data', 'unit', 'getColor', 'hiddenIds'], function (_ref4) { - var data = _ref4.data, - unit = _ref4.unit, - getColor = _ref4.getColor, - hiddenIds = _ref4.hiddenIds; - - var currentPosition = 0; - - return { - computedData: data.map(function (datum, groupIndex) { - if (!hiddenIds.includes(datum.id)) { - var enhancedDatum = _extends({}, datum, { - groupIndex: groupIndex, - startAt: currentPosition, - endAt: currentPosition + Math.round(datum.value / unit), - color: getColor(datum) - }); - - currentPosition = enhancedDatum.endAt; - - return enhancedDatum; - } - - return _extends({}, datum, { - groupIndex: groupIndex, - startAt: currentPosition, - endAt: currentPosition, - color: getColor(datum) - }); - }) - }; - }), withPropsOnChange(['computedData'], function (_ref5) { - var computedData = _ref5.computedData; - return { - legendData: computedData.map(function (datum) { - return { - id: datum.id, - label: datum.id, - color: datum.color, - fill: datum.fill - }; - }) - }; - })]; - - var enhance = (function (Component) { - var implDefaultProps = props[Component.displayName + 'DefaultProps']; - - switch (Component.displayName) { - case 'Waffle': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [core.withMotion(), withPropsOnChange(['computedData', 'defs', 'fill'], function (_ref6) { - var computedData = _ref6.computedData, - defs = _ref6.defs, - fill = _ref6.fill; - return { - defs: core.bindDefs(defs, computedData, fill, { targetKey: 'fill' }) - }; - }), pure]))(Component); - - case 'WaffleHtml': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [core.withMotion(), pure]))(Component); - - case 'WaffleCanvas': - return compose.apply(undefined, [defaultProps(implDefaultProps)].concat(commonEnhancers, [pure]))(Component); - } - - return Component; - }); - - var WaffleCellTooltip = function WaffleCellTooltip(_ref) { - var position = _ref.position, - row = _ref.row, - column = _ref.column, - color = _ref.color, - data = _ref.data, - theme = _ref.theme, - tooltipFormat = _ref.tooltipFormat, - tooltip = _ref.tooltip; - return React__default.createElement(core.BasicTooltip, { - id: data.label, - value: data.value, - enableChip: true, - color: color, - theme: theme, - format: tooltipFormat, - renderContent: typeof tooltip === 'function' ? tooltip.bind(null, _extends({ - position: position, - row: row, - column: column, - color: color - }, data)) : null - }); - }; - - WaffleCellTooltip.displayName = 'WaffleCellTooltip'; - WaffleCellTooltip.propTypes = { - position: PropTypes.number.isRequired, - row: PropTypes.number.isRequired, - column: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - data: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired, - tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - tooltip: PropTypes.func - }; - - var Waffle = function (_Component) { - inherits(Waffle, _Component); - - function Waffle() { - var _temp, _this, _ret; - - classCallCheck(this, Waffle); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleCellHover = function (showTooltip, cell, event) { - var _this$props = _this.props, - setCurrentCell = _this$props.setCurrentCell, - theme = _this$props.theme, - tooltipFormat = _this$props.tooltipFormat, - tooltip = _this$props.tooltip; - - - setCurrentCell(cell); - - if (!cell.data) return; - - showTooltip(React__default.createElement(WaffleCellTooltip, { - position: cell.position, - row: cell.row, - column: cell.column, - color: cell.color, - data: cell.data, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }), event); - }, _this.handleCellLeave = function (hideTooltip) { - _this.props.setCurrentCell(null); - hideTooltip(); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - Waffle.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - hiddenIds = _props.hiddenIds, - margin = _props.margin, - width = _props.width, - height = _props.height, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - cellComponent = _props.cellComponent, - emptyColor = _props.emptyColor, - emptyOpacity = _props.emptyOpacity, - borderWidth = _props.borderWidth, - getBorderColor = _props.getBorderColor, - theme = _props.theme, - defs = _props.defs, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - isInteractive = _props.isInteractive, - onClick = _props.onClick, - cells = _props.cells, - cellSize = _props.cellSize, - origin = _props.origin, - computedData = _props.computedData, - legendData = _props.legendData, - legends$$1 = _props.legends; - - - cells.forEach(function (cell) { - cell.color = emptyColor; - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - - var onHover = partial(_this2.handleCellHover, showTooltip); - var onLeave = partial(_this2.handleCellLeave, hideTooltip); - - var cellsRender = void 0; - if (animate === true) { - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - cellsRender = React__default.createElement( - reactMotion.TransitionMotion, - { - styles: computedData.map(function (datum) { - return { - key: datum.id, - data: datum, - style: { - startAt: reactMotion.spring(datum.startAt, springConfig), - endAt: reactMotion.spring(datum.endAt, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - var computedCells = applyDataToGrid(cells, interpolatedStyles.map(function (s) { - return _extends({}, s.data, { - startAt: Math.round(s.style.startAt), - endAt: Math.round(s.style.endAt) - }); - }), hiddenIds); - - return React__default.createElement( - React.Fragment, - null, - computedCells.map(function (cell) { - return React__default.createElement(cellComponent, { - key: cell.position, - position: cell.position, - size: cellSize, - x: cell.x, - y: cell.y, - color: cell.color, - fill: cell.data && cell.data.fill, - opacity: cell.data ? 1 : emptyOpacity, - borderWidth: borderWidth, - borderColor: getBorderColor(cell), - data: cell.data, - onHover: partial(onHover, cell), - onLeave: onLeave, - onClick: onClick - }); - }) - ); - } - ); - } else { - var computedCells = applyDataToGrid(cells, computedData, hiddenIds); - - cellsRender = React__default.createElement( - React.Fragment, - null, - computedCells.map(function (cell) { - return React__default.createElement(cellComponent, { - key: cell.position, - position: cell.position, - size: cellSize, - x: cell.x, - y: cell.y, - color: cell.color, - fill: cell.data && cell.data.fill, - opacity: cell.data ? 1 : emptyOpacity, - borderWidth: borderWidth, - borderColor: getBorderColor(cell), - data: cell.data, - onHover: partial(onHover, cell), - onLeave: onLeave, - onClick: onClick - }); - }) - ); - } - - return React__default.createElement( - core.SvgWrapper, - { - width: outerWidth, - height: outerHeight, - margin: margin, - defs: defs, - theme: theme - }, - React__default.createElement( - 'g', - { transform: 'translate(' + origin.x + ', ' + origin.y + ')' }, - cellsRender - ), - legends$$1.map(function (legend, i) { - return React__default.createElement(legends.BoxLegendSvg, _extends({ - key: i - }, legend, { - containerWidth: width, - containerHeight: height, - data: legendData, - theme: theme - })); - }) - ); - } - ); - }; - - return Waffle; - }(React.Component); - - Waffle.propTypes = WafflePropTypes; - Waffle.displayName = 'Waffle'; - - var Waffle$1 = setDisplayName(Waffle.displayName)(enhance(Waffle)); - - var ResponsiveWaffle = function ResponsiveWaffle(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(Waffle$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var WaffleHtml = function (_Component) { - inherits(WaffleHtml, _Component); - - function WaffleHtml() { - var _temp, _this, _ret; - - classCallCheck(this, WaffleHtml); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleCellHover = function (showTooltip, cell, event) { - var _this$props = _this.props, - setCurrentCell = _this$props.setCurrentCell, - theme = _this$props.theme, - tooltipFormat = _this$props.tooltipFormat, - tooltip = _this$props.tooltip; - - - setCurrentCell(cell); - - if (!cell.data) return; - - showTooltip(React__default.createElement(WaffleCellTooltip, { - position: cell.position, - row: cell.row, - column: cell.column, - color: cell.color, - data: cell.data, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }), event); - }, _this.handleCellLeave = function (hideTooltip) { - _this.props.setCurrentCell(null); - hideTooltip(); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - WaffleHtml.prototype.render = function render() { - var _this2 = this; - - var _props = this.props, - margin = _props.margin, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - cellComponent = _props.cellComponent, - emptyColor = _props.emptyColor, - emptyOpacity = _props.emptyOpacity, - borderWidth = _props.borderWidth, - getBorderColor = _props.getBorderColor, - theme = _props.theme, - animate = _props.animate, - motionStiffness = _props.motionStiffness, - motionDamping = _props.motionDamping, - isInteractive = _props.isInteractive, - onClick = _props.onClick, - cells = _props.cells, - cellSize = _props.cellSize, - origin = _props.origin, - computedData = _props.computedData; - - - cells.forEach(function (cell) { - cell.color = emptyColor; - }); - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - - var onHover = partial(_this2.handleCellHover, showTooltip); - var onLeave = partial(_this2.handleCellLeave, hideTooltip); - - var cellsRender = void 0; - if (animate === true) { - var springConfig = { - stiffness: motionStiffness, - damping: motionDamping - }; - - cellsRender = React__default.createElement( - reactMotion.TransitionMotion, - { - styles: computedData.map(function (datum) { - return { - key: datum.id, - data: datum, - style: { - startAt: reactMotion.spring(datum.startAt, springConfig), - endAt: reactMotion.spring(datum.endAt, springConfig) - } - }; - }) - }, - function (interpolatedStyles) { - var computedCells = applyDataToGrid(cells, interpolatedStyles.map(function (s) { - return _extends({}, s.data, { - startAt: Math.round(s.style.startAt), - endAt: Math.round(s.style.endAt) - }); - })); - - return React__default.createElement( - React.Fragment, - null, - computedCells.map(function (cell) { - return React__default.createElement(cellComponent, { - key: cell.position, - position: cell.position, - size: cellSize, - x: cell.x, - y: cell.y, - color: cell.color, - fill: cell.data && cell.data.fill, - opacity: cell.data ? 1 : emptyOpacity, - borderWidth: borderWidth, - borderColor: getBorderColor(cell), - data: cell.data, - onHover: partial(onHover, cell), - onLeave: onLeave, - onClick: onClick - }); - }) - ); - } - ); - } else { - var computedCells = applyDataToGrid(cells, computedData); - - cellsRender = React__default.createElement( - React.Fragment, - null, - computedCells.map(function (cell) { - return React__default.createElement(cellComponent, { - key: cell.position, - position: cell.position, - size: cellSize, - x: cell.x, - y: cell.y, - color: cell.color, - fill: cell.data && cell.data.fill, - opacity: cell.data ? 1 : emptyOpacity, - borderWidth: borderWidth, - borderColor: getBorderColor(cell), - data: cell.data, - onHover: partial(onHover, cell), - onLeave: onLeave, - onClick: onClick - }); - }) - ); - } - - return React__default.createElement( - 'div', - { - style: { - position: 'relative', - width: outerWidth, - height: outerHeight - } - }, - React__default.createElement( - 'div', - { - style: { - position: 'absolute', - top: margin.top + origin.y, - left: margin.left + origin.x - } - }, - cellsRender - ) - ); - } - ); - }; - - return WaffleHtml; - }(React.Component); - - WaffleHtml.propTypes = WaffleHtmlPropTypes; - - - WaffleHtml.displayName = 'WaffleHtml'; - - var WaffleHtml$1 = setDisplayName(WaffleHtml.displayName)(enhance(WaffleHtml)); - - var ResponsiveWaffleHtml = function ResponsiveWaffleHtml(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(WaffleHtml$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - var findCellUnderCursor = function findCellUnderCursor(cells, cellSize, origin, margin, x, y) { - return cells.find(function (cell) { - return core.isCursorInRect(cell.x + origin.x + margin.left, cell.y + origin.y + margin.top, cellSize, cellSize, x, y); - }); - }; - - var WaffleCanvas = function (_Component) { - inherits(WaffleCanvas, _Component); - - function WaffleCanvas() { - var _temp, _this, _ret; - - classCallCheck(this, WaffleCanvas); - - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return _ret = (_temp = (_this = possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleMouseHover = function (showTooltip, hideTooltip) { - return function (event) { - var _this$props = _this.props, - isInteractive = _this$props.isInteractive, - margin = _this$props.margin, - theme = _this$props.theme, - cells = _this$props.cells, - cellSize = _this$props.cellSize, - origin = _this$props.origin, - tooltipFormat = _this$props.tooltipFormat, - tooltip = _this$props.tooltip; - - - if (!isInteractive || !cells) return; - - var _getRelativeCursor = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor[0], - y = _getRelativeCursor[1]; - - var cell = findCellUnderCursor(cells, cellSize, origin, margin, x, y); - - if (cell !== undefined && cell.data) { - showTooltip(React__default.createElement(WaffleCellTooltip, { - position: cell.position, - row: cell.row, - column: cell.column, - color: cell.color, - data: cell.data, - theme: theme, - tooltipFormat: tooltipFormat, - tooltip: tooltip - }), event); - } else { - hideTooltip(); - } - }; - }, _this.handleMouseLeave = function (hideTooltip) { - return function () { - if (_this.props.isInteractive !== true) return; - - hideTooltip(); - }; - }, _this.handleClick = function (event) { - var _this$props2 = _this.props, - isInteractive = _this$props2.isInteractive, - margin = _this$props2.margin, - onClick = _this$props2.onClick, - cells = _this$props2.cells, - cellSize = _this$props2.cellSize, - origin = _this$props2.origin; - - - if (!isInteractive || !cells) return; - - var _getRelativeCursor2 = core.getRelativeCursor(_this.surface, event), - x = _getRelativeCursor2[0], - y = _getRelativeCursor2[1]; - - var cell = findCellUnderCursor(cells, cellSize, origin, margin, x, y); - if (cell !== undefined) onClick(cell, event); - }, _temp), possibleConstructorReturn(_this, _ret); - } - - WaffleCanvas.prototype.componentDidMount = function componentDidMount() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - WaffleCanvas.prototype.componentDidUpdate = function componentDidUpdate() { - this.ctx = this.surface.getContext('2d'); - this.draw(this.props); - }; - - WaffleCanvas.prototype.draw = function draw(props) { - var _this2 = this; - - var pixelRatio = props.pixelRatio, - margin = props.margin, - width = props.width, - height = props.height, - outerWidth = props.outerWidth, - outerHeight = props.outerHeight, - getColor = props.getColor, - emptyColor = props.emptyColor, - emptyOpacity = props.emptyOpacity, - borderWidth = props.borderWidth, - getBorderColor = props.getBorderColor, - cells = props.cells, - cellSize = props.cellSize, - origin = props.origin, - computedData = props.computedData, - legendData = props.legendData, - legends$$1 = props.legends, - theme = props.theme; - - - this.surface.width = outerWidth * pixelRatio; - this.surface.height = outerHeight * pixelRatio; - - this.ctx.scale(pixelRatio, pixelRatio); - this.ctx.fillStyle = theme.background; - this.ctx.fillRect(0, 0, outerWidth, outerHeight); - this.ctx.translate(margin.left, margin.top); - - cells.forEach(function (cell) { - cell.color = emptyColor; - }); - - computedData.forEach(function (datum) { - range(datum.startAt, datum.endAt).forEach(function (position) { - var cell = cells[position]; - if (cell !== undefined) { - cell.data = datum; - cell.groupIndex = datum.groupIndex; - cell.color = getColor(datum); - } - }); - }); - - cells.forEach(function (cell) { - _this2.ctx.save(); - _this2.ctx.globalAlpha = cell.data ? 1 : emptyOpacity; - - _this2.ctx.fillStyle = cell.color; - _this2.ctx.fillRect(cell.x + origin.x, cell.y + origin.y, cellSize, cellSize); - - if (borderWidth > 0) { - _this2.ctx.strokeStyle = getBorderColor(cell); - _this2.ctx.lineWidth = borderWidth; - _this2.ctx.strokeRect(cell.x + origin.x, cell.y + origin.y, cellSize, cellSize); - } - - _this2.ctx.restore(); - }); - - legends$$1.forEach(function (legend) { - legends.renderLegendToCanvas(_this2.ctx, _extends({}, legend, { - data: legendData, - containerWidth: width, - containerHeight: height - })); - }); - }; - - WaffleCanvas.prototype.render = function render() { - var _this3 = this; - - var _props = this.props, - outerWidth = _props.outerWidth, - outerHeight = _props.outerHeight, - pixelRatio = _props.pixelRatio, - isInteractive = _props.isInteractive, - theme = _props.theme; - - - return React__default.createElement( - core.Container, - { isInteractive: isInteractive, theme: theme }, - function (_ref) { - var showTooltip = _ref.showTooltip, - hideTooltip = _ref.hideTooltip; - return React__default.createElement('canvas', { - ref: function ref(surface) { - _this3.surface = surface; - }, - width: outerWidth * pixelRatio, - height: outerHeight * pixelRatio, - style: { - width: outerWidth, - height: outerHeight - }, - onMouseEnter: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseMove: _this3.handleMouseHover(showTooltip, hideTooltip), - onMouseLeave: _this3.handleMouseLeave(hideTooltip), - onClick: _this3.handleClick - }); - } - ); - }; - - return WaffleCanvas; - }(React.Component); - - WaffleCanvas.propTypes = WaffleCanvasPropTypes; - - - WaffleCanvas.displayName = 'WaffleCanvas'; - - var WaffleCanvas$1 = setDisplayName(WaffleCanvas.displayName)(enhance(WaffleCanvas)); - - var ResponsiveWaffleCanvas = function ResponsiveWaffleCanvas(props) { - return React__default.createElement( - core.ResponsiveWrapper, - null, - function (_ref) { - var width = _ref.width, - height = _ref.height; - return React__default.createElement(WaffleCanvas$1, _extends({ width: width, height: height }, props)); - } - ); - }; - - exports.Waffle = Waffle$1; - exports.ResponsiveWaffle = ResponsiveWaffle; - exports.WaffleHtml = WaffleHtml$1; - exports.ResponsiveWaffleHtml = ResponsiveWaffleHtml; - exports.WaffleCanvas = WaffleCanvas$1; - exports.ResponsiveWaffleCanvas = ResponsiveWaffleCanvas; - exports.WafflePropTypes = WafflePropTypes; - exports.WaffleHtmlPropTypes = WaffleHtmlPropTypes; - exports.WaffleCanvasPropTypes = WaffleCanvasPropTypes; - exports.WaffleDefaultProps = WaffleDefaultProps; - exports.WaffleHtmlDefaultProps = WaffleHtmlDefaultProps; - exports.WaffleCanvasDefaultProps = WaffleCanvasDefaultProps; - - Object.defineProperty(exports, '__esModule', { value: true }); - -})));