//- UNCLASSIFIED
extends base
append base_help
	:markdown
		Display d3 treemap chart using parameters:

			src = source returning NODES = [ { name: "...", value: N, doc: "...", children: NODES }, ... ]
			w = drawing width
			h = drawing height
			debug = level of debugging alerts
			node,children,value,doc = src keys

append base_parms
	- tech = "d3v5"
	
append base_head

	style.
		node circle {
		fill: #fff;
			stroke: steelblue;
			stroke-width: 3px;
		}

		.node text {
			font: 12px sans-serif;
		}

		.link {
			fill: none;
			stroke: #ccc;
			stroke-width: 2px;
		}

	script.
		var opts = {
			ds: "!{query.src}" || "/stores/flare.json",
			
			url: "#{url}",
			family: "cluster",

			dims: {
				margin: {top: 20, right: 90, bottom: 30, left: 90},
				width: parseInt("#{query.w}") || 1200,
				height: parseInt("#{query.h}") || 500
			},
			debug: parseInt("#{query.debug}" || "0"),

			keys: {
				NODE: "#{query.node}" || "name",
				CHILDREN: "#{query.children}" || "children",
				VALUE: "#{query.value}" || "value",
				DOC: "#{query.doc}" || "doc"
			}
		};

		const {NODE, CHILDREN, VALUE, DOC} = opts.keys;
										
append base_body
	script.
		Fetch( opts, (data,svg) => {	
			const
				width = svg.attr("width"),
				height = svg.attr("height");
			
			console.log(width,d3.scaleOrdinal,d3.schemeCategory10);
			const
				color = d3.scaleOrdinal(d3.schemeCategory10),
				format = d3.format(",d"),
				treemap = data => d3.treemap()
					.tile(tile)
					.size([width, height])
					.padding(1)
					.round(true);
						 /* (d3.hierarchy(data)
								.sum(d => d.value)
								.sort((a, b) => b.value - a.value)); */
			
			console.log(treemap);
			
			const root = treemap(data[0] || data);
			console.log(root);
			
			svg // = d3.create("svg")
					.attr("viewBox", [0, 0, width, height])
					.style("font", "10px sans-serif");

			const leaf = svg.selectAll("g")
				.data(root.leaves())
				.join("g")
					.attr("transform", d => `translate(${d.x0},${d.y0})`);

			leaf.append("title")
					.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);

			leaf.append("rect")
					.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
					.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
					.attr("fill-opacity", 0.6)
					.attr("width", d => d.x1 - d.x0)
					.attr("height", d => d.y1 - d.y0);

			leaf.append("clipPath")
					.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
				.append("use")
					.attr("xlink:href", d => d.leafUid.href);

			leaf.append("text")
					.attr("clip-path", d => d.clipUid)
				.selectAll("tspan")
				.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
				.join("tspan")
					.attr("x", 3)
					.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
					.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
					.text(d => d);		
		});

//- UNCLASSIFIED