//- UNCLASSIFIED

extends base
append base_parms
	- tech = "d3"
	
append base_help
	:markdown
		Display d3 tree-fan chart using parameters:

			src = source url returning tree [ { name: "...", size: N, doc: "", nodes: [ {...}, ... ] }, ... ]
			name = "name" || "name%..." || "" of source record(s)
			pivots = "key,key,..." || "" source record grouping keys
			w = drawing width
			h = drawing height
			debug = level of debugging alerts
			node,nodes,value,size,parent,doc = tree keys

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.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: "fan,map,cpack,force,burst",

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

			NODE: "#{query.node}" || "name",
			NODES: "#{query.nodes}" || "children",
			VALUE: "#{query.value}" || "value",
			PARENT: "#{query.parent}" || "parent",
			SIZE: "#{query.size}" || "size",
			DOC: "#{query.doc}" || "doc"
		};

		const {NODE, NODES, VALUE, SIZE, PARENT, DOC} = opts;
		const {isArray,isString,Load} = BASE;
										
append base_body
	script.
		Load( opts, (data,svg) => {			
			function tree(data) {
				var root = d3.hierarchy(data, d => d[NODES] );

				root.dx = 10;
				root.dy = width / (root.height + 1);
				return d3.tree().nodeSize([root.dx, root.dy])(root);
			}
			
			var
				width = svg.attr("width"),
				height = svg.attr("height"),
				root = tree(data[0]);

			let x0 = Infinity;
			let x1 = -x0;
			root.each(d => {
				if (d.x > x1) x1 = d.x;
				if (d.x < x0) x0 = d.x;
			  });
			
			svg.attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);

			/*
			const svg = d3.create("svg")
				  .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);
			*/

			var g = svg.append("g")
					.attr("font-family", "sans-serif")
					.attr("font-size", 10)
					.attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);

			var link = g.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", d3.linkHorizontal()
					.x(d => d.y)
					.y(d => d.x));

			var node = g.append("g")
					.attr("stroke-linejoin", "round")
					.attr("stroke-width", 3)
					.selectAll("g")
					.data(root.descendants())
					.join("g")
					.attr("transform", d => `translate(${d.y},${d.x})`);

			node.append("circle")
					.attr("fill", d => d.children ? "#555" : "#999")
					.attr("r", 2.5);

			node.append("text")
					.attr("dy", "0.31em")
					.attr("x", d => d.children ? -6 : 6)
					.attr("text-anchor", d => d.children ? "end" : "start")
					.text(d => d.data.name)
					.clone(true).lower()
					.attr("stroke", "white");

			//return svg.node();
		});

//- UNCLASSIFIED