Graitor-components-new NPM

Graitor Components :recycle:

United library for Graitor components.

:exclamation: CONTRIBUTORS WANTED :exclamation:

Install

yarn add graitor-components

npm i graitor-components

React

Works out of the box. Plug and play.

Vue

Vuera plugin is required for the React code migration

Available components:

GraitorChart :chart_with_upwards_trend:
- id (required, string) - ID of the chart
- title (required, string) - Title of the chart
- dataset (required, object<label: string, data: <string, number>) - Data to be displayed, multiple datasets support
- defaultType (optional, string) - Default chart type
- allowedTypes (optional, arrayline, vbar, hbar, pie) - Allowed subarray of chart types
- colors (optional, string[]) - Color pallet to be used for the chart
- formatLabels (optional, function) - Format labels
- sortLabels (optional, function) - Sort labels, default sort alphabetically
- notes:
  - hbar type always displays all Y labels, thus its height is dynamic
  - pie chart type not supported with multiple datasets
  - to ignore default sort sortLabels parameter needs to be provided, ex: () => 1
- example:

<GraitorChart id={"chart"}
              title={"Graitor bar chart"}
              defaultType={"vbar"}
              allowedTypes={["vbar", "line"]}
              dataset={{
                label: 'My Graitor Label',
                data: {
                  '2021-10-17': 1,
                  '2021-10-18': 4,
                  '2021-10-19': 150,
                }
              }}
              colors={["#f6a47a", "#5bf13d"]}
              formatLabels={(label) => {
                if (label === "unknown") return "?"
                const parts = label.split(/-+/g)
                return `${parts[2]}/${parts[1]} ${parts[0]}`
              }}
              sortLabels={(first, second) => {
                if (first === second) return 0
                return first > second ? -1 : 1
              }}
/>

GraitorDropdown
- title (required, string) - Title of the dropdown
- options (required, Item[]) - Array of items
- defaultItem (optional, Item) - Item to be set as the default
- onChange (optional, function) - Function to be executed on every change
- example:

<GraitorDropdown title={"Language"}
                 defaultItem={{ key: 'en', value: 'English' }}
                 options={[
                   { key: 'da', value: 'Dansk' },
                   { key: 'en', value: 'English' },
                   { key: 'de', value: 'Deutsch' },
                   { key: 'sk', value: 'Slovenčina' },
                 ]}
                 onChange={(oldValue, newValue) => {
                   setValue(newValue)
                 }}
/>