getSize.js

const MAX_WIDTH = 1200;
const MIN_WIDTH = 320;

export default function getSize(windowInnerWidth, ...values) {
  if (values.some(({x1: x11, x2: x12}, idx1) => {
    return values.some(({x1: x21, x2: x22}, idx2) => {
      if (idx1 === idx2) {
        return false;
      }
      const max1 = Math.max(x11, x12);
      const min1 = Math.min(x11, x12);
      if (((x21 >= min1) && (x21 <= max1)) || ((x22 >= min1) && (x22 <= max1))) {
        return true;
      }
      return false;
    });
  })) {
    console.warn(`getSize: values shouldn't intersect. Values list: ${JSON.stringify(values)}`); // eslint-disable-line no-console
  }
  if (windowInnerWidth > MAX_WIDTH) {
    const value = values.find(({x1, x2}) => [x1, x2].includes(1200));
    if (!value) {
      console.warn(`getSize: no value for 1200. Values list: ${values}`); // eslint-disable-line no-console
    }
    const {x1, y1, y2} = value;
    if (x1 === 1200) {
      return y1;
    }
    return y2;
  }

  if (windowInnerWidth < MIN_WIDTH) {
    const closestValue = values.slice(1).reduce(
      (acc, value) => {
        const {x1: x01, x2: x02} = acc;
        const maxX0 = Math.max(x01, x02);
        const {x1, x2} = value;
        if ((x1 < maxX0) || (x2 < maxX0)) {
          return value;
        }
        return acc;
      },
      values[0],
    );
    const {x1, x2, y1, y2} = closestValue;
    return x1 < x2 ? y1 : y2;
  }

  const matchedValue = values.find(({x1, x2}) => {
    const max = Math.max(x1, x2);
    const min = Math.min(x1, x2);
    return (windowInnerWidth <= max) && (windowInnerWidth >= min);
  });

  if (!matchedValue) {
    console.warn(`getSize: no value for ${windowInnerWidth}. Values list: ${JSON.stringify(values)}`); // eslint-disable-line no-console
  }

  const {x1, x2, y1, y2} = matchedValue;

  const k = (y1 - y2) / (x1 - x2);

  const b = y1 - k * x1;

  return k * windowInnerWidth + b;
}