1(function() 2{ 3 Sidebar.prototype.addInfographicPalette = function() 4 { 5 var w = 100; 6 var h = 100; 7 var s = 'whiteSpace=wrap;html=1;shape=mxgraph.infographic.'; 8 var s2 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.'; 9 var s3 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape='; 10 var s4 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.basic.'; 11 var gn = 'mxgraph.infographic'; 12 var dt = ''; 13 this.setCurrentSearchEntryLibrary('infographic'); 14 15 this.addPaletteFunctions('infographic', 'Infographic', false, 16 [ 17 this.createVertexTemplateEntry(s4 + 'pie;fillColor=#10739E;strokeColor=none;startAngle=0.2;endAngle=0.9;', w, h, '', 'Pie', null, null, this.getTagsForStencil(gn, 'pie', dt).join(' ')), 18 this.createVertexTemplateEntry(s4 + 'arc;strokeColor=#10739E;strokeWidth=6;startAngle=0.3;endAngle=0.1;', w, h, '', 'Arc', null, null, this.getTagsForStencil(gn, 'arc', dt).join(' ')), 19 this.createVertexTemplateEntry(s4 + 'partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0.25;endAngle=0.1;arcWidth=0.5;', w, h, '', 'Partial Concentric Ellipse', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')), 20 this.createVertexTemplateEntry(s2 + 'parallelogram;dx=15;fillColor=#10739E;strokeColor=none;', w, h * 0.7, '', 'Trapezoid', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')), 21 this.createVertexTemplateEntry( 22 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=20;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;', 23 w * 2, h * 0.4, 'Label', 'Ribbon', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')), 24 this.createVertexTemplateEntry( 25 'html=1;shape=mxgraph.infographic.ribbonRolled;dx=185;dy=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;', 26 w * 2, h * 0.7, 'Label', 'Ribbon (rolled)', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')), 27 this.createVertexTemplateEntry( 28 'html=1;shape=mxgraph.infographic.ribbonDoubleFolded;dx=25;dy=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;', 29 w * 2, h * 0.7, 'Label', 'Ribbon (double folded)', null, null, this.getTagsForStencil(gn, 'ribbonDoubleFolded', dt).join(' ')), 30 this.createVertexTemplateEntry( 31 'html=1;shape=mxgraph.infographic.ribbonFrontFolded;dx=25;dy=15;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingTop=10;', 32 w * 2, h * 0.55, 'Label', 'Ribbon (front folded)', null, null, this.getTagsForStencil(gn, 'ribbonFrontFolded', dt).join(' ')), 33 this.createVertexTemplateEntry( 34 'html=1;shape=mxgraph.infographic.ribbonBackFolded;dx=25;dy=15;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingTop=10;', 35 w * 2, h * 0.55, 'Label', 'Ribbon (back folded)', null, null, this.getTagsForStencil(gn, 'ribbonBackFolded', dt).join(' ')), 36 this.createVertexTemplateEntry( 37 'html=1;shape=mxgraph.infographic.banner;dx=32;dy=17;notch=15;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingBottom=15;', 38 w * 2.6, h * 0.7, 'Label', 'Banner', null, null, this.getTagsForStencil(gn, 'banner', dt).join(' ')), 39 this.createVertexTemplateEntry( 40 'html=1;shape=mxgraph.infographic.bannerSingleFold;dx=32;dx2=20;dy=17;notch=15;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingBottom=15;spacingLeft=25;', 41 w * 2.6, h * 0.7, 'Label', 'Banner (single fold)', null, null, this.getTagsForStencil(gn, 'bannerSingleFold', dt).join(' ')), 42 this.createVertexTemplateEntry( 43 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;', 44 w * 2, h * 2, 'Label', 'Banner (half fold)', null, null, this.getTagsForStencil(gn, 'bannerHalfFold', dt).join(' ')), 45 this.createVertexTemplateEntry( 46 'html=1;shape=mxgraph.infographic.barCallout;dx=100;dy=30;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;', 47 w * 2, h * 0.7, 'Label', 'Bar with callout', null, null, this.getTagsForStencil(gn, 'ribbonRolled', dt).join(' ')), 48 this.createVertexTemplateEntry( 49 'html=1;shape=mxgraph.infographic.flag;dx=30;dy=20;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;', 50 w * 2, h * 0.7, 'Label', 'Flag', null, null, this.getTagsForStencil(gn, 'flag', dt).join(' ')), 51 this.createVertexTemplateEntry(s2 + 'shadedTriangle;fillColor=#10739E;strokeColor=none;', w * 0.8, h, '', 'Triangle', null, null, this.getTagsForStencil(gn, 'shadedTriangle', dt).join(' ')), 52 this.createVertexTemplateEntry(s2 + 'shadedPyramid;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Pyramid', null, null, this.getTagsForStencil(gn, 'shadedTriangle', dt).join(' ')), 53 this.createVertexTemplateEntry(s2 + 'pyramidStep;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Pyramid step', null, null, this.getTagsForStencil(gn, 'pyramidStep', dt).join(' ')), 54 this.createVertexTemplateEntry(s2 + 'cylinder;fillColor=#10739E;strokeColor=none;', w * 0.6, h, '', 'Cylinder', null, null, this.getTagsForStencil(gn, 'cylinder', dt).join(' ')), 55 this.createVertexTemplateEntry(s2 + 'shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;', w, h, '', 'Cube', null, null, this.getTagsForStencil(gn, 'shaded cube', dt).join(' ')), 56 this.createVertexTemplateEntry( 57 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0;endAngle=0.75;arcWidth=0.4;fontSize=20;fontColor=#10739E;align=center;fontStyle=1;', 58 w, h, '75%', 'Partial Concentric Ellipse', null, null, this.getTagsForStencil(gn, 'partConcEllipse', dt).join(' ')), 59 this.createVertexTemplateEntry( 60 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.circularDial;dy=15;fillColor=#10739E;strokeColor=none;labelPosition=center;align=center;fontStyle=1;fontSize=15;spacingBottom=5;', 61 w * 0.8, h * 1.1, 'Label', 'Circular Dial', null, null, this.getTagsForStencil(gn, 'circularDial', dt).join(' ')), 62 63 this.addEntry(dt + 'chevron list', function() 64 { 65 var button1 = new mxCell('LABEL', new mxGeometry(0, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#10739E;strokeColor=none;fontSize=17;fontStyle=1;align=center;'); 66 button1.vertex = true; 67 var button2 = new mxCell(' - Lorem ipsum dolor sit amet<br>' + 68 ' - consectetur adipisicing elit<br>' + 69 ' - sed do eiusmod tempor<br>' + 70 ' - incididunt ut labore et dolore<br>' + 71 ' - magna aliqua.', 72 new mxGeometry(0, 40, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;'); 73 button2.vertex = true; 74 75 return sb.createVertexTemplateFromCells([button1, button2], 200, 160, 'Chevron list'); 76 }), 77 78 this.addEntry(dt + 'roadmap vertical', function() 79 { 80 var chevron1 = new mxCell('', new mxGeometry(0, 0, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#10739E;strokeColor=none;rounded=0;'); 81 chevron1.vertex = true; 82 83 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 84 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 85 new mxGeometry(100, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 86 label1.vertex = true; 87 88 return sb.createVertexTemplateFromCells([chevron1, label1], 300, 70, 'Roadmap (vertical)'); 89 }), 90 91 this.addEntry(dt + 'numbered entry', function() 92 { 93 var rect1 = new mxCell('Label', new mxGeometry(30, 10, 170, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#B1DDF0;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 94 rect1.vertex = true; 95 var ellipse1 = new mxCell('1', new mxGeometry(0, 0, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#10739E;strokeWidth=4;fontColor=#ffffff;align=center;'); 96 ellipse1.vertex = true; 97 98 return sb.createVertexTemplateFromCells([rect1, ellipse1], 200, 60, 'Numbered Entry'); 99 }), 100 101 this.createVertexTemplateEntry(mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=middle;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.numberedEntryVert;dy=25;fillColor=#10739E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;align=center;labelPosition=center;spacingTop=32;fontStyle=1;', w * 0.8, h * 1.6, 'Label', 'Numbered Entry (vertical)', null, null, this.getTagsForStencil(gn, 'numberedEntryVert', dt).join(' ')), 102 this.createVertexTemplateEntry('verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.bendingArch;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#10739E;strokeColor=none;fontSize=19;fontColor=#FFFFFF;labelPosition=center;align=center;fontStyle=1', w, h, '50%', 'Bending Arch', null, null, this.getTagsForStencil(gn, 'bendingArch', dt).join(' ')), 103 this.createVertexTemplateEntry( 104 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout;dy=15;fillColor=#10739E;strokeColor=none;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;', 105 w, h, '50%', 'Circular Callout', null, null, this.getTagsForStencil(gn, 'circularCallout', dt).join(' ')), 106 this.createVertexTemplateEntry( 107 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#10739E;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;', 108 w * 0.6, h * 1.4, '', 'Circular Callout', null, null, this.getTagsForStencil(gn, 'circularCallout2', dt).join(' ')), 109 110 this.addEntry(dt + 'circular dial', function() 111 { 112 var part1 = new mxCell('', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#10739E;fontSize=10;align=center;fillOpacity=20;'); 113 part1.vertex = true; 114 var part2 = new mxCell('65%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.2;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1'); 115 part2.vertex = true; 116 part1.insert(part2); 117 return sb.createVertexTemplateFromCells([part1], part1.geometry.width, part1.geometry.height, 'Circular Dial'); 118 }), 119 120 this.addEntry(dt + 'angled entry', function() 121 { 122 var part1 = new mxCell('1', new mxGeometry(0, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 123 part1.vertex = true; 124 var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#B1DDF0;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 125 part2.vertex = true; 126 return sb.createVertexTemplateFromCells([part1, part2], 140, 30, 'Angled Entry'); 127 }), 128 129 this.addEntry(dt + 'chevron list', function() 130 { 131 132 var str1 = ' - Lorem ipsum dolor sit amet<br>' + 133 ' - consectetur adipisicing elit<br>' + 134 ' - sed do eiusmod tempor<br>' + 135 ' - incididunt ut labore et dolore<br>' + 136 ' - magna aliqua.'; 137 138 var chrevron1 = new mxCell('LABEL', new mxGeometry(0, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#10739E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;'); 139 chrevron1.vertex = true; 140 var process1 = new mxCell(str1, new mxGeometry(0, 40, 190, 120), 141 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 142 process1.vertex = true; 143 var process2 = new mxCell(str1, 144 new mxGeometry(0, 170, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 145 process2.vertex = true; 146 var process3 = new mxCell(str1, 147 new mxGeometry(0, 300, 190, 120), 'shape=rect;fillColor=#B1DDF0;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 148 process3.vertex = true; 149 var chrevron2 = new mxCell('LABEL', new mxGeometry(200, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#F2931E;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;'); 150 chrevron2.vertex = true; 151 var process4 = new mxCell(str1, 152 new mxGeometry(200, 40, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 153 process4.vertex = true; 154 var process5 = new mxCell(str1, 155 new mxGeometry(200, 170, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 156 process5.vertex = true; 157 var process6 = new mxCell(str1, 158 new mxGeometry(200, 300, 190, 120), 'shape=rect;fillColor=#FCE7CD;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 159 process6.vertex = true; 160 var chrevron3 = new mxCell('LABEL', new mxGeometry(400, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#AE4132;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;'); 161 chrevron3.vertex = true; 162 var process7 = new mxCell(str1, 163 new mxGeometry(400, 40, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 164 process7.vertex = true; 165 var process8 = new mxCell(str1, 166 new mxGeometry(400, 170, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 167 process8.vertex = true; 168 var process9 = new mxCell(str1, 169 new mxGeometry(400, 300, 190, 120), 'shape=rect;fillColor=#FAD9D5;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 170 process9.vertex = true; 171 var chrevron4 = new mxCell('LABEL', new mxGeometry(600, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#23445D;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;'); 172 chrevron4.vertex = true; 173 var process10 = new mxCell(str1, 174 new mxGeometry(600, 40, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 175 process10.vertex = true; 176 var process11 = new mxCell(str1, 177 new mxGeometry(600, 170, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 178 process11.vertex = true; 179 var process12 = new mxCell(str1, 180 new mxGeometry(600, 300, 190, 120), 'shape=rect;fillColor=#BAC8D3;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 181 process12.vertex = true; 182 var chrevron5 = new mxCell('LABEL', new mxGeometry(800, 0, 200, 30), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#12AAB5;strokeColor=none;fontSize=17;fontColor=#FFFFFF;fontStyle=1;align=center;rounded=0;'); 183 chrevron5.vertex = true; 184 var process13 = new mxCell(str1, 185 new mxGeometry(800, 40, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 186 process13.vertex = true; 187 var process14 = new mxCell(str1, 188 new mxGeometry(800, 170, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 189 process14.vertex = true; 190 var process15 = new mxCell(str1, 191 new mxGeometry(800, 300, 190, 120), 'shape=rect;fillColor=#B0E3E6;strokeColor=none;fontSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=top;spacing=5;rounded=0;'); 192 process15.vertex = true; 193 194 return sb.createVertexTemplateFromCells([chrevron1, chrevron2, chrevron3, chrevron4, chrevron5, process1, process2, process3, process4, process5, process6, process7, process8, process9, process10, process11, process12, process13, process14, process15], 1000, 420, 'Chevron list'); 195 }), 196 197 this.addEntry(dt + 'roadmap vertical', function() 198 { 199 var chevron1 = new mxCell('', new mxGeometry(0, 0, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#10739E;strokeColor=none;rounded=0;'); 200 chevron1.vertex = true; 201 202 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 203 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 204 new mxGeometry(100, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 205 label1.vertex = true; 206 207 var chevron2 = new mxCell('', new mxGeometry(0, 80, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#F2931E;strokeColor=none;rounded=0;'); 208 chevron2.vertex = true; 209 210 var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 211 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 212 new mxGeometry(100, 80, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 213 label2.vertex = true; 214 215 var chevron3 = new mxCell('', new mxGeometry(0, 160, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#AE4132;strokeColor=none;rounded=0;'); 216 chevron3.vertex = true; 217 218 var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 219 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 220 new mxGeometry(100, 160, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 221 label3.vertex = true; 222 223 var chevron4 = new mxCell('', new mxGeometry(0, 240, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#23445D;strokeColor=none;rounded=0;'); 224 chevron4.vertex = true; 225 226 var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 227 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 228 new mxGeometry(100, 240, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 229 label4.vertex = true; 230 231 var chevron5 = new mxCell('', new mxGeometry(0, 320, 70, 80), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;direction=south;fillColor=#12AAB5;strokeColor=none;rounded=0;'); 232 chevron5.vertex = true; 233 234 var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 235 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 236 new mxGeometry(100, 320, 200, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 237 label5.vertex = true; 238 239 return sb.createVertexTemplateFromCells([chevron1, chevron2, chevron3, chevron4, chevron5, label1, label2, label3, label4, label5], 300, 400, 'Roadmap (vertical)'); 240 }), 241 242 this.addEntry(dt + 'numbered list', function() 243 { 244 var rect1 = new mxCell('Label', new mxGeometry(30, 10, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#64BBE2;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 245 rect1.vertex = true; 246 var ellipse1 = new mxCell('1', new mxGeometry(0, 0, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#10739E;strokeWidth=4;fontColor=#ffffff;align=center;'); 247 ellipse1.vertex = true; 248 249 var rect2 = new mxCell('Label', new mxGeometry(30, 75, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#F8C382;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 250 rect2.vertex = true; 251 var ellipse2 = new mxCell('2', new mxGeometry(0, 65, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#F2931E;strokeWidth=4;fontColor=#ffffff;align=center;'); 252 ellipse2.vertex = true; 253 254 var rect3 = new mxCell('Label', new mxGeometry(30, 140, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#F08E81;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 255 rect3.vertex = true; 256 var ellipse3 = new mxCell('3', new mxGeometry(0, 130, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#AE4132;strokeWidth=4;fontColor=#ffffff;align=center;'); 257 ellipse3.vertex = true; 258 259 var rect4 = new mxCell('Label', new mxGeometry(30, 205, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#5D7F99;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 260 rect4.vertex = true; 261 var ellipse4 = new mxCell('4', new mxGeometry(0, 195, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#23445D;strokeWidth=4;fontColor=#ffffff;align=center;'); 262 ellipse4.vertex = true; 263 264 var rect5 = new mxCell('Label', new mxGeometry(30, 270, 220, 40), 'shape=rect;rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeColor=none;fillColor=#61C6CE;arcSize=30;fontSize=14;spacingLeft=42;fontStyle=1;fontColor=#FFFFFF;align=left;'); 265 rect5.vertex = true; 266 var ellipse5 = new mxCell('5', new mxGeometry(0, 260, 60, 60), 'shape=ellipse;perimeter=ellipsePerimeter;fontSize=22;fontStyle=1;shadow=0;strokeColor=#ffffff;fillColor=#12AAB5;strokeWidth=4;fontColor=#ffffff;align=center;'); 267 ellipse5.vertex = true; 268 269 return sb.createVertexTemplateFromCells([rect1, ellipse1, rect2, ellipse2, rect3, ellipse3, rect4, ellipse4, rect5, ellipse5], 200, 320, 'Numbered List'); 270 }), 271 272 this.addEntry(dt + 'list', function() 273 { 274 275 var st1 = mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=middle;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;html=1;shape=mxgraph.infographic.numberedEntryVert;dy=25;strokeColor=none;fontSize=17;fontColor=#FFFFFF;align=center;labelPosition=center;spacingTop=32;fontStyle=1;fillColor=#' 276 277 var item1 = new mxCell('Label', new mxGeometry(0, 0, 80, 160), st1 + '10739E;'); 278 item1.vertex = true; 279 var item2 = new mxCell('Label', new mxGeometry(85, 0, 80, 160), st1 + 'F2931E;'); 280 item2.vertex = true; 281 var item3 = new mxCell('Label', new mxGeometry(170, 0, 80, 160), st1 + 'AE4132;'); 282 item3.vertex = true; 283 var item4 = new mxCell('Label', new mxGeometry(255, 0, 80, 160), st1 + '23445D;'); 284 item4.vertex = true; 285 var item5 = new mxCell('Label', new mxGeometry(340, 0, 80, 160), st1 + '12AAB5;'); 286 item5.vertex = true; 287 288 return sb.createVertexTemplateFromCells([item1, item2, item3, item4, item5], 420, 160, 'List'); 289 }), 290 291 this.addEntry(dt + 'rodmap horizontal', function() 292 { 293 var arch1 = new mxCell('', new mxGeometry(0, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#10739E;strokeColor=none;'); 294 arch1.vertex = true; 295 var arch2 = new mxCell('', new mxGeometry(105, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#F2931E;strokeColor=none;'); 296 arch2.vertex = true; 297 var arch3 = new mxCell('', new mxGeometry(210, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#AE4132;strokeColor=none;'); 298 arch3.vertex = true; 299 var arch4 = new mxCell('', new mxGeometry(315, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.25;arcWidth=0.25;fillColor=#23445D;strokeColor=none;'); 300 arch4.vertex = true; 301 var arch5 = new mxCell('', new mxGeometry(420, 90, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0.75;arcWidth=0.25;fillColor=#15AA96;strokeColor=none;'); 302 arch5.vertex = true; 303 304 var circle1 = new mxCell('1', new mxGeometry(35, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#10739E;fontSize=15;html=0;fontStyle=1;fontColor=#10739E;'); 305 circle1.vertex = true; 306 var circle2 = new mxCell('2', new mxGeometry(140, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#F2931E;fontSize=15;html=0;fontStyle=1;fontColor=#F2931E;'); 307 circle2.vertex = true; 308 var circle3 = new mxCell('3', new mxGeometry(245, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#AE4132;fontSize=15;html=0;fontStyle=1;fontColor=#AE4132;'); 309 circle3.vertex = true; 310 var circle4 = new mxCell('4', new mxGeometry(350, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#23445D;fontSize=15;html=0;fontStyle=1;fontColor=#23445D;'); 311 circle4.vertex = true; 312 var circle5 = new mxCell('5', new mxGeometry(455, 125, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#12AAB5;fontSize=15;html=0;fontStyle=1;fontColor=#12AAB5;'); 313 circle5.vertex = true; 314 315 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 316 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 317 new mxGeometry(0, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 318 label1.vertex = true; 319 var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 320 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 321 new mxGeometry(105, 0, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 322 label2.vertex = true; 323 var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 324 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 325 new mxGeometry(210, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 326 label3.vertex = true; 327 var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 328 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 329 new mxGeometry(315, 0, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 330 label4.vertex = true; 331 var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 332 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 333 new mxGeometry(420, 220, 120, 80), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 334 label5.vertex = true; 335 336 return sb.createVertexTemplateFromCells([arch1, arch2, arch3, arch4, arch5, circle1, circle2, circle3, circle4, circle5, label1, label2, label3, label4, label5], 540, 300, 'Roadmap (horizontal)'); 337 }), 338 339 this.addEntry(dt + 'roadmap diagonal', function() 340 { 341 var arch1 = new mxCell('', new mxGeometry(190, 0, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#10739E;strokeColor=none;shadow=0;'); 342 arch1.vertex = true; 343 var arch2 = new mxCell('', new mxGeometry(190, 105, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#F2931E;strokeColor=none;shadow=0;'); 344 arch2.vertex = true; 345 var arch3 = new mxCell('', new mxGeometry(295, 105, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#AE4132;strokeColor=none;shadow=0;'); 346 arch3.vertex = true; 347 var arch4 = new mxCell('', new mxGeometry(295, 210, 120, 120), s4 + 'partConcEllipse;startAngle=0.25;endAngle=0;arcWidth=0.25;fillColor=#23445D;strokeColor=none;shadow=0;'); 348 arch4.vertex = true; 349 var arch5 = new mxCell('', new mxGeometry(400, 210, 120, 120), s4 + 'partConcEllipse;startAngle=0.75;endAngle=0.5;arcWidth=0.25;fillColor=#12AAB5;strokeColor=none;shadow=0;'); 350 arch5.vertex = true; 351 352 var circle1 = new mxCell('1', new mxGeometry(225, 35, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#10739E;fontSize=15;html=1;fontStyle=1;fontColor=#10739E;shadow=1;'); 353 circle1.vertex = true; 354 var circle2 = new mxCell('2', new mxGeometry(225, 140, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#F2931E;fontSize=15;html=1;fontStyle=1;fontColor=#F2931E;shadow=1;'); 355 circle2.vertex = true; 356 var circle3 = new mxCell('3', new mxGeometry(330, 140, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#AE4132;fontSize=15;html=1;fontStyle=1;fontColor=#AE4132;shadow=1;'); 357 circle3.vertex = true; 358 var circle4 = new mxCell('4', new mxGeometry(330, 245, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#23445D;fontSize=15;html=1;fontStyle=1;fontColor=#23445D;shadow=1;'); 359 circle4.vertex = true; 360 var circle5 = new mxCell('5', new mxGeometry(435, 245, 50, 50), 'shape=ellipse;strokeWidth=6;strokeColor=#12AAB5;fontSize=15;html=1;fontStyle=1;fontColor=#12AAB5;shadow=1;'); 361 circle5.vertex = true; 362 363 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 364 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 365 new mxGeometry(320, 20, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;'); 366 label1.vertex = true; 367 var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 368 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 369 new mxGeometry(0, 130, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;'); 370 label2.vertex = true; 371 var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 372 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 373 new mxGeometry(425, 130, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;'); 374 label3.vertex = true; 375 var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 376 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 377 new mxGeometry(105, 235, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;'); 378 label4.vertex = true; 379 var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 380 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 381 new mxGeometry(530, 235, 180, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=3;shadow=0;'); 382 label5.vertex = true; 383 384 return sb.createVertexTemplateFromCells([arch1, arch2, arch3, arch4, arch5, circle1, circle2, circle3, circle4, circle5, label1, label2, label3, label4, label5], 710, 330, 'Roadmap (diagonal)'); 385 }), 386 387 this.addEntry(dt + 'arrow list', function() 388 { 389 var part1 = new mxCell('1', new mxGeometry(0, 0, 40, 40), 'html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 390 part1.vertex = true; 391 var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 392 part2.vertex = true; 393 var part3 = new mxCell('2', new mxGeometry(0, 45, 40, 40), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 394 part3.vertex = true; 395 var part4 = new mxCell('Label', new mxGeometry(45, 45, 115, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 396 part4.vertex = true; 397 var part5 = new mxCell('3', new mxGeometry(0, 90, 40, 40), 'html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 398 part5.vertex = true; 399 var part6 = new mxCell('Label', new mxGeometry(45, 90, 135, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 400 part6.vertex = true; 401 var part7 = new mxCell('4', new mxGeometry(0, 135, 40, 40), 'html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 402 part7.vertex = true; 403 var part8 = new mxCell('Label', new mxGeometry(45,135, 155, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 404 part8.vertex = true; 405 var part9 = new mxCell('5', new mxGeometry(0, 180, 40, 40), 'html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 406 part9.vertex = true; 407 var part10 = new mxCell('Label', new mxGeometry(45, 180, 175, 40), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 408 part10.vertex = true; 409 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 220, 220, 'Arrow List'); 410 }), 411 412 this.addEntry(dt + 'angled list', function() 413 { 414 var part1 = new mxCell('1', new mxGeometry(0, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 415 part1.vertex = true; 416 var part2 = new mxCell('Label', new mxGeometry(45, 0, 95, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 417 part2.vertex = true; 418 var part3 = new mxCell('2', new mxGeometry(0, 35, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 419 part3.vertex = true; 420 var part4 = new mxCell('Label', new mxGeometry(45, 35, 115, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 421 part4.vertex = true; 422 var part5 = new mxCell('3', new mxGeometry(0, 70, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 423 part5.vertex = true; 424 var part6 = new mxCell('Label', new mxGeometry(45, 70, 135, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 425 part6.vertex = true; 426 var part7 = new mxCell('4', new mxGeometry(0, 105, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 427 part7.vertex = true; 428 var part8 = new mxCell('Label', new mxGeometry(45, 105, 155, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 429 part8.vertex = true; 430 var part9 = new mxCell('5', new mxGeometry(0, 140, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 431 part9.vertex = true; 432 var part10 = new mxCell('Label', new mxGeometry(45, 140, 175, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 433 part10.vertex = true; 434 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 220, 170, 'Angled List'); 435 }), 436 437 this.addEntry(dt + 'angled list', function() 438 { 439 var part1 = new mxCell('1', new mxGeometry(200, 0, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 440 part1.vertex = true; 441 var part2 = new mxCell('Label', new mxGeometry(245, 0, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#64BBE2;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 442 part2.vertex = true; 443 var part3 = new mxCell('2', new mxGeometry(150, 35, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 444 part3.vertex = true; 445 var part4 = new mxCell('Label', new mxGeometry(195, 35, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 446 part4.vertex = true; 447 var part5 = new mxCell('3', new mxGeometry(100, 70, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 448 part5.vertex = true; 449 var part6 = new mxCell('Label', new mxGeometry(145, 70, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#F08E81;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 450 part6.vertex = true; 451 var part7 = new mxCell('4', new mxGeometry(50, 105, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 452 part7.vertex = true; 453 var part8 = new mxCell('Label', new mxGeometry(95, 105, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 454 part8.vertex = true; 455 var part9 = new mxCell('5', new mxGeometry(0, 140, 50, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;'); 456 part9.vertex = true; 457 var part10 = new mxCell('Label', new mxGeometry(45, 140, 145, 30), 'shape=mxgraph.infographic.parallelogram;dx=5;;html=1;fillColor=#61C6CE;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 458 part10.vertex = true; 459 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8, part9, part10], 390, 170, 'Angled List'); 460 }), 461 462 this.addEntry(dt + 'matrix', function() 463 { 464 var part1 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 465 part1.vertex = true; 466 var part2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 467 part2.vertex = true; 468 var part3 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 469 part3.vertex = true; 470 var part4 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 471 part4.vertex = true; 472 473 var part5 = new mxCell('Label', new mxGeometry(0, 35, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;'); 474 part5.vertex = true; 475 var part6 = new mxCell('Label', new mxGeometry(0, 140, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;'); 476 part6.vertex = true; 477 var part7 = new mxCell('Label', new mxGeometry(35, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;'); 478 part7.vertex = true; 479 var part8 = new mxCell('Label', new mxGeometry(140, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;'); 480 part8.vertex = true; 481 482 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 240, 240, 'Matrix (2x2)'); 483 }), 484 485 this.addEntry(dt + 'matrix', function() 486 { 487 var part1 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipH=1;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 488 part1.vertex = true; 489 var part2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 490 part2.vertex = true; 491 var part3 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipH=1;flipV=1;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 492 part3.vertex = true; 493 var part4 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'shape=mxgraph.basic.three_corner_round_rect;dx=18;flipV=1;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 494 part4.vertex = true; 495 496 var part5 = new mxCell('Label', new mxGeometry(0, 45, 30, 80), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;'); 497 part5.vertex = true; 498 var part6 = new mxCell('Label', new mxGeometry(0, 150, 30, 80), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;'); 499 part6.vertex = true; 500 var part7 = new mxCell('Label', new mxGeometry(45, 0, 80, 30), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;'); 501 part7.vertex = true; 502 var part8 = new mxCell('Label', new mxGeometry(150, 0, 80, 30), 'rounded=1;arcSize=50;html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;'); 503 part8.vertex = true; 504 505 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 240, 240, 'Matrix (2x2)'); 506 }), 507 508 this.addEntry(dt + 'matrix', function() 509 { 510 var part11 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 35, 100, 100), 'html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 511 part11.vertex = true; 512 var part12 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 35, 100, 100), 'html=1;fillColor=#F5AB50;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 513 part12.vertex = true; 514 var part13 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(245, 35, 100, 100), 'html=1;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 515 part13.vertex = true; 516 var part21 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 140, 100, 100), 'html=1;fillColor=#444444;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 517 part21.vertex = true; 518 var part22 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 140, 100, 100), 'html=1;fillColor=#777777;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 519 part22.vertex = true; 520 var part23 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(245, 140, 100, 100), 'html=1;fillColor=#909090;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 521 part23.vertex = true; 522 var part31 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(35, 245, 100, 100), 'html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 523 part31.vertex = true; 524 var part32 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(140, 245, 100, 100), 'html=1;fillColor=#2F5B7C;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 525 part32.vertex = true; 526 var part33 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(245, 245, 100, 100), 'html=1;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;rounded=0;'); 527 part33.vertex = true; 528 529 var label1 = new mxCell('Label', new mxGeometry(0, 35, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;'); 530 label1.vertex = true; 531 var label2 = new mxCell('Label', new mxGeometry(0, 140, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;'); 532 label2.vertex = true; 533 var label3 = new mxCell('Label', new mxGeometry(0, 245, 30, 100), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;horizontal=0;rounded=0;'); 534 label3.vertex = true; 535 var label4 = new mxCell('Label', new mxGeometry(35, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;'); 536 label4.vertex = true; 537 var label5 = new mxCell('Label', new mxGeometry(140, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;'); 538 label5.vertex = true; 539 var label6 = new mxCell('Label', new mxGeometry(245, 0, 100, 30), 'html=1;fillColor=#CCCCCC;strokeColor=none;shadow=0;fontSize=14;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;rounded=0;'); 540 label6.vertex = true; 541 542 return sb.createVertexTemplateFromCells([part11, part12, part13, part21, part22, part23, part31, part32, part33, label1, label2, label3, label4, label5, label6], 345, 345, 'Matrix (3x3)'); 543 }), 544 545 this.addEntry(dt + 'hex loop', function() 546 { 547 var part1 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(0, 51, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#F5AB50;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 548 part1.vertex = true; 549 var part2 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(0, 153, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#E85642;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 550 part2.vertex = true; 551 var part3 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(84, 102, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#12AAB5;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 552 part3.vertex = true; 553 var part4 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(84, 0, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#1699D3;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 554 part4.vertex = true; 555 var part5 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(168, 51, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#736CA8;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 556 part5.vertex = true; 557 var part6 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(168, 153, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#2F5B7C;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 558 part6.vertex = true; 559 var part7 = new mxCell('Lorem ipsum<br> dolor sit amet, consectetur adipisicing elit', new mxGeometry(84, 204, 112, 102), 'shape=hexagon;strokeWidth=4;html=1;fillColor=#777777;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;rounded=0;'); 560 part7.vertex = true; 561 562 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7], 284, 312, 'Hex Loop'); 563 }), 564 565 this.addEntry(dt + 'target', function() 566 { 567 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'ellipse;html=1;strokeWidth=4;fillColor=#F2931E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 568 part1.vertex = true; 569 var part2 = new mxCell('', new mxGeometry(25, 25, 300, 300), 'ellipse;html=1;strokeWidth=4;fillColor=#F8C382;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 570 part2.vertex = true; 571 var part3 = new mxCell('', new mxGeometry(50, 50, 250, 250), 'ellipse;html=1;strokeWidth=4;fillColor=#FCE7CD;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 572 part3.vertex = true; 573 var part4 = new mxCell('', new mxGeometry(75, 75, 200, 200), 'ellipse;html=1;strokeWidth=4;fillColor=#BAC8D3;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 574 part4.vertex = true; 575 var part5 = new mxCell('', new mxGeometry(100, 100, 150, 150), 'ellipse;html=1;strokeWidth=4;fillColor=#5D7F99;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 576 part5.vertex = true; 577 var part6 = new mxCell('', new mxGeometry(125, 125, 100, 100), 'ellipse;html=1;strokeWidth=4;fillColor=#2F5B7C;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 578 part6.vertex = true; 579 var part7 = new mxCell('', new mxGeometry(150, 150, 50, 50), 'ellipse;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 580 part7.vertex = true; 581 582 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7], 350, 350, 'Target'); 583 }), 584 585 this.addEntry(dt + 'target simple', function() 586 { 587 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'ellipse;html=1;strokeWidth=4;fillColor=#10739E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 588 part1.vertex = true; 589 var part2 = new mxCell('', new mxGeometry(50, 50, 250, 250), 'ellipse;html=1;strokeWidth=4;fillColor=#F2931E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 590 part2.vertex = true; 591 var part3 = new mxCell('', new mxGeometry(100, 100, 150, 150), 'ellipse;html=1;strokeWidth=4;fillColor=#AE4132;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 592 part3.vertex = true; 593 var part4 = new mxCell('', new mxGeometry(150, 150, 50, 50), 'ellipse;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 594 part4.vertex = true; 595 596 return sb.createVertexTemplateFromCells([part1, part2, part3, part4], 350, 350, 'Target (simple)'); 597 }), 598 599 this.addEntry(dt + 'onion', function() 600 { 601 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'ellipse;html=1;strokeWidth=4;fillColor=#F5AB50;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 602 part1.vertex = true; 603 var part2 = new mxCell('', new mxGeometry(25, 50, 300, 300), 'ellipse;html=1;strokeWidth=4;fillColor=#F8C382;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 604 part2.vertex = true; 605 var part3 = new mxCell('', new mxGeometry(50, 100, 250, 250), 'ellipse;html=1;strokeWidth=4;fillColor=#FCE7CD;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 606 part3.vertex = true; 607 var part4 = new mxCell('', new mxGeometry(75, 150, 200, 200), 'ellipse;html=1;strokeWidth=4;fillColor=#BAC8D3;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 608 part4.vertex = true; 609 var part5 = new mxCell('', new mxGeometry(100, 200, 150, 150), 'ellipse;html=1;strokeWidth=4;fillColor=#5D7F99;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 610 part5.vertex = true; 611 var part6 = new mxCell('', new mxGeometry(125, 250, 100, 100), 'ellipse;html=1;strokeWidth=4;fillColor=#2F5B7C;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 612 part6.vertex = true; 613 var part7 = new mxCell('', new mxGeometry(150, 300, 50, 50), 'ellipse;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 614 part7.vertex = true; 615 616 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7], 350, 350, 'Onion'); 617 }), 618 619 this.addEntry(dt + 'onion simple', function() 620 { 621 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'ellipse;html=1;strokeWidth=4;fillColor=#10739E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 622 part1.vertex = true; 623 var part2 = new mxCell('', new mxGeometry(50, 100, 250, 250), 'ellipse;html=1;strokeWidth=4;fillColor=#F2931E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 624 part2.vertex = true; 625 var part3 = new mxCell('', new mxGeometry(100, 200, 150, 150), 'ellipse;html=1;strokeWidth=4;fillColor=#AE4132;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 626 part3.vertex = true; 627 var part4 = new mxCell('', new mxGeometry(150, 300, 50, 50), 'ellipse;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 628 part4.vertex = true; 629 630 return sb.createVertexTemplateFromCells([part1, part2, part3, part4], 350, 350, 'Onion (simple)'); 631 }), 632 633 this.addEntry(dt + 'triangle', function() 634 { 635 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#F2931E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 636 part1.vertex = true; 637 var part2 = new mxCell('', new mxGeometry(25, 0, 300, 300), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#F8C382;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 638 part2.vertex = true; 639 var part3 = new mxCell('', new mxGeometry(50, 0, 250, 250), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#FCE7CD;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 640 part3.vertex = true; 641 var part4 = new mxCell('', new mxGeometry(75, 0, 200, 200), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#BAC8D3;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 642 part4.vertex = true; 643 var part5 = new mxCell('', new mxGeometry(100, 0, 150, 150), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#5D7F99;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 644 part5.vertex = true; 645 var part6 = new mxCell('', new mxGeometry(125, 0, 100, 100), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#2F5B7C;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 646 part6.vertex = true; 647 var part7 = new mxCell('', new mxGeometry(150, 0, 50, 50), 'triangle;direction=north;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 648 part7.vertex = true; 649 650 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7], 350, 350, 'Triangle'); 651 }), 652 653 this.addEntry(dt + 'triangle simple', function() 654 { 655 var part1 = new mxCell('', new mxGeometry(0, 0, 350, 350), 'triangle;direction=north;strokeWidth=4;html=1;fillColor=#10739E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 656 part1.vertex = true; 657 var part2 = new mxCell('', new mxGeometry(50, 0, 250, 250), 'triangle;direction=north;strokeWidth=4;html=1;fillColor=#F2931E;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 658 part2.vertex = true; 659 var part3 = new mxCell('', new mxGeometry(100, 0, 150, 150), 'triangle;direction=north;strokeWidth=4;html=1;fillColor=#AE4132;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 660 part3.vertex = true; 661 var part4 = new mxCell('', new mxGeometry(150, 0, 50, 50), 'triangle;direction=north;strokeWidth=4;html=1;fillColor=#23445D;strokeColor=#ffffff;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 662 part4.vertex = true; 663 664 return sb.createVertexTemplateFromCells([part1, part2, part3, part4], 350, 350, 'Triangle (simple)'); 665 }), 666 667 this.addEntry(dt + 'percent percentage list', function() 668 { 669 var chevron1 = new mxCell('30%', new mxGeometry(0, 0, 60, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#4A5768;strokeColor=none;fontSize=16;fontColor=#ffffff;fontStyle=1;rounded=0;'); 670 chevron1.vertex = true; 671 var bg1 = new mxCell('', new mxGeometry(70, 10, 300, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#B1DDF0;strokeColor=none;'); 672 bg1.vertex = true; 673 var bar1 = new mxCell('', new mxGeometry(70, 10, 90, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#10739E;strokeColor=none;shadow=0;'); 674 bar1.vertex = true; 675 676 var chevron2 = new mxCell('75%', new mxGeometry(0, 50, 60, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#4A5768;strokeColor=none;fontSize=16;fontColor=#ffffff;fontStyle=1;rounded=0;'); 677 chevron2.vertex = true; 678 var bg2 = new mxCell('', new mxGeometry(70, 60, 300, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#FCE7CD;strokeColor=none;'); 679 bg2.vertex = true; 680 var bar2 = new mxCell('', new mxGeometry(70, 60, 225, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#F2931E;strokeColor=none;shadow=0;'); 681 bar2.vertex = true; 682 683 var chevron3 = new mxCell('90%', new mxGeometry(0, 100, 60, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#4A5768;strokeColor=none;fontSize=16;fontColor=#ffffff;fontStyle=1;rounded=0;'); 684 chevron3.vertex = true; 685 var bg3 = new mxCell('', new mxGeometry(70, 110, 300, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#FAD9D5;strokeColor=none;'); 686 bg3.vertex = true; 687 var bar3 = new mxCell('', new mxGeometry(70, 110, 270, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#AE4132;strokeColor=none;shadow=0;'); 688 bar3.vertex = true; 689 690 var chevron4 = new mxCell('25%', new mxGeometry(0, 150, 60, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#4A5768;strokeColor=none;fontSize=16;fontColor=#ffffff;fontStyle=1;rounded=0;'); 691 chevron4.vertex = true; 692 var bg4 = new mxCell('', new mxGeometry(70, 160, 300, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#BAC8D3;strokeColor=none;'); 693 bg4.vertex = true; 694 var bar4 = new mxCell('', new mxGeometry(70, 160, 75, 20), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#23445D;strokeColor=none;shadow=0;'); 695 bar4.vertex = true; 696 697 return sb.createVertexTemplateFromCells([chevron1, bg1, bar1, chevron2, bg2, bar2, chevron3, bg3, bar3, chevron4, bg4, bar4], 370, 190, 'Percentage list'); 698 }), 699 700 this.addEntry(dt + 'percent percentage list', function() 701 { 702 var bg1 = new mxCell('', new mxGeometry(0, 0, 400, 40), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#dddddd;strokeColor=none;rounded=0;'); 703 bg1.vertex = true; 704 var bar1 = new mxCell('65%', new mxGeometry(0, 0, 260, 40), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=18;spacingLeft=10;fontStyle=1;shadow=0;'); 705 bar1.vertex = true; 706 var label1 = new mxCell('Label', new mxGeometry(320, 0, 80, 40), 'text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;shadow=0;fontSize=18;spacingRight=10;'); 707 label1.vertex = true; 708 709 var bg2 = new mxCell('', new mxGeometry(0, 50, 400, 40), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#dddddd;strokeColor=none;rounded=0;'); 710 bg2.vertex = true; 711 var bar2 = new mxCell('45%', new mxGeometry(0, 50, 180, 40), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#F2931E;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=18;spacingLeft=10;fontStyle=1;shadow=0;'); 712 bar2.vertex = true; 713 var label2 = new mxCell('Label', new mxGeometry(320, 50, 80, 40), 'text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;shadow=0;fontSize=18;spacingRight=10;'); 714 label2.vertex = true; 715 716 var bg3 = new mxCell('', new mxGeometry(0, 100, 400, 40), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#dddddd;strokeColor=none;rounded=0;'); 717 bg3.vertex = true; 718 var bar3 = new mxCell('30%', new mxGeometry(0, 100, 120, 40), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#AE4132;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=18;spacingLeft=10;fontStyle=1;shadow=0;'); 719 bar3.vertex = true; 720 var label3 = new mxCell('Label', new mxGeometry(320, 100, 80, 40), 'text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;shadow=0;fontSize=18;spacingRight=10;'); 721 label3.vertex = true; 722 723 var bg4 = new mxCell('', new mxGeometry(0, 150, 400, 40), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#dddddd;strokeColor=none;rounded=0;'); 724 bg4.vertex = true; 725 var bar4 = new mxCell('60%', new mxGeometry(0, 150, 240, 40), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#23445D;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=18;spacingLeft=10;fontStyle=1;shadow=0;'); 726 bar4.vertex = true; 727 var label4 = new mxCell('Label', new mxGeometry(320, 150, 80, 40), 'text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;shadow=0;fontSize=18;spacingRight=10;'); 728 label4.vertex = true; 729 730 var bg5 = new mxCell('', new mxGeometry(0, 200, 400, 40), 'whiteSpace=wrap;html=1;fixedSize=1;size=10;fillColor=#dddddd;strokeColor=none;rounded=0;'); 731 bg5.vertex = true; 732 var bar5 = new mxCell('85%', new mxGeometry(0, 200, 340, 40), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#12AAB5;strokeColor=none;align=left;verticalAlign=middle;fontColor=#ffffff;fontSize=18;spacingLeft=10;fontStyle=1;shadow=0;'); 733 bar5.vertex = true; 734 var label5 = new mxCell('Label', new mxGeometry(320, 200, 80, 40), 'text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;shadow=0;fontSize=18;spacingRight=10;'); 735 label5.vertex = true; 736 737 return sb.createVertexTemplateFromCells([bg1, bar1, bg2, bar2, bg3, bar3, bg4, bar4, bg5, bar5, label1, label2, label3, label4, label5], 400, 250, 'Percentage list'); 738 }), 739 740 this.addEntry(dt + 'arc list', function() 741 { 742 var arc1 = new mxCell('', new mxGeometry(0, 0, 260, 260), s4 + 'partConcEllipse;fillColor=#10739E;strokeColor=#ffffff;startAngle=0.75;endAngle=0.08;arcWidth=0.16;strokeWidth=3;'); 743 arc1.vertex = true; 744 var arc2 = new mxCell('', new mxGeometry(20, 20, 220, 220), s4 + 'partConcEllipse;fillColor=#F2931E;strokeColor=#ffffff;startAngle=0.91;endAngle=0.17;arcWidth=0.18;strokeWidth=3;'); 745 arc2.vertex = true; 746 var arc3 = new mxCell('', new mxGeometry(40, 40, 180, 180), s4 + 'partConcEllipse;fillColor=#AE4132;strokeColor=#ffffff;startAngle=0.75;endAngle=0.11;arcWidth=0.22;strokeWidth=3;'); 747 arc3.vertex = true; 748 var arc4 = new mxCell('', new mxGeometry(60, 60, 140, 140), s4 + 'partConcEllipse;fillColor=#12AAB5;strokeColor=#ffffff;startAngle=0.02;endAngle=0.25;arcWidth=0.29;strokeWidth=3;'); 749 arc4.vertex = true; 750 var arc5 = new mxCell('', new mxGeometry(80, 80, 100, 100), s4 + 'partConcEllipse;fillColor=#CCCCCC;strokeColor=#ffffff;startAngle=0.75;endAngle=0.25;arcWidth=0.4;strokeWidth=3;'); 751 arc5.vertex = true; 752 var part1 = new mxCell('2018', new mxGeometry(100, 100, 60, 60), 'html=1;shape=mxgraph.basic.pie;fillColor=#23445D;strokeColor=#ffffff;startAngle=0.75;endAngle=0.25;fontSize=16;fontColor=#FFFFFF;verticalAlign=top;fontStyle=1;strokeWidth=3;'); 753 part1.vertex = true; 754 755 return sb.createVertexTemplateFromCells([arc1, arc2, arc3, arc4, arc5, part1], 200, 200, 'Arc list'); 756 }), 757 758 this.addEntry(dt + 'arc list', function() 759 { 760 var circle1 = new mxCell('', new mxGeometry(0, 0, 250, 250), 'ellipse;fillColor=none;strokeColor=#444444;'); 761 circle1.vertex = true; 762 var circle2 = new mxCell('', new mxGeometry(20, 20, 210, 210), 'ellipse;fillColor=none;strokeColor=#444444;'); 763 circle2.vertex = true; 764 var circle3 = new mxCell('', new mxGeometry(40, 40, 170, 170), 'ellipse;fillColor=none;strokeColor=#444444;'); 765 circle3.vertex = true; 766 var circle4 = new mxCell('', new mxGeometry(60, 60, 130, 130), 'ellipse;fillColor=none;strokeColor=#444444;'); 767 circle4.vertex = true; 768 var circle5 = new mxCell('', new mxGeometry(80, 80, 90, 90), 'ellipse;fillColor=none;strokeColor=#444444;'); 769 circle5.vertex = true; 770 771 var arc1 = new mxCell('', new mxGeometry(0, 0, 250, 250), s4 + 'arc;fillColor=none;strokeColor=#10739E;startAngle=0.75;endAngle=0.08;strokeWidth=16;'); 772 arc1.vertex = true; 773 var arc2 = new mxCell('', new mxGeometry(20, 20, 210, 210), s4 + 'arc;fillColor=none;strokeColor=#F2931E;startAngle=0.91;endAngle=0.17;strokeWidth=16;'); 774 arc2.vertex = true; 775 var arc3 = new mxCell('', new mxGeometry(40, 40, 170, 170), s4 + 'arc;fillColor=none;strokeColor=#AE4132;startAngle=0.75;endAngle=0.11;strokeWidth=16;'); 776 arc3.vertex = true; 777 var arc4 = new mxCell('', new mxGeometry(60, 60, 130, 130), s4 + 'arc;fillColor=none;strokeColor=#12AAB5;startAngle=0.02;endAngle=0.25;strokeWidth=16;'); 778 arc4.vertex = true; 779 var arc5 = new mxCell('', new mxGeometry(80, 80, 90, 90), s4 + 'arc;fillColor=none;strokeColor=#CCCCCC;startAngle=0.75;endAngle=0.25;strokeWidth=16;'); 780 arc5.vertex = true; 781 var part1 = new mxCell('2018', new mxGeometry(92, 92, 66, 66), 'html=1;shape=mxgraph.basic.pie;fillColor=#23445D;strokeColor=none;startAngle=0.75;endAngle=0.25;fontSize=16;fontColor=#FFFFFF;verticalAlign=top;spacingTop=8;fontStyle=1;'); 782 part1.vertex = true; 783 784 return sb.createVertexTemplateFromCells([circle1, circle2, circle3, circle4, circle5, arc1, arc2, arc3, arc4, arc5, part1], 200, 200, 'Arc list'); 785 }), 786 787 this.addEntry(dt + 'triangle graph', function() 788 { 789 var part1 = new mxCell('Label', new mxGeometry(0, 70, 80, 70), 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedTriangle;fillColor=#10739E;strokeColor=none;fontSize=10;labelPosition=center;align=center;fontColor=#FFFFFF;fontStyle=1;shadow=0;'); 790 part1.vertex = true; 791 var part2 = new mxCell('Label', new mxGeometry(60, 10, 80, 130), 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedTriangle;fillColor=#F2931E;strokeColor=none;fontSize=10;labelPosition=center;align=center;fontColor=#FFFFFF;fontStyle=1;shadow=0;'); 792 part2.vertex = true; 793 var part3 = new mxCell('Label', new mxGeometry(120, 0, 80, 140), 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedTriangle;fillColor=#AE4132;strokeColor=none;fontSize=10;labelPosition=center;align=center;fontColor=#FFFFFF;fontStyle=1;shadow=0;'); 794 part3.vertex = true; 795 var part4 = new mxCell('Label', new mxGeometry(180, 40, 80, 100), 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedTriangle;fillColor=#12AAB5;strokeColor=none;fontSize=10;labelPosition=center;align=center;fontColor=#FFFFFF;fontStyle=1;shadow=0;'); 796 part4.vertex = true; 797 var part5 = new mxCell('Label', new mxGeometry(240, 60, 80, 80), 'verticalLabelPosition=middle;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedTriangle;fillColor=#23445D;strokeColor=none;fontSize=10;labelPosition=center;align=center;fontColor=#FFFFFF;fontStyle=1;shadow=0;'); 798 part5.vertex = true; 799 800 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1], 320, 140, 'Triangle Graph'); 801 }), 802 803 this.addEntry(dt + 'pyramid graph', function() 804 { 805 var part1 = new mxCell('Label', new mxGeometry(0, 70, 80, 70), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.infographic.shadedPyramid;fillColor=#10739E;strokeColor=none;fontSize=10;labelPosition=center;align=center;shadow=0;'); 806 part1.vertex = true; 807 var part2 = new mxCell('Label', new mxGeometry(60, 10, 80, 130), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.infographic.shadedPyramid;fillColor=#F2931E;strokeColor=none;fontSize=10;labelPosition=center;align=center;shadow=0;'); 808 part2.vertex = true; 809 var part3 = new mxCell('Label', new mxGeometry(120, 0, 80, 140), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.infographic.shadedPyramid;fillColor=#AE4132;strokeColor=none;fontSize=10;labelPosition=center;align=center;shadow=0;'); 810 part3.vertex = true; 811 var part4 = new mxCell('Label', new mxGeometry(180, 40, 80, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.infographic.shadedPyramid;fillColor=#12AAB5;strokeColor=none;fontSize=10;labelPosition=center;align=center;shadow=0;'); 812 part4.vertex = true; 813 var part5 = new mxCell('Label', new mxGeometry(240, 60, 80, 80), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.infographic.shadedPyramid;fillColor=#23445D;strokeColor=none;fontSize=10;labelPosition=center;align=center;shadow=0;'); 814 part5.vertex = true; 815 816 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1], 320, 140, 'Pyramid Graph'); 817 }), 818 819 this.addEntry(dt + 'change graph', function() 820 { 821 var part1 = new mxCell('', new mxGeometry(0, 30, 30, 100), 'fillColor=#10739E;strokeColor=none;'); 822 part1.vertex = true; 823 var arrow1 = new mxCell('', new mxGeometry(3, 30, 24, 70), 'shape=mxgraph.arrows2.arrow;dy=0.4;dx=16;notch=0;direction=north;fillColor=#1699D3;strokeColor=none;'); 824 arrow1.vertex = true; 825 part1.insert(arrow1); 826 var text1 = new mxCell('Label', new mxGeometry(0, 0, 30, 20), 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;fontColor=#FFFFFF;fontSize=10;'); 827 text1.vertex = true; 828 part1.insert(text1); 829 830 var part2 = new mxCell('', new mxGeometry(35, 10, 30, 120), 'fillColor=#F2931E;strokeColor=none;'); 831 part2.vertex = true; 832 var arrow2 = new mxCell('', new mxGeometry(3, 0, 24, 80), 'shape=mxgraph.arrows2.arrow;dy=0.4;dx=16;notch=0;direction=south;fillColor=#F5AB50;strokeColor=none;'); 833 arrow2.vertex = true; 834 part2.insert(arrow2); 835 var text2 = new mxCell('Label', new mxGeometry(0, 0, 30, 20), 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;fontColor=#FFFFFF;fontSize=10;'); 836 text2.vertex = true; 837 part2.insert(text2); 838 839 var part3 = new mxCell('', new mxGeometry(70, 0, 30, 130), 'fillColor=#AE4132;strokeColor=none;'); 840 part3.vertex = true; 841 var arrow3 = new mxCell('', new mxGeometry(3, 80, 24, 50), 'shape=mxgraph.arrows2.arrow;dy=0.4;dx=16;notch=0;direction=north;fillColor=#E85642;strokeColor=none;'); 842 arrow3.vertex = true; 843 part3.insert(arrow3); 844 var text3 = new mxCell('Label', new mxGeometry(0, 0, 30, 20), 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;fontColor=#FFFFFF;fontSize=10;'); 845 text3.vertex = true; 846 part3.insert(text3); 847 848 var part4 = new mxCell('', new mxGeometry(105, 50, 30, 80), 'fillColor=#12AAB5;strokeColor=none;'); 849 part4.vertex = true; 850 var arrow4 = new mxCell('', new mxGeometry(3, 0, 24, 30), 'shape=mxgraph.arrows2.arrow;dy=0.4;dx=16;notch=0;direction=south;fillColor=#64BBE2;strokeColor=none;'); 851 arrow4.vertex = true; 852 part4.insert(arrow4); 853 var text4 = new mxCell('Label', new mxGeometry(0, 0, 30, 20), 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;fontColor=#FFFFFF;fontSize=10;'); 854 text4.vertex = true; 855 part4.insert(text4); 856 857 var part5 = new mxCell('', new mxGeometry(140, 60, 30, 70), 'fillColor=#23445D;strokeColor=none;'); 858 part5.vertex = true; 859 var arrow5 = new mxCell('', new mxGeometry(3, 10, 24, 60), 'shape=mxgraph.arrows2.arrow;dy=0.4;dx=16;notch=0;direction=north;fillColor=#2F5B7C;strokeColor=none;'); 860 arrow5.vertex = true; 861 part5.insert(arrow5); 862 var text5 = new mxCell('Label', new mxGeometry(0, 0, 30, 20), 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;fontColor=#FFFFFF;fontSize=10;'); 863 text5.vertex = true; 864 part5.insert(text5); 865 866 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5], 170, 130, 'Change Graph'); 867 }), 868 869 this.addEntry(dt + 'step pyramid', function() 870 { 871 var part1 = new mxCell('', new mxGeometry(70, 0, 20, 95), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#F2931E;strokeColor=none;shadow=0;'); 872 part1.vertex = true; 873 var part2 = new mxCell('', new mxGeometry(60, 10, 40, 85), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#F8C382;strokeColor=none;shadow=0;'); 874 part2.vertex = true; 875 var part3 = new mxCell('', new mxGeometry(50, 20, 60, 75), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#FCE7CD;strokeColor=none;shadow=0;'); 876 part3.vertex = true; 877 var part4 = new mxCell('', new mxGeometry(40, 30, 80, 65), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#BAC8D3;strokeColor=none;shadow=0;'); 878 part4.vertex = true; 879 var part5 = new mxCell('', new mxGeometry(30, 40, 100, 55), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#5D7F99;strokeColor=none;shadow=0;'); 880 part5.vertex = true; 881 var part6 = new mxCell('', new mxGeometry(20, 50, 120, 45), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#2F5B7C;strokeColor=none;shadow=0;'); 882 part6.vertex = true; 883 var part7 = new mxCell('', new mxGeometry(10, 60, 140, 35), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#23445D;strokeColor=none;shadow=0;'); 884 part7.vertex = true; 885 var part8 = new mxCell('', new mxGeometry(0, 70, 160, 25), 'html=1;shape=mxgraph.infographic.pyramidStep;fillColor=#333333;strokeColor=none;shadow=0;'); 886 part8.vertex = true; 887 888 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 160, 95, 'Step Pyramid'); 889 }), 890 891 this.addEntry(dt + 'circular dial list horizontal', function() 892 { 893 var part1 = new mxCell('Label', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#B1DDF0;fontSize=12;fontColor=#10739E;align=center;fontStyle=1;'); 894 part1.vertex = true; 895 var part2 = new mxCell('65%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.2;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1'); 896 part2.vertex = true; 897 part1.insert(part2); 898 899 var part3 = new mxCell('Label', new mxGeometry(110, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#F8C382;fontSize=12;fontColor=#F2931E;align=center;fontStyle=1;'); 900 part3.vertex = true; 901 var part4 = new mxCell('40%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.4;arcWidth=0.2;strokeColor=none;fillColor=#F2931E;fontSize=22;fontColor=#F2931E;align=center;fontStyle=1'); 902 part4.vertex = true; 903 part3.insert(part4); 904 905 var part5 = new mxCell('Label', new mxGeometry(220, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#F08E81;fontSize=12;fontColor=#AE4132;align=center;fontStyle=1;'); 906 part5.vertex = true; 907 var part6 = new mxCell('25%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.25;arcWidth=0.2;strokeColor=none;fillColor=#AE4132;fontSize=22;fontColor=#AE4132;align=center;fontStyle=1'); 908 part6.vertex = true; 909 part5.insert(part6); 910 911 var part7 = new mxCell('Label', new mxGeometry(330, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#5D7F99;fontSize=12;fontColor=#23445D;align=center;fontStyle=1;'); 912 part7.vertex = true; 913 var part8 = new mxCell('60%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.6;arcWidth=0.2;strokeColor=none;fillColor=#23445D;fontSize=22;fontColor=#23445D;align=center;fontStyle=1'); 914 part8.vertex = true; 915 part7.insert(part8); 916 917 var part9 = new mxCell('Label', new mxGeometry(440, 0, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#61C6CE;fontSize=12;fontColor=#12AAB5;align=center;fontStyle=1;'); 918 part9.vertex = true; 919 var part10 = new mxCell('80%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.8;arcWidth=0.2;strokeColor=none;fillColor=#12AAB5;fontSize=22;fontColor=#12AAB5;align=center;fontStyle=1'); 920 part10.vertex = true; 921 part9.insert(part10); 922 923 return sb.createVertexTemplateFromCells([part1, part3, part5, part7, part9], 540, 100, 'Circular Dial List (horizontal)'); 924 }), 925 926 this.addEntry(dt + 'circular dial list vertical', function() 927 { 928 var part1 = new mxCell('Label', new mxGeometry(0, 0, 100, 100), 'labelPosition=right;spacingLeft=10;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#B1DDF0;fontSize=12;fontColor=#10739E;align=left;fontStyle=1;'); 929 part1.vertex = true; 930 var part2 = new mxCell('65%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.2;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1'); 931 part2.vertex = true; 932 part1.insert(part2); 933 934 var part3 = new mxCell('Label', new mxGeometry(0, 110, 100, 100), 'labelPosition=right;spacingLeft=10;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#F8C382;fontSize=12;fontColor=#F2931E;align=left;fontStyle=1;'); 935 part3.vertex = true; 936 var part4 = new mxCell('40%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.4;arcWidth=0.2;strokeColor=none;fillColor=#F2931E;fontSize=22;fontColor=#F2931E;align=center;fontStyle=1'); 937 part4.vertex = true; 938 part3.insert(part4); 939 940 var part5 = new mxCell('Label', new mxGeometry(0, 220, 100, 100), 'labelPosition=right;spacingLeft=10;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#F08E81;fontSize=12;fontColor=#AE4132;align=left;fontStyle=1;'); 941 part5.vertex = true; 942 var part6 = new mxCell('25%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.25;arcWidth=0.2;strokeColor=none;fillColor=#AE4132;fontSize=22;fontColor=#AE4132;align=center;fontStyle=1'); 943 part6.vertex = true; 944 part5.insert(part6); 945 946 var part7 = new mxCell('Label', new mxGeometry(0, 330, 100, 100), 'labelPosition=right;spacingLeft=10;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#5D7F99;fontSize=12;fontColor=#23445D;align=left;fontStyle=1;'); 947 part7.vertex = true; 948 var part8 = new mxCell('60%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.6;arcWidth=0.2;strokeColor=none;fillColor=#23445D;fontSize=22;fontColor=#23445D;align=center;fontStyle=1'); 949 part8.vertex = true; 950 part7.insert(part8); 951 952 var part9 = new mxCell('Label', new mxGeometry(0, 440, 100, 100), 'labelPosition=right;spacingLeft=10;html=1;shape=mxgraph.basic.donut;dx=10;strokeColor=none;fillColor=#61C6CE;fontSize=12;fontColor=#12AAB5;align=left;fontStyle=1;'); 953 part9.vertex = true; 954 var part10 = new mxCell('80%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0;endAngle=0.8;arcWidth=0.2;strokeColor=none;fillColor=#12AAB5;fontSize=22;fontColor=#12AAB5;align=center;fontStyle=1'); 955 part10.vertex = true; 956 part9.insert(part10); 957 958 return sb.createVertexTemplateFromCells([part1, part3, part5, part7, part9], 100, 540, 'Circular Dial List (vertical)'); 959 }), 960 961 this.addEntry(dt + 'circular dial list horizontal', function() 962 { 963 var label1 = new mxCell('Label', new mxGeometry(0, 0, 100, 30), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=none;strokeColor=none;fontSize=15;fontColor=#10739E;align=center;fontStyle=1;'); 964 label1.vertex = true; 965 var part1 = new mxCell('65%', new mxGeometry(0, 30, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.4;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1;'); 966 part1.vertex = true; 967 var text1 = new mxCell( 968 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 969 new mxGeometry(0, 140, 100, 120), 970 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=#EEEEEE;strokeColor=none;fontSize=10;align=left;fontStyle=0;rounded=1;whiteSpace=wrap;arcSize=8;spacing=5;'); 971 text1.vertex = true; 972 973 var label2 = new mxCell('Label', new mxGeometry(110, 0, 100, 30), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=none;strokeColor=none;fontSize=15;fontColor=#F2931E;align=center;fontStyle=1;'); 974 label2.vertex = true; 975 var part2 = new mxCell('40%', new mxGeometry(110, 30, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.4;arcWidth=0.4;strokeColor=none;fillColor=#F2931E;fontSize=22;fontColor=#F2931E;align=center;fontStyle=1;'); 976 part2.vertex = true; 977 var text2 = new mxCell( 978 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 979 new mxGeometry(110, 140, 100, 120), 980 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=#EEEEEE;strokeColor=none;fontSize=10;align=left;fontStyle=0;rounded=1;whiteSpace=wrap;arcSize=8;spacing=5;'); 981 text2.vertex = true; 982 983 var label3 = new mxCell('Label', new mxGeometry(220, 0, 100, 30), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=none;strokeColor=none;fontSize=15;fontColor=#AE4132;align=center;fontStyle=1;'); 984 label3.vertex = true; 985 var part3 = new mxCell('25%', new mxGeometry(220, 30, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.25;arcWidth=0.4;strokeColor=none;fillColor=#AE4132;fontSize=22;fontColor=#AE4132;align=center;fontStyle=1;'); 986 part3.vertex = true; 987 var text3 = new mxCell( 988 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 989 new mxGeometry(220, 140, 100, 120), 990 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=#EEEEEE;strokeColor=none;fontSize=10;align=left;fontStyle=0;rounded=1;whiteSpace=wrap;arcSize=8;spacing=5;'); 991 text3.vertex = true; 992 993 var label4 = new mxCell('Label', new mxGeometry(330, 0, 100, 30), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=none;strokeColor=none;fontSize=15;fontColor=#23445D;align=center;fontStyle=1;'); 994 label4.vertex = true; 995 var part4 = new mxCell('60%', new mxGeometry(330, 30, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.6;arcWidth=0.4;strokeColor=none;fillColor=#23445D;fontSize=22;fontColor=#23445D;align=center;fontStyle=1;'); 996 part4.vertex = true; 997 var text4 = new mxCell( 998 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 999 new mxGeometry(330, 140, 100, 120), 1000 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=#EEEEEE;strokeColor=none;fontSize=10;align=left;fontStyle=0;rounded=1;whiteSpace=wrap;arcSize=8;spacing=5;'); 1001 text4.vertex = true; 1002 1003 var label5 = new mxCell('Label', new mxGeometry(440, 0, 100, 30), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=none;strokeColor=none;fontSize=15;fontColor=#12AAB5;align=center;fontStyle=1;'); 1004 label5.vertex = true; 1005 var part5 = new mxCell('80%', new mxGeometry(440, 30, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.8;arcWidth=0.4;strokeColor=none;fillColor=#12AAB5;fontSize=22;fontColor=#12AAB5;align=center;fontStyle=1;'); 1006 part5.vertex = true; 1007 var text5 = new mxCell( 1008 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1009 new mxGeometry(440, 140, 100, 120), 1010 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;fillColor=#EEEEEE;strokeColor=none;fontSize=10;align=left;fontStyle=0;rounded=1;whiteSpace=wrap;arcSize=8;spacing=5;'); 1011 text5.vertex = true; 1012 1013 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, label1, label2, label3, label4, label5, text1, text2, text3, text4, text5], 540, 260, 'Circular Dial List (horizontal)'); 1014 }), 1015 1016 this.addEntry(dt + 'circular dial list vertical', function() 1017 { 1018 var part1 = new mxCell('65%', new mxGeometry(0, 0, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.65;arcWidth=0.4;strokeColor=none;fillColor=#10739E;fontSize=22;fontColor=#10739E;align=center;fontStyle=1;'); 1019 part1.vertex = true; 1020 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 1021 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></font>', 1022 new mxGeometry(110, 0, 210, 100), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=left;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=8;'); 1023 label1.vertex = true; 1024 1025 var part2 = new mxCell('40%', new mxGeometry(0, 110, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.4;arcWidth=0.4;strokeColor=none;fillColor=#F2931E;fontSize=22;fontColor=#F2931E;align=center;fontStyle=1;'); 1026 part2.vertex = true; 1027 var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 1028 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></font>', 1029 new mxGeometry(110, 110, 210, 100), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=left;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=8;'); 1030 label2.vertex = true; 1031 1032 var part3 = new mxCell('25%', new mxGeometry(0, 220, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.25;arcWidth=0.4;strokeColor=none;fillColor=#AE4132;fontSize=22;fontColor=#AE4132;align=center;fontStyle=1;'); 1033 part3.vertex = true; 1034 var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 1035 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></font>', 1036 new mxGeometry(110, 220, 210, 100), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=left;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=8;'); 1037 label3.vertex = true; 1038 1039 var part4 = new mxCell('60%', new mxGeometry(0, 330, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.6;arcWidth=0.4;strokeColor=none;fillColor=#23445D;fontSize=22;fontColor=#23445D;align=center;fontStyle=1;'); 1040 part4.vertex = true; 1041 var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 1042 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></font>', 1043 new mxGeometry(110, 330, 210, 100), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=left;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=8;'); 1044 label4.vertex = true; 1045 1046 var part5 = new mxCell('80%', new mxGeometry(0, 440, 100, 100), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;html=1;shape=mxgraph.infographic.partConcEllipse;startAngle=0;endAngle=0.8;arcWidth=0.4;strokeColor=none;fillColor=#12AAB5;fontSize=22;fontColor=#12AAB5;align=center;fontStyle=1;'); 1047 part5.vertex = true; 1048 var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 1049 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font></font>', 1050 new mxGeometry(110, 440, 210, 100), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=left;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;spacing=8;'); 1051 label5.vertex = true; 1052 1053 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, label1, label2, label3, label4, label5], 320, 540, 'Circular Dial List (vertical)'); 1054 }), 1055 1056 1057 this.addEntry(dt + 'bar graph', function() 1058 { 1059 var part1 = new mxCell('Label', new mxGeometry(0, 20, 40, 80), s2 + 'shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;fontStyle=1;fontColor=#10739E;fontSize=12;shadow=0;'); 1060 part1.vertex = true; 1061 1062 var part2 = new mxCell('Label', new mxGeometry(50, 0, 40, 100), s2 + 'shadedCube;isoAngle=15;fillColor=#F2931E;strokeColor=none;fontStyle=1;fontColor=#F2931E;fontSize=12;shadow=0;'); 1063 part2.vertex = true; 1064 1065 var part3 = new mxCell('Label', new mxGeometry(100, 10, 40, 90), s2 + 'shadedCube;isoAngle=15;fillColor=#AE4132;strokeColor=none;fontStyle=1;fontColor=#AE4132;fontSize=12;shadow=0;'); 1066 part3.vertex = true; 1067 1068 var part4 = new mxCell('Label', new mxGeometry(150, 50, 40, 50), s2 + 'shadedCube;isoAngle=15;fillColor=#23445D;strokeColor=none;fontStyle=1;fontColor=#23445D;fontSize=12;shadow=0;'); 1069 part4.vertex = true; 1070 1071 var part5 = new mxCell('Label', new mxGeometry(200, 30, 40, 70), s2 + 'shadedCube;isoAngle=15;fillColor=#12AAB5;strokeColor=none;fontStyle=1;fontColor=#12AAB5;fontSize=12;shadow=0;'); 1072 part5.vertex = true; 1073 1074 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5], 240, 100, 'Bar Graph'); 1075 }), 1076 1077 this.addEntry(dt + 'bar graph', function() 1078 { 1079 var part1 = new mxCell('Label', new mxGeometry(0, 40, 40, 80), s2 + 'shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;fontStyle=1;fontColor=#10739E;fontSize=12;shadow=0;'); 1080 part1.vertex = true; 1081 var bg1 = new mxCell('', new mxGeometry(0, 0, 40, 60), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#10739E;fontSize=12;shadow=0;align=left;opacity=70;'); 1082 bg1.vertex = true; 1083 1084 var part2 = new mxCell('Label', new mxGeometry(50, 20, 40, 100), s2 + 'shadedCube;isoAngle=15;fillColor=#F2931E;strokeColor=none;fontStyle=1;fontColor=#F2931E;fontSize=12;shadow=0;'); 1085 part2.vertex = true; 1086 var bg2 = new mxCell('', new mxGeometry(50, 0, 40, 40), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#F19A19;fontSize=12;shadow=0;align=left;opacity=70;'); 1087 bg2.vertex = true; 1088 1089 var part3 = new mxCell('Label', new mxGeometry(100, 30, 40, 90), s2 + 'shadedCube;isoAngle=15;fillColor=#AE4132;strokeColor=none;fontStyle=1;fontColor=#AE4132;fontSize=12;shadow=0;'); 1090 part3.vertex = true; 1091 var bg3 = new mxCell('', new mxGeometry(100, 0, 40, 50), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#D82A23;fontSize=12;shadow=0;align=left;opacity=70;'); 1092 bg3.vertex = true; 1093 1094 var part4 = new mxCell('Label', new mxGeometry(150, 70, 40, 50), s2 + 'shadedCube;isoAngle=15;fillColor=#23445D;strokeColor=none;fontStyle=1;fontColor=#23445D;fontSize=12;shadow=0;'); 1095 part4.vertex = true; 1096 var bg4 = new mxCell('', new mxGeometry(150, 0, 40, 90), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#4A5768;fontSize=12;shadow=0;align=left;opacity=70;'); 1097 bg4.vertex = true; 1098 1099 var part5 = new mxCell('Label', new mxGeometry(200, 50, 40, 70), s2 + 'shadedCube;isoAngle=15;fillColor=#12AAB5;strokeColor=none;fontStyle=1;fontColor=#12AAB5;fontSize=12;shadow=0;'); 1100 part5.vertex = true; 1101 var bg5 = new mxCell('', new mxGeometry(200, 0, 40, 70), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#15AA96;fontSize=12;shadow=0;align=left;opacity=70;'); 1102 bg5.vertex = true; 1103 1104 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, bg1, bg2, bg3, bg4, bg5], 240, 120, 'Bar Graph'); 1105 }), 1106 1107 this.addEntry(dt + 'bar graph', function() 1108 { 1109 var part1 = new mxCell('', new mxGeometry(0, 38, 40, 80), s2 + 'shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;shadow=0;'); 1110 part1.vertex = true; 1111 1112 var part2 = new mxCell('', new mxGeometry(25, 6, 40, 100), s2 + 'shadedCube;isoAngle=15;fillColor=#F2931E;strokeColor=none;shadow=0;'); 1113 part2.vertex = true; 1114 1115 var part3 = new mxCell('', new mxGeometry(50, 4, 40, 90), s2 + 'shadedCube;isoAngle=15;fillColor=#AE4132;strokeColor=none;shadow=0;'); 1116 part3.vertex = true; 1117 1118 var part4 = new mxCell('', new mxGeometry(75, 32, 40, 50), s2 + 'shadedCube;isoAngle=15;fillColor=#23445D;strokeColor=none;shadow=0;'); 1119 part4.vertex = true; 1120 1121 var part5 = new mxCell('', new mxGeometry(100, 0, 40, 70), s2 + 'shadedCube;isoAngle=15;fillColor=#12AAB5;strokeColor=none;shadow=0;'); 1122 part5.vertex = true; 1123 1124 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1], 140, 100, 'Bar Graph'); 1125 }), 1126 1127 this.addEntry(dt + 'bar graph', function() 1128 { 1129 var part1 = new mxCell('Label', new mxGeometry(0, 40, 40, 80), s2 + 'cylinder;isoAngle=15;fillColor=#10739E;strokeColor=none;fontStyle=1;fontColor=#10739E;fontSize=12;shadow=0;'); 1130 part1.vertex = true; 1131 var bg1 = new mxCell('', new mxGeometry(0, 0, 40, 60), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.cylinder;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#10739E;fontSize=12;shadow=0;align=left;opacity=70;'); 1132 bg1.vertex = true; 1133 1134 var part2 = new mxCell('Label', new mxGeometry(50, 20, 40, 100), s2 + 'cylinder;isoAngle=15;fillColor=#F2931E;strokeColor=none;fontStyle=1;fontColor=#F2931E;fontSize=12;shadow=0;'); 1135 part2.vertex = true; 1136 var bg2 = new mxCell('', new mxGeometry(50, 0, 40, 40), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.cylinder;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#F2931E;fontSize=12;shadow=0;align=left;opacity=70;'); 1137 bg2.vertex = true; 1138 1139 var part3 = new mxCell('Label', new mxGeometry(100, 30, 40, 90), s2 + 'cylinder;isoAngle=15;fillColor=#AE4132;strokeColor=none;fontStyle=1;fontColor=#AE4132;fontSize=12;shadow=0;'); 1140 part3.vertex = true; 1141 var bg3 = new mxCell('', new mxGeometry(100, 0, 40, 50), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.cylinder;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#AE4132;fontSize=12;shadow=0;align=left;opacity=70;'); 1142 bg3.vertex = true; 1143 1144 var part4 = new mxCell('Label', new mxGeometry(150, 70, 40, 50), s2 + 'cylinder;isoAngle=15;fillColor=#23445D;strokeColor=none;fontStyle=1;fontColor=#23445D;fontSize=12;shadow=0;'); 1145 part4.vertex = true; 1146 var bg4 = new mxCell('', new mxGeometry(150, 0, 40, 90), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.cylinder;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#23445D;fontSize=12;shadow=0;align=left;opacity=70;'); 1147 bg4.vertex = true; 1148 1149 var part5 = new mxCell('Label', new mxGeometry(200, 50, 40, 70), s2 + 'cylinder;isoAngle=15;fillColor=#12AAB5;strokeColor=none;fontStyle=1;fontColor=#12AAB5;fontSize=12;shadow=0;'); 1150 part5.vertex = true; 1151 var bg5 = new mxCell('', new mxGeometry(200, 0, 40, 70), 'verticalLabelPosition=top;verticalAlign=bottom;html=1;shape=mxgraph.infographic.cylinder;isoAngle=15;fillColor=#CCCCCC;strokeColor=none;fontStyle=1;fontColor=#12AAB5;fontSize=12;shadow=0;align=left;opacity=70;'); 1152 bg5.vertex = true; 1153 1154 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, bg1, bg2, bg3, bg4, bg5], 240, 120, 'Bar Graph'); 1155 }), 1156 1157 this.addEntry(dt + 'folded banners', function() 1158 { 1159 var part1 = new mxCell('Label', new mxGeometry(0, 0, 200, 100), 1160 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#10739E;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;'); 1161 part1.vertex = true; 1162 1163 var part2 = new mxCell('Label', new mxGeometry(0, 60, 200, 100), 1164 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#F2931E;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;'); 1165 part2.vertex = true; 1166 1167 var part3 = new mxCell('Label', new mxGeometry(0, 120, 200, 100), 1168 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#AE4132;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;'); 1169 part3.vertex = true; 1170 1171 var part4 = new mxCell('Label', new mxGeometry(0, 180, 200, 100), 1172 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#23445D;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;'); 1173 part4.vertex = true; 1174 1175 var part5 = new mxCell('Label', new mxGeometry(0, 240, 200, 120), 1176 'html=1;shape=mxgraph.infographic.bannerHalfFold;dx=40;dx2=20;notch=15;fillColor=#12AAB5;strokeColor=none;align=left;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;spacingLeft=25;spacingTop=5;'); 1177 part5.vertex = true; 1178 1179 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5], 200, 360, 'Folded Banners'); 1180 }), 1181 1182 this.addEntry(dt + 'cylinder graph', function() 1183 { 1184 var part1 = new mxCell('Label', new mxGeometry(0, 0, 100, 85), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#10739E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#10739E;'); 1185 part1.vertex = true; 1186 1187 var part2 = new mxCell('Label', new mxGeometry(0, 75, 100, 55), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#F2931E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#F2931E;'); 1188 part2.vertex = true; 1189 1190 var part3 = new mxCell('Label', new mxGeometry(0, 120, 100, 110), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#AE4132;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#AE4132;'); 1191 part3.vertex = true; 1192 1193 var part4 = new mxCell('Label', new mxGeometry(0, 220, 100, 150), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#23445D;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#23445D;'); 1194 part4.vertex = true; 1195 1196 var part5 = new mxCell('Label', new mxGeometry(0, 360, 100, 90), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#12AAB5;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#12AAB5;'); 1197 part5.vertex = true; 1198 1199 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1], 100, 460, 'Cylinder Graph'); 1200 }), 1201 1202 this.addEntry(dt + 'cylinder graph', function() 1203 { 1204 var part1 = new mxCell('Label', new mxGeometry(0, 0, 100, 85), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#10739E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#10739E;'); 1205 part1.vertex = true; 1206 1207 var part2 = new mxCell('Label', new mxGeometry(0, 65, 100, 55), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#F2931E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#F2931E;'); 1208 part2.vertex = true; 1209 1210 var part3 = new mxCell('Label', new mxGeometry(0, 100, 100, 110), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#AE4132;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#AE4132;'); 1211 part3.vertex = true; 1212 1213 var part4 = new mxCell('Label', new mxGeometry(0, 190, 100, 150), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#23445D;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#23445D;'); 1214 part4.vertex = true; 1215 1216 var part5 = new mxCell('Label', new mxGeometry(0, 320, 100, 90), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#12AAB5;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#12AAB5;'); 1217 part5.vertex = true; 1218 1219 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1], 100, 410, 'Cylinder Graph'); 1220 }), 1221 1222 this.addEntry(dt + 'ribbon list', function() 1223 { 1224 var ribbon1 = new mxCell('', new mxGeometry(0, 0, 500, 100), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=0;fillColor=#10739E;strokeColor=none;shadow=1;'); 1225 ribbon1.vertex = true; 1226 var item1 = new mxCell('Label', new mxGeometry(410, 50, 100, 60), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=1;strokeColor=none;fillColor=#dddddd;fontSize=15;fontColor=#444444;align=right;direction=south;flipH=1;shadow=1;spacing=10;fontStyle=1;'); 1227 item1.vertex = true; 1228 var chevron1 = new mxCell('', new mxGeometry(0, 0.5, 30, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;shadow=0;strokeColor=none;strokeWidth=6;fillColor=#CCCCCC;size=20;'); 1229 chevron1.vertex = true; 1230 chevron1.geometry.relative = true; 1231 chevron1.geometry.offset = new mxPoint(150, -20); 1232 ribbon1.insert(chevron1); 1233 var text1 = new mxCell( 1234 '<b>Heading</b><br><font style="font-size: 11px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>', 1235 new mxGeometry(0, 0, 230, 100), 'text;strokeColor=none;fillColor=none;spacing=5;spacingTop=0;whiteSpace=wrap;overflow=hidden;rounded=0;shadow=0;fontSize=15;fontColor=#FFFFFF;align=left;html=1;'); 1236 text1.vertex = true; 1237 text1.geometry.relative = true; 1238 text1.geometry.offset = new mxPoint(200, 0); 1239 ribbon1.insert(text1); 1240 var icon1 = new mxCell('', new mxGeometry(50, 32, 50, 37), 'shadow=0;dashed=0;html=1;strokeColor=none;shape=mxgraph.mscae.intune.user_group;fontSize=15;fontColor=#FFFFFF;align=left;'); 1241 icon1.vertex = true; 1242 1243 var ribbon2 = new mxCell('', new mxGeometry(0, 120, 500, 100), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=0;fillColor=#F2931E;strokeColor=none;shadow=1;'); 1244 ribbon2.vertex = true; 1245 var item2 = new mxCell('Label', new mxGeometry(410, 170, 100, 60), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=1;strokeColor=none;fillColor=#dddddd;fontSize=15;fontColor=#444444;align=right;direction=south;flipH=1;shadow=1;spacing=10;fontStyle=1;'); 1246 item2.vertex = true; 1247 var chevron2 = new mxCell('', new mxGeometry(0, 0.5, 30, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;shadow=0;strokeColor=none;strokeWidth=6;fillColor=#CCCCCC;size=20;'); 1248 chevron2.vertex = true; 1249 chevron2.geometry.relative = true; 1250 chevron2.geometry.offset = new mxPoint(150, -20); 1251 ribbon2.insert(chevron2); 1252 var text2 = new mxCell( 1253 '<b>Heading</b><br><font style="font-size: 11px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>', 1254 new mxGeometry(0, 0, 230, 100), 'text;strokeColor=none;fillColor=none;spacing=5;spacingTop=0;whiteSpace=wrap;overflow=hidden;rounded=0;shadow=0;fontSize=15;fontColor=#FFFFFF;align=left;html=1;'); 1255 text2.vertex = true; 1256 text2.geometry.relative = true; 1257 text2.geometry.offset = new mxPoint(200, 0); 1258 ribbon2.insert(text2); 1259 var icon2 = new mxCell('', new mxGeometry(50, 152, 50, 37), 'shadow=0;dashed=0;html=1;strokeColor=none;shape=mxgraph.mscae.intune.user_group;fontSize=15;fontColor=#FFFFFF;align=left;'); 1260 icon2.vertex = true; 1261 1262 var ribbon3 = new mxCell('', new mxGeometry(0, 240, 500, 100), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=0;fillColor=#AE4132;strokeColor=none;shadow=1;'); 1263 ribbon3.vertex = true; 1264 var item3 = new mxCell('Label', new mxGeometry(410, 290, 100, 60), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=1;strokeColor=none;fillColor=#dddddd;fontSize=15;fontColor=#444444;align=right;direction=south;flipH=1;shadow=1;spacing=10;fontStyle=1;'); 1265 item3.vertex = true; 1266 var chevron3 = new mxCell('', new mxGeometry(0, 0.5, 30, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;shadow=0;strokeColor=none;strokeWidth=6;fillColor=#CCCCCC;size=20;'); 1267 chevron3.vertex = true; 1268 chevron3.geometry.relative = true; 1269 chevron3.geometry.offset = new mxPoint(150, -20); 1270 ribbon3.insert(chevron3); 1271 var text3 = new mxCell( 1272 '<b>Heading</b><br><font style="font-size: 11px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>', 1273 new mxGeometry(0, 0, 230, 100), 'text;strokeColor=none;fillColor=none;spacing=5;spacingTop=0;whiteSpace=wrap;overflow=hidden;rounded=0;shadow=0;fontSize=15;fontColor=#FFFFFF;align=left;html=1;'); 1274 text3.vertex = true; 1275 text3.geometry.relative = true; 1276 text3.geometry.offset = new mxPoint(200, 0); 1277 ribbon3.insert(text3); 1278 var icon3 = new mxCell('', new mxGeometry(50, 272, 50, 37), 'shadow=0;dashed=0;html=1;strokeColor=none;shape=mxgraph.mscae.intune.user_group;fontSize=15;fontColor=#FFFFFF;align=left;'); 1279 icon3.vertex = true; 1280 1281 var ribbon4 = new mxCell('', new mxGeometry(0, 360, 500, 100), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=0;fillColor=#23445D;strokeColor=none;shadow=1;'); 1282 ribbon4.vertex = true; 1283 var item4 = new mxCell('Label', new mxGeometry(410, 410, 100, 60), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=1;strokeColor=none;fillColor=#dddddd;fontSize=15;fontColor=#444444;align=right;direction=south;flipH=1;shadow=1;spacing=10;fontStyle=1;'); 1284 item4.vertex = true; 1285 var chevron4 = new mxCell('', new mxGeometry(0, 0.5, 30, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;shadow=0;strokeColor=none;strokeWidth=6;fillColor=#CCCCCC;size=20;'); 1286 chevron4.vertex = true; 1287 chevron4.geometry.relative = true; 1288 chevron4.geometry.offset = new mxPoint(150, -20); 1289 ribbon4.insert(chevron4); 1290 var text4 = new mxCell( 1291 '<b>Heading</b><br><font style="font-size: 11px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>', 1292 new mxGeometry(0, 0, 230, 100), 'text;strokeColor=none;fillColor=none;spacing=5;spacingTop=0;whiteSpace=wrap;overflow=hidden;rounded=0;shadow=0;fontSize=15;fontColor=#FFFFFF;align=left;html=1;'); 1293 text4.vertex = true; 1294 text4.geometry.relative = true; 1295 text4.geometry.offset = new mxPoint(200, 0); 1296 ribbon4.insert(text4); 1297 var icon4 = new mxCell('', new mxGeometry(50, 392, 50, 37), 'shadow=0;dashed=0;html=1;strokeColor=none;shape=mxgraph.mscae.intune.user_group;fontSize=15;fontColor=#FFFFFF;align=left;'); 1298 icon4.vertex = true; 1299 1300 var ribbon5 = new mxCell('', new mxGeometry(0, 480, 500, 100), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=20;notch2=0;fillColor=#12AAB5;strokeColor=none;shadow=1;'); 1301 ribbon5.vertex = true; 1302 var item5 = new mxCell('Label', new mxGeometry(410, 530, 100, 60), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=1;strokeColor=none;fillColor=#dddddd;fontSize=15;fontColor=#444444;align=right;direction=south;flipH=1;shadow=1;spacing=10;fontStyle=1;'); 1303 item5.vertex = true; 1304 var chevron5 = new mxCell('', new mxGeometry(0, 0.5, 30, 40), 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;shadow=0;strokeColor=none;strokeWidth=6;fillColor=#CCCCCC;size=20;'); 1305 chevron5.vertex = true; 1306 chevron5.geometry.relative = true; 1307 chevron5.geometry.offset = new mxPoint(150, -20); 1308 ribbon5.insert(chevron5); 1309 var text5 = new mxCell( 1310 '<b>Heading</b><br><font style="font-size: 11px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</font>', 1311 new mxGeometry(0, 0, 230, 100), 'text;strokeColor=none;fillColor=none;spacing=5;spacingTop=0;whiteSpace=wrap;overflow=hidden;rounded=0;shadow=0;fontSize=15;fontColor=#FFFFFF;align=left;html=1;'); 1312 text5.vertex = true; 1313 text5.geometry.relative = true; 1314 text5.geometry.offset = new mxPoint(200, 0); 1315 ribbon5.insert(text5); 1316 var icon5 = new mxCell('', new mxGeometry(50, 512, 50, 37), 'shadow=0;dashed=0;html=1;strokeColor=none;shape=mxgraph.mscae.intune.user_group;fontSize=15;fontColor=#FFFFFF;align=left;'); 1317 icon5.vertex = true; 1318 1319 return sb.createVertexTemplateFromCells([ribbon1, item1, icon1, ribbon2, item2, icon2, ribbon3, item3, icon3, ribbon4, item4, icon4, ribbon5, item5, icon5], 550, 590, 'Ribbon List'); 1320 }), 1321 1322 this.addEntry(dt + 'bar graph', function() 1323 { 1324 var part1 = new mxCell('Label', new mxGeometry(0, 0, 120, 70), 'html=1;shape=mxgraph.infographic.barCallout;dx=60;dy=30;fillColor=#10739E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;'); 1325 part1.vertex = true; 1326 var dial1 = new mxCell('12', new mxGeometry(40, 75, 40, 40), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=#10739E;strokeWidth=6;fontSize=16;align=center;fontStyle=1'); 1327 dial1.vertex = true; 1328 1329 var part2 = new mxCell('Label', new mxGeometry(120, 0, 160, 70), 'html=1;shape=mxgraph.infographic.barCallout;dx=80;dy=30;fillColor=#F2931E;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;'); 1330 part2.vertex = true; 1331 var dial2 = new mxCell('16', new mxGeometry(180, 75, 40, 40), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=#F2931E;strokeWidth=6;fontSize=16;align=center;fontStyle=1'); 1332 dial2.vertex = true; 1333 1334 var part3 = new mxCell('Label', new mxGeometry(280, 0, 80, 70), 'html=1;shape=mxgraph.infographic.barCallout;dx=40;dy=30;fillColor=#AE4132;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;'); 1335 part3.vertex = true; 1336 var dial3 = new mxCell('8', new mxGeometry(300, 75, 40, 40), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=#AE4132;strokeWidth=6;fontSize=16;align=center;fontStyle=1'); 1337 dial3.vertex = true; 1338 1339 var part4 = new mxCell('Label', new mxGeometry(360, 0, 200, 70), 'html=1;shape=mxgraph.infographic.barCallout;dx=100;dy=30;fillColor=#23445D;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;'); 1340 part4.vertex = true; 1341 var dial4 = new mxCell('20', new mxGeometry(440, 75, 40, 40), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=#23445D;strokeWidth=6;fontSize=16;align=center;fontStyle=1'); 1342 dial4.vertex = true; 1343 1344 var part5 = new mxCell('Label', new mxGeometry(560, 0, 140, 70), 'html=1;shape=mxgraph.infographic.barCallout;dx=70;dy=30;fillColor=#12AAB5;strokeColor=none;align=center;verticalAlign=top;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingTop=5;'); 1345 part5.vertex = true; 1346 var dial5 = new mxCell('14', new mxGeometry(610, 75, 40, 40), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=#12AAB5;strokeWidth=6;fontSize=16;align=center;fontStyle=1'); 1347 dial5.vertex = true; 1348 1349 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, dial1, dial2, dial3, dial4, dial5], 700, 115, 'Bar Graph'); 1350 }), 1351 1352 this.addEntry(dt + 'arrow graph', function() 1353 { 1354 var part1 = new mxCell('Label', new mxGeometry(0, 40, 90, 160), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=top;shape=mxgraph.arrows2.arrow;dy=0.4;dx=60;direction=north;notch=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#10739E;fontSize=14;labelPosition=center;verticalLabelPosition=bottom;fontStyle=1'); 1355 part1.vertex = true; 1356 1357 var part2 = new mxCell('Label', new mxGeometry(50, 0, 90, 200), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=top;shape=mxgraph.arrows2.arrow;dy=0.4;dx=60;direction=north;notch=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#F2931E;fontSize=14;labelPosition=center;verticalLabelPosition=bottom;fontStyle=1'); 1358 part2.vertex = true; 1359 1360 var part3 = new mxCell('Label', new mxGeometry(100, 20, 90, 180), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=top;shape=mxgraph.arrows2.arrow;dy=0.4;dx=60;direction=north;notch=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#AE4132;fontSize=14;labelPosition=center;verticalLabelPosition=bottom;fontStyle=1'); 1361 part3.vertex = true; 1362 1363 var part4 = new mxCell('Label', new mxGeometry(150, 90, 90, 110), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=top;shape=mxgraph.arrows2.arrow;dy=0.4;dx=60;direction=north;notch=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#23445D;fontSize=14;labelPosition=center;verticalLabelPosition=bottom;fontStyle=1'); 1364 part4.vertex = true; 1365 1366 var part5 = new mxCell('Label', new mxGeometry(200, 60, 90, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=top;shape=mxgraph.arrows2.arrow;dy=0.4;dx=60;direction=north;notch=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#12AAB5;fontSize=14;labelPosition=center;verticalLabelPosition=bottom;fontStyle=1'); 1367 part5.vertex = true; 1368 1369 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5], 300, 200, 'Arrow Graph'); 1370 }), 1371 1372 this.addEntry(dt + 'triangular diagram', function() 1373 { 1374 var part1 = new mxCell('Label', new mxGeometry(120, 0, 240, 180), 'triangle;whiteSpace=wrap;html=1;shadow=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#10739E;fontSize=16;fontColor=#FFFFFF;align=center;direction=north;fontStyle=1'); 1375 part1.vertex = true; 1376 var part2 = new mxCell('Label', new mxGeometry(0, 180, 240, 180), 'triangle;whiteSpace=wrap;html=1;shadow=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#F2931E;fontSize=16;fontColor=#FFFFFF;align=center;direction=north;fontStyle=1'); 1377 part2.vertex = true; 1378 var part3 = new mxCell('Label', new mxGeometry(120, 180, 240, 180), 'triangle;whiteSpace=wrap;html=1;shadow=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#AE4132;fontSize=16;fontColor=#FFFFFF;align=center;direction=south;fontStyle=1'); 1379 part3.vertex = true; 1380 var part4 = new mxCell('Label', new mxGeometry(240, 180, 240, 180), 'triangle;whiteSpace=wrap;html=1;shadow=0;strokeColor=#FFFFFF;strokeWidth=6;fillColor=#23445D;fontSize=16;fontColor=#FFFFFF;align=center;direction=north;fontStyle=1'); 1381 part4.vertex = true; 1382 1383 return sb.createVertexTemplateFromCells([part1, part2, part3, part4], 480, 360, 'Triangular Diagram'); 1384 }), 1385 1386 this.addEntry(dt + 'roll', function() 1387 { 1388 var part1 = new mxCell('', new mxGeometry(0, 0, 400, 400), 'ellipse;html=1;strokeWidth=4;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1389 part1.vertex = true; 1390 var part2 = new mxCell('', new mxGeometry(25, 25, 350, 350), 'ellipse;html=1;strokeWidth=4;fillColor=#2F5B7C;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1391 part2.vertex = true; 1392 var part3 = new mxCell('', new mxGeometry(50, 50, 300, 300), 'ellipse;html=1;strokeWidth=4;fillColor=#5D7F99;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1393 part3.vertex = true; 1394 var part4 = new mxCell('', new mxGeometry(75, 75, 250, 250), 'ellipse;html=1;strokeWidth=4;fillColor=#BAC8D3;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1395 part4.vertex = true; 1396 var part5 = new mxCell('', new mxGeometry(100, 100, 200, 200), 'ellipse;html=1;strokeWidth=4;fillColor=#FCE7CD;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1397 part5.vertex = true; 1398 var part6 = new mxCell('', new mxGeometry(125, 125, 150, 150), 'ellipse;html=1;strokeWidth=4;fillColor=#F8C382;strokeColor=none;shadow=0;fontSize=10;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;spacing=10;'); 1399 part6.vertex = true; 1400 var part7 = new mxCell('Label', new mxGeometry(150, 150, 100, 100), 'ellipse;html=1;strokeWidth=4;fillColor=#F5AB50;strokeColor=none;shadow=0;fontSize=20;fontColor=#FFFFFF;align=center;fontStyle=1;whiteSpace=wrap;spacing=10;'); 1401 part7.vertex = true; 1402 1403 var ribbon1 = new mxCell('Label', new mxGeometry(200, 225, 300, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#F5AB50;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1404 ribbon1.vertex = true; 1405 var ribbon2 = new mxCell('Label', new mxGeometry(200, 250, 340, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#F8C382;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1406 ribbon2.vertex = true; 1407 var ribbon3 = new mxCell('Label', new mxGeometry(200, 275, 380, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#FCE7CD;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1408 ribbon3.vertex = true; 1409 var ribbon4 = new mxCell('Label', new mxGeometry(200, 300, 420, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#BAC8D3;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1410 ribbon4.vertex = true; 1411 var ribbon5 = new mxCell('Label', new mxGeometry(200, 325, 460, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#5D7F99;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1412 ribbon5.vertex = true; 1413 var ribbon6 = new mxCell('Label', new mxGeometry(200, 350, 500, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#2F5B7C;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1414 ribbon6.vertex = true; 1415 var ribbon7 = new mxCell('Label', new mxGeometry(200, 375, 540, 25), 'html=1;shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=20;fillColor=#23445D;strokeColor=none;align=right;verticalAlign=middle;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=0;spacingRight=25;'); 1416 ribbon7.vertex = true; 1417 1418 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, ribbon1, ribbon2, ribbon3, ribbon4, ribbon5, ribbon6, ribbon7], 740, 400, 'Roll'); 1419 }), 1420 1421 this.addEntry(dt + 'cylinder graph', function() 1422 { 1423 var part1 = new mxCell('', new mxGeometry(315, 160, 100, 25), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#10739E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#10739E;'); 1424 part1.vertex = true; 1425 var part2 = new mxCell('', new mxGeometry(315, 180, 100, 25), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#F2931E;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#F2931E;'); 1426 part2.vertex = true; 1427 var part3 = new mxCell('', new mxGeometry(315, 200, 100, 25), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#AE4132;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#AE4132;'); 1428 part3.vertex = true; 1429 var part4 = new mxCell('', new mxGeometry(315, 220, 100, 25), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#23445D;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#23445D;'); 1430 part4.vertex = true; 1431 var part5 = new mxCell('', new mxGeometry(315, 240, 100, 25), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.cylinder;fillColor=#12AAB5;strokeColor=none;shadow=0;align=left;labelPosition=right;spacingLeft=10;fontStyle=1;fontColor=#12AAB5;'); 1432 part5.vertex = true; 1433 1434 var callout1 = new mxCell('Label', new mxGeometry(175, 0, 130, 160), 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=NW;callStyle=line;fontSize=17;fontColor=#10739E;align=left;verticalAlign=top;strokeColor=#666666;fillColor=#4D9900;flipV=0;fontStyle=1;'); 1435 callout1.vertex = true; 1436 var callout2 = new mxCell('Label', new mxGeometry(175, 80, 130, 110), 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=NW;callStyle=line;fontSize=17;fontColor=#F2931E;align=left;verticalAlign=top;strokeColor=#666666;fillColor=#4D9900;flipV=0;fontStyle=1;'); 1437 callout2.vertex = true; 1438 var callout3 = new mxCell('Label', new mxGeometry(175, 160, 130, 50), 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=NW;callStyle=line;fontSize=17;fontColor=#AE4132;align=left;verticalAlign=top;strokeColor=#666666;fillColor=#4D9900;flipV=0;fontStyle=1;'); 1439 callout3.vertex = true; 1440 var callout4 = new mxCell('Label', new mxGeometry(175, 230, 130, 50), 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=SW;callStyle=line;fontSize=17;fontColor=#23445D;align=left;verticalAlign=bottom;strokeColor=#666666;fillColor=#4D9900;flipV=0;fontStyle=1;'); 1441 callout4.vertex = true; 1442 var callout5 = new mxCell('Label', new mxGeometry(175, 250, 130, 120), 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=SW;callStyle=line;fontSize=17;fontColor=#12AAB5;align=left;verticalAlign=bottom;strokeColor=#666666;fillColor=#4D9900;flipV=0;fontStyle=1;'); 1443 callout5.vertex = true; 1444 1445 var text1 = new mxCell( 1446 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1447 new mxGeometry(0, 30, 240, 50), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=12;align=right;html=1;'); 1448 text1.vertex = true; 1449 var text2 = new mxCell( 1450 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1451 new mxGeometry(0, 110, 240, 50), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=12;align=right;html=1;'); 1452 text2.vertex = true; 1453 var text3 = new mxCell( 1454 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1455 new mxGeometry(0, 190, 240, 50), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=12;align=right;html=1;'); 1456 text3.vertex = true; 1457 var text4 = new mxCell( 1458 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1459 new mxGeometry(0, 290, 240, 50), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=12;align=right;html=1;'); 1460 text4.vertex = true; 1461 var text5 = new mxCell( 1462 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1463 new mxGeometry(0, 380, 240, 50), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=12;align=right;html=1;'); 1464 text5.vertex = true; 1465 1466 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1, callout1, callout2, callout3, callout4, callout5, text1, text2, text3, text4, text5], 415, 430, 'Cylinder Graph'); 1467 }), 1468 1469 this.addEntry(dt + 'swirl', function() 1470 { 1471 var part1 = new mxCell('', new mxGeometry(0, 0, 300, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.uTurnArrow;dy=22;arrowHead=70;dx2=35;strokeColor=#ffffff;fillColor=#10739E;fontSize=12;fontColor=#3333FF;flipH=1;flipV=1;strokeWidth=4;'); 1472 part1.vertex = true; 1473 var part2 = new mxCell('', new mxGeometry(0, 79, 230, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.uTurnArrow;dy=22;arrowHead=70;dx2=35;strokeColor=#ffffff;fillColor=#F2931E;fontSize=12;fontColor=#3333FF;flipV=1;strokeWidth=4;'); 1474 part2.vertex = true; 1475 var part3 = new mxCell('', new mxGeometry(70, 158, 230, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.uTurnArrow;dy=22;arrowHead=70;dx2=35;strokeColor=#ffffff;fillColor=#AE4132;fontSize=12;fontColor=#3333FF;flipH=1;flipV=1;strokeWidth=4;'); 1476 part3.vertex = true; 1477 var part4 = new mxCell('', new mxGeometry(0, 237, 230, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.uTurnArrow;dy=22;arrowHead=70;dx2=35;strokeColor=#ffffff;fillColor=#23445D;fontSize=12;fontColor=#3333FF;flipV=1;strokeWidth=4;'); 1478 part4.vertex = true; 1479 var part5 = new mxCell('', new mxGeometry(70, 316, 230, 140), 'html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.uTurnArrow;dy=22;arrowHead=70;dx2=35;strokeColor=#ffffff;fillColor=#12AAB5;fontSize=12;fontColor=#3333FF;flipH=1;flipV=1;strokeWidth=4;'); 1480 part5.vertex = true; 1481 1482 var text1 = new mxCell( 1483 '<b style="font-size: 7px">LABEL</b><br style="font-size: 7px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1484 new mxGeometry(50, 0, 150, 40), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=7;fontColor=#FFFFFF;align=left;html=1;spacingLeft=5;'); 1485 text1.vertex = true; 1486 var text2 = new mxCell( 1487 '<b style="font-size: 7px">LABEL</b><br style="font-size: 7px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1488 new mxGeometry(50, 79, 150, 40), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=7;fontColor=#FFFFFF;align=left;html=1;spacingLeft=5;'); 1489 text2.vertex = true; 1490 var text3 = new mxCell( 1491 '<b style="font-size: 7px">LABEL</b><br style="font-size: 7px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1492 new mxGeometry(100, 158, 150, 40), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=7;fontColor=#FFFFFF;align=left;html=1;spacingLeft=5;'); 1493 text3.vertex = true; 1494 var text4 = new mxCell( 1495 '<b style="font-size: 7px">LABEL</b><br style="font-size: 7px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1496 new mxGeometry(50, 237, 150, 40), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=7;fontColor=#FFFFFF;align=left;html=1;spacingLeft=5;'); 1497 text4.vertex = true; 1498 var text5 = new mxCell( 1499 '<b style="font-size: 7px">LABEL</b><br style="font-size: 7px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 1500 new mxGeometry(100, 316, 150, 40), 'rounded=0;whiteSpace=wrap;shadow=0;strokeColor=none;strokeWidth=6;fillColor=none;fontSize=7;fontColor=#FFFFFF;align=left;html=1;spacingLeft=5;'); 1501 text5.vertex = true; 1502 1503 return sb.createVertexTemplateFromCells([part5, part4, part3, part2, part1, text1, text2, text3, text4, text5], 300, 456, 'Swirl'); 1504 }), 1505 1506 this.addEntry(dt + 'swirl', function() 1507 { 1508 var part1 = new mxCell('Label', new mxGeometry(60, 0, 120, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#10739E;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipV=1;rounded=0;'); 1509 part1.vertex = true; 1510 var part2 = new mxCell('Label', new mxGeometry(30, 15, 150, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#F2931E;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipV=1;rounded=0;'); 1511 part2.vertex = true; 1512 var part3 = new mxCell('Label', new mxGeometry(0, 30, 180, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#AE4132;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipV=1;rounded=0;'); 1513 part3.vertex = true; 1514 1515 var arc1 = new mxCell('', new mxGeometry(114, 0, 130, 130), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0;endAngle=0.5;arcWidth=0.23;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1516 arc1.vertex = true; 1517 var arc2 = new mxCell('', new mxGeometry(129, 15, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#F2931E;strokeColor=none;startAngle=0;endAngle=0.5;arcWidth=0.3;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1518 arc2.vertex = true; 1519 var arc3 = new mxCell('', new mxGeometry(144, 30, 70, 70), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#AE4132;strokeColor=none;startAngle=0;endAngle=0.5;arcWidth=0.43;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1520 arc3.vertex = true; 1521 1522 var arc4 = new mxCell('', new mxGeometry(115, 85, 130, 130), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#AE4132;strokeColor=none;startAngle=0.5;endAngle=0.00001;arcWidth=0.23;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1523 arc4.vertex = true; 1524 var arc5 = new mxCell('', new mxGeometry(130, 100, 100, 100), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#F2931E;strokeColor=none;startAngle=0.5;endAngle=0.00001;arcWidth=0.3;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1525 arc5.vertex = true; 1526 var arc6 = new mxCell('', new mxGeometry(145, 115, 70, 70), 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;fillColor=#10739E;strokeColor=none;startAngle=0.5;endAngle=0.00001;arcWidth=0.43;shadow=0;fontSize=7;fontColor=#FFFFFF;align=left;'); 1527 arc6.vertex = true; 1528 1529 var part4 = new mxCell('', new mxGeometry(179, 170, 181, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#10739E;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipH=1;rounded=0;'); 1530 part4.vertex = true; 1531 var part5 = new mxCell('', new mxGeometry(179, 185, 151, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#F2931E;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipH=1;rounded=0;'); 1532 part5.vertex = true; 1533 var part6 = new mxCell('', new mxGeometry(179, 200, 121, 15), 'shape=manualInput;whiteSpace=wrap;html=1;shadow=0;fillColor=#AE4132;strokeColor=none;fontSize=12;fontColor=#FFFFFF;align=center;direction=north;flipH=1;rounded=0;'); 1534 part6.vertex = true; 1535 1536 var marker1 = new mxCell('1', new mxGeometry(0, 60, 30, 30), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=none;fillColor=#10739E;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 1537 marker1.vertex = true; 1538 var marker2 = new mxCell('2', new mxGeometry(40, 60, 30, 30), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=none;fillColor=#F2931E;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 1539 marker2.vertex = true; 1540 var marker3 = new mxCell('3', new mxGeometry(80, 60, 30, 30), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;strokeColor=none;fillColor=#AE4132;fontSize=17;fontColor=#FFFFFF;align=center;fontStyle=1;rounded=0;'); 1541 marker3.vertex = true; 1542 1543 return sb.createVertexTemplateFromCells([part1, part2, part3, arc1, arc2, arc3, arc4, arc5, arc6, part4, part5, part6, marker1, marker2, marker3], 360, 215, 'Swirl'); 1544 }), 1545 1546 this.addEntry(dt + 'callout', function() 1547 { 1548 var edge1 = new mxCell('Label', new mxGeometry(0, 0, 0, 0), 'endArrow=oval;html=1;fontSize=16;fontColor=#10739E;endFill=0;endSize=24;strokeWidth=5;labelBackgroundColor=none;verticalAlign=top;fontStyle=1;strokeColor=#10739E;'); 1549 edge1.geometry.setTerminalPoint(new mxPoint(0, 100), true); 1550 edge1.geometry.setTerminalPoint(new mxPoint(100, 0), false); 1551 edge1.geometry.x=-1; 1552 edge1.geometry.relative = true; 1553 edge1.edge = true; 1554 1555 return sb.createVertexTemplateFromCells([edge1], 100, 100, 'Callout'); 1556 }), 1557 1558 this.addEntry(dt + 'roadmap vertical', function() 1559 { 1560 var startPoint = new mxCell('', new mxGeometry(234, 0, 12, 12), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;fillColor=none;strokeColor=#333333;fontSize=16;align=center;strokeWidth=2;'); 1561 startPoint.vertex = true; 1562 var endPoint = new mxCell('', new mxGeometry(234, 498, 12, 12), 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;shadow=0;fillColor=none;strokeColor=#333333;fontSize=16;align=center;strokeWidth=2;'); 1563 endPoint.vertex = true; 1564 1565 var edge1 = new mxCell('', new mxGeometry(0, 0, 0, 0), 'endArrow=none;html=1;strokeWidth=3;strokeColor=#CCCCCC;labelBackgroundColor=none;fontSize=16'); 1566 edge1.geometry.relative = true; 1567 edge1.edge = true; 1568 startPoint.insertEdge(edge1, true); 1569 endPoint.insertEdge(edge1, false); 1570 1571 var item1 = new mxCell('', new mxGeometry(0, 30, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#10739E;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;shadow=0;direction=north;'); 1572 item1.vertex = true; 1573 var item2 = new mxCell('', new mxGeometry(234, 100, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#F2931E;labelPosition=center;align=center;fontColor=#F2931E;fontStyle=1;fontSize=24;shadow=0;direction=north;flipH=1;'); 1574 item2.vertex = true; 1575 var item3 = new mxCell('', new mxGeometry(0, 170, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#AE4132;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;shadow=0;direction=north;'); 1576 item3.vertex = true; 1577 var item4 = new mxCell('', new mxGeometry(234, 240, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#23445D;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;shadow=0;direction=north;flipH=1;'); 1578 item4.vertex = true; 1579 var item5 = new mxCell('', new mxGeometry(0, 310, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#12AAB5;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;shadow=0;direction=north;'); 1580 item5.vertex = true; 1581 var item6 = new mxCell('', new mxGeometry(234, 380, 246, 60), 'verticalLabelPosition=middle;verticalAlign=middle;html=1;shape=mxgraph.infographic.circularCallout2;dy=15;strokeColor=#56517E;labelPosition=center;align=center;fontColor=#10739E;fontStyle=1;fontSize=24;shadow=0;direction=north;flipH=1;'); 1582 item6.vertex = true; 1583 1584 var label1 = new mxCell('Label', new mxGeometry(70, 20, 160, 30), 'fillColor=#10739E;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1585 label1.vertex = true; 1586 var label2 = new mxCell('Label', new mxGeometry(250, 85, 160, 30), 'fillColor=#F2931E;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1587 label2.vertex = true; 1588 var label3 = new mxCell('Label', new mxGeometry(70, 160, 160, 30), 'fillColor=#AE4132;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1589 label3.vertex = true; 1590 var label4 = new mxCell('Label', new mxGeometry(250, 225, 160, 30), 'fillColor=#23445D;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1591 label4.vertex = true; 1592 var label5 = new mxCell('Label', new mxGeometry(70, 300, 160, 30), 'fillColor=#12AAB5;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1593 label5.vertex = true; 1594 var label6 = new mxCell('Label', new mxGeometry(250, 365, 160, 30), 'fillColor=#56517E;strokecolor=none;rounded=1;fontColor=#FFFFFF;strokeColor=none;fontStyle=1;fontSize=14;'); 1595 label6.vertex = true; 1596 1597 var label7 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 1598 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1599 new mxGeometry(70, 70, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1600 label7.vertex = true; 1601 var label8 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 1602 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1603 new mxGeometry(250, 140, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1604 label8.vertex = true; 1605 var label9 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 1606 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1607 new mxGeometry(70, 210, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1608 label9.vertex = true; 1609 var label10 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 1610 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1611 new mxGeometry(250, 280, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1612 label10.vertex = true; 1613 var label11 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 1614 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1615 new mxGeometry(70, 350, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1616 label11.vertex = true; 1617 var label12 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#56517E"><b>Label</b></font><br><br><font size="1">' + 1618 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1619 new mxGeometry(250, 420, 160, 70), 'rounded=1;strokeColor=none;fillColor=#EEEEEE;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1620 label12.vertex = true; 1621 return sb.createVertexTemplateFromCells( 1622 [edge1, startPoint, endPoint, item1, item2, item3, item4, item5, item6, label1, label2, label3, label4, label5, label6, label7, label8, label9, label10, label11, label12], 1623 480, 510, 'Roadmap (vertical)'); 1624 }), 1625 1626 this.addEntry(dt + 'roadmap horizontal', function() 1627 { 1628 var part1 = new mxCell('', new mxGeometry(0, 90, 840, 30), 'fillColor=#dddddd;rounded=0;strokeColor=none;'); 1629 part1.vertex = true; 1630 var part2 = new mxCell('Label', new mxGeometry(40, 80, 120, 50), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 1631 part2.vertex = true; 1632 var part3 = new mxCell('Label', new mxGeometry(200, 80, 120, 50), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 1633 part3.vertex = true; 1634 var part4 = new mxCell('Label', new mxGeometry(360, 80, 120, 50), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 1635 part4.vertex = true; 1636 var part5 = new mxCell('Label', new mxGeometry(520, 80, 120, 50), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 1637 part5.vertex = true; 1638 var part6 = new mxCell('Label', new mxGeometry(680, 80, 120, 50), 'shape=mxgraph.infographic.ribbonSimple;notch1=0;notch2=10;notch=0;html=1;fillColor=#12AAB5;strokeColor=none;shadow=0;fontSize=17;fontColor=#FFFFFF;align=left;spacingLeft=10;fontStyle=1;'); 1639 part6.vertex = true; 1640 1641 var label1 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#10739E"><b>Label</b></font><br><br><font size="1">' + 1642 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1643 new mxGeometry(0, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1644 label1.vertex = true; 1645 1646 var label2 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#F2931E"><b>Label</b></font><br><br><font size="1">' + 1647 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1648 new mxGeometry(160, 140, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1649 label2.vertex = true; 1650 1651 var label3 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#AE4132"><b>Label</b></font><br><br><font size="1">' + 1652 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1653 new mxGeometry(320, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1654 label3.vertex = true; 1655 1656 var label4 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#23445D"><b>Label</b></font><br><br><font size="1">' + 1657 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1658 new mxGeometry(480, 140, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1659 label4.vertex = true; 1660 1661 var label5 = new mxCell('<font style="font-size: 10px"><font style="font-size: 12px" color="#12AAB5"><b>Label</b></font><br><br><font size="1">' + 1662 'Lorem ipsum dolor sit amet, consectetur adipisicing elit</font></font>', 1663 new mxGeometry(640, 0, 200, 70), 'rounded=1;strokeColor=none;fillColor=#DDDDDD;align=center;arcSize=12;verticalAlign=top;whiteSpace=wrap;html=1;fontSize=12;'); 1664 label5.vertex = true; 1665 1666 return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, label1, label2, label3, label4, label5], 840, 210, 'Roadmap (horizontal)'); 1667 }), 1668 1669 this.addEntry(dt + 'flower', function() 1670 { 1671 var part1 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(0, 0, 150, 150), 'shape=mxgraph.basic.diag_round_rect;dx=37;flipH=1;html=1;fillColor=#10739E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;strokeWidth=8;'); 1672 part1.vertex = true; 1673 var part2 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(160, 0, 150, 150), 'shape=mxgraph.basic.diag_round_rect;dx=37;html=1;fillColor=#F2931E;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;strokeWidth=8;'); 1674 part2.vertex = true; 1675 var part3 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(0, 160, 150, 150), 'shape=mxgraph.basic.diag_round_rect;dx=37;flipH=1;flipV=1;html=1;fillColor=#AE4132;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;strokeWidth=8;'); 1676 part3.vertex = true; 1677 var part4 = new mxCell('Lorem ipsum dolor sit amet, consectetur adipisicing elit', new mxGeometry(160, 160, 150, 150), 'shape=mxgraph.basic.diag_round_rect;dx=37;flipV=1;html=1;fillColor=#23445D;strokeColor=none;shadow=0;fontSize=12;fontColor=#FFFFFF;align=center;fontStyle=0;whiteSpace=wrap;strokeWidth=8;'); 1678 part4.vertex = true; 1679 1680 return sb.createVertexTemplateFromCells([part1, part2, part3, part4], 310, 310, 'Flower'); 1681 }) 1682 ]); 1683 1684 this.setCurrentSearchEntryLibrary(); 1685 }; 1686 1687})(); 1688