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 I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay