Change the text color in a span using JavaScript in a Vue.js app

Question

I need to change the color of the text in a span based upon the external value of an assigned department. I have an application where a company can upload an employee roster with the department the person is assigned and I want to color-code all of the employees that are in the same department. I do not know what the department names are until the spreadsheet is uploaded and the color does not matter as long as it is different between departments and consistent. I have colors added as a class. But currently not using them as a class

       .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.

the Department names could be;

      Admin
      Grounds
      Management
      Staff
      etc

or

    Department One
    Department Two
    Department Three
    etc

or anything else

I was thinking to add all of the colors to an array such as

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

and assign a color to the the department. I ws going to add all of the departments to an array and based upon the position in the array I was going to assign it a color.

       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

but I don't know how to change the color attribute in the span that I'm using as a regex replace in a JavaScript function

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

All suggestions are appreciated

FYI-- this.pubmedData[index]["publication"] is an array that holds information where the name of the employee needs to be color changed. It could be something like:

       John Smith and Bob Jones had Friday off.

And I need to color code the Employee names to show are they in the same department or different

this.pubmedData[index]["publication"] could you please provide a sample console.log for this? — Commander
I added information above and that should say Employee_Name not Department. I fixed it above — user1314159
I wrote an answer using the first draft of your question (where departments had to bear different colors) I hope you can adapt it to tackle the N elements -> N colors general problem — ffflabs

ffflabs ffflabs · Accepted Answer · 2020-04-12T02:19:45

The most basic approach IMHO would be to use the HSL color model to generate N colors dinamically and space them evenly.

Considering the hue can go from 0 to 360 degrees (but 0 and 360 are the same hue of course) then each department could have a color whose hue is calculated as

departmentIndex * 360/ departmentsLength

Therefore, if there are two departments you'll have hue 0 and hue 180. If you have three, then you'll have hues 0, 120 and 240 and so on.

(you would coalesce the departmentsLength to default to 1 to avoid division by zero).

A very basic example, using 60% saturation and 40% luminosity would look as follows:

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>

Use the input field and button to add extra departments such as human resources or accounting. Each additional department affect the computed color for the whole array, except the first one that will stay at zero.

If you wanted a more ellaborate example, there are color generators (e.g. Colorbrewer, d3 diverging scales) that could add some interaction and customization to the component, but I believe this is out of the scope of this question.

Change the text color in a span using JavaScript in a Vue.js app

2 Answers