#!/usr/bin/env python
# coding: utf-8

# In[ ]:


import ipyvuetify as v

from traitlets import (Any, Unicode, List)


# In[ ]:


class MyMenu(v.VuetifyTemplate):
    
    color = Unicode('primary').tag(sync=True)
    items = List(['red', 'green', 'purple']).tag(sync=True)
    button_text = Unicode('menu').tag(sync=True)
    template = Unicode('''
        <v-layout>
            <v-menu offset-y>
                <template v-slot:activator="{ on }">
                    <v-btn
                            :color="color"
                            class="white--text"
                            v-on="on">
                        {{ button_text }}
                    </v-btn>
                </template>
                <v-list>
                    <v-list-item
                            v-for="(item, index) in items"
                            :key="index"
                            @click="menu_click(index)">
                        <v-list-item-title>{{ item }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </v-layout>''').tag(sync=True)
    
    
    def vue_menu_click(self, data):
        self.color = self.items[data]
        self.button_text = self.items[data]
    
    
MyMenu()


# In[ ]:


from traitlets import *
import ipyvuetify as v


select = v.Select(items=['identity', 'log', 'log10', 'log1p', 'log1p'], v_model='log', label='Transform')

class Test(v.VuetifyTemplate):
    
    items = Any(['a', 'b']).tag(sync=True)
    template = Unicode('''
            <v-layout column>
              <myselect/>
              <v-select :items="items"/>
            </v-layout>
''').tag(sync=True)
    
    
    def vue_menu_click(self, data):
        self.color = self.items[data]
        self.button_text = self.items[data]
    
    
test = Test(components={'myselect': select})
test


# In[ ]:


import pandas as pd
import traitlets
import ipyvuetify as v
import json

class PandasDataFrame(v.VuetifyTemplate):
    """
    Vuetify DataTable rendering of a pandas DataFrame
    
    Args:
        data (DataFrame) - the data to render
        title (str) - optional title
    """
    
    headers = traitlets.List([]).tag(sync=True, allow_null=True)
    items = traitlets.List([]).tag(sync=True, allow_null=True)
    search = traitlets.Unicode('').tag(sync=True)
    title = traitlets.Unicode('DataFrame').tag(sync=True)
    index_col = traitlets.Unicode('').tag(sync=True)
    template = traitlets.Unicode('''
        <template>
          <v-card>
            <v-card-title>
              <span class="title font-weight-bold">{{ title }}</span>
              <v-spacer></v-spacer>
                <v-text-field
                    v-model="search"
                    append-icon="mdi-magnify"
                    label="Search ..."
                    single-line
                    hide-details
                ></v-text-field>
            </v-card-title>
            <v-data-table
                :headers="headers"
                :items="items"
                :search="search"
                :item-key="index_col"
                :footer-props="{'items-per-page-options': [25, 50, 250, 500]}"
            >
                <template v-slot:no-data>
                  <v-alert :value="true" color="error" icon="mdi-alert">
                    Sorry, nothing to display here :(
                  </v-alert>
                </template>
                <template v-slot:no-results>
                    <v-alert :value="true" color="error" icon="mdi-alert">
                      Your search for "{{ search }}" found no results.
                    </v-alert>
                </template>
                <template v-slot:items="rows">
                  <td v-for="(element, label, index) in rows.item"
                      @click=cell_click(element)
                      >
                    {{ element }}
                  </td>
                </template>
            </v-data-table>
          </v-card>
        </template>
        ''').tag(sync=True)
    
    def __init__(self, *args, 
                 data=pd.DataFrame(), 
                 title=None,
                 **kwargs):
        super().__init__(*args, **kwargs)
        data = data.reset_index()
        self.index_col = data.columns[0]
        headers = [{
              "text": col,
              "value": col
            } for col in data.columns]
        headers[0].update({'align': 'left', 'sortable': True})
        self.headers = headers
        self.items = json.loads(
            data.to_json(orient='records'))
        if title is not None:
            self.title = title
    
    
iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')
test = PandasDataFrame(data = iris, title='Iris')
test