折旧

这个套件已经贬值,有利于 @luzmo/vue-embed (英语)

Vue.js Cumul.io 车板

这是 Vue.js 嵌入库 卡穆尔.io vue 2或Vue 3应用程序中的仪表板.

目录

1. 安装指令
2. 使用量
3. 活动
4. 公共方法
5. 实例
6. 更改日志
7. 移徙
8. 快速链接

安装指令

npm i @cumul.io/vue-cumulio-dashboard

使用量

第3组

import { createApp } from 'vue';
import App from './App.vue';
import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard';

const app = createApp(App);
// Defines the component at app level
app.use(VueCumulioDashboard);
app.mount('#app');

备选案文2

import Vue from 'vue';
import App from './App.vue';
import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard/vue2';

Vue.use(VueCumulioDashboard);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

在您的 HTML 模板中.

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :language="'en'">
</cumulio-dashboard>

OR

<!-- Embed a Item by passing the item id as well -->
<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :itemId="itemId"
  :language="'en'">
</cumulio-dashboard>

可用的道具
在可用的道具列表下可以添加到您的 Cumulio-dashboard

活动

公共方法

构成部分

...

export default {
  name: 'Example',

  methods: {
    // To refresh data from item / dashboard
    refreshData(itemId){
      this.$refs.dashboardInstance.refreshData(itemId);
    },

    // Get data from a item
    async getData(){
      const result = await this.$refs.dashboardInstance.getData('6759f444-32b8-42d8-8786-eb88fc2a194');
      console.log(result)
    },

  }

  ...

}

getDashboards(): Promise<any[]>
// Returns an instantly resolved promise with an array of all the visible dashboards on a page with their information.

getFilters(): Promise<FilterGroup[]>
// Returns an instantly resolved promise with an array of all visible dashboards with their active filters.

getData(itemId: string ): Promise<ItemData[]>
// Returns a promise with the data of a item.

setAuthorization(key: string, token: string): Promise<void>
// Changes the authorization of all or one dashboard. Returns an empty promise.

refreshData(id?: string): Promise<void>
// Refreshes the data of a specific item when the id of that item is supplied. Without a itemId this refreshes the data in all items. Returns an empty promise.

reloadDashboard(): Promise<void>
// Reload the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded without reloading the iFrame). Returns an empty promise.

exportDashboard(type?: string): Promise<ExportDashboard>
// Exports the current dashboard as either pdf or png. a container class needs to be passed as an argument and an optional type parameter. Returns a promise with information on the export.

getAccessibleDashboards(): Promise<AccessibleDashboard[]>
// Get accessible dashboards in a integration, provide either dashboardId, dashboardSlug, container if a dashboard is already loaded.
// Or provide authKey, apiHost and authToken

setEditMode(editMode: string): Promise<void>
// Sets the editMode of the current dashboard. Accepted parameters: view , editLimited , editFull .

实例

带有灰色加载器背景的仪表板

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :loaderBackground="'rgb(238,243,246)'">
</cumulio-dashboard>

带有紫色加载器自旋器颜色的仪表板,屏幕 Mode 移动和开关ScreenModeOnResize 虚假,这样仪表板将保持移动模式

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :loaderSpinnerColor="'purple'"
  :screenMode="'mobile'"
  @load="logEvent"
  :switchScreenModeOnResize="false">
</cumulio-dashboard>

更改日志

• 更改日志

移徙

从2.X.X- > 3.X.X版本迁移

• 过滤器显示为 FilterGroup 数组代替一个 Filter 阵列. FilterGroup 是一个包含过滤器列表和(或)描述其关系的条件的对象. FilterGroup 也可以有儿童组支持复杂的过滤逻辑

// FilterGroup 
{
  id: string;
  condition: 'and' | 'or';
  filters: Filter[]; 
  subGroups: FilterGroup[];
  origin: string;
  datasetId?: string; // dataset id in case of dahsboard level filters
  itemId?: string; // chart id in case of chart level filters
}

// Filter
{
  expression: string;
  parameters: [];
  properties: {
    id: string;
    origin: string;
    type: string;
    itemId: string;
    ignore?: string[];
  }
}

• getFilters() 方法响应和 changedFilters 事件数据现在包含过滤器,作为 FilterGroup 对象代替 Filter 对象

getFilters(): Promise<FilterGroup[]>

// changedFilters event data
{
  changed: FilterGroup[]; // changed filters
  filters: FilterGroup[]; // all filters
  // ... other event properties
}

从1.X.X - > 2.X.X版本迁移

路边 vue-cumulio-dashboard 为 vue2 导入已更改。 您现在可以通过以下方式导入 .

import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard/vue2';

Vue3的进口保持不变.

import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard';

从"0.X.X- > 1.X.X.X

• 所有服务方法,例如 CumulioService.getFilters, (中文(简体) ), CumulioService.getData .现在应调用组件实例(可用 $refs) (中文(简体) ).
• chartId 现在叫做 itemId, (中文(简体) ), charts-rendered 现在叫做 items-rendered
• 所有事件现在都属于格式 { data: { ...eventData } }, (中文(简体) ), eventData 属于格式

{
  dashboardId?: string;
  dashboardSlug?: string;
  itemId?: string;
  language: string;
  name: string;
  screenMode: string;
  type: string;
  dimensions?: object; // populated depending on the event
  changed?: [];  // populated depending on the event
  filters?: [];  // populated depending on the event
  item?: string;    // populated depending on the event
  origin?: string;  // populated depending on the event
  object?: string;  // populated depending on the event
  data?: object;       // populated depending on the event
}

• getFilters 现在返回一系列过滤器. [...objectOfFilters], (中文(简体) ), objectOfFilters 属于格式

[{
  expression: string;
  parameters: [];
  properties: {
    id: string;
    ignore?: string[];
    origin: string;
    type: string;
    viz: string;
  }
}]

为了更多 迁移请点击此处。 。 。 .

快速链接

卡穆尔.io | Vue2 代码框示例 | Vue3 代码框示例 | 更改日志 | 移徙