renderStart(): void

// Update method will be invoke while something changed.
public update(options: VisualNS.IVisualUpdateOptions) {
    this.visualHost.eventService.renderStart();

    try {
      this.render(); // render method is used to update UI
      this.visualHost.eventService.renderFinish();
    } catch (e) {
      this.visualHost.eventService.renderError();
    }
  }

renderError(): void

renderFinish(): void

registerOnCustomEventCallback(fn: (name: string) => void)

// Register the callback in visual constructor. It will print the  action name when you click the corresponding button on action bar.
this.visualHost.eventService.registerOnCustomEventCallback((name: string) => {
      console.log(name);
    });

getDisplay(displayNameKey: string): string 

const noDataText = this.visualHost.localizationManager.getDisplay('NoData');
this.container.textContent = noDataText;

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;
}


show(config: VisualImplNS.ITooltipConfig): void

 // this function will bind to the chart mouse enter event. It will show a tooltip with title, fields, selection info and menu buttons.
private mouseEnterHandler = (node: any) => {
    this.visualHost.toolTipService.show({
      position: {
        x: d3.event.x,
        y: d3.event.y,
      },
      title: node.data.color,
      fields: [{
        label: this.valueField,
        value: node.data.value,
      }],
      selectionId: node.data.selectionId,
      selected:  this.selectionManager.getSelectionIds(),
      menu: true,
    });
  }

hide(): void

  // hide the tooltip when the mouse leave the chart shape
private mouseLeaveHandler = () => {
    this.visualHost.toolTipService.hide();
  }

move(pos: VisualImplNS.ITootipPosition): void

  // update the tooltip position while mouse move on chart
private mouseMoveHandler = (e: any) => {
    this.visualHost.toolTipService.move({
        x: d3.event.x,
        y: d3.event.y,
    });
  }

setProperty(propertyName: string, value: any): void

// when the button be clicked. The property of showBorder will be change.


private onToggle = () => {
    this.visualHost.propertyService.setProperty('showBorder', !this.properties.showBorder);
  }

isAutoDisplayUnit(displayUnit: DisplayUnit): boolean

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

getAutoDisplayUnit(values: number[]): DisplayUnit

format(format: string, value: number): string

const formatService = this.visualHost.formatService;
const { displayUnit, labelFormat } = updateOptions.properties;
 
let realDisplayUnit = displayUnit;
if (formatService.isAutoDisplayUnit(displayUnit)) {
    const values = dataPoints.map(dataPoint => dataPoint.value);
    realDisplayUnit = formatService.getAutoDisplayUnit(values);
}
 
dataPoints.forEach((dataPoint) => {
    // prepare a formated text for label.
    dataPoint.labelText = formatService.format(labelFormat, dataPoint.value, realDisplayUnit);
})

createSelectionManager(): SelectionManager

this.selectionManager = this.visualHost.selectionService.createSelectionManager();

createSelectionId(): SelectionId

const selectionId = this.visualHost.selectionService.createSelectionId();

  public update(options: VisualNS.IVisualUpdateOptions) {
    console.log(options);
    const dataView = options.dataViews[0];
    // convert the data view to datas which can be used in chart
    if (dataView) {
      const plainData = dataView.plain;


      // get the fields via different data role.
      const valueField = plainData.profile.values.values[0].display;
      const sizeField = plainData.profile.series.values[0].display;
      const colorField = plainData.profile.dimensions.values[0].display;

      const items = plainData.data.reduce((result: any, item: any, i: number) => {
        if (item[valueField]) {
          // create a selection id for a data point.
          const selectionId = this.visualHost.selectionService.createSelectionId();

          // set the dimensions of the selection id. This will affect on the crossfilter result and others.
          selectionId
            .withDimension(plainData.profile.dimensions.values[0], item)
            .withDimension(plainData.profile.series.values[0], item);

            // attach the selection id on data model. so that you can access it on hit test
          result.push({
            size: (item[sizeField] || '-') + '',
            value: item[valueField],
            color: (item[colorField] || '') + '',
            id: i,
            selectionId,
          });
        }
        return result;
      }, []);

      // refresh the chart with new data items
      this.render(items);
    }
  };

setSelectionIds(ids: Array<SelectionId>)

getSelectionIds(): Array<SelectionId>

getCount(): number

select(id: SelectionId | Array<SelectionId>, multiSelect: boolean = false): Promise<void>

  private clickHandler = (node: any) => {
    d3.event.stopPropagation();
	// get selection id which bind on data model
    const selectionId = node.data.selectionId
	// if it has been selected, unselect it.
    if (!this.selectionManager.contains(selectionId)) {
      this.selectionManager.select(selectionId, true);
    } else {
      this.selectionManager.clear(selectionId);
    }

	// show tooltip
    this.visualHost.toolTipService.show({
      position: {
        x: d3.event.x,
        y: d3.event.y,
      },
      title: node.data.color,
      fields: [{
        label: this.valueField,
        value: node.data.value,
      }],
      selectionId: node.data.selectionId, // the field which display in tooltip
      selected: this.selectionManager.getSelectionIds(), // all the selected selectionId, will be use in keep/exclude and drill.
      menu: true,
    });
  }

clear(id?: SelectionId): Promise<void>

registerOnSelectCallback(onSelectCallback: (ids: SelectionId[]) => void)

this.selectionManager.registerOnSelectCallback(() => {
	// while the selection state changed, should update ui, to highlight the shape which has been selected
      this.render();
    });

contains(id: SelectionId): boolean

isEmpty(): boolean

get(key: string): string

// to access the amapToken in configuration
const amapToken = this.visualHost.configurationManager.get('amapToken');

getImage(imageName: string): string

// to access the image in assets
this.container.style.backgroundImage = `url(${host.assetsManager.getImage('testImg')})`;

interface ICommandDescription {
    name: string;
    payload: {
      target: string;
    };
  }


execute(commandsDesc: Array<ICommandDescription>): void

// run a command to active a tab container


this.visualHost.commandService.execute([{
      name: 'SelectTab',
      payload: {
        target: 'myTabContainer',
        index: 0,
      }
    }])

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

// Drill & Jump
this.host.commandService.execute([{
    name: 'Drill', // or 'Jump'
    payload: {
        selectionIds, // optional
        position: { x: event.clientX, y: event.clientY },
    },
}]);

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


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


constructor(targetProfile: RuntimeNS.IFieldProfile, operator: BasicFilterOperator = BasicFilterOperator.In, values: any[] = [])

const profile = dv.plain.profile.dimensions.values[0];
const BasicFilter = WynVisual.Models.Filter.BasicFilter;
const filter = new BasicFilter(profile);

setOperator(operator: BasicFilterOperator) 
getOperator(): BasicFilterOperator

this.filter.setOperator(this.filter.getOperator() === WynVisual.Enums.BasicFilterOperator.In ?
          WynVisual.Enums.BasicFilterOperator.NotIn :
          WynVisual.Enums.BasicFilterOperator.In
        )

getValues(): any[] 
setValues(vals: any[])

filter.setValues(['DTD1', 'DTD2'])

toJSON(): BasicNS.IBasicFilter


fromJSON(obj: BasicNS.IBasicFilter)

const profile = dv.plain.profile.dimensions.values[0];
const filter = new BasicFilter(profile);
filter.fromJSON(options.filters[0]);

contains(value: any): boolean

if (this.filter.contains(val)) {
     this.filter.remove(val);
} else {
     this.filter.add(val);
}

remove(val: any)
add(val: any)

if (this.filter.contains(val)) {
     this.filter.remove(val);
} else {
     this.filter.add(val);
}

isEmpty(): boolean

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


constructor(targetProfiles: RuntimeNS.IFieldProfile[], operator: BasicFilterOperator = BasicFilterOperator.In, values: BasicNS.ITuple[] = [])

const dimensionsProfiles = dv.plain.profile.dimensions.values;
const filter = new TupleFilter(dimensionsProfiles);

setOperator(operator: BasicFilterOperator)


getOperator(): BasicFilterOperator

getValues(): BasicNS.ITuple[]


setValues(vals: BasicNS.ITuple[])

toJSON(): BasicNS.ITupleFilter 


fromJSON(obj: BasicNS.ITupleFilter) 

contains(tuple: BasicNS.ITuple): boolean

remove(tuple: BasicNS.ITuple)


add(tuple: BasicNS.ITuple)

createTuple(dp: RuntimeNS.IDataPoint, depth?: number): BasicNS.ITuple

this.items = dv.plain.data.reduce((res, dp) => {
        const label = Object.keys(dp).map(key => dp[key]).join('-');
        const tuple = filter.createTuple(dp);
        res.push({
          label,
          className: filter.contains(tuple) ? 'selected' : '',
          tuple: JSON.stringify(tuple),
        });


        return res;
      }, []);

isEmpty(): boolean

enum AdvancedFilterLogicalOperator {
  And = 'And',
  Or = 'Or',
}
enum AdvancedFilterOperator {
  LessThan = 'LessThan',
  LessThanOrEqual = 'LessThanOrEqual',
  GreaterThan = 'GreaterThan',
  GreaterThanOrEqual = 'GreaterThanOrEqual',
}
interface IAdvancedFilterCondition {
    value: any;
    operator: AdvancedFilterOperator;
}
interface IAdvancedFilter extends IFilterBase {
    conditions: IAdvancedFilterCondition[];
    logicalOperator: AdvancedFilterLogicalOperator;
  }


constructor(targetProfile: RuntimeNS.IFieldProfile, logicalOperator: AdvancedFilterLogicalOperator = AdvancedFilterLogicalOperator.And, conditions: BasicNS.IAdvancedFilterCondition[] = [])

setLogicalOperator(operator: AdvancedFilterLogicalOperator)


getLogicalOperator(): AdvancedFilterLogicalOperator

setConditions(conditions: BasicNS.IAdvancedFilterCondition[])


getConditions(): BasicNS.IAdvancedFilterCondition[]

this.filter.setConditions([{
      value: min,
      operator: this.includeMinEle.checked ? Enums.AdvancedFilterOperator.GreaterThanOrEqual : Enums.AdvancedFilterOperator.GreaterThan,
    }, {
      value: max,
      operator: this.includeMaxEle.checked ? Enums.AdvancedFilterOperator.LessThanOrEqual : Enums.AdvancedFilterOperator.LessThan,
    }]);

toJSON(): BasicNS.IAdvancedFilter


fromJSON(obj: BasicNS.IAdvancedFilter)

remove(condtion: BasicNS.IAdvancedFilterCondition)


add(condtion: BasicNS.IAdvancedFilterCondition)

isEmpty(): boolean