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
IDof 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
I need to add a specific function to load each post’s data into a separate object. I create the
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
I modify the
Load dashboard.json button to save everything in the
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
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
I edit the HTML part
And I get a list similar to this:
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:
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.
Then I create the component. Or, better, I start by creating a very simplified version:
I import the component into
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:
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
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:
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.