0xD34F

map.events.add('click', e => e.get('target').balloon.close());

jsfiddle.net/axtjgfh9

Вместо <div>{{ day }}</div> пусть будет <div v-html="[].concat(day).join('<br>')"></div>. Это если надо по-быстрому заставить работать. Но вообще, стоит переписать так, чтобы дни были единообразно представлены - а то сейчас где-то число, где-то массив. Бред же.

class App extends React.Component {
  state = {
    items: [
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ],
    active: null,
  }

  onClick = e => {
    this.setState({
      active: +e.target.dataset.index,
    });
  }

  render() {
    const { items, active } = this.state;

    return (
      <div>
        {items.map((n, i) => (
          <div
            key={n.id}
            data-index={i}
            className={i === active ? 'active' : ''}
            onClick={this.onClick}
          >{n.text}</div>
        ))}
      </div>
    );
  }
}

Отсортировать массив, найти индекс, не равный соответствующему элементу минус один, увеличить индекс на единицу; если такой индекс отсутствует, значит отсутствует последнее число - длина массива плюс один:

function findN([...arr]) {
  const index = arr.sort((a, b) => a - b).findIndex((n, i) => i !== ~-n);
  return -~index || -~arr.length;
}

Желательно, чтобы вычислительная сложность была O(n)

Ненормальный способ - создать массив длиной N, обойти исходный массив, сохраняя в новый информацию о том, какие числа есть, затем в новом массиве выполнить поиск индекса, для которого число в исходном массиве не встретилось:

const findN = arr => -~arr
  .reduce((acc, n) => (acc[~-n] = !1, acc), Array(-~arr.length).fill(!0))
  .findIndex(Boolean);

Нормальный способ - погуглить формулу суммы натуральных чисел от 1 до N, вычесть содержимое массива:

const findN = arr =>
  arr.reduce((acc, n) => acc - n, (arr.length + 2) * (arr.length + 1) / 2);

Ну и в качестве бонуса:

const findN = arr =>
  arr.reduce((acc, n, i) => acc ^ n ^ -~i, -~arr.length);

const Header = ({ Top }) => (
  <div className="navHeader">
    <Top />
  </div>
);

...

<Header Top={Top} />

class TabContent extends React.Component {
  render() {
    const { title, content } = this.props;

    return (
      <div className="tabcontent">
        <h3>{title}</h3>
        <p>{content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: null,
  }

  openTab = e => this.setState({
    active: +e.target.dataset.index,
  });

  render() {
    const { items } = this.props;
    const { active } = this.state;

    return (
      <div>
        <div className="tab">
          {items.map((n, i) => (
            <button
              className={`tablinks ${i === active ? 'active' : ''}`}
              onClick={this.openTab}
              data-index={i}
            >{n.title}</button>
          ))}
        </div>
        {items[active] && <TabContent {...items[active]} />}
      </div>
    );
  }
}

const swiperOptions = {
  ...
  on: {
    'init resize slideChangeTransitionStart'() {
      $('.swiper-pagination').css({
        top: $('.swiper-slide-active .head').height() + 30, /* или 40, или 50, или...
                                                             * на ваше усмотрение, это чтобы
                                                             * пагинация была чуть ниже заголовка,
                                                             * а не залезала на него
                                                             */
      });
    },
  },
};

options: {
  animation: {
    onComplete() {
      const { ctx, data, chart } = this;

      ctx.fillStyle = 'red';
      ctx.textAlign = 'center';

      data.datasets.forEach((d, index) => {
        chart.controller.getDatasetMeta(index).data.forEach((n, i) => {
          ctx.fillText(d.data[i], n._model.x, n._model.y - 10);
        });
      });
    },
  },
},

https://jsfiddle.net/uz9h3dg0/

Как сделать, чтобы подписи осей были ниже

Задать padding побольше:

options: {
  scales: {
    xAxes: [ {
      ticks: {
        padding: тут типа число должно быть,
        ...

Как сделать, чтобы было не 1000000, а 1 000 000

Форматировать с помощью toLocaleString:

options: {
  scales: {
    yAxes: [ {
      ticks: {
        callback: val => val.toLocaleString(),
        ...

https://jsfiddle.net/hfjg6pex/

Снизу подписи начинают идти через 1(происходит это из-за длинного описания), можно ли насильно заставить, чтоб выводились все описания?

Добавить autoSkip: false в настройки подписей.

Можно ли первой подписи задать к примеру красный цвет, а остальным уже зеленый?

Нет. Можно попробовать рисовать подписи самостоятельно, оформив это дело как плагин.

UPD. В третьей версии добавили возможность задавать цвет каждой подписи индивидуально:

options: {
  scales: {
    x: {
      ticks: {
        color: ({ index }) => index === 0 ? 'red' : 'green',
      },
    },
  },
},

https://jsfiddle.net/zcr61u5k/

https://codepen.io/anon/pen/gVRgoX?editors=1010

const data = new FormData();
data.append('sampleFile', this.file);

fetch('http://localhost:3000/upload/', {
  method: 'post',
  body: data,
})

UPD. Ну и не очень понятно, зачем файлу надо быть свойством компонента. Почему бы не сделать его параметром метода submitFile?

@change="submitFile($event.target.files[0])"

methods: {
  submitFile(file) {
    ...

function chunked(arr, numChunks) {
  const chunks = [];
  const chunkSize = arr.length / numChunks | 0;
  const numLooseItems = arr.length % numChunks;

  for (let i = 0, j = 0; j < numChunks; j++) {
    chunks.push(arr.slice(i, i += chunkSize + (j < numLooseItems)));
  }

  return chunks;
}


const [ head, tail ] = chunked(arr, 2);

const wait = time => new Promise(r => setTimeout(r, time));

wait(1000)
  .then(() => { console.log(1); return wait(1000); })
  .then(() => { console.log(2); return wait(1000); })
  .then(() => { console.log(3); });

const itemSelector = '.parent';
const className = 'xxx';

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('mouseenter', onHover);
  n.addEventListener('mouseleave', onHover);
});

function onHover(e) {
  const state = e.type === 'mouseenter';
  for (
    let el = this;
    (el = el.nextElementSibling) && !el.matches(itemSelector);
    el.classList.toggle(className, state)
  ) ;
}

Если только через css - придётся дополнительно стилизовать элементы после следующего .parent, чтобы создать видимость, будто бы стили не применялись:

.parent:hover ~ .child {
  ...
}

.parent:hover ~ .parent ~ .child {
  ...
}

document.querySelectorAll('.selectit > input').forEach(n => {
  n.checked = genres.includes(n.parentNode.innerText.trim());
});

или

for (const n of document.getElementsByClassName('selectit')) {
  n.children[0].checked = genres.indexOf(n.textContent.trim()) > -1;
}

Object.values([ ...arr1, ...arr2 ].reduce((acc, n) => {
  acc[n.code] = n.id ? n : (acc[n.code] || n);
  return acc;
}, {}))

ind.map(((data, n) => data[n]).bind(null, arr.reduce((acc, row) => {
  const d = acc[row[0]];
  row.forEach((n, i) => i && (d[i] = d[i] || []).push(n));
  return acc;
}, ind.reduce((acc, n) => (acc[n] = [ n ], acc), {}))))