chart.js

  var allValues = <%== @summary.data.dig('gender_representation', 'chart_data').values.map(&:values) %>
  var maleFemaleColors = ['rgb(142, 1, 53)', 'rgb(0, 137, 140)'];
  var data = [
  {
    values: allValues[0],
    type: 'pie',
    name: 'Operactional Functions',
    marker: {
      colors: maleFemaleColors
    },
    domain: {
      row: 0,
      column: 0
    },
    hoverinfo: 'label+percent+name',
  },
  {
    values: allValues[1],
    type: 'pie',
    name: 'Junior Management',
    marker: {
      colors: maleFemaleColors
    },
    domain: {
      row: 0,
      column: 1
    },
    hoverinfo: 'label+percent+name',
  },
  {
    values: allValues[2],
    type: 'pie',
    name: 'Middle Management',
    marker: {
      colors: maleFemaleColors
    },
    domain: {
      row: 0,
      column: 2
    },
    hoverinfo: 'label+percent+name',
  },
  {
    values: allValues[3],
    type: 'pie',
    name: 'Upper Management',
    marker: {
      colors: maleFemaleColors
    },
    domain: {
      row: 0,
      column: 3
    },
    hoverinfo: 'label+percent+name',
  },
  {
    values: allValues[4],
    type: 'pie',
    name: 'Top Management',
    marker: {
      colors: maleFemaleColors
    },
    domain: {
      row: 0,
      column: 4
    },
    hoverinfo: 'label+percent+name',
  }
];

var gender_representation_layout = {
  height: 800,
  width: 1200,
  showlegend: false,
  grid: {rows: 1, columns: 5}
};


  var nonBinaryColor =  '#750223'
  var maleColor = '#ab0335'
  var femaleColor =  '#00898c'
  var maleBc = 'yellow'
  var maleCc = 'blue'
  var femaleBc = 'red'
  var femaleCc = 'green'

  var colors = {
    'non-binary': nonBinaryColor,
    'male': maleColor,
    'female': femaleColor,
    'male_bc': maleColor,
    'male_cc': maleColor,
    'female_bc': femaleColor,
    'female_cc': femaleColor,
  }

  var plots = []
  var text = "";
    <% @charts.each do |key, data| %>
     plots = []

    <% data[:dimensions].each do |dname| %>
      var dname = "<%= dname %>"
      plots.push( {
        x: [-1],
        y: [""],
        name: dname,
        mode: "markers",
        type: "scatter",
        line: {
          color: 'grey'
        },
        marker: {
          size: 25,
          color: dname.split("_")[1] === "cc" ? "white" : colors[dname],
          line: {
            color: colors[dname],
            width: 1
          }
        }
      })
    <% end %>

    <% data[:data].each.with_index do |chart, idx| %>
      text = "<%=chart.dig(:text) %>"
      idx = <%= idx.to_i %>

      plots.push(
        {
          x: [<%=chart.dig("male") %>, <%= chart.dig("female") %>],
          y: [text, text],
          showlegend: false,
          mode: "markers+lines",
          type: "scatter",
          line: {
            color: 'grey'
          },
          marker: {
            size: 25,
            color: [maleColor, femaleColor],
          }
        }
      )

      plots.push(
        {
          x: [<%=chart.dig("male_bc") %>, <%= chart.dig("female_bc") %>],
          y: [text, text],
          showlegend: false,
          mode: "markers+lines",
          type: "scatter",
          line: {
            color: 'grey',
            dash: 'dot',
          },
          marker: {
            size: 19,
            color: [maleColor, femaleColor],
          }
        }
      )

      plots.push(
        {
          x: [<%=chart.dig("male_cc") %>, <%= chart.dig("female_cc") %>],
          y: [text, text],
          showlegend: false,
          mode: "markers+lines",
          type: "scatter",
          line: {
            color: 'grey'
          },
          marker: {
            size: 18,
            color: "white",
            line: {
              color: [maleColor,femaleColor],
              width: 1
            }
          }
        }
      )
    <% end %>

    var layout = {
      xaxis: {
        range: [0, 1],
        tickformat: '.0%'
      },
      yaxis: {
        automargin: true,
        showgrid: true,
      }
    };

 let inclusive_of_culture_binary_base64 = Plotly.plot('inclusive_of_culture_binary', plots, layout);
<% end %>