[Earnings website (open source) Note 3] Front-end Web page

The main front-end uses: React-TS, ANTD, G2, mobx

I. Project structure

Index. TSX, set two route home page, PK page; They are preceded by PK preview pages as jumps

1. Home page (ReportMain.tsx)

You can choose the listed company that you want to view the results of. Report type and report time. The first one is selected by default. The process is as follows:

There are two necessary data for this site: one is the basic data of all listed companies, and the corresponding relation table between column field name and Chinese in the three major report databases.

(1) Open reportLogic.ts to download the two configuration tables (the configuration table is generated by Python script, details refer to “[earnings website (open source) note A] Python obtain a-share listed companies’ financial statements and write into the database”)

(2) After downloading, the data is analyzed and saved to stockInfoStore (Mobx). Since the home page (ReportMain.tsx) has @Observer, when the control class saves the data to stockInfoStore, the interface will be automatically updated and the first listed company ping An Bank will be selected as the default.

(3) The listed company selected by default is only basic data. If there is no detailed data of this company in stockInfoStore, detailed data of this stock will be requested. Get detailed data, just showed this home stock completely.

PS: For the definition of basic data and detailed data, see “[Earnings Website (Open Source) Notes II] Server (Springboot)” to obtain detailed information of listed companies

The [Get] button requests the selected data to the server. [Add Comparison] The current company can be added to the comparison column. Select more than two stocks, you can enter the PK preview page.

If you have obtained multiple quarterly reports, double-click any line to display the quarterly reports.

PK preview page

You can reduce the selected comparison companies or enter the PK page.

There is no server interface on this page. Click the “Add Comparison” button on the home page and add it to pkStore after a round of judgment. Mobx triggers interface updates. Red dot reminder, the interface will be updated at the same time. Click the “X” button on the preview page to delete it from pkStore and mobx automatically refreshes the screen.

On page 3, PK

Enter the PK page through the preview page, select report and report time, and click the “Get” button to get the corresponding PK data.

4. Expanded Functions:

(1) To open the PK page, login is required. Even account levels.

(2) THE PK page can also be double-clicked to show the graphs of several companies.