Add no-param-reassign eslint rule and refactor occurrences (#2724)

.changeset/silver-feet-doubt.md

@@ -0,0 +1,20 @@
+---
+"victory-axis": patch
+"victory-bar": patch
+"victory-box-plot": patch
+"victory-brush-container": patch
+"victory-brush-line": patch
+"victory-candlestick": patch
+"victory-chart": patch
+"victory-core": patch
+"victory-create-container": patch
+"victory-errorbar": patch
+"victory-legend": patch
+"victory-polar-axis": patch
+"victory-selection-container": patch
+"victory-shared-events": patch
+"victory-stack": patch
+"victory-voronoi-container": patch
+---
+
+Refactor param reassignments

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
       "error",
       { ignore: [-1, 0, 0.5, 1, 2, 90, 180, 270, 360] },
     ],
+    "no-param-reassign": "error",
   },
   parser: "@babel/eslint-parser",
   parserOptions: {

demo/js/components/performance.js

@@ -19,10 +19,10 @@ class App extends React.Component {
   }
 
   handleSelection(datasets) {
-    const points = datasets.reduce((memo, dataset) => {
-      memo = memo.concat(dataset.data);
-      return memo;
-    }, []);
+    const points = datasets.reduce(
+      (memo, dataset) => memo.concat(dataset.data),
+      [],
+    );
     this.setState({ points });
   }
 

demo/js/components/selection-demo.js

@@ -19,10 +19,10 @@ class App extends React.Component {
   }
 
   handleSelection(datasets) {
-    const points = datasets.reduce((memo, dataset) => {
-      memo = memo.concat(dataset.data);
-      return memo;
-    }, []);
+    const points = datasets.reduce(
+      (memo, dataset) => memo.concat(dataset.data),
+      [],
+    );
     this.setState({ points });
   }
 

demo/ts/components/selection-demo.tsx

@@ -30,10 +30,10 @@ export default class SelectionDemo extends React.Component<
   }
 
   handleSelection(datasets: DataSet[]) {
-    const points = datasets.reduce((memo: any, dataset: DataSet) => {
-      memo = memo.concat(dataset.data);
-      return memo;
-    }, []);
+    const points = datasets.reduce(
+      (memo: any, dataset: DataSet) => memo.concat(dataset.data),
+      [],
+    );
     this.setState({ points });
   }
 

packages/victory-axis/src/helper-methods.tsx

@@ -1,5 +1,6 @@
 import { assign, defaults } from "lodash";
 import { Helpers, Scale, Axis } from "victory-core";
+import { VictoryAxisProps } from "./victory-axis";
 
 const orientationSign = {
   top: -1,
@@ -61,9 +62,11 @@ const getStyleObject = (props) => {
     : specificAxisStyle || generalAxisStyle;
 };
 
-export const getStyles = (props, styleObject?) => {
+export const getStyles = (
+  props,
+  styleObject: VictoryAxisProps["style"] = {},
+) => {
   const style = props.style || {};
-  styleObject = styleObject || {};
   const parentStyleProps = { height: "100%", width: "100%" };
   return {
     parent: defaults(style.parent, styleObject.parent, parentStyleProps),

packages/victory-bar/src/path-helper-methods.ts

@@ -100,10 +100,10 @@ const mapPointsToPath = (coords, cornerRadius, direction) => {
     "L",
     `A ${bottomRightPath},`,
   ];
-  const path = commands.reduce((acc, command, i) => {
-    acc += `${command} ${coords[i].x}, ${coords[i].y} \n`;
-    return acc;
-  }, "");
+  const path = commands.reduce(
+    (acc, command, i) => `${acc}${command} ${coords[i].x}, ${coords[i].y} \n`,
+    "",
+  );
   return `${path} z`;
 };
 
@@ -402,10 +402,10 @@ export const getVerticalPolarBarPath = (props, cornerRadius) => {
   const topPath = getTopPath();
   const bottomPath = getBottomPath();
   const moves = [...topPath, ...bottomPath];
-  const path = moves.reduce((memo, move) => {
-    memo += `${move.command} ${move.coords.join()}`;
-    return memo;
-  }, "");
+  const path = moves.reduce(
+    (memo, move) => `${memo}${move.command} ${move.coords.join()}`,
+    "",
+  );
   return `${path} z`;
 };
 

packages/victory-box-plot/src/helper-methods.tsx

@@ -14,6 +14,7 @@ import {
   max as d3Max,
   quantile as d3Quantile,
 } from "victory-vendor/d3-array";
+import { VictoryBoxPlotProps } from "./victory-box-plot";
 
 const TYPES = ["max", "min", "median", "q1", "q3"];
 
@@ -162,12 +163,11 @@ const getLabelStyle = (props, styleObject, namespace?) => {
   return defaults({}, tooltipTheme.style, baseStyle);
 };
 
-const getStyles = (props, styleObject) => {
+const getStyles = (props, styleObject: VictoryBoxPlotProps["style"] = {}) => {
   if (props.disableInlineStyles) {
     return {};
   }
   const style = props.style || {};
-  styleObject = styleObject || {};
   const parentStyles = { height: "100%", width: "100%" };
   const labelStyles = defaults(
     {},

packages/victory-box-plot/src/victory-box-plot.tsx

@@ -77,6 +77,8 @@ export interface VictoryBoxPlotStyleInterface {
   q1Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
   q3?: VictoryStyleObject;
   q3Labels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
+  boxes?: VictoryStyleObject;
+  whiskers?: VictoryStyleObject;
 }
 
 export interface VictoryBoxPlotLabelOrientationInterface {

packages/victory-brush-container/src/brush-helpers.ts

@@ -14,23 +14,23 @@ const Helpers = {
   withinBounds(point, bounds, padding?) {
     const { x1, x2, y1, y2 } = mapValues(bounds, Number);
     const { x, y } = mapValues(point, Number);
-    padding = padding ? padding / 2 : 0;
+    const paddingValue = padding ? padding / 2 : 0;
     return (
-      x + padding >= Math.min(x1, x2) &&
-      x - padding <= Math.max(x1, x2) &&
-      y + padding >= Math.min(y1, y2) &&
-      y - padding <= Math.max(y1, y2)
+      x + paddingValue >= Math.min(x1, x2) &&
+      x - paddingValue <= Math.max(x1, x2) &&
+      y + paddingValue >= Math.min(y1, y2) &&
+      y - paddingValue <= Math.max(y1, y2)
     );
   },
 
   getDomainBox(props, fullDomain, selectedDomain?) {
     const brushDimension = this.getDimension(props);
-    fullDomain = defaults({}, fullDomain, props.domain);
-    selectedDomain = defaults({}, selectedDomain, fullDomain);
-    const fullCoords = Selection.getDomainCoordinates(props, fullDomain);
+    const fullDomainObject = defaults({}, fullDomain, props.domain);
+    const selectedDomainObject = defaults({}, selectedDomain, fullDomainObject);
+    const fullCoords = Selection.getDomainCoordinates(props, fullDomainObject);
     const selectedCoords = Selection.getDomainCoordinates(
       props,
-      selectedDomain,
+      selectedDomainObject,
     );
 
     return {
@@ -92,13 +92,10 @@ const Helpers = {
   getActiveHandles(point, props, domainBox) {
     const handles = this.getHandles(props, domainBox);
     const activeHandles = ["top", "bottom", "left", "right"].reduce(
-      (memo, opt) => {
-        memo =
-          handles[opt] && this.withinBounds(point, handles[opt])
-            ? memo.concat(opt)
-            : memo;
-        return memo;
-      },
+      (memo, opt) =>
+        handles[opt] && this.withinBounds(point, handles[opt])
+          ? memo.concat(opt)
+          : memo,
       [] as string[],
     );
     return activeHandles.length && activeHandles;

packages/victory-brush-container/src/victory-brush-container.tsx

@@ -199,17 +199,15 @@ export const brushContainerMixin = <TBase extends Constructor>(base: TBase) =>
         right: right && assign({ y: right.y1, x: right.x1 }, xProps),
       };
       const handles = ["top", "bottom", "left", "right"].reduce(
-        (memo, curr) => {
-          memo = handleProps[curr]
+        (memo, curr) =>
+          handleProps[curr]
             ? memo.concat(
                 React.cloneElement(
                   handleComponent,
                   assign({ key: `${name}-handle-${curr}` }, handleProps[curr]),
                 ),
               )
-            : memo;
-          return memo;
-        },
+            : memo,
         [] as React.ReactElement[],
       );
       return handles.length ? handles : null;

packages/victory-brush-line/src/victory-brush-line.tsx

@@ -517,8 +517,10 @@ export class VictoryBrushLine extends React.Component<VictoryBrushLineProps> {
   getRectDimensions(props, brushWidth, domain?) {
     const { brushDomain } = props;
     const dimension = getDimension(props);
-    domain = domain || getBrushDomain(brushDomain, getFullDomain(props));
-    const range = toRange(props, domain);
+    const range = toRange(
+      props,
+      domain || getBrushDomain(brushDomain, getFullDomain(props)),
+    );
     const coordinates =
       dimension === "x"
         ? {

packages/victory-candlestick/src/helper-methods.ts

@@ -190,11 +190,14 @@ const isTransparent = (attr) => {
   return attr === "none" || attr === "transparent";
 };
 
-const getDataStyles = (datum, style, props) => {
+const getDataStyles = (
+  datum,
+  style: { fill?: string; stroke?: string } = {},
+  props,
+) => {
   if (props.disableInlineStyles) {
     return {};
   }
-  style = style || {};
   const candleColor =
     datum._open > datum._close
       ? props.candleColors.negative
@@ -416,14 +419,14 @@ export const getBaseProps = (initialProps, fallbackProps) => {
   return data.reduce((childProps, datum, index) => {
     const eventKey = !isNil(datum.eventKey) ? datum.eventKey : index;
     const x = scale.x(datum._x1 !== undefined ? datum._x1 : datum._x);
-    datum = formatDataFromDomain(datum, domain);
-    const { _low, _open, _close, _high } = datum;
+    const formattedDatum = formatDataFromDomain(datum, domain);
+    const { _low, _open, _close, _high } = formattedDatum;
     const high = scale.y(_high);
     const close = scale.y(_close);
     const open = scale.y(_open);
     const low = scale.y(_low);
 
-    const dataStyle = getDataStyles(datum, style.data, props);
+    const dataStyle = getDataStyles(formattedDatum, style.data, props);
     const dataProps = {
       x,
       high,
@@ -432,7 +435,7 @@ export const getBaseProps = (initialProps, fallbackProps) => {
       candleRatio,
       scale,
       data,
-      datum,
+      datum: formattedDatum,
       groupComponent,
       index,
       style: dataStyle,
@@ -454,7 +457,7 @@ export const getBaseProps = (initialProps, fallbackProps) => {
     };
 
     if (labels) {
-      const text = LabelHelpers.getText(props, datum, index);
+      const text = LabelHelpers.getText(props, formattedDatum, index);
       if (
         (text !== undefined && text !== null) ||
         (labels && (events || sharedEvents))

packages/victory-chart/src/helper-methods.tsx

@@ -125,20 +125,20 @@ export function getCalculatedProps(initialProps, childComponents) {
 }
 
 export function getChildren(props, childComponents, calculatedProps) {
-  childComponents = childComponents || getChildComponents(props);
-  calculatedProps =
-    calculatedProps || getCalculatedProps(props, childComponents);
-  const baseStyle = calculatedProps.style.parent;
+  const children = childComponents || getChildComponents(props);
+  const newCalculatedProps =
+    calculatedProps || getCalculatedProps(props, children);
+  const baseStyle = newCalculatedProps.style.parent;
   const { height, polar, theme, width } = props;
-  const { origin, horizontal } = calculatedProps;
+  const { origin, horizontal } = newCalculatedProps;
   const parentName = props.name || "chart";
 
-  return childComponents.filter(React.isValidElement).map((child, index) => {
+  return children.filter(React.isValidElement).map((child, index) => {
     const role = child.type && child.type.role;
     const style = Array.isArray(child.props.style)
       ? child.props.style
       : defaults({}, child.props.style, { parent: baseStyle });
-    const childProps = getChildProps(child, props, calculatedProps);
+    const childProps = getChildProps(child, props, newCalculatedProps);
     const name = child.props.name || `${parentName}-${role}-${index}`;
     const newProps = defaults(
       {
@@ -150,7 +150,7 @@ export function getChildren(props, childComponents, calculatedProps) {
         style,
         name,
         origin: polar ? origin : undefined,
-        padding: calculatedProps.padding,
+        padding: newCalculatedProps.padding,
         key: `${name}-key-${index}`,
         standalone: false,
       },
@@ -193,9 +193,9 @@ export const getChildComponents = (props, defaultAxes?) => {
 };
 
 const getDomain = (props, axis, childComponents) => {
-  childComponents = childComponents || React.Children.toArray(props.children);
-  const domain = Wrapper.getDomain(props, axis, childComponents);
-  const axisComponent = Axis.getAxisComponent(childComponents, axis);
+  const children = childComponents || React.Children.toArray(props.children);
+  const domain = Wrapper.getDomain(props, axis, children);
+  const axisComponent = Axis.getAxisComponent(children, axis);
   const invertDomain =
     axisComponent && axisComponent.props && axisComponent.props.invertAxis;
   return invertDomain ? domain.concat().reverse() : domain;

packages/victory-core/src/victory-animation/util.ts

@@ -97,11 +97,11 @@ export const interpolateFunction = function (a, b) {
  * differs in that it uses our custom interpolators when interpolating the value of each property in
  * an object. This allows the correct interpolation of nested objects, including styles
  *
- * @param {any} a - Start value.
- * @param {any} b - End value.
+ * @param {any} startValue - Start value.
+ * @param {any} endValue - End value.
  * @returns {Function} An interpolation function.
  */
-export const interpolateObject = function (a, b) {
+export const interpolateObject = function (startValue, endValue) {
   const interpolateTypes = (x, y) => {
     if (x === y || !isInterpolatable(x) || !isInterpolatable(y)) {
       return interpolateImmediate(x, y);
@@ -126,6 +126,8 @@ export const interpolateObject = function (a, b) {
 
   const i = {};
   const c = {};
+  let a = startValue;
+  let b = endValue;
   let k;
 
   if (a === null || typeof a !== "object") {

packages/victory-core/src/victory-animation/victory-animation.tsx

@@ -259,8 +259,9 @@ export class VictoryAnimation extends React.Component<
       step can generate imprecise values, sometimes greater than 1
       if this happens set the state to 1 and return, cancelling the timer
     */
-    duration = duration !== undefined ? duration : this.props.duration;
-    const step = duration ? elapsed / duration : 1;
+    const animationDuration =
+      duration !== undefined ? duration : this.props.duration;
+    const step = animationDuration ? elapsed / animationDuration : 1;
     if (step >= 1) {
       this.setState({
         data: this.interpolator!(1),