31:T16df,function icicleChart(data, customOptions) { const defaultOptions = { accessor: () => 1, contentRenderer: () => {}, boxMargin: {x: 0.75, y: 0.25}, color: () => 'pink', isVertical: false, onRefocus: () => {}, rounding: 2, size: { width: 500, height: 500 }, transitionDuration: 750, tooltipRenderer: () => {}, tooltipContainer: html`

No tooltipRenderer()

`, wrapperStyle: '', } const options = {...defaultOptions, ...customOptions}; const { accessor, boxMargin, contentRenderer, color, isVertical, numberOpacity, onRefocus, rounding, size, transitionDuration, tooltipRenderer, tooltipContainer, wrapperStyle, } = options; let hoveredNode = null; let focus = null; const cellOpacity = d => hoveredNode && d !== hoveredNode ? 0.5 : 1; const { width, height } = size; const x0 = isVertical ? d => d.y0 : d => d.x0; const x1 = isVertical ? d => d.y1 : d => d.x1; const y0 = isVertical ? d => d.x0 : d => d.y0; const y1 = isVertical ? d => d.x1 : d => d.y1; const rectWidth = (d) => Math.max(0, y1(d) - y0(d) - boxMargin.y * 2); const rectHeight = (d) => Math.max(0, x1(d) - x0(d) - (Math.min(1, (x1(d) - x0(d)) / 2) + boxMargin.x * 2)); const root = partition(data, isVertical ? {width: height, height: width} : size); onRefocus(root); const svg = d3.select(DOM.svg(width, height)) .style('overflow', 'hidden') const cell = svg .selectAll('g') .data(root.descendants()) .enter() .append('g') .attr('transform', d => `translate(${y0(d) + boxMargin.x},${x0(d) + boxMargin.y})`); // .attr('opacity', cellOpacity); const tooltip = d3.select(tooltipContainer) .style('background', 'white') .style('padding', '10px') .style('border-radius', `${rounding}px`) .style('border', 'solid #eee 1px') .style('position', 'absolute') .style('pointer-events', 'none') .style('visibility', 'hidden'); function showTooltip(node) { const { offsetX: x, offsetY: y} = d3.event; const [xTranslateFacator, xSide, xClear, xOffset] = x < width / 2 ? [5, 'left', 'right', x] : [isVertical ? -5 : -50, 'right', 'left', -(x - width)]; const yTranslateFacator = y < height / 2 ? 20 : -100; tooltip .style('visibility', 'visible') .style('transform', `translate(${xTranslateFacator}%, ${yTranslateFacator}%)`) .style(xSide, xOffset + 'px') .style('top', y + 'px') .style(xClear, null); if (hoveredNode !== node) { hoveredNode = node; tooltipRenderer(node, tooltipContainer, options); } } function hideTooltip(node) { tooltip.style('visibility', 'hidden'); if (hoveredNode !== null) { hoveredNode = null; } } const rect = cell.append('rect') .attr('width', d => rectWidth(d)) .attr('height', d => rectHeight(d)) .attr('rx', rounding) .attr('fill', color) .style('cursor', 'pointer') .on('click', clicked) .on('mouseover', showTooltip) .on('mousemove', showTooltip) .on('mouseout', hideTooltip); const content = cell .append('foreignObject') .classed('container', true) .attr('pointer-events', 'none') .style('width', d => rectWidth(d) + 'px') .style('height', d => rectHeight(d) + 'px') .style('padding', '0px') .style('overflow', 'hidden') .style('background', 'none'); if (!isVertical) { content .attr('transform', d => `translate(${rectWidth(d)}) rotate(90)`) .style('height', d => rectWidth(d) + 'px') .style('width', d => rectHeight(d) + 'px') } const contentContainer = content .append('xhtml:div') .style('width', '100%') .style('height', '100%') .each((d, i, elements) => contentRenderer( d, elements[i], { ...options, rectangle: { width: rectWidth(d), height: rectHeight(d) }, } )); function setFocus(newFocus) { if (newFocus != focus) { focus = newFocus; onRefocus(newFocus); } } function clicked(p) { setFocus(focus === p ? p = p.parent : p); if (!focus) return; const updateTarget = isVertical ? d => d.target = { x0: (y0(d) - y0(p)) / (y1(p) - y0(p)) * width, x1: (y1(d) - y0(p)) / (y1(p) - y0(p)) * width, y0: x0(d) - x0(p), y1: x1(d) - x0(p), } : d => d.target = { x0: (x0(d) - x0(p)) / (x1(p) - x0(p)) * height, x1: (x1(d) - x0(p)) / (x1(p) - x0(p)) * height, y0: y0(d) - y0(p), y1: y1(d) - y0(p), }; root.each(updateTarget); const t = cell.transition().duration(transitionDuration) .attr('transform', d => `translate(${y0(d.target)},${x0(d.target)})`); rect.transition(t) .attr('height', d => rectHeight(d.target)) .attr('width', d => rectWidth(d.target)) .attr('fill', color); content .transition(t) .style('height', d => (isVertical ? rectHeight(d.target) : rectWidth(d.target)) + 'px') .style('width', d => (isVertical ? rectWidth(d.target) : rectHeight(d.target)) + 'px'); contentContainer .each((d, i, elements) => contentRenderer( d, elements[i], { ...options, rectangle: { width: rectWidth(d.target), height: rectHeight(d.target) }, } )); } function setFocusById(id) { let focusTarget = null; root.each(d => { if (d.data.id === id && d.data.id !== focus.data.id) { focusTarget = d; clicked(focusTarget); } }); return focusTarget; } const chart = html`

${svg.node()}${tooltipContainer}

`; chart.setFocusById = setFocusById; return chart; }32:[] 2f:{"title":"Bidirectional Icicle Chart","cells":[{"id":0,"value":"md`# Bidirectional Icicle Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"function contentRenderer(datum, container, { rectangle: { height } }) {\n const { name } = datum.data;\n\n const row = html`

${name}

`;\n\n const content = html`

\n ${height > 23 ? row : ''}\n

`;\n \n container.innerHTML = '';\n container.appendChild(content);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"function tooltipRenderer(node, container, options) {\n const tooltip = html`

${node.data.name}: ${node.data.value}

`;\n\n container.innerHTML = '';\n container.appendChild(tooltip);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"partition = (data, size) => {\n const { height, width } = size;\n\n const root = d3.hierarchy(data)\n .sort((a, b) => b.value - a.value || b.height - a.height);\n const findDepth = ({ children, depth }) => children ? d3.max(children.map(findDepth)) : depth + 1;\n const maxDepth = findDepth(root);\n const layout1 = d3.partition() \n .size([height, (root.height + 1) * width / maxDepth])\n .padding(0);\n const layout = layout1(root);\n return layout;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}