migrate drawDownCard to new pipeline

.editorconfig

@@ -0,0 +1,59 @@
+[*]
+cpp_indent_braces=false
+cpp_indent_multi_line_relative_to=innermost_parenthesis
+cpp_indent_within_parentheses=indent
+cpp_indent_preserve_within_parentheses=false
+cpp_indent_case_labels=false
+cpp_indent_case_contents=true
+cpp_indent_case_contents_when_block=false
+cpp_indent_lambda_braces_when_parameter=true
+cpp_indent_goto_labels=one_left
+cpp_indent_preprocessor=leftmost_column
+cpp_indent_access_specifiers=false
+cpp_indent_namespace_contents=true
+cpp_indent_preserve_comments=false
+cpp_new_line_before_open_brace_namespace=ignore
+cpp_new_line_before_open_brace_type=ignore
+cpp_new_line_before_open_brace_function=ignore
+cpp_new_line_before_open_brace_block=ignore
+cpp_new_line_before_open_brace_lambda=ignore
+cpp_new_line_scope_braces_on_separate_lines=false
+cpp_new_line_close_brace_same_line_empty_type=false
+cpp_new_line_close_brace_same_line_empty_function=false
+cpp_new_line_before_catch=true
+cpp_new_line_before_else=true
+cpp_new_line_before_while_in_do_while=false
+cpp_space_before_function_open_parenthesis=remove
+cpp_space_within_parameter_list_parentheses=false
+cpp_space_between_empty_parameter_list_parentheses=false
+cpp_space_after_keywords_in_control_flow_statements=true
+cpp_space_within_control_flow_statement_parentheses=false
+cpp_space_before_lambda_open_parenthesis=false
+cpp_space_within_cast_parentheses=false
+cpp_space_after_cast_close_parenthesis=false
+cpp_space_within_expression_parentheses=false
+cpp_space_before_block_open_brace=true
+cpp_space_between_empty_braces=false
+cpp_space_before_initializer_list_open_brace=false
+cpp_space_within_initializer_list_braces=true
+cpp_space_preserve_in_initializer_list=true
+cpp_space_before_open_square_bracket=false
+cpp_space_within_square_brackets=false
+cpp_space_before_empty_square_brackets=false
+cpp_space_between_empty_square_brackets=false
+cpp_space_group_square_brackets=true
+cpp_space_within_lambda_brackets=false
+cpp_space_between_empty_lambda_brackets=false
+cpp_space_before_comma=false
+cpp_space_after_comma=true
+cpp_space_remove_around_member_operators=true
+cpp_space_before_inheritance_colon=true
+cpp_space_before_constructor_colon=true
+cpp_space_remove_before_semicolon=true
+cpp_space_after_semicolon=false
+cpp_space_remove_around_unary_operator=true
+cpp_space_around_binary_operator=insert
+cpp_space_around_assignment_operator=insert
+cpp_space_pointer_reference_alignment=left
+cpp_space_around_ternary_operator=insert
+cpp_wrap_preserve_blocks=one_liners

appComponents.py

@@ -213,16 +213,11 @@ def create_hvplot_explore(calculated_b_stock, calculated_p_stock, p_eval_df, sec
 
 class TotalReturnCard(Viewer):
 
-    value = param.Range(doc="A numeric range.")
-    width = param.Integer(default=300)
     start_date = param.Parameter()
     end_date = param.Parameter()
-    eval_df = param.Parameter()
+
     b_stock_df = param.Parameter()
     p_stock_df = param.Parameter()
-    selected_df = param.Parameter()
-    plot_pane = param.Parameter()
-    report = param.Parameter()
 
     def format_number(self, num):
         return f'{round(num * 100, 2)}%'
@@ -231,31 +226,38 @@ class TotalReturnCard(Viewer):
         return 'green' if num >= 0 else 'red'
 
     def create_report(self):
-        # Calculate the total return and risk
-        result = processing.calculate_norm_return(
-            self.eval_df, self.start_date, self.end_date)
-        most_recent_row = result.tail(1)
-        active_return = most_recent_row.active_return.values[0]
-        tracking_error = result.active_return.std() * np.sqrt(252)
-        total_return = most_recent_row.return_p.values[0]
-        mkt_cap = most_recent_row.mkt_cap.values[0]
-        risk = result['return_b'].std() * np.sqrt(252)
+        # Calculate the risk, tracking error, active return
+
+        # get the result from  entry with max time
+        most_recent_row = self.result.loc[self.result.time.idxmax()]
+        active_return = most_recent_row.active_return
+        tracking_error = most_recent_row.tracking_error
+        total_return = most_recent_row.weighted_return_p
+        mkt_cap = most_recent_row.cash
+        risk = most_recent_row.risk
 
         # Calculate the total attribution
-        attributes = processing.calculate_attributes_between_dates(
-            self.start_date, self.end_date, self.p_stock_df, self.b_stock_df)
-        total_attributes = attributes.aggregate({
-            'interaction': 'sum',
-            'allocation': 'sum',
-            'selection': 'sum',
-            'active_return': 'sum',
-            'notional_return': 'sum'
-        })
-        active_return_from_stock = total_attributes.active_return
-        notional_return = total_attributes.notional_return
-        interaction = total_attributes.interaction
-        allocation = total_attributes.allocation
-        selection = total_attributes.selection
+        # attributes = processing.calculate_attributes_between_dates(
+        #     self.start_date, self.end_date, self.p_stock_df, self.b_stock_df)
+        # total_attributes = attributes.aggregate({
+        #     'interaction': 'sum',
+        #     'allocation': 'sum',
+        #     'selection': 'sum',
+        #     'active_return': 'sum',
+        #     'notional_return': 'sum'
+        # })
+        # active_return_from_stock = total_attributes.active_return
+        # notional_return = total_attributes.notional_return
+        # interaction = total_attributes.interaction
+        # allocation = total_attributes.allocation
+        # selection = total_attributes.selection
+
+        # TODO dummy data
+        active_return_from_stock = 0
+        notional_return = 0
+        interaction = 0
+        allocation = 0
+        selection = 0
 
         # Create a function for text report
         report = f"""
@@ -345,16 +347,64 @@ class TotalReturnCard(Viewer):
 
         return report
 
+    def _create_result_df(self, analytic_b, analytic_p):
+        '''
+        calculate weighted return, tracking error, risk for the whole portfolio 
+        '''
+        return_b_df = processing.calculate_weighted_return(
+            analytic_b, self.start_date, self.end_date)
+        return_p_df = processing.calculate_weighted_return(
+            analytic_p, self.start_date, self.end_date)
+
+        # weighted pct
+        processing.calculate_weighted_pct(return_b_df)
+        processing.calculate_weighted_pct(return_p_df)
+
+        # not needed but to accomendate post processing
+        return_b_df['in_benchmark'] = True
+        return_p_df['in_portfolio'] = False
+        merged_df = pd.merge(return_b_df, return_p_df, on=[
+                             'ticker', 'time'], how='outer', suffixes=('_b', '_p'))
+        processing.post_process_merged_analytic_df(merged_df)
+
+        # fill emtpy weighted_return with 0
+        # merged_df['weighted_return_b'] = merged_df['weighted_return_b'].fillna(0)
+        # merged_df['weighted_return_p'] = merged_df['weighted_return_p'].fillna(0)
+
+        # aggregate on date
+        result = merged_df.groupby('time').aggregate({'weighted_return_p': 'sum',
+                                                      'weighted_return_b': 'sum',
+                                                      "cash": 'sum',
+                                                      'weighted_pct_p': 'sum',
+                                                      'weighted_pct_b': 'sum',
+                                                      })
+        # active return
+        result['active_return'] = result.weighted_return_p - \
+            result.weighted_return_b
+
+        result.sort_values('time', inplace=True)
+        # tracking error
+        result['tracking_error'] = result['active_return'].rolling(
+            len(result), min_periods=1).std() * np.sqrt(252)
+
+        # risk std of pct
+        result['risk'] = result['weighted_pct_b'].rolling(
+            len(result), min_periods=1).std() * np.sqrt(252)
+
+        # result.time = result.index
+        result.reset_index(inplace=True)
+        return result
+
     def create_plot(self):
-        result = processing.calculate_norm_return(
-            self.eval_df, self.start_date, self.end_date)
-        fig = px.line(result, x="date", y=['return_p', 'return_b'])
+
+        fig = px.line(self.result, y=[
+                      'weighted_return_p', 'weighted_return_b'])
         fig.update_traces(mode="lines+markers",
                           marker=dict(size=5), line=dict(width=2))
         fig.update_layout(styling.plot_layout)
         colname_to_name = {
-            'return_p': 'Portfolio回报',
-            'return_b': 'benchmark回报'
+            'weighted_return_p': 'Portfolio回报',
+            'weighted_return_b': 'benchmark回报'
         }
         fig.for_each_trace(lambda t: t.update(name=colname_to_name.get(t.name, t.name),
                                               legendgroup=colname_to_name.get(
@@ -365,31 +415,34 @@ class TotalReturnCard(Viewer):
         # fig.layout.autosize = True
         return fig.to_dict()
 
-    @param.depends('start_date', 'end_date', 'eval_df', watch=True)
+    @param.depends('start_date', 'end_date', 'b_stock_df', 'p_stock_df', watch=True)
     def update(self):
+        self.result = self._create_result_df(self.p_stock_df, self.b_stock_df)
         fig = self.create_plot()
         report = self.create_report()
         self.report.object = report
         self.plot_pane.object = fig
 
-    def __init__(self, eval_df, b_stock_df, p_stock_df, **params):
-        self.eval_df = eval_df
+    def __init__(self, b_stock_df, p_stock_df, **params):
+
         self.b_stock_df = b_stock_df
         self.p_stock_df = p_stock_df
         self._date_range = pn.widgets.DateRangeSlider(
-            start=eval_df.date.min(),
-            end=eval_df.date.max(),
-            value=(eval_df.date.max() - timedelta(days=7), eval_df.date.max())
+            start=p_stock_df.time.min(),
+            end=b_stock_df.time.max(),
+            value=(p_stock_df.time.max() -
+                   timedelta(days=7), p_stock_df.time.max())
         )
         self.start_date = self._date_range.value_start
         self.end_date = self._date_range.value_end
+        self.result = self._create_result_df(b_stock_df, p_stock_df)
         self.plot_pane = pn.pane.Plotly(
             self.create_plot(), sizing_mode='stretch_width')
 
         self.report = pn.pane.HTML(
             self.create_report(), sizing_mode='stretch_width')
         super().__init__(**params)
-        self._sync_widgets()
+        # self._sync_widgets()
 
     def __panel__(self):
         self._layout = pn.Card(self._date_range, self.report, self.plot_pane,
@@ -397,15 +450,9 @@ class TotalReturnCard(Viewer):
                                                         pn.widgets.TooltipIcon(value=description.summary_card)))
         return self._layout
 
-    @param.depends('start_date', 'end_date', 'eval_df', watch=True)
-    def update_selected_df(self):
-        self.selected_df = self.eval_df[self.eval_df.date.between(
-            self.start_date, self.end_date
-        )]
-
-    @param.depends('value', 'width', watch=True)
-    def _sync_widgets(self):
-        pass
+    # @param.depends('value', 'width', watch=True)
+    # def _sync_widgets(self):
+    #     pass
 
     @param.depends('_date_range.value', watch=True)
     def _sync_params(self):
@@ -414,30 +461,53 @@ class TotalReturnCard(Viewer):
 
 
 class DrawDownCard(Viewer):
-    def __init__(self, eval_df, calculated_p_stock, calculated_b_stock, **params):
-        self.eval_df = eval_df
+    selected_key_column = param.Parameter()
+    calcualted_p_stock = param.Parameter()
+
+    def __init__(self, calculated_p_stock, **params):
+        self.select = pn.widgets.Select(
+            name='Select', value='盈利', options=['盈利', '回报'])
         self.calculated_p_stock = calculated_p_stock
-        self.calculated_b_stock = calculated_b_stock
+        self._sycn_params()
         self.drawdown_plot = pn.pane.Plotly(self.plot_drawdown())
         super().__init__(**params)
 
+    @param.depends('select.value', watch=True)
+    def _sycn_params(self):
+        self.selected_key_column = 'cum_pnl' if self.select.value == '盈利' else 'weighted_return'
+
+    def _aggregate_by_sum(self):
+        # calculate weighted return
+        processed_df = processing.calculate_weighted_return(
+            self.calculated_p_stock)
+
+        agg_df = processed_df.groupby('time').aggregate({
+            'weighted_return': 'sum',
+            'cash': 'sum',
+            'pnl': 'sum',
+        })
+        
+        # calcualte cum pnl
+        agg_df['cum_pnl'] = agg_df['pnl'].cumsum()
+
+        return agg_df
+
     def calculate_drawdown(self):
-        df = self.eval_df.copy()
-        # rolling max return
-        df['rolling_max_return_p'] = df['portfolio_return_p'].rolling(
-            window=len(df), min_periods=1).max()
-        # calculate drawdown
-        df['drawn_down'] = abs(
-            (1 + df.portfolio_return_p) / (1 + df.rolling_max_return_p) - 1)
+        agg_df = self._aggregate_by_sum()
+        df = processing.calculate_draw_down_on(
+            agg_df, self.selected_key_column)
+        df.reset_index(inplace=True)
         return df
 
     def plot_drawdown(self):
         df = self.calculate_drawdown()
-        fig = px.line(df, x="date", y=['drawn_down'])
+        fig = px.line(df, x='time', y=['drawn_down'])
+
         # add scatter to represetn new high
-        new_height_pnl = df[df.portfolio_return_p == df.rolling_max_return_p]
-        fig.add_trace(go.Scatter(
-            x=new_height_pnl['date'], y=new_height_pnl['drawn_down'], mode='markers', name='新的最高总回报'))
+        new_height_pnl = df[df[self.selected_key_column] ==
+                            df[f'rolling_max_{self.selected_key_column}']]
+        fig.add_trace(go.Scatter(x=new_height_pnl['time'],
+                                 y=new_height_pnl['drawn_down'], mode='markers', name='新的最高总回报'))
         colname_to_name = {
             'drawn_down': '回撤'
         }
@@ -450,14 +520,17 @@ class DrawDownCard(Viewer):
         ))
         return fig
 
+    @param.depends('selected_key_column', watch=True)
     def update(self):
-        pass
+        self.drawdown_plot.object = self.plot_drawdown().to_dict()
 
     def __panel__(self):
-        self._layout = pn.Card(self.drawdown_plot,
-                               header=pn.Row(pn.pane.Str('回撤分析')),
-                               width=500
-                               )
+        self._layout = pn.Card(
+            self.select,
+            self.drawdown_plot,
+            header=pn.Row(pn.pane.Str('回撤分析')),
+            width=500
+        )
         return self._layout
 
 
@@ -467,7 +540,7 @@ class HistReturnCard(Viewer):
     calculated_b_stock = param.Parameterized()
     calculated_p_stock = param.Parameterized()
     select_resolution = param.ObjectSelector(
-        default='每月回报', objects=['每日回报', '每周回报', '每月回报', '每年回报'])
+        default='每周回报', objects=['每日回报', '每周回报', '每月回报', '每年回报'])
 
     def _calculate_return(self, df, freq):
         # start on tuesday, end on monday
@@ -516,7 +589,7 @@ class HistReturnCard(Viewer):
             hovertemplate=t.hovertemplate.replace(
             t.name, colname_to_name.get(t.name, t.name))
         ))
-    
+
         fig.update_layout(barmode='group', title='主动回报归因',
                           bargap=0.0, bargroupgap=0.0)
         fig.update_layout(**styling.plot_layout)
@@ -532,8 +605,8 @@ class HistReturnCard(Viewer):
                      )
         # update legend
         colname_to_name = {
-            'portfolio_return_p': 'portfolio回报率',
-            'portfolio_return_b': 'benchmark回报率'
+            'return_p': 'portfolio回报率',
+            'return_b': 'benchmark回报率'
         }
         fig.for_each_trace(lambda t: t.update(name=colname_to_name.get(t.name, t.name),
                                               legendgroup=colname_to_name.get(
@@ -565,13 +638,15 @@ class HistReturnCard(Viewer):
             freq = 'Y'
         elif self.select_resolution == "每周回报":
             freq = 'W-MON'
-        agg_p = processing.aggregate_analytic_df_by_period(self.calculated_p_stock, freq)
-        agg_b = processing.aggregate_analytic_df_by_period(self.calculated_b_stock, freq)
+        agg_p = processing.aggregate_analytic_df_by_period(
+            self.calculated_p_stock, freq)
+        agg_b = processing.aggregate_analytic_df_by_period(
+            self.calculated_b_stock, freq)
         bhb_df = processing.calculate_periodic_BHB(agg_p, agg_b)
         agg_bhb = processing.aggregate_bhb_df(bhb_df)
         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):
         self.calculated_p_stock = calculated_p_stock
         self.calculated_b_stock = calculated_b_stock

index_page.py

@@ -42,12 +42,12 @@ composation_card = appComponents.PortfolioComposationCard(
     analytic_p)
 monthly_return_card = appComponents.HistReturnCard(
      calculated_p_stock=analytic_p, calculated_b_stock=analytic_b)
-# total_return_card = appComponents.TotalReturnCard(name='Range', eval_df=p_eval_df,
-#                                                   b_stock_df=calculated_b_stock,
-#                                                   p_stock_df=calculated_p_stock,
-#                                                   value=(0, 20))
-# drawdown_card = appComponents.DrawDownCard(
-#     eval_df=p_eval_df, calculated_p_stock=calculated_p_stock, calculated_b_stock=calculated_b_stock)
+total_return_card = appComponents.TotalReturnCard(name='Range', 
+                                                  b_stock_df=analytic_b,
+                                                  p_stock_df=analytic_p,
+                                                  value=(0, 20))
+drawdown_card = appComponents.DrawDownCard(
+   calculated_p_stock=analytic_p)
 
 # top_header = appComponents.TopHeader(
 #     eval_df=p_eval_df
@@ -57,7 +57,7 @@ template = pn.template.FastListTemplate(
     title="Portfolio一览",
     # sidebar=[freq, phase],
 )
-template.main.extend([stock_overview, composation_card, monthly_return_card])
+template.main.extend([drawdown_card, stock_overview, composation_card, monthly_return_card, total_return_card])
 # template.main.extend(
 #     [pn.Row(top_header),
 #      pn.Row(

instance/local.db

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b918cd8420f4f314aaff25fb9348f5fcca206b01a0403d9a96b0039d00b55047
-size 17780736
+oid sha256:5e731caeff97539825bee38f510c68ccf49001da6f3fed73058ea4ba7891efdc
+size 19148800

instance/log.json

@@ -1,3 +1,3 @@
 {
-    "daily_update": "2023-08-30 09:02:54"
+    "daily_update": "2023-08-31 19:34:56"
 }

pipeline.py

@@ -407,7 +407,7 @@ def batch_processing():
     # pnl
     processing.calculate_pnl(analytic_p)
     # log return
-    # need to crop on left side first
+    # need to crop on left side of benchmark 
     analytic_b = analytic_b[analytic_b['time'] >= analytic_p.time.min()].copy() 
     processing.calculate_log_return(analytic_p)
     processing.calculate_log_return(analytic_b)

processing.py

@@ -300,12 +300,17 @@ def calcualte_return(df: pd.DataFrame, start, end):
     return df
 
 
-def calculate_weighted_return(df: pd.DataFrame, start, end):
+def calculate_weighted_return(df: pd.DataFrame, start=None, end=None):
     '''
     calcualte weighted return within a window for each entry of ticker
 inclusive
     calculation using the weighted_log_return
     '''
+    if start is None:
+        start = df.time.min()
+    if end is None:
+        end = df.time.max()
+
     df = df[(df.time >= start) & (df.time <= end)].copy()
     inter_df = df.sort_values(by=['time'])
     inter_df['cum_weighted_log_return'] = inter_df.groupby(
@@ -643,19 +648,20 @@ def calculate_periodic_BHB(agg_b, agg_p):
                          how='outer',
                          on=['period', 'ticker'],
                          suffixes=('_b', '_p'))
-    merged_df['in_portfolio'].fillna(False, inplace=True)
-    merged_df['in_benchmark'].fillna(False, inplace=True)
     merged_df[columns_to_fill] = merged_df[columns_to_fill].fillna(0)
 
     # complement fill aggregate_sector and display_name
-    merged_df['aggregate_sector_b'].fillna(
-        merged_df['aggregate_sector_p'], inplace=True)
-    merged_df["display_name_b"].fillna(merged_df.display_name_p, inplace=True)
-    merged_df.rename(columns={'aggregate_sector_b': 'aggregate_sector',
-                              'display_name_b': 'display_name',
-                              }, inplace=True)
-    merged_df.drop(columns=['aggregate_sector_p',
-                   'display_name_p'], inplace=True)
+    post_process_merged_analytic_df(merged_df)
+    # merged_df['in_portfolio'].fillna(False, inplace=True)
+    # merged_df['in_benchmark'].fillna(False, inplace=True)
+    # merged_df['aggregate_sector_b'].fillna(
+    #     merged_df['aggregate_sector_p'], inplace=True)
+    # merged_df["display_name_b"].fillna(merged_df.display_name_p, inplace=True)
+    # merged_df.rename(columns={'aggregate_sector_b': 'aggregate_sector',
+    #                           'display_name_b': 'display_name',
+    #                           }, inplace=True)
+    # merged_df.drop(columns=['aggregate_sector_p',
+    #                'display_name_p'], inplace=True)
 
     # calculate active return
     merged_df['weighted_return_p'] = merged_df['return_p'] * \
@@ -677,9 +683,34 @@ def calculate_periodic_BHB(agg_b, agg_p):
     return merged_df
 
 
-def _merge_anlaytic_df(portfolio_df, benchmark_df):
-    pass
+def post_process_merged_analytic_df(merged_df):
+    '''
+    fill nan in some column on merged analytic_df
 
+    patch aggregate_sector, display_name, in_portfolio, in_benchmark,
+
+    '''
+    # merge both   
+    merged_df['in_portfolio'].fillna(False, inplace=True)
+    merged_df['in_benchmark'].fillna(False, inplace=True)
+    # complement fill aggregate_sector and display_name
+    merged_df['aggregate_sector_b'].fillna(
+        merged_df['aggregate_sector_p'], inplace=True)
+    merged_df["display_name_b"].fillna(merged_df.display_name_p, inplace=True)
+    merged_df.rename(columns={'aggregate_sector_b': 'aggregate_sector',
+                              'display_name_b': 'display_name',
+                              }, inplace=True)
+    merged_df.drop(columns=['aggregate_sector_p',
+                   'display_name_p'], inplace=True)
+
+    
+def calculate_weighted_pct(df):
+    '''
+    patch df with weighted pct, if pct is not calculated patch that as well
+    '''
+    if 'pct' not in df.columns:
+        calculate_pct(df)
+    df['weighted_pct'] = df['pct'] * df['weight']
 
 def aggregate_analytic_df_by_period(df, freq):
     '''
@@ -747,3 +778,38 @@ def aggregate_bhb_df(df, by="total"):
                                'selection',
                                'notional_active_return']].sum()
     return agg_df
+
+def calculate_draw_down_on(df, key='weighted_return'):
+    '''
+    calculate draw down on anlaytic df based on either return or accumulative pnl
+
+    Parameters
+    ----------
+    df : pd.DataFrame
+        analytic df
+    key : str, optional
+        cum_pnl or weighted_return, by default 'weighted_return'
+    '''
+    if key not in df.columns:
+        raise ValueError(f'{key} not in df')
+    else:
+        df = df.sort_values(by=['time'])
+        df[f'rolling_max_{key}'] = df[key].rolling(
+            window=len(df), min_periods=1).max()
+        if key == 'pnl':
+            df['drawn_down'] = df[key] / df[f'rolling_max_{key}']
+        
+        else:
+            df['drawn_down'] =  (1 + df[key]) / (1 + df[f'rolling_max_{key}'])
+            
+        return df
+    
+# def calculate_accumulative_pnl(df):
+#     '''
+#     calculate accumulative pnl on analytic df
+#     '''
+#     df = df.sort_values(by=['time'])
+#     df['accumulative_pnl'] = df.groupby('ticker')['pnl'].rolling(
+
+#     )
+#     return df

utils.py

@@ -140,3 +140,75 @@ def create_share_changes_report(df):
         markdown += '{} | {} | {}\n'.format(row['ticker'],
                                             row['display_name'], share_changes_str)
     return markdown
+
+
+def create_html_report(result: list[tuple]):
+    '''
+    a flex box with 2 flex item on each row where justified space-between
+
+    Parameters
+    ----------
+    result: list of tuple
+        (title, value, type)
+        title: str, title to display
+        value: any, value to display
+        type: str, used to format value
+    
+    Returns
+    -------
+    html: str
+    '''
+    style = '''
+<style>
+.compact-container {{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}}
+
+.compact-container > div {{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2px;
+}}
+
+.compact-container > div > h2,
+.compact-container > div > h3,
+.compact-container > div > p,
+.compact-container > div > ul > li {{
+    margin: 0;
+}}
+
+.compact-container > ul {{
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}}
+
+.compact-container > ul > li {{
+    display: flex;
+    margin-bottom: 2px;
+}}
+</style>
+'''
+
+    def _get_color(num):
+        return 'green' if num >= 0 else 'red'
+
+    def _format_percentage_number(num):
+        return f'{round(num * 100, 2)}%'
+
+    def _create_flex_item(result_entry):
+        key, value, value_type = result_entry
+        return f"""
+            <div>
+            <p style="margin: 0;">{key}</p>
+            <p style='color: {_get_color(value)}; margin: 0;'>{_format_percentage_number(value)}</p>
+            </div>
+        """
+    html = f"""
+        <div class="compact-container">
+            {''.join([_create_flex_item(entry) for entry in result])}
+        </div>
+    """
+    return style + html