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} />
  </>
)