{"comment":"<div class='pcc-comment<%= (!!first) ? \" pcc-comment-first\" : \"\" %><%= (!!last) ? \" pcc-comment-last\" : \"\" %><%= (editMode !== undefined) ? \" pcc-comment-edit-container\" : \"\" %>'>\n <% if (editMode !== undefined) { %>\n <textarea class='pcc-comment-edit'><%- prevText %></textarea>\n <div class='pcc-pull-right'>\n <button data-pcc-comment='cancel' title='<%= language.cancelButton %>'><%= language.cancelButton %></button>\n <button data-pcc-comment='done' title='<%= language.doneButton %>'><%= language.doneButton %></button>\n </div>\n <div class='pcc-clear'></div>\n <%} else { %>\n <% if (isMine === true) { %>\n <div data-pcc-comment-menu>\n <div class='pcc-icon pcc-icon-list pcc-comment-menu-trigger'></div>\n <button class='pcc-icon pcc-icon-edit' data-pcc-comment-edit title='<%= language.editButton %>'></button>\n <button class='pcc-icon pcc-icon-delete' data-pcc-comment-delete title='<%= language.deleteButton %>'></button> \n <div class=\"pcc-clear\"></div>\n </div>\n <% } %>\n <div class='pcc-comment-text'><%- comment.getText() %></div>\n <div class='pcc-comment-footer pcc-clearfix'>\n <div class='pcc-comment-date pcc-pull-left'><%- date %></div>\n <div class='pcc-comment-owner pcc-pull-right'><%- owner %></div>\n </div>\n <% } %>\n</div>\n","contextMenu":"<div class=\"pcc-pull-right\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationOptions %>\" data-pcc-toggle=\"context-menu-options\"></button>\n <button class=\"pcc-icon pcc-icon-updown\" title=\"<%= moveContext %>\" data-pcc-move-context-menu></button>\n</div>\n<div class=\"pcc-pull-left\" data-pcc-toggle-id=\"context-menu-options\"<% if (menuOptions.collapseLeftSide === true) { %> style=\"width:auto\"<% } %>>\n\n <div class=\"pcc-tabset\">\n\n <% if (menuOptions.showTabArea === true) { %>\n <div class=\"pcc-tabs\">\n\n <% if (menuOptions.showMainTab) { %>\n <div class=\"pcc-active\" data-pcc-toggle=\"context-menu-tab1\" title=\"<%= fillColorMenuItem %>\">\n <% if (mark.getType() === 'EllipseAnnotation') { %>\n <span class=\"pcc-icon pcc-icon-annotate-ellipse-filled\"></span>\n\n <% } else if (mark.getType().search('Stamp') !== -1) { %>\n <span class=\"pcc-icon pcc-icon-annotate-stamp\"></span>\n\n <% } else if (mark.getType() === 'LineAnnotation' && mark.getEndHeadType() === 'None') { %>\n <span class=\"pcc-icon pcc-icon-annotate-line\"></span>\n\n <% } else if (mark.getType() === 'LineAnnotation' && mark.getEndHeadType() === 'FilledTriangle') { %>\n <span class=\"pcc-icon pcc-icon-annotate-arrow\"></span>\n\n <% } else if (mark.getType() === 'TextSelectionRedaction') { %>\n <span class=\"pcc-icon pcc-icon-redact-textselection\"></span>\n\n <% } else { %>\n <span class=\"pcc-icon pcc-icon-annotate-rectangle-filled\"></span>\n <% } %>\n </div>\n <% } %>\n\n <% if (menuOptions.showBorderColorTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab2\" title=\"<%= borderColorMenuItem %>\">\n <% if (mark.getType() === 'EllipseAnnotation') { %>\n <span class=\"pcc-icon pcc-icon-annotate-ellipse\"></span>\n <% } else { %>\n <span class=\"pcc-icon pcc-icon-annotate-rectangle\"></span>\n <% } %>\n </div>\n <% } %>\n\n <% if (menuOptions.showFontTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab3\" title=\"<%= fontMenuItem %>\"\n <% if (menuOptions.activateFontTab === true) { %> class=\"pcc-active\"<% } %>>\n <span class=\"pcc-icon pcc-icon-annotate-text\"></span>\n </div>\n <% } %>\n\n <% if (menuOptions.showLayerTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab4\" title=\"<%= layerOrder %>\"\n <% if (menuOptions.activateLayerTab === true) { %> class=\"pcc-active\"<% } %>>\n <span class=\"pcc-icon pcc-icon-layer-front\"></span>\n </div>\n <% } %>\n\n <% if (menuOptions.showESignTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab5\" class=\"pcc-active\" title=\"<%= currentSignature %>\">\n <span class=\"pcc-icon pcc-icon-esign\"></span>\n </div>\n <% } %>\n \n <% if (menuOptions.showLinkTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab6\" class=\"pcc-active\">\n <span class=\"pcc-icon pcc-icon-link\"></span> \n </div>\n <% } %>\n \n <% if (menuOptions.showImageTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab7\" class=\"pcc-active\">\n <span class=\"pcc-icon pcc-icon-image-stamp\"></span> \n </div>\n <% } %>\n\n <% if (menuOptions.showLinkStylesTab === true) { %>\n <div data-pcc-toggle=\"context-menu-tab1\">\n <span class=\"pcc-icon pcc-icon-annotate-rectangle-filled\"></span> \n </div>\n <% } %>\n </div>\n <% } %>\n\n <% if (showAllEditControls) { %>\n <div class=\"pcc-pull-right\">\n <button data-pcc-delete-mark class=\"pcc-icon pcc-icon-delete\" title=\"<%= deleteMarks %>\"></button></br>\n <button data-pcc-add-comment-context-menu class=\"pcc-icon pcc-icon-comment\" title=\"<%= addComment %>\"></button>\n </div>\n <% } %>\n \n <% if(menuOptions.showTabArea) { %>\n <div data-pcc-toggle-id=\"context-menu-tab1\" \n class=\"pcc-tab-content<% if (menuOptions.activateMainTab === true) {%> pcc-open<% } %>\">\n\n <% if (mark.getColor || mark.getFillColor) { %>\n <div class=\"pcc-select pcc-select-color\" data-pcc-fill-color data-pcc-toggle=\"dropdown-fill-color\" title=\"<%= fillColorMenuItem %>\">\n <div class=\"pcc-label\">\n <% if (mark.getColor) { %>\n <div class=\"pcc-swatch\" style=\"background:<%= mark.getColor() %>\"></div>\n <% } else if (mark.getFillColor) { %>\n <div class=\"pcc-swatch <%= (mark.getFillColor() === 'transparent') ? 'pcc-transparent-effect' : '' %>\" <%= (mark.getFillColor() === 'transparent') ? '' : 'style=\"background:' + mark.getFillColor() +'\"'%>></div>\n <% } %>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-fill-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n <% if (menuOptions.showTransparentFillColor) { %>\n <div data-pcc-color-key=\"transparent\" class=\"pcc-transparent-effect\"></div>\n <% } %>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getOpacity) { %>\n <div class=\"pcc-select pcc-select-opacity\" data-pcc-fill-opacity data-pcc-toggle=\"dropdown-fill-opacity\" title=\"<%= fillOpacityMenuItem %>\">\n <div class=\"pcc-icon pcc-icon-opacity\"></div>\n <div class=\"pcc-label\"><%= Math.round(parseInt(mark.getOpacity() / 2.55, 10) / 10) * 10 %>%</div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-fill-opacity\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option0\"></span> <%= opacityOptions.item0 %></div>\n <div><span class=\"pcc-option pcc-option10\"></span> <%= opacityOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option20\"></span> <%= opacityOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option30\"></span> <%= opacityOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option40\"></span> <%= opacityOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option50\"></span> <%= opacityOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option60\"></span> <%= opacityOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option70\"></span> <%= opacityOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option80\"></span> <%= opacityOptions.item8 %></div>\n <div><span class=\"pcc-option pcc-option90\"></span> <%= opacityOptions.item9 %></div>\n <div><span class=\"pcc-option pcc-option100\"></span> <%= opacityOptions.item10 %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getThickness) { %>\n <div class=\"pcc-select pcc-select-border\" data-pcc-border-width data-pcc-toggle=\"dropdown-border\" title=\"<%= borderWidth %>\">\n <div class=\"pcc-icon pcc-icon-border-width\"></div>\n <div class=\"pcc-label\"><%= mark.getThickness() %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option1\"></span> <%= borderWidthOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option2\"></span> <%= borderWidthOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option3\"></span> <%= borderWidthOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option4\"></span> <%= borderWidthOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option5\"></span> <%= borderWidthOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option6\"></span> <%= borderWidthOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option7\"></span> <%= borderWidthOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option8\"></span> <%= borderWidthOptions.item8 %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getLabel) { %>\n <div class=\"pcc-select pcc-select-stamp-label\" data-pcc-stamp-label data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= mark.getLabel() %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <div><%= stampLabelApproved %></div>\n <div><%= stampLabelReviewed %></div>\n <div><%= stampLabelRejected %></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getReason && reasons.enableRedactionReasonSelection) { %>\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= menuOptions.redactionReasonLabel %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n <% if (menuOptions.enableCustomRedactionReason) { %>\n <input type=\"text\" data-pcc-redaction-reason-input value=\"<%= mark.getReason()%>\">\n <% } %>\n <% } %>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab2\" class=\"pcc-tab-content\">\n <div class=\"pcc-select pcc-select-color\" data-pcc-border-color data-pcc-toggle=\"dropdown-border-color\" title=\"<%= borderColorMenuItem %>\">\n <div class=\"pcc-label\">\n <div class=\"pcc-swatch <%= (mark.getBorderColor && mark.getBorderColor() === 'transparent') ? 'pcc-transparent-effect' : '' %>\" <%= (mark.getBorderColor && mark.getBorderColor() !== 'transparent') ? 'style=\"background:' + mark.getBorderColor() +'\"' : '' %>></div>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n <% if (menuOptions.showTransparentBorderColor) { %>\n <div data-pcc-color-key=\"transparent\" class=\"pcc-transparent-effect\"></div>\n <% } %>\n </div>\n </div>\n\n <div class=\"pcc-select pcc-select-border\" data-pcc-border-width data-pcc-toggle=\"dropdown-border\" title=\"<%= borderWidth %>\">\n <div class=\"pcc-icon pcc-icon-border-width\"></div>\n <div class=\"pcc-label\"><%= mark.getBorderThickness ? mark.getBorderThickness() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-border\" class=\"pcc-dropdown\">\n <div><span class=\"pcc-option pcc-option1\"></span> <%= borderWidthOptions.item1 %></div>\n <div><span class=\"pcc-option pcc-option2\"></span> <%= borderWidthOptions.item2 %></div>\n <div><span class=\"pcc-option pcc-option3\"></span> <%= borderWidthOptions.item3 %></div>\n <div><span class=\"pcc-option pcc-option4\"></span> <%= borderWidthOptions.item4 %></div>\n <div><span class=\"pcc-option pcc-option5\"></span> <%= borderWidthOptions.item5 %></div>\n <div><span class=\"pcc-option pcc-option6\"></span> <%= borderWidthOptions.item6 %></div>\n <div><span class=\"pcc-option pcc-option7\"></span> <%= borderWidthOptions.item7 %></div>\n <div><span class=\"pcc-option pcc-option8\"></span> <%= borderWidthOptions.item8 %></div>\n </div>\n </div>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab3\"\n class=\"pcc-tab-content<% if (menuOptions.activateFontTab) { %> pcc-open<% } %>\">\n\n <% if (mark.getFontStyle && mark.getType() !== 'TextRedaction') { %>\n <div class=\"pcc-row\">\n <button class=\"pcc-icon pcc-icon-text-bold<%= _.indexOf(mark.getFontStyle(), 'Bold') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Bold\" title=\"<%= fontBoldText %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-italic<%= _.indexOf(mark.getFontStyle(), 'Italic') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Italic\" title=\"<%= fontItalic %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-underline<%= _.indexOf(mark.getFontStyle(), 'Underline') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Underline\" title=\"<%= fontUnderline %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-text-strikeout<%= _.indexOf(mark.getFontStyle(), 'Strikeout') !== -1 ? ' pcc-active' : '' %>\" \n data-pcc-font-style=\"Strikeout\" title=\"<%= fontStrikeout %>\"></button>\n\n <% if (mark.getHorizontalAlignment) { %>\n <button class=\"pcc-icon pcc-icon-text-<%= mark.getHorizontalAlignment().toLowerCase() %>\" \n data-pcc-font-align title=\"<%= paragraphAlignTitle %>\"></button>\n <% } %>\n </div>\n <% } %>\n <div class=\"pcc-row\">\n\n <% if (mark.getFontColor) { %>\n <div class=\"pcc-select pcc-select-color\" data-pcc-font-color data-pcc-toggle=\"dropdown-font-color\" title=\"<%= fontColorMenuItem %>\">\n <div class=\"pcc-label\">\n <div class=\"pcc-swatch\" style=\"background:<%= mark.getFontColor ? mark.getFontColor() : '' %>\"></div>\n </div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font-color\" class=\"pcc-dropdown\">\n <div style=\"background:#ff0000\"></div>\n <div style=\"background:#ffff00\"></div>\n <div style=\"background:#f7941d\"></div>\n <div style=\"background:#00ff00\"></div>\n <div style=\"background:#00ffff\"></div>\n <div style=\"background:#ff00ff\"></div>\n <div style=\"background:#6666ff\"></div>\n <div style=\"background:#cccccc\"></div>\n <div style=\"background:#ffffff\"></div>\n <div style=\"background:#cc0000\"></div>\n <div style=\"background:#999900\"></div>\n <div style=\"background:#a3620a\"></div>\n <div style=\"background:#00a651\"></div>\n <div style=\"background:#0000ff\"></div>\n <div style=\"background:#92278f\"></div>\n <div style=\"background:#3333cc\"></div>\n <div style=\"background:#888888\"></div>\n <div style=\"background:#000000\"></div>\n </div>\n </div>\n <% } %>\n\n <% if (mark.getType() !== 'RectangleRedaction') { %>\n <div class=\"pcc-select pcc-select-font\" data-pcc-font-name data-pcc-toggle=\"dropdown-font\" title=\"<%= selectFont %>\">\n <div class=\"pcc-label\"><%= mark.getFontName ? mark.getFontName() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font\" class=\"pcc-dropdown\">\n <div><%= fontArial %></div>\n <div><%= fontComicSans %></div>\n <div><%= fontCourier %></div>\n <div><%= fontCourierNew %></div>\n <div><%= fontGeneva %></div>\n <div><%= fontGeorgia %></div>\n <div><%= fontHelvetica %></div>\n <div><%= fontTimes %></div>\n <div><%= fontTimesNewRoman %></div>\n <div><%= fontVerdana %></div>\n </div>\n </div>\n\n <div class=\"pcc-select pcc-select-font-size\" data-pcc-font-size data-pcc-toggle=\"dropdown-font-size\" title=\"<%= fontSize %>\">\n <div class=\"pcc-label\"><%= mark.getFontSize ? mark.getFontSize() : '' %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-font-size\" class=\"pcc-dropdown\">\n <div>8</div>\n <div>9</div>\n <div>10</div>\n <div>11</div>\n <div>12</div>\n <div>14</div>\n <div>16</div>\n <div>20</div>\n <div>22</div>\n <div>24</div>\n <div>26</div>\n <div>28</div>\n <div>36</div>\n <div>48</div>\n <div>72</div>\n </div>\n </div>\n <% } %>\n </div>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab4\"\n class=\"pcc-tab-content<% if (menuOptions.activateLayerTab === true) { %> pcc-open<% } %>\">\n\n <button data-pcc-move-mark=\"ToFront\" class=\"pcc-icon pcc-icon-layer-front\" title=\"<%= moveToFrontMenuItem %>\"></button>\n <button data-pcc-move-mark=\"Forward\" class=\"pcc-icon pcc-icon-layer-forward\" title=\"<%= moveForwardMenuItem %>\"></button>\n <button data-pcc-move-mark=\"Backward\" class=\"pcc-icon pcc-icon-layer-backward\" title=\"<%= moveBackwardMenuItem %>\"></button>\n <button data-pcc-move-mark=\"ToBack\" class=\"pcc-icon pcc-icon-layer-back\" title=\"<%= moveToBackMenuItem %>\"></button>\n </div>\n\n <div data-pcc-toggle-id=\"context-menu-tab5\" class=\"pcc-tab-content<% if (menuOptions.activateESignTab) { %> pcc-open<% } %>\">\n <div data-pcc-esign-preview></div> \n </div>\n \n <div data-pcc-toggle-id=\"context-menu-tab6\" class=\"pcc-tab-content<% if (menuOptions.activateLinkTab) { %> pcc-open<% } %>\">\n <div class='pcc-hyperlink-header'>\n <a href=\"<%= menuOptions.linkText %>\" target=\"_blank\" data-pcc-link-navigate>\n <span class=\"pcc-icon pcc-icon-external-link\" title=\"<%= hyperlinkNavigate %>\"></span>\n </a>\n <label class=\"pcc-hyperlink-label\"><%= hyperlink %></label> \n </div>\n <input type=\"text\" data-pcc-link-input>\n </div>\n \n <div data-pcc-toggle-id=\"context-menu-tab7\" class=\"pcc-tab-content<% if (menuOptions.activateImageTab) { %> pcc-open<% } %>\">\n <img src=\"<%= menuOptions.currentImage %>\" alt=\"Image Stamp Preview\" class=\"pcc-image-stamp-preview\" data-pcc-image-stamp-preview>\n </div>\n <% } %>\n </div>\n\n <% if (mark.getType().match(/annotation/i)) { %>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"includeInBurnedDocument\" class=\"pcc-checkbox<% if (mark.getData('Accusoft-burnAnnotation')) { %> pcc-checked<% } %>\">\n <span></span><label><%= includeInBurnedDocument %></label>\n </div>\n </div>\n <% } %>\n</div>\n","copyOverlay":"<div class=\"pcc-overlay-inner pcc-overlay-center pcc-copy-overlay\">\n <button class=\"pcc-overlay-closer\" data-pcc-page-redaction=\"cancel\">×</button>\n <div class=\"pcc-copy-container\">\n <textarea class=\"pcc-copy-textarea\"></textarea>\n <div class=\"pcc-copy-label\"><%=options.language.copyInstruction%></div>\n </div>\n \n</div>","downloadOverlay":" <div class=\"pcc-overlay-inner\" data-download-overlay>\n <button class=\"pcc-overlay-closer\">×</button>\n <div class=\"pcc-download-menu\">\n <% if (options && options.mode === 'pending') { %>\n <div class=\"pcc-center\">\n <span><%= options.language.burnInPending %></span>\n <span class=\"pcc-load\"></span>\n </div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n </div>\n <% } else if (options && options.mode === 'complete') { %>\n <div class=\"pcc-center\"><%= options.language.burnInComplete %></div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n <button class=\"pcc-overlay-download\"><%= options.language.saveButton %></button>\n </div>\n <% } else if (options && options.mode === 'error') { %>\n <div class=\"pcc-center\"><%= options.language.burnInError %></div>\n <div class=\"pcc-center pcc-margin-top\">\n <button class=\"pcc-overlay-cancel pcc-secondary\"><%= options.language.cancelButton %></button>\n <button class=\"pcc-overlay-retry\"><%= options.language.retryButton %></button>\n </div>\n <% } %>\n </div>\n</div>","esignOverlay":"<div class=\"pcc-overlay-inner pcc-overlay-center\">\n<!-- <button class=\"pcc-overlay-closer\" data-pcc-esign=\"cancel\">×</button>-->\n\n <div class=\"pcc-viewset <% if(activeTab === 'manage') { %>pcc-tall<% } %>\">\n <div class=\"pcc-view-content <% if(activeTab !== 'freehand') { %>pcc-hide<% } %>\">\n <div data-pcc-esign=\"draw\" class=\"pcc-esign-draw-pad\"></div>\n <div class=\"pcc-esign-draw-line\"></div>\n </div>\n\n \n <div class=\"pcc-view-content <% if(activeTab !== 'text') { %>pcc-hide<% } %>\">\n <div class=\"pcc-row pcc-center\">\n <div>Type your signature:</div>\n <input type=\"text\" data-pcc-esign=\"textInput\" />\n </div>\n <div data-pcc-signature-previews></div>\n </div>\n \n <div class=\"pcc-view-content <% if(activeTab !== 'manage') { %>pcc-hide<% } %> pcc-tall\">\n <div data-pcc-esign=\"manageView\" class=\"pcc-esign-manage\">\n <div class='pcc-text-center pcc-margin-top'><%= esignNoSignaturesAvailable %></div>\n </div>\n </div>\n </div>\n \n <div class=\"pcc-layer-up-relative\">\n \n <% if(activeTab === 'manage') { %>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"drawNew\" title=\"<%= esignNewDraw %>\"><%= esignNewDraw %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"typeNew\" title=\"<%= esignNewType %>\"><%= esignNewType %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"cancel\" title=\"<%= doneButton %>\"><%= doneButton %></button>\n </div>\n </div>\n <% } else { %> \n <div class=\"pcc-row\">\n <% if (categories && categories.length) { %>\n <div class=\"pcc-pull-right pcc-width-50\">\n <div class=\"pcc-select pcc-select-esign-category pcc-align-right pcc-width-100\" data-pcc-esign-category data-pcc-toggle=\"dropdown-esign-category\" title=\"<%= fillOpacityMenuItem %>\">\n <span class=\"pcc-hide pcc-show-lg-inline\"><%= category %></%></span>\n <div class=\"pcc-label\"><%= categories[0] %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-esign-category\" class=\"pcc-dropdown pcc-dropup pcc-align-right\">\n <% _.forEach(categories, function(category) { %>\n <div><%= category %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <% } %>\n <div data-pcc-checkbox=\"esignSave\" data-pcc-esign-save=\"true\" class=\"pcc-checked pcc-checkbox pcc-width-50\">\n <span></span><label><%= esignSaveForLater %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"cancel\" title=\"<%= cancelButton %>\"><%= cancelButton %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"clear\" title=\"<%= clearButton %>\"><%= clearButton %></button>\n </div>\n <div class=\"pcc-col-4\">\n <button data-pcc-esign=\"save\" title=\"<%= saveButton %>\"><%= saveButton %></button>\n </div>\n </div>\n <% } %>\n </div>\n\n</div>\n","hyperlinkMenu":"<div class='pcc-hyperlink pcc-clearfix pcc-hyperlink-<%= mode %>'>\n <% if (mode === \"edit\") { %>\n <span class=\"pcc-hyperlink-label\"><%= language.hyperlink %></span>\n <div class=\"pcc-hyperlink-right\">\n <button data-pcc-hyperlink=\"done\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-done\" title=\"<%= language.doneButton %>\"></button>\n <button data-pcc-hyperlink=\"delete\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-delete\" title=\"<%= language.deleteButton %>\"></button>\n </div>\n <div class=\"pcc-hyperlink-input\">\n <button data-pcc-hyperlink=\"clear\">×</button>\n <input type=\"text\">\n </div>\n <%} else if (mode === \"view\" && link) { %>\n <% if (hrefType === \"page\") { %>\n <a href=\"<%= link %>\" data-pcc-link-navigate data-href-type=\"<%= hrefType %>\"><%= language.documentHyperlinkGotoPage + link %>.</a>\n <%} else { %>\n <% if (hyperlinkType === \"textHyperlink\") { %>\n <button data-pcc-hyperlink=\"edit\" class=\"pcc-hyperlink-icon pcc-hyperlink-icon-edit\" title=\"<%= language.editButton %>\"></button>\n <% } %>\n <a href=\"<%= link %>\" data-pcc-link-navigate target=\"_blank\"><%= link %></a>\n <% } %>\n <% } %>\n</div>\n","imageStampOverlay":"<div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\" data-pcc-image-stamp=\"closer\">×</button>\n\n <h1><%= imageStampOverlayHeader %></h1>\n\n <div class=\"pcc-image-stamp-list\">\n <% if (waiting) {%>\n <div class=\".pcc-load\"><%= imageStampLoading %></div> \n <% } else if (imageStampList.imageStamps.length) { %>\n\n <ul class=\"grid columns-3\">\n <% _.each(imageStampList.imageStamps, function(imageStampObj, index) { %>\n <li class=\"pcc-image-stamp-list-item <%= ((index+1) % 2 === 0) ? 'even' : 'odd' %>\" data-image-stamp-id=\"<%= imageStampObj.id%>\">\n <img src=\"<%= imageStampObj.url %>\" alt=\"<%= imageStampObj.displayName %>\" title=\"<%= imageStampObj.displayName%>\">\n </li>\n <% }); %> \n <% } %>\n </ul>\n </div>\n\n <% if (!waiting && sortBy && sortBy.length) { %>\n <div class=\"pcc-select pcc-select-image-stamp-sort\" data-pcc-image-stamp-sort data-pcc-toggle=\"dropdown-image-stamp-sort\" title=\"\">\n <span><%= imageStampSortBy %></span>\n <div class=\"pcc-label\"><%= (typeof sortName !== 'undefined') ? sortName : imageStampDropSelect%><div class=\"pcc-arrow-down\"></div></div>\n\n <div data-pcc-toggle-id=\"dropdown-image-stamp-sort\" class=\"pcc-dropdown pcc-dropup pcc-align-right\">\n <% _.forEach(sortBy, function(sortByOption) { %>\n <div data-image-stamp-sort-item='<%= sortByOption %>'><%= sortByOption %></div>\n <% }); %>\n </div>\n </div>\n <% } %> \n</div>\n","overwriteOverlay":"<div class=\"pcc-overlay pcc-annotation-overwrite-dlg\">\n <div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\">×</button>\n\n <div class=\"pcc-overlay-mask\"><%= mask %></div>\n\n <div class=\"pcc-overlay-prompt\">\n <%= prompt %>\n </div>\n <ul>\n <li data-action=\"save\"><%= save %></li>\n <li data-action=\"saveAs\"><%= saveAs %></li>\n <li data-action=\"noSave\"><%= noSave %></li>\n </ul>\n </div>\n</div>","pageRedactionOverlay":"<div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\" data-pcc-page-redaction=\"cancel\">×</button>\n\n <% if (typeof(show) !== 'undefined' && show === 'form') { %>\n\n <div class=\"pcc-row\">\n <div class=\"pcc-col-12\">\n <div class=\"pcc-row\">\n <h3><%= pageRedactionOverlay.title %></h3>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactAllPages\">\n <span></span><label><%= pageRedactionOverlay.allPages %></label>\n </div>\n </div>\n <div class=\"pcc-row\" data-pcc-page-redaction-field=\"excludeRange\">\n <div class=\"pcc-col-4 pcc-text-center\">\n <label class=\"secondary\"><%= pageRedactionOverlay.exclude %></label>\n </div>\n <div class=\"pcc-col-8\">\n <input type=\"text\" data-pcc-page-redaction-range=\"exclude\" class=\"pcc-full\" placeholder=\"<%= rangePlaceholder %>\">\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactCurrentPage\" class=\"pcc-checked\">\n <span></span><label><%= pageRedactionOverlay.currentPage %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"pageRedaction\" data-pcc-page-redaction=\"redactRange\" class=\"pcc-col-4\">\n <span></span><label><%= pageRedactionOverlay.range %></label>\n </div>\n <div class=\"pcc-col-8\">\n <input type=\"text\" data-pcc-page-redaction-range=\"include\" class=\"pcc-full\" placeholder=\"<%= rangePlaceholder %>\">\n </div>\n </div>\n <div class=\"pcc-row\">\n <% if (reasons && reasons.enableRedactionReasonSelection) { %>\n <div class=\"pcc-col-4\">\n <label class=\"primary\"><%= pageRedactionOverlay.reason %></label>\n </div>\n <div class=\"pcc-col-8\">\n <div class=\"pcc-row\">\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-toggle=\"dropdown-stamp-label\" title=\"<%= selectLabel %>\">\n <div class=\"pcc-label\"><%= pageRedactionOverlay.selectReason %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-stamp-label\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <input type=\"text\" data-pcc-redaction-reason-input>\n </div>\n </div>\n <% } %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <button data-pcc-page-redaction=\"submit\" class=\"pcc-pull-right\"><%= pageRedactionOverlay.submit %></button>\n <button data-pcc-page-redaction=\"cancel\" class=\"pcc-pull-left\"><%= pageRedactionOverlay.cancel %></button>\n </div>\n\n <% } else if (typeof(show) !== 'undefined' && show === 'status') { %>\n\n <div class=\"pcc-row\">\n <div data-pcc-page-redaction=\"resultCount\"><%= pageRedactionOverlay.requestingAttributesOf %></div>\n </div>\n <div class=\"pcc-row pcc-percent\">\n <div class=\"pcc-label\">\n <div class=\"pcc-load\"></div>\n <div data-pcc-page-redaction=\"resultPercent\"></div>\n </div>\n <div data-pcc-page-redaction=\"loader\" class=\"pcc-bar\"></div>\n </div>\n <button data-pcc-page-redaction=\"cancel\" class=\"pcc-center\"><%= pageRedactionOverlay.cancel %></button>\n\n <% } %>\n\n <div class=\"pcc-clearfix\"></div>\n\n</div>\n","printOverlay":"<div class=\"pcc-overlay-inner\">\n\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <h3 class=\"page-title\"><%= printTitle %></h3>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <button class=\"pcc-overlay-closer\" data-pcc-print=\"cancel\">×</button>\n </div>\n </div>\n </div>\n <% if (typeof(show) !== 'undefined' && show === 'form') { %>\n <div class=\"pcc-row\">\n <!-- Pages-->\n <div class=\"pcc-col-6\">\n <div class=\"pcc-print-pages\">\n <div class=\"pcc-row\">\n <h4><%= printPages %></h4>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printAllPages\" class=\"pcc-checked\">\n <span></span><label><%= printAll %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printCurrentPage\">\n <span></span><label><%= printCurrent %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-radio=\"printPage\" data-pcc-print-page=\"printRange\">\n <span></span><input type=\"text\" data-pcc-print=\"range\" placeholder=\"<%= rangePlaceholder %>\"\n title=\"<%= printRange %>\">\n </div>\n </div>\n </div>\n </div>\n <!-- Orientation-->\n <div class=\"pcc-col-6\">\n <div class=\"pcc-print-orientation pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printOrientation %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"orientation\" class=\"pcc-print-select\">\n <option value=\"portrait\"><%= printPortrait %></option>\n <option value=\"landscape\"><%= printLandscape %></option>\n </select>\n </div>\n </div>\n <!--Paper Sizes-->\n <div class=\"pcc-print-paper-sizes pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= paperSize %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"paperSize\" class=\"pcc-print-select\">\n <!-- US and International-->\n <option value=\"letter\"><%= paperSizes.letter %></option>\n <option value=\"legal\"><%= paperSizes.legal %></option>\n <option value=\"tabloid\"><%= paperSizes.tabloid %></option>\n <option value=\"foolscap\"><%= paperSizes.foolscap %></option>\n <!-- A formats-->\n <option value=\"a3\"><%= paperSizes.a3 %></option>\n <option value=\"a4\"><%= paperSizes.a4 %></option>\n <option value=\"a5\"><%= paperSizes.a5 %></option>\n <!-- Architectural-->\n <option value=\"a6\"><%= paperSizes.a6 %></option>\n <option value=\"a\"><%= paperSizes.a %></option>\n <option value=\"b\"><%= paperSizes.b %></option>\n <option value=\"c\"><%= paperSizes.c %></option>\n <option value=\"d\"><%= paperSizes.d %></option>\n <option value=\"e\"><%= paperSizes.e %></option>\n <option value=\"e1\"><%= paperSizes.e1 %></option>\n\n </select>\n </div>\n </div>\n <% if (!canPrintMarks) { %>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printMargins\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAutoFitMargins %></label>\n </div>\n </div>\n <% } %>\n\n </div>\n </div>\n\n <% if (canPrintMarks) { %>\n <div class=\"pcc-print-more-options pcc-row pcc-hide\">\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <span><%= printShow %></span>\n </div>\n <!--Annotations-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printAnnotations\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAnnotations %></label>\n </div>\n </div>\n\n <!--Redactions-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printRedactions\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printRedactions %></label>\n </div>\n </div>\n\n <!--printRedactionViewMode-->\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printRedactionViewMode\" class=\"pcc-checkbox\">\n <span></span><label><%= printRedactionViewMode %></label>\n </div>\n </div>\n\n </div>\n\n <div class=\"pcc-col-6\">\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"printMargins\" class=\"pcc-checkbox pcc-checked\">\n <span></span><label><%= printAutoFitMargins %></label>\n </div>\n </div>\n <div class=\"pcc-print-comments pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printComments %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"printComments\" class=\"pcc-print-select\">\n <option value=\"none\"><%= printCommentsNone %></option>\n <option value=\"followingPage\"><%= printCommentsAfterEachPage %></option>\n <option value=\"documentEnd\"><%= printCommentsAtEnd %></option>\n </select>\n </div>\n </div>\n <div class=\"pcc-print-marks pcc-row\">\n <div class=\"pcc-row\">\n <h4><%= printReasons %></h4>\n </div>\n <div class=\"pcc-row\">\n <select data-pcc-select=\"printReasons\" class=\"pcc-print-select\">\n\n <option value=\"none\"><%= printReasonsNone %></option>\n <option value=\"followingPage\"><%= printReasonsAfterEachPage %></option>\n <option value=\"documentEnd\"><%= printReasonsAtEnd %></option>\n </select>\n </div>\n </div>\n </div>\n </div>\n <% } %> <!--if (canPrintMarks)-->\n\n\n <div class=\"pcc-row\">\n <% if (canPrintMarks) { %>\n <div class=\"pcc-col-6\">\n <div class=\"pcc-toggle-options\" data-pcc-print=\"optionsToggle\">\n <label><%= printMoreOptions %></label>\n <span class=\"pcc-arrow-down\"></span>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <% } else { %>\n <div class=\"pcc-col-12\">\n <% } %> <!--if (canPrintMarks)-->\n <div class=\"pcc-row\">\n <button data-pcc-print=\"submit\" class=\"pcc-pull-right\"><%= printButton %></button>\n </div>\n </div>\n </div>\n\n <% } else { %>\n\n <div class=\"pcc-row\">\n <div data-pcc-print=\"resultCount\"><%= printPreparingPage %></div>\n </div>\n <div class=\"pcc-row pcc-percent\">\n <div class=\"pcc-label\">\n <div class=\"pcc-load\"></div>\n <div data-pcc-print=\"resultPercent\"></div>\n </div>\n <div data-pcc-print=\"loader\" class=\"pcc-bar\"></div>\n </div>\n <button data-pcc-print=\"cancel\" class=\"pcc-center\"><%= cancelButton %></button>\n\n <% } %>\n</div>","print":"<!DOCTYPE html>\n<html moznomarginboxes mozdisallowselectionprint>\n<head>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n <!-- <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> -->\n\n <link rel=\"stylesheet\" href=\"//assets.edocr.com/1389/viewer-assets/fonts.css\">\n <link rel=\"stylesheet\" href=\"//assets.edocr.com/1389/viewer-assets/viewercontrol.css\">\n <script src=\"//assets.edocr.com/1389/viewer-assets/viewercontrol.js\"></script>\n\n <style type=\"text/css\">\n html, body { margin: 0px; padding: 0px; }\n\n /*Printing Paper Sizes*/\n /*default */\n .portrait .page { width: 8.5in; height: 11in; margin: 0 auto !important; }\n .portrait .pageIE { width: 7.3in; height: 9.5in; margin: 0 auto !important; }\n .portrait .pageSafari { width: 6.9in; height: 8.9in; margin: 0 auto !important; }\n .portrait .nomargins { width: 8.5in !important; height: 11in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .nomargins.pageSafari { width: 7.2in !important; height: 9.32in !important; }\n\n .landscape .page { height: 8.5in; width: 11in; margin: 0 auto !important; }\n .landscape .pageIE { height: 7in; width: 9.05in; margin: 0 auto !important; }\n .landscape .pageSafari { height: 6.5in; width: 8.4in; margin: 0 auto !important; }\n .landscape .nomargins { height: 8.5in !important; width: 11in !important; }\n .landscape .nomargins.pageSafari { height: 7.2in !important; width: 9.32in !important; }\n /*default end*/\n\n /*letter */\n .portrait .letter.page { width: 8.5in; height: 11in; margin: 0 auto !important; }\n .portrait .letter.pageIE { width: 7.3in; height: 9.5in; margin: 0 auto !important; }\n .portrait .letter.pageSafari { width: 6.9in; height: 8.9in; margin: 0 auto !important; }\n .portrait .letter.nomargins { width: 8.5in !important; height: 11in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .letter.nomargins.pageSafari { width: 7.2in !important; height: 9.32in !important; }\n\n .landscape .letter.page { height: 8.5in; width: 11in; margin: 0 auto !important; }\n .landscape .letter.pageIE { height: 7in; width: 9.05in; margin: 0 auto !important; }\n .landscape .letter.pageSafari { height: 6.5in; width: 8.4in; margin: 0 auto !important; }\n .landscape .letter.nomargins { height: 8.5in !important; width: 11in !important; }\n .landscape .letter.nomargins.pageSafari { height: 7.2in !important; width: 9.32in !important; }\n /*letter end*/\n\n /*legal*/\n .portrait .legal.page { width: 8.5in; height: 14in; margin: 0 auto !important; }\n .portrait .legal.pageIE { width: 7.3in; height: 12.5in; margin: 0 auto !important; }\n .portrait .legal.pageSafari { width: 6.9in; height: 11.9in; margin: 0 auto !important; }\n .portrait .legal.nomargins { width: 8.5in !important; height: 14in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .legal.nomargins.pageSafari { width: 7.2in !important; height: 12.32in !important; }\n\n .landscape .legal.page { height: 8.5in; width: 14in; margin: 0 auto !important; }\n .landscape .legal.pageIE { height: 7in; width: 12.05in; margin: 0 auto !important; }\n .landscape .legal.pageSafari { height: 6.5in; width: 11.4in; margin: 0 auto !important; }\n .landscape .legal.nomargins { height: 8.5in !important; width: 14in !important; }\n .landscape .legal.nomargins.pageSafari { height: 7.2in !important; width: 12.32in !important; }\n /*legal end*/\n\n /*Foolscap*/\n .portrait .foolscap.page { width: 8in; height: 13in; margin: 0 auto !important; }\n .portrait .foolscap.pageIE { width: 6.8in; height: 11.5in; margin: 0 auto !important; }\n .portrait .foolscap.pageSafari { width: 6.4in; height: 10.9in; margin: 0 auto !important; }\n .portrait .foolscap.nomargins { width: 8in !important; height: 13in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .foolscap.nomargins.pageSafari { width: 6.7in !important; height: 11.32in !important; }\n\n .landscape .foolscap.page { height: 8in; width: 13in; margin: 0 auto !important; }\n .landscape .foolscap.pageIE { height: 6.5in; width: 11.05in; margin: 0 auto !important; }\n .landscape .foolscap.pageSafari { height: 6in; width: 10.4in; margin: 0 auto !important; }\n .landscape .foolscap.nomargins { height: 8in !important; width: 13in !important; }\n .landscape .foolscap.nomargins.pageSafari { height: 6.7in !important; width: 11.32in !important; }\n /*Foolscap end*/\n\n /*Tabloid*/\n .portrait .tabloid.page { width: 11in; height: 17in; margin: 0 auto !important; }\n .portrait .tabloid.pageIE { width: 9.8in; height: 15.5in; margin: 0 auto !important; }\n .portrait .tabloid.pageSafari { width: 9.4in; height: 14.9in; margin: 0 auto !important; }\n .portrait .tabloid.nomargins { width: 11in !important; height: 17in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .tabloid.nomargins.pageSafari { width: 9.7in !important; height: 15.32in !important; }\n\n .landscape .tabloid.page { height: 11in; width: 17in; margin: 0 auto !important; }\n .landscape .tabloid.pageIE { height: 9.5in; width: 15.05in; margin: 0 auto !important; }\n .landscape .tabloid.pageSafari { height: 8in; width: 13.4in; margin: 0 auto !important; }\n .landscape .tabloid.nomargins { height: 11in !important; width: 17in !important; }\n .landscape .tabloid.nomargins.pageSafari { height: 9.7in !important; width: 15.32in !important; }\n /*Tabloid end*/\n\n /*A3 */\n .portrait .a3.page { width: 11.7in; height: 16.5in; margin: 0 auto !important; }\n .portrait .a3.pageIE { width: 10.5in; height: 15in; margin: 0 auto !important; }\n .portrait .a3.pageSafari { width: 10.1in; height: 14.4in; margin: 0 auto !important; }\n .portrait .a3.nomargins { width: 11.7in !important; height: 16.5in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a3.nomargins.pageSafari { width: 10.4in !important; height: 14.82in !important; }\n\n .landscape .a3.page { height: 11.7in; width: 16.6in; margin: 0 auto !important; }\n .landscape .a3.pageIE { height: 10.2in; width: 14.55in; margin: 0 auto !important; }\n .landscape .a3.pageSafari { height: 9.7in; width: 13.9in; margin: 0 auto !important; }\n .landscape .a3.nomargins { height: 11.7in !important; width: 16.5in !important; }\n .landscape .a3.nomargins.pageSafari { height: 10.4in !important; width: 14.82in !important; }\n /*A3 end*/\n\n /*A4*/\n .portrait .a4.page { width: 8.27in; height: 11.7in; margin: 0 auto !important;}\n .portrait .a4.pageIE { width: 7.1in; height: 10in; margin: 0 auto !important; }\n .portrait .a4.pageSafari { width: 6.7in; height: 9.4in; margin: 0 auto !important; }\n .portrait .a4.nomargins { width: 8.27in !important; height: 11.7in !important;}\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a4.nomargins.pageSafari { width: 7.2in !important; height: 10in !important; }\n\n .landscape .a4.page { height: 8.27in; width: 11.7in; margin: 0 auto !important; }\n .landscape .a4.pageIE { height: 6.8in; width: 9.75in; margin: 0 auto !important; }\n .landscape .a4.pageSafari { height: 6.3in; width: 9.1in; margin: 0 auto !important; }\n .landscape .a4.nomargins { height: 8.27in !important; width: 11.7in !important; }\n .landscape .a4.nomargins.pageSafari { height: 6.85in !important; width: 10.02in !important; }\n /*A4 end*/\n\n /*A5 */\n .portrait .a5.page { width: 5.8in; height: 8.3in; margin: 0 auto !important; }\n .portrait .a5.pageIE { width: 4.6in; height: 6.8in; margin: 0 auto !important; }\n .portrait .a5.pageSafari { width: 4.2in; height: 6.2in; margin: 0 auto !important; }\n .portrait .a5.nomargins { width: 5.8in !important; height: 8.3in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a5.nomargins.pageSafari { width: 4.5in !important; height: 6.62in !important; }\n\n .landscape .a5.page { height: 5.8in; width: 8.3in; margin: 0 auto !important; }\n .landscape .a5.pageIE { height: 4.3in; width: 6.35in; margin: 0 auto !important; }\n .landscape .a5.pageSafari { height: 3.8in; width: 6.7in; margin: 0 auto !important; }\n .landscape .a5.nomargins { height: 5.8in !important; width: 8.3in !important; }\n .landscape .a5.nomargins.pageSafari { height: 4.5in !important; width: 6.62in !important; }\n /*A5 end*/\n\n /*A6 */\n .portrait .a6.page { width: 4.1in; height: 5.8in; margin: 0 auto !important; }\n .portrait .a6.pageIE { width: 2.9in; height: 4.3in; margin: 0 auto !important; }\n .portrait .a6.pageSafari { width: 2.5in; height: 3.7in; margin: 0 auto !important; }\n .portrait .a6.nomargins { width: 4.1in !important; height: 5.8in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a6.nomargins.pageSafari { width: 2.8in !important; height: 3.82in !important; }\n\n .landscape .a6.page { height: 4.1in; width: 5.8in; margin: 0 auto !important; }\n .landscape .a6.pageIE { height: 2.6in; width: 3.85in; margin: 0 auto !important; }\n .landscape .a6.pageSafari { height: 2.1in; width: 3.2in; margin: 0 auto !important; }\n .landscape .a6.nomargins { height: 4.1in !important; width: 5.8in !important; }\n .landscape .a6.nomargins.pageSafari { height: 2.8in !important; width: 4.12in !important; }\n /*A6 end*/\n\n /*Arch A */\n .portrait .a.page { width: 9in; height: 12in; margin: 0 auto !important; }\n .portrait .a.pageIE { width: 7.8in; height: 10.5in; margin: 0 auto !important; }\n .portrait .a.pageSafari { width: 7.4in; height: 9.9in; margin: 0 auto !important; }\n .portrait .a.nomargins { width: 9in !important; height: 12in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .a.nomargins.pageSafari { width: 7.7in !important; height: 10.32in !important; }\n\n .landscape .a.page { height: 9in; width: 12in; margin: 0 auto !important; }\n .landscape .a.pageIE { height: 7.5in; width: 10.05in; margin: 0 auto !important; }\n .landscape .a.pageSafari { height: 7in; width: 9.4in; margin: 0 auto !important; }\n .landscape .a.nomargins { height: 9in !important; width: 12in !important; }\n .landscape .a.nomargins.pageSafari { height: 7.7in !important; width: 10.32in !important; }\n /*Arch A end*/\n\n /*Arch B */\n .portrait .b.page { width: 12in; height: 18in; margin: 0 auto !important; }\n .portrait .b.pageIE { width: 10.8in; height: 16.5in; margin: 0 auto !important; }\n .portrait .b.pageSafari { width: 10.4in; height: 15.9in; margin: 0 auto !important; }\n .portrait .b.nomargins { width: 12in !important; height: 18in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .b.nomargins.pageSafari { width: 10.7in !important; height: 16.32in !important; }\n\n .landscape .b.page { height: 12in; width: 18in; margin: 0 auto !important; }\n .landscape .b.pageIE { height: 10.5in; width: 16.05in; margin: 0 auto !important; }\n .landscape .b.pageSafari { height: 10in; width: 15.4in; margin: 0 auto !important; }\n .landscape .b.nomargins { height: 12in !important; width: 18in !important; }\n .landscape .b.nomargins.pageSafari { height: 10.7in !important; width: 16.32in !important; }\n /*Arch B end*/\n\n /*Arch C */\n .portrait .c.page { width: 18in; height: 24in; margin: 0 auto !important; }\n .portrait .c.pageIE { width: 16.8in; height: 22.5in; margin: 0 auto !important; }\n .portrait .c.pageSafari { width: 16.4in; height: 21.9in; margin: 0 auto !important; }\n .portrait .c.nomargins { width: 18in !important; height: 24in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .c.nomargins.pageSafari { width: 16.7in !important; height: 22.32in !important; }\n\n .landscape .c.page { height: 18in; width: 24in; margin: 0 auto !important; }\n .landscape .c.pageIE { height: 16.5in; width: 22.05in; margin: 0 auto !important; }\n .landscape .c.pageSafari { height: 16in; width: 21.4in; margin: 0 auto !important; }\n .landscape .c.nomargins { height: 18in !important; width: 24in !important; }\n .landscape .c.nomargins.pageSafari { height: 16.7in !important; width: 22.32in !important; }\n /*Arch C end*/\n\n /*Arch D */\n .portrait .d.page { width: 24in; height: 36in; margin: 0 auto !important; }\n .portrait .d.pageIE { width: 22.8in; height: 34.5in; margin: 0 auto !important; }\n .portrait .d.pageSafari { width: 22.4in; height: 33.9in; margin: 0 auto !important; }\n .portrait .d.nomargins { width: 24in !important; height: 36in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .d.nomargins.pageSafari { width: 22.7in !important; height: 34.32in !important; }\n\n .landscape .d.page { height: 24in; width: 36in; margin: 0 auto !important; }\n .landscape .d.pageIE { height: 22.5in; width: 34.05in; margin: 0 auto !important; }\n .landscape .d.pageSafari { height: 22in; width: 35.4in; margin: 0 auto !important; }\n .landscape .d.nomargins { height: 24in !important; width: 36in !important; }\n .landscape .d.nomargins.pageSafari { height: 22.7in !important; width: 34.32in !important; }\n /*Arch D end*/\n\n /*Arch E */\n .portrait .e.page { width: 36in; height: 48in; margin: 0 auto !important; }\n .portrait .e.pageIE { width: 34.8in; height: 46.6in; margin: 0 auto !important; }\n .portrait .e.pageSafari { width: 34.4in; height: 45.9in; margin: 0 auto !important; }\n .portrait .e.nomargins { width: 36in !important; height: 48in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .e.nomargins.pageSafari { width: 34.7in !important; height: 46.32in !important; }\n\n .landscape .e.page { height: 36in; width: 48in; margin: 0 auto !important; }\n .landscape .e.pageIE { height: 34.5in; width: 46.05in; margin: 0 auto !important; }\n .landscape .e.pageSafari { height: 34in; width: 45.4in; margin: 0 auto !important; }\n .landscape .e.nomargins { height: 35in !important; width: 48in !important; }\n .landscape .e.nomargins.pageSafari { height: 34.7in !important; width: 46.32in !important; }\n /*Arch E end*/\n\n /*Arch E1 */\n .portrait .e1.page { width: 30in; height: 42in; margin: 0 auto !important; }\n .portrait .e1.pageIE { width: 28.8in; height: 40.5in; margin: 0 auto !important; }\n .portrait .e1.pageSafari { width: 28.4in; height: 39.9in; margin: 0 auto !important; }\n .portrait .e1.nomargins { width: 30in !important; height: 42in !important; }\n /* even without margins, Safari enforces the printer's non-printable area */\n .portrait .e1.nomargins.pageSafari { width: 28.7in !important; height: 40.32in !important; }\n\n .landscape .e1.page { height: 30in; width: 42in; margin: 0 auto !important; }\n .landscape .e1.pageIE { height: 28.5in; width: 40.05in; margin: 0 auto !important; }\n .landscape .e1.pageSafari { height: 28in; width: 39.4in; margin: 0 auto !important; }\n .landscape .e1.nomargins { height: 30in !important; width: 42in !important; }\n .landscape .e1.nomargins.pageSafari { height: 28.7in !important; width: 40.32in !important; }\n /*Arch E1 end*/\n\n .igAnchor, .igViewerGraphics, .igViewerScroller{\n width: 100% !important; height: 100% !important;\n }\n\n @page {\n size: {{orientation}};\n margin: 0cm;\n white-space: pre;\n }\n\n .commentPage, .reasonPage {\n font-family: Arial, Helvetica, sans-serif;\n margin: 0 .25in 0 .25in !important;\n page-break-after: always;\n }\n\n .commentPage h1, .reasonPage h1 {\n font-size: 28px;\n margin: .25in 0 0 0 !important;\n padding: 0;\n }\n\n .commentPage ul, .reasonPage ul {\n font-size: 14px;\n font-weight: normal;\n margin: 0 0 0 .3in;\n padding: 0;\n }\n\n .redactionReasonPageHeader ul {\n padding: 5px;\n }\n\n .redactionReasonPageHeader li {\n list-style-type: none;\n }\n\n .pageConversations, .pageReasons {\n page-break-inside: avoid;\n margin: 0 !important;\n padding: .25in 0 0 .1in !important;\n }\n\n .pageConversations h2, .pageConversations h3, .pageReasons h2 {\n margin: 0 0 5px 0;\n padding: 0;\n }\n\n .commentPage hr, .reasonPage hr {\n margin: .0 0 .05in 0;\n }\n\n @media print {\n .page, .pageIE, .pageSafari { page-break-after: always; }\n /* required for Firefox to print all pages */\n * { position: static !important; float: none !important; }\n }\n </style>\n\n</head>\n<body class='' id='print'>\n <script type=\"text/javascript\">\n var options = {\n vsID: '{{viewingSessionId}}',\n pages: '{{pages}}',\n handler: '{{handler}}',\n orientation: '{{orientation}}',\n paperSize:'{{paperSize}}',\n isIE: {{isIE}},\n isSafari: {{isSafari}},\n includeAnnotations: '{{includeAnnotations}}',\n includeRedactions: '{{includeRedactions}}',\n includeComments: '{{includeComments}}',\n includeReasons: '{{includeReasons}}',\n margins: '{{margins}}',\n redactionViewMode: '{{redactionViewMode}}'\n };\n\n options.pages = options.pages.split(',');\n\n PCCViewer.PrintControl(document.body, options);\n </script>\n</body>\n</html>\n","redactionReason":"<div class='pcc-redaction-reason pcc-clearfix pcc-redaction-reason-edit'>\n <span class=\"pcc-redaction-reason-label\"><%= language.redactionReasonApply %></span>\n <div class=\"pcc-redaction-reason-right\">\n <button data-pcc-redaction-reason=\"done\" class=\"pcc-redaction-reason-icon pcc-redaction-reason-icon-done\" title=\"<%= language.doneButton %>\"></button>\n </div>\n <div class=\"pcc-redaction-reason-input\">\n <button data-pcc-redaction-reason=\"clear\">×</button>\n <input type=\"text\" value=\"<%= mark.getReason()%>\">\n </div>\n\n</div>","unsavedChangesOverlay":"<div class=\"pcc-overlay pcc-annotation-unsaved-dlg\">\n <div class=\"pcc-overlay-inner\">\n <button class=\"pcc-overlay-closer\">×</button>\n\n <div class=\"pcc-overlay-mask\"><%= mask %></div>\n \n <div class=\"pcc-overlay-prompt\">\n <%= prompt %>\n </div>\n \n <ul>\n <li data-action=\"save\" ><%= save %></li>\n <li data-action=\"saveAs\" ><%= saveAs %></li>\n <li data-action=\"noSave\"><%= noSave %></li>\n </ul>\n </div>\n</div>","viewer":"<div data-pcc-nav-trigger class=\"pcc-tab-item pcc-trigger pcc-hide\"><span class=\"pcc-icon pcc-icon-view\"></span> <%= viewLabel %></div>\n\n<div class=\"pcc-tabset pcc-nav-tabset\" data-pcc-nav>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"view\" data-pcc-removable-id=\"viewTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-view\"></span> <%= viewLabel %></div>\n <div class=\"pcc-tab-pane pcc-tab-vertical pcc-left\">\n <div class=\"pcc-left\">\n <button data-pcc-mouse-tool=\"AccusoftSelectText\" class=\"pcc-icon pcc-icon-texttool pcc-disabled\" title=\"<%= selectText %>\" data-pcc-removable-id=\"copyPaste\"></button>\n <button data-pcc-mouse-tool=\"AccusoftPanAndEdit\" class=\"pcc-icon pcc-icon-pantool pcc-active\" title=\"<%= panTool %>\"></button>\n <button data-pcc-toggle=\"dialog-thumbnails\" class=\"pcc-icon pcc-icon-thumbnails\" title=\"<%= thumbnails %>\"></button>\n <button data-pcc-mouse-tool=\"AccusoftMagnifier\" class=\"pcc-icon pcc-icon-magnifiertool\" title=\"<%= magnifierTool %>\"></button>\n <button data-pcc-mouse-tool=\"AccusoftSelectToZoom\" class=\"pcc-icon pcc-icon-rectanglezoomtool\" title=\"<%= rectangleZoom %>\"></button>\n <button data-pcc-rotate-document class=\"pcc-icon pcc-icon-rotate-doc-cw\" title=\"<%= rotateDocument %>\"></button>\n <button data-pcc-rotate-page class=\"pcc-icon pcc-icon-rotate-page-cw\" title=\"<%= rotatePage %>\"></button>\n </div>\n </div>\n <div class=\"pcc-tab-preview\">\n <div class=\"pcc-center\">\n <button data-pcc-end-preview><%= previewEnd %></button>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"search\" data-pcc-removable-id=\"searchTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-search\"></span> <%= search %></div>\n <div class=\"pcc-tab-pane pcc-tab-advanced\">\n <div class=\"pcc-left\">\n <button class=\"pcc-icon pcc-icon-list pcc-search-menu-button\" title=\"<%= searchOptions %>\" data-pcc-toggle=\"dialog-search\"></button>\n <div class=\"pcc-search-group pcc-search-group-input\">\n <button title=\"<%= previousSearches %>\" data-pcc-toggle=\"dropdown-search-box\">\n <span class=\"pcc-arrow-down\"></span>\n </button>\n <input type=\"text\" data-pcc-search=\"input\" placeholder=\"<%= searchDocument %>\"\n autocorrect=\"off\" autocapitalize=\"off\">\n <button title=\"<%= clearSearch %>\" data-pcc-search=\"clear\" class=\"pcc-close\">×</button>\n <button title=\"<%= fixedSearchTerms %>\" data-pcc-toggle=\"dropdown-search-fixed-box\" class=\"pcc-search-fixed pcc-hide\">\n <span class=\"pcc-icon pcc-icon-pushpin pcc-search-fixed-icon\"></span>\n </button>\n </div>\n <div class=\"pcc-search-group pcc-search-group-buttons\">\n <button data-pcc-search=\"submit\" title=\"<%= search %>\">\n <span class=\"pcc-icon pcc-icon-search\"></span>\n </button>\n <button data-pcc-search=\"cancel\" class=\"pcc-hide\" title=\"<%= cancelButton %>\">\n <span class=\"pcc-icon pcc-icon-x\"></span>\n </button>\n <button data-pcc-toggle=\"advanced-options\" class=\"pcc-hide pcc-show-sm\" title=\"<%= advancedSearch %>\">\n <span class=\"pcc-icon pcc-icon-wrench\"></span>\n </button>\n </div>\n\n <div class=\"pcc-advanced-search-group\" data-pcc-toggle-id=\"advanced-options\">\n <button data-pcc-search=\"exactWord\" class=\"pcc-icon pcc-icon-exactword\" title=\"<%= matchExact %>\"></button>\n <button data-pcc-search=\"matchCase\" class=\"pcc-icon pcc-icon-matchcase\" title=\"<%= matchCase %>\"></button>\n <button data-pcc-search=\"matchWholeWord\" class=\"pcc-icon pcc-icon-wholeword\" title=\"<%= wholeWord %>\"></button>\n <button data-pcc-search=\"beginsWith\" class=\"pcc-icon pcc-icon-beginswith\" title=\"<%= beginsWith %>\"></button>\n <button data-pcc-search=\"endsWith\" class=\"pcc-icon pcc-icon-endswith\" title=\"<%= endsWith %>\"></button>\n <button data-pcc-search=\"wildcard\" class=\"pcc-icon pcc-icon-wildcard\" title=\"<%= useWildcards %>\"></button>\n </div>\n </div>\n\n <div class=\"pcc-dropdown pcc-dropdown-search-box\" data-pcc-toggle-id=\"dropdown-search-box\">\n <div class=\"pcc-toolbar\"><%= previousSearches %></div>\n <div data-pcc-previous-search><span class=\"pcc-placeholder\"><%= noPreviousSearches %></span></div>\n <hr>\n <div class=\"pcc-toolbar\" data-pcc-search=\"toggleAllPresets\"><span>✔</span> <%= toggleAll %></div>\n <div class=\"pcc-predefined-search\" data-pcc-predefined-search></div>\n </div>\n\n <div class=\"pcc-dropdown pcc-dropdown-search-box\" data-pcc-toggle-id=\"dropdown-search-fixed-box\">\n <div class=\"pcc-toolbar\"><%= fixedSearchTerms %></div>\n <div class=\"pcc-predefined-search\" data-pcc-predefined-fixed-search></div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"annotate\" data-pcc-removable-id=\"annotateTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-annotate\"></span> <%= annotateLabel %></div>\n <div class=\"pcc-tab-pane pcc-tab-advanced\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-toggle=\"dialog-save-annotations\" class=\"pcc-icon pcc-icon-save\" title=\"<%= saveAnnotations %>\"></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\" class=\"pcc-icon pcc-icon-load\" title=\"<%= loadAnnotations %>\"></button>\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n\n <% if (annotationsMode === \"LayeredAnnotations\") { %>\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationLayerReview.annotationLayers %>\"></button>\n <span class=\"pcc-separator\"></span>\n <% } %>\n\n <button data-pcc-mouse-tool=\"AccusoftArrowAnnotation\" data-pcc-default-fill-color=\"#0000ff\"\n class=\"pcc-icon pcc-icon-annotate-arrow\" title=\"<%= arrowAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftLineAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-line\" title=\"<%= lineAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftRectangleAnnotation\" data-pcc-default-fill-color=\"#ff0000\"\n class=\"pcc-icon pcc-icon-annotate-rectangle\" title=\"<%= rectangleAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftEllipseAnnotation\" data-pcc-default-fill-color=\"#ff0000\"\n class=\"pcc-icon pcc-icon-annotate-ellipse\" title=\"<%= ellipseAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftFreehandAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-freehand\" title=\"<%= freehandAnnotation %>\"></button>\n\n <button data-pcc-toggle=\"more-annotation-tools\" class=\"pcc-icon pcc-icon-triangle-down pcc-mobile-overflow-trigger\" title=\"<%= moreTools %>\"></button>\n\n <div class=\"pcc-more-annotation-tools pcc-mobile-overflow\" data-pcc-toggle-id=\"more-annotation-tools\">\n <button data-pcc-mouse-tool=\"AccusoftPolylineAnnotation\" data-pcc-default-fill-color=\"#000000\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-annotate-polyline\" title=\"<%= polylineAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextAnnotation\" data-pcc-default-fill-color=\"#ffffff\"\n class=\"pcc-icon pcc-icon-annotate-text\" title=\"<%= textAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftHighlightAnnotation\" data-pcc-default-fill-color=\"#ffff00\"\n class=\"pcc-icon pcc-icon-highlight\" title=\"<%= highlightAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftStrikethroughAnnotation\" class=\"pcc-icon pcc-icon-text-strikeout\" title=\"<%= strikethroughAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextHyperlinkAnnotation\"\n class=\"pcc-icon pcc-icon-link\" title=\"<%= textHyperlinkAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftStampAnnotation\" data-pcc-default-fill-color=\"#ff0000\" data-pcc-default-label=\"<%= stampLabelApproved %>\"\n class=\"pcc-icon pcc-icon-annotate-stamp\" title=\"<%= stampAnnotation %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftImageStampAnnotation\" data-pcc-context-menu=\"true\"\n class=\"pcc-icon pcc-icon-image-stamp\" title=\"<%= imageStampAnnotion %>\" disabled></button>\n\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"redact\" data-pcc-removable-id=\"redactTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-redact\"></span> <%= redactLabel %></div>\n <div class=\"pcc-tab-pane\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-toggle=\"dialog-save-annotations\" class=\"pcc-icon pcc-icon-save\" title=\"<%= saveAnnotations %>\"></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\" class=\"pcc-icon pcc-icon-load\" title=\"<%= loadAnnotations %>\"></button>\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n <% if (annotationsMode === \"LayeredAnnotations\") { %>\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-list\" title=\"<%= annotationLayerReview.annotationLayers %>\"></button>\n <span class=\"pcc-separator\"></span>\n <% } %>\n\n <button data-pcc-mouse-tool=\"AccusoftRectangleRedaction\" data-pcc-default-fill-color=\"#000000\"\n class=\"pcc-icon pcc-icon-redact-rectangle\" title=\"<%= rectangleRedaction %>\"></button>\n\n <button data-pcc-mouse-tool=\"AccusoftTextSelectionRedaction\" data-pcc-default-fill-color=\"#000000\"\n class=\"pcc-icon pcc-icon-redact-textselection\" title=\"<%= textSelectionRedaction %>\"></button>\n\n <button class=\"pcc-icon pcc-icon-redact\" title=\"<%= pageRedactionButton %>\" data-pcc-page-redaction=\"launch\"></button>\n\n <span class=\"pcc-separator\"></span>\n\n <button data-pcc-redactionViewMode class=\"pcc-icon pcc-icon-redactionViewMode\" title=\"<%= redactionViewMode %>\"> </button>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-tab\" data-pcc-nav-tab=\"esign\" data-pcc-removable-id=\"esignTab\">\n <div class=\"pcc-tab-item\"><span class=\"pcc-icon pcc-icon-esign\"></span> <%= esignLabel %></div>\n <div class=\"pcc-tab-pane\">\n <div class=\"pcc-pull-right\">\n <button data-pcc-comments-panel class=\"pcc-icon pcc-icon-comment\" title=\"<%= commentsPanel %>\"></button>\n <button data-pcc-toggle=\"dialog-download\" data-pcc-removable-id=\"download\" class=\"pcc-icon pcc-icon-download\" title=\"<%= download %>\"></button>\n </div>\n <div class=\"pcc-left\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= esignManage %>\" data-pcc-esign=\"manage\"></button>\n <button class=\"pcc-icon pcc-icon-freehandSign\" title=\"<%= esignFreehand %>\" data-pcc-esign=\"freehandLaunch\"></button>\n <button class=\"pcc-icon pcc-icon-textSign\" title=\"<%= esignText %>\" data-pcc-esign=\"textLaunch\"></button>\n <button class=\"pcc-icon pcc-icon-place pcc-disabled\" title=\"<%= esignPlaceSignature %>\" data-pcc-mouse-tool=\"AccusoftPlaceSignature\" data-pcc-esign=\"place\" disabled></button>\n <button class=\"pcc-icon pcc-icon-datestamp\" title=\"<%= esignPlaceDateSignature %>\" data-pcc-mouse-tool=\"AccusoftPlaceDateSignature\" data-pcc-esign=\"placeDate\"></button>\n </div>\n </div>\n </div>\n <div class=\"pcc-slideshow-controls\"></div>\n <div class=\"pcc-status-bar\">\n <button data-pcc-first-page class=\"pcc-icon pcc-icon-firstpage\" title=\"<%= firstPage %>\"></button>\n <button data-pcc-prev-page class=\"pcc-icon pcc-icon-prevpage\" title=\"<%= previousPage %>\"></button>\n <input type=\"number\" value=\"1\" data-pcc-pageSelect autocorrect=\"off\" autocapitalize=\"off\"> <%= of %> <span data-pcc-pagecount>1</span>\n <button data-pcc-next-page class=\"pcc-icon pcc-icon-nextpage\" title=\"<%= nextPage %>\"></button>\n <button data-pcc-last-page class=\"pcc-icon pcc-icon-lastpage\" title=\"<%= lastPage %>\"></button>\n </div>\n\n</div>\n\n<div class=\"pcc-tabset pcc-tools-tabset show-for-large\">\n <button data-pcc-zoom-out class=\"pcc-icon pcc-icon-zoomout\" title=\"<%= zoomOut %>\"></button>\n\n <ul class='pcc-scale-dropdown'>\n <li data-pcc-scale='800'><%= scaleOptions.scale800 %></li>\n <li data-pcc-scale='400'><%= scaleOptions.scale400 %></li>\n <li data-pcc-scale='200'><%= scaleOptions.scale200 %></li>\n <li data-pcc-scale='150'><%= scaleOptions.scale150 %></li>\n <li data-pcc-scale='125'><%= scaleOptions.scale125 %></li>\n <li data-pcc-scale='100'><%= scaleOptions.scale100 %></li>\n <li data-pcc-scale='75'><%= scaleOptions.scale75 %></li>\n <li data-pcc-scale='50'><%= scaleOptions.scale50 %></li>\n <div class='pcc-separator' />\n <li data-pcc-fit='FullWidth'><%= fullWidth %></li>\n <li data-pcc-fit='FullHeight'><%= fullHeight %></li>\n <li data-pcc-fit='FullPage'><%= fullPage %></li>\n </ul>\n <button data-pcc-zoom-level class='pcc-icon pcc-active'></button>\n\n <button data-pcc-zoom-in class=\"pcc-icon pcc-icon-zoomin\" title=\"<%= zoomIn %>\"></button>\n <button data-pcc-fit-content class=\"pcc-icon pcc-icon-fitcontent\" title=\"<%= fitContent %>\"></button>\n <button data-pcc-fullscreen class=\"pcc-icon pcc-icon-fullscreen pcc-hide pcc-show-lg\" title=\"<%= fullScreen %>\"></button>\n <div data-pcc-show-text data-open=\"view-doc-text\" class=\"pcc-view-text-only\">Show Text</div>\n\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-thumbnails\" data-pcc-toggle-id=\"dialog-thumbnails\">\n <div class=\"pcc-thumbnail-controls\">\n <div class=\"pcc-slider\" data-pcc-slider=\"thumb-size\">\n <div class=\"pcc-slider-track\">\n <div class=\"pcc-slider-thumb pcc-icon pcc-icon-circle\"></div>\n </div>\n </div>\n </div>\n <div class=\"pcc-thumbnail-container\" data-pcc-thumbs ></div>\n <div class=\"pcc-drag-handle\" data-pcc-drag-handle></div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-download\" data-pcc-toggle-id=\"dialog-download\">\n <div class=\"pcc-row\">\n <h4><%= fileDownloadAs %></h4>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-select pcc-select-download\" data-pcc-toggle=\"dropdown-download\">\n <div class=\"pcc-label\"><%= fileDownloadOriginalDocument %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-download\" class=\"pcc-dropdown\">\n <% _.forEach(downloadFormats, function(downloadFormat, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= downloadFormat %></div>\n <% }); %>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <h4><%= fileDownloadInclude %></h4>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-annotations data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadAnnotations %></label>\n </div>\n </div>\n <div class=\"pcc-col-6\">\n <div data-pcc-toggle=\"dropdown-download-annotations-format\" class=\"pcc-select pcc-disabled\">\n <div class=\"pcc-label\"><%= fileDownloadAllAnnotations %></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-download-annotations-format\" class=\"pcc-dropdown\">\n <% _.forEach(annotationFormats, function(annotationFormat, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %>\"><%= annotationFormat %></div>\n <% }); %>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-redactions data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadRedactions %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div data-pcc-checkbox=\"burnMarks\" data-pcc-download-esignatures data-pcc-esign-save=\"true\" class=\"pcc-checkbox pcc-disabled\">\n <span></span><label><%= fileDownloadESignature %></label>\n </div>\n </div>\n <div class=\"pcc-row\">\n <div class=\"pcc-col-6\">\n <button data-pcc-download=\"preview\"><%= preview %></button>\n </div>\n <div class=\"pcc-col-6\">\n <button data-pcc-download=\"download\"><%= download %></button>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-search\" data-pcc-toggle-id=\"dialog-search\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-search-header pcc-clear\">\n <div class=\"pcc-pull-right\">\n <button class=\"pcc-icon pcc-icon-list\" title=\"<%= searchResults %>\" data-pcc-search-container-toggle=\"results\"></button>\n <button class=\"pcc-icon pcc-icon-search-quick-actions pcc-hide\" title=\"<%= searchQuickActions.title %>\" data-pcc-search-container-toggle=\"quick-actions\"></button>\n <button class=\"pcc-icon pcc-icon-filter pcc-hide\" title=\"<%= filter %>\" data-pcc-search-container-toggle=\"filter\"></button>\n </div>\n <div class=\"pcc-left\">\n <span data-pcc-search=\"resultCount\"><%= searchResultsNone %></span>\n </div>\n </div>\n\n <div class=\"pcc-search-quick-actions-container pcc-hide pcc-clear\" data-pcc-search-container=\"quick-actions\">\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"quickActionSearchTerms\">\n <div class=\"pcc-section-title\"><%= searchQuickActions.searchResults %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div data-pcc-section=\"searchQuickActions\">\n <div class=\"pcc-row\">\n <button data-pcc-search-quick-action=\"redact\" class=\"\" title=\"Redact\"><%= searchQuickActions.redactAll %></button>\n </div>\n\n </div>\n\n <div data-pcc-section=\"searchQuickActionRedactOptions\" class=\"pcc-hide\">\n <div class=\"pcc-select pcc-select-redaction-reason\" data-pcc-redaction-reason data-pcc-qa-toggle=\"dropdown-quick-action-redaction-reason\" title=\"<%= searchQuickActions.redactionDropdownTitle %>\">\n <div class=\"pcc-label\" data-pcc-redaction-reason-dropdown-label><%= searchQuickActions.redactionReasonDropdownSelect%></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-qa-toggle-id=\"dropdown-quick-action-redaction-reason\" class=\"pcc-dropdown\">\n <% _.each(reasons.reasons, function(reason, index) { %>\n <div class=\"<%= (index % 2 === 0) ? 'even' : 'odd' %> <%= (reason.reason === redactionReasonClear) ? 'pcc-must-hide' : '' %>\" <%= (reason.reason === redactionReasonClear) ? 'data-clear-item' : '' %>><%= reason.reason %></div>\n <% }); %>\n </div>\n </div>\n\n <div class=\"pcc-row\">\n <input type=\"text\" data-pcc-qa-redaction-reason-input class=\"pcc-hide\">\n </div>\n\n <button data-pcc-search-quick-action=\"redactReasonUpdateDone\" class=\"\" title=\"<%= searchQuickActions.redactReasonUpdateDone %>\"><%= searchQuickActions.redactReasonUpdateDone %></button>\n\n </div>\n\n </div>\n\n <div class=\"pcc-search-filter-container pcc-hide pcc-clear\" data-pcc-search-container=\"filter\">\n <div class=\"pcc-search-areas\">\n <span>Search in: </span>\n <button class=\"pcc-icon pcc-icon-page pcc-active\" data-pcc-search-in=\"document\" title=\"<%= searchFilters.searchInDocument %>\"></button>\n <button class=\"pcc-icon pcc-icon-comment pcc-active\" data-pcc-search-in=\"comments\" title=\"<%= searchFilters.searchInComments %>\"></button>\n <button class=\"pcc-icon pcc-icon-annotate pcc-active\" data-pcc-search-in=\"annotations\" title=\"<%= searchFilters.searchInAnnations %>\"></button>\n <button class=\"pcc-icon pcc-icon-redact-pen pcc-active\" data-pcc-search-in=\"redactions\" title=\"<%= searchFilters.searchInRedactions %>\"></button>\n <button class=\"pcc-icon pcc-icon-esign pcc-active\" data-pcc-search-in=\"signatures\" title=\"<%= searchFilters.searchInSignatures %>\"></button>\n </div>\n\n <div class=\"pcc-section pcc-expand pcc-hide\" data-pcc-section=\"searchFixedTerms\">\n <div class=\"pcc-section-title\"><%= searchFilters.fixedSearchTerms %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchTerms\">\n <div class=\"pcc-section-title\"><%= searchFilters.searchTerms %></div>\n <div class=\"pcc-section-content\"><%= searchFilters.noTerms %></div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchMarks\">\n <div class=\"pcc-section-title\"><%= searchFilters.markupFilters %></div>\n <div class=\"pcc-section-content\">\n\n <div class=\"pcc-search-filter pcc-filter-marks pcc-checked\" data-pcc-search-in-marks=\"markText\">\n <span class=\"pcc-checkbox\"></span><%= searchFilters.searchMarkText %>\n </div>\n <div class=\"pcc-search-filter pcc-filter-marks pcc-checked\" data-pcc-search-in-marks=\"showAllTypes\">\n <span class=\"pcc-checkbox\"></span><%= searchFilters.graphicalMarks %>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-section pcc-expand\" data-pcc-section=\"searchRedactionReasons\">\n <div class=\"pcc-section-title\">Redaction Reasons</div>\n <div class=\"pcc-section-content\" data-pcc-filter-redaction-reasons></div>\n </div>\n </div>\n\n <div class=\"pcc-row pcc-row-results-status pcc-hide\" data-pcc-search=\"status\">\n <div class=\"pcc-percent\">\n <div class=\"pcc-label\">\n <div data-pcc-search=\"loader\" class=\"pcc-load\"></div>\n </div>\n <div class=\"pcc-bar\"></div>\n </div>\n </div>\n\n <div class=\"pcc-row pcc-clear pcc-search-nav\">\n <div class=\"pcc-col-6\">\n <button class=\"pcc-full\" disabled data-pcc-search=\"prevResult\"><%= previous %></button>\n </div>\n <div class=\"pcc-col-6\">\n <button class=\"pcc-full\" disabled data-pcc-search=\"nextResult\"><%= next %></button>\n </div>\n </div>\n\n <div class=\"pcc-search-results-container pcc-hide\" data-pcc-search-container=\"results\">\n <div class=\"pcc-row pcc-row-results-header\">\n <div class=\"pcc-col-2 pcc-center\"><%= page %></div>\n <div class=\"pcc-col-10 pcc-center\"><%= results %></div>\n <div class=\"pcc-col-2 pcc-center pcc-hide\"><%= type %></div>\n </div>\n <div class=\"pcc-row pcc-row-results\" data-pcc-search=\"results\" tabindex=\"1\"></div>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-load-annotations\" data-pcc-toggle-id=\"dialog-load-annotations\">\n <div class=\"pcc-annotation-load-msg\"></div>\n <div class=\"pcc-select pcc-select-load-annotations\" data-pcc-toggle=\"dropdown-load-annotations\">\n <div class=\"pcc-label\"><%= loadAnnotations %> <span class=\"pcc-hide\"></span></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-load-annotations\" class=\"pcc-dropdown\" data-pcc-load-annotations=\"list\"></div>\n </div>\n <div class=\"pcc-annotation-load-status-msg\"></div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-load-annotation-layers\" data-pcc-toggle-id=\"dialog-load-annotation-layers\">\n\n <div class=\"pcc-annotation-layers-title\">\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" data-pcc-load-annotation-layers=\"back\" class=\"pcc-icon pcc-icon-prevpage pcc-pull-left\"></button>\n <%= annotations.load.title %>\n </div>\n\n <div class=\"pcc-annotation-layers-load-msg\"></div>\n <div class=\"pcc-annotation-layers-load-status-msg\"></div>\n\n <div class=\"pcc-annotation-layer-load-section pcc-dropdown-load-annotation-layers\">\n <div class=\"pcc-annotation-layer-load-section-title\">\n <%= annotationLayerEditTitle %>\n </div>\n <div class=\"pcc-annotation-layer-load-section-content\">\n <div class=\"pcc-select pcc-select-load-annotation-layers\" data-pcc-toggle=\"dropdown-load-annotation-layers\">\n <div class=\"pcc-label\"><%= annotationLayersLoad %> <span class=\"pcc-hide\"></span></div>\n <div class=\"pcc-arrow-down\"></div>\n <div data-pcc-toggle-id=\"dropdown-load-annotation-layers\" class=\"pcc-dropdown\" data-pcc-load-annotation-layers=\"dropdownlist\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"pcc-annotation-layer-load-section pcc-section pcc-overflow\">\n <div class=\"pcc-annotation-layer-load-section-title\">\n <%= annotationLayerReviewTitle %>\n </div>\n <div class=\"pcc-annotation-layer-load-section-content\">\n <div data-pcc-load-annotation-layers=\"list\"></div>\n </div>\n </div>\n\n <button disabled=\"disabled\" data-pcc-load-annotation-layers=\"done\"><%= doneButton %></button>\n\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-save-annotations\" data-pcc-toggle-id=\"dialog-save-annotations\">\n <div class=\"pcc-annotation-save-msg\"></div>\n <input type=\"text\" disabled=\"disabled\">\n <button disabled=\"disabled\"><%= saveButton %></button>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-annotation-layer-review\" data-pcc-toggle-id=\"dialog-annotation-layer-review\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-annotation-layer-review-section\" data-pcc-annotation-layer-review-section=\"current\">\n <div class=\"pcc-annotation-layer-review-section-title\">\n <%= annotationLayerReview.myAnnotations %>\n <div class=\"pcc-pull-right\">\n <div class=\"pcc-select pcc-select-annotation-layer-review-current\" data-pcc-toggle=\"dropdown-annotation-layer-review-current\">\n <button class=\"pcc-icon pcc-icon-light pcc-icon-hamburger-menu\" title=\"<%= options %>\"></button>\n <div data-pcc-toggle-id=\"dropdown-annotation-layer-review-current\" class=\"pcc-dropdown\">\n <button data-pcc-lock-editable-layer data-pcc-annotation-layer-edit=\"current\"><%= annotationLayerReview.editName %></button>\n <button data-pcc-lock-editable-layer data-pcc-toggle=\"dialog-load-annotations\"><%= loadAnnotations %></button>\n <button data-pcc-toggle=\"dialog-save-annotations\" data-pcc-save-annotation-layers><%= saveAnnotations %></button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-annotation-layer-review-section-content\"></div>\n </div>\n\n <div class=\"pcc-annotation-layer-review-section\" data-pcc-annotation-layer-review-section=\"other\">\n <div class=\"pcc-annotation-layer-review-section-title\">\n <%= annotationLayerReview.annotationsForReview %>\n <div class=\"pcc-pull-right\">\n <div class=\"pcc-select pcc-select-annotation-layer-review-other\" data-pcc-toggle=\"dropdown-annotation-layer-review-other\">\n <button class=\"pcc-icon pcc-icon-light pcc-icon-hamburger-menu\" title=\"<%= options %>\"></button>\n <div data-pcc-toggle-id=\"dropdown-annotation-layer-review-other\" class=\"pcc-dropdown\">\n <button data-pcc-toggle=\"dialog-load-annotations\" data-pcc-toggle-mode=\"review\"><%= loadAnnotations %></button>\n\n <button data-pcc-annotation-layer-review=\"showAll\"><%= showAllAnnotations %></button>\n <button data-pcc-annotation-layer-review=\"hideAll\"><%= hideAllAnnotations %></button>\n\n <button data-pcc-annotation-layer-review=\"mergeMode\"><%= mergeAnnotations %></button>\n <button data-pcc-annotation-layer-review=\"mergeAll\"><%= mergeAllAnnotations %></button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pcc-hide pcc-toggle-all-visibility\">\n <button data-pcc-load-annotation-layers=\"showAllReview\">Show All</button>\n <button data-pcc-load-annotation-layers=\"hideAllReview\">Hide All</button>\n </div>\n <div class=\"pcc-annotation-layer-review-section-content\"></div>\n </div>\n\n <div class=\"pcc-annotation-layer-review-merge-actions pcc-hide\" data-pcc-annotation-layer-review-merge-actions>\n <button class=\"pcc-annotation-layer-review-merge\" data-pcc-annotation-layer-review=\"merge\"><%= annotationLayerReview.mergeSelected %></button>\n <button class=\"pcc-muted pcc-annotation-layer-review-merge-cancel\" data-pcc-annotation-layer-review=\"mergeCancel\"><%= cancelButton %></button>\n </div>\n </div>\n</div>\n\n<div class=\"pcc-dialog pcc-dialog-annotation-layer-save\" data-pcc-toggle-id=\"dialog-annotation-layer-save\">\n <div class=\"pcc-dialog-wrapper\">\n <div class=\"pcc-annotation-layers-title\">\n <button data-pcc-toggle=\"dialog-annotation-layer-review\" class=\"pcc-icon pcc-icon-prevpage pcc-pull-left\"></button>\n <%= annotations.save.title %>\n </div>\n <div class=\"pcc-annotation-save-msg\"><%= annotations.save.as %></div>\n <input type=\"text\">\n <button class=\"pcc-disabled\" data-pcc-save-layer><%= saveButton %></button>\n </div>\n</div>\n\n<div data-pcc-notify data-pcc-toggle-id=\"notify\">\n <p></p><button data-pcc-toggle=\"notify\">×</button>\n</div>\n\n<div data-pcc-pageList></div>\n<div data-pcc-context-menu class=\"pcc-context-menu\"></div>\n<div class=\"pcc-overlay-fade\"></div>\n<div class=\"pcc-overlay\" data-pcc-print=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-page-redaction\" data-pcc-page-redaction=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-esign\" data-pcc-esign=\"overlay\"></div>\n<div class=\"pcc-overlay pcc-overlay-image-stamp\" data-pcc-image-stamp=\"overlay\"></div>\n<div class=\"pcc-overlay\" data-pcc-overlay></div>\n\n<div class=\"pcc-breakpoint-trigger\" data-pcc-breakpoint-trigger></div>\n"}
Business Data Visualization IT 7113 Data Visualization J.G. Zheng Spring 2018 https://www.edocr.com/v/yqwmqeba/jgzheng/Business-Data-Visualization http://jackzheng.net/teaching/it7113/ Credit Card Payments Report Legend: OK "On Time"; 10 "0 to 10 days late"; 20 "10 to 20 days late"; 30 "20 to 30 days late" 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK 10 20 30 30 30 20 10 10 OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK 10 OK OK OK OK 2003 OK 20 OK 10 OK OK OK OK OK OK OK OK 2003 OK OK OK 10 OK OK OK OK OK OK OK OK 2004 OK OK OK OK OK OK OK OK 30 OK OK OK 2004 OK OK OK OK OK OK OK OK OK 10 OK OK 2005 OK OK OK OK OK OK OK OK OK OK OK OK 2005 OK 10 OK OK OK OK OK OK OK OK OK OK 2006 OK OK OK OK OK 10 OK OK OK OK OK OK 2006 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK 10 OK OK OK OK OK OK OK 2008 OK OK OK OK OK OK OK OK OK OK OK OK 2008 OK OK OK OK OK OK OK OK OK OK 10 OK 2009 OK OK OK OK OK OK OK OK OK OK OK OK 2009 OK OK OK OK OK OK OK OK OK OK OK OK 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK 20 20 OK OK OK OK 2003 OK OK OK OK OK OK OK OK OK OK OK OK 2003 OK OK OK 10 OK OK 30 20 OK OK OK OK 2004 OK OK OK OK OK OK OK OK OK OK OK OK 2004 OK OK OK OK OK OK 30 30 OK OK OK OK 2005 OK OK OK OK OK OK OK OK OK OK OK OK 2005 OK OK OK OK OK OK 20 30 20 OK OK OK 2006 OK OK OK OK OK OK OK 10 OK OK OK OK 2006 OK OK OK 10 OK OK 30 10 OK OK OK OK 2007 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK OK 30 20 30 10 OK OK OK 2008 OK OK OK OK OK 10 OK 20 OK 10 20 OK 2008 OK OK OK OK OK OK 30 10 OK OK OK OK 2009 OK 10 OK OK 30 30 OK OK OK 10 OK OK 2009 OK OK OK OK OK OK 10 20 OK OK OK OK Quickly identify the credit patterns for these 4 customers. 2 Credit Card Payments Report 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK 10 20 30 30 30 20 10 10 OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK 10 OK OK OK OK 2003 OK 20 OK 10 OK OK OK OK OK OK OK OK 2003 OK OK OK 10 OK OK OK OK OK OK OK OK 2004 OK OK OK OK OK OK OK OK 30 OK OK OK 2004 OK OK OK OK OK OK OK OK OK 10 OK OK 2005 OK OK OK OK OK OK OK OK OK OK OK OK 2005 OK 10 OK OK OK OK OK OK OK OK OK OK 2006 OK OK OK OK OK 10 OK OK OK OK OK OK 2006 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK 10 OK OK OK OK OK OK OK 2008 OK OK OK OK OK OK OK OK OK OK OK OK 2008 OK OK OK OK OK OK OK OK OK OK 10 OK 2009 OK OK OK OK OK OK OK OK OK OK OK OK 2009 OK OK OK OK OK OK OK OK OK OK OK OK 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2000 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2001 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK OK OK OK OK OK OK 2002 OK OK OK OK OK OK 20 20 OK OK OK OK 2003 OK OK OK OK OK OK OK OK OK OK OK OK 2003 OK OK OK 10 OK OK 30 20 OK OK OK OK 2004 OK OK OK OK OK OK OK OK OK OK OK OK 2004 OK OK OK OK OK OK 30 30 OK OK OK OK 2005 OK OK OK OK OK OK OK OK OK OK OK OK 2005 OK OK OK OK OK OK 20 30 20 OK OK OK 2006 OK OK OK OK OK OK OK 10 OK OK OK OK 2006 OK OK OK 10 OK OK 30 10 OK OK OK OK 2007 OK OK OK OK OK OK OK OK OK OK OK OK 2007 OK OK OK OK OK 30 20 30 10 OK OK OK 2008 OK OK OK OK OK 10 OK 20 OK 10 20 OK 2008 OK OK OK OK OK OK 30 10 OK OK OK OK 2009 OK 10 OK OK 30 30 OK OK OK 10 OK OK 2009 OK OK OK OK OK OK 10 20 OK OK OK OK Legend: OK "On Time"; 10 "0 to 10 days late"; 20 "10 to 20 days late"; 30 "20 to 30 days late" Quickly identify the credit patterns for these 4 customers. 3 Overview This lecture notes provides a high level overview of data visualization primarily used in business intelligence: What is (business) data visualization? What are the types of visualization? What are the related terms and fields? How are they similar or different? The role and value of data visualization in business intelligence and analytics (information seeking and decision making) Basic data visualization elements and forms Data visualization applications and tools Skills, jobs, and career 4 Visualization Visualization forming a concrete and direct vision-perceivable image in human mind by utilizing a combination of visual elements (shapes) and variables like color, positions, etc. What can be visualized Visible reality: person, world, nature, Hidden reality: earth core, blood, universe Invisible reality: wind, air, heat, electron, sound, smell, magnetic fields Abstract: data, idea, hierarchy, process, relationship Types of visualization forms 2D vs. 3D Static vs. motion Virtual vs materialized 5 Data Visualization Data visualization is the visual and interactive exploration and graphic representation of data of any size, type (structured and unstructured) or origin. To form a mental imagery representation of data/information (meaning) The process of presenting data as a visual images The general purpose of data visualization is to provide a better way of presentation and interaction; more specifically, we use data visualization for Understanding comprehension of ideas and process Information seeking, browsing, navigation, exploration, discovery Analysis and decision support Event or operational monitoring Artistic (beauty) expression and appreciation Entertaining, for fun and story telling 6 Data Visualization http://prezi.com/qvhyfup5z7yz/dashboard-design-making-reports-pop/ 7 Related Terms and Fields Data presentation Information visualization (including infographic) Illustration Scientific visualization Computer graphics Reality visualization (VR, AR) Simulation http://setosa.io/bus/ Business data visualization 8 Data Presentation (In the field of statistics) data presentation is the method by which people summarize, organize and communicate information using a variety of tools, including tables and diagrams/charts. More readings: http://www.slideshare.net/ahsanshafiq90/data-presentation-2-15572325 https://www.slideshare.net/31mikaella/presentation-analysis-and-interpretation-of-data 9 Also textual: linear, bullet points, spacing Information Visualization A very close field, and very often used as the synonym to data visualization Information more often more general and more qualitative; intended for more casual use for general people. https://visage.co/throwdown-data-visualization-vs-infographics/ https://www.interaction-design.org/literature/article/information- visualization-who-needs-it Utilizes more free forms of visual diagrams or illustrations (illustrational diagrams) Infographics is another common form http://www.jackhagley.com/What-s-the-difference-between-an- Infographic-and-a-Data-Visualisation See more resource about information visualization https://www.interaction-design.org/literature/topics/information- visualization 10 Illustration of an Idea/Concept 11 Scientific Visualization "Primarily concerned with the visualization of three-dimensional phenomena (architectural, meteorological, medical, biological, etc.), where the emphasis is on realistic renderings of volumes, surfaces, illumination sources, and so forth." https://en.wikipedia.org/wiki/Scientific_visualization Physical science visualization Visualization (simulation) of reality (universe, sun, explosion, atom, climate, etc.) Mathematical model/algorithm visualization http://acko.net/blog/how-to-fold-a-julia-fractal/ 12 What is Business Data/Information Visualization? Business is a general term to describe everyday human activities and operations that make an system running, including commerce, education, sports, entertainment, etc. Business data features Abstract Often quantitative Often structured or semi-structured Multidimensional Directly comprehendible by average human Business data visualization Visualization of business data mainly for communication, information seeking, analysis, and decision support Using simple, standard, abstract, direct image/chart/diagram Utilizes data binding techniques to generate visualizations 13 Yes Business Data Visualization Charts and diagrams in reports Performance dashboards Visual information presentation https://en.wikipedia.org/wiki/Chart https://www.geckoboard.com/learn/dashboard- examples/ https://www.productchart.com/smartphones/ http://www.mapsdata.co.uk/showcase/ https://www.census.gov/dataviz/ 14 Not Business Data Visual These examples are not really considered to be business data visualization which aims at decision support not the focus of this class http://classes.dma.ucla.edu/Spring13/161/projects/st udents/david/project-5/html/?/image-gallery/ https://en.wikipedia.org/wiki/Fractal https://en.wikipedia.org/wiki/Scientific_visualization https://visual.ly/m/design-portfolio/ arts, artistic expression http://hci.usask.ca/uploads/173-pap0297- bateman.pdf Operational visualization 15 Comparison of Related Visualization Fields Content Visual Forms/Tools Purpose Business data visualization Quantitative data, metrics, key performance indicators (KPIs) Charts, diagrams dashboards Data exploration, analysis, decision making Information visualization All kinds of information, quantitative and qualitative Infographics, illustrational diagrams Information seeking, artistic illustration, casual communication, story telling Illustration Processes, structures concepts, ideas Diagram, image, graphics Making the content more vivid and engaging, easier to understand the complexity. Scientific visualization Real world object or phenomenon, mathematical functions and formulas Computer generated graphics, 3D virtual reality Recreate or simulate the real-world object or phenomenon, or visualize an algorithm effect. Simulation Calculated data based on formulas or rules Animated diagram or virtual reality Demonstrate the effect of scenarios under certain rules 16 Why use visualization? The Value of Data Visualization: https://www.youtube.com/watch?v=xekEXM0Vonc Visualization and BI Information visualization is an important part of understanding for information seeking and decision making. Visualization tools have become increasingly important to business intelligence, in which people need technology support to make sense of and analyze complex data sets and all types of information. Visualizations help data comprehension and enhance problem solving capabilities Provide a high level overview of complex data sets Extract/provoke additional (implicit) perspectives and meanings Ease the cognitive load of information processing Recall or memorize data Enable perceptual inference operations and detection of patterns More specifically (see examples in the following slides) Identify structures or relationships Identify patterns and trends Quickly focus on area of interest or area of difference (can be an anomaly) More comprehendible with reality 17 Identify Structures/Relationships Does June report to Joy? Employee Reports to Jane Jack Jessie Jane Jason Jane John Joy Joseph Joy Joy Jack June Jessie Jack Jane Joy Jessie Jason John June Joseph 18 Identify Trends and Patterns What's the difference between these two cities? Which one is Atlanta? In 10 seconds? 19 Identify Trends and Patterns Monthly average temperature Monthly average precipitation What's the difference between these two cities? Which one is Atlanta? In 10 seconds? 20 Quickly Focus on Area of Interests Which stock performed different from others? http://finviz.com/map.ashx 21 More Comprehendible with Reality 22 Data Visualization Concepts Visual elements Visual elements are the basic building blocks in a chart or diagram to visualize data items. The most fundamental and abstract elements are: point, line, surface (area), and volume (3D). These basic elements, and the more complex elements built up on them, can represent almost anything in a visualization. Visual variables (visual properties, or visual attributes) Visual variables are used to "decorate" visual elements, so that the values or categories of data items can be directly and easily perceived and understood by human. Summarized as "SCOPeS" Visual forms/styles Visual form is the basic style a visualization is presented. 23 Visual Variables: SCOPeS Visual variable or property is a basic feature that can represent different values of a particular dimension of data They can be used together to represent multiple dimensions of data The following six can be summarized as "SCOPeS" Shape Color Orientation Position Texture Size Relevant sources: http://www.infovis-wiki.net/index.php?title=Visual_Variables 24 Basic Visual Forms/Styles 25 Form/Style Description Typical Types and Examples Embedded visual It is embedded in, or directly on top of, texts and other forms of data presentation (table, graphic, etc.). Conditional formatting (visual cues) Inline chart (Sparkline) Block visual It is displayed as an independent visual unit and occupies a larger space. It is often a part of a report or dashboard, appearing together with other content. But sometimes it can become a standalone visual with many data points or enough complexity. Chart Illustrational diagram Map (smaller) Data table (usually with embedded visuals) Standalone visual It is a standalone application and is not mixed with other types of content or tool. Most interactions are within the visual. It may consist of a combination of different types of visuals. Dashboard Visual analysis tool (or an analytical dashboard) Map (bigger or full screen) Conditional Formatting Conditional formatting Direct formatting on text or numbers using visual properties, embedded in a pre-established presentation Example Golf http://www.masters.com/en_US/scores/ Tag cloud 26 Sparkline A sparkline is a small chart embedded in a context of words, numbers, tables, images, or other type of information. It presents the general shape of the variation in a simple and highly condensed way. http://en.wikipedia.org/wiki/Sparkline Examples http://omnipotent.net/jquery.sparkline/ http://www.klipfolio.com/blog/table-component-overview Sparkline 27 Illustrational Diagrams Illustrational diagrams Mainly to visualize quantitative as well as qualitative data to illustrate their features, relationships, sequences, etc. http://en.wikipedia.org/wiki/Diagram https://en.wikipedia.org/wiki/Illustration Examples http://extremepresentation.com/design/7-charts/ Flow chart: http://en.wikipedia.org/wiki/Flowchart http://familydoctor.org/familydoctor/en/health-tools/search-by- symptom/cough.html Structure diagram: http://en.wikipedia.org/wiki/Data_structure_diagram Tree diagram: http://en.wikipedia.org/wiki/Tree_structure Spatial map: https://maps.google.com/gallery/ Time line: http://vizualize.me/ Examples of those with quantitative data Sankey diagram https://en.wikipedia.org/wiki/Sankey_diagram 28 Chart Chart is a unique combination of symbols (visual elements) with visual properties which directly represents quantitative values http://en.wikipedia.org/wiki/Chart Chart vs Diagram No explicit defined difference. Diagram is considered to include chart. Chart is more abstract and focus on quantitative values 29 Common Chart Types General types Line chart, column/bar chart, area chart, pie chart, Radar/Spider chart, Petal chart, Scatter chart, bubble chart, Dial or gauge chart Tree map: http://en.wikipedia.org/wiki/Treemapping Field specialized charts Pareto (combo) chart (line/bar charts with left and right axis): http://en.wikipedia.org/wiki/Pareto_chart Stock market: candlestick chart: http://en.wikipedia.org/wiki/Candlestick_chart Project management: Gantt chart: http://en.wikipedia.org/wiki/Gantt_chart Impacting factors and drivers: waterfall/bridge chart: http://en.wikipedia.org/wiki/Waterfall_chart Marketing: perceptual map: http://en.wikipedia.org/wiki/Perceptual_mapping Performance: bullet graphs: http://en.wikipedia.org/wiki/Bullet_graph Heat map: http://en.wikipedia.org/wiki/Heat_map https://finviz.com/map.ashx More chart types http://en.wikipedia.org/wiki/Chart http://www.excelcharts.com/blog/classification-chart-types/ http://labs.juiceanalytics.com/chartchooser/index.html http://www.amazon.com/Information-Graphics-Comprehensive-Illustrated- Reference/dp/0195135326 http://www.inetsoft.com/business/chart_gallery/ 30 Choose a Chart Figure from http://extremepresentation.com/design/7-charts/ or http://extremepresentation.typepad.com/blog/2008/06/visualization-taxonomies.html Online chooser with templates: http://labs.juiceanalytics.com/chartchooser/ 31 Location Intelligence Location as a dimension plays an important role in data analysis and has been gaining increased attention. Data that involves location Geo location: country, state, city, zip, region (park, air port), road, path Contextual location: building, room, shelf, stadium, court, fields, body Abstract location: process, geo diagram (subway) A 2015 year survey http://sandhill.com/article/iot-and-the- growing-use-of-location-features-in-business-intelligence- software/ finds "map-based visualization of information as the top priority, and more than 95 percent of respondents rank it as at least somewhat important." More than 60 percent report that the functionality for layered visualizations is "very important" or "critical" for their organization. Location Based Visual Types Geo map Visualize geo location related data directly on real world maps Data represented as points, areas, paths http://luminocity3d.org/WorldCity/ Abstract illustrated map These are conceptually related to geo location but presented in an abstract way an illustration, rather than accurate geo locations Tile grid map (geo chart) Road/path map: http://fatalities.safer63and881.com/#highway Contextual map Any data relevant to the positioning in a particular context or space, e.g., building, campus, mall, stadium, a just a space (like a hitting area) etc. Infographics Information graphics or infographics are graphic visual representations of information, data or knowledge. http://en.wikipedia.org/wiki/Information_graphics Usually a mixture of text and multiple visual forms (charts, diagrams, images, tables, maps, lists, etc.) to quickly and vividly communicate complex information (multiple variables or dimensions). Example http://dailyinfographic.com/ http://www.cooldailyinfographics.com/ http://blogs.scientificamerican.com/sa-visual/2014/10/14/sa- recognized-for-great-infographics/ https://visual.ly/m/design-portfolio/ Not exactly same as data visualization http://www.jackhagley.com/What-s-the-difference-between-an- Infographic-and-a-Data-Visualisation 34 Digital Dashboard A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance. Dashboard Confusion, Stephen Few, http://www.perceptualedge.com/articles/ie/dashboard_confusion.pdf A set of visualization or presentation of data views organized in a single screen/page The data is generally KPIs and shows trends, breakdowns, and comparisons against a forecast or historical data A dashboard generally contains a variety of different views of data: charts, diagrams, tables, standalone numbers, interactive controls (such a filters) Dashboard vs. report, visual analysis tool, and scorecard http://www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a- dashboard.aspx The Values of Dashboard Allow decision makers to see a variety of relevant data that affects their divisions or departments Quickly understand data and respond quickly at one place; save time over running multiple reports More: http://www.bidashboard.org/benefits.html 35 Types/Levels of Dashboard Monitoring: Operational real time view of important indicators. Analysis/data interaction: Provides optimized UI and information seeking and navigation feature among data and metrics to support analysis. Summary/overview: As a summary high level report of operating status; may be at the top executive level (strategic) or departmental (tactical) levels. 36 Image from http://prezi.com/qvhyfup5z7yz/dashboard-design-making-reports-pop/ More about types: http://www.bidashboard.org/types.html http://www.klipfolio.com/resources/articles/operational-analytical-bi-dashboards Dashboard Uses and Examples Where is it used? Public report: The IT Dashboard http://it.usaspending.gov http://www.youtube.com/watch?v=4fe39dh6xFQ Performance monitoring http://www.google.com/appsstatus https://www.google.com/analytics Election: http://elections.nytimes.com/2012/results/president Sports: http://games.idashboards.com/winter2010/?guestuser=vancouver Business: Performance dashboard Scorecard Strategy map More real examples http://www.klipfolio.com/resources/dashboard-examples/ http://www.idashboards.com/solutions/ http://dashboardsbyexample.com http://www.dashboardzone.com 37 Reports Reports A report is the presentation of detailed data arranged in defined layouts and formats Based on simple and direct queries: usually involves simple analysis and transformation of data (sorting, calculating, filtering, filtering, grouping, formatting, etc.) Traditional reports contain detailed data in a tabular format and typically display numbers and text only. Its purpose is mainly for printing (with styling) or exporting (raw data). It is geared towards people who need data rather than a direct understanding of data. Modern reports can be interactive and visual but the focus is still on detailed data. Sometimes the distinction is a bit blurred with dashboards in some practical cases. http://www.crazybikes.com/mrc/CRAZYBIKES.R00090s A report style "dashboard" (or more like a visual intensive interactive report): https://www.itdashboard.gov/drupal/summary/006 38 Visual Analysis Tools A visual analysis/exploration tool is similar to a dashboard in that it uses visualizations intensively to drive data exploration or analysis. Some consider it a kind of dashboard Some consider it a bit deferent - http://www.dashboardinsight.com/articles/digital- dashboards/fundamentals/what-is-a-dashboard.aspx Key characteristics of a visual analysis tool: The visualization is usually a single (or very few) component that occupies a big portion of the screen as the main UI component, with a large number of data points visualized. It is highly interactive and usually provides abundant settings and configurations (for adjusting factors and parameters) including filtering or sorting options. In fact, the number of setting combinations can be quite big. It is not to visual key metrics, but to visualize patterns, trends, and other complex relationships among data. It fits on one screen, but there may be scroll bars and zooming options. It is primarily used for intensive data exploration or analysis, used by data analysts and researchers. Example http://luminocity3d.org/WorldCity https://www.productchart.com https://immersion.media.mit.edu/demo 39 Scorecards A scorecard is special type of dashboard typically with a tabular visualization of measures and their respective targets with visual indicators to see how each measure is performing against their targets at a glance. http://www.dashboardinsight.com/articles/digital-dashboards/fundamentals/what-is-a- dashboard.aspx Key characteristics Scorecards are mainly used for performance monitoring with data directly related to measure, target, status etc. It mainly uses a tabular layout with embedded visuals like conditional formatting, sparklines (line, bar, or bullet graphs). Limited interactivity (mainly on filtering and sorting to find score items) It is commonly used in another tools like dashboards and visual analysis tools. More information http://www.dashboardinsight.com/articles/digital-dashboards/fundamentals/a-closer-look- at-scorecards-and-dashboards.aspx 40 More Visualization Forms/Methods A periodic table of visualization methods (Interactive) http://www.visual-literacy.org/periodic_table/periodic_table.html Visual data catalogue http://www.datavizcatalogue.com 41 Composition of Multiple Elements/Properties More complex visual elements (such as icons and symbols) can be built based on the basic elements and properties discussed above. Combinations of these properties can be used to represent multi-dimensional data in the same visualization. Animations (such as blinking, movement, spinning, etc.) are based on some dynamic changes of these properties, and they can be used for richer meaning and grab greater attention. 42 Data Visualization and IT Modern advanced and interactive visualizations are driven by the need for technology and tool support (programming and automation). Michael Friendly offers these key points: Highly interactive statistical computing systems have been developed and are in common use. This is compared to early command-driven systems which used compiled, batch processing. There are new methods for visual data analysis that have been implemented such as linking, brushing, selection, focusing, etc. that can be applied to interactive data models. Data with large volumes of dimensions can be better analyzed thanks to the development of tools to do this such as the grand tour, the scatterplot matrix, parallel coordinate plots, etc. There have been new techniques developed for graphing discrete, categorical data. The field of information visualization has broadened to encompass many new forms of data, data structure and indeed problem solving. The information visualization field has begun to implement understanding of the cognitive and perceptual aspects of displaying data in addition to delivering simple static visualizations which were aesthetically pleasing. could have been created manually in practice they require computing power to be manageable to develop cost-effectively. https://www.interaction-design.org/literature/article/information-visualization-a-brief-20th- and-21st-century-history 43 Data Visualization (Dashboard) Tools Enterprise reporting tools (usually as a part of the complete BI system) SSRS, SAP Crystal, etc. Standalone visualization tool (desktop) Tableau: http://www.tableausoftware.com/public/ Power BI QlikView, Dundas, etc. SAP Lumira Cloud (web) based http://idashboards.com http://www.klipfolio.com/ Embedded tools Microsoft Excel, Visio Google Docs Spreadsheet http://www.benlcollins.com/spreadsheets/d ynamic-dashboard-in-google- spreadsheets/ Search https://www.graphiq.com Developer oriented libraries and APIs Programming library:, D3, dotNetCharting, Telerik, Nevron, amCharts, etc. Web API: Google Charts (https://developers.google.com/chart/) Casual charting tools Google Chart creators: http://dexautomation.com/googlechartgener ator.php Other free online charting tools http://www.onlinecharttool.com/ http://nces.ed.gov/nceskids/createagraph (for kids) More http://selection.datavisualization.ch http://www.creativebloq.com/design- tools/data-visualization-712402 http://www.computerworld.com/article/25068 20/business-intelligence/chart-and-image- gallery-30-free-tools-for-data-visualization- and-analysis.html https://www.g2crowd.com/categories/busine ss-intelligence 44 The Industry The data visualization applications market is currently valued at USD 4.12 billion and is expected to grow at a CAGR of 9.21%, to reach USD 6.99 billion by the end of 2022. https://www.mordorintelli gence.com/industry- reports/data- visualization- applications-market- future-of-decision- making-industry 45 Magic Quadrant for Business Intelligence and Analytics Platforms February 2017 Notes on Excel Excel is the best tool to learn and apply sound data visualization principles and best practices "Many individuals and small business users will discover that MS Excel offers much of what they need without the need." Data Visualization - HorizonWatch 2015 Trend Report http://www.slideshare.net/HorizonWatching/data-visualization-horizon- watch-2015-trend-report-client-version-28jan2015 Excel is the best tool for executive dashboard prototyping, because of its flexibility and development costs. http://www.excelcharts.com/blog/prototype-executive-dashboard-excel/ Main visualization features provided by Excel (practice these following the lab instructions) Conditional formatting Chart (Pivot Chart) Slicer (visual filter) Sparkline 46 Career and Jobs Data visualization has become a fast growing career and job, partly attributed to the rise of data science https://blog.udacity.com/2014/11/data-science- job-skills.html On the way to a data scientist https://www.datacamp.com/community/tutorials/l earn-data-science-infographic 47 https://mywebvault.wordpress.com/2017/05/18/modern- data-scientist-skill-set-marketing-distillery/ Skills in Data Visualization Dev Human information behavior and cognition Visualization design Charts, diagrams UI design, interaction design Data exploration, information seeking, navigation Artistic design Data processing Programming Domain knowledge 48 Data Visualization: Sample Real Jobs The Data Visualization Analyst will be responsible for understanding the strategic needs of the business and translating high-level objectives into the development of visual data analysis and dashboards to support the category management and product strategy teams. The candidate will need to need to understand how to create and manipulate large data sets and use various visualization tools to meet the needs of needs of their customers. To ensure adoption by the business, this position will be required to ensure the quality of each dashboard release, data refresh and adhere to a regular refresh and dashboard publishing schedule. https://www.linkedin.com/jobs2/view/12915000 Data Visualization Analyst (originally posted on LinkedIn): Responsible for the management of database analysis projects in support of business initiatives. Data visualization (DV) expertise to design, develop and implement clear, interactive and succinct visualizations by processing and analyzing large quantities of (un)structured data. Candidate should have ability to turn raw data into compelling, lively stories, enriched with powerful, clear visualizations. These visualizations would also provide end-users an ability to discover relationships within related data in fresh and innovative ways. Updates visualization items as defined by department, in accordance with system protocol and requests from relevant departments. Serves as a liaison between business stakeholders and technology resources to optimize processes and designed visualization functionality. Assists with user acceptance testing for new information dashboards and/or analytical systems. 49 CONA (Coke One North America) is searching for a BI Reporting Analysis Intern. In this position, you will use your technical skills to participate in the development of strategic reporting dashboards and visualization of data solutions to support various business operations. We are looking for candidates with knowledge of BI, reporting and dashboard tools knowledge (preferably Tableau), and understanding of SQL. In this role, you will work to create comprehensive metrics on some of Coca-Cola Bottling highest-profile initiatives such as the visualization of operational trends and ongoing operations efficiency reporting through the merging of different data sources (SAP, SeviceNow, HPE ALM etc.). You will participate in data analytics projects and the delivery of advanced visual dashboards, contribute to team discussions around reporting strategies, and provide expertise in the development, usability and presentation of data. Responsibilities: Work closely with stakeholders to identify KPIs, metrics, and business insights needs Serve as subject matter expert for internal clients performing analysis and creating visual reporting Design data models including customized business dimensions, facts and measures to support scorecard, and self-service reporting needs Build a data pipeline to enable data integration from different data sources. Drive collection of new data, and refinement of existing data sources Utilize BI Software (like Tableau) and SQL to create visual dashboards and reporting solutions that provide meaningful insight to operational results, trends and are actionable Further Readings/Watching Articles Zheng (2017) Book Chapter Data Visualization in Business Intelligence (PDF downloadable): https://www.researchgate.net/publication/321804138_Data_Visualization_for_Business_Int elligence Tegarden (1999) CAIS Business Information Visualization (a bit aged but still classic): http://aisel.aisnet.org/cgi/viewcontent.cgi?article=2483&context=cais Friendly (2006) A Brief History of Data Visualization http://www.datavis.ca/papers/hbook.pdf Books Stephen Few, Show Me the Numbers, https://www.amazon.com/dp/0970601972/ "Information Dashboard Design" 2nd, by Stephen Few, 2013, http://www.amazon.com/gp/product/1938377001/ "Introduction to Information Visualization", by Riccardo Mazza, Springer, 2009, ISBN 1848002181 "Business Dashboards: A Visual Catalog for Design and Deployment", by Nils Rasmussen, et al. ,Wiley, 2009, ISBN 0470413476 http://www.amazon.com/Information-Graphics-Comprehensive-Illustrated- Reference/dp/0195135326 Videos https://www.ted.com/playlists/56/making_sense_of_too_much_data 50 More Resources News, blog, magazines http://mashable.com/category/data-visualization/ https://www.interaction-design.org/literature/topics/information-visualization http://hbr.org/special-collections/insight/visualizing-data http://apandre.wordpress.com/ http://nbremer.blogspot.com/ http://understandinggraphics.com/ https://plus.google.com/photos/+AndreiPandre/albums/5481981245951662737?banner=pwa https://visage.co/blog/ http://www.perceptualedge.com/blog/ https://informationisbeautiful.net/ https://www.interaction-design.org/literature/topics/information-visualization Communities and organizations http://www.visualizing.org/ http://www.interaction-design.org/ http://flowingdata.com/ https://plus.google.com/111053008130113715119 https://plus.google.com/112388869729541404591 https://www.linkedin.com/topic/data-presentation https://www.darkhorseanalytics.com/blog/ Company/Influencer http://www.perceptualedge.com/ Stephen Few https://www.edwardtufte.com/tufte/ https://en.wikipedia.org/wiki/Ben_Shneiderman http://blog.visual.ly/ https://bost.ocks.org/mike/ http://alignedleft.com 51
Lecture for IT 7113
Comments
You must log in to comment
Jack Zheng Says:
Book chapter: https://www.researchgate.net/publication/321804138_Data_Visualization_for_Business_Intelligence
Embed as ...
Default Viewer
"Follow Profile"
"Follow Collection"
Thumbnail