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;