0xD34F

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

map.panes.get('ground').getElement().classList.add('gray');

https://jsfiddle.net/8y0t6kjv/

async function processData(data, delay, chunkSize, process) {
  let i = -1;
  let j = -1;

  for (const n of data) {
    if (++j === chunkSize) {
      j = 0;
      await new Promise(r => setTimeout(r, delay));
    }

    process(n, ++i);
  }
}

processData(Array(10).keys(), 1500, 3, console.log).then(() => console.log('DONE'));
processData('ABCDEFGHIJKL', 1200, 5, console.log).then(() => console.log('DONE'));
processData(document.images, 900, 7, n => console.log(n.src)).then(() => console.log('DONE'));

Object.entries + деструктуризация:

for (const [ index, el ] of Object.entries(elems)) {
  ...

Надо только иметь в виду, что тут index будет строкой. Чтобы получать числа, можно позаимствовать метод entries у Array или NodeList:

for (const [ index, el ] of Array.prototype.entries.call(elems)) {
  ...

Или, превращать получаемую HTMLCollection в массив:

const elems = [...document.getElementsByClassName('one')];
for (const [ index, el ] of elems.entries()) {
  ...

Или, для получения элементов вместо getElementsByClassName использовать querySelectorAll, возвращающий NodeList:

const elems = document.querySelectorAll('.one');
for (const [ index, el ] of elems.entries()) {
  ...

Object.values(names.reduce((acc, n) => {
  const g = /^\d/.test(n[0]) ? n[0] : /^[А-ЯЁ]/i.test(n[0]) ? 'А-Я' : null;
  g && (acc[g] = acc[g] || [ g ]).push(n);
  return acc;
}, {}))

А может не надо рендерить компонент, пока данные не пришли? Тогда и undefined передаваться не будет.

<app-analytics-chart v-if="analytics.countOrdersByMonth"

Фильтруемым элементам добавить обёртку <div class="items"></div>.

Значениями option'ов пусть будут селекторы элементов, которые должны оказаться видимыми:

<select>
  <option value="*">Все</option>
  <option value=".red">Красные</option>
  <option value=".blue">Синие</option>
  <option value=".green">Зеленые</option>
</select>

Фильтрация:

$('select').change(function() {
  const selector = this.value;
  const $items = $('.items >');
  $items.filter(selector).slideDown();
  $items.not(selector).slideUp();
});

Состояние хранится в родителе, через параметры передаётся в дочерние компоненты. Из дочерних компонентов эмитятся события, по которым в родителе осуществляется обновление состояния.

UPD. Например.

Что пофиксить, подскажите плиз.

Ничего, полностью переписать:

.points {
  position: relative;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.point {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

class App extends React.Component {
  state = {
    points: [],
  }

  addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
    this.setState(({ points }) => ({
      points: [ ...points, {
        x: offsetX - 10,
        y: offsetY - 10,
      } ],
    }));
  }

  render() {
    return (
      <div className="points" onClick={this.addPoint}>
        {this.state.points.map(n => (
          <div className="point" style={{
            left: `${n.x}px`,
            top: `${n.y}px`,
          }}
          ></div>
        ))}
      </div>
    );
  }
}

str := "Gigabyte GA-B250M-DS3H (1,485)MSI B250M PRO-VD (MS-7A74) (1,199)MSI H110M PRO-VH PLUS (MS-7A15) (946)Asus H110M-K (816)Asrock B250M-HDV (807)MSI B250M PRO-VDH (MS-7A70) (667)MSI H110M PRO-VD (MS-7996) (663)"
reg, _ := regexp.Compile("\\(.*?\\)")
str = reg.ReplaceAllString(str, "")

const compareArrays = (a, b) =>
  a.length === b.length && a.every((n, i) => n === b[i]);

Потому что настройки балуна относятся к properties, а не к options - читайте документацию.

+str.replace(/[^\d.]/g, '')

или

parseFloat(str.match(/[\d.]/g).join(''))

Слэши в начале и конце не нужны, а обратные слэшы должны быть экранированы:

response.search(`\\b${message}\\b`)

Удаляем из существующего массива:

arr.reduceRight((_, n, i, a) => indexes.includes(i) && a.splice(i, 1), null);
// или
[...indexes].sort((a, b) => b - a).forEach(i => arr.splice(i, 1));
// или
arr.splice(0, arr.length, ...arr.filter((n, i) => indexes.indexOf(i) === -1));

Собираем новый:

const newArr = arr.filter(((indexes, n, i) => !indexes.has(i)).bind(null, new Set(indexes)));

<Transactions />

Не передаёте параметр transactions.

class="filter-menu"

Меняйте class на className. Не только тут, везде.

{transaction}

Объекты вот так передавать нельзя. Можете сделать JSON.stringify, или создать нормальную разметку, типа

<div>{transaction.type}</div>
<div>{transaction.date}</div>

А вот есть у вас некий styleSelector - это что? Непонятно. Не вижу, чтобы эта штука где-то объявлялась - а вы ей пытаетесь addEventListener сделать. Вот код и падает с ошибкой, до того, как подключается обработчик клика, инициирующий построение маршрута.

Контекст теряете. Замените function(el){ на (el) => {.

useEffect(() => {
  const onKeypress = e => console.log(e);

  document.addEventListener('keypress', onKeypress);

  return () => {
    document.removeEventListener('keypress', onKeypress);
  };
}, []);

Вариант раз - создаём случайные числа, пока не наберётся сколько надо уникальных:

function createRandomArr(length, min, max) {
  if (length > (max -= ~-min)) {
    throw 'невозможно создать массив указанного размера';
  }

  const values = new Set;
  for (; values.size < length; values.add(min + Math.random() * max | 0)) ;
  return [...values];
}

const arr = createRandomArr(6, 1, 36);

Вариант два - создаём массив со всеми возможными значениями, и вырезаем из него случайные элементы:

const createRandomArr = (length, min, max) => Array
  .from({ length }, function() {
    return this.splice(Math.random() * this.length | 0, 1);
  }, Array.from({ length: max - min + 1 }, (_, i) => i + min))
  .flat();

Вариант три - снова массив со всеми возможными значениями, но в этот раз перетасовываем его случайным образом и берём кусок нужного размера:

function createRandomArr(length, min, max) {
  const arr = Array.from({ length: max - min + 1 }, (_, i) => i + min);

  for (let i = arr.length; --i > 0;) {
    const j = Math.floor(Math.random() * (i + 1));
    [ arr[j], arr[i] ] = [ arr[i], arr[j] ];
  }

  return arr.slice(-length);
}

Не очень понятно, что значит "эффективнее". Есть событие paste, ловите его:

inputElem.addEventListener('paste', e => e.preventDefault());