DEV Community

Cover image for The Layout types
Gaetan Gasoline
Gaetan Gasoline

Posted on

5 2 3 2

The Layout types

ScheduleJS features two and (soon three) layouts that you can use for any row of your graphics. This article describes what is a layout, how it is used, and what are the differences between these layouts.

What is a Layout?

A layout is a set of tools used to render your activities. Every layout has its specificities. For example, when you set a row layout to be the ChartLayout, you’re telling your graphics that you want to show the data in two dimensions (time and value), express every value held by an activity in proportion with the other activities’ values, and that you need to create a scale to tell the user what does the vertical dimension means in terms of value for an activity.

The requirements

To ensure their activities meet the requirements and to render their data, layouts require:

  • Their activities to extend one of the higher-order activity classes (ex: ChartActivity, MutableActivity, …)
  • The renderer to also extends a higher-order class corresponding to the layout (ex: ChartActivityRender, ActivityBarRenderer, …)

The GanttLayout

The GanttLayout is the default layout type for a row. It is also the most basic layout as it only covers a single dimension: time. To use the GanttLayout, the only attribute you have to provide to the activity is its start and end time. Alternatively, you can use a GanttLayout in combination with a custom ActivityRenderer to design a way for the user to picture the values it holds.

The GanttLayout

The ChartLayout

The ChartLayout will let you build activities into the form of a histogram. It attaches a specific value to render the activity height based on it. There are two styles of chart layout:

  • The Charts
  • The High-Low Charts

The following example shows a High-Low Chart coupled with a regular Chart. The High-Low Chart describes stocks opening and closing values and the spread, while the Chart describes daily volumes.

The HighLowChart and Chart layouts

The AgendaLayout

The AgendaLayout is used to build large rows representing daily activity vertically.

It is only present in our development branch and is not yet available in ScheduleJS 1.3. Expect it to make it soon to production.

Stay tuned for more! Here is a screenshot from our development build:

The AgendaLayout

For the final result, take a look: The Layout types

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay