How to use the d3-array.max function in d3-array

renderAxis() {
    const { data } = this.props;

    // -- X Axis
    this.xScale = scaleBand()
      .paddingInner(0.05)
      .paddingOuter(0.1)
      .domain(data.map(d => d.name))
      .range([0, WIDTH]);

    // -- Y Axis
    this.yScale = scaleLinear()
      .range([HEIGHT, 0])
      .domain([0, max(data, d => d.value)])
      .nice();

    this.yAxis = axisLeft(this.yScale)
      .tickSize(-WIDTH, 0, 0)
      .ticks(5);

    this.yAxisSelection = this.container
      .append('g')
      .attr('transform', `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
      .call(this.yAxis);

    select('.domain').remove(); // Remove axis border
  }

// data
const data = appleStock;

// accessors
const x = d => new Date(d.date);
const y = d => d.close;

// scales
const xScaleContext = scaleTime({
  range: [0, contextWidth],
  domain: extent(data, x),
  clamp: true,
});
const yScaleContext = scaleLinear({
  range: [contextHeight, 0],
  domain: [0, max(data, y)],
  nice: true,
});
const xScaleFocus = scaleTime({
  range: [0, contextWidth],
  domain: extent(data, x),
  clamp: true,
});
const yScaleFocus = scaleLinear({
  range: [focusHeight, 0],
  domain: [0, max(data, y)],
  nice: true,
});

const invertX = ({ x, tx, sx }) => (x - tx) / sx;

class Brush extends React.Component {

return d3Array.max(c[`values`], (d) => {
        return d[`value`];
      });
    });
    if (maxValue < 1000) {
      this.yLogAxis = false;
      this.y = d3Scale.scaleLinear().range([this.height, 0]);
      this.revertBackZeroValues();
      if (maxValue > 1) {
        if (this.singlePercentLine) {
          // To show a scale of 1-100 if we're showing a single percentage line (out of 100)
          this.y.domain([0, 100]);
        } else {
          this.y.domain([
            0,
            d3Array.max(this.graphData, (c) => {
              return d3Array.max(c[`values`], (d) => {
                return d[`value`];
              });
            })
          ]);
        }
      } else {
        // If the max value itself if 0, we'll be keeping a default range of 0-10
        this.y.domain([0, 10]);
      }
    } else {
      this.yLogAxis = true;
      this.y = d3Scale.scaleLog().range([this.height, 0]);

      this.y.domain([
        1,

render() {
    const xScale = scaleBand()
      .rangeRound([0, dims[0]])
      .domain(this.state.data.map((d) => d.name))
      .padding(0.1)

    const yScale = scaleLinear()
      .rangeRound([dims[1], 0])
      .domain([0, max(this.state.data.map((d) => d.value))])

    return (
      <div>
        <button>
          Update
        </button>
        <span style="{{">
          Bar Count: {this.state.data.length}
        </span>
        
           d.name}
            wrapper='g'

            start={() =&gt; ({</div>

ticks.reduce(
        (precision, value) =>
          precision || pow.scale(value) - Math.floor(pow.scale(value)),
        0
      )
    )

    lastFormat = sFormat(tLabel, specifier.precision, pow, 'f')
    regularFormat = sFormat(
      tLabel,
      specifier.precision,
      { scale: pow.scale, suffix: '' },
      'f'
    )
  } else {
    specifier.precision = d3Max(
      ticks.map((tick, i) =>
        Math.max(
          i && precisionFixed(tick - ticks[i - 1]),
          precisionFixed(tick - Math.floor(tick))
        )
      )
    )
    lastFormat = regularFormat = format(specifier.toString())
  }
  const axisFormat = (value, isLast) =>
    isLast ? `${lastFormat(value)} ${unit}` : regularFormat(value)

  return {
    ticks,
    format: formatter,
    axisFormat

doShow(data) {
        this.setupViewport();
        this.x.range([0, this.width]);
        this.y.range([this.height, 0]);
        this.x.domain(data.map(d => d.id));
        this.y.domain([0, max(data, d => d.total)]).nice();

        const trendStack = this.stack(data);
        this.makeBottomAxis({
            scale: this.x,
            tickFormat: (d, i) => data[i].name
        });

        this.makeLeftAxis({
            scale: this.y,
            tickFormat: this.yTickFormat
        });

        if (document.dir === 'rtl') {
            this.svg.selectAll('.chart__axis_x')
                .selectAll('text')
                .style('text-anchor', 'start');

var textSize = text.nodes().map(function (d) {
      return d.getBBox();
    }),
        shapeSize = shapes.nodes().map(function (d, i) {
      var bbox = d.getBBox();
      var stroke = scale(type.data[i]);

      if (shape === "line" && orient === "horizontal") {
        bbox.height = bbox.height + stroke;
      } else if (shape === "line" && orient === "vertical") {
        bbox.width = bbox.width;
      }
      return bbox;
    });

    var maxH = max(shapeSize, function (d) {
      return d.height + d.y;
    }),
        maxW = max(shapeSize, function (d) {
      return d.width + d.x;
    });

    var cellTrans = void 0,
        textTrans = void 0,
        textAlign = labelAlign == "start" ? 0 : labelAlign == "middle" ? 0.5 : 1;

    //positions cells and text
    if (orient === "vertical") {
      (function () {
        var cellSize = textSize.map(function (d, i) {
          return Math.max(d.height, shapeSize[i].height);
        });

function getMaxRemainingEffort({ points_with_date, capacity }) {
        const max_remaining_effort = max(
            points_with_date,
            ({ remaining_effort }) => remaining_effort
        );

        const maximum = max([max_remaining_effort, capacity]);

        if (maximum) {
            return maximum;
        }

        return DEFAULT_REMAINING_EFFORT;
    }

export const updateApp = grnState => {

    if (grnState.newNetwork) {
        grnState.normalizationMax = max(grnState.network.positiveWeights.concat(grnState.network.negativeWeights));
        displayNetwork(grnState.network, grnState.name);
        clearDropdownMenus();
        if (hasExpressionData(grnState.network.expression)) {
            resetDatasetDropdownMenus(grnState.network);
            grnState.nodeColoring.nodeColoringEnabled = true;
            if (isNewWorkbook(name)) {
                grnState.nodeColoring.showMenu = true;
                grnState.nodeColoring.lastDataset = name;
                showNodeColoringMenus();
            }
            grnState.nodeColoring.topDataset = $(TOP_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value");
            if ($(BOTTOM_DATASET_SELECTION_SIDEBAR).find(":selected").attr("value") === "Same as Top Dataset") {
                grnState.nodeColoring.bottomDataset = grnState.nodeColoring.topDataset;
                grnState.nodeColoring.bottomDataSameAsTop = true;
            } else {
                grnState.nodeColoring.bottomDataset =