Many disk space analyzers use what's called a Squarified Treemap to visualize disk usage across different directories and files. A squarified treemap uses tiles to show what directories and files are using the most space by sizing them based on their disk usage.

This was the inspiration for Tiles. We wanted to make it easier to visualize imbalances in points, unrealistic point estimates, quick impressions of a board's state, and more.

What it does

As mentioned before, Tiles uses a squarified treemap algorithm to size and display the items in a board. Its purpose is as a visualization tool to gain better insights into what your board looks like when the items are grouped and weighted. Although interactivity and editing boards/tiles on the fly is a planned feature, currently only items can be updated from within the Tiles board view.

How we built it

Tiles is built purely using ReactJS and the monday SDK. We originally planned to use SVGs or third-party chart-rendering libraries, but decided instead to simply render the tiles using DOM elements and our own components. This was because we wanted to keep the app configurable and open to more features in the future.

Challenges we ran into

As students and beginners to ReactJS as well as GraphQL, a lot of learning was done on the fly. We had to study to understand the Squarified Treemap Algorithm as well. The implementation for the treemap algorithm went through multiple iterations as we realized very quickly that our first attempts at implementing it would cause development to be more of a hassle in the future. We also had to find time to work on this project whenever we could alongside our 7 courses for school.

The time management and code planning/organization aspects were the most challenging parts by far, but there were also challenges around getting to know the Monday API and the SDK's capabilities.

Accomplishments that we're proud of

Getting the tiles to render properly for the first time was a huge relief. We spent a lot of time trying to figure out how to best implement the algorithm so getting it out of the way (albeit a few weeks into the challenge) was hugely rewarding.

The app turned out better than we ever expected and although we're not designers by any means, we feel as though we also managed to make the UI look more polished than we thought we'd have time for.

What we learned

In a technical sense, we learned about the Monday SDK and API as well as the aforementioned algorithm and a solid amount about React + GraphQL. Code structuring played a huge role and ultimately, the Object-Oriented approach that we ended up taking was very different from the first few attempts at implementation.

In a much broader sense, the chance to manage our own "big" project with a well-estimated schedule and a clear vision is something we haven't had many opportunities to do. This challenge was a great chance to plan, work on, and complete a project from scratch using our own ideas.

What's next for Tiles

There are a few priority features that are still being developed currently. We also have features we never got to get around to before the challenge. This project was a very interesting and we have a lot of ideas for where we can take it so we'll be continuing work on it for the foreseeable future until it reaches a point where we're satisfied with it. A few priority features for us are:

  • A "Learn More" webiste
  • Extrapolated reusable Tile components
  • Refactor of the Squarify algorithm
  • More supported group and weight columns
  • Dashboard widget for visualizing multiple boards
  • Customizations (eg, theme, hiding tiles, adjusting font colors, etc.)
  • SVG version of the treemap renderer
  • Animations and other UI additions

Built With

  • css
  • graphql
  • monday-react-ui-core
  • mondayapi
  • mondaysdk
  • react
Share this project: