Upload 3 files

.streamlit/config.toml

@@ -1,6 +1,4 @@
 [theme]
 primaryColor="#00a3e0"
-backgroundColor="#FAFAFA"
 secondaryBackgroundColor="#F0F2F6"
-textColor="#262730"
 font="sans serif"

ledesma_clean.py

@@ -1,19 +1,16 @@
 import streamlit as st
 import pandas as pd
-import csv
+import matplotlib.pyplot as plt
 
 st.image("images/ledesma-logo.png")
 st.title('Demo monitoreo de precios')
-st.markdown("*Creado para Ledesma*.")
-st.write("Creamos este sistema para que puedas monitorear **activamente** los precios de tus productos y los de la competencia a lo largo del pais")
 st.divider()
-st.write("Para los propositos de esta demo, hemos seleccionado un producto de ledesma, con tres presentaciones distintas, y sus respectivos competidores dentro de la misma gama de productos")
 
-st.header("Sucursales:")
+st.subheader("Sucursales:")
 st.write("Seleccionamos arbitrariamente algunas regiones del pais, e incluimos algunas cadenas de supermercados en cada una de ellas")
 
 df = pd.read_csv("products.csv")
-
+df_historic = pd.read_csv("historico_precios.csv")
 
 product_stores = pd.read_csv("Store-Products.csv")
 stores = pd.read_csv("sucursales.csv")
@@ -56,7 +53,9 @@ st.map(selected_provinces,latitude='lat', longitude='lng')
 
 st.divider()
 
-st.image("images/ledesma50u.png")
+st.subheader("Producto elegido:")
+st.write("Endulzante Stevia en Sobres Ledesma 50 Un")
+st.image("images/ledesma50u.png", width=250)
 
 store_codes = selected_provinces['sucursalId'].tolist()
 # Seleccion de productos por provincia
@@ -68,8 +67,176 @@ product_stores_filtered = pd.merge(product_stores_filtered, stores, on='sucursal
 
 #filtrado de vuelta porque aparentemente las referencias de los storesids estan repetidas entre tiendas de distintas provincias
 product_stores_filtered = product_stores_filtered[product_stores_filtered['provincia'].isin(province_codes)]
-st.write(product_stores_filtered)
+#st.write(product_stores_filtered)
+st.divider()
+st.subheader("Comparacion de precios")
+
+st.bar_chart(product_stores_filtered,x='provincia_nombre',y='precio_lista', color='nombre_producto', stack=False, y_label='Precio', x_label='Provincia', horizontal=False, height=500)
+st.divider()
+st.subheader("Historico de variacion de precios de ledesma y competencia")
+
+
+
+# Convertir el string CSV en un DataFrame
+
+df = pd.read_csv("historico_precios.csv")
+
+# Convertir la columna 'fecha' a tipo datetime
+df['fecha'] = pd.to_datetime(df['fecha'], format='%d-%m-%Y')
+
+# Colores específicos
+highlight_product = "Endulzante Stevia en Sobres Ledesma 50 Un"
+highlight_color = '#1f77b4'  # Azul
+# Colores personalizados para los productos secundarios
+secondary_colors = ['#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22']
 
-st.header("Comparacion de precios")
+# Establecer un estilo más moderno
+plt.style.use('fast')
 
-st.bar_chart(product_stores_filtered,x='provincia_nombre',y='precio_lista',color='nombre_producto', stack=False)
+# Crear el gráfico de líneas
+fig, ax = plt.subplots(figsize=(10, 6))
+
+
+# Dibujar todas las líneas con colores distintos
+for i, producto in enumerate(df['producto'].unique()):
+    if producto != highlight_product:
+        subset = df[df['producto'] == producto]
+        ax.plot(subset['fecha'], subset['precio'], label=producto, color=secondary_colors[i % len(secondary_colors)], alpha=0.5)
+
+# Dibujar la línea del producto principal al final
+subset = df[df['producto'] == highlight_product]
+ax.plot(subset['fecha'], subset['precio'], marker='o', label=highlight_product, color=highlight_color, linewidth=3)
+
+# Mejorar la visualización
+ax.set_ylabel('Precio', fontsize=14)
+#ax.set_title('Precio de Productos a lo Largo del Tiempo', fontsize=16)
+
+# Colocar la leyenda abajo del área del gráfico
+ax.legend(loc='upper center', bbox_to_anchor=(0.5, 1.20), fontsize=10, ncol=2)
+# Ajustar los ticks del eje x para mostrar todas las fechas
+ax.set_xticks(df['fecha'])
+ax.set_xticklabels(df['fecha'].dt.strftime('%d-%m-%Y'), rotation=45, ha='right')
+
+# Ajustar el diseño para que la leyenda no se corte
+plt.tight_layout()
+ax.grid(True, linestyle='--', color='gray', alpha=0.17)
+
+# Mostrar el gráfico en Streamlit
+st.pyplot(fig)
+
+st.divider()
+import streamlit.components.v1 as components
+components.html("""
+            <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Monitoreo de Precios</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+        }
+        .container {
+            background-color: white;
+
+            margin: auto;
+        }
+        .product-image {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .product-image img {
+            width: 150px;
+        }
+        .price-current {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .table-container {
+            margin-top: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        table th, table td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+        table th {
+            background-color: #f9f9f9;
+        }
+        .price-up {
+            color: red;
+            font-weight: bold;
+        }
+        .price-down {
+            color: green;
+            font-weight: bold;
+        }
+        .available {
+            color: green;
+        }
+        .not-available {
+            color: rgb(255, 0, 0);
+        }
+        .store-logo {
+            width: 24px;
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="product-image">
+            <div>
+                <h2>Monitoreo de Precios de Azucar ledesma 1 kg</h2>
+                <p class="price-current">Precio actual: $970,00</p>
+            </div>
+            <img src="	https://huggingface.co/spaces/GianJSX/precios-demo/resolve/main/images/azucar-logo.png" alt="Scooter">
+        </div>
+
+        <div class="table-container">
+            <h3>Comparativa de precios</h3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Tienda</th>
+                        <th>Precio</th>
+                        <th>Cambio (%)</th>
+                        <th>Stock</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="	https://huggingface.co/spaces/GianJSX/precios-demo/resolve/main/images/carrefour-Logo.png" alt="Carrefour" class="store-logo"> Carrefour</td>
+                        <td>$1100</td>
+                        <td class="price-up">+13.4%</td>
+                        <td class="available">Disponible</td>
+                    </tr>
+                    <tr>
+                        <td><img src="	https://huggingface.co/spaces/GianJSX/precios-demo/resolve/main/images/disco.png" alt="Disco" class="store-logo">Disco</td>
+                        <td>$950</td>
+                        <td class="price-down">-2.7%</td>
+                        <td class="not-available">No disponible</td>
+
+                    </tr>
+                    <tr>
+                        <td><img src="	https://huggingface.co/spaces/GianJSX/precios-demo/resolve/main/images/vea.png" alt="Vea" class="store-logo">Vea</td>
+                        <td>$1050</td>
+                        <td class="price-up">+8.2%</td>
+                        <td class="available">Disponible</td>
+
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</body>
+            
+            """
+            ,  height=600)