{{> header}}

<link rel="stylesheet" type="text/css" href="assets/css/dev_atlas-insights.css"/>

<div class="atlas-stat-sizes-page-title">
    <div class="atlas-overline">
        <svg width="16" height="16" role="img">
            <use xlink:href="#icon-bundle"></use>
        </svg>
        Bundles structure & sizes
    </div>
    <div class="atlas-section">
        <div role="heading" aria-level="1" class="atlas atlas-title atlas-title_1">
            <span class="atlas-title__text">
                {{projectInfo.name}}
            </span>
        </div>
    </div>
</div>
<section class="atlas-stat-sheet">
    <svg id="js-graph-svg" class="atlas-stat-bundle" height="1000"></svg>

    <div class="atlas-cross-dependencies-legend atlas atlas-p">
        <svg width="14" height="14" role="img">
            <use xlink:href="#icon-about"></use>
        </svg>
        <div class="atlas-cross-dependencies-legend__example">
            <strong>zoom</strong>: double click <br>
            <strong>enlarge</strong>: <kbd>shift</kbd> + double click <br>
            <strong>drag</strong>: click and move
        </div>
        <div class="atlas-cross-dependencies-legend__example"></div>
        <div class="atlas-cross-dependencies-legend__list"></div>
    </div>

    <div class="atlas-stat-columns _imports">
        {{#content.bundleImports}}
            <div class="atlas-stat-columns__item">
                <div role="heading" aria-level="3" class="atlas-stat-section__title-sub">{{name}}</div>
                <ol role="list" class="atlas-stat-list _imports">
                    {{#imports}}
                        <li role="listitem" class="atlas-stat-list__item">
                            <div class="atlas-stat-item">{{.}}</div>
                        </li>
                    {{/imports}}
                </ol>
            </div>
        {{/content.bundleImports}}
    </div>
</section>

<section class="atlas-stat-sheet">
    <header class="atlas-stat-header">
        <div role="heading" aria-level="1" class="atlas-stat-header__title">
            Cross dependencies
        </div>
    </header>

    <div class="atlas-cross-dependencies-list">
        <div class="atlas-cross-dependencies-list__column">
            <div role="heading" aria-level="2" class="atlas-cross-dependencies-list__title">
                Orphans
            </div>
            <div role="list" class="atlas-stat-list _imports">
                {{#content.crossDeps.orphans}}
                    <div role="listitem" class="atlas-stat-list__item">
                        <div class="atlas-stat-item" title="{{name}}">{{displayName}}</div>
                    </div>
                {{/content.crossDeps.orphans}}
            </div>
            {{^content.crossDeps.orphans}}
                No orphans found!
            {{/content.crossDeps.orphans}}
        </div>
        <div class="atlas-cross-dependencies-list__column">
            <div role="heading" aria-level="2" class="atlas-cross-dependencies-list__title">
                Duplicated imports
            </div>
            <div role="list" class="atlas-stat-list _imports">
                {{#content.crossDeps.duplicates}}
                    <div role="listitem" class="atlas-stat-list__item">
                        <div class="atlas-stat-item" title="{{name}}">
                            <strong>{{displayName}} ({{total}})</strong>: {{#importedBy}}{{.}}, {{/importedBy}}
                        </div>
                    </div>
                {{/content.crossDeps.duplicates}}
            </div>
        </div>
    </div>

    <svg id="js-cross-dependencies-graph" class="atlas-cross-dependencies-graph"></svg>

    <div class="atlas-cross-dependencies-legend atlas atlas-p">
        <svg width="14" height="14" role="img">
            <use xlink:href="#icon-about"></use>
        </svg>
        <div class="atlas-cross-dependencies-legend__caption">
            This graph shows cross components dependencies and help you run
            project without unneeded relations and orphans.
        </div>
        <div class="atlas-cross-dependencies-legend__example">
            For example, global components bundle should not have any
            dependencies, since by the name it already included in all
            areas. Also components that not included in any resulted CSS file probably redundant.
        </div>
        <div role="list" class="atlas-cross-dependencies-legend__list">
            <div role="listitem">
                <svg width="4.5" height="4.5">
                    <circle r="4.5" cx="4.5" cy="4.5" fill="#307fe2"></circle>
                </svg>
                <div class="atlas-cross-dependencies-legend__p"> - standalone file</div>
            </div>
            <div role="listitem">
                <svg width="4.5" height="4.5">
                    <circle r="2" cx="3" cy="4.5" fill="#307fe2"></circle>
                </svg>
                <div class="atlas-cross-dependencies-legend__p"> - partial file</div>
            </div>
        </div>
    </div>
</section>

<section class="atlas-stat-sheet">
    <header class="atlas-stat-header">
        <div role="heading" aria-level="1" class="atlas-stat-header__title">
            Components sizes
        </div>
    </header>
    <div role="list" class="atlas-stat-sizes-grid">
        {{#content.weight}}
            <div role="listitem">
                <figure class="atlas-stat-size-file">
                    <svg width="{{svg.radius}}" height="{{svg.radius}}">
                        <rect width="{{svg.radius}}" height="{{svg.radius}}" x="0" y="0" fill="currentColor"></rect>
                    </svg>
                    <figcaption class="atlas-stat-size-file__caption">
                        <div class="atlas-stat-size-file__size">{{view.size}}</div>
                        <div role="heading" aria-level="2" class="atlas-stat-size-file__title">{{filename}}</div>
                    </figcaption>
                </figure>
            </div>
        {{/content.weight}}
    </div>
    <div class="atlas-cross-dependencies-legend atlas atlas-p">
        <svg width="14" height="14" role="img">
            <use xlink:href="#icon-about"></use>
        </svg>
        <div class="atlas-cross-dependencies-legend__example">
            Note that this is approximation of size. Some components could contain includes that may change
            size of compiled component dramatically.
        </div>
        <div class="atlas-cross-dependencies-legend__example">&nbsp;</div>
        <div class="atlas-cross-dependencies-legend__list">&nbsp;</div>
    </div>
</section>

<script>
    window.importsData ={{{content.crossDeps.graphData}}};
    window.bundleTree ={{{content.tree}}};
</script>

<script src="assets/js/d3.v4.min.js"></script>
<script src="assets/js/d3tree.js"></script>
<script src="assets/js/d3importsgraph.js"></script>

{{> footer}}