restyling index

appComponents.py

@@ -24,7 +24,6 @@ class TotalReturnCard(Viewer):
 
     start_date = param.Parameter()
     end_date = param.Parameter()
-
     b_stock_df = param.Parameter()
     p_stock_df = param.Parameter()
 
@@ -192,8 +191,9 @@ class TotalReturnCard(Viewer):
         self.report.object = report
         self.plot_pane.object = fig
 
-    def __init__(self, b_stock_df, p_stock_df, **params):
-
+    def __init__(self, b_stock_df, p_stock_df, max_width, min_width, **params):
+        self.max_width = max_width
+        self.min_width = min_width
         self.b_stock_df = b_stock_df
         self.p_stock_df = p_stock_df
         self._date_range = pn.widgets.DateRangeSlider(
@@ -214,9 +214,14 @@ class TotalReturnCard(Viewer):
         # self._sync_widgets()
 
     def __panel__(self):
-        self._layout = pn.Card(self._date_range, self.report, self.plot_pane,
-                               width=500, header=pn.Row(pn.pane.Str('投资组合总结'),
-                                                        pn.widgets.TooltipIcon(value=description.summary_card)))
+        self._layout = pn.Card(self._date_range,
+                               self.report,
+                               self.plot_pane,
+                               max_width=self.max_width,
+                               min_width=self.min_width,
+                               styles=styling.card_style,
+                               header=pn.Row(pn.pane.Str('投资组合总结'),
+                                             pn.widgets.TooltipIcon(value=description.summary_card)))
         return self._layout
 
     # @param.depends('value', 'width', watch=True)
@@ -233,7 +238,9 @@ class DrawDownCard(Viewer):
     selected_key_column = param.Parameter()
     calcualted_p_stock = param.Parameter()
 
-    def __init__(self, calculated_p_stock, **params):
+    def __init__(self, calculated_p_stock, max_width, min_width, **params):
+        self.max_width = max_width
+        self.min_width = min_width
         self.select = pn.widgets.Select(
             name='Select', value='盈利', options=['盈利', '回报'])
         self.calculated_p_stock = calculated_p_stock
@@ -298,7 +305,9 @@ class DrawDownCard(Viewer):
             self.select,
             self.drawdown_plot,
             header=pn.Row(pn.pane.Str('回撤分析')),
-            width=500
+            max_width=self.max_width,
+            min_width=self.min_width,
+            styles=styling.card_style,
         )
         return self._layout
 
@@ -416,7 +425,9 @@ class HistReturnCard(Viewer):
         agg_bhb['period_str'] = agg_bhb.index.map(lambda x: str(x))
         return agg_bhb
 
-    def __init__(self, calculated_p_stock, calculated_b_stock, **params):
+    def __init__(self, calculated_p_stock, calculated_b_stock, max_width, min_width, **params):
+        self.max_width = max_width
+        self.min_width = min_width
         self.calculated_p_stock = calculated_p_stock
         self.calculated_b_stock = calculated_b_stock
 
@@ -434,8 +445,13 @@ class HistReturnCard(Viewer):
 
     def __panel__(self):
         self._layout = pn.Card(pn.Param(self.param.select_resolution, name='选择周期'),
-                               self.return_barplot, self.attribute_barplot, width=500, header=pn.Row(pn.pane.Str('周期回报'),
-                                                                                                     pn.widgets.TooltipIcon(value=description.periodic_return_report)))
+                               self.return_barplot,
+                               self.attribute_barplot,
+                               max_width=self.max_width,
+                               min_width=self.min_width,
+                               styles=styling.card_style,
+                               header=pn.Row(pn.pane.Str('周期回报'),
+                                             pn.widgets.TooltipIcon(value=description.periodic_return_report)))
         return self._layout
 
 
@@ -524,7 +540,9 @@ class PortfolioComposationCard(Viewer):
         # ))
         return fig.to_dict()
 
-    def __init__(self, analytic_df, **params):
+    def __init__(self, analytic_df, max_width, min_width, **params):
+        self.max_width = max_width
+        self.min_width = min_width
         self.p_stock_df = analytic_df
         self.p_stock_df = processing.calculate_weighted_return(self.p_stock_df,
                                                                start=self.p_stock_df.time.min(),
@@ -553,8 +571,14 @@ class PortfolioComposationCard(Viewer):
         super().__init__(**params)
 
     def __panel__(self):
-        self._layout = pn.Card(self.datetime_picker, self.tree_plot, self.date_range, self.trend_plot,
-                               width=500, header=pn.pane.Str('资金分布'))
+        self._layout = pn.Card(self.datetime_picker,
+                               self.tree_plot,
+                               self.date_range,
+                               self.trend_plot,
+                               max_width=self.max_width,
+                               min_width=self.min_width,
+                               styles=styling.card_style,
+                               header=pn.pane.Str('资金分布'))
         return self._layout
 
     @param.depends('datetime_picker.value', 'p_stock_df', watch=True)
@@ -629,7 +653,9 @@ class BestAndWorstStocks(Viewer):
         df = self._get_cum_return(df)
         return df.sort_values(by='cum_pnl', ascending=False)
 
-    def __init__(self, analytic_df, **params):
+    def __init__(self, analytic_df, max_width, min_width, **params):
+        self.max_width = max_width
+        self.min_width = min_width
         self.analytic_df = analytic_df
         self._date_range = pn.widgets.DateRangeSlider(
             name='选择计算回报的时间区间',
@@ -657,7 +683,9 @@ class BestAndWorstStocks(Viewer):
                                self.best_5_tabulator,
                                pn.pane.Str('加权回报率最低回报5只股票'),
                                self.worst_5_tabulator,
-                               max_width=500,
+                               max_width=self.max_width,
+                               min_width=self.min_width,
+                               styles=styling.card_style,
                                header=pn.Row(
                                    pn.pane.Str(self.description),
                                    pn.widgets.TooltipIcon(value=self.tooltip)

index_page.py

@@ -1,6 +1,5 @@
 import panel as pn
 from sidebar import SideNavBar
-from sqlalchemy import create_engine
 import appComponents
 import db_operation as db
 
@@ -18,38 +17,77 @@ if len(analytic_p) == 0:
 
 
 else:
-
+    # a large number to let flex-basis takes full width
+    max_width = 4000
+    min_width = 300
     stock_overview = appComponents.BestAndWorstStocks(
-        analytic_df=analytic_p)
+        analytic_df=analytic_p,
+        max_width=max_width,
+        min_width=min_width,)
     composation_card = appComponents.PortfolioComposationCard(
-        analytic_p)
+        analytic_p,
+        max_width=max_width,
+        min_width=min_width,
+
+    )
     monthly_return_card = appComponents.HistReturnCard(
-        calculated_p_stock=analytic_p, calculated_b_stock=analytic_b)
-    total_return_card = appComponents.TotalReturnCard(name='Range',
-                                                      b_stock_df=analytic_b,
-                                                      p_stock_df=analytic_p,
-                                                      value=(0, 20))
+        calculated_p_stock=analytic_p,
+        calculated_b_stock=analytic_b,
+        max_width=max_width,
+        min_width=min_width,
+    )
+    total_return_card = appComponents.TotalReturnCard(
+        name='Range',
+        b_stock_df=analytic_b,
+        p_stock_df=analytic_p,
+        max_width=max_width,
+        min_width=min_width,
+        value=(0, 20))
     drawdown_card = appComponents.DrawDownCard(
-        calculated_p_stock=analytic_p)
+        calculated_p_stock=analytic_p,
+        max_width=max_width,
+        min_width=min_width,
+    )
 
     top_header = appComponents.TopHeader(
         eval_df=analytic_p,
+
+    )
+
+    # app = [pn.Row(top_header),
+    #        pn.Row(
+    #     pn.Column(monthly_return_card, stock_overview,
+    #               width=500, margin=(10, 10, 10, 10)),
+    #     pn.Column(total_return_card, drawdown_card, margin=(10, 10, 10, 10)),
+    #     pn.Column(composation_card, margin=(10, 10, 10, 10)),
+    # )]
+    flex_box_style = {
+        'max-width': '100vw',
+        'height': '100vh',
+        'flex-flow': 'column wrap',
+        'justify-content': 'flex-start',
+        'align-items': 'flex-start',
+        
+    }
+    flex_box = pn.FlexBox(
+        top_header,
+        total_return_card,
+        composation_card,
+        monthly_return_card,
+        stock_overview,
+        drawdown_card,
+        margin=(10, 10, 10, 10),
+        justify_content='start',
+        align_items='stretch',
     )
-    app = [pn.Row(top_header),
-           pn.Row(
-        pn.Column(monthly_return_card, stock_overview,
-                  width=500, margin=(10, 10, 10, 10)),
-        pn.Column(total_return_card, drawdown_card, margin=(10, 10, 10, 10)),
-        pn.Column(composation_card, margin=(10, 10, 10, 10)),
-    )]
 
 template = pn.template.FastListTemplate(
     title="Portfolio一览",
     side_bar_width=200,
-    collapsed_sidebar = True,
+    collapsed_sidebar=True,
     # sidebar=[freq, phase],
 )
 template.sidebar.append(SideNavBar())
 # template.main.extend([drawdown_card, stock_overview, composation_card, monthly_return_card, total_return_card])
-template.main.extend(app)
+template.main.append(flex_box)
 template.servable()

styling.py

@@ -6,10 +6,13 @@ plot_layout = dict(
     xaxis_title=None,
     margin=dict(l=0, r=0, t=30, b=0),
     uniformtext_mode='hide',
-    
+
 )
 
 barplot_trace = dict(
     marker_line_width=0,
     selector=dict(type="bar"),
 )
+card_style = dict(
+    flex='1 1 calc(100% / 3)',
+)