Visual API与运行时实现

interface IFilterTarget {
    column: string;
}

enum VisualFilterType {
    Basic = 'basic',
    Advanced = 'advanced',
    Tuple = 'tuple',
}

interface IFilterBase {
    target: IFilterTarget;
    filterType: VisualFilterType;
}

enum BasicFilterOperator {
    In = 'In',
    NotIn = 'NotIn',
}

interface IBasicFilter extends IFilterBase {
    operator: BasicFilterOperator;
    values: any[];
}

enum AdvancedFilterOperator {
    LessThan = 'LessThan',
    LessThanOrEqual = 'LessThanOrEqual',
    GreaterThan = 'GreaterThan',
    GreaterThanOrEqual = 'GreaterThanOrEqual',
    Contains = 'Contains',
    DoesNotContain = 'DoesNotContain',
    StartWith = 'StartWith',
    DoesNotStartWith = 'DoesNotStartWith',
    EndWith = 'EndWith',
    DoesNotEndWith = 'DoesNotEndWith',
    Is = 'Is',
    IsNot = 'IsNot',
}

interface IAdvancedFilterCondition {
    value: any;
    operator: AdvancedFilterOperator;
    caseSensitive?: boolean;
}

enum AdvancedFilterLogicalOperator {
    And = 'And',
    Or = 'Or',
}

interface IAdvancedFilter extends IFilterBase {
    conditions: IAdvancedFilterCondition[];
    logicalOperator: AdvancedFilterLogicalOperator;
}

type ITuple = { value: any }[];

interface ITupleFilter {
    target: IFilterTarget[];
    filterType: VisualFilterType;
    operator: BasicFilterOperator;
    values: ITuple[];
}

type IFilter = IBasicFilter | IAdvancedFilter | ITupleFilter;

interface IParameterPair {
    name: string;
    value: any[];
}

interface IWatchedParameter {
    meta: {
        name: string;
        display: string;
        dataType: string;
        type: string;
        multiValue: boolean;
    };
    value: any[];
}

interface IVisualUpdateOptions {
    isViewer: boolean;
    isMobile: boolean;
    isEditing: boolean;
    isFocus: boolean;
    dataViews: any;
    updateType: string;
    properties: any;
    language: string;
    scale: number;
    filters: IFilter[];
    watchedParameters?: {
        [key: string]: IWatchedParameter;
    };
    viewport: {
        width: number;
        height: number;
        scale: number;
    };
}

declare class WynVisual {
  static Models = {
    Filter: {
      BasicFilter, AdvancedFilter, TupleFilter,
    },
  };
  static Enums = {
    FilterType,
    BasicFilterOperator,
    AdvancedFilterOperator,
    AdvancedFilterLogicalOperator,
    UpdateType
  };
  constructor(dom: HTMLDivElement, host: VisualNS.VisualHost, updateOptions: VisualNS.IVisualUpdateOptions);
  update(options: VisualNS.IVisualUpdateOptions): void;
  getInspectorHiddenState(updateOptions: VisualNS.IVisualUpdateOptions): string[];
  getActionBarHiddenState(updateOptions: VisualNS.IVisualUpdateOptions): string[];
  getColorAssignmentConfigMapping(dataViews: VisualNS.IDataView[]): VisualNS.IColorAssignmentConfigMapping;
  onResize(): void;
  onDestroy(): void;
}

import '../style/visual.less';

export default class Visual extends WynVisual {
    private container: HTMLDivElement;
    private host: VisualNS.VisualHost;
    private properties: any;
    private isMock: boolean = false;
    private selectionManager: VisualNS.SelectionManager;

    constructor(dom: HTMLDivElement, host: VisualNS.VisualHost, options: VisualNS.IVisualUpdateOptions) {
        super(dom, host, options);
        this.container = dom;
        this.host = host;
        this.properties = options.properties || {};
        this.selectionManager = host.selectionService.createSelectionManager();
        this.initializeDOM();
        this.bindEvents();
        this.update(options);
    }

    public update(options: VisualNS.IVisualUpdateOptions): void {
        this.properties = options.properties;
        this.processData(options.dataViews);
        this.render();
    }

    public onResize(): void {
        this.render();
    }

    public onDestroy(): void {
        // 清理资源
    }
}

public update(options: VisualNS.IVisualUpdateOptions) {
    const dataView = options.dataViews[0];

    if (!dataView || !dataView.plain) {
        this.isMock = true;
        return;
    }

    const plainData = dataView.plain;
    const labelFields = plainData.profile.label.values;
    const valueFields = plainData.profile.value.values;
    const data = plainData.data;

    data.forEach(item => {
        const label = item[labelFields[0].display];
        const value = item[valueFields[0].display];
        // 处理数据...
    });
}

public update(options: VisualNS.IVisualUpdateOptions) {
    this.properties = options.properties;

    const placeholder = this.properties.placeholder || '请选择...';
    const textStyle = this.properties.textStyle;
    const borderColor = this.properties.borderColor || '#d9d9d9';

    this.applyStyles();
}

private processData(dataViews: VisualNS.IDataView[]): void {
    const dataView = dataViews[0];

    if (!dataView || !dataView.plain || !dataView.plain.profile.label.values.length) {
        this.isMock = true;
        this.data = this.getMockData();
        return;
    }

    this.isMock = false;
    const plainData = dataView.plain;
    const labelField = plainData.profile.label.values[0];
    const valueField = plainData.profile.value?.values[0];

    this.data = plainData.data.map(item => {
        const selectionId = this.host.selectionService.createSelectionId();
        selectionId.withDimension(labelField, item);

        return {
            label: item[labelField.display],
            value: valueField ? item[valueField.display] : null,
            selectionId: selectionId
        };
    });
}

this.visualHost.eventService.renderStart();
try {
  this.render();
  this.visualHost.eventService.renderFinish();
} catch (e) {
  this.visualHost.eventService.renderError();
}

interface ITootipPosition {
  x: number;
  y: number;
}

interface ILabelFields {
  label: string;
  value: string;
}

interface ITooltipConfig {
  position: ITootipPosition;
  title?: string;
  fields?: ILabelFields[];
  selectionId?: SelectionId;
  selected?: SelectionId[];
  menu?: boolean;
}

this.host.toolTipService.show({
  position: { x: event.clientX, y: event.clientY },
  title: '数据详情',
  fields: [
    { label: '名称', value: item.label },
    { label: '数值', value: item.value.toString() }
  ],
  selectionId: item.selectionId,
  selected: this.selectionManager.getSelectionIds(),
  menu: true
});

this.visualHost.propertyService.setProperty('showBorder', !this.properties.showBorder);

enum DisplayUnit {
  Auto = 'auto',
  None = 'none',
  Hundreds = 'hundreds',
  Thousands = 'thousands',
  TenThousand = 'tenThousands',
  HundredThousand = 'hundredThousand',
  Millions = 'millions',
  TenMillion = 'tenMillion',
  HundredMillion = 'hundredMillion',
  Billions = 'billions',
  Trillions = 'trillions',
}

await this.selectionManager.select(selectionId, true);
await this.selectionManager.clear();
const isSelected = this.selectionManager.contains(selectionId);

const amapToken = this.visualHost.configurationManager.get('amapToken');

this.container.style.backgroundImage = `url(${host.assetsManager.getImage('testImg')})`;

interface ICommandDescription {
  name: string;
  payload: {
    target?: string;
    index?: number;
    pageName?: string;
    selectionIds?: SelectionId[];
    position?: { x: number; y: number };
    scenarioId?: string;
    enterAnimation?: ScenarioAnimationType;
    delay?: number;
    duration?: number;
  };
}

this.host.commandService.execute([{
  name: 'SwitchPage',
  payload: { index: 0 }
}]);

this.host.commandService.execute([{
  name: 'Keep',
  payload: { selectionIds }
}]);

SELECT * FROM table WHERE Dept IN (DTD1, DTD2, DTD3)

SELECT * FROM DataTable
WHERE (Team = 'DTD1' AND Prod = 'Wyn')
   OR (Team = 'DTD2' AND Prod = 'SpreadJS');

{
  "dependencies": ["echarts"]
}

this.host.parameterService.setParameter({
  name: 'parameterName',
  value: ['value1', 'value2']
});

{
  "name": "mainColorAssignment",
  "type": "ColorAssignment",
  "displayName": "Enable Color Assignment",
  "defaultValue": true
}

.style('fill', function (d: any) {
  if (options.mainColorAssignment) {
    return options.mainColorAssignment[d.data.size] || color(d.package);
  } else {
    return color(d.package);
  }
});

public getColorAssignmentConfigMapping(dataViews: VisualNS.IDataView[]): VisualNS.IColorAssignmentConfigMapping {
  if (!dataViews.length) {
    return null;
  }
  const plain = dataViews[0].plain;
  const colorProfile = plain.profile.series.values[0];
  const dimProfile = plain.profile.dimensions.values[0];
  if (!colorProfile || !dimProfile) {
    return null;
  }
  const colorValues = plain.data.map(d => d[colorProfile.display]);
  return {
    mainColorAssignment: {
      values: Array.from(new Set(colorValues)),
      type: 'dimension',
      columns: [colorProfile],
    },
  };
}

public update(options: VisualNS.IVisualUpdateOptions): void {
  this.watchedParameters = options.watchedParameters || {};
  const parameterDefaultValue = this.watchedParameters['parameterDefaultValue'];

  if (parameterDefaultValue && parameterDefaultValue.value) {
    const meta = parameterDefaultValue.meta;
    console.log('参数名称:', meta.name);
    console.log('参数类型:', meta.dataType);
    console.log('是否多值:', meta.multiValue);
    console.log('参数值:', parameterDefaultValue.value);
  }
}

this.host.parameterService.setParameter([
  { name: 'param1', value: ['value1'] },
  { name: 'param2', value: ['value2', 'value3'] }
]);

private setDefaultValueFromParameter(parameter: VisualNS.IWatchedParameter): void {
  const values = parameter.value;
  if (!values || values.length === 0) return;

  values.forEach(paramValue => {
    const matchedNode = this.findNodeByValue(paramValue);
    if (matchedNode) {
      this.selectNode(matchedNode);
    }
  });
}

const filter = new WynVisual.Models.Filter.BasicFilter(
  fieldProfile,
  WynVisual.Enums.BasicFilterOperator.In,
  selectedValues
);
this.host.filterService.applyFilter(filter);

element.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  this.host.contextMenuService.show({
    position: { x: e.clientX, y: e.clientY }
  });
});