@simspace/nivo-radar/dist/nivo-radar.es.js

[](https://www.npmjs.com/package/@nivo/radar)

import { useMemo, createElement, memo, useState, useCallback, Fragment as Fragment$1 } from 'react';
import { useTheme, useMotionConfig, useAnimatedPath, positionFromAngle, radiansToDegrees, usePropertyAccessor, DotsItem, useValueFormatter, bindDefs, useCurveInterpolation, Container, useDimensions, SvgWrapper, ResponsiveWrapper } from '@simspace/nivo-core';
import { BoxLegendSvg } from '@simspace/nivo-legends';
import { useSpring, animated, useSprings, to } from '@react-spring/web';
import { lineRadial, curveLinearClosed, arc } from 'd3-shape';
import { useInheritedColor, getInheritedColorGenerator, useOrdinalColorScale } from '@simspace/nivo-colors';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useTooltip, Chip, TableTooltip } from '@simspace/nivo-tooltip';
import { scaleLinear } from 'd3-scale';

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }
  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;
  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }
  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }
  return keys;
}
function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }
  return target;
}

var RadarLayer = function RadarLayer(_ref) {
  var _fillByKey$key;

  var data = _ref.data,
      key = _ref.item,
      colorByKey = _ref.colorByKey,
      fillByKey = _ref.fillByKey,
      radiusScale = _ref.radiusScale,
      angleStep = _ref.angleStep,
      curveFactory = _ref.curveFactory,
      borderWidth = _ref.borderWidth,
      borderColor = _ref.borderColor,
      fillOpacity = _ref.fillOpacity,
      blendMode = _ref.blendMode;
  var theme = useTheme();
  var getBorderColor = useInheritedColor(borderColor, theme);
  var lineGenerator = useMemo(function () {
    return lineRadial().radius(function (d) {
      return radiusScale(d);
    }).angle(function (_, i) {
      return i * angleStep;
    }).curve(curveFactory);
  }, [radiusScale, angleStep, curveFactory]);

  var _useMotionConfig = useMotionConfig(),
      animate = _useMotionConfig.animate,
      springConfig = _useMotionConfig.config;

  var animatedPath = useAnimatedPath(lineGenerator(data.map(function (d) {
    return d[key];
  })));
  var animatedProps = useSpring({
    fill: colorByKey[key],
    stroke: getBorderColor({
      key: key,
      color: colorByKey[key]
    }),
    config: springConfig,
    immediate: !animate
  });
  var fill = (_fillByKey$key = fillByKey[key]) !== null && _fillByKey$key !== void 0 ? _fillByKey$key : animatedProps.fill;
  return jsx(animated.path, {
    d: animatedPath,
    fill: fill,
    fillOpacity: fillOpacity,
    stroke: animatedProps.stroke,
    strokeWidth: borderWidth,
    style: {
      mixBlendMode: blendMode
    }
  }, key);
};

var textAnchorFromAngle = function textAnchorFromAngle(_angle) {
  var angle = radiansToDegrees(_angle) + 90;
  if (angle <= 10 || angle >= 350 || angle >= 170 && angle <= 190) return 'middle';
  if (angle > 180) return 'end';
  return 'start';
};

var RadarGridLabels = function RadarGridLabels(_ref) {
  var radius = _ref.radius,
      angles = _ref.angles,
      indices = _ref.indices,
      labelComponent = _ref.label,
      labelOffset = _ref.labelOffset;

  var _useMotionConfig = useMotionConfig(),
      animate = _useMotionConfig.animate,
      springConfig = _useMotionConfig.config;

  var labels = indices.map(function (index, i) {
    var position = positionFromAngle(angles[i], radius + labelOffset);
    var textAnchor = textAnchorFromAngle(angles[i]);
    return _objectSpread2({
      id: index,
      angle: radiansToDegrees(angles[i]),
      anchor: textAnchor
    }, position);
  });
  var springs = useSprings(labels.length, labels.map(function (label) {
    return {
      transform: "translate(".concat(label.x, ", ").concat(label.y, ")"),
      config: springConfig,
      immediate: !animate
    };
  }));
  return jsx(Fragment, {
    children: springs.map(function (animatedProps, index) {
      var label = labels[index];
      return createElement(labelComponent, {
        key: label.id,
        id: label.id,
        anchor: label.anchor,
        angle: label.angle,
        x: label.x,
        y: label.y,
        animated: animatedProps
      });
    })
  });
};

var RadarGridLevelCircular = memo(function (_ref) {
  var radius = _ref.radius;
  var theme = useTheme();

  var _useMotionConfig = useMotionConfig(),
      animate = _useMotionConfig.animate,
      springConfig = _useMotionConfig.config;

  var animatedProps = useSpring({
    radius: radius,
    config: springConfig,
    immediate: !animate
  });
  return jsx(animated.circle, _objectSpread2({
    fill: "none",
    r: to(animatedProps.radius, function (value) {
      return Math.max(value, 0);
    })
  }, theme.grid.line));
});

var RadarGridLevelLinear = function RadarGridLevelLinear(_ref2) {
  var radius = _ref2.radius,
      angleStep = _ref2.angleStep,
      dataLength = _ref2.dataLength;
  var theme = useTheme();
  var radarLineGenerator = useMemo(function () {
    return lineRadial().angle(function (i) {
      return i * angleStep;
    }).radius(radius).curve(curveLinearClosed);
  }, [angleStep, radius]);
  var points = Array.from({
    length: dataLength
  }, function (_, i) {
    return i;
  });
  var animatedPath = useAnimatedPath(radarLineGenerator(points));
  return jsx(animated.path, _objectSpread2({
    fill: "none",
    d: animatedPath
  }, theme.grid.line));
};

var RadarGridLevels = function RadarGridLevels(_ref3) {
  var shape = _ref3.shape,
      props = _objectWithoutProperties(_ref3, ["shape"]);

  return shape === 'circular' ? jsx(RadarGridLevelCircular, {
    radius: props.radius
  }) : jsx(RadarGridLevelLinear, _objectSpread2({}, props));
};

var RadarGrid = function RadarGrid(_ref) {
  var indices = _ref.indices,
      levels = _ref.levels,
      shape = _ref.shape,
      radius = _ref.radius,
      angleStep = _ref.angleStep,
      label = _ref.label,
      labelOffset = _ref.labelOffset;
  var theme = useTheme();

  var _useMemo = useMemo(function () {
    return {
      radii: Array.from({
        length: levels
      }).map(function (_, i) {
        return radius / levels * (i + 1);
      }).reverse(),
      angles: Array.from({
        length: indices.length
      }, function (_, i) {
        return i * angleStep - Math.PI / 2;
      })
    };
  }, [indices, levels, radius, angleStep]),
      radii = _useMemo.radii,
      angles = _useMemo.angles;

  return jsxs(Fragment, {
    children: [angles.map(function (angle, i) {
      var position = positionFromAngle(angle, radius);
      return jsx("line", _objectSpread2({
        x1: 0,
        y1: 0,
        x2: position.x,
        y2: position.y
      }, theme.grid.line), "axis.".concat(i));
    }), radii.map(function (radius, i) {
      return jsx(RadarGridLevels, {
        shape: shape,
        radius: radius,
        angleStep: angleStep,
        dataLength: indices.length
      }, "level.".concat(i));
    }), jsx(RadarGridLabels, {
      radius: radius,
      angles: angles,
      indices: indices,
      labelOffset: labelOffset,
      label: label
    })]
  });
};

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;
  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);
      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }
  return _arr;
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }
  return arr2;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

var RadarSlice = function RadarSlice(_ref) {
  var datum = _ref.datum,
      keys = _ref.keys,
      index = _ref.index,
      formatValue = _ref.formatValue,
      colorByKey = _ref.colorByKey,
      radius = _ref.radius,
      startAngle = _ref.startAngle,
      endAngle = _ref.endAngle,
      arcGenerator = _ref.arcGenerator,
      tooltip = _ref.tooltip;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isHover = _useState2[0],
      setIsHover = _useState2[1];

  var theme = useTheme();

  var _useTooltip = useTooltip(),
      showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
      hideTooltip = _useTooltip.hideTooltip;

  var tooltipData = useMemo(function () {
    var data = keys.map(function (key) {
      return {
        color: colorByKey[key],
        id: key,
        value: datum[key],
        formattedValue: formatValue(datum[key], key)
      };
    });
    data.sort(function (a, b) {
      return a.value - b.value;
    });
    data.reverse();
    return data;
  }, [datum, keys, formatValue, colorByKey]);
  var showItemTooltip = useCallback(function (event) {
    setIsHover(true);
    showTooltipFromEvent(createElement(tooltip, {
      index: index,
      data: tooltipData
    }), event);
  }, [showTooltipFromEvent, tooltip, index, tooltipData]);
  var hideItemTooltip = useCallback(function () {
    setIsHover(false);
    hideTooltip();
  }, [hideTooltip, setIsHover]);

  var _useMemo = useMemo(function () {
    var position = positionFromAngle(startAngle + (endAngle - startAngle) * 0.5 - Math.PI / 2, radius);
    return {
      path: arcGenerator({
        startAngle: startAngle,
        endAngle: endAngle
      }),
      tipX: position.x,
      tipY: position.y
    };
  }, [startAngle, endAngle, radius, arcGenerator]),
      path = _useMemo.path,
      tipX = _useMemo.tipX,
      tipY = _useMemo.tipY;

  return jsxs(Fragment, {
    children: [isHover && jsx("line", {
      x1: 0,
      y1: 0,
      x2: tipX,
      y2: tipY,
      style: theme.crosshair.line
    }), jsx("path", {
      d: path,
      fill: "#F00",
      fillOpacity: 0,
      onMouseEnter: showItemTooltip,
      onMouseMove: showItemTooltip,
      onMouseLeave: hideItemTooltip
    })]
  });
};

var RadarSlices = function RadarSlices(_ref) {
  var data = _ref.data,
      keys = _ref.keys,
      getIndex = _ref.getIndex,
      formatValue = _ref.formatValue,
      colorByKey = _ref.colorByKey,
      radius = _ref.radius,
      angleStep = _ref.angleStep,
      tooltip = _ref.tooltip;
  var arc$1 = arc().outerRadius(radius).innerRadius(0);
  var halfAngleStep = angleStep * 0.5;
  var rootStartAngle = -halfAngleStep;
  return jsx(Fragment, {
    children: data.map(function (d) {
      var index = getIndex(d);
      var startAngle = rootStartAngle;
      var endAngle = startAngle + angleStep;
      rootStartAngle += angleStep;
      return jsx(RadarSlice, {
        datum: d,
        keys: keys,
        index: index,
        formatValue: formatValue,
        colorByKey: colorByKey,
        startAngle: startAngle,
        endAngle: endAngle,
        radius: radius,
        arcGenerator: arc$1,
        tooltip: tooltip
      }, index);
    })
  });
};

var RadarDots = function RadarDots(_ref) {
  var data = _ref.data,
      keys = _ref.keys,
      getIndex = _ref.getIndex,
      colorByKey = _ref.colorByKey,
      radiusScale = _ref.radiusScale,
      angleStep = _ref.angleStep,
      symbol = _ref.symbol,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 6 : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? {
    from: 'color'
  } : _ref$color,
      _ref$borderWidth = _ref.borderWidth,
      borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? {
    from: 'color'
  } : _ref$borderColor,
      _ref$enableLabel = _ref.enableLabel,
      enableLabel = _ref$enableLabel === void 0 ? false : _ref$enableLabel,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? 'value' : _ref$label,
      formatValue = _ref.formatValue,
      labelYOffset = _ref.labelYOffset;
  var theme = useTheme();
  var fillColor = getInheritedColorGenerator(color, theme);
  var strokeColor = getInheritedColorGenerator(borderColor, theme);
  var getLabel = usePropertyAccessor(label);
  var points = useMemo(function () {
    return data.reduce(function (acc, datum, i) {
      var index = getIndex(datum);
      keys.forEach(function (key) {
        var value = datum[key];
        var pointData = {
          index: index,
          key: key,
          value: value,
          formattedValue: formatValue(value, key),
          color: colorByKey[key]
        };
        acc.push({
          key: "".concat(key, ".").concat(index),
          label: enableLabel ? getLabel(pointData) : undefined,
          style: _objectSpread2({
            fill: fillColor(pointData),
            stroke: strokeColor(pointData)
          }, positionFromAngle(angleStep * i - Math.PI / 2, radiusScale(datum[key]))),
          data: pointData
        });
      });
      return acc;
    }, []);
  }, [data, keys, getIndex, colorByKey, enableLabel, getLabel, formatValue, fillColor, strokeColor, angleStep, radiusScale]);
  return jsx(Fragment, {
    children: points.map(function (point) {
      return jsx(DotsItem, {
        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,
        datum: point.data
      }, point.key);
    })
  });
};

var RadarGridLabel = function RadarGridLabel(_ref) {
  var id = _ref.id,
      anchor = _ref.anchor,
      animatedProps = _ref.animated;
  var theme = useTheme();
  return jsx(animated.g, {
    transform: animatedProps.transform,
    children: jsx("text", {
      style: theme.axis.ticks.text,
      dominantBaseline: "central",
      textAnchor: anchor,
      children: id
    })
  });
};

var RadarSliceTooltip = function RadarSliceTooltip(_ref) {
  var index = _ref.index,
      data = _ref.data;
  var rows = useMemo(function () {
    return data.map(function (datum) {
      return [jsx(Chip, {
        color: datum.color
      }, datum.id), datum.id, datum.formattedValue];
    });
  }, [data]);
  return jsx(TableTooltip, {
    title: jsx("strong", {
      children: index
    }),
    rows: rows
  });
};

var svgDefaultProps = {
  layers: ['grid', 'layers', 'slices', 'dots', 'legends'],
  maxValue: 'auto',
  curve: 'linearClosed',
  borderWidth: 2,
  borderColor: {
    from: 'color'
  },
  gridLevels: 5,
  gridShape: 'circular',
  gridLabelOffset: 16,
  gridLabel: RadarGridLabel,
  enableDots: true,
  dotSize: 6,
  dotColor: {
    from: 'color'
  },
  dotBorderWidth: 0,
  dotBorderColor: {
    from: 'color'
  },
  enableDotLabel: false,
  dotLabel: 'formattedValue',
  dotLabelYOffset: -12,
  colors: {
    scheme: 'nivo'
  },
  fillOpacity: 0.25,
  blendMode: 'normal',
  isInteractive: true,
  sliceTooltip: RadarSliceTooltip,
  legends: [],
  role: 'img',
  animate: true,
  motionConfig: 'gentle',
  defs: [],
  fill: []
};

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

var useRadar = function useRadar(_ref) {
  var data = _ref.data,
      keys = _ref.keys,
      indexBy = _ref.indexBy,
      maxValue = _ref.maxValue,
      valueFormat = _ref.valueFormat,
      curve = _ref.curve,
      width = _ref.width,
      height = _ref.height,
      _ref$colors = _ref.colors,
      colors = _ref$colors === void 0 ? svgDefaultProps.colors : _ref$colors,
      legends = _ref.legends,
      defs = _ref.defs,
      fill = _ref.fill;
  var getIndex = usePropertyAccessor(indexBy);
  var indices = useMemo(function () {
    return data.map(getIndex);
  }, [data, getIndex]);
  var formatValue = useValueFormatter(valueFormat);
  var getColor = useOrdinalColorScale(colors, 'key');
  var colorByKey = useMemo(function () {
    return keys.reduce(function (mapping, key, index) {
      mapping[key] = getColor({
        key: key,
        index: index
      });
      return mapping;
    }, {});
  }, [keys, getColor]);

  var _useMemo = useMemo(function () {
    var keyData = keys.map(function (k) {
      return {
        key: k,
        color: colorByKey[k],
        data: data,
        fill: null
      };
    });
    var boundDefs = bindDefs(defs, keyData, fill);
    var fillByKey = keyData.reduce(function (mapping, keyDatum) {
      var keyName = keyDatum.key,
          fill = keyDatum.fill;
      mapping[keyName] = fill;
      return mapping;
    }, {});
    return {
      boundDefs: boundDefs,
      fillByKey: fillByKey
    };
  }, [keys, data, defs, fill, colorByKey]),
      boundDefs = _useMemo.boundDefs,
      fillByKey = _useMemo.fillByKey;

  var _useMemo2 = useMemo(function () {
    var allValues = data.reduce(function (acc, d) {
      return [].concat(_toConsumableArray(acc), _toConsumableArray(keys.map(function (key) {
        return d[key];
      })));
    }, []);
    var computedMaxValue = maxValue !== 'auto' ? maxValue : Math.max.apply(Math, _toConsumableArray(allValues));
    var radius = Math.min(width, height) / 2;
    var radiusScale = scaleLinear().range([0, radius]).domain([0, computedMaxValue]);
    return {
      radius: radius,
      radiusScale: radiusScale,
      centerX: width / 2,
      centerY: height / 2,
      angleStep: Math.PI * 2 / data.length
    };
  }, [keys, data, maxValue, width, height]),
      radius = _useMemo2.radius,
      radiusScale = _useMemo2.radiusScale,
      centerX = _useMemo2.centerX,
      centerY = _useMemo2.centerY,
      angleStep = _useMemo2.angleStep;

  var curveFactory = useCurveInterpolation(curve);
  var customLayerProps = useMemo(function () {
    return {
      data: data,
      keys: keys,
      indices: indices,
      colorByKey: colorByKey,
      centerX: centerX,
      centerY: centerY,
      radiusScale: radiusScale,
      angleStep: angleStep
    };
  }, [data, keys, indices, colorByKey, centerX, centerY, radiusScale, angleStep]);
  var legendData = useMemo(function () {
    return keys.map(function (key) {
      return {
        id: key,
        label: key,
        color: colorByKey[key]
      };
    });
  }, [keys, colorByKey]);
  var boundLegends = useMemo(function () {
    return legends.map(function (_ref2) {
      var customData = _ref2.data,
          legend = _objectWithoutProperties(_ref2, ["data"]);

      var boundData = customData === null || customData === void 0 ? void 0 : customData.map(function (cd) {
        var findData = legendData.find(function (ld) {
          return ld.id === cd.id;
        }) || {};
        return _objectSpread2(_objectSpread2({}, findData), cd);
      });
      return _objectSpread2(_objectSpread2({}, legend), {}, {
        data: boundData || legendData
      });
    });
  }, [legends, legendData]);
  return {
    getIndex: getIndex,
    indices: indices,
    formatValue: formatValue,
    colorByKey: colorByKey,
    fillByKey: fillByKey,
    boundDefs: boundDefs,
    radius: radius,
    radiusScale: radiusScale,
    centerX: centerX,
    centerY: centerY,
    angleStep: angleStep,
    curveFactory: curveFactory,
    legendData: legendData,
    boundLegends: boundLegends,
    customLayerProps: customLayerProps
  };
};

var InnerRadar = function InnerRadar(_ref) {
  var data = _ref.data,
      keys = _ref.keys,
      indexBy = _ref.indexBy,
      _ref$layers = _ref.layers,
      layers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
      _ref$maxValue = _ref.maxValue,
      maxValue = _ref$maxValue === void 0 ? svgDefaultProps.maxValue : _ref$maxValue,
      valueFormat = _ref.valueFormat,
      _ref$curve = _ref.curve,
      curve = _ref$curve === void 0 ? svgDefaultProps.curve : _ref$curve,
      partialMargin = _ref.margin,
      width = _ref.width,
      height = _ref.height,
      _ref$borderWidth = _ref.borderWidth,
      borderWidth = _ref$borderWidth === void 0 ? svgDefaultProps.borderWidth : _ref$borderWidth,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? svgDefaultProps.borderColor : _ref$borderColor,
      _ref$gridLevels = _ref.gridLevels,
      gridLevels = _ref$gridLevels === void 0 ? svgDefaultProps.gridLevels : _ref$gridLevels,
      _ref$gridShape = _ref.gridShape,
      gridShape = _ref$gridShape === void 0 ? svgDefaultProps.gridShape : _ref$gridShape,
      _ref$gridLabel = _ref.gridLabel,
      gridLabel = _ref$gridLabel === void 0 ? svgDefaultProps.gridLabel : _ref$gridLabel,
      _ref$gridLabelOffset = _ref.gridLabelOffset,
      gridLabelOffset = _ref$gridLabelOffset === void 0 ? svgDefaultProps.gridLabelOffset : _ref$gridLabelOffset,
      _ref$enableDots = _ref.enableDots,
      enableDots = _ref$enableDots === void 0 ? svgDefaultProps.enableDots : _ref$enableDots,
      dotSymbol = _ref.dotSymbol,
      _ref$dotSize = _ref.dotSize,
      dotSize = _ref$dotSize === void 0 ? svgDefaultProps.dotSize : _ref$dotSize,
      _ref$dotColor = _ref.dotColor,
      dotColor = _ref$dotColor === void 0 ? svgDefaultProps.dotColor : _ref$dotColor,
      _ref$dotBorderWidth = _ref.dotBorderWidth,
      dotBorderWidth = _ref$dotBorderWidth === void 0 ? svgDefaultProps.dotBorderWidth : _ref$dotBorderWidth,
      _ref$dotBorderColor = _ref.dotBorderColor,
      dotBorderColor = _ref$dotBorderColor === void 0 ? svgDefaultProps.dotBorderColor : _ref$dotBorderColor,
      _ref$enableDotLabel = _ref.enableDotLabel,
      enableDotLabel = _ref$enableDotLabel === void 0 ? svgDefaultProps.enableDotLabel : _ref$enableDotLabel,
      _ref$dotLabel = _ref.dotLabel,
      dotLabel = _ref$dotLabel === void 0 ? svgDefaultProps.dotLabel : _ref$dotLabel,
      _ref$dotLabelYOffset = _ref.dotLabelYOffset,
      dotLabelYOffset = _ref$dotLabelYOffset === void 0 ? svgDefaultProps.dotLabelYOffset : _ref$dotLabelYOffset,
      _ref$colors = _ref.colors,
      colors = _ref$colors === void 0 ? svgDefaultProps.colors : _ref$colors,
      _ref$fillOpacity = _ref.fillOpacity,
      fillOpacity = _ref$fillOpacity === void 0 ? svgDefaultProps.fillOpacity : _ref$fillOpacity,
      _ref$blendMode = _ref.blendMode,
      blendMode = _ref$blendMode === void 0 ? svgDefaultProps.blendMode : _ref$blendMode,
      _ref$isInteractive = _ref.isInteractive,
      isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
      _ref$sliceTooltip = _ref.sliceTooltip,
      sliceTooltip = _ref$sliceTooltip === void 0 ? svgDefaultProps.sliceTooltip : _ref$sliceTooltip,
      _ref$legends = _ref.legends,
      legends = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
      role = _ref.role,
      ariaLabel = _ref.ariaLabel,
      ariaLabelledBy = _ref.ariaLabelledBy,
      ariaDescribedBy = _ref.ariaDescribedBy,
      _ref$defs = _ref.defs,
      defs = _ref$defs === void 0 ? svgDefaultProps.defs : _ref$defs,
      _ref$fill = _ref.fill,
      fill = _ref$fill === void 0 ? svgDefaultProps.fill : _ref$fill;

  var _useDimensions = useDimensions(width, height, partialMargin),
      margin = _useDimensions.margin,
      innerWidth = _useDimensions.innerWidth,
      innerHeight = _useDimensions.innerHeight,
      outerWidth = _useDimensions.outerWidth,
      outerHeight = _useDimensions.outerHeight;

  var _useRadar = useRadar({
    data: data,
    keys: keys,
    indexBy: indexBy,
    maxValue: maxValue,
    valueFormat: valueFormat,
    curve: curve,
    width: innerWidth,
    height: innerHeight,
    colors: colors,
    legends: legends,
    defs: defs,
    fill: fill
  }),
      getIndex = _useRadar.getIndex,
      indices = _useRadar.indices,
      formatValue = _useRadar.formatValue,
      colorByKey = _useRadar.colorByKey,
      fillByKey = _useRadar.fillByKey,
      boundDefs = _useRadar.boundDefs,
      radius = _useRadar.radius,
      radiusScale = _useRadar.radiusScale,
      centerX = _useRadar.centerX,
      centerY = _useRadar.centerY,
      angleStep = _useRadar.angleStep,
      curveFactory = _useRadar.curveFactory,
      boundLegends = _useRadar.boundLegends,
      customLayerProps = _useRadar.customLayerProps;

  var layerById = {
    grid: null,
    layers: null,
    slices: null,
    dots: null,
    legends: null
  };

  if (layers.includes('grid')) {
    layerById.grid = jsx("g", {
      transform: "translate(".concat(centerX, ", ").concat(centerY, ")"),
      children: jsx(RadarGrid, {
        levels: gridLevels,
        shape: gridShape,
        radius: radius,
        angleStep: angleStep,
        indices: indices,
        label: gridLabel,
        labelOffset: gridLabelOffset
      })
    }, "grid");
  }

  if (layers.includes('layers')) {
    layerById.layers = jsx("g", {
      transform: "translate(".concat(centerX, ", ").concat(centerY, ")"),
      children: keys.map(function (key) {
        return jsx(RadarLayer, {
          data: data,
          item: key,
          colorByKey: colorByKey,
          fillByKey: fillByKey,
          radiusScale: radiusScale,
          angleStep: angleStep,
          curveFactory: curveFactory,
          borderWidth: borderWidth,
          borderColor: borderColor,
          fillOpacity: fillOpacity,
          blendMode: blendMode
        }, key);
      })
    }, "layers");
  }

  if (layers.includes('slices') && isInteractive) {
    layerById.slices = jsx("g", {
      transform: "translate(".concat(centerX, ", ").concat(centerY, ")"),
      children: jsx(RadarSlices, {
        data: data,
        keys: keys,
        getIndex: getIndex,
        formatValue: formatValue,
        colorByKey: colorByKey,
        radius: radius,
        angleStep: angleStep,
        tooltip: sliceTooltip
      })
    }, "slices");
  }

  if (layers.includes('dots') && enableDots) {
    layerById.dots = jsx("g", {
      transform: "translate(".concat(centerX, ", ").concat(centerY, ")"),
      children: jsx(RadarDots, {
        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,
        formatValue: formatValue,
        labelYOffset: dotLabelYOffset
      })
    }, "dots");
  }

  if (layers.includes('legends')) {
    layerById.legends = jsx(Fragment$1, {
      children: boundLegends.map(function (legend, i) {
        return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
          containerWidth: width,
          containerHeight: height
        }), i);
      })
    }, "legends");
  }

  return jsx(SvgWrapper, {
    defs: boundDefs,
    width: outerWidth,
    height: outerHeight,
    margin: margin,
    role: role,
    ariaLabel: ariaLabel,
    ariaLabelledBy: ariaLabelledBy,
    ariaDescribedBy: ariaDescribedBy,
    children: layers.map(function (layer, i) {
      var _layerById$layer;

      if (typeof layer === 'function') {
        return jsx(Fragment$1, {
          children: createElement(layer, customLayerProps)
        }, i);
      }

      return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
    })
  });
};

var Radar = function Radar(_ref2) {
  var _ref2$isInteractive = _ref2.isInteractive,
      isInteractive = _ref2$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref2$isInteractive,
      _ref2$animate = _ref2.animate,
      animate = _ref2$animate === void 0 ? svgDefaultProps.animate : _ref2$animate,
      _ref2$motionConfig = _ref2.motionConfig,
      motionConfig = _ref2$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref2$motionConfig,
      theme = _ref2.theme,
      renderWrapper = _ref2.renderWrapper,
      otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);

  return jsx(Container, {
    animate: animate,
    isInteractive: isInteractive,
    motionConfig: motionConfig,
    renderWrapper: renderWrapper,
    theme: theme,
    children: jsx(InnerRadar, _objectSpread2({
      isInteractive: isInteractive
    }, otherProps))
  });
};

var ResponsiveRadar = function ResponsiveRadar(props) {
  return jsx(ResponsiveWrapper, {
    children: function children(_ref) {
      var width = _ref.width,
          height = _ref.height;
      return jsx(Radar, _objectSpread2({
        width: width,
        height: height
      }, props));
    }
  });
};

export { Radar, RadarDots, ResponsiveRadar, svgDefaultProps };
//# sourceMappingURL=nivo-radar.es.js.map