|
23 | 23 | </head>
|
24 | 24 | <body>
|
25 | 25 | <div class="vertical-section-container centered">
|
26 |
| - <div> |
27 | 26 | <h4>Normal</h4>
|
28 |
| - <div class="horizontal-section"> |
29 |
| - <demo-snippet> |
30 |
| - <template> |
31 |
| - <svg-piechart data="[10,50,20,10]"></svg-piechart> |
32 |
| - </template> |
33 |
| - </demo-snippet> |
34 |
| - </div> |
35 |
| - </div> |
36 |
| - <div> |
| 27 | + <demo-snippet class="centered-demo"> |
| 28 | + <template> |
| 29 | + <svg-piechart data="[10,50,20,10]"></svg-piechart> |
| 30 | + </template> |
| 31 | + </demo-snippet> |
37 | 32 | <h4>Bigger (<code>size</code> is <code>250</code>)</h4>
|
38 |
| - <div class="horizontal-section"> |
39 |
| - <demo-snippet> |
40 |
| - <template> |
41 |
| - <svg-piechart size="250" data="[10,50,20,10]"></svg-piechart> |
42 |
| - </template> |
43 |
| - </demo-snippet> |
44 |
| - </div> |
45 |
| - </div> |
46 |
| - <div> |
| 33 | + <demo-snippet class="centered-demo"> |
| 34 | + <template> |
| 35 | + <svg-piechart size="250" data="[10,50,20,10]"></svg-piechart> |
| 36 | + </template> |
| 37 | + </demo-snippet> |
47 | 38 | <h4>Custom colors</h4>
|
48 |
| - <div class="horizontal-section"> |
49 |
| - <demo-snippet> |
50 |
| - <template> |
51 |
| - <svg-piechart |
52 |
| - colors='[ |
53 |
| - "rgba(255, 0, 0, .1)", |
54 |
| - "rgba(255, 0, 0, .3)", |
55 |
| - "rgba(255, 0, 0, .5)", |
56 |
| - "rgba(255, 0, 0, .7)", |
57 |
| - "rgba(255, 0, 0, .9)"]' |
58 |
| - data="[1,1,1,1,1]"> |
| 39 | + <demo-snippet class="centered-demo"> |
| 40 | + <template> |
| 41 | + <svg-piechart data="[1,1,1,1,1]" |
| 42 | + colors='["rgba(255, 0, 0, .1)", |
| 43 | + "rgba(255, 0, 0, .3)", |
| 44 | + "rgba(255, 0, 0, .5)", |
| 45 | + "rgba(255, 0, 0, .7)", |
| 46 | + "rgba(255, 0, 0, .9)"]'> |
59 | 47 | </svg-piechart>
|
60 |
| - </template> |
61 |
| - </demo-snippet> |
62 |
| - </div> |
63 |
| - </div> |
64 |
| - <div> |
| 48 | + </template> |
| 49 | + </demo-snippet> |
65 | 50 | <h4>Smallest default color palette (up to 4 different colors)</h4>
|
66 |
| - <div class="horizontal-section"> |
67 |
| - <demo-snippet> |
68 |
| - <template> |
69 |
| - <svg-piechart data="[1,1,1,1]"></svg-piechart> |
70 |
| - </template> |
71 |
| - </demo-snippet> |
72 |
| - </div> |
73 |
| - </div> |
74 |
| - <div> |
| 51 | + <demo-snippet class="centered-demo"> |
| 52 | + <template> |
| 53 | + <svg-piechart data="[1,1,1,1]"></svg-piechart> |
| 54 | + </template> |
| 55 | + </demo-snippet> |
75 | 56 | <h4>Mid-size default color palette (up to 8 different colors)</h4>
|
76 |
| - <div class="horizontal-section"> |
77 |
| - <demo-snippet> |
78 |
| - <template> |
79 |
| - <svg-piechart data="[1,1,1,1,1,1,1,1]"></svg-piechart> |
80 |
| - </template> |
81 |
| - </demo-snippet> |
82 |
| - </div> |
83 |
| - </div> |
84 |
| - <div> |
| 57 | + <demo-snippet class="centered-demo"> |
| 58 | + <template> |
| 59 | + <svg-piechart data="[1,1,1,1,1,1,1,1]"></svg-piechart> |
| 60 | + </template> |
| 61 | + </demo-snippet> |
85 | 62 | <h4>Biggest default color palette (up to 16 different colors)</h4>
|
86 |
| - <div class="horizontal-section"> |
87 |
| - <demo-snippet> |
88 |
| - <template> |
89 |
| - <svg-piechart data="[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"></svg-piechart> |
90 |
| - </template> |
91 |
| - </demo-snippet> |
92 |
| - </div> |
93 |
| - </div> |
| 63 | + <demo-snippet class="centered-demo"> |
| 64 | + <template> |
| 65 | + <svg-piechart data="[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"></svg-piechart> |
| 66 | + </template> |
| 67 | + </demo-snippet> |
94 | 68 | </div>
|
95 |
| - |
96 | 69 | </body>
|
97 | 70 | </html>
|
0 commit comments