Измените цвет текста в диапазоне, используя JavaScript в приложении Vue. js

Question

Мне нужно изменить цвет текста в диапазоне, основываясь на внешнем значении назначенного отдела. У меня есть приложение, в котором компания может загрузить список сотрудников с указанием отдела, которому назначен человек, и я хочу раскрасить всех сотрудников в одном отделе. Я не знаю, как называются отделы, пока электронная таблица не будет загружена, и цвет не имеет значения, если он различен для разных отделов и непротиворечив. У меня есть цвета, добавленные как класс. Но в настоящее время они не могут использоваться в качестве класса

       .kelly-vivid-yellow { color: #FFB300; }
       .kelly-strong-purple { color: #803E75; }
       .kelly-vivid-orange { color: #FF6800; }
       .kelly-very-light-blue { color: #A6BDD7; }
       .kelly-vivid-red { color: #C10020; }
       .kelly-grayish-yellow { color: #CEA262; }
       .kelly-medium-gray { color: #817066; }  
        plus others.

. Имена отделов могут быть:

      Admin
      Grounds
      Management
      Staff
      etc

или

    Department One
    Department Two
    Department Three
    etc

или что-либо еще

Я думал добавить все цвета в массив, например

    kellyColors = ["#FFB300;","#803E75;","#FF6800;","#A6BDD7;" etc]

и назначить цвет отделу. Я собираюсь добавить все отделы в массив и основываясь на позиции в массиве, я собирался назначить ему цвет.

       departments = ["Admin","Grounds","Management","Staff"]

       let Admin = kellyColor[0];    // Admin position in array is 0
       let Grounds = kellyColor[1];  // Grounds position in array is 1
        etc

но я не знаю, как изменить атрибут цвета в диапазоне, который я использую в качестве замены регулярного выражения в JavaScript функции

             this.pubmedData[index]["publication"] = this.pubmedData[index] 
             ["publication"].replace(new RegExp(Employee_Name), match => {
              return  '<span  style="color:#803E75;"><b>' + match + '</b></span>';             
              });

Все предложения приветствуются

FYI-- this.pubmedData [index] ["публикация"] - это массив, содержащий информацию, в которой имя сотрудника необходимо изменить в цвете. Это может быть что-то вроде:

       John Smith and Bob Jones had Friday off.

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

Answer 1

Я бы просто использовал названия отделов как простой css класс.

.department1{
color:#ff
}

Затем получите отдел этого сотрудника и передайте его атрибуту класса.

Без фактических данных, я могу сказать, найдите значение отдела в

this.pubmedData[index]["publication"][department] // Exemple

А затем измените атрибут класса с этим.

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';

Answer 2

Самым базовым c подходом ИМХО будет использование цветовой модели HSL для динамического генерирования N цветов и их равномерного размещения.

С учетом оттенка можно go из 0 до 360 градусов (но 0 и 360, конечно, имеют одинаковый оттенок), тогда у каждого отдела может быть цвет, цвет которого рассчитывается как

departmentIndex * 360/ departmentsLength 

. Поэтому, если есть два отдела, у вас будет оттенок 0 и оттенок 180. Если у вас есть три, то у вас будут оттенки 0, 120 и 240 и так далее.

(вы бы объединили значение departmentsLength по умолчанию в 1, чтобы избежать деления на ноль).

Очень базовый c пример , использующий 60% насыщения и 40% яркости, будет выглядеть следующим образом:

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        departments: ['sales', 'marketing'],
        newDepartmentName: '',

      }
    },
    methods: {
      addDepartment() {
        if (this.newDepartmentName) {
          this.departments.push(this.newDepartmentName);
        }
        this.newDepartmentName = '';
      },
      colorStyle(deptIndex) {
        return `color:hsl(${this.hueStep*deptIndex} ,60%,40%);`;
      }
    },
    computed: {
      hueStep() {
        return 360 / (this.departments.length || 1);
      },

      filtrar: function() {
        return this.tarimas.filter(
          tarima => String(tarima.trabajo)
          .includes(this.filtrarTarima)
        );
      }
    }
  });

};

#app {
  padding: 0.5em;
}

#app>div {
  margin: 0.2em;
  border:0.5px solid #eee;
}
#app>div b {
  float:left;
  min-width:60%;
}

#app input {
  border-radius: 3px;
  margin: 0.2em 0;
  padding: 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="newDepartmentName">
  <button v-on:click='addDepartment'>add Department</button>
  <div v-for="(department,index) of departments" :key="index" :style="colorStyle(index)">
    <b>{{ department}}'s style</b> <small>{{colorStyle(index)}}</small>
  </div>
</div>

Используйте поле ввода и кнопку, чтобы добавить дополнительные отделы, такие как отдел кадров или бухгалтерия. Каждый дополнительный отдел влияет на вычисленный цвет для всего массива, кроме первого, который останется равным нулю.

Если вы хотите более сложный пример, существуют генераторы цвета (например, Colorbrewer , d3 расходящиеся шкалы ), которые могут добавить некоторое взаимодействие и настройку для компонента, но я считаю, что это выходит за рамки этого вопроса.