from jyquickhelper import add_notebook_menu
add_notebook_menu()

"""
Explanation: plotly
plotly has recently become open source, it proposes a large gallery of javascript graphs. plotly also offers to host dashboards built with plotly.
The first script usually returns an exception:
But there exists an offline mode.
documentation source installation tutorial gallerie
Autres liens : styles de texte en python ou styles de text en javascript
End of explanation
"""


import cufflinks  # don't forget that
from plotly.offline import init_notebook_mode
init_notebook_mode(connected=True)

from sklearn.datasets import load_iris
import pandas
data = load_iris()
df = pandas.DataFrame(data["data"])
df.head()

# df.iplot() # issue with PlotlyLocalCredentialsError               

"""
Explanation: pandas and plotly
End of explanation
"""


%%javascript
require.config({
  paths: {
      plotly: 'https://cdn.plot.ly/plotly-latest.min.js'
  }
});

%%html

<div id="myDiv"></div>

%%javascript


var x = [];
for (var i = 0; i < 500; i ++) {
    x[i] = Math.random();
}

var data = [
  {
    x: x,
    type: 'histogram'
  }
];
Plotly.newPlot('myDiv', data);

"""
Explanation: version javacript
End of explanation
"""


%%html

<div id="myDiv2" style="width:800px;height:400px;"></div>
<div class="hideshow" id="top" style="margin-left:80px;">
    <button style=";background:fuchsia;">Toggle Fuchsia</button>
</div>
<div class="hideshow" id="bottom" style="margin-left:80px;">
    <button style="background:#FFD966;">Toggle Yellow</button
</div>

%%javascript

var d3 = Plotly.d3,
    y1 = d3.range(100).map(d3.random.normal(6)),
    y2 = d3.range(100).map(d3.random.normal(9)),
    layout = {
        title:'Click buttons to toggle traces',
        showlegend:false
    },
    data = [{
        y:y1, marker: {color: 'fuchsia'}
    }, {
      y:y2, marker: {color: '#FFD966'}
    }];

Plotly.plot("myDiv2", data, layout);

$('.hideshow button').click(function(){
    var btn_id = this.parentNode.id,
        data_index = ( btn_id === 'top' ) ? 0 : 1,
        myDiv2 = document.getElementById("myDiv2"),
        visible = myDiv2.data[data_index].visible;

    if( visible === undefined ) visible = true;

    Plotly.restyle("myDiv2", 'visible', !visible, data_index);
});

"""
Explanation: javascript with custom button
End of explanation
"""


from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
# connected=True pour une utilisation ultérieure sous forme de HTML
# connected=False pour une utiliation uniquement locale
init_notebook_mode(connected=True)

from plotly.graph_objs import Box
from plotly.offline import iplot
import numpy as np

iplot([Box(y = np.random.randn(50), showlegend=False) for i in range(45)], show_link=False)

"""
Explanation: exemple offline
End of explanation
"""


