user1234 user1234 - 2 months ago 15
Javascript Question

How to generate background colors for div's based on the value rendered from an json object.-javascript

I have an object that looks like below:

enter image description here

I'm trying to create 10

divs
for every key(i.e:'publicExploit,activeAttacks..etc) in the object shown and set the background color of every
div
depending on the value, i.e


  • 0: grey

  • 1: yellow

  • 2-4: orange

  • 5+: red



here is the code:

items: [
this.info = new Ext.BoxComponent({
tpl: new Ext.XTemplate(
'<div class="vuln-summary-status-item">',
'<div class="vuln-summary-status-item-inner">text1{[this.getEasyExploit(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text2{[this.getDenialOfService(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text3{[this.getExploitKit(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text4{[this.getMalware(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text5{[this.getHighDataLoss(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text6{[this.getHighLateralMovement(values)]}</div>',
'<div class="vuln-summary-status-item-inner">text7{[this.getActiveAttacks(values)]}</div>',
'</div>', {


getEasyExploit: function(value) {
if (value.easyExploit === 0) {
return '<div class="greyColor">' + value.easyExploit + '</div>'
} else if (value.easyExploit === 1) {
return '<div class="yellowColor">' + value.easyExploit + '</div>'
} else if (value.easyExploit === 2 || value.easyExploit === 3 || value.easyExploit === 4) {
return '<div class="orangeColor">' + value.easyExploit + '</div>'
} else if (value.easyExploit >= 5) {
return '<div class="redColor">' + value.easyExploit + '</div>'
}
},
getDenialOfService: function(value) {
if (value.denialOfService === 0) {
return '<div class="greyColor">' + value.denialOfService + '</div>'
} else if (value.denialOfService === 1) {
return '<div class="yellowColor">' + value.denialOfService + '</div>'
} else if (value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4) {
return '<div class="orangeColor">' + value.denialOfService + '</div>'
} else if (value.denialOfService >= 5) {
return '<div class="redColor">' + value.denialOfService + '</div>'
}
},
getExploitKit: function(value) {
if (value.exploitKit === 0) {
return '<div class="greyColor">' + value.exploitKit + '</div>'
} else if (value.exploitKit === 1) {
return '<div class="yellowColor">' + value.exploitKit + '</div>'
} else if (value.exploitKit === 2 || value.exploitKit === 3 || value.exploitKit === 4) {
return '<div class="orangeColor">' + value.exploitKit + '</div>'
} else if (value.exploitKit >= 5) {
return '<div class="redColor">' + value.exploitKit + '</div>'
}
},
getMalware: function(value) {
if (value.malware === 0) {
return '<div class="greyColor">' + value.malware + '</div>'
} else if (value.malware === 1) {
return '<div class="yellowColor">' + value.malware + '</div>'
} else if (value.malware === 2 || value.malware === 3 || value.malware === 4) {
return '<div class="orangeColor">' + value.malware + '</div>'
} else if (value.malware >= 5) {
return '<div class="redColor">' + value.malware + '</div>'
}

},
getHighDataLoss: function(value) {
if (value.highDataLoss === 0) {
return '<div class="greyColor">' + value.highDataLoss + '</div>'
} else if (value.highDataLoss === 1) {
return '<div class="yellowColor">' + value.highDataLoss + '</div>'
} else if (value.highDataLoss === 2 || value.highDataLoss === 3 || value.highDataLoss === 4) {
return '<div class="orangeColor">' + value.highDataLoss + '</div>'
} else if (value.highDataLoss >= 5) {
return '<div class="redColor">' + value.highDataLoss + '</div>'
}
},
getHighLateralMovement: function(value) {
if (value.highLateralMovement === 0) {
return '<div class="greyColor">' + value.highLateralMovement + '</div>'
} else if (value.highLateralMovement === 1) {
return '<div class="yellowColor">' + value.highLateralMovement + '</div>'
} else if (value.highLateralMovement === 2 || value.highLateralMovement === 3 || value.highLateralMovement === 4) {
return '<div class="orangeColor">' + value.highLateralMovement + '</div>'
} else if (value.highLateralMovement >= 5) {
return '<div class="redColor">' + value.highLateralMovement + '</div>'
}
},

getActiveAttacks: function(value) {
if (value.activeAttacks === 0) {
return '<div class="greyColor">' + value.activeAttacks + '</div>'
} else if (value.activeAttacks === 1) {
return '<div class="yellowColor">' + value.activeAttacks + '</div>'
} else if (value.activeAttacks === 2 || value.activeAttacks === 3 || value.activeAttacks === 4) {
return '<div class="orangeColor">' + value.activeAttacks + '</div>'
} else if (value.activeAttacks >= 5) {
return '<div class="redColor">' + value.activeAttacks + '</div>'
}
},

}
)
})
]


the css looks:

.greyColor {
background: #e9e9e9;
height: 120px;
}

.yellowColor {
background: rgb(255, 198, 55);
height: 120px;
}

.orangeColor: {
background: rgb(229, 108, 25);
height: 120px;
}

.redColor: {
background: rgb(222, 29, 11);
height: 120px;
}


I have 2 issues:


  1. I feel that my way writing the code is too sloppy, Is there any better of writing the code for generating div depending on the value associated with it?

  2. I'm not able to get the condition right for
    else if(value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4)

    here I'm trying to set the
    div
    background whose values are between 2-4, but does not render properly.



Any clue how this could be solved

Answer

This one will let you pass a text value to be rendered.

items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit, "Easy Exploit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService, "Denial Of Service")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit, "Exploit Kit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware, "Malware")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss, "High Data Loss")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement, "High Lateral Movement")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks, "Active Attacks")]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value, text) {
          return '<div class="'+ this.getColor(value).+'">' + text + ": " + value + '</div>';
        }
      }
    )
  })
]

Original

It would be easier to utilize a color array, which would let you combine your functions.

items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks)]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value) {
          return '<div class="'+ this.getColor(value).+'">' + value + '</div>';
        }
      }
    )
  })
]