Data parser
Vue 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
<template>
<MDBDatatable :dataset="datasetCSV" />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBTimepicker
},
setup() {
const columnsCSV = [
{ label: "Country", field: "country" },
{ label: "Code", field: "code" },
{ label: "Population 2015", field: "population2015" },
{ label: "Population 2016", field: "population2016" },
];
const datasetCSV = ref({
columns: columnsCSV,
});
fetch("data.csv")
.then((data) => data.text())
.then((data) => {
const { parse } = useParser("datatable", "csv", {
rows: { start: 10, end: 14 },
columns: {
indexes: [0, 1, 57, 58],
},
});
const { rows } = parse(data);
datasetCSV.value.rows = rows;
});
return {
datasetCSV,
};
}
};
</script>
<script setup lang="ts">
import { MDBDatatable } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const columnsCSV = [
{ label: "Country", field: "country" },
{ label: "Code", field: "code" },
{ label: "Population 2015", field: "population2015" },
{ label: "Population 2016", field: "population2016" },
];
const datasetCSV = ref({
columns: columnsCSV,
});
fetch("data.csv")
.then((data: string) => data.text())
.then((data: string) => {
const { parse } = useParser("datatable", "csv", {
rows: { start: 10, end: 14 },
columns: {
indexes: [0, 1, 57, 58],
},
});
const { rows } = parse(data);
datasetCSV.value.rows = rows;
});
</script>
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
<template>
<section class="w-100 p-4" style="background-color: rgb(7 43 49); border-radius: .5rem .5rem 0 0;">
<MDBDatatable :dataset="datasetJSON" dark style="background-color: rgb(7 43 49)" />
</section>
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBTimepicker
},
setup() {
const columnsJSON = [
{ label: "Country", field: "Country" },
{ label: "Code", field: "Country_Code" },
{ label: "Population 2015", field: "Year_2015" },
{ label: "Population 2016", field: "Year_2016" },
];
const datasetJSON = ref({
columns: columnsJSON,
});
fetch("data.json")
.then((data) => data.json())
.then((data) => {
const { parse } = useParser("datatable", "json", {
rows: { start: 30, end: 100 },
keys: columnsJSON.map((column) => column.field),
});
const { rows } = parse(data);
datasetJSON.value.rows = rows;
});
return {
datasetJSON,
};
},
};
</script>
<script setup lang="ts">
import { MDBDatatable } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const columnsJSON = [
{ label: "Country", field: "Country" },
{ label: "Code", field: "Country_Code" },
{ label: "Population 2015", field: "Year_2015" },
{ label: "Population 2016", field: "Year_2016" },
];
const datasetJSON = ref({
columns: columnsJSON,
});
fetch("data.json")
.then((data: string) => data.json())
.then((data: {}[]) => {
const { parse } = useParser("datatable", "json", {
rows: { start: 30, end: 100 },
keys: columnsJSON.map((column) => column.field),
});
const { rows } = parse(data);
datasetJSON.value.rows = rows;
});
</script>
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
<template>
<MDBVectorMap
readonly
fill="#fff"
:strokeWidth="0.2"
:hover="false"
:colorMap="colorMapCSV"
:markers="markers"
/>
</template>
<script>
import { MDBVectorMap } from "mdb-vue-vector-maps";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBVectorMap
},
setup() {
const colorMapCSV = ref([]);
fetch("data.csv")
.then((data) => data.text())
.then((data) => {
const { parse } = useParser("vectorMap", "csv", {
color: "lightGreen",
field: 42,
rows: {
start: 1,
},
step: 8000000,
countryIdentifier: 1,
});
const { colorMap } = parse(data);
colorMapCSV.value = colorMap;
});
return {
colorMapCSV,
};
},
};
</script>
<script setup lang="ts">
import { MDBVectorMap } from "mdb-vue-vector-maps";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const colorMapCSV = ref([]);
fetch("data.csv")
.then((data: string) => data.text())
.then((data: {}[]) => {
const { parse } = useParser("vectorMap", "csv", {
color: "lightGreen",
field: 42,
rows: {
start: 1,
},
step: 8000000,
countryIdentifier: 1,
});
const { colorMap } = parse(data);
colorMapCSV.value = colorMap;
});
</script>
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):
<template>
<section class="w-100" style="background-color: rgb(7 43 49); border-radius: .5rem .5rem 0 0;">
<MDBRow class="m-0">
<MDBCol lg="3" class="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">
<li class="vector-map-legend__item my-2" v-for="({ color, min, max }, key) in legendJSON" :key="key">
<div class="vector-map-legend__color me-2 border border-light" :style="`background-color: ${color}`"></div>
<small>{{
key === 0
? `< ${max}`
: key === legendJSON.length - 1
? `> ${min}`
: `${min} - ${max}`
}}</small>
</li>
</ul>
</MDBCol>
<MDBCol lg="9" class="p-0">
<MDBVectorMap readonly fill="rgb(7 43 49)" :tooltips="true" stroke="#fff" btnClass="btn-light" :hover="false"
:colorMap="colorMapJSON" :markers="markers" />
</MDBCol>
</MDBRow>
</section>
</template>
<script>
import { MDBVectorMap } from "mdb-vue-vector-maps";
import { MDBRow, MDBCol } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBVectorMap,
MDBRow,
MDBCol
},
setup() {
const colorMapJSON = ref([]);
const markers = ref([]);
const legendJSON = ref([]);
fetch("data.json")
.then((data) => data.json())
.then((data) => {
const { parse, getMapCoordinates } = useParser("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 } = parse(data);
legendJSON.value = legend;
colorMapJSON.value = colorMap;
markers.value = [
{
...getMapCoordinates(52.107811, 19.94487),
fill: "rgb(185, 211, 220)",
type: "bullet",
label: "Warsaw",
latitude: 52.2297,
longitude: 21.0122,
},
];
});
return {
colorMapJSON,
markers,
legendJSON
};
},
};
</script>
<script setup lang="ts">
import { MDBVectorMap } from "mdb-vue-vector-maps";
import { MDBRow, MDBCol } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const colorMapJSON = ref([]);
const markers = ref([]);
const legendJSON = ref([]);
fetch("data.json")
.then((data: string) => data.json())
.then((data: {}[]) => {
const { parse, getMapCoordinates } = useParser("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 } = parse(data);
legendJSON.value = legend;
colorMapJSON.value = colorMap;
markers.value = [
{
...getMapCoordinates(52.107811, 19.94487),
fill: "rgb(185, 211, 220)",
type: "bullet",
label: "Warsaw",
latitude: 52.2297,
longitude: 21.0122,
},
];
});
</script>
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
<template>
<MDBChart
type="line"
:data="chartCSVData"
:options="chartCSVOptions"
dataLabels
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const chartCSVData = ref({});
const chartCSVOptions = ref({
plugins: {
tooltip: {
displayColors: false,
},
},
});
fetch("data.csv")
.then((data) => data.text())
.then((data) => {
const { parse } = useParser("chart", "csv", {
rows: { start: 170, end: 176 },
datasetLabel: 0,
labelsIndex: 0,
formatLabel: (label) => {
return label.replace("Year_", "");
},
});
const { labels, datasets } = parse(data);
chartCSVData.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
};
});
return {
chartCSVData,
chartCSVOptions
};
},
}
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const chartCSVData = ref({});
const chartCSVOptions = ref({
plugins: {
tooltip: {
displayColors: false,
},
},
});
fetch("data.csv")
.then((data: string) => data.text())
.then((data: {}[]) => {
const { parse } = useParser("chart", "csv", {
rows: { start: 170, end: 176 },
datasetLabel: 0,
labelsIndex: 0,
formatLabel: (label) => {
return label.replace("Year_", "");
},
});
const { labels, datasets } = parse(data);
chartCSVData.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
};
});
</script>
Coordinates
Parsing data for scatter & bubble charts
<template>
<MDBChart
type="bubble"
:data="chartCSVDataCoords"
:options="chartCSVOptionsCoords"
dataLabels
/>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const chartCSVDataCoords = ref({});
const chartCSVOptionsCoords = ref({
plugins: {
tooltip: {
displayColors: false,
},
},
scales: {
x: {
title: {
display: true,
text: "Time consumed (%)",
},
},
y: {
title: {
display: true,
text: "Tasks done (%)",
},
},
},
});
fetch("data-bubble.csv")
.then((data) => data.text())
.then((data) => {
const { parse } = useParser("chart", "csv", {
datasetLabel: 0,
labelsIndex: 0,
rows: {
start: 1,
},
getCoordinates: ([
// eslint-disable-next-line no-unused-vars
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 } = parse(data);
chartCSVDataCoords.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
};
});
return {
chartCSVDataCoords,
chartCSVOptionsCoords
};
},
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const chartCSVDataCoords = ref({});
const chartCSVOptionsCoords = ref({
plugins: {
tooltip: {
displayColors: false,
},
},
scales: {
x: {
title: {
display: true,
text: "Time consumed (%)",
},
},
y: {
title: {
display: true,
text: "Tasks done (%)",
},
},
},
});
fetch("data-bubble.csv")
.then((data: string) => data.text())
.then((data: {}[]) => {
const { parse } = useParser("chart", "csv", {
datasetLabel: 0,
labelsIndex: 0,
rows: {
start: 1,
},
getCoordinates: ([
// eslint-disable-next-line no-unused-vars
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 } = parse(data);
chartCSVDataCoords.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
};
});
</script>
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)
<template>
<div style="background-color: rgb(7 43 49);">
<MDBChart
type="line"
:data="chartJSONData"
:options="chartJSONOptions"
dataLabels
/>
</div>
</template>
<script>
import { useParser } from "mdb-vue-data-parser";
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const chartJSONData = ref({});
const chartJSONOptions = ref({
plugins: {
tooltip: {
displayColors: false,
backgroundColor: "rgba(255, 255, 255, 0.9)",
titleFontColor: "rgb(7, 43, 49)",
bodyFontColor: "rgb(7, 43, 49)",
},
legend: {
labels: {
fontColor: "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 { parse } = useParser("chart", "json", {
datasetLabel: "Country",
ignoreKeys: ["Country", "Country_Code"],
rows: { start: 9, end: 14 },
formatLabel: (label) => {
return label.replace("Year_", "");
},
color: 100,
});
const { labels, datasets } = parse(data);
chartJSONData.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
};
});
return {
chartJSONData,
chartJSONOptions
};
},
};
</script>
<script setup lang="ts">
import { useParser } from "mdb-vue-data-parser";
import { MDBChart } from "mdb-vue-ui-kit";
import { ref } from "vue";
const chartJSONData = ref({});
const chartJSONOptions = ref({
plugins: {
tooltip: {
displayColors: false,
backgroundColor: "rgba(255, 255, 255, 0.9)",
titleFontColor: "rgb(7, 43, 49)",
bodyFontColor: "rgb(7, 43, 49)",
},
legend: {
labels: {
fontColor: "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: string) => data.json())
.then((data: {}[]) => {
const { parse } = useParser("chart", "json", {
datasetLabel: "Country",
ignoreKeys: ["Country", "Country_Code"],
rows: { start: 9, end: 14 },
formatLabel: (label) => {
return label.replace("Year_", "");
},
color: 100,
});
const { labels, datasets } = parse(data);
chartJSONData.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
pointRadius: 0,
borderColor: dataset.color,
color: dataset.color,
})),
};
});
</script>
Coordinates
Parsing data for scatter & bubble charts
<template>
<div style="background-color: rgb(7 43 49);">
<MDBChart type="bubble" :data="chartJSONDataCoords" :options="chartJSONOptionsCoords" dataLabels />
</div>
</template>
<script>
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBChart
},
setup() {
const chartJSONDataCoords = ref({});
const chartJSONOptionsCoords = ref({
plugins: {
tooltip: {
displayColors: false,
backgroundColor: "rgba(255, 255, 255, 0.9)",
titleFontColor: "rgb(7, 43, 49)",
bodyFontColor: "rgb(7, 43, 49)",
},
legend: {
labels: {
fontColor: "rgba(255, 255, 255, 0.7)",
},
},
},
scales: {
x: {
ticks: {
color: "rgba(255, 255, 255, 0.7)",
},
title: {
display: true,
text: "Time consumed (%)",
},
},
y: {
ticks: {
color: "rgba(255, 255, 255, 0.7)",
},
grid: {
color: "rgba(255, 255, 255, 0.3)",
},
title: {
display: true,
text: "Tasks done (%)",
},
},
},
});
fetch("data-bubble.json")
.then((data) => data.json())
.then((data) => {
const { parse } = useParser("chart", "json", {
datasetLabel: "departament",
getCoordinates: ({
// eslint-disable-next-line no-unused-vars
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: 100,
});
const { labels, datasets } = parse(data);
chartJSONDataCoords.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
};
});
return {
chartJSONDataCoords,
chartJSONOptionsCoords
};
},
};
</script>
<script setup lang="ts">
import { MDBChart } from "mdb-vue-ui-kit";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const chartJSONDataCoords = ref({});
const chartJSONOptionsCoords = ref({
plugins: {
tooltip: {
displayColors: false,
backgroundColor: "rgba(255, 255, 255, 0.9)",
titleFontColor: "rgb(7, 43, 49)",
bodyFontColor: "rgb(7, 43, 49)",
},
legend: {
labels: {
fontColor: "rgba(255, 255, 255, 0.7)",
},
},
},
scales: {
x: {
ticks: {
color: "rgba(255, 255, 255, 0.7)",
},
title: {
display: true,
text: "Time consumed (%)",
},
},
y: {
ticks: {
color: "rgba(255, 255, 255, 0.7)",
},
grid: {
color: "rgba(255, 255, 255, 0.3)",
},
title: {
display: true,
text: "Tasks done (%)",
},
},
},
});
fetch("data-bubble.json")
.then((data: string) => data.json())
.then((data: {}[]) => {
const { parse } = useParser("chart", "json", {
datasetLabel: "departament",
getCoordinates: ({
// eslint-disable-next-line no-unused-vars
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: 100,
});
const { labels, datasets } = parse(data);
chartJSONDataCoords.value = {
labels,
datasets: datasets.map((dataset) => ({
...dataset,
borderColor: dataset.color,
backgroundColor: dataset.color,
color: dataset.color,
})),
};
});
</script>
[
{
"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.
<template>
<div style="background-color: rgb(7 43 49);">
<MDBTreeview :structure="structureJSON" />
</div>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
export default {
components: {
MDBTreeview
},
setup() {
const structureJSON = ref([]);
const expandFolder = ({ name }) => {
const expandedFolders = ["Desktop", "Programming", "node_modules"];
return expandedFolders.includes(name);
};
fetch("data-treeview.json")
.then((data) => data.json())
.then((data) => {
const { parse } = useParser("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 dataJson = parse(data);
structureJSON.value = dataJson;
});
return {
structureJSON
};
},
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { useParser } from "mdb-vue-data-parser";
import { ref } from "vue";
const structureJSON = ref([]);
const expandFolder = ({ name }) => {
const expandedFolders = ["Desktop", "Programming", "node_modules"];
return expandedFolders.includes(name);
};
fetch("data-treeview.json")
.then((data: string) => data.json())
.then((data: {}[]) => {
const { parse } = useParser("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 dataJson = parse(data);
structureJSON.value = dataJson;
});
</script>
[
{
"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": "jpg"
}
]
},
{
"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": "jpg"
}
]
},
{
"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": "jpg"
},
{
"name": "2",
"extension": "jpg"
},
{
"name": "3",
"extension": "jpg"
},
{
"name": "4",
"extension": "jpg"
}
]
},
{
"name": "School trip",
"directory": true,
"content": [
{
"name": "ABD001",
"extension": "jpg"
},
{
"name": "ADB002",
"extension": "jpg"
},
{
"name": "ADB004",
"extension": "jpg"
},
{
"name": "ADB005",
"extension": "jpg"
}
]
}
]
}
]
Data parser - API
Usage
<script>
import { useParser } from "mdb-vue-data-parser";
export default {
setup(){
const { parse } = useParser('datatable', 'csv', options);
const data = parse(data);
}
}
</script>
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 |
parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
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 |
parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
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 |
parse(csvData)
|
getValueExtrema
|
data (csv/json), field (index/key) | Returns maximum and minimum values in a row |
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 |
parse(jsonData)
|
Util functions
Arrays
flattenDeep(array)
Flattens a multi-level array into single-level one.
<script>
import { flattenDeep } from "mdb-vue-data-parser";
export default {
setup() {
flattenDeep([1, [2, [3, [4]], 5]]);
// output: [1, 2, 3, 4, 5]
}
}
</script>
pullAll(array, array)
Pulls particular elements from an array.
<script>
import { pullAll } from "mdb-vue-data-parser";
export default {
setup() {
pullAll(['a', 'b', 'c', 'a', 'b', 'c'], ['a', 'c']);
// output: ['b', 'b']
}
}
</script>
take(array, number)
Returns a particular amount of items from the start of an array.
<script>
import { take } from "mdb-vue-data-parser";
export default {
setup() {
take([1, 2, 3, 4, 5], 2);
// output: [1, 2]
}
}
</script>
takeRight(array, number)
Returns a particular amount of items from the end of an array.
<script>
import { takeRight } from "mdb-vue-data-parser";
export default {
setup() {
takeRight([1, 2, 3, 4, 5], 2);
// output: [4, 5]
}
}
</script>
union(set of arrays)
Concatenates many arrays into one, single-level and removes duplicates.
<script>
import { union } from "mdb-vue-data-parser";
export default {
setup() {
union([1, 2], [3, ['four', [5]]], ['six']);
// output: [1, 2, 3, 'four', 5, 'six']
}
}
</script>
unionBy(function / string, set of arrays / objects)
Concatenates many arrays into one, single-level by particular criterium and removes duplicates.
<script>
import { unionBy } from "mdb-vue-data-parser";
export default {
setup() {
unionBy(Math.floor, [2.1], [1.2, 2.3]);
// output: [2.1, 1.2]
}
}
</script>
uniq(array)
Returns an array without duplicates.
<script>
import { uniq } from "mdb-vue-data-parser";
export default {
setup() {
uniq([1, 2, 1, 3]);
// output: [1, 2, 3]
}
}
</script>
uniqBy(function / string, array / object)
Returns an array without duplicates set by a particular criterium.
<script>
import { uniqBy } from "mdb-vue-data-parser";
export default {
setup() {
uniqBy(Math.floor, [2.1, 1.2, 2.3]);
// output: [2.1, 1.2]
}
}
</script>
zip(arrays)
Zips first items of a set of arrays into one array, second ones into second and so on.
<script>
import { zip } from "mdb-vue-data-parser";
export default {
setup() {
zip(['a', 'b'], [1, 2], [true, false]);
// output: [['a', 1, true], ['b', 2, false]]
}
}
</script>
zipObject(array, array)
Creates an object with keys from the first array and values from the second one.
<script>
import { zipObject } from "mdb-vue-data-parser";
export default {
setup() {
zipObject(['a', 'b'], [1, 2]);
// output: { 'a': 1, 'b': 2 }
}
}
</script>
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.
<script>
import { countBy } from "mdb-vue-data-parser";
export default {
setup() {
countBy([6.1, 4.2, 6.3], Math.floor);
// output: { 6: 2, 4: 1 }
countBy({ x: 'one', y: 'two', z: 'three', a: 'one' }, 'length');
// output: { 3: 3, 5: 1 }
}
}
</script>
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.
<script>
import { groupBy } from "mdb-vue-data-parser";
export default {
setup() {
groupBy([6.1, 4.2, 6.3], Math.floor);
// output: { 6: [6.1, 6.3], 4: [4.2] }
groupBy({ x: 'one', y: 'two', z: 'three', a: 'one' }, 'length');
// output: { 3: ['one', 'two', 'one'], 5: ['three'] }
}
}
</script>
sortBy(array / object, array)
Returns a sorted array by values from the second parameter.
<script>
import { sortBy } from "mdb-vue-data-parser";
export default {
setup() {
const vehicles = [
{ name: 'car', id: 1 },
{ name: 'airplane', id: 4 },
{ name: 'bike', id: 2 },
{ name: 'boat', id: 3 },
];
sortBy(vehicles, ['name', 'id']);
// output:
// [
// { name: 'airplane', id: 4 },
// { name: 'bike', id: 2 },
// { name: 'boat', id: 3 },
// { name: 'car', id: 1 }
// ]
}
}
</script>
orderBy(array / object, array, array)
Returns a sorted array by values from the second parameter and order from the third one.
<script>
import { orderBy } from "mdb-vue-data-parser";
export default {
setup() {
const vehicles = [
{ name: 'car', id: 1 },
{ name: 'airplane', id: 4 },
{ name: 'bike', id: 2 },
{ name: 'boat', id: 3 },
];
orderBy(vehicles, ['name', 'id'], ['desc', 'desc']);
// output:
// [
// { name: 'car', id: 1 },
// { name: 'boat', id: 3 },
// { name: 'bike', id: 2 },
// { name: 'airplane', id: 4 }
// ]
}
}
</script>
Objects
invert(object)
Inverts object keys with their values and overwrites duplicates.
<script>
import { invert } from "mdb-vue-data-parser";
export default {
setup() {
invert({ '1': 'a', '2': 'b', '1': 'c' });
// output: { 'c': '1', 'b': '2' }
}
}
</script>
invertBy(object, function(optional))
Inverts object keys with their values and puts duplicates into the array.
<script>
import { invertBy } from "mdb-vue-data-parser";
export default {
setup() {
invertBy({ 'a': '1', 'b': '2', 'c': '1' });
// output: { '1': ['a', 'c'], '2': ['b'] }
invertBy({ 'a': '1', 'b': '2', 'c': '1' }, (key) => `group${key}`);
// output: { 'group1': ['a', 'c'], 'group2': ['b'] }
}
}
</script>
omit(object, array / string)
Returns object without particular elements.
<script>
import { omit } from "mdb-vue-data-parser";
export default {
setup() {
omit({ 'a': '1', 'b': '2', 'c': '3' }, ['a', 'c']);
// output: { 'b': '2' }
}
}
</script>
omitBy(object, function)
Returns object without particular elements that are the function result.
<script>
import { omitBy } from "mdb-vue-data-parser";
export default {
setup() {
omitBy({ 'a': 1, 'b': '2', 'c': 3 }, (item) => typeof item !== 'number');
// output: { 'a': 1, 'c': 3 }
}
}
</script>
pick(object, array)
Returns particular elements from an object.
<script>
import { pick } from "mdb-vue-data-parser";
export default {
setup() {
pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']);
// output: { 'a': 1, 'c': 3 }
}
}
</script>
pickBy(object, function)
Returns particular elements that are function result from an object.
<script>
import { pickBy } from "mdb-vue-data-parser";
export default {
setup() {
pickBy({ 'a': 1, 'b': '2', 'c': 3 }, (item) => typeof item !== 'number');
// output: { 'b': '2' }
}
}
</script>
transform(object, function, accelerator)
Transforms object using a function parameter and accelerator as a start value.
<script>
import { transform } from "mdb-vue-data-parser";
export default {
setup() {
transform(
{ a: 1, b: 2, c: 1 },
function (result, value, key) {
(result[value] || (result[value] = [])).push(key);
},
{}
);
// output: { '1': ['a', 'c'], '2': ['b'] }
}
}
</script>
More
colorGenerator(array / string / number, number (iterator))
Allows to generate colors from an array.
<script>
import { colorGenerator } from "mdb-vue-data-parser";
export default {
setup() {
const colorIterator = 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 = colorGenerator(100, 0);
const color3 = colorIterator2.next().value;
// 'color3' variable is equal to: '#FFCDD2'
const colorIterator3 = colorGenerator('lightGreen', 0);
const color4 = colorIterator3.next().value;
// 'color4' variable is equal to: '#F1F8E9'
}
}
</script>
getCSVDataArray(data (csv), string (delimiter))
Allows to parse a CSV data to an array.
<script>
import { getCSVDataArray } from "mdb-vue-data-parser";
export default {
setup() {
fetch('data.csv')
.then((data) => data.text())
.then((data) => {
const parsedData = 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']
// ]
});
}
}
</script>
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';