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.

Data parser plugin built with the latest Bootstrap 5. CSV and JSON data display customization. Plenty of configurations such as vector maps, datatables, and many others.

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

        
            
            <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

        
            
        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:

  • red
  • pink
  • purple
  • deepPurple
  • indigo
  • lightBlue
  • cyan
  • teal
  • green
  • lightGreen
  • lime
  • yellow
  • amber
  • orange
  • deepOrange
  • gray
  • blueGray

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:

  • mdb
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

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';