feat: general metrics

src/production/downtime.py

@@ -5,60 +5,60 @@ machine_errors = {
         "description": "Calibration Error",
         "cause": "The machine is not correctly calibrated.",
         "solution": "Recalibrate the machine according to the manufacturer's specifications.",
-        "downtime": timedelta(hours=2)
+        "downtime": timedelta(minutes=15)
     },
     "E002": {
         "description": "Motor Overheating",
         "cause": "The motor has exceeded the maximum operating temperature.",
         "solution": "Stop the machine and let it cool down. Check the cooling system.",
-        "downtime": timedelta(hours=3)
+        "downtime": timedelta(minutes=20)
     },
     "E003": {
         "description": "Material Jam",
         "cause": "Accumulation of material in the processing area.",
         "solution": "Clean the processing area and check the feeding mechanisms.",
-        "downtime": timedelta(minutes=15)
+        "downtime": timedelta(minutes=8)
     },
     "E004": {
         "description": "Sensor Error",
         "cause": "A sensor is not functioning correctly.",
         "solution": "Check the sensor connections and replace if necessary.",
-        "downtime": timedelta(hours=1, minutes=30)
+        "downtime": timedelta(minutes=20)
     },
     "E005": {
         "description": "Power Failure",
         "cause": "Electrical supply interrupted.",
         "solution": "Check the electrical supply and fuses. Restart the machine.",
-        "downtime": timedelta(minutes=30)
+        "downtime": timedelta(minutes=10)
     },
     "E006": {
         "description": "Software Error",
         "cause": "Bug in the machine control software.",
         "solution": "Restart the software or update the firmware.",
-        "downtime": timedelta(hours=1)
+        "downtime": timedelta(minutes=15)
     },
     "E007": {
         "description": "Wear and Tear of Parts",
         "cause": "The machine parts are worn out.",
         "solution": "Inspect the parts and replace if necessary.",
-        "downtime": timedelta(hours=1)
+        "downtime": timedelta(minutes=15)
     },
     "E008": {
         "description": "Communication Error",
         "cause": "Communication problem between different machine modules.",
         "solution": "Check communication cables and protocols.",
-        "downtime": timedelta(hours=2)
+        "downtime": timedelta(minutes=20)
     },
     "E009": {
         "description": "Low Lubricant Level",
         "cause": "The lubricant level is insufficient.",
         "solution": "Refill the lubricant reservoir according to specifications.",
-        "downtime": timedelta(minutes=15)
+        "downtime": timedelta(minutes=8)
     },
     "E010": {
         "description": "Positioning Error",
         "cause": "The tooling is not positioning correctly.",
         "solution": "Check the positioning mechanisms and recalibrate if necessary.",
-        "downtime": timedelta(hours=1)
+        "downtime": timedelta(minutes=15)
     }
 }

src/production/flow.py

@@ -32,7 +32,7 @@ async def generate_data(state):
         if not state["running"]:
             break
 
-        if random.random() < 0.2:
+        if random.random() < 0.01:     # 0.005
             error_key = random.choice(list(machine_errors.keys()))
             error = machine_errors[error_key]
             downtime = error["downtime"]

src/production/metrics/machine.py

@@ -8,29 +8,28 @@ async def machine_metrics(raw_data):
         df[col] = pd.to_datetime(df[col], errors='coerce', format="%Y-%m-%d %H:%M:%S")
 
     opening_time = df['Timestamp'].max() - df['Timestamp'].min()
-    required_time = opening_time  # planned_stop_time = 0 non implémenté
+    required_time = opening_time
+    # planned_stop_time = 0 non implémenté
 
     downtime_df = df.dropna(subset=['Downtime Start', 'Downtime End'])
     unplanned_stop_time = (downtime_df['Downtime End'] - downtime_df['Downtime Start']).sum()
     operating_time = required_time - unplanned_stop_time
 
-    net_time = operating_time  # cadency_variance = 0 non implémenté
+    net_time = operating_time
+    # cadency_variance = 0 non implémenté
 
     nok_count = (df['Compliance'] != 'OK').sum()
     useful_time = net_time - pd.Timedelta(seconds=nok_count)
 
-    total_parts = len(df)
-    compliant_parts = (df['Compliance'] == 'OK').sum()
-
     operating_sec = operating_time.total_seconds()
     net_sec = net_time.total_seconds()
     required_sec = required_time.total_seconds()
 
-    quality_rate = (compliant_parts / total_parts) * 100 if total_parts > 0 else 0
+    quality_rate = (useful_time / net_time) * 100 if net_time else 0
     operating_rate = (net_sec / operating_sec) * 100 if operating_sec > 0 else 0
     availability_rate = (operating_sec / required_sec) * 100 if required_sec > 0 else 0
 
-    TRS = (quality_rate / 100) * (operating_rate / 100) * (availability_rate / 100) * 100
+    OEE = (quality_rate / 100) * (operating_rate / 100) * (availability_rate / 100) * 100
 
     downtime_count = len(downtime_df)
     mtbf = operating_time / downtime_count if downtime_count > 0 else pd.Timedelta(0)
@@ -46,7 +45,7 @@ async def machine_metrics(raw_data):
         "quality_rate": quality_rate,
         "operating_rate": operating_rate,
         "availability_rate": availability_rate,
-        "TRS": TRS,
+        "OEE": OEE,
         "MTBF": str(mtbf),
         "MTTR": str(mttr)
     }

src/ui/dashboard.py

@@ -17,6 +17,7 @@ def hash_dataframe(df):
     """Computes a simple hash to detect changes in the DataFrame."""
     return pd.util.hash_pandas_object(df).sum()
 
+
 async def dataflow(state):
     """
     Main function that updates data if necessary.
@@ -101,6 +102,8 @@ def init_components(n=TOOLS_COUNT):
     - tool_plots: list of tool-related Gradio components
     - general_plots: list of general-related Gradio components
     """
+    print("Initializing components...")
+
     displays = []
     tool_plots = []
     general_plots = []
@@ -109,7 +112,7 @@ def init_components(n=TOOLS_COUNT):
     main_display = GeneralMetricsDisplay()
     displays.append(main_display)
     general_plots.extend(
-            main_display.block(
+            main_display.general_block(
             all_tools_df=pd.DataFrame(),
             issues_df=pd.DataFrame(),
             efficiency_data={}
@@ -127,11 +130,9 @@ def init_components(n=TOOLS_COUNT):
 async def on_tick(state, displays):
     """
     Tick function called periodically to update plots if data has changed.
-
     Handles:
     - Tool-specific plots (tool_1, tool_2, ..., tool_n)
     - General plots (all tools, issues, efficiency)
-
     Returns two lists of plots separately for tools and general metrics, plus state.
     """
     async with state.setdefault('lock', asyncio.Lock()):
@@ -146,32 +147,26 @@ async def on_tick(state, displays):
         general_plots = []
         general_display = displays[0]
         general_plots.extend(
-                general_display.update(
+            general_display.refresh(
                 all_tools_df=all_tools_df,
                 issues_df=issues_df,
                 efficiency_data=efficiency_data
             )
         )
+
         # Update tool-specific plots
         tool_plots = []
         for df, display in zip(tool_dfs, displays[1:]):
             tool_plots.extend(
-                [
-                    display.normal_curve(df, cote='pos'),
-                    display.gauge(df, type='cp', cote='pos'),
-                    display.gauge(df, type='cpk', cote='pos'),
-                    display.normal_curve(df, cote='ori'),
-                    display.gauge(df, type='cp', cote='ori'),
-                    display.gauge(df, type='cpk', cote='ori'),
-                    display.control_graph(df),
-                ]
+                display.refresh(
+                    df=df
+                )
             )
         return tool_plots + general_plots + [state]
 
 def dashboard_ui(state):
     """
     Creates the Gradio interface and sets a refresh every second.
-
     The outputs are separated into two groups for tools and general metrics to
     preserve layout order and grouping.
     """

src/ui/graphs/general_graphs.py

@@ -1,18 +1,297 @@
 import gradio as gr
+import pandas as pd
+import plotly.graph_objects as go
 
 
 class GeneralMetricsDisplay:
     def __init__(self):
-        self.plot_all_tools = gr.Plot()
-        self.plot_issues = gr.Plot()
-        self.plot_efficiency = gr.Plot()
-
-    def block(self, all_tools_df, issues_df, efficiency_data):
-        return [self.plot_all_tools, self.plot_issues, self.plot_efficiency]
-
-    def update(self, all_tools_df, issues_df, efficiency_data):
-        #fig_all = px.scatter(tools_df, x="Position", y="Orientation", color="Compliance", title="All Tools Summary")
-        #fig_issues = px.histogram(issues_df, x="Error Description", title="Error Types Distribution")
-        #fig_eff = px.bar(x=list(efficiency_data.keys()), y=list(efficiency_data.values()), title="Machine Efficiency")
-        #return [fig_all, fig_issues, fig_eff]
-        return self.plot_all_tools, self.plot_issues, self.plot_efficiency
+        self.plots = []
+
+    @staticmethod
+    def kpi_rate(percentage, title="KPI"):
+        if percentage is None or not (0 <= percentage <= 100):
+            fig = go.Figure()
+            fig.update_layout(
+                template='plotly_dark',
+                width=320,
+                height=150,
+                margin=dict(l=10, r=10, t=10, b=10),
+                annotations=[dict(
+                    text="No data",
+                    showarrow=False,
+                    font=dict(size=16, color="white"),
+                    x=0.5, y=0.5, xanchor="center", yanchor="middle"
+                )]
+            )
+            return fig
+        fig = go.Figure(data=[go.Pie(
+            values=[percentage, 100 - percentage],
+            labels=['', ''],
+            hole=0.6,
+            marker_colors=['#2CFCFF', '#444444'],
+            textinfo='none',
+            hoverinfo='skip',
+            sort=False,
+            domain=dict(x=[0.4, 0.95], y=[0.15, 0.85])
+        )])
+        fig.update_layout(
+            template='plotly_dark',
+            annotations=[
+                dict(
+                    text=f"{percentage:.0f}%",
+                    x=0.675, y=0.5,
+                    font_size=20,
+                    showarrow=False,
+                    font=dict(color="white"),
+                    xanchor="center", yanchor="middle"
+                ),
+                dict(
+                    text=title,
+                    x=0.05, y=0.5,
+                    showarrow=False,
+                    font=dict(size=16, color="white"),
+                    xanchor="left", yanchor="middle"
+                )
+            ],
+            showlegend=False,
+            margin=dict(l=10, r=10, t=10, b=10),
+            width=320,
+            height=150
+        )
+        return fig
+
+    @staticmethod
+    def kpi_value(value, title="Valeur"):
+        width = 360
+        if value is None or (isinstance(value, str) and (value.strip() == "" or value.strip().isdigit() and len(value.strip()) > 8)):
+            fig = go.Figure()
+            fig.update_layout(
+                template='plotly_dark',
+                width=width,
+                height=125,
+                margin=dict(l=30, r=0, t=0, b=30),
+                xaxis=dict(visible=False),
+                yaxis=dict(visible=False),
+                plot_bgcolor='#111111',
+                paper_bgcolor='#111111',
+                annotations=[dict(
+                    text="No data",
+                    showarrow=False,
+                    font=dict(size=16, color="white"),
+                    x=0.5, y=0.5,
+                    xanchor="center", yanchor="middle"
+                )]
+            )
+            return fig
+        try:
+            if isinstance(value, (int, float)):
+                formatted = f"{int(value)}" if float(value).is_integer() else f"{float(value):.2f}"
+            else:
+                td = pd.to_timedelta(value)
+                total_seconds = int(td.total_seconds())
+                hours, remainder = divmod(total_seconds, 3600)
+                minutes, seconds = divmod(remainder, 60)
+                formatted = f"{hours}h {minutes}m {seconds}s"
+        except (ValueError, TypeError):
+            try:
+                numeric_value = float(value)
+                formatted = f"{int(numeric_value)}" if numeric_value.is_integer() else f"{numeric_value:.2f}"
+            except (ValueError, TypeError):
+                formatted = str(value)
+        fig = go.Figure()
+        fig.add_annotation(
+            text=f"<b>{formatted}</b>",
+            x=0.5, y=0.5,
+            showarrow=False,
+            font=dict(size=24, color="white"),
+            xanchor="center", yanchor="middle"
+        )
+        fig.add_annotation(
+            text=title,
+            x=0.5, y=1.8,
+            showarrow=False,
+            font=dict(size=16, color="lightgray"),
+            xanchor="center", yanchor="middle"
+        )
+        fig.update_layout(
+            template='plotly_dark',
+            width=width,
+            height=150,
+            margin=dict(l=40, r=0, t=0, b=40),
+            xaxis=dict(visible=False),
+            yaxis=dict(visible=False),
+            plot_bgcolor='#111111',
+            paper_bgcolor='#111111'
+        )
+        return fig
+
+    @staticmethod
+    def get_max_part_id(df):
+        if not df.empty and 'Part ID' in df.columns:
+            try:
+                numeric_ids = pd.to_numeric(df['Part ID'], errors='coerce')
+                return int(numeric_ids.dropna().max())
+            except Exception:
+                return None
+        return None
+
+    @staticmethod
+    def pareto(issues_df, error_col='Error Type'):
+        if issues_df is None or issues_df.empty:
+            fig = go.Figure()
+            fig.update_layout(
+                template='plotly_dark',
+                annotations=[dict(
+                    text="No data",
+                    showarrow=False,
+                    font=dict(size=16, color="white")
+                )]
+            )
+            return fig
+        issues_df['Downtime Start'] = pd.to_datetime(issues_df['Downtime Start'], errors='coerce')
+        issues_df['Downtime End'] = pd.to_datetime(issues_df['Downtime End'], errors='coerce')
+        issues_df['Downtime Duration'] = (issues_df['Downtime End'] - issues_df[
+            'Downtime Start']).dt.total_seconds() / 60
+        issues_df = issues_df.dropna(subset=['Downtime Duration'])
+        grouped = issues_df.groupby(error_col)['Downtime Duration'].sum().sort_values(ascending=False)
+        if grouped.empty:
+            fig = go.Figure()
+            fig.update_layout(
+                template='plotly_dark',
+                annotations=[dict(
+                    text="No Error",
+                    showarrow=False,
+                    font=dict(size=16, color="white")
+                )]
+            )
+            return fig
+        cumulative = grouped.cumsum() / grouped.sum() * 100
+        labels = grouped.index.tolist()
+        durations = grouped.values
+        fig = go.Figure()
+        fig.add_trace(
+            go.Bar(
+                x=labels,
+                y=durations,
+                name='Downtime (min)',
+                marker_color='#2CFCFF',
+                yaxis='y1'
+            )
+        )
+        fig.add_trace(go.Scatter(
+            x=labels,
+            y=cumulative,
+            name='Cumulative %',
+            yaxis='y2',
+            mode='lines+markers',
+            line=dict(color='orange', width=2),
+            marker=dict(size=8)
+        ))
+        fig.update_layout(
+            template='plotly_dark',
+            title="Pareto of errors by downtime",
+            xaxis=dict(title="Errors"),
+            yaxis=dict(
+                title='Downtime (minutes)',
+                showgrid=False,
+                side='left'
+            ),
+            yaxis2=dict(
+                title='Cumulative percentage (%)',
+                overlaying='y',
+                side='right',
+                range=[0, 110],
+                showgrid=False,
+                tickformat='%'
+            ),
+            legend=dict(x=0.7, y=1.1),
+            margin=dict(l=70, r=70, t=50, b=50),
+        )
+        return fig
+
+    def general_block(self, all_tools_df, issues_df, efficiency_data):
+        header = f"Metrics Summary"
+        html_content = f"""
+        <div style="display: flex; align-items: center; justify-content: flex-start; width: 100%;">
+            <div style="flex: 0 0 2%; border-top: 1px solid white;"></div>
+            <h2 style="flex: 0 0 auto; margin: 0 10px;">{header}</h2>
+            <div style="flex: 1; border-top: 1px solid white;"></div>
+        </div>
+        """
+        gr.HTML(html_content)
+        with gr.Row():
+            with gr.Group():
+                with gr.Row(height=125):
+                    total_count = gr.Plot(
+                        self.kpi_value(
+                            value=self.get_max_part_id(all_tools_df),
+                            title="Total Count"
+                        )
+                    )
+                    total_time = gr.Plot(
+                        self.kpi_value(
+                            value=efficiency_data.get("opening_time", "0 days 00:00:00"),
+                            title="Total Time"
+                        )
+                    )
+                    mtbf_plot = gr.Plot(
+                        self.kpi_value(
+                            value=efficiency_data.get("MTBF", "0 days 00:00:00"),
+                            title="MTBF"
+                        )
+                    )
+                    mttr_plot = gr.Plot(
+                        self.kpi_value(
+                            value=efficiency_data.get("MTTR", "0 days 00:00:00"),
+                            title="MTTR"
+                        )
+                    )
+        with gr.Row():
+            with gr.Column(scale=1):
+                with gr.Group():
+                    with gr.Row(height=150):
+                        oee_plot = gr.Plot(
+                            self.kpi_rate(
+                                percentage=efficiency_data.get('OEE', 0),
+                                title="OEE"
+                            )
+                        )
+                    with gr.Row(height=150):
+                        quality_rate_plot = gr.Plot(
+                            self.kpi_rate(
+                                percentage=efficiency_data.get("quality_rate", 0),
+                                title="Quality Rate"
+                            )
+                        )
+                    with gr.Row(height=150):
+                        availability_plot = gr.Plot(
+                            self.kpi_rate(
+                                percentage=efficiency_data.get("availability_rate", 0),
+                                title="Availability"
+                            )
+                        )
+            with gr.Column(scale=10):
+                with gr.Group():
+                    with gr.Row(height=450):
+                        pareto = gr.Plot(
+                            self.pareto(issues_df, error_col='Error Code')
+                        )
+        self.plots = [
+            total_count, total_time,
+            oee_plot, quality_rate_plot, availability_plot,
+            mtbf_plot, mttr_plot,
+            pareto,
+        ]
+        return self.plots
+
+    def refresh(self, all_tools_df, issues_df, efficiency_data):
+        return [
+            self.kpi_value(value=self.get_max_part_id(all_tools_df), title="Total Count"),
+            self.kpi_value(value=efficiency_data.get("opening_time", "0 days 00:00:00"), title="Total Time"),
+            self.kpi_rate(percentage=efficiency_data.get('OEE', 0), title="OEE"),
+            self.kpi_rate(percentage=efficiency_data.get("quality_rate", 0), title="Quality Rate"),
+            self.kpi_rate(percentage=efficiency_data.get("availability_rate", 0), title="Availability"),
+            self.kpi_value(value=efficiency_data.get("MTBF", "0 days 00:00:00"), title="MTBF"),
+            self.kpi_value(value=efficiency_data.get("MTTR", "0 days 00:00:00"), title="MTTR"),
+            self.pareto(issues_df, error_col='Error Code')
+        ]

src/ui/graphs/tools_graphs.py

@@ -13,21 +13,23 @@ class ToolMetricsDisplay:
 
     @staticmethod
     def gauge(df, type=None, cote=None):
+        width = 205
+        height = 150
+        margin = dict(l=30, r=50, t=50, b=0)
         if df is None or df.empty:
             fig = go.Figure()
             fig.update_layout(
                 template='plotly_dark',
-                width=200,
-                height=170,
-                margin=dict(l=30, r=50, t=30, b=0),
+                width=width,
+                height=height,
+                margin=margin,
                 annotations=[dict(
-                    text="No data available",
+                    text="No data",
                     showarrow=False,
                     font=dict(size=16, color="white")
                 )]
             )
             return fig
-
         column = f"{cote}_rolling_{type}"
         idx = df['Timestamp'].idxmax()
         value = df.loc[idx, column]
@@ -50,74 +52,110 @@ class ToolMetricsDisplay:
         ))
         fig.update_layout(
             template='plotly_dark',
-            width=200,
-            height=170,
-            margin=dict(l=30, r=50, t=30, b=0),
+            width=width,
+            height=height,
+            margin=margin,
         )
         return fig
 
     def control_graph(self, df):
+        width = 832
+        height = 400
+        margin = dict(l=70, r=100, t=30, b=70)
         if df is None or df.empty:
             fig = go.Figure()
             fig.update_layout(
                 template='plotly_dark',
                 xaxis_title='Timestamp',
-                yaxis_title='Valeurs',
+                yaxis_title='Values',
                 showlegend=True,
-                width=720,
-                height=400,
-                margin=dict(l=70, r=10, t=30, b=70),
+                width=width,
+                height=height,
+                margin=margin,
                 annotations=[dict(
-                    text="No data available",
+                    text="No data",
                     showarrow=False,
                     font=dict(size=20, color="white")
                 )]
             )
             return fig
-
         fig = go.Figure()
-        fig.add_trace(go.Scatter(x=df['Timestamp'], y=[0.3] * len(df), mode='lines',
-                                 line=dict(dash='dot', color=self.pos_color, width=1), name='lsl pos'))
-        fig.add_trace(go.Scatter(x=df['Timestamp'], y=[0.5] * len(df), mode='lines',
-                                 line=dict(dash='dot', color=self.pos_color, width=1), name='usl pos'))
-        fig.add_trace(go.Scatter(x=df['Timestamp'], y=[0.2] * len(df), mode='lines',
-                                 line=dict(dash='dot', color=self.ori_color, width=1), name='lsl ori'))
-        fig.add_trace(go.Scatter(x=df['Timestamp'], y=[0.6] * len(df), mode='lines',
-                                 line=dict(dash='dot', color=self.ori_color, width=1), name='usl ori'))
         fig.add_trace(
-            go.Scatter(x=df['Timestamp'], y=df['Position'], mode='lines+markers', line=dict(color=self.pos_color),
-                       name='pos'))
+            go.Scatter(
+                x=df['Timestamp'], y=[0.3] * len(df),
+                mode='lines',
+                line=dict(dash='dot', color=self.pos_color, width=1),
+                name='lsl pos'
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=df['Timestamp'], y=[0.5] * len(df),
+                mode='lines',
+                line=dict(dash='dot', color=self.pos_color, width=1),
+                name='usl pos'
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=df['Timestamp'], y=[0.2] * len(df),
+                mode='lines',
+                line=dict(dash='dot', color=self.ori_color, width=1),
+                name='lsl ori'
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=df['Timestamp'], y=[0.6] * len(df),
+                mode='lines',
+                line=dict(dash='dot', color=self.ori_color, width=1),
+                name='usl ori'
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=df['Timestamp'], y=df['Position'],
+                mode='lines+markers', line=dict(color=self.pos_color),
+                name='pos'
+            )
+        )
         fig.add_trace(
-            go.Scatter(x=df['Timestamp'], y=df['Orientation'], mode='lines+markers', line=dict(color=self.ori_color),
-                       name='ori'))
+            go.Scatter(
+                x=df['Timestamp'], y=df['Orientation'],
+                mode='lines+markers', line=dict(color=self.ori_color),
+                name='ori'
+            )
+        )
         fig.update_layout(
             template='plotly_dark',
             xaxis_title='Timestamp',
             yaxis_title='Valeurs',
             showlegend=True,
-            width=720,
-            height=400,
-            margin=dict(l=70, r=10, t=30, b=70)
+            width=width,
+            height=height,
+            margin=margin
         )
         return fig
 
     def normal_curve(self, df, cote=None):
+        width = 410
+        height= 250
+        margin= dict(l=20, r=70, t=20, b=20)
         if df is None or df.empty:
             fig = go.Figure()
             fig.update_layout(
                 template='plotly_dark',
                 showlegend=False,
-                width=370,
-                height=250,
-                margin=dict(l=40, r=40, t=40, b=40),
+                width=width,
+                height=height,
+                margin=margin,
                 annotations=[dict(
-                    text="No data available",
+                    text="No data",
                     showarrow=False,
                     font=dict(size=16, color="white")
                 )]
             )
             return fig
-
         if cote == 'pos':
             color = self.pos_color
             lsl = 0.3
@@ -133,17 +171,30 @@ class ToolMetricsDisplay:
         x = np.linspace(mu - 3 * std, mu + 3 * std, 100)
         y = norm.pdf(x, mu, std)
         fig = go.Figure()
-        fig.add_trace(go.Scatter(x=x, y=y, mode='lines', name='Normal Curve', line=dict(color=color)))
-        fig.add_shape(type="line", x0=usl, y0=0, x1=usl, y1=max(y), line=dict(color="red", width=1, dash="dot"),
-                      name='usl')
-        fig.add_shape(type="line", x0=lsl, y0=0, x1=lsl, y1=max(y), line=dict(color="red", width=1, dash="dot"),
-                      name='lsl')
+        fig.add_trace(
+            go.Scatter(
+                x=x, y=y,
+                mode='lines',
+                name='Normal Curve',
+                line=dict(color=color)
+            )
+        )
+        fig.add_shape(
+            type="line", x0=usl, y0=0, x1=usl, y1=max(y),
+            line=dict(color="red", width=1, dash="dot"),
+            name='usl'
+        )
+        fig.add_shape(
+            type="line", x0=lsl, y0=0, x1=lsl, y1=max(y),
+            line=dict(color="red", width=1, dash="dot"),
+            name='lsl'
+        )
         fig.update_layout(
             template='plotly_dark',
             showlegend=False,
-            width=370,
-            height=250,
-            margin=dict(l=40, r=40, t=40, b=40)
+            width=width,
+            height=height,
+            margin=margin
         )
         return fig
 
@@ -162,26 +213,64 @@ class ToolMetricsDisplay:
                 gr.Markdown("### `Position`")
                 with gr.Group():
                     with gr.Row(height=250):
-                        pos_normal_plot = gr.Plot(self.normal_curve(df=df, cote='pos'))
+                        pos_normal_plot = gr.Plot(
+                            self.normal_curve(
+                                df=df, cote='pos'
+                            )
+                        )
                     with gr.Row(height=150):
-                        pos_cp_gauge = gr.Plot(self.gauge(df=df, type='cp', cote='pos'))
-                        pos_cpk_gauge = gr.Plot(self.gauge(df=df, type='cpk', cote='pos'))
+                        pos_cp_gauge = gr.Plot(
+                            self.gauge(
+                                df=df, type='cp', cote='pos'
+                            )
+                        )
+                        pos_cpk_gauge = gr.Plot(
+                            self.gauge(
+                                df=df, type='cpk', cote='pos'
+                            )
+                        )
             with gr.Column(scale=1):
                 gr.Markdown("### `Orientation`")
                 with gr.Group():
                     with gr.Row(height=250):
-                        ori_normal_plot = gr.Plot(self.normal_curve(df=df, cote='ori'))
+                        ori_normal_plot = gr.Plot(
+                            self.normal_curve(
+                                df=df, cote='ori'
+                            )
+                        )
                     with gr.Row(height=150):
-                        ori_cp_gauge = gr.Plot(self.gauge(df=df, type='cp', cote='ori'))
-                        ori_cpk_gauge = gr.Plot(self.gauge(df=df, type='cpk', cote='ori'))
+                        ori_cp_gauge = gr.Plot(
+                            self.gauge(
+                                df=df, type='cp', cote='ori'
+                            )
+                        )
+                        ori_cpk_gauge = gr.Plot(
+                            self.gauge(
+                                df=df, type='cpk', cote='ori'
+                            )
+                        )
             with gr.Column(scale=2):
                 gr.Markdown("### `Control card`")
                 with gr.Row(height=400):
-                    control_plot = gr.Plot(self.control_graph(df=df))
-
+                    control_plot = gr.Plot(
+                        self.control_graph(
+                            df=df
+                        )
+                    )
             self.plots = [
                 pos_normal_plot, pos_cp_gauge, pos_cpk_gauge,
                 ori_normal_plot, ori_cp_gauge, ori_cpk_gauge,
                 control_plot
             ]
-            return self.plots
+            return self.plots
+
+    def refresh(self, df):
+        return [
+            self.normal_curve(df, cote='pos'),
+            self.gauge(df, type='cp', cote='pos'),
+            self.gauge(df, type='cpk', cote='pos'),
+            self.normal_curve(df, cote='ori'),
+            self.gauge(df, type='cp', cote='ori'),
+            self.gauge(df, type='cpk', cote='ori'),
+            self.control_graph(df),
+        ]