Analyzing Medium Stats with JavaScript and Svelte
Written on
Chapter 1 Understanding Post Earnings
In this chapter, we delve into the analysis of earnings from various posts on Medium. Referring back to the initial article in this series, we will concentrate on the postAmounts property. At this stage, my primary focus is on a few key values:
- totalAmountPaidToDate: Total earnings accumulated so far.
- amount: Earnings from the specific story.
- post.id: The unique identifier of the post.
- firstPublishedAt: The original publication date (for now, I will set aside the last modified date).
- post.title: The title of the post.
- post.virtuals.wordCount: The total word count of the post.
- post.virtuals.readingTime: The estimated time required to read the post.
- post.homeCollectionId: The ID of the publication hosting the story.
To start, I will load the necessary data onto the page using the loadDashboardJSON() function. Furthermore, I need to create a distinct function to load each post's data into separate objects, which I will implement as the getListStories() function.
However, a challenge arises with the handling of firstPublishedAt, as it could complicate the filtering and sorting of posts. To mitigate this, I will break down the date into several components by enhancing the getDate() method with Date.prototype.getDate():
Subsequently, I will adjust the getListStories() function accordingly. To store all data in the listStories array, I will modify the Load dashboard.json button.
Now that the data is available, the next step is to display it effectively.
Section 1.1 Creating a CSS Grid Table
I have decided to utilize the CSS Grid Layout for creating a table. Initially, I penned an extensive explanation about this, but it turned out to be lengthy and somewhat off-topic. Instead, I compiled a concise guide on constructing a table using CSS Grid, which can be accessed here:
With an array of story statistics ready, I now need a second array for the column information. I will integrate the Table component into my page, which will facilitate the display of column totals using the totals prop. First, I will define a function to compute the sums of the various values and then update the App.svelte file accordingly.
After these adjustments, I will end up with a comprehensive table illustrating the statistics of different articles.
Subsection 1.1.1 Adding Sort Functions
To enhance usability, I will implement sorting functions for the stories based on date, title, earnings, and word count. This will involve using a context menu in conjunction with the ordersTable variable. I will revise the HTML structure accordingly to achieve a list similar to this:
Section 1.2 Incorporating a Bar Chart
A simple list isn't enough; I want to incorporate visual elements for better clarity. Therefore, I will add a bar chart to my table. The goal is to use the widest column as a canvas for these bar graphs. I will determine which columns can serve as the data source for the graph and add the relevant props. Finally, I will compile a list showcasing the earnings from various posts.
Chapter 2 Automating Statistics Collection
Every day, I manually update a spreadsheet that resembles this structure. While this method works for a small number of articles, it becomes cumbersome as I continue writing on Medium. Therefore, I aim to automate the collection and analysis of Medium's statistics.
I will begin with a simplified summary for the current month. For clarity, I have been using TypeScript, but until now, I have primarily employed JavaScript. Moving forward, I will introduce types to facilitate development, starting with the data types needed for the summary.
Then, I will create the component, beginning with a basic version. Once the component is set up, I will import it into App.svelte. Naturally, I won’t see any output yet, as the functions to extract the necessary data are still missing. The first computations will involve determining the number of published articles and their respective earnings.
Next, I will quickly identify which story generated the highest earnings for the month. The process becomes slightly more complex when I need to separate data for current and previous months.
There are various methods to tackle this. A potentially efficient approach would be to utilize another JSON file. I could download the stats.json file and extract the firstPublishedAtBucket property from it, but for now, I will rely on the data I already possess.
To distinguish posts by month and year of publication, I saved the firstPublishedAt property as CustomDateTime in the StoryAmountStats interface. This provides all the necessary tools to get started.
To identify the current month, I can calculate the system date using Date.now(), extract the month and year, and apply them as filters. For previous articles, I can perform a subtraction or create a function for this purpose; a dedicated function seems more appropriate, as I will need it later.
Finally, I will integrate all these components, and after applying some CSS styling, I will obtain a monthly summary.
Where Do We Stand?
I will pause here for today, as there are still unresolved issues, particularly the initial question: how can I visualize the same data across multiple months? This topic will be covered in a future article.
So far, we have developed a page that showcases the overall performance of various months, the performance of individual stories, and a brief summary of the current month.
For further reading on the first part of this article, click here:
To access the code repository, click here:
Keep in mind that this project is a work in progress, meaning some functions still require refinement and some code needs cleaning.
Thank you for your attention! Stay tuned for more updates. Don't forget to subscribe to my Medium email list for my next article.
In this video, we explore how to create a weather application using JavaScript without requiring a server, offering insights on key techniques and strategies.
This video demonstrates building a COVID-19 dashboard using Vue.js and Chart.js, highlighting practical implementation details.