<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:b="urn:import:org.gwtbootstrap3.client.ui"
             xmlns:my="urn:import:org.dashbuilder.displayer.client">

  <ui:with field="i18n" type="org.dashbuilder.client.resources.i18n.AppConstants"/>

  <g:VerticalPanel spacing="10">
    <g:HorizontalPanel spacing="10">
      <my:Displayer ui:field="pieByOffice"/>
      <my:Displayer ui:field="barByDepartment"/>
    </g:HorizontalPanel>
    <b:TabPanel>
      <b:NavTabs>
        <b:TabListItem dataTarget="#edtab1" text="{i18n.expensesdb_tab_exp_evolution}"/>
        <b:TabListItem dataTarget="#edtab2" text="{i18n.expensesdb_tab_by_employee}"/>
        <b:TabListItem active="true" dataTarget="#edtab3" text="{i18n.expensesdb_tab_all_exp}"/>
      </b:NavTabs>
      <b:TabContent>
        <b:TabPane b:id="edtab1">
          <g:FlowPanel width="550px" height="300px">
            <my:Displayer ui:field="lineByDate"/>
          </g:FlowPanel>
        </b:TabPane>
        <b:TabPane b:id="edtab2">
          <g:FlowPanel width="650px" height="300px">
            <my:Displayer ui:field="bubbleByEmployee"/>
          </g:FlowPanel>
        </b:TabPane>
        <b:TabPane b:id="edtab3" active="true">
          <g:FlowPanel>
            <my:Displayer ui:field="tableAll"/>
          </g:FlowPanel>
        </b:TabPane>
      </b:TabContent>
    </b:TabPanel>

  </g:VerticalPanel>

</ui:UiBinder>