[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"de62ec1c-813e-40b1-8160-a4cd109afe64","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

Options

用于描述该组件具有哪些属性设置项。


interface

interface IOptions {
    common?: {
		size?: ISize;
   		margin?: IPosition;
		filter?: boolean; // enable slicer
	};
    visual?: IVisualCategory[];
}
enum InheritProperty {
    Palette = 'dashboard.palette',
    TextStyle = 'dashboard.textStyle',
    TitleTextStyle = 'dashboard.titleTextStyle',
    BackgroundColor = 'dashboard.backgroundColor',
}
enum PublicPropertyType {
    Text = 'Text', // input
    Integer = 'Integer', // input with step button
    Float = 'Float', // number
    Boolean = 'Boolean', // switch
    LongText = 'LongText', // text area
    Enum = 'Enum', // dropdown
    Color = 'Color', // color panel
    Percentage = 'Percentage', // slider
    Format = 'Format', // format dialog
	DisplayUnit = 'DisplayUnit',
    Angle = 'Angle', // slider
    Palette = 'Palette',
    TextStyle = 'TextStyle',
    Position = 'Position',
    Image = 'Image',
    Hidden = 'Hidden', // null
	ColorAssignment = 'ColorAssignment',
    Collection = 'Collection';
  }
enum CategoryType {
    Title = 'title',
    Appearance = 'appearance',
    Custom = 'custom',
    Interaction = 'interaction',
}
interface IVisualCategory extends ILocalizable {
    type?: CategoryType;
    properties?: IVisualProperty[];
}
interface IProperty {
    name: string;
    inheritFrom?: InheritProperty;
    defaultValue?: any;
    structuredPath?: string;
}
interface IVisualProperty extends IProperty {
    type?: PublicPropertyType;
    hidden?: boolean;
}

Options 描述可视化组件的属性设置,公共设置代表着初始的大小和边距。可以通过hidden标志将任何属性从属性面板隐藏

对于属性设置面板来说,有四种类型。

  • name:属性名称。

  • inheritFrom: indicate this property inherit. It can inherit from the dashboard property, or a sibling.表示属性的继承。可以从dashboard 属性 或者同级继承。

  • defaultValue: 默认值。

  • structuredPath:父属性路径。示例


    {

    a: {

    b: {

    c: '#fff'

    }

    }

    }

    {

    "name": "c",

    "type": "Color",

    "displayName": "Text Color",

    "defaultValue": "#fff",

    "structuredPath": "a.b"

    }

Category

类型

interface

描述

示例截图

标题

(title)

interface ITitleCategory extends IVisualCategory {

disable?: {

auto?: boolean,

alignment?: boolean,

};

defaultValue?: {

show?: boolean,

alignment?: string,

};

}

参数:

disable:表示当前组件不需要此属性。

defaultvalue:默认值。

image2020-6-1_16-16-21.png

外观样式

(appearance)

interface IAppearanceCategory extends IVisualCategory {

disable?: {

batchSetStyle?: boolean,

backgroundColor?: boolean,

padding?: boolean,

margin?: boolean,

backgroundImage?: boolean,

border?: boolean,

shadow?: boolean,

};

}


image2020-6-1_16-20-44.png

数据交互

(interaction)

interface IInteractionCategory extends IVisualCategory {

disable?: {

crossFilter?: boolean,

jumpTo?: boolean,

dataSetAutoRefresh?: boolean,

hiddenActions?: boolean,

pinAnnotation?: boolean,

};

defaultValue?: {

crossFilter?: boolean,

};

watchParameter?: {

roles: string[];

staticOnly?: boolean;

};

}

如果未设置此类别或禁用 crossFilter。选择管理器不会触发交叉过滤器。

watchParameter 用于定义参数映射,当 staticOnly 为 true 时,只能绑定静态参数。

image2020-6-1_16-22-22.png

自定义

(custom)


属性:

属性属于此类别


Property

类型

interface

示例图(请参考)

说明

示例

Text

interface IStringProperty extends IVisualProperty {

maxLength?: number;

regex?: string | RegExp;

}


image2020-6-1_16-27-25.png

maxLength: 文本的最大长度

regex: 文本模式

{

"name": "test",

"type": "Text",

"displayName": "Test",

"maxLength": 10,

"regex": "^aaa"

}

Integer

interface IIntegerProperty extends IVisualProperty {

max?: number;

min?: number;

step?: number;

}

image2020-6-18_18-3-58.png

max: 最大

min: 最小

step: 步骤

{

"name": "test",

"type": "Integer",

"displayName": "Test"

}

Float

interface IFloatProperty extends IVisualProperty {

min?: number;

max?: number;

placeholder?: string;

}

image2020-6-18_18-4-22.png



Boolean


image2020-6-18_18-4-40.png



LongText

interface ILongTextProperty extends IVisualProperty {

rows?: number;

}

image2020-6-18_18-6-49.png

rows: 文本区域行号。


Enum

interface IEnumProperty extends IVisualProperty {

items: Array<CommonDefNS.IEnumItem>;

}

image2020-6-18_18-8-7.png

items: 下拉项目。

{

"name": "test",

"type": "Enum",

"displayName": "Test",

"items": [

{

"value": "a",

"displayName": "A"

},

{

"value": "b",

"displayName": "B"

}]

}

Command


image


{

"name": "command",

"type": "Command",

"displayNameKey": "command",

"items": [

{

"value": "HideScenario",

"displayNameKey": "HideScenario"

},

{

"value": "ShowScenario",

"displayNameKey": "ShowScenario"

},

{

"value": "ToggleScenario",

"displayNameKey": "ToggleScenario"

}

]

}

Color

export enum ColorResetType {

None = 'none',

Auto = 'auto',

NoFill = 'noFill',

}

interface IColorProperty extends IVisualProperty {

resetType?: ColorResetType;

}

image

resetType 表示在单击红色圆圈中的按钮时的效果。

none:隐藏按钮

auto:点击自动按钮将清除数据

no fill:单击no fill按钮将设置一个no fill关键字


Percentage

interface IPercentageProperty extends IVisualProperty {

max?: number;

min?: number;

}

image2020-6-18_18-8-37.png



Format


image2020-6-18_18-8-48.png



DisplayUnit


image



Angle

interface IAngleProperty extends IVisualProperty {

min: number;

max: number;

step?: number;

markStep?: number;

marks?: number[];

}

image2020-6-18_18-9-0.png

step:拖动光标时的步骤。

markerStep:绘制标记时的步骤

makers:定制标记


Palette


image2020-6-18_18-9-14.png



TextStyle

interface ITextStyleProperty extends IVisualProperty {

fontFamilyList?: string[];

}

image2020-6-18_18-9-26.png

fontFamilyList: 可选字体。


Position


image2020-6-18_18-9-39.png



Image


image2020-6-18_18-9-50.png



Hidden


Hidden 类型的属性没有固定的结构, 可以是字符串, 数字, 数组, 或者复杂对象。 它不会渲染任何UI在属性面板上, 只能通过visual api 的property service 进行修改



ColorAssignment

interface IColorAssignmentProperty extends IVisualProperty {

alias?: string;

palettePath?: string;

}

image2021-2-25_16-25-4.png

alias:visual.ts中颜色分配配置的键。palettePath:默认的调色板值路径。

要使用这个属性,你必须在visual上实现 "getColorAssignmentConfigMapping "方法。ColorAssignmentConfig的关键是别名或名称。

当启用它时,你将得到一个颜色映射对象的属性。

{

"name": "mainColorAssignment",

"type": "ColorAssignment",

"displayName": "Enable Color Assignment",

"defaultValue": true

}

Collection

enum ItemType {

Text = 'Text',

Integer = 'Integer',

Float = 'Float',

Boolean = 'Boolean',

LongText = 'LongText',

Enum = 'Enum',

Color = 'Color',

Percentage = 'Percentage',

Format = 'Format',

DisplayUnit = 'DisplayUnit',

Slider = 'Slider',

Image = 'Image',

}

interface IItemProperty {

name?: string;

displayName?: string;

displayNameKey?: string;

defaultValue?: any;

type: ItemType;

}

interface ICollectionProperty extends IVisualProeprty {

itemShape: IItemProperty

IItemProperty[];

defaultValue?: any[];

}

IItemProperty 子类:

interface IItemStringProperty extends IItemProperty {

maxLength?: number;

regex?: string

RegExp;

}

interface IItemIntegerProperty extends IItemProperty {

max?: number;

min?: number;

step?: number;

}

interface IItemFloatProperty extends IItemProperty {

min?: number;

max?: number;

placeholder?: string;

}

interface IItemLongTextProperty extends IItemProperty {

rows?: number;

}

interface IItemEnumProperty extends IItemProperty {

items: Array<CommonDefNS.IEnumItem>;

}

interface IItemColorProperty extends IItemProperty {

resetType?: ColorResetType;

}

interface IItemPercentageProperty extends IItemProperty {

max?: number;

min?: number;

}

interface IItemSliderProperty extends IItemProperty {

min: number;

max: number;

step?: number;

markStep?: number;

marks?: number[];

}

示例:

image2021-5-25_15-18-59.png

image2021-5-25_15-19-24.png


定义:

{

name: 'collection',

displayName: 'Collection',

type: 'Collection',

itemShape: [

{

name: 'name',

displayName: 'Name',

type: 'Text',

},

{

name: 'min',

displayName: 'Min',

type: 'Integer',

},

{

name: 'max',

displayName: 'Max',

type: 'Integer',

},

{

name: 'color',

displayName: 'Color',

type: 'Color'

}

],

defaultValue: [],

}

使用方法:

const list = properties.collection;

/list: [ { name: '0~59', min: 0, max: 59, color: 'red' }, { name: '60~79', min: 60, max: 79, color: 'yellow' }, { name: '80~100', min: 80, max: 100, color: 'green' },]/

ClickAction

enum InteractionMouseEventAction {

ShowTooltip = 'showTooltip',

None = 'none',

Keep = 'keep',

Exclude = 'exclude',

DrillTo = 'drillTo',

JumpTo = 'jumpTo',

AddMonitor = 'addMonitor',

}

interface IClickActionProperty extends IVisualProperty {

disableActions?: Array<InteractionMouseEventAction>;

}

image

disableActions:禁用操作项。

{

"name": "clickAction",

"type": "ClickAction",

"displayName": "Click Action"

}