[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","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)

Data Binding

用于描述此组件的数据聚合等。

您可以像柱形图一样添加简单的数据绑定,也可以添加类似 KPI 矩阵中的复杂模板集合。如果使用模板集合的话,您可以添加多个数据绑定组。

interface

interface IDataBinding {
    dataRoles: Array<IDataRole | IDataRolesCollection>;
    templates?: IDataRoleTemplate[];
    dataViewMappings?: IDataViewMappingConfig[];
    conditions?: IDataRoleConditions;
    conversionRules?: IConversionRules;
}
interface IOption extends IIconable, ILocalizable {
    name: string;
    type: DataRoleOptionType | DataRoleTemplateOptionType;
    defaultValue?: any;
}
interface IItemOption extends IIconable, ILocalizable {
    name: string;
    type: DataRoleItemOptionType;
    defaultValue?: any;
}

dataRoles

DataRoles定义可视化组件需要的数据字段。它对数据集中的字段进行分组,并由 dataViewMapping 使用。

一个 data role 就是一组数据集字段。

以下为 data role 面板:

image2020-5-29_17-56-40.png

您可以为 data role 添加一些选项,当前支持枚举类型、数据格式和数据单位。

image2020-5-29_17-58-29.png

下图是一种 data role 的选项菜单。 可以在 IDataRoleProfile 上访问选项数据。

您也可以向 Data role 模板添加一些选项。 当前仅支持枚举类型。

image2020-5-29_18-16-2.png

interface

enum DataRoleOptionType {
    Enum = 'enum',
    Format = 'format',
    DisplayUnit = 'displayUnit',
}
enum DataRoleItemOptionType {
    Enum = 'enum',
    Format = 'format',
    DisplayUnit = 'displayUnit',
    RenderSetting = 'renderSetting',
}
interface IEnumOptions extends IOption {
    items: Array<CommonDefNS.IEnumItem>;
}
interface IItemEnumOptions extends IItemOption {
    items: Array<CommonDefNS.IEnumItem>;
}
export enum DataRoleType {
  Value = 'value',
  Grouping = 'grouping',
  GroupingOrValue = 'groupingOrValue',
  Attribute = 'attribute',
  AttributeOrValue = 'attributeOrValue',
}
enum DatasetFieldDataType {
  date = 'date',
  datetime = 'datetime',
  number = 'number',
  string = 'string',
  boolean = 'boolean',
}
interface IDataRole extends CommonDefNS.ILocalizable {
    name: DataRoleName;
    aliasName: DataRoleName;
    kind: DataRoleType;
    options: IOption[];
    itemOptions: IItemOption[];
    hidden?: boolean;
    acceptedTypes?: DatasetFieldDataType[];
    preferredKind?: DataRoleType;
}
interface IDataRolesCollection extends CommonDefNS.ILocalizable {
    kind: DataRoleType.DataRoleCollection;
    groups?: TemplateName[];  // init group templates
    collapsible?: boolean;
    editable?: boolean;
  }

dataRole

  • name: data role 的名称

  • aliasName:更改图标类型时使用,具有相同名称或别名的data roles 被视为相同。

  • kind:

    • grouping:用于度量字段的分类或分组。

    • value:度量值。

    • groupingOrValue:可用作度量也可以用作分组。

    • attribute:字段被分组后的第一个值。

    • attributeOrValue:作为属性或度量值。

  • options:将在data role 面板上呈现一个按钮。

  • itemOptions: 为绑定的字段添加设置项,比如用于设置格式等。

  • hidden: 如果为真,那么该 data role 将不会显示在数据绑定面板上,但是它仍然可以在dataviewmapping 中使用。

  • preferredKind:仅当 kind 为 groupingOrValue 或 attributeOrValue 时生效。表示将添加到此处的字段首先视为一个值还是分组。

dataRoleCollection

  • groups:Initially template instace最初的模板实例

  • collapsible:indicate dose this template support collapse.表示是否可折叠。

  • editable:表示此 data role 中的字段是否支持排序,添加或者编辑标题。

示例

{
    "name": "Values",
    "kind": "value",
    "options": [
        {
            "type": "format",
            "name": "valueFormat",
            "displayNameKey": "inspector.properties.charts.axis.dataFormat"
        },
        {
            "displayNameKey": "actionBar.changeChartType",
            "name": "valueChartType",
            "type": "enum",
            "defaultValue": "column",
            "items": [
                {
                    "value": "line",
                    "displayNameKey": "chartTypes.line"
                },
                {
                    "value": "column",
                    "displayNameKey": "chartTypes.column"
                },
                {
                    "value": "area",
                    "displayNameKey": "chartTypes.area"
                },
                {
                    "value": "stackedColumn",
                    "displayNameKey": "chartTypes.stackedColumn"
                }
            ],
        }
    ],
    "itemOptions": [{
        "name": "itemRenderSetting",
        "type": "renderSetting",
        "displayName": "Render Setting"
    },{
        "name": "itemFormat",
        "type": "format",
        "displayName": "Edit Format..."    
    }, {
        "name": "itemDisplayUnit",
        "type": "displayUnit",
        "displayName": "DisplayUnit"
    }, {
        "name": "itemEnum",
        "type": "enum",
        "displayName": "Enum",
        "items": [
            { "value": 1, "displayName": "one" },
            { "value": 2, "displayName": "two" },
            { "value": 3, "displayName": "three" }
        ],
        "defaultValue": 1
    }]
}

templates

选择一个选项则可以将其添加到组里。

image2020-6-1_11-14-11.png

Interface

enum DataRoleTemplateOptionType {
    Enum = 'enum',
}
interface IDataRoleTemplate extends CommonDefNS.ILocalizable, CommonDefNS.IIconable {
    name: TemplateName;
    dataRoles?: IDataRole[];
    dataViewMappings: IDataViewMappingConfig[];
    conditions?: IDataRoleConditions;
    options?: IOption[];
}
interface IDataRolesCollection extends CommonDefNS.ILocalizable {
    kind: DataRoleType.DataRoleCollection;
    groups?: TemplateName[];  // init group templates
    collapsible?: boolean;
    editable?: boolean;
}

示例

{
    "templates": [{
        name: 'value',
        displayNameKey: 'dataBindingPanel.singleValue',
        dataRoles: [{
          name: 'values',
          displayNameKey: 'dataBindingPanel.value',
          kind: 'value',
        }],
        dataViewMappings: [{
    	    "single": {
        	"value": "values"
    	    }
	}],
        conditions: [{
          values: { max: 1 },
        }],
      }],
	"dataRoles": [{
		name: 'row',
        displayNameKey: 'dataBindingPanel.row',
        kind: 'grouping',
	}, {
        kind: 'collection',
        displayNameKey: 'dataBindingPanel.value',
        groups: ['value'],
        collapsible: true,
        editable: true
    }]
}

dataViewMappings

定义数据角色即 data roles 之后,添加 data view mapping 则会将data role 映射到视图中。

Interface

interface IDataViewMapping {
    required?: IDataRoleConditions;
}
interface IDataView {
    single: ISingleDataView;
    plain: IPlainDataView;
    matrix: IMatrixDataView;
}
interface IDataRoleProfile {
    options: any;
    values: IPivotSettingProfile[];
}
interface IPivotSettingProfile {
    display: string;
    name: string;
    method?: AggMethod;
    dataType: DataType;
    format: string;
}

SingleDataView

interface ISingleDataViewMapping extends IDataViewMapping {
    value: DataRoleName;
}
interface ISingleDataView {
  value: number;
  profile: { [key as string]: IDataRoleProfile };
  options: any;
}

示例

{
    "single":
    {
        "value": "values"
    }
}
{
    "value": 2610462,
    "profile":
    {
        "values":
        {
            "options":
            {
                "valueFormat": "$#,##0.00"
            },
            "values": [
            {
                "display": "Amount",
                "name": "Amount",
                "method": "sum",
                "dataType": "number",
                "format": "$#,##0.00"
            }]
        }
    },
    "options":
    {}
}

PlainDataView

interface IPlainDataViewMapping extends IDataViewMapping {
    dataRoles: DataRoleName[]; // default as all
    series?: DataRoleName;
    trellisRows?: DataRoleName;
    trellisColumns?: DataRoleName;
}
interface IPlainDataView {
  data: any[];
  profile: { [ dataRoleName as string]: IDataRoleProfile };
  sort: { [ columnDisplay as string]   : {
    order: any[],
    priority: -1 | 0 | 1, // default | user-set | override
  }};
  options: any;
}

示例

{
    "plain":
    {
        "required": [
        {
            "values":
            {
                "min": 1
            }
        }]
    }
}
{
    "sort": {
     "Product": {
      "order": [
       "Spread",
       "Others",
       "InputMan",
       "Component One Studio",
       "Active Report"
      ],
      "priority": -1
     },
     "Department": {
      "order": [
       "DTD1      ",
       "DTD2      ",
       "DTDx      ",
       "DTD3      "
      ],
      "priority": -1
     }
    },
    "data": [
     {
      "Department": "DTD1      ",
      "Product": "Spread",
      "Amount": 150220
     },
     {
      "Department": "DTD1      ",
      "Product": "Others",
      "Amount": 125874
     },
     {
      "Department": "DTD1      ",
      "Product": "InputMan",
      "Amount": 54473
     },
     {
      "Department": "DTD1      ",
      "Product": "Component One Studio",
      "Amount": 273315
     },
     {
      "Department": "DTD1      ",
      "Product": "Active Report",
      "Amount": 188682
     },
     {
      "Department": "DTD2      ",
      "Product": "Spread",
      "Amount": 217560
     },
     {
      "Department": "DTD2      ",
      "Product": "Others",
      "Amount": 155844
     },
     {
      "Department": "DTD2      ",
      "Product": "InputMan",
      "Amount": 75335
     },
     {
      "Department": "DTD2      ",
      "Product": "Component One Studio",
      "Amount": 426930
     },
     {
      "Department": "DTD2      ",
      "Product": "Active Report",
      "Amount": 262236
     },
     {
      "Department": "DTDx      ",
      "Product": "Spread",
      "Amount": 49210
     },
     {
      "Department": "DTDx      ",
      "Product": "Others",
      "Amount": 21978
     },
     {
      "Department": "DTDx      ",
      "Product": "InputMan",
      "Amount": 12749
     },
     {
      "Department": "DTDx      ",
      "Product": "Component One Studio",
      "Amount": 75810
     },
     {
      "Department": "DTDx      ",
      "Product": "Active Report",
      "Amount": 36777
     },
     {
      "Department": "DTD3      ",
      "Product": "Spread",
      "Amount": 128205
     },
     {
      "Department": "DTD3      ",
      "Product": "Others",
      "Amount": 77922
     },
     {
      "Department": "DTD3      ",
      "Product": "InputMan",
      "Amount": 39406
     },
     {
      "Department": "DTD3      ",
      "Product": "Component One Studio",
      "Amount": 167580
     },
     {
      "Department": "DTD3      ",
      "Product": "Active Report",
      "Amount": 70356
     }
    ],
    "profile": {
     "values": {
      "options": {
       "valueFormat": "$#,##0.00"
      },
      "values": [
       {
        "display": "Amount",
        "name": "Amount",
        "method": "sum",
        "dataType": "number",
        "format": "$#,##0.00"
       }
      ]
     },
     "dimensions": {
      "options": {},
      "values": [
       {
        "display": "Department",
        "name": "Department",
        "dataType": "string",
        "format": "@"
       }
      ]
     },
     "series": {
      "options": {},
      "values": [
       {
        "display": "Product",
        "name": "Product",
        "dataType": "string",
        "format": "@"
       }
      ]
     }
    },
    "options": {}
   }

MatrixDataView

interface IMatrixDataViewMapping extends IDataViewMapping {
    values: DataRoleName[];
    rows: DataRoleName[];
    columns: DataRoleName[];
}

示例

{
    "matrix":
    {
        "values": ["values"],
        "rows": ["dimensions"],
        "columns": ["series"]
    }
}
{
    "matrix": {
        "columns": {
            "levels": ["Product"],
            "headers": [
                {
                    "column": "Product",
                    "label": "Spread",
                    "next": []
                },
                {
                    "column": "Product",
                    "label": "Others",
                    "next": []
                },
                {
                    "column": "Product",
                    "label": "InputMan",
                    "next": []
                },
                {
                    "column": "Product",
                    "label": "Component One Studio",
                    "next": []
                },
                {
                    "column": "Product",
                    "label": "Active Report",
                    "next": []
                }
            ],
            "sortPriority": -1
        },
        "rows": {
            "levels": ["Department"],
            "headers": [
                {
                    "column": "Department",
                    "label": "DTD1      ",
                    "next": []
                },
                {
                    "column": "Department",
                    "label": "DTD2      ",
                    "next": []
                },
                {
                    "column": "Department",
                    "label": "DTDx      ",
                    "next": []
                },
                {
                    "column": "Department",
                    "label": "DTD3      ",
                    "next": []
                }
            ],
            "sortPriority": -1
        },
        "values": [
            {
                "Department": "DTD1      ",
                "Product": "Spread",
                "Amount": 150220
            },
            {
                "Department": "DTD1      ",
                "Product": "Others",
                "Amount": 125874
            },
            {
                "Department": "DTD1      ",
                "Product": "InputMan",
                "Amount": 54473
            },
            {
                "Department": "DTD1      ",
                "Product": "Component One Studio",
                "Amount": 273315
            },
            {
                "Department": "DTD1      ",
                "Product": "Active Report",
                "Amount": 188682
            },
            {
                "Department": "DTD2      ",
                "Product": "Spread",
                "Amount": 217560
            },
            {
                "Department": "DTD2      ",
                "Product": "Others",
                "Amount": 155844
            },
            {
                "Department": "DTD2      ",
                "Product": "InputMan",
                "Amount": 75335
            },
            {
                "Department": "DTD2      ",
                "Product": "Component One Studio",
                "Amount": 426930
            },
            {
                "Department": "DTD2      ",
                "Product": "Active Report",
                "Amount": 262236
            },
            {
                "Department": "DTDx      ",
                "Product": "Spread",
                "Amount": 49210
            },
            {
                "Department": "DTDx      ",
                "Product": "Others",
                "Amount": 21978
            },
            {
                "Department": "DTDx      ",
                "Product": "InputMan",
                "Amount": 12749
            },
            {
                "Department": "DTDx      ",
                "Product": "Component One Studio",
                "Amount": 75810
            },
            {
                "Department": "DTDx      ",
                "Product": "Active Report",
                "Amount": 36777
            },
            {
                "Department": "DTD3      ",
                "Product": "Spread",
                "Amount": 128205
            },
            {
                "Department": "DTD3      ",
                "Product": "Others",
                "Amount": 77922
            },
            {
                "Department": "DTD3      ",
                "Product": "InputMan",
                "Amount": 39406
            },
            {
                "Department": "DTD3      ",
                "Product": "Component One Studio",
                "Amount": 167580
            },
            {
                "Department": "DTD3      ",
                "Product": "Active Report",
                "Amount": 70356
            }
        ]
    },
    "profile": {
        "values": {
            "options": {
                "valueFormat": "$#,##0.00"
            },
            "values": [
                {
                    "display": "Amount",
                    "name": "Amount",
                    "method": "sum",
                    "dataType": "number",
                    "format": "$#,##0.00",
                }
            ]
        },
        "dimensions": {
            "options": {},
            "values": [
                {
                    "display": "Department",
                    "name": "Department",
                    "dataType": "string",
                    "format": "@"
                }
            ]
        },
        "series": {
            "options": {},
            "values": [
                {
                    "display": "Product",
                    "name": "Product",
                    "dataType": "string",
                    "format": "@"
                }
            ]
        }
    },
    "options": {}
}

conditions

conditions 表示每个data role 绑定数据字段的数量限制。各 condition 之间是或的关系,也即 “or”;每个 condition 内部的 datarole 之间为“和” 的关系,也即“AND”。

[{
    series: { max: 0 },
  }, {
    series: { min: 1 },
    values: { max: 1 },
}]

以上示例表示,当series 中没有字段时,对其他字段没有任何限制。当 series 中有一个或以上的字段时,那么在 values 中就只能绑定一个字段。

interface

interface IDataRoleCondition {
    [dataRoleName: string]: {
      max?: number;
      min?: number;
    };
}

conversionRules

图表切换规则。

interface

enum ConversionCommand {
    // All items in the source dataRole will be converted to target dataRole
    All = 'all',
    // The first item in the source dataRole will be converted to target dataRole
    First = 'first',
    // The last item in the source dataRole will be converted to target dataRole
    Last = 'last',
}
enum ConversionPhase {
    // The Rule will be executed before default rule
    Pre = 'pre',
    // The Rule will be executed after default rule
    Post = 'post'
}
interface IConversionRulesDetail {
    // Describes the rule will be executed before or after the default conversion rule.
    mode: ConversionPhase;
    // Only if conditions is null or the set conditions are matched, the rule will be executed.
    conditions?:Array<IDataRoleCondition>,
    // migrated related dataRole items from source visual to target
    execute: Array<{
        // Describes the name or alias name of source visual dataRole name
        source: DataRoleName, // source data role
        // Describes the name or alias name of target visual dataRole name
        target: DataRoleName, // target data role
        // Describes what dataRole items of source visual will be converted.
        cmd: ConversionCommand,
    }>;
}
interface IConversionRules {
    // If the visual is target (convert to), these detailRules will be executed.
    in?: Array<IConversionRulesDetail>;
    // If the visual is source (convert from), these detailRules will be executed.
    out?: Array<IConversionRulesDetail>;
}

规则

规则说明

  1. 尝试将相关的源可视化 dataRole 项目转换为目标可视化 dataRole。

    1. 查找将由 ruleDetails.execute.source 移动的源数据角色项ruleDetails.source与dataRole的 name / aliasName相同

    2. 检查 ruleDetails.conditions

      1. 如果为空,则执行规则。

      2. 如果不为空并且条件匹配,则执行规则。

      3. 否则,该规则将不会执行。

    3. 执行 ruleDetails.execute 逐个转换。将找到的源 dataRole 项目移动到目标组件的 dataRole,其 name 或 aliasName 与 ruleDetails.execute.target 相同。

      1. ruleDetails.execute.cmd 是 ConversionCommand.All将所有找到的源dataRole项目移动到目标dataRole

      2. ruleDetails.execute.cmd 是 ConversionCommand.First

        1. 将所有找到的源 dataRole 项目的第一项移到目标 dataRole。

        2. 其他项目仍将保留在源datarole上。

      3. ruleDetails.execute.md 是 ConversionCommand.Last

        1. 将所有找到的源dataRole项的最后一项移动到目标dataRole。

        2. 其他项目仍将保留在源数据上。

  2. 用 conditions 设置条件,检查当前目标图表组件的数据绑定。

    1. 如果符合条件,则保持。

    2. 否则,回滚目标图表组件的数据绑定状态。

Rule Executed Order 规则执行顺序

  1. target.converionRules.in 中执行 ConversionPhase.Pre 规则

  2. source.converionRules.out 中执行 ConversionPhase.Pre 规则

  3. 执行默认转换规则

    如果它们的dataRole名称/ aliasName相同,则将源dataRole项转换为目标。

  4. target.converionRules.in 中执行 ConversionPhase.Post规则

  5. source.converionRules.out 中执行ConversionPhase.Post规则

  6. 处理源可视化组件中未转换的datarole

    如果可以在目标中找到相关的dataRole,则将其余项移到其中并将每个项标记为无效。

    如果找不到,会将 dataRole 移至目标位置并将其标记为无效。

示例

柱状图组件

旭日图组件

{

dataRoles:[

{ name: 'values' },

{ name: 'category' },

{ name: 'series' },

{ name: 'trellisColumns' },

{ name: 'trellisRows' },

{ name: 'conditionalFormatValues' }

],

conditions: [{

series: { max: 0 },

}, {

series: { min: 1 },

values: { max: 1 },

}],

conversionRules: {

out: [{

mode: 'post',

execute: [{

source: 'category',

target: 'trellisColumns',

cmd: 'all',

}],

},

}

{

dataRoles:[

{ name: 'values' },

{ name: 'details' },

{ name: 'trellisColumns' },

{ name: 'trellisRows' },

{ name: 'conditionalFormatValues' }

],

conditions: [{

values: { max: 1 },

}],

conversionRules: {

in: [{

mode: 'pre',

execute: [{

source: 'category',

target: 'details',

cmd: 'all',

}, {

source: 'series',

target: 'details',

cmd: 'all',

}, {

source: 'location',

target: 'details',

cmd: 'all',

}],

}],

out: [{

mode: 'post',

conditions: [{

// means if target no 'category' dateRole, this rule will be executed

category: null,

}],

execute: [{

source: 'details',

target: 'series',

cmd: 'all',

}],

}, {

mode: 'post',

execute: [{

source: 'details',

target: 'series',

cmd: 'last',

}, {

source: 'details',

target: 'category',

cmd: 'all',

}],

}],

},

}

用户场景1:将柱状图1转换为旭日图

step

说明

柱状图数据绑定

旭日图数据绑定

1

初始状态

{

values: {

values: [{name: 'quantity'}],

},

category: {

values: [{name: 'department'}],

},

series: {

values: [{name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: []},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2

- 找出目标图表,即旭日图的“pre” “in” 规则。

[{

mode: 'pre',

execute: [{

source: 'category',

target: 'details',

cmd: 'all',

}, {

source: 'series',

target: 'details',

cmd: 'all',

}, {

source: 'location',

target: 'details',

cmd: 'all',

},

}]

{

values: {

values: [{name: 'quantity'}],

},

category: {

values: [{name: 'department'}],

},

series: {

values: [{name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: []},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2.1

- 将柱状图的“category” datarole 中的所有项目转化到旭日图的“details” 中。

- 旭日图的dataroles 与 conditions 设定的条件相符,因此保持状态。

conditions: [{

values: { max: 1 },

}],

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [] },

series: {

values: [{name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: []},

details: {

values: [{name: 'department'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2.2

- 将柱状图“series”dataRole的所有项目移动到旭日图的“details”中。

- 旭日图的 dataroles 与其 conditions 条件设置匹配,因此保持状态

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: []},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

3

- 找出柱状图组件的“pre” “out” 规则。

- 发现并没有相关的规则,因此不需要额外做调整。

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: []},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

4

执行默认的转换规则

- 将柱状图的“values” 移动到旭日图的“values”中;

- 旭日图的dataroles 与 它的conditions 条件设置匹配,因此保持状态。

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}]

},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

5

柱状图中没有多余的datarole,转换完成。



用户场景2:将柱状图2转换为旭日图

step

说明

柱状图的数据绑定

旭日图的数据绑定

1

初始状态

{

values: {

values: [{name: 'quantity'}, {name: 'price'}]

},

details: {

values: [{name: 'department'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2

找出目标图表,即旭日图的“pre” “in” 规则。

[{

mode: 'pre',

execute: [{

source: 'category',

target: 'details',

cmd: 'all',

}, {

source: 'series',

target: 'details',

cmd: 'all',

}, {

source: 'location',

target: 'details',

cmd: 'all',

},

}]

{

values: {

values: [{name: 'quantity'}, {name: 'price'}]

},

details: {

values: [{name: 'department'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2.1

- 将柱状图的“category” datarole 中的所有醒目都移至 旭日图的“details” datarole 中。

- 旭日图的datarole 满足 condition 中的条件设定,因此保持状态。

conditions: [{

values: { max: 1 },

}],

{

values: {

values: [{name: 'quantity'},{name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

3

- 找出柱状图的“pre” “out” 规则。

- 发现没有相关的规则,因此无需做额外的更改。

{

values: {

values: [{name: 'quantity'}, {name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

4

执行默认的转换规则。

{

values: {

values: [{name: 'quantity'},{name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

4.1

- 将柱状图“values” datarole 中的所有项目移动到旭日图的“values”中。

- 旭日图的dataroles 不匹配 condition 中的设定。

- 因此移动“values”中的第一个项目,其他的项目不移动。

conditions: [{

values: { max: 1 },

}],

{

values: {

values: [{name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}]

},

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

5

- 查看旭日图的‘ post’ ‘in’ 规则。

- 发现并没有相关规则,因此无需做额外操作。

{

values: {

values: [{name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}]

},

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

6

- 查看旭日图的‘ post’ ‘out’ 规则。

- 发现并没有相关规则,因此无需做额外操作。

{

values: {

values: [{name: 'price'}]

},

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}]

},

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

7

处理源可视化组件中未转换的datarole 项目:

将柱状图剩余的“values” 项目移动到旭日图,并标记为无效。

{

values: {values: [ ] },

details: { values: [] },

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [

{ name: 'quantity' },

{ name: 'privce', invalid: true }

]

},

category: {

values: [{name: 'department'}]

},

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

用户场景3: 将旭日图转换为柱状图

step

说明

柱状图的数据绑定

旭日图的数据绑定

1

初始状态

{

values: {

values: [{name: 'quantity'}]

},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

2

- 查找柱状图的 ‘pre’ ‘in’规则

- 发现没有相关规则,因此无需操作。

{

values: {

values: [{name: 'quantity'}]

},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

3

- 查看旭日图的 ‘ pre’ ‘out’ 规则。

- 发现没有相关规则,因此无需操作。

{

values: {

values: [{name: 'quantity'}]

},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: { values: [ ] },

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

4

执行默认的转换规则

- 将旭日图的“values”移动到柱状图的“values”。

- 柱状图的dataroles 与conditions 条件设定匹配,因此保持当前状态。

conditions: [{

series: { max: 0 },

}, {

series: { min: 1 },

values: { max: 1 },

}],

{

values: { values: [ ]},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

5

查找柱状图的 ‘post’ ‘in’ 规则。

- 没有相关规则,因此无需操作。

{

values: { values: [ ]},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

6

查找旭日图的 ‘post’ ‘out’ 规则。

[{

mode: 'post',

conditions: [{

// means if target no 'category' dateRole, this rule will be executed

category: null,

}],

execute: [{

source: 'details',

target: 'series',

cmd: 'all',

}],

}, {

mode: 'post',

execute: [{

source: 'details',

target: 'series',

cmd: 'last',

}, {

source: 'details',

target: 'category',

cmd: 'all',

}],

}]

- 因为柱状图中有“category” datarole,因此有效的规则是

[{

mode: 'post',

execute: [{

source: 'details',

target: 'series',

cmd: 'last',

}, {

source: 'details',

target: 'category',

cmd: 'all',

}],

}]

{

values: { values: [ ]},

details: {

values: [{name: 'department'}, {name: 'payment'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: { values: [] }

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

6.1

- 将旭日图的“details” datarole的 “last” 项目移动到柱状图的“series” 中。

- 柱状图的dataroles 与 condition 条件设定匹配,因此保持状态即可。

{

values: { values: [ ]},

details: {

values: [{name: 'department'}],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}],

},

category: { values: [ ] },

series: {

values: [{name: 'payment'}]

}

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

6.2

- 将旭日图的“details” datarole 中剩余的项目移动到柱状图的“category”中。

- 柱状图的dataroles 与 condition 条件设定匹配,因此保持状态即可。

{

values: { values: [ ]},

details: {

values: [],

},

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

{

values: {

values: [{name: 'quantity'}],

},

category: {

values: [{name: 'department'}]

},

series: {

values: [{name: 'payment'}]

}

trellisColumns: { values: [] },

trellisRows: { values: [] },

conditionalFormatValues: { values: [] },

}

7

旭日图中没有剩余的 datarole 剩余项目,转换完成。



定义完data role之后,添加date view mapping 就可以在数据视图中映射这些data role。