It’s time to understand how to analyze the earnings of the various posts. So I’m going back to the first article of this series, but focusing on the postAmounts property. For the moment I am interested in focusing only on a few values:

  • totalAmountPaidToDate, all that the story has earned
  • amount, the earnings in the current month
  • post.id, the identifying ID of the story
  • firstPublishedAt, the date of the first publication (for the moment I decide to ignore the date of the last modification)
  • post.title, the title of the story
  • post.virtuals.wordCount, the number of words in the post
  • post.virtuals.readingTime, the estimated reading time
  • post.homeCollectionId, the ID of the publication hosting the story

Show story data

First I load the data into the page. To do this I use the loadDashboardJSON() function

I need to add a specific function to load each post’s data into a separate object. I create the getListStories() function:

There is a problem with this way of saving firstPublishedAt: it could create complications when I want to filter and sort the different posts. To avoid this, I break down the date into several parts. I modify getDate() by adding the Date.prototype.getDate() method:

And accordingly I correct getListStories():

I modify the Load dashboard.json button to save everything in the listStories array:

Now that I have my data, how to show them?

Create a table with CSS Grid

I decided to create a table using the CSS Grid Layout. During the first draft of this piece I wrote a long explanation on how to do it. But it is long and off topic. However, I have created a guide with my notes on how to create a table using CSS Grid Layout. You can read it here:

So, now I have an array with the stats of my stories. I need a second array containing the information about the columns:

I add the Table component to my page:

It is convenient to display the total of the columns: I use the props totals. First I define a function that calculates the sum of the various values:

Then I edit the App.svelte file:

And here is the table with the statistics of the various articles.

Add sort functions

Another useful thing is the ability to sort the stories by date, title, earnings and word count. To do this I use a context menu and the ordersTable variable;

I edit the HTML part

And I get a list similar to this:

table-css-grid-01.gif

Add a bar chart

The list is not enough. I want to add something graphic to have a better eye view. I then add a bar chart in my table.

Basically I want to use the widest column as an area to draw my bar graphs. First I define which columns can become the source of the graph:

Then I add the corresponding props

And finally I get the list with the earnings of the various posts:

table-css-grid-02.gif

Let’s make a summary

Every day I fill in by hand, in excel, a scheme similar to this:

As long as I have a few articles it’s simple. But if I continue to write on Medium it is foreseeable that the matter will get complicated. This is why I want to make the collection and analysis of Medium’s statistics as automatic as possible.

I can start by creating a simplified version of this summary. The simplest version is for the current month. But first a clarification.

As I already explained in the first article of this series, I am using TypeScript. Or rather, so far I’ve only used JavaScript. But from now on, things get complicated. So, to make development easier, I start introducing some types. And the first concerns the data I need to create the summary:

Then I create the component. Or, better, I start by creating a very simplified version:

I import the component into App.svelte:

Obviously I don’t get anything because I haven’t created the functions to extract the data. The simplest thing to calculate is the number of articles published and their earnings:

It’s just as quick to figure out which is the story with the most earnings in the month:

Things get a little more complicated when I have to divide the data for the stories of the current month and those of the previous months.

There are various ways to do this. Perhaps the smartest one is to use another json file. I can download the stats.json file and extract the firstPublishedAtBucket property from there. But that’s not what I’m going to do, not now. Later I will use this new file to get more data: views, reads, claps and fans.

Today I just use what I already have. So how do I divide the various posts by month and year of publication?

When I created the StoryAmountStats interface I also saved the firstPublishedAt property of type CustomDateTime:

Well, that’s all I need to get started.

How do I understand which month we are in? I can calculate the system date with Date.now(). Then I extract the number of the month and year and use it as a filter.

To calculate the data of the previous articles I can make a subtraction. Or I can create a function. I think a specific function is more suitable, also because I will need it later:

Now I just have to put it all together:

After adding a few CSS styles I finally get a summary of the month:

Where are we

I’ll stop here for today. There are still some problems to be solved. And especially the one that started all this: how can I view the same data but for several months in a row? I’ll talk about this in a future post.

So far we have created a page that shows the overall performance of the various months, the performance of the individual stories and a brief summary of the current month:

medium-stats-01.gif

As for the first part of this article, you can read it here:

On Medium there is a list with my posts on Svelte and SvelteKit:

This is the repository with the code:

Obviously it’s still a work in progress, so there are still some functions to fix and some code to clean up.