js/visualisation.js
/**
	 * Generate an HTML key for a palette shared by one or more visualisations.
	 * The shape can be circle, square or rounded, the selection of which should be
	 * based on the visualisations this key relates to.
	 **/
Generate an HTML key for a palette shared by one or more visualisations.
The shape can be circle, square or rounded, the selection of which should be
based on the visualisations this key relates to.
Generate an HTML key for a palette shared by one or more visualisations . The shape can be circle square or rounded the selection of which should be based on the visualisations this key relates to .
generateKey(shape,outlined,data) {
		if(typeof shape == 'undefined')
			shape = 'square';
		if(typeof outlined == 'undefined')
			outlined = false;
		let key = document.createElement('div');
		key.classList.add('key');
		let names = this.getNames();
		let palette = this;
		let finalMark = null;
		let finalText = null
		for(let i = 0; i < names.length; i++) {
			let name = names[i];
			if(name == null) continue;
			let mark = document.createElement('span');
			let style = "background-color:"+this.colours[i]+";";
			if(shape == 'rounded') style += "border-radius:2px;";
			if(outlined) style += "border: 1px solid;";
			mark.style = style;
			mark.classList.add('keyicon');
			let txt = document.createElement('span');
			txt.innerHTML = name;
			txt.classList.add('keytext');
			if(typeof data != 'undefined') {
				(function(index) {
					mark.onclick = function(ev) {
						if(ev.altKey)
							palette.unionCategory(data,index);
						else
							palette.selectCategory(data,index);
					};
				})(i);
			}
			if(name == "Other") {
				finalMark = mark;
				finalText = txt;
				continue;
			}
			key.appendChild(mark);
			key.appendChild(txt);
		}
		if(finalMark != null) {
			key.appendChild(finalMark);
			key.appendChild(finalText);
		}
		return key;
	}
generateKey ( shape , outlined , data ) { if ( typeof shape == 'undefined' ) shape = 'square' ; if ( typeof outlined == 'undefined' ) outlined = false ; let key = document . createElement ( 'div' ) ; key . classList . add ( 'key' ) ; let names = this . getNames ( ) ; let palette = this ; let finalMark = null ; let finalText = null for ( let i = 0 ; i < names . length ; i ++ ) { let name = names [ i ] ; if ( name == null ) continue ; let mark = document . createElement ( 'span' ) ; let style = "background-color:" + this . colours [ i ] + ";" ; if ( shape == 'rounded' ) style += "border-radius:2px;" ; if ( outlined ) style += "border: 1px solid;" ; mark . style = style ; mark . classList . add ( 'keyicon' ) ; let txt = document . createElement ( 'span' ) ; txt . innerHTML = name ; txt . classList . add ( 'keytext' ) ; if ( typeof data != 'undefined' ) { ( function ( index ) { mark . onclick = function ( ev ) { if ( ev . altKey ) palette . unionCategory ( data , index ) ; else palette . selectCategory ( data , index ) ; } ; } ) ( i ) ; } if ( name == "Other" ) { finalMark = mark ; finalText = txt ; continue ; } key . appendChild ( mark ) ; key . appendChild ( txt ) ; } if ( finalMark != null ) { key . appendChild ( finalMark ) ; key . appendChild ( finalText ) ; } return key ; }
Generate an HTML key for a palette shared by one or more visualisations.
Generate an HTML key for a palette shared by one or more visualisations .
//now can write them out in order // add on-click select to the shape