diff --git a/src/plugin/plugin-app.jsx b/src/plugin/plugin-app.jsx index b2482d6..b05c7b4 100644 --- a/src/plugin/plugin-app.jsx +++ b/src/plugin/plugin-app.jsx @@ -14,6 +14,7 @@ export default React.createClass({ return { assets: [], chartData: null, + labels: false, selectedAssetIndex: 0 }; }, @@ -54,6 +55,12 @@ export default React.createClass({ }); }, + onLabelsChange(ev) { + this.setState({ + labels: ev.target.checked + }); + }, + render() { let assetList; let bundleDetails = {}; @@ -67,12 +74,10 @@ export default React.createClass({ if (this.state.assets.length > 1) { assetList = ( -
- -
+ ); } @@ -80,9 +85,16 @@ export default React.createClass({

Webpack Visualizer

- {assetList} +
+ {assetList} + + +
- + {this.state.error &&
{this.state.error}
} diff --git a/src/shared/components/chart-with-details.jsx b/src/shared/components/chart-with-details.jsx index 74b0d02..a31168b 100644 --- a/src/shared/components/chart-with-details.jsx +++ b/src/shared/components/chart-with-details.jsx @@ -58,6 +58,7 @@ export default class ChartWithDetails extends React.Component { onHover={this.onChartHover} onUnhover={this.onChartUnhover} onRender={this.onChartRender} + labels={this.props.labels} />
diff --git a/src/shared/components/chart.jsx b/src/shared/components/chart.jsx index 5a8c264..2492882 100644 --- a/src/shared/components/chart.jsx +++ b/src/shared/components/chart.jsx @@ -17,7 +17,11 @@ export default React.createClass({ }, componentDidUpdate(prevProps) { - if (this.props.data && this.props.data !== prevProps.data) { + let shouldUpdate = this.props.data && ( + this.props.data !== prevProps.data || + this.props.labels !== prevProps.labels + ); + if (shouldUpdate) { this.createChart(this.props.data); } }, @@ -27,7 +31,8 @@ export default React.createClass({ svgElement: this.refs.svg, root, onHover: this.props.onHover, - onUnhover: this.props.onUnhover + onUnhover: this.props.onUnhover, + labels: this.props.labels }); if (this.props.onRender) { diff --git a/src/shared/createVisualization.js b/src/shared/createVisualization.js index 046702e..e057e40 100644 --- a/src/shared/createVisualization.js +++ b/src/shared/createVisualization.js @@ -4,10 +4,53 @@ import {markDuplicates, getAllChildren, getAncestors} from './partitionedDataUti const FADE_OPACITY = 0.5; +const MIN_CHARS_TO_SHOW = 4; +const SPACE_PER_CHAR = 8; let paths, vis, totalSize; -export default function createVisualization({svgElement, root, onHover, onUnhover}) { +function addText(g) { + function cutText(d) { + let maxChars = getAllowedCharCount(d); + if (d.name.length <= maxChars) return d.name; + return d.name.substr(0, maxChars-1)+'…'; + } + + function getAllowedCharCount(d) { + let space = Math.sqrt(d.y + d.dy/2) * d.dx; + return Math.floor(space / SPACE_PER_CHAR); + } + + function getTextRotation(d) { + return (d.x * 2 + d.dx) / 2 * 180 / Math.PI - 90; + } + + function getTextTransform(d) { + let rotation = getTextRotation(d); + let translation = Math.sqrt(d.y + d.dy/2); + return ` + rotate(${rotation}) + translate(${translation} 0) + rotate(${(rotation > 0 && rotation < 180) ? -90 : 90}) + `; + } + + function shouldShowText(d) { + return getAllowedCharCount(d) >= MIN_CHARS_TO_SHOW; + } + + g.append("text") + .filter(shouldShowText) + .attr('transform', getTextTransform) + .attr('text-anchor', 'middle') + .attr('dy', '.35em') + .text(d => cutText(d)); +} + + +export default function createVisualization({ + svgElement, root, onHover, onUnhover, labels +}) { let chartSize = (root.maxDepth > 9) ? 950 : 750; let radius = Math.min(chartSize, chartSize) / 2; @@ -45,11 +88,13 @@ export default function createVisualization({svgElement, root, onHover, onUnhove .attr('transform', `translate(${chartSize / 2}, ${chartSize / 2})`); - paths = vis.data([root]).selectAll('path') + let g = vis.data([root]).selectAll('path') .data(nodes) .enter() - .append('svg:path') - .attr('display', d => (d.depth ? null : 'none')) + .append('svg:g') + .attr('display', d => (d.depth ? null : 'none')); + + paths = g.append('svg:path') .attr('d', arc) .attr('fill-rule', 'evenodd') .style('stroke', d => (d.duplicate) ? '#000' : '') @@ -59,6 +104,10 @@ export default function createVisualization({svgElement, root, onHover, onUnhove mouseover(object, onHover); }); + if (labels) { + addText(g); + } + totalSize = paths.node().__data__.value; diff --git a/src/shared/style.css b/src/shared/style.css index 3cf16f5..37f03e2 100644 --- a/src/shared/style.css +++ b/src/shared/style.css @@ -139,6 +139,10 @@ code { } +#svgWrapper text { + font-size: 11px; +} + .errorMessage { margin-top: 2em;