@domoinc/tag-list v2.1.2

TagList

Configuration Options

chartName

Type: string
Default: "TagList"

Name of chart for Reporting.

height

Type: number
Default: 250
Units: px

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

layout

Type: string
Default: "inline"

Determines if the tags should be inline or block

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

size

Type: string
Default: "sz-sm"

The size theme of the tags

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 250
Units: px

Data Definition

Label

Type: string

Default validate:

function (d) {
	                    return this.accessor(d) !== undefined;
	                }

Default accessor:

function (row) {
	                    return (row[0] === undefined) ? undefined : String(row[0]);
	                }

Value

Type: string

Default validate:

function (d) {
	                    return this.accessor(d) !== undefined;
	                }

Default accessor:

function (row) {
	                    return (row[1] === undefined) ? undefined : String(row[1]);
	                }

Events

Dispatch Events

dispatch:tag

External Events

Example

//Setup some fake data
var data = [
	['label Ar', 'valueA'],
	['label Br', 'valueB'],
	['label Cr', 'valueC'],
	['label D is a really long labelr', 'valueD'],
	['label Er', 'valueE'],
	['label Fr', 'valueF'],
	['label Gr', 'valueG'],
	['label Hr', 'valueH']
];

//Initialze the widget
var chart = d3.select("#vis")
	.chart("TagList")
	.c({
		// layout: 'block'
	});

//Render the chart with data
chart.draw(data);

chart.on('dispatch:tag:click', function (d) {
	var index;
	for (var i = 0; i < data.length; i++) {
		console.log(data[i], d)
		if (data[i][0] === d[0]) {
			index = i;
			break;
		}
	}
			data.splice(index, 1);
	console.log(data);
	chart.draw(data);
})