Stretch: three features, worked through

7.1 Compare tickers

Overview. Put two to four companies on one chart to see which moved more over the same dates. Drawing their prices side by side does not work: a stock at Rp 9.000 and one at Rp 300 sit so far apart that the small one looks flat. So every line starts at 100 on the first day, and each later day shows the price as a share of that first price. A stock that goes from Rp 5.000 to Rp 5.500 ends at 110: up 10%. Now the lines are easy to compare, whatever their price. The data is the same get_daily_prices you already use, once per ticker, so comparing three tickers costs three Sectors credits.

Plan.Do it in a New Chat in Ask mode, send:

#app.py #sectors.py I want a “Compare” section at the bottom of my app.

Frontend: a box where I pick two to four IDX tickers, starting with BBCA and TLKM; one line chart with one coloured line per ticker and a legend; a heading, “Compare: every line starts at 100”.

Backend: for each ticker, divide every closing price by its first closing price and multiply by 100.

Data: get_daily_prices from sectors.py for each ticker, with the dates from my sidebar. Cache it like my other data.

If I pick fewer than two tickers, show a short message instead of the chart. Keep everything else as it is. Tell me the plan and how many Sectors requests it makes. Don’t write code yet.

Implement. Switch to Agent: Build exactly the plan above. Change only app.py. Click Keep, then Rerun.

Test.

• Every line starts at exactly 100 on the first day
• Check one line by hand: type that ticker in the main box, hover over the first and last points of its price chart, divide the last close by the first close and multiply by 100; the end of its Compare line must match
• With one ticker picked, you see the message, not an error
• The rest of the app works as before

Repeat. One idea for a second loop: “Under the chart, add a small table with each ticker’s change over the period in percent, biggest first.”

7.2 Financials tab

Overview. Prices tell you what the market thinks a company is worth; financials tell you how the business itself is doing. Two yearly numbers are a good start: revenue, the money the company takes in, and earnings, the profit left after costs and tax. To keep the main page tidy, they go in a second tab. The helper get_company_financials gives you the financials section of the Sectors company report for one credit. Inside it, historical_financials is a list with one entry per year, and each entry has year, revenue and earnings, plus many other fields you do not need now. Not every company reports every field (banks, for example, have no gross_profit), so some values can be empty.

Plan.Do it in a New Chat in Ask mode, send:

#app.py #sectors.py I want to split my app into two tabs.

Frontend: a “Price” tab with everything my app has now, and a “Financials” tab with a bar chart of revenue and earnings by year, in trillions of rupiah, and under it a small table with the same numbers.

Data: use get_company_financials from sectors.py for the ticker in the text box. The yearly numbers are in the list historical_financials; each item has year, revenue and earnings. Some values can be empty: leave those years out instead of crashing. Cache it like my other data.

If the ticker is not found, show the same friendly message as the Price tab. Tell me the plan. Don’t write code yet.

Implement. Switch to Agent: Build exactly the plan above. Change only app.py. Click Keep, then Rerun.

Test.

• Two tabs; the Price tab looks exactly as before
• For BBCA, 2025 shows revenue of about Rp 112.0 T and earnings of about Rp 57.5 T (Sectors data at the time of writing; newer years may be added)
• TLKM redraws both tabs; XXXX gives the friendly message in both

Repeat. One idea for a second loop: “Add a line under the table with the profit margin for the latest year: earnings divided by revenue, as a percent.” Check it by hand: for BBCA in 2025, 57.5 ÷ 112.0 is about 51.4%.

7.3 Your own layout: style it from a template

Overview. Describing a look in words (“modern, dark, a bit of pink”) leaves Copilot to guess. It is much easier to show it an example to copy: a template. The starter kit has one, style_reference_1.html, a design sheet for financial data apps. It uses:

Streamlit does not run an HTML file, so you do not paste the template into your app. Copilot borrows its look: the colours and fonts go into Streamlit’s theme file, .streamlit/config.toml, and a small block of CSS (the styling language of web pages) handles what the theme cannot, such as the card borders. Any template works the same way: save an HTML page whose look you like into your project folder and attach it instead.

Look first.Do it double-click style_reference_1.html in your file manager to open it in your browser. Match its building blocks to your app: your metric cards are BigNumbers, your company information is a FactsCard, and your price chart is a Chart.

Plan.Do it in a New Chat in Ask mode, send:

#app.py #style_reference_1.html I want my app to look like this style reference.

First, tell me in plain words the colours, fonts and card style it uses.

Then plan how to give my Streamlit app that look: put the theme colours and fonts in .streamlit/config.toml, and use a small CSS block in app.py only for what the theme can’t do. Style my metric cards like BigNumber and my company information like FactsCard; show gains in green and losses in red.

Change only how the app looks, not what it does or calculates. Don’t copy the HTML page into my app. Tell me the plan and which files you will create or change. Don’t write code yet.

Implement. Switch to Agent: Build exactly the plan above. Change only app.py, and create .streamlit/config.toml. Click Keep. Then stop the app with Ctrl+C and start it again with streamlit run app.py, so Streamlit reads the new theme file.

Test.

• The dark background, the pink and gold highlights and the two fonts look like the template
• Every number is the same as before you restyled: the 0% check from 4.4 still gives Rp 120.000.000, and the last close is the same as before
• All text is easy to read; make the browser window narrow, like a phone, and check again

Repeat. One idea for a second loop: “Make the app title use the pink-to-gold gradient, like the headings in the template.” The theme file is safe to commit and goes online with your app in Module 9; only .streamlit/secrets.toml is kept out by .gitignore.