Vizualizare sursă pentru „Format:Chart/doc”

{{Lua|Module:TreeChart}}
<noinclude>{{documentation subpage}}</noinclude>
==Utilizare==
Acest format produce un rând dintr-un grafic de gen „arbore genealogic” format din casete și linii de legătură, vag bazate pe o sintaxă în stil [[ASCII art]]. Trebuie utilizat împreună cu {{tl|chart/start}} și {{tl|chart/end}}. Graficul este afișat cu tabele [[HTML]] ce folosesc atribute [[Cascading Style Sheets|CSS]], și pot conține [[wiki markup]] în casete. Această implementare se bazează pe mai vechiul și depășitul format {{tl|family tree}}.

==Exemplu simplu ==
This code:
<pre><nowiki>
{{chart/start}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Bunică|GRP=Bunic}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |MITZA|MOM=Mamă|DAD=Tată|MITZA=[[D-l Goe|Tanti Mița]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| GOE | | EU  | | SORA | | |GOE=Fratele Goe|EU='''Eu!'''|SORA=Sora mea}}
{{chart/end}}
</nowiki></pre>

produce:

{{chart/start|summary=Exemplu de arbore genealogic}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Bunică|GRP=Bunic}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |MITZA|MOM=Mamă|DAD=Tată|MITZA=[[D-l Goe|Tanti Mița]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| GOE | | EU  | | SORA | | |GOE=Fratele Goe|EU='''Eu!'''|SORA=Sora mea}}
{{chart/end}}

Acest tabel afișează vizual informația că am un frate Goe și o soră mai mică; mama este căsătorită cu tata; iar părinții tatălui meu sunt Bunica și Bunicul; iar părinții tatălui meu mai au un copil, Tanti Mița.

==Collapsible basic example==
Acest cod utilizează {{tl|chart top}}:
<pre><nowiki>
{{chart top|Exemplu de arbore genealogic}}
{{chart/start|align=center}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Bunică|GRP=Bunic}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |MITZA|MOM=Mamă|DAD=Tată|MITZA=[[D-l Goe|Tanti Mița]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| GOE | | EU  | | SORA | | |GOE=Fratele Goe|EU='''Eu!'''|SORA=Sora mea}}
{{chart/end}}
{{chart bottom}}
</nowiki></pre>

produce:
{{chart top|An example family tree}}
{{chart/start|align=center}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Bunică|GRP=Bunic}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |MITZA|MOM=Mamă|DAD=Tată|MITZA=[[D-l Goe|Tanti Mița]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| GOE | | EU  | | SORA | | |GOE=Fratele Goe|EU='''Eu!'''|SORA=Sora mea}}
{{chart/end}}
{{chart bottom}}

Acest tabel afișează vizual informația că am un frate Goe și o soră mai mică; mama este căsătorită cu tata; iar părinții tatălui meu sunt Bunica și Bunicul; iar părinții tatălui meu mai au un copil, Tanti Mița.


==Parametri==
Formatul acceptă oricâți parametri fără nume, fiecare parametru specificând o '''dală''' sau o '''casetă'''.
* '''Casetele''' pot conține [[wiki markup]] arbitrar. Conținutul fiecărei casete este specificat cu ajutorul unor parametri adiționali adăugați apelului la format. Fiecare casetă are '''lățime de trei dale''' și în mod normal are un contur negru de doi pixeli lățime. Casetele pot avea orice nume care e un nume valabil de parametru, dar trebuie să aibă minim două caractere alfabetice.
* '''Dalele''' sunt simboluri ce trasează linii, utilizate pentru a lega între ele casetele. Ele constau din diferite stiluri de linii orizontale și verticale, împreună cu colțuri și intersecții. Dalele se specifică folosind numele lor de unul sau două caractere: pentru cele mai comune dale, acel caracter este mai mult sau mai puțin aproximativ similar aspectului dalei. Un caz special de dală este '''dala vidă''', specificată printr-un singur caracter spațiu. Dalele disponibile sunt afișate mai jos.

{| style="float: left; margin-left: 1em;"
|+ '''Linii continue:'''
|-
| {{big|<code>!</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|!}}{{chart/end}} || &nbsp;
| {{big|<code>,</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|,}}{{chart/end}} || &nbsp;
| {{big|<code>v</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|v}}{{chart/end}} || &nbsp;
| {{big|<code>.</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|.}}{{chart/end}} || &nbsp;
|-
| {{big|<code>-</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|-}}{{chart/end}} || &nbsp;
| {{big|<code>)</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|)}}{{chart/end}} || &nbsp;
| {{big|<code>+</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|+}}{{chart/end}} || &nbsp;
| {{big|<code>(</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|(}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>`</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|`}}{{chart/end}} || &nbsp;
| {{big|<code>^</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|^}}{{chart/end}} || &nbsp;
| {{big|<code>'</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|'}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linii întrerupte:'''
|-
| {{big|<code>:</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|:}}{{chart/end}} || &nbsp;
| {{big|<code>F</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|F}}{{chart/end}} || &nbsp;
| {{big|<code>V</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|V}}{{chart/end}} || &nbsp;
| {{big|<code>7</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|7}}{{chart/end}} || &nbsp;
|-
| {{big|<code>~</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|~}}{{chart/end}} || &nbsp;
| {{big|<code>D</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|D}}{{chart/end}} || &nbsp;
| {{big|<code>%</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|%}}{{chart/end}} || &nbsp;
| {{big|<code>C</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|C}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>L</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|L}}{{chart/end}} || &nbsp;
| {{big|<code>A</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|A}}{{chart/end}} || &nbsp;
| {{big|<code>J</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|J}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linii punctate:'''
|-
| {{big|<code>Q</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Q}}{{chart/end}} || &nbsp;
| {{big|<code>S</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|S}}{{chart/end}} || &nbsp;
| {{big|<code>M</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|M}}{{chart/end}} || &nbsp;
| {{big|<code>T</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|T}}{{chart/end}} || &nbsp;
|-
| {{big|<code>P</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|P}}{{chart/end}} || &nbsp;
| {{big|<code>H</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|H}}{{chart/end}} || &nbsp;
| {{big|<code>R</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|R}}{{chart/end}} || &nbsp;
| {{big|<code>G</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|G}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>Y</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Y}}{{chart/end}} || &nbsp;
| {{big|<code>W</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|W}}{{chart/end}} || &nbsp;
| {{big|<code>Z</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Z}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Mixt:'''
|-
| || ||
| {{big|<code>j</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|j}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>y</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|y}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>r</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|r}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>m</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|m}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>r2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|r2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>m2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|m2}}{{chart/end}} || &nbsp;
| || ||
|-
| {{big|<code>d</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|d}}{{chart/end}} || &nbsp;
| {{big|<code>*</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|*}}{{chart/end}} || &nbsp;
| {{big|<code>c</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|c}}{{chart/end}} || &nbsp;
| {{big|<code>f</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|f}}{{chart/end}} || &nbsp;
| {{big|<code>t</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|t}}{{chart/end}} || &nbsp;
| {{big|<code>e</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|e}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| {{big|<code>k</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|k}}{{chart/end}} || &nbsp;
| {{big|<code>a</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|a}}{{chart/end}} || &nbsp;
| {{big|<code>l</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|l}}{{chart/end}} || &nbsp;
| {{big|<code>o</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|o}}{{chart/end}} || &nbsp;
| {{big|<code>b</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|b}}{{chart/end}} || &nbsp;
| {{big|<code>p</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|p}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| {{big|<code>k2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|k2}}{{chart/end}} || &nbsp;
| {{big|<code>a2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|a2}}{{chart/end}} || &nbsp;
| {{big|<code>l2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|l2}}{{chart/end}} || &nbsp;
| {{big|<code>o2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|o2}}{{chart/end}} || &nbsp;
| {{big|<code>b2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|b2}}{{chart/end}} || &nbsp;
| {{big|<code>p2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|p2}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>i</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|i}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>h</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|h}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>q</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|q}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>n</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|n}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>q2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|q2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>n2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|n2}}{{chart/end}} || &nbsp;
| || ||
|}
{{clear}}
== Atribute de stil ==
Aspectul casetelor dintr-un rând poate fi controlat cu ajutorul următorilor parametri opționali:
* ''border'' specifică lățimea conturului în pixeli,
* ''boxstyle'' poate fi utilizat pentru a adăuga declarații [[Cascading Style Sheets|CSS]] arbitrare direct pe casetă. De exemplu:

<pre><nowiki>
{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}
</nowiki></pre>

produce:

{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}

Atributele de stil pot fi specificate și pentru casete individuale în cadrul fiecărui rând după cum se arată în exemplul următor:

<pre><nowiki>
{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}
</nowiki></pre>

care produce:

{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}

{{Warnsign|'''Notă:'''}} Când specificați atribute de stil pentru casete individuale cu nume, asigurați-vă că numele sunt aliniate la '''stânga''' zonei rezervate pentru ele în apelul formatului (ca în "<code>|RED&nbsp;&nbsp;|</code>" în loc de "<code>|&nbsp;RED&nbsp;|</code>" în exemplul de mai sus), altfel formatul va căuta un parametru de stil cu spații în nume.

Formatul {{tl|chart/start}} acceptă și un parametru ''style'' ce poate fi folosit pentru a seta stiluri CSS pe toată diagrama, și un parametru opțional ''align'' pentru a stabili alinierea graficului.