🧐 Cracking the code for a better Visualization – any ideas?

[Klu1d]

Question

Hello, everyone! 👋

I'm exploring ways to build a Gantt chart using Flet, and I’d love to hear your thoughts!

I’ve attached some code that I tried, but honestly, it feels a bit clunky and not quite suitable for crafting a smooth, dynamic chart. I’m looking for a more elegant and efficient approach.

If you have any ideas, best practices, or even just wild experiments—I'd love to see them!

Looking forward to your insights. Thanks in advance!

Code sample

import flet as ft
import datetime


face_location_data = {
    "Suzana": ["2025-03-07_21:00", "2025-03-07_21:01", "2025-03-07_21:09"],
    "Deni": ["2025-03-07_21:00", "2025-03-07_21:18", "2025-03-07_21:30"],
    "Ismail": ["2025-03-07_21:02", "2025-03-07_21:11", "2025-03-07_21:17"],
    "Fedor": ["2025-03-07_21:03", "2025-03-07_21:04", "2025-03-07_21:36"],
    "Alex": ["2025-03-07_21:34", "2025-03-07_21:55"],
}


def parse_time(timestamp):
    try:
        
        return datetime.datetime.strptime(timestamp, "%Y-%m-%d_%H:%M")
    except ValueError:
        
        parts = timestamp.split(" ")
        if len(parts) == 2:
            
            current_date = datetime.datetime.now().strftime("%Y-%m-%d")
            timestamp = current_date + "_" + parts[1]
            return datetime.datetime.strptime(timestamp, "%Y-%m-%d_%H:%M")
        else:
            raise ValueError(f"miss: {timestamp}")

data = []
for person, timestamps in face_location_data.items():
    for ts in timestamps:
        try:
            time = parse_time(ts)
            data.append({"Person": person, "Time": time})
        except ValueError as e:
            print(f"miss {person}: {e}")


def main(page: ft.Page):
    min_time = min([entry["Time"] for entry in data])
    max_time = max([entry["Time"] for entry in data])
    width = 800
    height = 600
    people = list(face_location_data.keys())
    time_slot_height = height / len(people)
    time_range = (max_time - min_time).total_seconds() / 60  

    elements = ft.Stack()
    for i, person in enumerate(people):
        person_y = i * time_slot_height
        for timestamp in face_location_data[person]:
            try:
                time = parse_time(timestamp)
                time_x = (time - min_time).total_seconds() / 60 / time_range * width  
                elements.controls.append(ft.Container(
                    content=ft.Text(time.strftime('%H:%M'), selectable=True),
                    left=time_x, top=person_y, padding=2.5,
                    bgcolor=ft.colors.BLUE,
                    border_radius=5
                ))
            except ValueError:
                print(f"miss: {timestamp}")

    page.add(elements)

ft.app(target=main)

### Error message

_No response_

### ------------------------------------------------------

- [X] I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

There seems to be a flutter package for ganttt charts: https://pub.dev/packages/gantt_chart
Will do a yt-live in the coming days to share how you can build Flet extensions.

[ap4499]

I think, the key reason that your code feels, in your words, clunky is:

• You have GUI logic mixed in with business logic.
• You have used a lot of imperative approaches to creating your GUI.
• There is no encapsulation. This, and point 2, will make it difficult to reference or manage objects down the line.

In addition:

• You don't have modular easy to manage blocks, such as one would have with a class.

If I were to suggest a way to fix the above:

1. Use classes. I am perhaps one of those people who ascribes to "If in doubt, use a class, else, probably use a class" - but it makes code much more manageable. Even if I have a function that is multi step and a little involved, I will tie together methods to split out the logic. Again, it is personal preference - but I only use functions if I have and know a good reason for using one.

2. I would pick a UI framework. Personally, I like MVP (Model View Presenter) - many here, and particularly Flutter devs, will recommend many others. But if you are just getting to grips with GUIs, I would pick either MVP or MVC (Model View Controller). Personally, I find that MVC often gets out of control, and so prefer MVP - but either will help you improve from the above.

3. Bringing points 1 and 2 together, be really strict with Separation of Concerns. Avoid "God" classes (monstrous beasts of many methods), and make sure that each class, or block, has a specific purpose - it is easy for each to spiral. Your business logic / model doesn't have to be a single class, and often, is just a very simple entry point into what could be a complex bit of code.

Again, there are heaps of my own biases in here - but hopefully it's helpful.