Emoji Line Height Incorrect

Kia Ora all!

I have written a script to consume some data from my API and display it in a table. I am using emoji to represent the sport for each particular row.

The problem is that for some reason the line height of the emoji is not quite the same as the rest of the line, and so they drift out of alignment.

I’ve tried altering the size of the emoji but to no avail. Thoughts?

const widget = new ListWidget();
widget.setPadding(0,0,0,0);
widget.url = "https://fitlytics.lesueur.nz";
var tables = widget.addStack();
tables.layoutVertically();

var periods = [
  //["week", "Weekly Stats"],
  //["month", "Monthly Stats"],  
  //["year", "Yearly Stats"],    
  ["rolling-year", "Rolling Year"]
];

var emoji = {
    Ride: "🚴",
    Run: "πŸƒ",
    Swim: "🏊",
    Walk: "πŸ‘Ÿ",
    Hike: "πŸ₯Ύ",
    AlpineSki: "β›·",
    BackcountrySki: "🎿",
    Canoe: "πŸ›Ά",
    Crossfit: "πŸ‹οΈ",
    EBikeRide: "🚲",
    Elliptical: "🚲",
    Handcycle: "🚲",
    IceSkate: "β›Έ",
    InlineSkate: "β›Έ",
    Kayaking: "πŸ›Ά",
    KitesurfSession: "πŸͺ",
    NordicSki: "🎿",
    RockClimbing: "πŸ§—",
    RollerSki: "πŸ›Ό",
    Row: "🚣",
    Snowboard: "πŸ‚",
    Snowshoe: "❄️",
    StairStepper: "πŸͺœ",
    StandUpPaddle: "",
    Surf: "πŸ„",
    VirtualRide: "πŸ’»",
    VirtualRun: "πŸƒ",
    WaterSport: "🌊",
    WeightTraining: "πŸ‹οΈ",
    WindsurfSession: "🌊",
    Wheelchair: "πŸ§‘β€πŸ¦½",
    Workout: "πŸ’ͺ",
    Yoga: "🧘",
};

for (var j = 0; j < periods.length; j++) {
  console.log(periods);
  var period = periods[j];
  tables.addSpacer(10);
  var h1 = tables.addText(period[1]);
  h1.font = Font.boldSystemFont(16);
  const row = tables.addStack();
  row.layoutHorizontally();
  row.spacing = 15;

  var col1 = row.addStack();
  col1.layoutVertically();
  var col2 = row.addStack();
  col2.layoutVertically();
  var col3 = row.addStack();
  col3.layoutVertically();
  var col4 = row.addStack();
  col4.layoutVertically();

  var col1header = col1.addText("Sport");
  var col2header = col2.addText("Distance");
  var col3header = col3.addText("Elevation");
  var col4header = col4.addText("Duration");
  col1header.font = Font.boldSystemFont(14);
  col2header.font = Font.boldSystemFont(14);
  col3header.font = Font.boldSystemFont(14);
  col4header.font = Font.boldSystemFont(14);
  
  totalDist = 0;
  totalDur = 0;
  totalElev = 0;

  var url = `https://fitlytics.lesueur.nz/api/activities/SUM/all/${periods[j][0]}/distance,total_elevation_gain,moving_time`;
  var req = new Request(url);  
  var res = await req.loadJSON();
  console.log(res);
  
  for (var i = 0; i < res.length; i++) {
    var activity = res[i];
    if (activity.distance !== null) {
      totalDist += parseInt(activity.distance);
    }
    
    if (activity.moving_time !== null) {
      totalDur += parseInt(activity.moving_time);
    }
    
    if (activity.total_elevation_gain !== null) {
      totalElev += parseInt(activity.total_elevation_gain);
    }
    
    var duration = toDuration(activity.moving_time);
    // EMOJI HERE.
    var activityEmoji = col1.addText(emoji[activity.type]);
    activityEmoji.font = Font.systemFont(15);
    col2.addText(`${Math.round(activity.distance / 1000).toLocaleString()}km`);
    col3.addText(`${Math.round(activity.total_elevation_gain).toLocaleString()}m`);
    col4.addText(`${duration}`); 
  }
  
  console.log(totalDur);
  totalDur = toDuration(totalDur);
  console.log(totalDur);
  var total2 = col2.addText(`${Math.round(totalDist / 1000).toLocaleString()}km`);
  var total3 = col3.addText(`${Math.round(totalElev).toLocaleString()}m`);
  var total4 = col4.addText(`${totalDur}`);
  total2.font = Font.boldSystemFont(15);
  total3.font = Font.boldSystemFont(15);
  total4.font = Font.boldSystemFont(15);
}

function toDuration(seconds) {
  var hrs = Math.floor(seconds / 3600);
  var min = Math.floor((seconds % 3600) % 60);
  var sec = seconds % 60;
  return `${hrs}:${min}:${sec}`;
}

Script.setWidget(widget);
Script.complete();
1 Like

Two possible solutions come to my mind:

Wrap each text in a stack and set the stack’s height.

Or change how you build the table from rows embedded in columns to columns embedded in rows. But you would still need to set a width on each column stack to align them vertically.

1 Like

That works a charm! Many thanks :blush: