Cms Render

Add to project

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

How to use

<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

Need to be use under apps that apply Vuexy style so the component vuexy style not overriding apps custom style.

Props

• dashboard-id
• token
• is-dark
• filters
• update-filters
• base-url
• click-event
• refresh
• setting-group
• auto-fetch

Event

• Reload all widget data

Dashboard-id

Use dashboard Id from CMS system, can be generated from embed dashboard menu at edit dashboard - CMS.

"60766ad124adadfereq09"

Token

Use token from CMS system generated by embed dashboard menu or using other product's token generated by Datacore.

`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

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.

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

<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