moved controls to table header

BuiltWithGenie · Aug 5, 2024 · 8a4ce88 · 8a4ce88
1 parent e16a0ee
commit 8a4ce88
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 37 deletions.
diff --git a/Contracts.jl b/Contracts.jl
@@ -6,23 +6,31 @@ using Main.ContractAnalysis
 const results = analyze_contracts("data/contracts-data.csv")
 const _columns = names(results.data)
 const _treemap_data = prepare_treemap_data(results.hierarchical_premium)
+const N = size(results.data)[1]
 
 @app begin
     # Main table
-    @out data_table_page = DataTable(results.data[1:10, :])
-    @out pagination = DataTablePagination(rows_per_page=10, rows_number=size(results.data)[1])
-
-    @event request begin
-        # the process_request function will select the portion of df to be displayed as table_page
-        state = StippleUI.Tables.process_request(results.data, data_table_page, pagination, "")
-        data_table_page = state.datatable  # the selected portion of df
-        pagination = state.pagination # update the pagination state in the backend and the browser
+    @out data_table_page = DataTable(results.data)
+    #=@out pagination = DataTablePagination(rows_per_page=10, rows_number=size(results.data)[1])=#
+    @out pagination = DataTablePagination(rows_per_page=10, rows_number=N)
+    @in filter = ""
+    @onchange filter begin
+        @show filter
     end
+    #==#
+    #=@event request begin=#
+    #=    # the process_request function will select the portion of df to be displayed as table_page=#
+    #=    state = StippleUI.Tables.process_request(results.data, data_table_page, pagination, "")=#
+    #=    data_table_page = state.datatable  # the selected portion of df=#
+    #=    pagination = state.pagination # update the pagination state in the backend and the browser=#
+    #=end=#
 
+    # Data aggregation
     @in metrics_options = _columns
     @in target = :AdjustedPremium
     @in selected_metrics = [:ClientName, :Year]
     @out aggregated_data = DataTable(aggregate_data(results.premium_by_client_year, [:ClientName, :Year], :AdjustedPremium))
+    @in filter_agg = ""
 
     @onchange selected_metrics, target begin
         aggregated_data = DataTable(aggregate_data(results.data, selected_metrics, target))

diff --git a/Yelt.jl b/Yelt.jl
@@ -14,18 +14,18 @@ const _return_periods = [5, 10, 20, 50, 100]
 const rp_analysis = calculate_return_periods(yearly_losses, _return_periods)
 
 @app begin
-    @out yelt_data_table = DataTable(first(yelt_data, 10))
+    @out yelt_data_table = DataTable(first(yelt_data, 20))
     @out yearly_losses_table = DataTable(yearly_losses)
     @out yearly_losses_pagination = DataTablePagination(rows_per_page=_data_years, rows_number=_data_years)
     @out return_periods_table = DataTable(rp_analysis)
     @out specific_rp_analysis_table = DataTable()
     @out data_years = _data_years
     @out return_periods = _return_periods
-    @out pagination = DataTablePagination(rows_per_page=10, rows_number=size(yelt_data)[1])
+    @out pagination = DataTablePagination(rows_per_page=20, rows_number=size(yelt_data)[1])
 
     @event request begin
         # the process_request function will select the portion of df to be displayed as table_page
-        state = StippleUI.Tables.process_request(yelt_data, data_table_page, pagination, "")
+        state = StippleUI.Tables.process_request(yelt_data, yelt_data_table, pagination, "")
         data_table_page = state.datatable  # the selected portion of df
         pagination = state.pagination # update the pagination state in the backend and the browser
     end

diff --git a/contracts.jl.html b/contracts.jl.html
@@ -5,31 +5,45 @@
             <a href="/yelt" style="color: white; text-decoration: none; margin: 0 15px; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s;">Yelt</a>
         </nav>
     </header>
-<h6>Table display and pagination</h6>
 <div class="row">
     <div class="st-col col-12 col-sm st-module">
-        <q-table v-model="data_table_page" v-on:request=" function (event) { handle_event(event, 'request'); } " :pagination.sync="pagination" id="it9y" row-key="__id" :columns="data_table_page.columns" title="Contract data table" :data="data_table_page.data" :pagination="pagination"></q-table>
+        <!--<q-table v-model="data_table_page" v-on:request=" function (event) { handle_event(event, 'request'); } " :pagination.sync="pagination" id="it9y" row-key="__id" :columns="data_table_page.columns" title="Contract data table" :data="data_table_page.data" :pagination="pagination" :filter="filter">-->
+        <q-table class="sticky-header" id="isb4" row-key="__id" :dense="true" :data="data_table_page.data" :columns="data_table_page.columns" title="Contract data" :filter="filter" :virtual-scroll="true"  :rows-per-page-options="[0]" style="height:600px">
+    <template v-slot:top-right="">
+        <q-input debounce="300" label="" v-model="filter" placeholder="Search" dense="">
+            <template v-slot:append="">
+                <q-icon name="search"></q-icon>
+            </template>
+        </q-input>
+    </template>
+        </q-table>
     </div>
 </div>
-<h6 id="ikj7o">Data aggregation</h6>
 <div class="row">
     <div class="st-col col-12 col-sm st-module">
-        <q-table id="isb4" row-key="__id" :dense="true" :data="aggregated_data.data" :columns="aggregated_data.columns" title="Aggregated data"></q-table>
-    </div>
-    <div class="st-col st-module col-3">
-        <q-select id="ig55" label="Aggregate by" v-model="selected_metrics" :multiple="true" :options="metrics_options" :use-chips="true"></q-select>
-        <q-select id="ig55-2" label="Target" v-model="target" :options="metrics_options"></q-select>
+        <q-table class="sticky-header" id="it9n-2-2" :dense="true" :data="selected_group_table.data" :columns="selected_group_table.columns" :bordered="true" title="Grouped data by column">
+            <template v-slot:top-right>
+                <q-select id="ig55-2-2" label="Group by" v-model="group_by" :options="columns" style="margin-right:60px"></q-select>
+                <q-select id="ig55-3" label="Group select" v-model="group_select" :options="group_keys"></q-select>
+            </template>
+        </q-table>
     </div>
 </div>
-<h6>Data grouping</h6>
 <div class="row">
     <div class="st-col col-12 col-sm st-module">
-        <q-table id="it9n-2-2" :dense="true" :data="selected_group_table.data" :columns="selected_group_table.columns" :bordered="true" title="Group data"></q-table>
-    </div>
-    <div class="st-col st-module col-3">
-        <q-select id="ig55-2-2" label="Group by" v-model="group_by" :options="columns"></q-select>
-        <q-select id="ig55-3" label="Group select" v-model="group_select" :options="group_keys"></q-select>
+        <q-table class="sticky-header" id="isb4" row-key="__id" :dense="true" :data="aggregated_data.data" :columns="aggregated_data.columns" title="Aggregated data by column" :filter="filter_agg" :virtual-scroll="true" :rows-per-page-options="[0]" style="height:400px">
+    <template v-slot:top-right="">
+        <q-select id="ig55" label="Aggregate by" v-model="selected_metrics" :multiple="true" :options="metrics_options" :use-chips="true" dense style="margin-right:60px"></q-select>
+        <q-select id="ig55-2" label="Target" v-model="target" :options="metrics_options" dense ></q-select>
+        <q-input debounce="300" label="" v-model="filter_agg" placeholder="Search" dense style="margin-left:60px;width=50px">
+            <template v-slot:append="">
+                <q-icon name="search"></q-icon>
+            </template>
+        </q-input>
+    </template>
+        </q-table>
     </div>
-</div><a gb_c__href=""></a>
-<h6>Data hierarchy</h6>
+</div>
+
+<h4>Premium per business entity - unit - segment</h4>
 <plotly id="ia8fr" data="W3siZ2J0eXBlIjoiVHJlZW1hcCIsInR5cGUiOiJ0cmVlbWFwIiwibGFiZWxzIjoiJF97dG1hcF9sYWJlbHN9IiwicGFyZW50cyI6IiRfe3RtYXBfcGFyZW50c30iLCJ2YWx1ZXMiOiIkX3t0bWFwX3ZhbHVlc30iLCJuYW1lIjoiVHJhY2UifV0=" config="e30=" layout="eyJoZWlnaHQiOiI3MDAifQ=="></plotly>
diff --git a/public/css/genieapp.css b/public/css/genieapp.css
@@ -1,3 +1,36 @@
 #idphq{
     height:600px;
-} 
+} 
+
+.sticky-header {
+  /* height or max-height is important */
+  height: 310px;
+}
+
+.sticky-header .q-table__top,
+.sticky-header .q-table__bottom,
+.sticky-header thead tr:first-child th {
+  /* bg color is important for th; just specify one */
+  background-color: #FFFFFF;
+}
+
+.sticky-header thead tr th {
+  position: sticky;
+  z-index: 1;
+}
+
+.sticky-header thead tr:first-child th {
+  top: 0;
+}
+
+/* this is when the loading indicator appears */
+.sticky-header.q-table--loading thead tr:last-child th {
+  /* height of all previous header rows */
+  top: 48px;
+}
+
+/* prevent scrolling behind sticky top row on focus */
+.sticky-header tbody {
+  /* height of all previous header rows */
+  scroll-margin-top: 48px;
+}
diff --git a/yelt.jl.html b/yelt.jl.html
@@ -9,27 +9,24 @@
     <div class="row">
         <div class="st-col col-8 col-sm st-module">
             <h6>YELT</h6>
-            <q-table v-model="yelt_data_table" v-on:request=" function (event) { handle_event(event, 'request'); } " :pagination.sync="pagination" id="it9y" row-key="__id" :columns="yelt_data_table.columns" :data="yelt_data_table.data" :pagination="pagination"></q-table>
+            <q-table v-model="yelt_data_table" v-on:request=" function (event) { handle_event(event, 'request'); } " :pagination.sync="pagination" id="it9y" row-key="__id" :columns="yelt_data_table.columns" :data="yelt_data_table.data" :pagination="pagination" dense></q-table>
+
+            <p>pagination is not working yet</p>
         </div>
         <div id="ivwy1" class="st-col col-4 st-module">
             <h6>Yearly losses</h6>
-            <q-table id="idphq" :columns="yearly_losses_table.columns" :data="yearly_losses_table.data" row-key="id" :flat="true" :bordered="true" :pagination="yearly_losses_pagination" :virtual-scroll="true"></q-table>
+            <q-table id="idphq" :columns="yearly_losses_table.columns" :data="yearly_losses_table.data" row-key="id" :flat="true" :bordered="true" :pagination="yearly_losses_pagination" :virtual-scroll="true" dense></q-table>
         </div>
     </div>
     <div class="row mt-4">
         <div class="st-col col-12 col-sm st-module">
             <h6>Return periods</h6>
-            <q-table id="iht3t" v-on:row-click="function(event,row){selected_return_period=row.ReturnPeriod}" :columns="return_periods_table.columns" :data="return_periods_table.data" row-key="id" :flat="true" :bordered="true"></q-table>
+            <q-table id="iht3t" v-on:row-click="function(event,row){selected_return_period=row.ReturnPeriod}" :columns="return_periods_table.columns" :data="return_periods_table.data" row-key="id" :flat="true" :bordered="true" dense></q-table>
             <p style="color:darkred"> Click an entry in the ReturnPeriod column to view its perils on the right table.</p>
         </div>
         <div class="st-col col-12 col-sm st-module">
             <h6>Top perils for RP {{selected_return_period}}</h6>
-            <q-table id="ig9eh" :columns="specific_rp_analysis_table.columns" :data="specific_rp_analysis_table.data" row-key="id" :flat="true" :bordered="true"></q-table>
-        </div>
-    </div>
-    <div class="row mt-4">
-        <div class="st-col col-12 col-sm st-module">
-            <!--</div>-->
+            <q-table id="ig9eh" :columns="specific_rp_analysis_table.columns" :data="specific_rp_analysis_table.data" row-key="id" :flat="true" :bordered="true" dense></q-table>
         </div>
     </div>
 </div>