PyCafe - Vizro - Flexible Data Grid with Vizro

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

import pandas as pd
import numpy as np
import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm
from vizro.tables import dash_ag_grid

# Create a fake dataset with many columns and longer values
np.random.seed(42)

# Generate data with many columns
n_rows = 50
n_cols = 25

# Create column names that are long enough to get truncated
column_names = [
    "Very_Long_Column_Name_1", "Extended_Data_Field_2", "Comprehensive_Metric_3",
    "Detailed_Information_4", "Complex_Calculation_5", "Advanced_Analytics_6",
    "Business_Intelligence_7", "Performance_Indicator_8", "Statistical_Measure_9",
    "Quantitative_Analysis_10", "Operational_Efficiency_11", "Customer_Satisfaction_12",
    "Revenue_Generation_13", "Cost_Optimization_14", "Quality_Assessment_15",
    "Risk_Management_16", "Strategic_Planning_17", "Market_Research_18",
    "Product_Development_19", "Sales_Performance_20", "Marketing_Campaign_21",
    "Financial_Reporting_22", "Compliance_Monitoring_23", "Sustainability_Index_24",
    "Innovation_Score_25"
]

# Generate data with longer values that could get truncated
data = {}
for i, col in enumerate(column_names):
    if i % 5 == 0:  # String columns with long values
        data[col] = [f"Long_Text_Value_{j}_{np.random.randint(1000, 9999)}" for j in range(n_rows)]
    elif i % 5 == 1:  # Float columns with many decimal places
        data[col] = np.round(np.random.uniform(1000, 9999, n_rows), 4)
    elif i % 5 == 2:  # Integer columns with large numbers
        data[col] = np.random.randint(10000, 99999, n_rows)
    elif i % 5 == 3:  # Categorical data with long category names
        categories = ["Category_A_Very_Long_Name", "Category_B_Extended_Label", 
                     "Category_C_Comprehensive_Description", "Category_D_Detailed_Classification"]
        data[col] = np.random.choice(categories, n_rows)
    else:  # Mixed data types
        data[col] = [f"Data_{j}_{np.random.randint(100, 999)}_{np.random.choice(['Alpha', 'Beta', 'Gamma'])}" 
                    for j in range(n_rows)]

# Create DataFrame
tips = pd.DataFrame(data)

page = vm.Page(
    title="Flex - row - aggrid",
    components=[
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="View Data",
                    components=[
                        vm.AgGrid(figure=dash_ag_grid(tips,
                        # BUG: None of these options work anymore.
                     #   dashGridOptions={"columnSize": "sizeColumnsToFit"},
                     ))
                    ]
                )
            ]
        )
    ]
)

dashboard = vm.Dashboard(pages=[page])


Vizro().build(dashboard).run()
Py.Cafe

vizro-flexible-data-grid

Flexible Data Grid with Vizro
