Evenly space activity sections based on number of sections shown

[geoffhuntoon]

Hello!

I'm trying to make a clock face with user activity stats displayed on it - but that only displays user-selected stats. The setup I have to display these stats is pretty typical - for example, if the user selects "Active Minutes" then the display shows a lightning-bolt icon with an arc going around it to show progress, with the minute value underneath, all wrapped in a <Section>.

However, I'm having a lot of difficulty trying to dynamically space these sections based on the number of stats that the user has selected. If the user has only selected one stat to display, I want that section to be centered on the display; but if they select two, I want those two to be evenly-spaced in the same row, and so on. 

Here's an example section from my index.gui:

<section id="dtContainer" class="activityContainer">
  <arc id="dtArc" fill="green" sweep-angle="360"/>
  <image id="dtIcon" href="icons/dist.png"/>
  <text id="dtText">--</text>
</section>

And here's a simplified attempt to do what I've described above from my app/index.js:

// Active minutes, calories burned, distance traveled, etc.
// This is the list of user activities that the user has selected
// to be shown (read from settings, not static)
let activityList = ["am", "cb", "dt"];
switch (activityList.length) {
    case 0:
      break;
    case 1:
      // Center one section
      let container = document.getElementById(activityList[0] + 'Container');
      container.x = '150';
      container.y = '150';
      break;
    case 2:
      // Evenly space two sections
      let container1 = document.getElementById(activityList[0] + 'Container');
      let container2 = document.getElementById(activityList[1] + 'Container');
      container1.x = '100';
      container1.y = '150';
      container2.x = '200';
      container2.y = '150';
    ...etc...
  }

I know that elements can't be dynamically generated, so I'm not sure if this is the right approach (or if there is a way to do this). Either way, the above is not working at all. I'd appreciate any input or recommendations! Thank you!

[JonFitbit · Accepted solution]

Have you tried setting the Y coordinate to $ (in the css or svg only).

.activityContainer {

  y: $+10;

}

Then each element with that class should sit next to the other. 

https://dev.fitbit.com/build/guides/user-interface/css/#dimensions-and-positioning