0xD34F

Вместо того, чтобы создавать отдельные переменные под каждый набор данных, просто обходите массив series с помощью forEach. Надо ли перерисовывать график сразу, как только в какой-либо из наборов данных добавлена новая точка - не уверен. Лично я бы дожидался получения новых данных по всем наборам и только потом делал перерисовку. Конечно, если хотите, перерисовывать можно и при каждом получении новых данных.

Также следует обратить внимание на ваш выбор использовать setInterval для организации постоянного обновления - что если один из запросов займёт сильно больше времени, чем вы ожидаете? Не получится ли так, что более новые данные будут добавлены раньше старых? Возможно, стоит делать так: запрос, по получении ответа - setTimeout на следующий запрос.

Что до

работает, но не всегда корректно <...> точно есть ошибки

- это разговор ни о чём. Информации примерно ноль. Вам следовало рассказать, как проявляется эта некорректность.

Вариантов тут несколько:

• Так как значения у вас парные - измените структуру БД, пусть оба значения лежат в одной строке
  
• Путь дурака: два запроса в PHP и ручное объединение их результатов - цикл по первому массиву, вложенный цикл по второму, как встретился элемент с таким же значением time, его value добавляется в элемент из первого массива
  
• Получить данные одним запросом:
  

  SELECT t1.time, t1.value AS temp_val, t2.value AS hum_val
  FROM topics t1
  JOIN topics t2 ON t2.time = t1.time
  WHERE
    t1.topic = 'tempinroom' AND
    t2.topic = 'huminroom'

  
  

при вводе каждого символа с поля слетает фокус

Потому что при изменении значения поле создаётся заново - ведь вы в качестве key это значение и указали. Что само по себе является дичью несусветной, кроме того, так у вас могут быть поля с одинаковыми key.

Генерируйте уникальные значения для key в момент добавления нового элемента в массив company_ids. Если удаление элементов из массива не предполагается, это может быть просто количество элементов / индекс элемента в массиве:

this.form.company_ids.push({
  key: this.form.company_ids.length,
});

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

this.form.company_ids.push({
  key: ++this.currKey,
});

Или можно брать текущее максимальное значение key + 1:

this.form.company_ids.push({
  key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});

Где элементы находятся, и сколько с какого конца надо удалить:

const selector = 'div p';
const removeFromStart = 5;
const removeFromEnd = 3;

Удаляем:

document.querySelectorAll(selector).forEach((n, i, a) => {
  if (i < removeFromStart || i > a.length - removeFromEnd - 1) {
    n.remove();
  }
});

Или, если родитель действительно общий, то можно и так:

document.querySelectorAll([
  `${selector}:nth-child(-n+${removeFromStart})`,
  `${selector}:nth-last-child(-n+${removeFromEnd})`,
]).forEach(n => n.outerHTML = '');

Добавить input'у атрибуты min/max; всем трём элементам добавить общую обёртку (уверен, на странице подобных блоков будет больше одного):

<div class="counter">
  <button class="minus">-</button>
  <input type="number" min="2" max="17" value="5">
  <button class="plus">+</button>
</div>

При обновлении input'а ограничивать новое значение значениями атрибутов min/max (если где-то ограничений быть не должно, то вместо отсутствующих значений атрибутов подставлять +/- бесконечность). Кроме того, неплохо бы обрабатывать пользовательский ввод в input - а ну как кто захочет его напрямую отредактировать, мимо кнопок.

Как это может выглядеть:

const updateInput = change => e =>
  $('input', e.delegateTarget).val(function(i, v) {
    const min = this.min || -Infinity;
    const max = this.max || Infinity;
    return Math.max(min, Math.min(max, (v | 0) + change));
  });

$('.counter')
  .on('click', '.minus', updateInput(-1))
  .on('click', '.plus', updateInput(1))
  .on('input', updateInput(0));

Или, к чёрту jquery:

const updateInput = change => e => {
  const input = e.target.closest('.counter').querySelector('input');
  const min = input.min || -Infinity;
  const max = input.max || Infinity;
  input.value = Math.min(max, Math.max(min, (input.value | 0) + change));
};

document.querySelectorAll('.counter').forEach(function(n) {
  n.querySelector('.minus').addEventListener('click', this[0]);
  n.querySelector('input').addEventListener('input', this[1]);
  n.querySelector('.plus').addEventListener('click', this[2]);
}, [ -1, 0, 1 ].map(updateInput));

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

document.addEventListener('click', ({ target: t }) => {
  const change = -t.matches('.plus') || +t.matches('.minus');
  if (change) {
    const input = t.closest('.counter').querySelector('input');
    input.value -= change;
    input.dispatchEvent(new Event('input', { bubbles: true }));
  }
});

document.addEventListener('input', ({ target: t }) => {
  if (t.closest('.counter')) {
    t.value = Math.min(t.max || Infinity, Math.max(t.min || -Infinity, t.value | 0));
  }
});

А ещё можно добавить кнопкам data-атрибуты, указывающие, на сколько должно быть изменено значение input'а, и тогда проверять у кнопок наличие классов будет не надо:

<button class="minus" data-change="-1">-</button>
<button class="plus" data-change="+1">+</button>

document.addEventListener('input', updateInput);
document.addEventListener('click', updateInput);

function updateInput({ target: t }) {
  const counter = t.closest('.counter');
  if (counter) {
    const input = counter.querySelector('input');
    const min = input.min || -Infinity;
    const max = input.max || Infinity;
    input.value = Math.min(max, Math.max(min, (input.value | 0) + (t.dataset.change | 0)));
  }
}

Наверное, надо не строку, а массив класть в coordinates. Попробуйте заменить

'['.$row['y_coordinates'].']'

на что-то вроде

explode(', ', $row['y_coordinates'])

А если нужно, чтобы элементы массива были числами:

array_map('floatval', explode(', ', $row['y_coordinates']))

Надо добавлять к желаемому значению scrollTop текущий scrollTop контейнера, т.е.,

position = anchor.position().top;

замените на

position = anchor.position().top + $('#container').scrollTop();

А чем у вас сейчас отфильтрованные изображения отличаются от прочих? Видимостью. Под это дело у jquery есть специальный селектор, :visible. Вот с его помощью и отбирайте следующее изображение, например так.

UPD. Сразу не заметил, у вас там отфильтрованным изображениям назначается специальный класс - конечно, вместо :visible лучше использовать его (в примере по ссылке выше можно просто заменить одно на другое).

const buttonSelector = 'button';
const getButtons = () => document.querySelectorAll(buttonSelector);

Можем делегировать обработку кликов по кнопкам:

document.addEventListener('click', e => {
  if (e.target.matches(buttonSelector)) {
    const buttons = getButtons();
    const texts = Array.from(buttons, n => n.textContent);
    for (const [ i, n ] of buttons.entries()) {
      n.textContent = texts[-~i % texts.length];
    }
  }
});

А можем назначить обработчик клика каждой кнопке индивидуально:

const buttons = getButtons();
const onClick = () =>
  buttons.forEach(function(n, i) {
    n.innerText = ++i === buttons.length ? this : buttons.item(i).innerText;
  }, buttons.item(0).innerText);

buttons.forEach(n => n.addEventListener('click', onClick));

Оборачивайте текст в span'ы - тогда и проблем с удалением не будет.

Ну или можно воспользоваться знанием того факта, что ваш текст представляет собой отдельные узлы DOM-дерева:

const div = document.querySelector('.line');
div.removeChild(div.childNodes[2]);

// или

document.querySelector('.line input').nextSibling.remove();

// или

document.querySelector('.line').lastChild.remove();

Сделаем метод, получающий item и возвращающий его группу:

methods: {
  group(item) {
    return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
  },

Сделаем вычисляемое свойство, представляющее выбранную группу:

computed: {
  selectedGroup() {
    return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
  },

Если выбранная группа есть и не совпадает с группой текущего item'а, блокируем чекбокс:

<ul v-for="{ items } in data">
  <li v-for="item in items">
    <label>
      <input
        type="checkbox"
        v-model="item.checked"
        :disabled="selectedGroup && selectedGroup !== group(item)"
      >
      {{ item.name }} ({{ group(item) }})
    </label>
  </li>
</ul>

https://jsfiddle.net/cqm1erza/

SELECT table_name
FROM information_schema.columns
WHERE column_name = 'type_vendor'

const $headers = $('.bf-attr-group-header');
$headers.each(i => $headers
  .eq(i)
  .nextUntil($headers.get(i + 1))
  .wrapAll('<div class="wrapper">')
);

или

document.querySelectorAll('.bf-attr-group-header').forEach((n, i, a) => {
  const wrapper = document.createElement('div');
  const elems = [];
  for (let el = n; (el = el.nextElementSibling) && el !== a[i + 1]; elems.push(el)) ;
  wrapper.append(...elems);
  wrapper.classList.add('wrapper');
  n.after(wrapper);
});

<div style={{ ...styles.inputInit, backgroundColor: 'green' }}>

document.querySelectorAll('button').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const count = (+this.dataset.clickCount || 0) + 1;
  this.innerText = `clicked: ${count}`;
  this.dataset.clickCount = count;
}

$('span').text((i, text) => text[0] === '-' ? text : `+${text}`);

или

document.querySelectorAll('span').forEach(n => {
  n.innerText = n.innerText.replace(/^(?!-)/, '+');
});

или

for (const n of document.getElementsByTagName('span')) {
  n.textContent = '+'.slice(n.textContent[0] === '-') + n.textContent;
}

function getUrls($parts, $acc = '') {
  $urls = [];

  if (count($parts)) {
    $part = array_shift($parts);
    if (!is_array($part)) {
      $part = [ $part ];
    }

    foreach ($part as $p) {
      array_push($urls, ...getUrls($parts, ($acc ? $acc.'/' : '').$p));
    }
  } else {
    $urls[] = $acc;
  }

  return $urls;
}


$urls = getUrls($urlFragments);

function find(arr, id) {
  for (const { name, hobbies } of arr) {
    const { title } = hobbies.find(n => n.id === id) || {};
    if (title) {
      return { name, title };
    }
  }

  return null;
}


const data = find(arr, 4);

• Вариант раз.
  
  Добавить элементам массива mainCategories свойства, которые будут отвечать за состояния чекбоксов (по умолчанию имеют значения true); массив checkedCategories сделать вычисляемым:
  
  

  data: () => ({
    mainCategories: [
      { merchantId: '1', checked: true },
      { merchantId: '2', checked: true },
      ...
    ],
  }),
  computed: {
    checkedCategories() {
      return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
    },
  },

  
  

  <li v-for="n in mainCategories">
    <label>
      <input type="checkbox" v-model="n.checked">
      {{ n.merchantId }}
    </label>
  </li>

  
  
  
• Вариант два.
  
  При создании экземпляра компонента заполнить массив checkedCategories нужными значениями:
  
  

  created() {
    this.checkedCategories = this.mainCategories.map(n => n.merchantId);
  },