Untuk sumbangan ketiga saya kepada sumber terbuka, saya mengusahakan projek ghostfolio, yang merupakan suite pengurusan portfolio pelaburan.

[Ciri] Sediakan petua alat dalam komponen carta peta pokok #3808

dtslvr disiarkan pada 22 Sep 2024

Matlamat isu ini adalah untuk menyediakan petua alat dalam komponen carta peta pokok yang berdasarkan carta.js.

• Lepaskan [baseCurrency]="user?.settings?.baseCurrency" ke dalam pegangan rumah.html
• Petua alat harus memaparkan valueInBaseCurrency daripada pegangan jika tersedia bersama-sama mata wang pengguna (baseCurrency)
• Cuba gunakan getTooltipOptions() untuk gaya

Lihat di GitHub

Semasa mencari isu terbuka untuk diselesaikan di GitHub, saya terjumpa isu ini. Saya telah mahu meningkatkan permainan saya dan mengusahakan ciri kali ini, jadi saya memutuskan ini akan menjadi isu yang baik untuk dicuba dan diselesaikan. Saya mendaftar untuknya tanpa melihatnya terlalu banyak. Saya kemudiannya melihat ia adalah isu Angular, yang seterusnya menarik minat saya kerana saya ingin tahu tentang pembelajaran Angular.

Walaupun saya mendaftar untuk itu, saya tidak dapat mengerjakannya buat seketika - tugasan sekolah dan kehidupan menjadi halangan. Seminggu berlalu, dan saya memutuskan untuk mula bekerja, jadi saya mula membaca dokumen penyumbang, dan melihat mereka menggunakan Docker. Saya fikir "sempurna, kursus saya yang lain mengajar Docker minggu ini, jadi saya sudah bersedia". Saya bercabang dan mengklon repo dan cuba memasang kebergantungan dan serta-merta menghadapi masalah - ada kaitan dengan konflik kebergantungan rakan sebaya. Apl tidak akan dimulakan walaupun saya telah mengikut arahan. Ini membuatkan saya takut untuk mengerjakannya selama seminggu lagi.

Apabila saya mencuba sekali lagi, saya mengklon garpu saya sekali lagi dan mendapatkan apl untuk dibina kali ini, tetapi beberapa ujian gagal sebelum saya mula. Saya berfikir untuk menghubungi dalam Slack projek untuk bertanya sama ada ia hanya di tangan saya, dan penyelenggara menjawab dengan mengatakan binaan dalam CI telah berlalu. Sekali lagi, saya takut untuk bekerja pada projek itu.

Akhirnya, penyelenggara mengulas mengenai isu meminta kemas kini. Saya memutuskan bahawa saya tidak boleh menangguhkannya lagi dan bersiap sedia untuk berbelanja baik sambil cuba menyelesaikannya.

Saya membuat perubahan dari hulu dan mengklon garpu saya sekali lagi, tetapi ujian masih gagal. Apabila memulakan apl, pelayan akan log amaran mengatakan beberapa import gagal, jadi saya memutuskan untuk menyemaknya. Projek ini menggunakan teknologi untuk menguruskan monorepo yang dipanggil Nx, dan isu itu kelihatan berkaitan, jadi saya meluangkan sedikit masa untuk melihat apa yang dilakukannya. Mereka juga menggunakan sesuatu yang dipanggil Buku Cerita, yang mereka sebutkan cara memulakan dalam dokumen penyumbang, tetapi tidak peduli untuk menjelaskan perkara itu. Saya memutuskan untuk menyemaknya dan mendapati ia adalah untuk membangunkan komponen dengan menjadikannya secara berasingan. Apabila saya memulakan Buku Cerita, ia juga tidak akan berfungsi dan akan memberi saya ralat import. Saya meluangkan sedikit masa untuk mencuba menyahpepijat isu import, tetapi kemudian menyedari bahawa saya boleh menyelesaikan isu saya tanpa berurusan dengannya, jadi saya memutuskan untuk mengabaikannya dan mula bekerja.

Saya mengambil sedikit masa untuk memikirkan perkara yang sepatutnya saya lakukan dan apakah skop isu itu. Isu asal agak samar apabila difikirkan semula walaupun dilabelkan sebagai "isu pertama yang baik". Saya rasa projek yang berbeza mempunyai idea yang berbeza untuk perkara yang menjadikan isu pertama yang baik. Saya mulakan dengan melihat melalui fail untuk mencari komponen yang sepatutnya saya kerjakan.

Saya cuba mencari komponen carta yang sepatutnya saya kerjakan dalam UI, tetapi ia tidak kelihatan dalam komponen induknya. Saya meninggalkan komen bertanya kepada penyelenggara, tetapi kemudian mengetahuinya dengan segera. Saya melihat beberapa fungsi pemulaan dalam komponen carta dan ia adalah komponen induk, jadi saya menulis console.log(ini) di dalamnya untuk melihat perkara yang saya sedang kerjakan, dan ketika itulah saya menyedari bahawa komponen carta tidak diberikan. Saya telah menyemak tetapan dalam klien dan menemui togol ciri eksperimen, yang saya dapati dengan melihat templat HTML untuk komponen tersebut dan melihat bahawa ia tersembunyi di sebalik pernyataan bersyarat.

Selepas saya dapat melihat perkara yang sedang saya kerjakan, perkara menjadi lebih mudah. Projek ini menggunakan chart.js untuk carta mereka, jadi saya pergi ke dokumentasinya untuk melihat cara petua alat berfungsi. Memandangkan mereka mempunyai fungsi pembantu khusus untuk petua alat, saya terfikir sendiri "Baiklah, mari lihat cara mereka menggunakan petua alat dalam carta lain dalam apl". Saya mula melihat beberapa komponen lain yang menggunakan petua alat dan melihat persamaannya dengan komponen yang sedang saya kerjakan, iaitu cara mereka menyerahkan pilihan konfigurasi kepada petua alat dan sebagainya. Saya perhatikan bagaimana mereka menyediakan petua alat dalam komponen lain dan cuba menirunya, dan ia berjaya! Saya mempunyai petua alat yang berfungsi! Selepas dua minggu! ... Yang masih tidak menunjukkan data yang betul! Tetapi ia adalah kemajuan! Tiba-tiba, isu itu kelihatan lebih boleh dilakukan. Daripada takut dengan monorepo besar-besaran, saya dapat fokus pada perkara yang tepat yang perlu saya usahakan, dan itu sahaja yang perlu saya risaukan.

Saya bergelut sedikit lagi dengan mencuba untuk mengetahui cara menghantar data ke petua alat. Selepas melihat dengan lebih dekat cara komponen yang saya salin menghantar data ke petua alat, saya menyedari ia tidak akan berfungsi untuk komponen yang sedang saya kerjakan. Ia menerima dan memproses data dengan cara yang berbeza daripada saya, yang saya sedar apabila saya perasan ia berada dalam apl/klien/src/apl/komponen/, manakala komponen saya dalam libs/ui/src/lib. Saya menganggap komponen dalam bahagian monorepo yang sama sekali berbeza mungkin direka bentuk untuk berfungsi secara berbeza, jadi saya mencari komponen lain yang menggunakan petua alat, dan nasib baik, saya menemui satu dalam direktori yang sama dengan komponen saya.

Saya pada mulanya terpaksa mematikan keselamatan jenis untuk parameter fungsi yang saya tambahkan untuk mengkonfigurasi petua alat, kerana objek yang saya dapat pilihan daripada mempunyai sifat yang saya perlukan untuk mengakses yang tidak ditentukan untuk jenisnya. Saya akan bertanya kepada penyelenggara tentang perkara ini, tetapi apabila saya menemui komponen yang berfungsi lebih dekat dengan saya, saya menyedari bahawa saya tidak memerlukan sebarang parameter sama sekali. Daripada menentukan parameter, mereka menggunakan objek konteks yang dihantar secara automatik ke fungsi panggil balik label pada objek petua alat, jadi saya melakukan perkara yang sama. Walaupun saya tidak memerlukan parameter lagi, saya menghadapi masalah di mana pilihan konfigurasi lain akan menjadi tidak ditentukan apabila saya cuba mengalih keluar parameter. Pada mulanya saya tidak pasti apa yang sedang berlaku, tetapi ia mula berfungsi selepas beberapa ketika, jadi saya rasa pengkompil hanya ketinggalan di belakang perubahan saya (mungkin saya terlupa untuk menyimpan fail?)

Jadi saya dapat memasukkan data yang diperlukan ke dalam petua alat, tetapi saya masih perlu memformatkannya. Saya sekali lagi melihat kepada komponen lain untuk melihat bagaimana mereka melakukannya. Mereka menghantar nilai daripada objek konteks ke Number.toLocaleString() dan hasilnya ditunjukkan dalam petua alat, jadi saya melakukan perkara yang sama dan ia kelihatan bagus dan bersih, jadi PR saya sudah sedia.

Ciri/Sediakan petua alat dalam komponen carta peta pokok #3897

uday-rana disiarkan pada 09 Okt 2024

Membetulkan #3808.

Saya mendasarkan pelaksanaan saya daripada petua alat dalam portfolio-proportion-chart.component.ts. Sila beritahu saya jika anda mahukan sebarang perubahan.

Lihat di GitHub

Saya menandai PR saya sedia untuk semakan dan mendapat maklum balas tentang beberapa perubahan pemformatan. Ternyata saya harus menggunakan lebih banyak pemisah baris dalam kod saya kerana semuanya dilemahkan bersama, yang saya hanya perasan selepas penyelenggara menunjukkannya.

Saya membuat perubahan yang diminta tetapi tidak mendapat maklum balas selama beberapa hari yang membuatkan saya gementar. Nasib baik penyelenggara akhirnya menghubungi saya dan menggabungkan perubahan.

Lebih baik lagi, penyelenggara mengulas mengatakan terdapat isu susulan yang boleh saya selesaikan untuk menambahkan lebih banyak data pada petua alat. Memandangkan saya kini tahu cara projek itu disediakan, mengetahui lebih banyak tentang Angular dan petua alat dalam Chart.js, isu ini kelihatan lebih mudah berbanding ketika isu pertama. Sudah tentu, isu ini hanya mengambil masa satu jam atau lebih, dan selepas semakan, isu itu turut digabungkan.

[CIRI] Panjangkan petua alat dalam komponen carta peta pokok mengikut nama #3904

dtslvr disiarkan pada 10 Okt 2024

Matlamat isu ini adalah untuk memanjangkan petua alat dalam komponen carta peta pokok dengan menambahkan nama (atau simbol sebagai sandaran):

return [
  // `${name ?? symbol}`,
  // value or percentage as before
];

Dapatkan inspirasi daripada GfPortfolioProportionChartComponent.

Lihat di GitHub

Ciri/Perluas petua alat dalam komponen carta peta pokok mengikut nama #3907

uday-rana disiarkan pada 10 Okt 2024

Membetulkan #3904.

PR ini menambahkan nama (dan simbol sebagai sandaran) pada label untuk petua alat dalam GfTreemapChartComponent.

Anda juga boleh memaparkan nama/simbol sebagai petua alat tajuk sebaliknya jika lebih suka, tetapi GfPortfolioProportionChartComponent meletakkannya dalam label jadi saya memutuskan untuk memastikannya konsisten.

Lihat di GitHub

Mengatasi isu ini secara besar-besaran meningkatkan keyakinan saya untuk beralih ke kod yang tidak diketahui. Walaupun pada mulanya ia sangat tertekan, setelah saya memfokuskan pada perkara yang sebenarnya perlu saya lakukan, saya dapat menyelesaikan tugas saya, walaupun saya masuk dengan pengetahuan sifar tentang Angular, atau Nx, atau Chart.js.

Itu sahaja untuk siaran ini. Saya mempunyai satu lagi permintaan tarik untuk diusahakan untuk Hacktoberfest jadi harapkan untuk melihat catatan blog lain tidak lama lagi!

Atas ialah kandungan terperinci Melompat Ke Hujung Yang Dalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!