from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import DataTable, TableColumn, Button, CustomJS, ColumnDataSource
from bokeh.plotting import figure
from bokeh.io import output_notebook
from bokeh.transform import factor_cmap

output_notebook()

# new x_ranges (1d and 2d) with their values
range1_p1 = ["b", "b", "c", "c", "d", "d"]
range1_p2 = ["2", "3", "2", "3", "2", "3"]
values1 = [100, 150, 120, 180, 130, 150];
range2_p1 = ["e", "e", "f", "f", "g", "g"];
range2_p2 = ["0", "1", "0", "1", "0", "1"];
values2 = [50, 30, 40, 80, 120, 110];

# default fig
fig = figure(x_range=["a", "b"],
             plot_height=350,
             plot_width=490,
             tools="box_edit",
             toolbar_location="right")

source_plot = ColumnDataSource(data={"Column": ["a", "b"], "Result": [0,0]})
bar = fig.vbar(x='Column', top='Result', width=0.9, source=source_plot,
               fill_color=factor_cmap('Column', palette=['red', 'blue'], factors=range2_p2, start=1, end=2),
               line_color="black", name="main_vbar")

# buttons
xrange_1d = Button(label="xrange_1d", width=100)
xrange_2d = Button(label="xrange_2d", width=100)

# callbacks
xrange_1d.js_on_click(CustomJS(args=dict(fig=fig, source_plot=source_plot, bar=bar,
                                         range1_p1=range1_p1, range1_p2=range1_p2, values1=values1),
                       code="""
                       var factorsZipped = range1_p1.map(function(e, i) {
                              return [e, range1_p2[i]];
                            });
                            console.log(factorsZipped);
                       fig.x_range.factors = factorsZipped;
                       source_plot.data["Column"] = factorsZipped;
                       source_plot.data["Result"] = values1;

                       source_plot.change.emit();
                       """))

xrange_2d.js_on_click(CustomJS(args=dict(fig=fig, source_plot=source_plot, bar=bar,
                                         range2_p1=range2_p1, range2_p2=range2_p2,
                                         values2=values2),
                       code="""
                       var factorsZipped = range2_p1.map(function(e, i) {
                              return [e, range2_p2[i]];
                            });
                       fig.x_range.factors = factorsZipped;
                       source_plot.data["Column"] = factorsZipped;
                       source_plot.data["Result"] = values2;

                       source_plot.change.emit();
                       """))


show(column(row(xrange_1d, xrange_2d), fig))