Data parser
Bootstrap 5 Data parser plugin
Data Parser is a JavaScript plugin which helps to display your data (.json, .csv) in MDB5 components.
It comes with a parse() method which can transform your data based on selected
options into the required format and set of useful functions for more complicated data
operations.
Note: Read the API tab to find all available options and advanced customization
Datatable
CSV
When parsing CSV into Datatables format (rows and columns), by default all lines are treated
as rows (there is no header included). You can change that by setting
headerIndex to the position of a header row.
You can customize both columns and rows (values between start/end or only selected indexes).
Note: When you set a headerIndex, remember to exclude this
value from rows (for example by setting rows.start to a next index).
Data used in this example: Population Figures
<div id="datatable-csv"></div>
const table = document.getElementById('datatable-csv');
const columns = ['Country', 'Code', 'Population 2015', 'Population 2016'];
const datatableInstance = new mdb.Datatable(table, { columns }, { loading: true });
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parser = new DataParser('datatable', 'csv', {
rows: { start: 10, end: 14 },
columns: {
indexes: [0, 1, 57, 58],
},
});
const { rows } = parser.parse(data);
datatableInstance.update({ rows }, { loading: false });
});
JSON
You can define options for rows in exactly the same way as in CSV format
(start, end / indexes). Instead of doing the same for columns, provide an array of selected
keys to the keys options.
Data used in this example: Population Figures
<div
id="datatable-json"
data-mdb-dark="true"
style="background-color: rgb(7 43 49);"
></div>
const table = document.getElementById('datatable-json');
const columns = [
{ label: 'Country', field: 'Country' },
{ label: 'Code', field: 'Country_Code' },
{ label: 'Population 2015', field: 'Year_2015' },
{ label: 'Population 2016', field: 'Year_2016' },
];
const datatableInstance = new mdb.Datatable(table, { columns }, { loading: true });
fetch('data.json')
.then((data) => data.json())
.then((data) => {
const parser = new DataParser('datatable', 'json', {
rows: { start: 30, end: 100 },
keys: columns.map((column) => column.field),
});
const { rows } = parser.parse(data);
datatableInstance.update({ rows }, { loading: false });
});
Vector Maps
CSV
Creating a colorMap based on a CSV Data requires identifying the region - Vector Maps uses alpha2Code for IDs, which isn't always convenient. Data Parser can, in most cases, fetch the required identifier based on the country's name or alpha3Code.
Note: If you don't set the step option to a fixed value, Data
Parser will compute equal size intervals - it may resolve in empty intervals if values are
unevenly distributed.
Data used in this example: Population Figures
<div id="map-csv"></div>
const map = document.getElementById('map-csv');
const vectorMapInstance = new VectorMap(map, {
fill: '#fff',
readonly: true,
hover: false,
});
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parser = new DataParser('vectorMap', 'csv', {
color: 'lightGreen',
field: 42,
rows: {
start: 1,
},
step: 8000000,
countryIdentifier: 1,
});
const { colorMap, legend } = parser.parse(data);
vectorMapInstance.update({ colorMap });
JSON
Apart from a colorMap, parse() method returns also a legend based on which you
can easily display value-color corelations.
If you're not satisfied with colors available out of the box, you can pass an array of color strings based on which DataParser will create your colorMap.
The getCoordinates() method helps to find x and y map coordinates based on
longitude and latitude.
Calculated point is an approximation and might not be accurate.
Data used in this example: Population Figures
Population (2016):
<div class="row m-0" style="background-color: rgb(7 43 49);">
<div class="col-lg-3 border-end border-bottom border-light">
<h5 class="text-light p-3 mb-1">Population (2016):</h5>
<hr />
<ul id="legend-json" class="vector-map-legend px-3"></ul>
</div>
<div class="col-lg-9 p-0">
<div id="map-json"></div>
</div>
</div>
const map = document.getElementById('map-json');
const legendList = document.getElementById('legend-json');
const getLegend = (legend) => {
return legend
.map((color, i) => {
let label;
if (i === 0) {
label = `< ${color.max}`;
} else if (i === legend.length - 1) {
label = `> ${color.min}`;
} else {
label = `${color.min} - ${color.max}`;
}
return `
<li class="vector-map-legend__item my-2">
<div class="vector-map-legend__color me-2 border border-light" style="background-color: \$\{color\.color\}"></div>
<small>${label}</small>
</li>
`;
})
.join('\n');
};
const vectorMapInstance = new VectorMap(map, {
fill: 'rgb(7 43 49)',
tooltips: true,
stroke: '#fff',
btnClass: 'btn-light',
readonly: true,
hover: false,
});
fetch('data.json')
.then((data) => data.json())
.then((data) => {
const parser = new DataParser('vectorMap', 'json', {
color: [
'rgba(163, 199, 210, 0.05)',
'rgba(163, 199, 210, 0.1)',
'rgba(163, 199, 210, 0.15)',
'rgba(163, 199, 210, 0.2)',
'rgba(163, 199, 210, 0.25)',
'rgba(163, 199, 210, 0.3)',
'rgba(163, 199, 210, 0.35)',
'rgba(163, 199, 210, 0.4)',
'rgba(163, 199, 210, 0.45)',
'rgba(163, 199, 210, 0.5)',
],
field: 'Year_2016',
step: 8000000,
countryIdentifier: 'Country_Code',
tooltips: (value) => `Population: ${value}`,
});
const { colorMap, legend } = parser.parse(data);
legendList.innerHTML = getLegend(legend);
vectorMapInstance.update({
colorMap,
markers: [
{
...parser.getMapCoordinates(52.107811, 19.94487),
fill: 'rgb(185, 211, 220)',
type: 'bullet',
label: 'Warsaw',
latitude: 52.2297,
longitude: 21.0122,
},
],
});
});
Charts
CSV
Creating datasets for your Chart component requires two kinds of labels - labels for each
specific dataset (datasetLabel: column's index) as well as labels for data
points (labelsIndex: index of a row with labels).
Additionally, you can format the datasetLabel using
formatLabel option.
Note: Data Parser generates a color for each dataset, which you can later
use for background/border color. By default, values comes from mdb palette but
you can also use
full palette
- in this case the color option's value should refer to the intensity (from 50
to 900).
Basic data
Suitable for most of the chart types (line, bar, horizontal bar, radar, polar, doughnut, pie)
Data used in this example: Population Figures
<canvas id="chart-csv" height="200"></canvas>
const chart = document.getElementById('chart-csv');
const chartInstance = new mdb.Chart(
chart,
{ type: 'line' },
{
options: {
plugins: {
tooltip: {
displayColors: false,
}
},
},
}
);
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parser = new DataParser('chart', 'csv', {
rows: { start: 170, end: 176 },
datasetLabel: 0,
labelsIndex: 0,
formatLabel: (label) => {
return label.replace('Year_', '');
},
});
const { labels, datasets } = parser.parse(data);
chartInstance.update({
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
});
});
Coordinates
Parsing data for scatter & bubble charts
<canvas id="chart-csv-coordinates" height="200"></canvas>
const chart = document.getElementById('chart-csv-coordinates');
const chartInstance = new mdb.Chart(
chart,
{ type: 'bubble' },
{
options: {
plugins: {
tooltip: {
displayColors: false,
}
},
scales: {
x:
{
title: {
display: true,
text: 'Time consumed (%)',
},
},
y:
{
title: {
display: true,
text: 'Tasks done (%)',
},
},
},
},
}
);
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parser = new DataParser('chart', 'csv', {
datasetLabel: 0,
labelsIndex: 0,
rows: {
start: 1,
},
getCoordinates: ([departament, done, team, startDate, currentDate, deadline]) => {
const getDayDifference = (firstDate, secondDate) => {
return (
(new Date(secondDate).getTime() - new Date(firstDate).getTime()) /
(1000 * 3600 * 24)
);
};
const timeConsumedPercentage = Math.round(
(getDayDifference(startDate, currentDate) / getDayDifference(startDate, deadline)) *
100
);
const targetPercentage = done * 100;
return {
x: timeConsumedPercentage,
y: targetPercentage,
r: team,
};
},
color: 400,
});
const { labels, datasets } = parser.parse(data);
chartInstance.update({
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
});
});
departament,done,team,startDate,currentDate,deadline
Marketing,0.67,10,2019-03-01,2020-10-23,2020-12-10
Business,0.49,12,2019-01-02,2020-10-23,2020-11-30
Backend,0.88,32,2019-06-01,2020-10-23,2020-11-23
Frontend,0.79,29,2019-08-01,2020-10-23,2020-11-30
Design,0.91,7,2019-07-01,2020-10-23,2020-11-01
JSON
When working with JSON data for you Chart component, you can define which
keys should be parsed or select all without those specified in the
ignoreKeys options.
Basic data
Data used in this example: Population Figures
Suitable for most of the chart types (line, bar, horizontal bar, radar, polar, doughnut, pie)
<div style="background-color: rgb(7 43 49);">
<canvas id="chart-json" height="200"></canvas>
</div>
const chart = document.getElementById('chart-json');
const chartInstance = new mdb.Chart(
chart,
{ type: 'line' },
{
options: {
plugins: {
tooltip: {
displayColors: false,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: 'rgb(7, 43, 49)',
bodyColor: 'rgb(7, 43, 49)',
}
},
legend: {
labels: {
color: 'rgba(255, 255, 255, 0.7)',
},
},
scales: {
x:
{
ticks: {
color: 'rgba(255, 255, 255, 0.7)',
},
},
y:
{
ticks: {
color: 'rgba(255, 255, 255, 0.7)',
},
grid: {
color: 'rgba(255, 255, 255, 0.3)',
},
},
},
},
}
);
fetch('data.json')
.then((data) => data.json())
.then((data) => {
const column = [{ label: 'Population 2016', field: 'Year_2016' }];
const parser = new DataParser('chart', 'json', {
datasetLabel: 'Country',
ignoreKeys: ['Country', 'Country_Code'],
rows: { start: 9, end: 14 },
formatLabel: (label) => {
return label.replace('Year_', '');
},
color: 100,
});
const { labels, datasets } = parser.parse(data);
chartInstance.update({
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
});
});
Coordinates
Parsing data for scatter & bubble charts
<div style="background-color: rgb(7 43 49);">
<canvas id="chart-json-coordinates" height="200"></canvas>
</div>
const chart = document.getElementById('chart-json-coordinates');
const chartInstance = new mdb.Chart(
chart,
{ type: 'bubble' },
{
options: {
plugins: {
tooltip: {
displayColors: false,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: 'rgb(7, 43, 49)',
bodyColor: 'rgb(7, 43, 49)',
}
},
legend: {
labels: {
color: 'rgba(255, 255, 255, 0.7)',
},
},
scales: {
x:
{
ticks: {
color: 'rgba(255, 255, 255, 0.7)',
},
title: {
display: true,
text: 'Time consumed (%)',
color: 'rgba(255, 255, 255, 0.7)',
},
},
y:
{
ticks: {
color: 'rgba(255, 255, 255, 0.7)',
},
grid: {
color: 'rgba(255, 255, 255, 0.3)',
},
title: {
display: true,
text: 'Tasks done (%)',
color: 'rgba(255, 255, 255, 0.7)',
},
},
},
},
}
);
fetch('data.json')
.then((data) => data.json())
.then((data) => {
const parser = new DataParser('chart', 'json', {
datasetLabel: 'departament',
getCoordinates: ({ done, team, startDate, currentDate, deadline }) => {
const getDayDifference = (firstDate, secondDate) => {
return (
(new Date(secondDate).getTime() - new Date(firstDate).getTime()) /
(1000 * 3600 * 24)
);
};
const timeConsumedPercentage = Math.round(
(getDayDifference(startDate, currentDate) / getDayDifference(startDate, deadline)) *
100
);
const targetPercentage = done * 100;
return {
x: timeConsumedPercentage,
y: targetPercentage,
r: team,
};
},
color: 100,
});
const { labels, datasets } = parser.parse(data);
chartInstance.update({
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
});
});
[
{
"departament": "Marketing",
"done": 0.67,
"team": 10,
"startDate": "2019-03-01",
"currentDate": "2020-10-23",
"deadline": "2020-12-10"
},
{
"departament": "Business",
"done": 0.49,
"team": 12,
"startDate": "2019-01-02",
"currentDate": "2020-10-23",
"deadline": "2020-11-30"
},
{
"departament": "Backend",
"done": 0.88,
"team": 32,
"startDate": "2019-06-01",
"currentDate": "2020-10-23",
"deadline": "2020-11-23"
},
{
"departament": "Frontend",
"done": 0.79,
"team": 29,
"startDate": "2019-08-01",
"currentDate": "2020-10-23",
"deadline": "2020-11-30"
},
{
"departament": "Design",
"done": 0.91,
"team": 7,
"startDate": "2019-07-01",
"currentDate": "2020-10-23",
"deadline": "2020-11-01"
}
]
Treeview
Using the Treeview requires defining name and children properties in your objects - as it can be an inconvenience, Data Parser allows pointing to other fields as their equivalent (f.e. name -> title, children -> content).
In the same time, you can still make use of other properties (icon, disabled, show) which are not typically defined in data structures. Each of them is a function which takes an object as its argument and returns a field's value depending on your custom logic.
JSON
Note: CSV format is not available for the Treeview component.
<div style="background-color: rgb(7 43 49);">
<div id="treeview-json"></div>
</div>
const treeview = document.getElementById('treeview-json');
const expandFolder = ({ name }) => {
const expandedFolders = ['Desktop', 'Programming', 'node_modules'];
return expandedFolders.includes(name);
};
fetch('data.json')
.then((data) => data.json())
.then((data) => {
const parser = new DataParser('treeview', 'json', {
show: expandFolder,
children: 'content',
name: (el) => {
const getExtensionIcon = (extension) => {
const iconMap = {
doc: 'file-alt',
js: 'file-code',
zip: 'file-archive',
webp: 'file-image',
pdf: 'file-pdf',
};
return iconMap[extension] || 'file';
};
const name = el.directory ? el.name : `${el.name}.${el.extension}`;
const icon = el.directory ? 'folder' : getExtensionIcon(el.extension);
return `<i class="far fa-${icon} mx-2"></i>${name}`;
},
});
const treeviewInstance = new Treeview(treeview, {
structure: parser.parse(data),
});
});
[
{
"name": "Desktop",
"directory": true,
"content": [
{
"name": "Programming",
"directory": true,
"content": [
{
"name": "index",
"extension": "js"
},
{
"name": "README",
"extension": "md"
},
{
"name": "package",
"extension": "json"
},
{
"name": "node_modules",
"directory": true,
"content": [
{
"name": "mdb-ui-kit",
"directory": true
}
]
}
]
},
{
"name": "avatar",
"extension": "webp"
}
]
},
{
"name": "Downloads",
"directory": true,
"content": [
{
"name": "lectures",
"extension": "zip"
},
{
"name": "school-trip",
"extension": "zip"
},
{
"name": "physics-assignment",
"extension": "pdf"
},
{
"name": "presentation",
"extension": "pdf"
},
{
"name": "wallpaper",
"extension": "webp"
}
]
},
{
"name": "Documents",
"directory": true,
"content": [
{
"name": "Homework",
"directory": true,
"content": [
{
"name": "maths",
"extension": "doc"
},
{
"name": "english",
"extension": "doc"
},
{
"name": "biology",
"extension": "doc"
},
{
"name": "computer-science",
"extension": "js"
}
]
}
]
},
{
"name": "Pictures",
"directory": true,
"content": [
{
"name": "Holiday",
"directory": true,
"content": [
{
"name": "1",
"extension": "webp"
},
{
"name": "2",
"extension": "webp"
},
{
"name": "3",
"extension": "webp"
},
{
"name": "4",
"extension": "webp"
}
]
},
{
"name": "School trip",
"directory": true,
"content": [
{
"name": "ABD001",
"extension": "webp"
},
{
"name": "ADB002",
"extension": "webp"
},
{
"name": "ADB004",
"extension": "webp"
},
{
"name": "ADB005",
"extension": "webp"
}
]
}
]
}
]
Data parser - API
Usage
Via javascript
const dataParser = new DataParser('datatable', 'csv', options); dataParser.parse(data);
Options
Constructor accepts three arguments:
| Name | Type | Default | Description |
|---|---|---|---|
strategy
|
String | 'datatable' |
Available values: datatable, vectorMap, treeview, chart |
format |
String | 'csv' |
Available values: csv, json |
options
|
Object | |
Available options depend on selected strategy |
Datatable
CSV options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
columns
|
Object | { start: 0 } |
Defines which columns should be parsed - either with start/end values or an array of indexes. |
columns.start
|
Number | 0 |
Index of the first data column |
columns.end
|
Number | |
Index of the last data column (when undefined it will be the last available index) |
columns.indexes
|
Array | |
Set of column indexes to parse |
headerIndex
|
Number | -1 |
Index of the line containing headers (f.e. when set to 0, rows.start should be 1) |
delimiter
|
String | , |
Character separating values in a file |
JSON options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
keys
|
Array | |
Array of keys (columns) to parse (by default all) |
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
parse
|
data (csv/json) | Returns data parsed into the format required by the component (depends on strategy |
dataParser.parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
dataParser.getValueExtrema(csvData, 3)
|
Vector Maps
CSV options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
headerIndex
|
Number | -1 |
Index of a line containing headers (if set, rows' start should be moved to the next index) |
delimiter
|
String | , |
Character separating values in a file |
color
|
String, Array | 'blue' |
Name of the color palette (see more in section below) or an array of custom colors |
field
|
Number | |
Index of a value based on which a region should be colored |
countryIdentifier
|
Number | |
Index of a field containing country identifier (alpha2code, alpha3code, country's name) |
countries
|
Array | |
Array of identifiers - if defined, only those countries will appear in the colorMap |
tooltips
|
Function | |
Allows generating custom tooltips |
JSON options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
color
|
String, Array | 'blue' |
Name of the color palette (see more in section below) or an array of custom colors |
field
|
String | |
Key based on which a region should be colored |
countryIdentifier
|
String | |
Key containing country identifier (alpha2code, alpha3code, country's name) |
countries
|
Array | |
Array of identifiers - if set, only those countries will appear in the colorMap |
tooltips
|
Function | |
Allows generating custom tooltips |
Color maps
Choose one of the colors from our full palette for your color map:
redpinkpurpledeepPurpleindigolightBluecyantealgreenlightGreenlimeyellowamberorangedeepOrangegrayblueGray
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
parse
|
data (csv/json) | Returns data parsed into the format required by the component (depends on strategy |
dataParser.parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
dataParser.getValueExtrema(csvData, 3)
|
Charts
CSV options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
columns
|
Object | { start: 0 } |
Defines which columns should be parsed - either with start/end values or an array of indexes. |
columns.start
|
Number | 0 |
Index of the first data column |
columns.end
|
Number | |
Index of the last data column (when undefined it will be the last available index) |
columns.indexes
|
Array | |
Set of column indexes to parse |
datasetLabel
|
Number | |
Index of a value in each entry which should be treated as a label for a dataset |
delimiter
|
String | , |
Character separating values in a file |
labelsIndex
|
Number | -1 |
Index of a row in .csv file containing value labels |
formatLabel
|
Function | (label) => label |
Function formatting labels (per value, not dataset) |
color
|
String | mdb |
Color palette from which values will be assigned to datasets |
getCoordinates
|
function | |
Function which takes an entry as its parameter and should return an object with coordinates (bubble, scatter chart) |
JSON options
| Name | Type | Default | Description |
|---|---|---|---|
rows
|
Object | { start: 0 } |
Defines which rows should be parsed - either with start/end values or an array of indexes. |
rows.start
|
Number | 0 |
Index of the first data row |
rows.end
|
Number | |
Index of the last data row (when undefined it will be the last available index) |
rows.indexes
|
Array | |
Set of row's indexes to parse |
keys
|
Array | |
Set of keys which should be parsed |
ignoreKeys
|
Array | [] |
Set of keys which should be ignored when parsing |
datasetLabel
|
String | |
Key which value should be treated as a label for a dataset |
formatLabel
|
Function | (label) => label |
Function formatting labels (per value, not dataset) |
color
|
String | mdb |
Color palette from which values will be assigned to datasets |
getCoordinates
|
function | |
Function which takes an entry as its parameter and should return an object with coordinates (bubble, scatter chart) |
Colors
Setting the color attribute to 'mdb' will assign one of MDB
theme
colors
to each dataset (primary, secondary), while using a number value will iterate through entire
color palette
for given intensity (50, 100, ... 900).
Available values:
mdb50100200300400500600700800900
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
parse
|
data (csv/json) | Returns data parsed into the format required by the component (depends on strategy |
dataParser.parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
dataParser.getValueExtrema(csvData, 3)
|
Treeview
JSON options
| Name | Type | Default | Description |
|---|---|---|---|
name
|
String / Function | 'name' |
Reference to the JSON fields that should be a 'name' Treeview structure parameter for items |
children
|
String | 'children' |
Reference to the JSON fields that should be a 'children' Treeview structure parameter for items |
icon
|
String / Function / null | 'null' |
Reference to the JSON fields that should be an 'icon' Treeview structure parameter for items |
show
|
Function / Boolean | 'false' |
Reference to the JSON fields or a static value that should be a 'show' Treeview structure parameter for items |
disabled
|
Function / Boolean | 'false' |
Reference to the JSON fields or a static value that should be a 'disabled' Treeview structure parameter for items |
id
|
String / Number / null | 'null' |
Reference to the JSON fields or a static value that should be an 'id' Treeview structure parameter for items |
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
parse
|
data (json) | Returns data parsed into the format required by the component (depends on strategy |
dataParser.parse(jsonData)
|
Util functions
Arrays
flattenDeep(array)
Flattens a multi-level array into single-level one.
DataParser.flattenDeep([1, [2, [3, [4]], 5]]);
// output: [1, 2, 3, 4, 5]
pullAll(array, array)
Pulls particular elements from an array.
DataParser.pullAll(['a', 'b', 'c', 'a', 'b', 'c'], ['a', 'c']);
// output: ['b', 'b']
take(array, number)
Returns a particular amount of items from the start of an array.
DataParser.take([1, 2, 3, 4, 5], 2);
// output: [1, 2]
takeRight(array, number)
Returns a particular amount of items from the end of an array.
DataParser.takeRight([1, 2, 3, 4, 5], 2);
// output: [4, 5]
union(set of arrays)
Concatenates many arrays into one, single-level and removes duplicates.
DataParser.union([1, 2], [3, ['four', [5]]], ['six']);
// output: [1, 2, 3, 'four', 5, 'six']
unionBy(function / string, set of arrays / objects)
Concatenates many arrays into one, single-level by particular criterium and removes duplicates.
DataParser.unionBy(Math.floor, [2.1], [1.2, 2.3]);
// output: [2.1, 1.2]
uniq(array)
Returns an array without duplicates.
DataParser.uniq([1, 2, 1, 3]);
// output: [1, 2, 3]
uniqBy(function / string, array / object)
Returns an array without duplicates set by a particular criterium.
DataParser.uniqBy(Math.floor, [2.1, 1.2, 2.3]);
// output: [2.1, 1.2]
zip(arrays)
Zips first items of a set of arrays into one array, second ones into second and so on.
DataParser.DataParser.zip(['a', 'b'], [1, 2], [true, false]);
// output: [['a', 1, true], ['b', 2, false]]
zipObject(array, array)
Creates an object with keys from the first array and values from the second one.
DataParser.zipObject(['a', 'b'], [1, 2]);
// output: { 'a': 1, 'b': 2 }
Collections
countBy(array / object, function / string)
Returns an object with values converted using the second parameter as a key and number of items that it matches as a value.
DataParser.countBy([6.1, 4.2, 6.3], Math.floor);
// output: { 6: 2, 4: 1 }
DataParser.countBy({ x: 'one', y: 'two', z: 'three', a: 'one' }, 'length');
// output: { 3: 3, 5: 1 }
groupBy(array / object, function / string)
Returns an object with values converted using the second parameter as a key and an array of items that it matches as a value.
DataParser.groupBy([6.1, 4.2, 6.3], Math.floor);
// output: { 6: [6.1, 6.3], 4: [4.2] }
DataParser.groupBy({ x: 'one', y: 'two', z: 'three', a: 'one' }, 'length');
// output: { 3: ['one', 'two', 'one'], 5: ['three'] }
sortBy(array / object, array)
Returns a sorted array by values from the second parameter.
const vehicles = [
{ name: 'car', id: 1 },
{ name: 'airplane', id: 4 },
{ name: 'bike', id: 2 },
{ name: 'boat', id: 3 },
];
DataParser.sortBy(vehicles, ['name', 'id']);
// output:
// [
// { name: 'airplane', id: 4 },
// { name: 'bike', id: 2 },
// { name: 'boat', id: 3 },
// { name: 'car', id: 1 }
// ]
orderBy(array / object, array, array)
Returns a sorted array by values from the second parameter and order from the third one.
const vehicles = [
{ name: 'car', id: 1 },
{ name: 'airplane', id: 4 },
{ name: 'bike', id: 2 },
{ name: 'boat', id: 3 },
];
DataParser.orderBy(vehicles, ['name', 'id'], ['desc', 'desc']);
// output:
// [
// { name: 'car', id: 1 },
// { name: 'boat', id: 3 },
// { name: 'bike', id: 2 },
// { name: 'airplane', id: 4 }
// ]
Objects
invert(object)
Inverts object keys with their values and overwrites duplicates.
DataParser.invert({ '1': 'a', '2': 'b', '1': 'c' });
// output: { 'c': '1', 'b': '2' }
invertBy(object, function(optional))
Inverts object keys with their values and puts duplicates into the array.
DataParser.invertBy({ 'a': '1', 'b': '2', 'c': '1' });
// output: { '1': ['a', 'c'], '2': ['b'] }
DataParser.invertBy({ 'a': '1', 'b': '2', 'c': '1' }, (key) => `group${key}`);
// output: { 'group1': ['a', 'c'], 'group2': ['b'] }
omit(object, array / string)
Returns object without particular elements.
DataParser.omit({ 'a': '1', 'b': '2', 'c': '3' }, ['a', 'c']);
// output: { 'b': '2' }
omitBy(object, function)
Returns object without particular elements that are the function result.
DataParser.omitBy({ 'a': 1, 'b': '2', 'c': 3 }, (item) => typeof item !== 'number');
// output: { 'a': 1, 'c': 3 }
pick(object, array)
Returns particular elements from an object.
DataParser.pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']);
// output: { 'a': 1, 'c': 3 }
pickBy(object, function)
Returns particular elements that are function result from an object.
DataParser.pickBy({ 'a': 1, 'b': '2', 'c': 3 }, (item) => typeof item !== 'number');
// output: { 'b': '2' }
transform(object, function, accelerator)
Transforms object using a function parameter and accelerator as a start value.
DataParser.transform(
{ a: 1, b: 2, c: 1 },
function (result, value, key) {
(result[value] || (result[value] = [])).push(key);
},
{}
);
// output: { '1': ['a', 'c'], '2': ['b'] }
More
colorGenerator(array / string / number, number (iterator))
Allows to generate colors from an array.
const colorIterator = DataParser.colorGenerator(
[
'#FFEBEE',
'#FCE4EC',
'#F3E5F5',
'#EDE7F6',
'#E8EAF6',
'#E3F2FD',
'#E1F5FE',
'#E0F7FA',
'#E0F2F1',
'#E8F5E9',
'#F1F8E9',
'#F9FBE7',
'#FFFDE7',
'#FFF8E1',
'#FFF3E0',
'#FBE9E7',
'#EFEBE9',
'#FAFAFA',
'#ECEFF1',
],
0
);
const color = colorIterator.next().value;
const color2 = colorIterator.next().value;
// 'color' variable is equal to: '#FFEBEE'
// 'color2' variable is equal to: '#FCE4EC'
// You can also use our predefined arrays:
const colorIterator2 = DataParser.colorGenerator(100, 0);
const color3 = colorIterator2.next().value;
// 'color3' variable is equal to: '#FFCDD2'
const colorIterator3 = DataParser.colorGenerator('lightGreen', 0);
const color4 = colorIterator3.next().value;
// 'color4' variable is equal to: '#F1F8E9'
getCSVDataArray(data (csv), string (delimiter))
Allows to parse a CSV data to an array.
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parsedData = DataParser.getCSVDataArray(data, ',');
// 'parsedData' variable is equal to:
// [
// ['departament', 'done', 'team', 'startDate', 'currentDate', 'deadline'],
// ['Marketing', '0.67', '10', '2019-03-01', '2020-10-23', '2020-12-10'],
// ['Business', '0.49', '12', '2019-01-02', '2020-10-23', '2020-11-30'],
// ['Backend', '0.88','32', '2019-06-01', '2020-10-23', '2020-11-23'],
// ['Frontend', '0.79','29', '2019-08-01', '2020-10-23', '2020-11-30'],
// ['Design', '0.91', '7', '2019-07-01', '2020-10-23', '2020-11-01']
// ]
});
departament,done,team,startDate,currentDate,deadline
Marketing,0.67,10,2019-03-01,2020-10-23,2020-12-10
Business,0.49,12,2019-01-02,2020-10-23,2020-11-30
Backend,0.88,32,2019-06-01,2020-10-23,2020-11-23
Frontend,0.79,29,2019-08-01,2020-10-23,2020-11-30
Design,0.91,7,2019-07-01,2020-10-23,2020-11-01
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import DataParser from 'mdb-data-parser';