[]
用于描述该组件具有哪些属性设置项。
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"
}
类型 | interface | 描述 | 示例截图 |
---|---|---|---|
标题 (tile) | 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) | 属性: 属性属于此类别 |
类型 | interface | 示例图(请参考) | 说明 | 示例 |
---|---|---|---|---|
Text | interface IStringProperty extends IVisualProperty { maxLength?: number; regex?: string | RegExp; } | maxLength: 文本的最大长度 regex: 文本模式 | |
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' },]/ |