recharts - npm Package Compare versions

Comparing version 2.0.9 to 2.0.10

CHANGELOG.md

@@ -1,3 +0,16 @@
-## 2.0.9 (Mar 24, 2021)
+## 2.0.10 (jul 13, 2021)
 
+### feat
+
+- Feat: Allow automated axis padding for "gap" and "no-gap" for barcharts with continuous axis #2457
+- Passthrough position attribute on createLabeledScales
+
+### fix
+
+- fix: barchart for a single data point #2512
+- fix: the bar label type definition #2582
+- fix: show scatter chart tooltip cross cursor #2592
+
+## 2.0.9 (mar 24, 2021)
+
 ### chore
@@ -4,0 +17,0 @@

es6/util/CartesianUtils.js

@@ -18,3 +18,3 @@ import _every from "lodash/every";
 import { findChildByType } from './ReactUtils';
-
+import { getPercentValue } from './DataUtils';
 /**
@@ -29,2 +29,3 @@ * Calculate the scale function, position, width, height of axes
  */
+
 export var formatAxisMap = function formatAxisMap(props, axisMap, offset, axisType, chartName) {
@@ -56,8 +57,31 @@ var width = props.width,
     var offsetKey = "".concat(orientation).concat(mirror ? 'Mirror' : '');
-    var range, x, y, needSpace;
+    var calculatedPadding, range, x, y, needSpace;
 
+    if (axis.type === 'number' && (axis.padding === 'gap' || axis.padding === 'no-gap')) {
+      var diff = domain[1] - domain[0];
+      var smallestDistanceBetweenValues = Infinity;
+      var sortedValues = axis.categoricalDomain.sort();
+      sortedValues.forEach(function (value, index) {
+        if (index > 0) {
+          smallestDistanceBetweenValues = Math.min((value || 0) - (sortedValues[index - 1] || 0), smallestDistanceBetweenValues);
+        }
+      });
+      var smallestDistanceInPercent = smallestDistanceBetweenValues / diff;
+      var rangeWidth = axis.layout === 'vertical' ? offset.height : offset.width;
+
+      if (axis.padding === 'gap') {
+        calculatedPadding = smallestDistanceInPercent * rangeWidth / 2;
+      }
+
+      if (axis.padding === 'no-gap') {
+        var gap = getPercentValue(props.barCategoryGap, smallestDistanceInPercent * rangeWidth);
+        var halfBand = smallestDistanceInPercent * rangeWidth / 2;
+        calculatedPadding = halfBand - gap - (halfBand - gap) / rangeWidth * gap;
+      }
+    }
+
     if (axisType === 'xAxis') {
-      range = [offset.left + (padding.left || 0), offset.left + offset.width - (padding.right || 0)];
+      range = [offset.left + (padding.left || 0) + (calculatedPadding || 0), offset.left + offset.width - (padding.right || 0) - (calculatedPadding || 0)];
     } else if (axisType === 'yAxis') {
-      range = layout === 'horizontal' ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)] : [offset.top + (padding.top || 0), offset.top + offset.height - (padding.bottom || 0)];
+      range = layout === 'horizontal' ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)] : [offset.top + (padding.top || 0) + (calculatedPadding || 0), offset.top + offset.height - (padding.bottom || 0) - (calculatedPadding || 0)];
     } else {
@@ -246,7 +270,9 @@ range = axis.range;
       var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          bandAware = _ref5.bandAware;
+          bandAware = _ref5.bandAware,
+          position = _ref5.position;
 
       return _mapValues(coord, function (value, label) {
         return scales[label].apply(value, {
-          bandAware: bandAware
+          bandAware: bandAware,
+          position: position
         });
@@ -253,0 +279,0 @@ });

lib/util/CartesianUtils.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _DataUtils = require("./DataUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,8 +68,31 @@
     var offsetKey = "".concat(orientation).concat(mirror ? 'Mirror' : '');
-    var range, x, y, needSpace;
+    var calculatedPadding, range, x, y, needSpace;
 
+    if (axis.type === 'number' && (axis.padding === 'gap' || axis.padding === 'no-gap')) {
+      var diff = domain[1] - domain[0];
+      var smallestDistanceBetweenValues = Infinity;
+      var sortedValues = axis.categoricalDomain.sort();
+      sortedValues.forEach(function (value, index) {
+        if (index > 0) {
+          smallestDistanceBetweenValues = Math.min((value || 0) - (sortedValues[index - 1] || 0), smallestDistanceBetweenValues);
+        }
+      });
+      var smallestDistanceInPercent = smallestDistanceBetweenValues / diff;
+      var rangeWidth = axis.layout === 'vertical' ? offset.height : offset.width;
+
+      if (axis.padding === 'gap') {
+        calculatedPadding = smallestDistanceInPercent * rangeWidth / 2;
+      }
+
+      if (axis.padding === 'no-gap') {
+        var gap = (0, _DataUtils.getPercentValue)(props.barCategoryGap, smallestDistanceInPercent * rangeWidth);
+        var halfBand = smallestDistanceInPercent * rangeWidth / 2;
+        calculatedPadding = halfBand - gap - (halfBand - gap) / rangeWidth * gap;
+      }
+    }
+
     if (axisType === 'xAxis') {
-      range = [offset.left + (padding.left || 0), offset.left + offset.width - (padding.right || 0)];
+      range = [offset.left + (padding.left || 0) + (calculatedPadding || 0), offset.left + offset.width - (padding.right || 0) - (calculatedPadding || 0)];
     } else if (axisType === 'yAxis') {
-      range = layout === 'horizontal' ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)] : [offset.top + (padding.top || 0), offset.top + offset.height - (padding.bottom || 0)];
+      range = layout === 'horizontal' ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)] : [offset.top + (padding.top || 0) + (calculatedPadding || 0), offset.top + offset.height - (padding.bottom || 0) - (calculatedPadding || 0)];
     } else {
@@ -268,7 +293,9 @@ range = axis.range;
       var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          bandAware = _ref5.bandAware;
+          bandAware = _ref5.bandAware,
+          position = _ref5.position;
 
       return (0, _mapValues2["default"])(coord, function (value, label) {
         return scales[label].apply(value, {
-          bandAware: bandAware
+          bandAware: bandAware,
+          position: position
         });
@@ -275,0 +302,0 @@ });

package.json

 {
   "name": "recharts",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "React charts",
@@ -5,0 +5,0 @@ "main": "lib/index",

src/util/CartesianUtils.ts

@@ -5,2 +5,3 @@ import _ from 'lodash';
 import { Coordinate, AxisType } from './types';
+import { getPercentValue } from './DataUtils';
 
@@ -36,6 +37,35 @@ /**
 
-    let range, x, y, needSpace;
+    let calculatedPadding, range, x, y, needSpace;
 
+    if (axis.type === 'number' && (axis.padding === 'gap' || axis.padding === 'no-gap')) {
+      const diff = domain[1] - domain[0];
+      let smallestDistanceBetweenValues = Infinity;
+      const sortedValues = axis.categoricalDomain.sort();
+      sortedValues.forEach((value: number, index: number) => {
+        if (index > 0) {
+          smallestDistanceBetweenValues = Math.min(
+            (value || 0) - (sortedValues[index - 1] || 0),
+            smallestDistanceBetweenValues,
+          );
+        }
+      });
+      const smallestDistanceInPercent = smallestDistanceBetweenValues / diff;
+      const rangeWidth = axis.layout === 'vertical' ? offset.height : offset.width;
+
+      if (axis.padding === 'gap') {
+        calculatedPadding = (smallestDistanceInPercent * rangeWidth) / 2;
+      }
+
+      if (axis.padding === 'no-gap') {
+        const gap = getPercentValue(props.barCategoryGap, smallestDistanceInPercent * rangeWidth);
+        const halfBand = (smallestDistanceInPercent * rangeWidth) / 2;
+        calculatedPadding = halfBand - gap - ((halfBand - gap) / rangeWidth) * gap;
+      }
+    }
+
     if (axisType === 'xAxis') {
-      range = [offset.left + (padding.left || 0), offset.left + offset.width - (padding.right || 0)];
+      range = [
+        offset.left + (padding.left || 0) + (calculatedPadding || 0),
+        offset.left + offset.width - (padding.right || 0) - (calculatedPadding || 0),
+      ];
     } else if (axisType === 'yAxis') {
@@ -45,3 +75,6 @@ range =
           ? [offset.top + offset.height - (padding.bottom || 0), offset.top + (padding.top || 0)]
-          : [offset.top + (padding.top || 0), offset.top + offset.height - (padding.bottom || 0)];
+          : [
+              offset.top + (padding.top || 0) + (calculatedPadding || 0),
+              offset.top + offset.height - (padding.bottom || 0) - (calculatedPadding || 0),
+            ];
     } else {
@@ -201,4 +234,4 @@ ({ range } = axis);
     ...scales,
-    apply(coord: any, { bandAware }: any = {}) {
-      return _.mapValues(coord, (value, label) => scales[label].apply(value, { bandAware }));
+    apply(coord: any, { bandAware, position }: any = {}) {
+      return _.mapValues(coord, (value, label) => scales[label].apply(value, { bandAware, position }));
     },
@@ -205,0 +238,0 @@

types/cartesian/Bar.d.ts

@@ -7,3 +7,3 @@ import React, { PureComponent, ReactElement } from 'react';
 import { D3Scale, TooltipType, LegendType, AnimationTiming, ChartOffset, DataKey, TickItem, PresentationAttributesAdaptChildEvent } from '../util/types';
-import { ContentType } from '../component/Label';
+import { ImplicitLabelType } from '../component/Label';
 interface BarRectangleItem extends RectangleProps {
@@ -60,8 +60,3 @@ value?: number;
     id?: string;
-    label?: boolean | ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | {
-        id?: string;
-        valueAccessor?: Function;
-        dataKey?: DataKey<any>;
-        content?: ContentType;
-    };
+    label?: ImplicitLabelType;
 }
@@ -68,0 +63,0 @@ export declare type Props = Omit<PresentationAttributesAdaptChildEvent<any, SVGPathElement>, 'radius'> & BarProps;

types/cartesian/XAxis.d.ts

@@ -13,3 +13,3 @@ import type { FunctionComponent, SVGProps } from 'react';
         right?: number;
-    };
+    } | 'gap' | 'no-gap';
     minTickGap?: number;
@@ -16,0 +16,0 @@ interval?: AxisInterval;

types/component/LabelList.d.ts

@@ -19,2 +19,3 @@ import { ReactElement, SVGProps } from 'react';
     angle?: number;
+    formatter?: Function;
 }
@@ -21,0 +22,0 @@ export declare type Props<T> = SVGProps<SVGElement> & LabelListProps<T>;

No alert changes

Improved metrics

Total package byte prevSize

5278635

increased by0.13%

Lines of code

56006

increased by0.14%

No dependency changes