折旧

这个套件已经贬值,有利于 @luzmo/反应-嵌入

反应-积分-dashboard

这是用于嵌入的 React 库 卡穆尔.io 反应应用程序中的仪表板.

目录

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

安装指令

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

使用量

import { CumulioDashboardComponent, CumulioDashboard } from '@cumul.io/react-cumulio-dashboard';
import { useRef } from 'react';
...
  function CumulioWrapper() {
    const ref = useRef<CumulioDashboard>(null);
    return (
      <div className="App">
        <button
          onClick={async (e) => console.log(await ref.current.exportDashboard())}
        >
          Export Dashboard
        </button>
        <CumulioDashboardComponent
          ref={ref}
          authKey="<!-- your generated authKey -->"
          authToken="<!-- your generated authToken -->"
          dashboardSlug="test"
          switchScreenModeOnResize={false}
          loaderSpinnerColor="rgb(0, 81, 126)"
          loaderSpinnerBackground="rgb(236 248 255)"
          itemsRendered={(e) => console.log('itemsRendered', e)}>
        </CumulioDashboardComponent>
      </div>
    );
  }
...

属性

以下列出仪表板上可用的属性

活动

公共方法

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

getData(itemId: string): Promise<ItemData>
// Promise that returns an array with the data of a item.
  
getFilters(): Promise<FilterGroup[]>
// Promise that returns an array of filters.

setAuthorization(key: string, token: string): Promise<void>
// Sets a new pair of authKey & authToken for the dashboard

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

reloadDashboard(): Promise<void>
// Reloads the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded)

exportDashboard(type?: ExportType): Promise<ExportDashboard>
// Exports the current dashboard as either pdf or png.

getAccessibleDashboards(): Promise<AccessibleDashboard[]>
// Retrieves a list of all dashboards an integration has access to. authKey and authToken needs to be set for this function to work.

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

更改日志

• 更改日志

移徙

从 3.x.x 迁移到 4.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
}

从 2.x.x 迁移到 3.x.x

• 无更改

从 1.x.x 迁移到 2.x.x

• 所有被调用用于储存的方法现在应调用组件参考(可用 useRef to obtain a ref) (中文(简体) ).
• 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 | 代码框示例 | 移徙 | 更改日志