How did I generate chart for Ecency points distribution?

Gifting Points

• First of all, if you're not aware, I am sending out @ecency points daily to several #hive members on different communities.
• I gift-distribute 1000 points to 1500 points almost daily.
• I used to add threads & tweets but all manually.
• It was time consuming & it was repetitive, so I stopped.

Chart for Ecency Points Distribution

• Here is an example chart of Ecency points distribution
• Thread - @sagarkothari88/re-leothreads-wqd43zab
• /@sagarkothari88/re-leothreads-wqd43zab

Step by Step - deep dive on how I generated above chart

Step 1. Setup DHive

• Get instance of dhive
• Configure it

var dhive = require("@hiveio/dhive");
var client = new dhive.Client([
  "https://api.hive.blog",
  "https://api.deathwing.me",
  "https://hive-api.arcange.eu",
  "https://hived.emre.sh",
  "https://api.openhive.network",
  "https://rpc.ausbit.dev",
  "https://rpc.mahdiyari.info",
  "https://hive-api.3speak.tv",
  "https://techcoderx.com",
]);

Step 2. Load recent comments

• I am loading recent 100 comments
• I created function which provides me last 100 comments data

async function getCommentsOfUser(author) {
  try {
    const data = await client.call("bridge", "get_account_posts", {
      sort: "comments",
      account: author,
      start_author: "",
      start_permlink: "",
      limit: 100,
      observer: author,
    });
    return data;
  } catch (e) {
    return false;
  }
}

Step 3. Filter & Prepare Data

• I am trying to generate the report for yesterday
• So, I have to filter out all the comments which are only made yesterday
• Another filter which I am adding is comment content based.
• If a comment is starting with - [Sent, it is a comment for gifting the ecency points.
• For time calculation, I am using moment-timezone library

var momenttz = require("moment-timezone");

async function getContent() {
  // ---- Get yesterday's date -----
  const today = momenttz().subtract(1, "day");
  // ---- Get last 100 comments ----
  const data = await getCommentsOfUser("sagarkothari88");
  let communityData = {};
  let total = 0;
  // ---- Data filteration ---- 
  for (const comment of data) {'
    // ---- if a comment is for gifting points ---- 
    if (comment.body.indexOf("- [Sent ") == 0) {
      const commentDate = momenttz(comment.created);
      const hasSameDate = commentDate.date() === today.date();
      const hasSameMonth = commentDate.month() === today.month();
      const hasSameYear = commentDate.year() === today.year();
      let pointsSent = 0;
      // ---- If comment was made yesterday ---- 
      if (hasSameDate && hasSameMonth && hasSameYear) {
        // ---- figure out how many points were sent---- 
        if (comment.body.indexOf("- [Sent 50") == 0) {
          pointsSent = 50;
          total += pointsSent;
        } else if (comment.body.indexOf("- [Sent 100") == 0) {
          pointsSent = 100;
          total += pointsSent;
        }
        let community = comment.community_title;
        if (community === undefined) {
          community = comment.category;
        }
        // ---- add it to hash-map - e.g. HeyHaveYaMet = 100, Alive = 200
        if (community in communityData) {
          const currentData = communityData[community];
          communityData[community] = currentData + pointsSent;
        } else {
          communityData[community] = pointsSent;
        }
      }
    }
  }
}

Step 4. Generate Chart from above data

• I used https://image-charts.com to generate chart
• It takes different inputs as defined below & renders chart.
• As defined in the above function, we've chart data available in communityData map.
• We'll use it to render the chart.

  const url =
    "https://image-charts.com/chart.js/2.8.0?bkg=white&c=" +
    encodeURIComponent(`{
  type: 'bar',
  data: {
    datasets: [
      {
        data: [${Object.values(communityData)}],
        label: 'Ecency Points Distribution Data',
      },
    ],
    labels: [${Object.keys(communityData).map((e) => `\'${e}\'`)}],
  },
  options: {
    title: {
      display: true,
      text: '${today.date()}-${today.month()}-${today.year()} - Ecency Points Gift data',
    },
  },
}`).replace(/%20/g, "+");

• Above code generates a URL as follows
• Do you want to see? Copy paste it & open it in a new browser tab.

https://image-charts.com/chart.js/2.8.0?bkg=white&c=%7B%0A++type%3A+'bar'%2C%0A++data%3A+%7B%0A++++datasets%3A+%5B%0A++++++%7B%0A++++++++data%3A+%5B50%2C50%2C100%2C50%2C200%2C50%2C50%2C50%2C100%2C50%2C50%2C50%2C50%2C50%2C50%2C50%2C50%2C200%5D%2C%0A++++++++label%3A+'Ecency+Points+Distribution+Data'%2C%0A++++++%7D%2C%0A++++%5D%2C%0A++++labels%3A+%5B'heyhaveyamet'%2C'Hive+Naija'%2C'OCD'%2C'Hive+Open+Mic'%2C'Liketu'%2C'introduceyourself'%2C'Market+Friday'%2C'Alien+Art+Hive'%2C'Splinterlands'%2C'Threespeak'%2C'Threeshorts'%2C'CLEAN+PLANET'%2C'NeedleWorkMonday'%2C'WEEKEND+EXPERIENCES'%2C'Creative+Cuisine'%2C'Visual+Shots'%2C'LeoFinance'%2C'We+Are+Alive+Tribe'%5D%2C%0A++%7D%2C%0A++options%3A+%7B%0A++++title%3A+%7B%0A++++++display%3A+true%2C%0A++++++text%3A+'15-6-2023+-+Ecency+Points+Gift+data'%2C%0A++++%7D%2C%0A++%7D%2C%0A%7D

Step 5. Downloading Chart to local file.

• I used this library called image-downloader
• With that, I am downloading rendered chart to local.
• I am using ISO8601 date timestamp as a part of file name.
• Refer to Step 4. to understand, How I obtained value for url variable.

var download = require("image-downloader");
const localFileName = `${__dirname}/chart${today.toISOString()}.png`;
const image = await download.image({
  url,
  dest: localFileName,
});

Step 6. Uploading the image to @ecency

• I am uploading the chart-image to Ecency
• I used axios for http calls
• I also used form-data to generate form-data for file upload.
• I am uploading file from local, so I have also used fs library

// ---- library imports ----
var axios = require("axios");
var FormData = require("form-data");
var fs = require("fs");
var download = require("image-downloader");

// ---- image / chart downloading ----
const localFileName = `${__dirname}/chart${today.toISOString()}.png`;
const image = await download.image({
  url,
  dest: localFileName,
});

// ---- generating form-data ----
let formData = new FormData();
formData.append("file", fs.createReadStream(image.filename));

// ---- setting up axios request ----
let config = {
  method: "post",
  maxBodyLength: Infinity,
  url: `https://images.ecency.com/hs/${process.env.ECENCY_CODE}`,
  headers: {
    authority: "images.ecency.com",
    accept: "application/json, text/plain, */*",
    "accept-language": "en-GB,en;q=0.9",
    origin: "https://ecency.com",
    referer: "https://ecency.com/",
    ...formData.getHeaders(),
  },
  data: formData,
};

// ---- sending request via axios to upload chart image  ----
let response = await axios.request(config);
console.log(response.data.url);
//  ---- in response.data.url, we've the url for image uploaded

Step 7. Compose #Thread on @leofinance

With above response.data.url, now generate the text for LeoThread.

Gift-Distributed 1300 @ecency points to motivate #Hive members

![chart](https://images.ecency.com/DQmdczrKuc4SUJPC7Fv5TCVMv7C7Und6yBepxNC1QTaEMwv/chart2023_07_15t12_41_48.989z.png)

[Support me back](https://vote.hive.uno/@sagarkothari88)

Step 8. Post it on LeoFinance - Thread

• I take this text & manually post it on LeoThreads.
• Here is the link to my recent thread
• @sagarkothari88/re-leothreads-wqd43zab

Here is the final output of what I've achieved by spending weekends figuring out this one.

Why this post?

• I spent almost entire weekend figuring out this.
• I hope that, at least some portion of the post, you may find helpful to you.
• You don't have to invest the time & energy - again - which I've already done.
• Adopt, improve, improvise.

Support me

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD