Genesis

UI library

We use what is known as Atomic Design for building our component library. This paradigm splits components into various differnt levels based on their complexity.

  1. Organisms - An arrangement of molecules and atoms to form a larger section of the site. Ex. Vignettes containing various information about a topic, a header containing navigation, title and search.
  2. Molecules - A grouping of multiple Atoms together. Ex. A search bar. It has an input and a button.
  3. Atoms - The building blocks of the site. Normally, an abstraction around an HTML DOM element.
  • Organisms

Maps

Attention: Keep in mind that data points with a depth of more than one will be serialized and need to be unserialized to be used in the popup component.

MultiColorContourMap

A multi color contour map defines a subject and a subject coloring. It highlights the parcels of a given subject in the corresponding color. In this example, the subject is restaurant type.

Pizza
FastFood
Italian
Asian
Brasserie
Hotdogs

Tooltip

🇳🇮

lorem ispum lorem ipsumlorem ispum lorem ipsum

lorem ispum lorem ipsumlorem ispum lorem ipsum

37.0

Degraded

56farms

1.2kplots

466ha

Practice gauges

Rotation score

No rotation data for this parcel

Poor

Medium

Rich

0 pts

6 pts

9 pts

28 pts

Vegetation cover rate

14/28 pts

Poor

Medium

Rich

0 pts

6 pts

9 pts

28 pts

Vegetation cover time series

Typography

Titles

Level 1

Level 2

Level 3

Level 4

Level 5
Level 6

Text overline

A regular link

Font-sizes

some text of size: text-xs.
some text of size: text-sm.
some text of size: text-md.
some text of size: text-lg.
some text of size: text-xl.
some text of size: text-3xl.
some text of size: text-8xl.

Font Medium: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe possimus nesciunt molestiae fugit temporibus itaque quaerat, sint quibusdam optio nobis velit a cupiditate, deleniti sed deserunt expedita ad odit quam.

Font Bold: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe possimus nesciunt molestiae fugit temporibus itaque quaerat, sint quibusdam optio nobis velit a cupiditate, deleniti sed deserunt expedita ad odit quam.

Font Mono: Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe possimus nesciunt molestiae fugit temporibus itaque quaerat, sint quibusdam optio nobis velit a cupiditate, deleniti sed deserunt expedita ad odit quam.

Colors

Gray
Indigo
Rating A
Rating B
Rating C

Shadows

shadow-xs
shadow-sm
shadow-base
shadow-lg
shadow-xl
shadow-card
shadow-xs
shadow-sm
shadow-base
shadow-lg
shadow-xl
shadow-card
shadow-xs
shadow-sm
shadow-base
shadow-lg
shadow-xl
shadow-card

Buttons

Cards

Regular Card

Flat Card

Unpadded card

Forms

Stepper
Radio

Navigation

Modals and Snackbars

Error message
action
Warning message
action
Information message
action
Success message
action

Score badges

100.0

Optimal

71.0

Optimal

18.0

Optimal

100.0

Optimal

54.0

Optimal

22.0

Optimal

67.0

Optimal

8.0

Optimal

22.0

Optimal

--

No data

51.0

Optimal

Gauges

Repartition Chart

first1
second2
third3
fourth0

Impact Stats Bar

Degraded0 - 39

30%

Sourcing measure gauge

Min: 20 t

Optimum: 200 t

Min: 20 t

Optimum: 200 t

Min: 20 t

Optimum: 200 t

Min: 20 t

Optimum: 200 t

Min: 20 t

Optimum: 200 t

Min: 20 t

Optimum: 200 t

Score distribution

1%

Critical

0 to 2

15%

Degraded

2 to 4

42%

Fair

4 to 6

36%

Good

6 to 8

6%

Optimal

8 to 10

Repartition Chart

first1
second2
third3
fourth0

Tables

#
Exploitation
Rating
Soil Units
Area
1GAEC des poussins

32.0

Optimal

3162 ha
2SARL Geneback

21.0

Optimal

492 ha
3La Commeraie

-12.0

Critical

6132 ha

Buckets charts

12

48%

A

0-10

1

4%

B

10-20

8

32%

C

20-30

4

16%

Unavailable data

A

0-10

B

10-20

This parcel

C

20-30

Unavailable data

Side panel

Confidence levels

Restricted rating reference

Restricted rating reference

Extended rating reference

Loading states

List

  • 1. Item 1
  • 2. Item 2
  • 3. Item 3
  • 4. Item 4

Custom icons