# mv-cms-render

> ## Add to project

Latest version **0.3.11** (published 2022-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install mv-cms-render
pnpm add mv-cms-render
yarn add mv-cms-render
bun add mv-cms-render
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.11 |
| Published | 2022-05-23 |
| First published | 2021-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 70 |
| Unpacked size | 67.3 MB |
| Known vulnerabilities | 0 (+10 in 7 direct dependencies) |
| Install scripts | yes |
| Author | Machine Vision |
| Maintainers | mojila, savano20, machine-vision-technology |

## Links

- npm: https://www.npmjs.com/package/mv-cms-render
- npm.io page: https://npm.io/package/mv-cms-render

## Dependencies (70)

- [vue](https://npm.io/package/vue.md) 2.6.14
- [uuid](https://npm.io/package/uuid.md) 8.x
- [vuex](https://npm.io/package/vuex.md) 3.x
- [axios](https://npm.io/package/axios.md) 0.x
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [swiper](https://npm.io/package/swiper.md) 5.x
- [core-js](https://npm.io/package/core-js.md) 3.x
- [echarts](https://npm.io/package/echarts.md) 4.x
- [leaflet](https://npm.io/package/leaflet.md) 1.x
- [prismjs](https://npm.io/package/prismjs.md) 1.x
- [chart.js](https://npm.io/package/chart.js.md) 2.x
- [vue-i18n](https://npm.io/package/vue-i18n.md) 8.x
- [vue-tour](https://npm.io/package/vue-tour.md) 1.x
- [@casl/vue](https://npm.io/package/@casl/vue.md) 1.1.1
- [bootstrap](https://npm.io/package/bootstrap.md) 4.x
- [vue-gauge](https://npm.io/package/vue-gauge.md) ^1.0.3
- [apexcharts](https://npm.io/package/apexcharts.md) 3.x
- [highcharts](https://npm.io/package/highcharts.md) ^9.2.2
- [portal-vue](https://npm.io/package/portal-vue.md) 2.x
- [vue-loader](https://npm.io/package/vue-loader.md) ^15.9.8
- [vue-router](https://npm.io/package/vue-router.md) 3.x
- [vue-select](https://npm.io/package/vue-select.md) 3.x
- [animate.css](https://npm.io/package/animate.css.md) 4.x
- [postcss-rtl](https://npm.io/package/postcss-rtl.md) 1.x
- [vue-chartjs](https://npm.io/package/vue-chartjs.md) 3.x
- [vue-context](https://npm.io/package/vue-context.md) 6.x
- [vue-echarts](https://npm.io/package/vue-echarts.md) 5.0.0-beta.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) 4.x
- [jsonwebtoken](https://npm.io/package/jsonwebtoken.md) 8.x
- [vee-validate](https://npm.io/package/vee-validate.md) 3.x
- [vue2-leaflet](https://npm.io/package/vue2-leaflet.md) 2.x
- [vuedraggable](https://npm.io/package/vuedraggable.md) 2.x
- [@casl/ability](https://npm.io/package/@casl/ability.md) 4.1.6
- [bootstrap-vue](https://npm.io/package/bootstrap-vue.md) 2.x
- [mv-card-trend](https://npm.io/package/mv-card-trend.md) ^0.1.4
- [sass-migrator](https://npm.io/package/sass-migrator.md) ^1.5.2
- [highcharts-vue](https://npm.io/package/highcharts-vue.md) ^1.4.0
- [mv-line-viewer](https://npm.io/package/mv-line-viewer.md) ^0.1.12
- [vue-apexcharts](https://npm.io/package/vue-apexcharts.md) 1.x
- [vue-clipboard2](https://npm.io/package/vue-clipboard2.md) 0.x
- [vue-good-table](https://npm.io/package/vue-good-table.md) 2.x
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.34
- [mv-list-trouble](https://npm.io/package/mv-list-trouble.md) ^0.1.5
- [vue-autosuggest](https://npm.io/package/vue-autosuggest.md) 2.x
- [vue-form-wizard](https://npm.io/package/vue-form-wizard.md) 0.x
- [vue-grid-layout](https://npm.io/package/vue-grid-layout.md) ^2.3.12
- [vue-sweetalert2](https://npm.io/package/vue-sweetalert2.md) 4.x
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [vue-quill-editor](https://npm.io/package/vue-quill-editor.md) 3.x
- [vue-tree-halower](https://npm.io/package/vue-tree-halower.md) 1.x
- [@fullcalendar/vue](https://npm.io/package/@fullcalendar/vue.md) 5.x
- [vue-click-outside](https://npm.io/package/vue-click-outside.md) ^1.1.0
- [vue-feather-icons](https://npm.io/package/vue-feather-icons.md) 5.x
- [@fullcalendar/core](https://npm.io/package/@fullcalendar/core.md) 5.x
- [@fullcalendar/list](https://npm.io/package/@fullcalendar/list.md) 5.x
- [axios-mock-adapter](https://npm.io/package/axios-mock-adapter.md) 1.x
- [vue-awesome-swiper](https://npm.io/package/vue-awesome-swiper.md) 4.x
- [vue-toastification](https://npm.io/package/vue-toastification.md) 1.x
- [vue-prism-component](https://npm.io/package/vue-prism-component.md) 1.x
- [@fullcalendar/common](https://npm.io/package/@fullcalendar/common.md) 5.x
- [@vue/composition-api](https://npm.io/package/@vue/composition-api.md) ^1.2.4
- [vue-cleave-component](https://npm.io/package/vue-cleave-component.md) 2.x
- [vue-ripple-directive](https://npm.io/package/vue-ripple-directive.md) 2.x
- [vue-slider-component](https://npm.io/package/vue-slider-component.md) 3.x
- [@fullcalendar/daygrid](https://npm.io/package/@fullcalendar/daygrid.md) 5.x
- [vue-perfect-scrollbar](https://npm.io/package/vue-perfect-scrollbar.md) 0.x
- [@fullcalendar/timegrid](https://npm.io/package/@fullcalendar/timegrid.md) 5.x
- [mv-organization-charts](https://npm.io/package/mv-organization-charts.md) ^0.1.12
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) 8.x
- [@fullcalendar/interaction](https://npm.io/package/@fullcalendar/interaction.md) 5.x

## Recent versions

- 0.3.11 (latest) — 2022-05-23
- 0.3.10 — 2022-05-23
- 0.3.9 — 2022-05-20
- 0.3.8 — 2022-05-19
- 0.3.7 — 2022-04-21
- 0.3.6 — 2022-04-20
- 0.3.5 — 2022-04-20
- 0.3.4 — 2022-04-19
- 0.3.3 — 2022-04-19
- 0.3.2 — 2022-04-19
- 0.3.1 — 2022-04-17
- 0.3.0 — 2022-04-14
- 0.2.99 — 2022-04-14
- 0.2.98 — 2022-04-14
- 0.2.97 — 2022-04-13
- … 116 more at https://npm.io/package/mv-cms-render/versions

## README

# Cms Render

## Add to project

```
yarn add mv-cms-render
or
npm i mv-cms-render
```

## How to use

```vue
<template>
  <cms-render
    ref="mvCmsRender"
    :dashboard-id="dashboardId"
    :token="configToken"
    :is-dark="isDark"
    :filters.sync="filters"
    :update-filters.sync="updateFilters"
    base-url="https://backbone.machinevision.glogal/cms/api"
    :refresh="refresh"
    :setting-group="settingGroup"
    :auto-fetch="autoFetch"
    @click="onClick"
  ></cms-render>
</template>

<script>
import CmsRender from "mv-cms-render";
export default {
  components: { CmsRender },
  data: () => ({
    dashboardId:
      "60766ad124adadfereq09",
    configToken:
      "Bearer dkjsadhsaghjryeryi2bk_fdhsjkfh37",
    isDark: false,
    updateFilters: [
      {
        name: 'Filter-1',
        value: 'male',
        operator: '=',
      }
    ],
    /** refresh data after 5 second */
    refresh: 5000,
    settingGroup: false,
    autoFetch: true
  }),
  methods: {
    refreshData() {
      this.$refs.mvCmsRender.reload()
    }
  }
};
</script>
```

# Notes
<b>Need to be use under apps that apply Vuexy style so the component vuexy style not overriding apps custom style.</b>

## Props
  - [dashboard-id](#dashboard-id)
  - [token](#token)
  - [is-dark](#is-dark)
  - [filters](#filters)
  - [update-filters](#update-filters)
  - [base-url](#base-url)
  - [click-event](#click)
  - [refresh](#refresh)
  - [setting-group](#setting-group)
  - [auto-fetch](#auto-fetch)

## Event
  - [Reload all widget data](#reload)

## Dashboard-id
Use dashboard Id from CMS system, can be generated from embed dashboard menu at `edit dashboard - CMS`.
```js
"60766ad124adadfereq09"
```
## Token
Use token from CMS system generated by embed dashboard menu or using other product's token generated by Datacore.
```js
`Bearer ${user_token}`
```
## Is-dark
Accept `Boolean` value to set additional element and apex chart dark theme.

## Filters
Return `filters` dataset that can be used to reference filters that need to be reevaluate

```js
filters = [
  {
    name: "Filter-1",
    operator: "=",
    property: "group_exams_gender",
    propertyType: "string",
    value: "male",
    widgets: ["60c18c69c65520001422e662"],
    _id: "60c61f3a471c96001211a619",
  }
]
```

## Update-filters
Update this props to reevaluate data series with additional filters. Don't omitted `name` property because it will be needed for referencing to the original filters.

Only `value`, `operator` property that can be change.

```js
const updateFilters = [
  {
    name: 'Filter-1',
    value: 'male',
    operator: '=',
  }
]
```

## Base-url
Set REST api base url when fetching data. Default `https://backbone.machinevision.glogal/cms/api`.

## Click
Click event on widget apexchart and card. Return general object `widget` and `params`.

### Widget
Hold clicked widget object.

### Params
Hold object based on clicked widgets:
  - Apex chart return `visualize` response object and `filter` object.
  - Card return string `field` of clicked status of string `code` of clicked card

## Refresh
Refresh widget visualize data periodically based on the value, accept number value in millisecond
### Reload
To reload all data from the REST api, use refs instance to access components method
```vue
<template>
  <cms-render
    ref="mvCmsRender"
    ...
  ></cms-render>
</template>
<script>
export default {
  methods: {
    refreshData() {
      this.$refs.mvCmsRender.reload()
    }
  }
}
</script>
```

## Setting-group
Accept `boolean` value to fetch and use setting group filter api for widget-visualize

## Auto-fetch
Accept `boolean` value to set auto fetch widget-visualize, if false, when mounted, widget-visualize will not be triggered

---
_Source: https://npm.io/package/mv-cms-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._