//- UNCLASSIFIED
extends base
append base_help
	:markdown
		Display d3 dendrogram 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

		//- legacy
			name = "name" || "name%..." || "" of source record(s)
			pivots = "key,key,..." || "" source record grouping 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",
			/*
			"#{query.pivots}"
				? "!{query.src}.tree?name=#{query.name}&_sort=#{query.pivots}"
				: "#{query.name}"
							? "!{query.src}.schema?name=#{query.name}"
							: "!{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) => {	
			function autoBox() {
				document.body.appendChild(this);
				const {x, y, width, height} = this.getBBox();
				document.body.removeChild(this);
				return [x, y, width, height];
			}	
			function tree(data) {
				const root = d3.hierarchy(data).sort((a, b) => d3.descending(a.height, b.height) || d3.ascending(a.data[NODE], b.data[NODE]));
				root.dx = 10;
				root.dy = width / (root.height + 1);
				return d3.cluster().nodeSize([root.dx, root.dy])(root);
			}

			var
				width = svg.attr("width"),
				height = svg.attr("height");
			
			const root = tree(data[0] || data);

			//const svg = d3.create("svg");
			svg.append("g")
				.attr("fill", "none")
				.attr("stroke", "#555")
				.attr("stroke-opacity", 0.4)
				.attr("stroke-width", 1.5)
			.selectAll("path")
				.data(root.links())
				.join("path")
					.attr("d", d => `
						M${d.target.y},${d.target.x}
						C${d.source.y + root.dy / 2},${d.target.x}
						 ${d.source.y + root.dy / 2},${d.source.x}
						 ${d.source.y},${d.source.x}
					`);

			svg.append("g")
				.selectAll("circle")
				.data(root.descendants())
				.join("circle")
					.attr("cx", d => d.y)
					.attr("cy", d => d.x)
					.attr("fill", d => d.children ? "#555" : "#999")
					.attr("r", 2.5);

			svg.append("g")
					.attr("font-family", "sans-serif")
					.attr("font-size", 10)
					.attr("stroke-linejoin", "round")
					.attr("stroke-width", 3)
				.selectAll("text")
				.data(root.descendants())
				.join("text")
					.attr("x", d => d.y)
					.attr("y", d => d.x)
					.attr("dy", "0.31em")
					.attr("dx", d => d.children ? -6 : 6)
					.text(d => d.data[NODE])
				.filter(d => d.children)
					.attr("text-anchor", "end")
				.clone(true).lower()
					.attr("stroke", "white");

		});

//- UNCLASSIFIED