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：默认值。 |
|
外观样式 （appearance） | interface IAppearanceCategory extends IVisualCategory { disable?: { batchSetStyle?: boolean, backgroundColor?: boolean, padding?: boolean, margin?: boolean, backgroundImage?: boolean, border?: boolean, shadow?: boolean, }; } |
| |
数据交互 （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 时，只能绑定静态参数。 |
|
自定义 （custom） | 属性： 属性属于此类别 |
Property
类型 | interface | 示例图（请参考） | 说明 | 示例 |
|---|---|---|---|---|
Text | interface IStringProperty extends IVisualProperty { maxLength?: number; regex?: string | RegExp; } |
| maxLength: 文本的最大长度 regex: 文本模式 | { "name": "test", "type": "Text", "displayName": "Test", "maxLength": 10, "regex": "^aaa" } |
Integer | interface IIntegerProperty extends IVisualProperty { max?: number; min?: number; step?: number; } |
| max: 最大 min: 最小 step: 步骤 | { "name": "test", "type": "Integer", "displayName": "Test" } |
Float | interface IFloatProperty extends IVisualProperty { min?: number; max?: number; placeholder?: string; } |
| ||
Boolean |
| |||
LongText | interface ILongTextProperty extends IVisualProperty { rows?: number; } |
| rows: 文本区域行号。 | |
Enum | interface IEnumProperty extends IVisualProperty { items: Array<CommonDefNS.IEnumItem>; } |
| items: 下拉项目。 | { "name": "test", "type": "Enum", "displayName": "Test", "items": [ { "value": "a", "displayName": "A" }, { "value": "b", "displayName": "B" }] } |
Command |
| { "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; } |
| resetType 表示在单击红色圆圈中的按钮时的效果。 none：隐藏按钮 auto：点击自动按钮将清除数据 no fill：单击no fill按钮将设置一个no fill关键字 | |
Percentage | interface IPercentageProperty extends IVisualProperty { max?: number; min?: number; } |
| ||
Format |
| |||
DisplayUnit |
| |||
Angle | interface IAngleProperty extends IVisualProperty { min: number; max: number; step?: number; markStep?: number; marks?: number[]; } |
| step：拖动光标时的步骤。 markerStep：绘制标记时的步骤 makers：定制标记 | |
Palette |
| |||
TextStyle | interface ITextStyleProperty extends IVisualProperty { fontFamilyList?: string[]; } |
| fontFamilyList: 可选字体。 | |
Position |
| |||
Image |
| |||
Hidden | Hidden 类型的属性没有固定的结构， 可以是字符串， 数字， 数组， 或者复杂对象。 它不会渲染任何UI在属性面板上， 只能通过visual api 的property service 进行修改 | |||
ColorAssignment | interface IColorAssignmentProperty extends IVisualProperty { alias?: string; palettePath?: string; } |
| 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[]; } | 示例： |
| 定义： { 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>; } |
| disableActions：禁用操作项。 | { "name": "clickAction", "type": "ClickAction", "displayName": "Click Action" } |
