ingressu.com

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.

Share the page:

Twitter Facebook Reddit LinkIn

-----------------------

Recent Post:

Harnessing Volcanoes: A New Era in Sustainable Urban Development

Exploring how engineers aim to utilize volcanic lava for sustainable city construction amid rising costs and environmental challenges.

Exploring Graph Representation Learning: Techniques and Applications

A comprehensive look at graph representation learning, its techniques, and applications in machine learning.

Navigating Life's Lessons: A Journey of Mistakes and Kindness

A heartfelt story of an RV's misadventures and lessons learned about mistakes, kindness, and the importance of communication.

Unlocking Wealth: Three Habits to Adopt for Financial Success

Explore three key habits of wealthy individuals that can help you break free from poverty and achieve financial independence.

Preparing for the New Year: Unconventional Ways to Reset

Discover unique strategies for preparing for the New Year and cultivating a fresh mindset, including decluttering and self-care.

Exploring the Value of Human Stories in Understanding Ourselves

This piece delves into the significance of human stories and their role in understanding various cultures and ourselves.

# Discovering the Secrets of Spinosaurus: The Aquatic Dinosaur

Recent discoveries reveal Spinosaurus as a semi-aquatic dinosaur, challenging long-held beliefs about its habitat and behavior.

Beyond Calcium: Five Essential Minerals for Optimal Health

Explore five essential minerals beyond calcium that are crucial for health and learn how to incorporate them into your diet.