# MV Components

> A collection of
> [MV Components](https://www.npmjs.com/package/mv-components)
> implemented using [Vue](https://vuejs.org/)

## Getting Started

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install --save mv-components
```

## Usage

Install MV Components globally in the `main.js` file.

```js
import 'mv-components'
import 'mv-components/dist/mvComponents.css'
```

In your components:
```vue
<template>
    <MTextHorizontal :data="data" :options="options" />
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            id: 1,
            value: 50
          }
        ],
        options: {
          label: 'Standar',
          unit: '%',
          value: 'value',
          filter_by: 'id'
        }
      }
    }
  }
</script>
```

You can use `<DynamicWidget />`
```vue
<template>
    <DynamicWidget :data="data" :options="options" type="MTextHorizontal" />
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            id: 1,
            value: 50
          }
        ],
        options: {
          label: 'Standar',
          unit: '%',
          value: 'value',
          filter_by: 'id'
        }
      }
    }
  }
</script>
```

Available components:
*  [**Chart**](src/components/widgetItems/charts/highchart)
    *  `<MPieChart />`
*  [**Text**](src/components/widgetItems/text)
    *  `<MTextHorizontal />`
    *  `<MTextVertical />`
*  [**Table**](src/components/widgetItems/table)
    *  `<MFreezeTable />`