<div id=description>
  <h3><code>highlightIndex();</code></h3>
  <p>Highlight a single or an array of index.</p>
  <p>Below shows ways of using highlight and adding legend to the highlighted parts.</p>
  <p>Highlight index 
    <button class='rs-btn--small' onclick = 'singleDefault()'>0.3 with default legend</button>
    <button class='rs-btn--small' onclick = 'singleCustom()'>0.3 with custom legend</button> 
    <button class='rs-btn--small' onclick = 'arrayDefault()'>2.0 to 3.5 with default legend</button>
    <button class='rs-btn--small' onclick = 'arrayCustom()'>2.0 to 3.5 with custom legend</button>
    <button class='rs-btn--small' onclick = 'seperateDefault()'>2.0 and 3.5 with default legend</button>
    <button class='rs-btn--small' onclick = 'seperateCustom()'>2.0 and 3.5 with custom legend</button>
    <button class='rs-btn--small rs-btn--selected' onclick = 'default_custom()'>0.3 with custom legend and 2.0 to 3.5 with default legend</button>
  </p>
  <div id = 'chart'></div>
  <div id = 'highlightInfo'></div>
  
</div>

#description{
  margin: 1em;
}

//Redsift
//HighlightIndex
//Enable the highlighting of a particular index or an array of index
//Example below shows different ways of implementing highlight

let chart = d3_rs_lines.html()
    .highlightIndex([{ l: 'single', v: [ 0.3 ] }, [ 2.0, 3.5 ]]);   //highlight '0.3' with custom legend and highlighting index 2.0 to 3.5 with default legend  

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);

d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> and highlights index <code>2.0</code> to <code>3.5</code> with default legend.<br> NOTE: When adding different highlighting parts to the same graph it must be enclosed in square brackets. <code>.highlightIndex([{ l: "single", v: [ 0.3 ] }, [ 2.0, 3.5 ]]);</code></p>');

function singleDefault(){
let chart = d3_rs_lines.html()
    .highlightIndex([ 0.3 ]);   //highlight '0.3' 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo').html('<p>The above graph highlight index <code>0.3</code> with default legend <code>.highlightIndex([ 0.3 ]);</code></p>' );    
}

function singleCustom(){
let chart = d3_rs_lines.html()
    .highlightIndex({ l: 'single', v: [ 0.3 ] });   //highlight index 0.3 and add a legend to the index. 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> <code>.highlightIndex({ l: "single", v: [ 0.3 ] });</code></p>');  
}

function arrayDefault(){
let chart = d3_rs_lines.html()
    .highlightIndex([[ 2.0, 3.5 ]]);   //highlight index 2.0 to 3.5. 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>2.0</code> to <code>3.5</code> with default legend.<br> NOTE: For an array to be highlighted double square brackets are needed.<code>.highlightIndex([[ 2.0, 3.5 ]]);</code></p>');
}

function arrayCustom(){
let chart = d3_rs_lines.html()
    .highlightIndex({ l: 'Highlighted array', v :[ 2.0, 3.5 ]});   //highlight index 2.0 to 3.5 and add a legend highlighting the index. 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>2.0</code> to <code>3.5</code> with custom legend.<br> NOTE: Compared to  default legend, using custom legend, double sqaure brackets are not needed.<code>.highlightIndex({ l: "Highlighted array", v :[ 2.0, 3.5 ]});</code></p>');
}

function seperateDefault(){
let chart = d3_rs_lines.html()
    .highlightIndex([ 2.0, 3.5 ]);   //highlight index 2.0 and 3.5. 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>2.0</code> and <code>3.5</code> with default legend <code>.highlightIndex([ 2.0, 3.5 ])</code></p>');
}

function seperateCustom(){
let chart = d3_rs_lines.html()
    .highlightIndex([ { l: 'First Index', v: [2.0]}, { l: 'Second Index', v: [ 3.5 ] } ]);   //highlight index taking index 2.0 and add a legend to it and highlight index 3.5 and add a legend to it. 

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);
  
d3.select('#highlightInfo').html('<p>The above graph highlight index <code>2.0</code> and <code>3.5</code> with custom legend <code>.highlightIndex([ { l: "First Index", v: [2.0]}, { l: "Second Index", v: [ 3.5 ] } ])</code></p>');
}

function default_custom(){
  let chart = d3_rs_lines.html()
    .highlightIndex([{ l: 'single', v: [ 0.3 ] }, [ 2.0, 3.5 ]]);   //highlight '0.3' with custom legend and highlighting index 2.0 to 3.5 with default legend  

d3.select('#chart')
    .datum([1, 2, 3, 10, 20])
    .call(chart);

d3.select('#highlightInfo')
    .html('<p>The above graph highlight index <code>0.3</code> with custom legend <code>"single"</code> and highlights index <code>2.0</code> to <code>3.5</code> with default legend. <br>NOTE: When adding different highlighting parts to the same graph it must be enclosed in square brackets. <code>.highlightIndex([{ l: "single", v: [ 0.3 ] }, [ 2.0, 3.5 ]]);</code></p>');
}


// Generic function to toggle selected state of a button
d3.selectAll('button')
  .on('click', function() {
    let selected = this;
    d3.selectAll('button')
      .classed('rs-btn--selected', function() {
        return (selected === this);
      });
  });