@berlitz/level-chart NPM | npm.io

2.3.3 • Published 4 months ago

Install

Weekly downloads

4,980

License

MIT

Repository

Last release

4 months ago

Level Chart

Description

The Level Chart Component is used for Displaying the different level's of Language Proficiencies, It functions like tabs as you can navigation through the different levels by clicking on the bars in the chart, which displays a short description about the level when active.

There is an additional option to set a locked level, this will disable clicking through the other levels and lock onto a single level.

Installation

yarn add @berlitz/level-chart

Props

Argument	Type	Required	Default
data	array of objects	true	na
lockedLevel	number	false	null
chartHelperLabel	string	false	Please select a level for more info

Example

[
  { "content": "example paragraph 1", "groupName": "newbie", "level": 1 },
  { "content": "example paragraph 2", "groupName": "alright", "level": 2 },
  { "content": "example paragraph 3", "groupName": "ayyyyy", "level": 3 },
  { "content": "example paragraph 4", "groupName": "awh yeah", "level": 4 }
]

Usage

import React from 'react'
import { H2 } from '@berlitz/globals/lib/components/typography'
import Spacer from '@berlitz/spacer'
import LevelChart from './src/LevelChartContainer'

const MyApp = () => (
  <>
    <H2>Proficiency Levels for All Languages</H2>
    <Spacer size="sm" />
    <LevelChart data={data} />
  </>
)

@berlitz/globals @berlitz/max-utils @berlitz/spacer styled-components-rtl

@infinitebrahmanuniverse/nolb-_ber @everything-registry/sub-chunk-121 @berlitz/blocks

4 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago