title: Reduce Array of Objects with Percentage Calculation
body: <p>I am working with an array of objects like:</p>
  
  <pre><code>const data = [
    {type: "Liberator", style: "Moderately Logical"},
    {type: "Protector", style: "Somewhat Passionate"},
    {type: "Energizer", style: "Balanced"},
    {type: "Observer", style: "Balanced"},
    {type: "Protector", style: "Balanced"},
    {type: "Liberator", style: "Moderately Logical"},
  ];
  </code></pre>
  
  <p>I am looking to reduce (I think) the array into a roll-up percentage breakdown of all items in the array.</p>
  
  <p>For example, the top level "Protector" = 2 out of 6 or 33%. For each "Protector", there is 1 "Somewhat Passionate" out of 2 styles, the other being "Balanced" for 50%.</p>
  
  <p>Expected Result:</p>
  
  <pre><code>const result = [
    {
      type: "Liberator",
      percent: "33%",
      [{
        style: "Moderately Logical",
        percent: "100%",
      }],
    },
    {
      type: "Protector",
      percent: "33%",
      [{
        style: "Somewhat Passionate",
        percent: "50%",
      },{
        style: "Balanced",
        percent: "50%",
      }],
    },
    {
      type: "Observer",
      percent: "17%",
      [{
        style: "Balanced",
        percent: "100%",
      }],
    },
    {
      type: "Energizer",
      percent: "17%",
      [{
        style: "Moderately Logical",
        percent: "100%",
      }],
    },
  ];
  </code></pre>
  
  <p>I have managed to get the original array the reduced with, but am now unsure of how to proceed with the calculations for each entry:</p>
  
  <pre><code>data.filter((d, index, self) =&gt;
    index === self.findIndex(t =&gt; (
      t.type === d.type &amp;&amp; t.style === d.style
    )),
  );
  </code></pre>