Skip to content

Commit 70b49dd

Browse files
ramiyramiy
committed
New Pages: Supported Features & Cheat Sheet
1 parent 8ce375c commit 70b49dd

File tree

6 files changed

+400
-255
lines changed

6 files changed

+400
-255
lines changed

‎src/.vuepress/config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ module.exports = {
130130
sidebarDepth: -1,
131131
children: [
132132
'/development/design-principles',
133+
'/development/supported-features',
134+
'/development/cheat-sheet',
133135
'/development/roadmap',
134136
]
135137
},

‎src/.vuepress/public/assets/img/charts-css-anatomy-0-9-0.jpg‎

986 KB
Loading

‎src/charts/README.md‎

Lines changed: 1 addition & 254 deletions
Original file line numberDiff line numberDiff line change
@@ -22,257 +22,4 @@ Before using charts, check the development status. If a chart type is already re
2222
| [Radar](./radar/) | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css radar` |
2323
| [Polar](./polar/) | <Badge type="warning" vertical="middle" text="Under Development" /> | `charts-css polar` |
2424

25-
## Supported Features
26-
27-
The current state of supported feature:
28-
29-
<style>
30-
#features {
31-
width: 100%;
32-
max-width: 100%;
33-
}
34-
#features thead tr th:not(:first-of-type) {
35-
transform: rotate(-90deg);
36-
width: 40px;
37-
height: 80px;
38-
padding: 0;
39-
text-align: start;
40-
}
41-
#features tbody tr th {
42-
text-align: left;
43-
font-weight: normal;
44-
}
45-
</style>
46-
<table id="features">
47-
48-
<thead>
49-
<tr>
50-
<th scope="col"> Feature / Class </th>
51-
<th scope="col"> Bar </th>
52-
<th scope="col"> Column </th>
53-
<th scope="col"> Area </th>
54-
<th scope="col"> Line </th>
55-
<th scope="col"> Radial </th>
56-
<th scope="col"> Pie </th>
57-
<th scope="col"> Radar </th>
58-
<th scope="col"> Polar </th>
59-
</tr>
60-
</thead>
61-
62-
<tbody>
63-
<tr>
64-
<th scope="row"> <code>show-heading</code> </th>
65-
<td> <status-v /> </td>
66-
<td> <status-v /> </td>
67-
<td> <status-v /> </td>
68-
<td> <status-v /> </td>
69-
<td> <status-d /> </td>
70-
<td> <status-d /> </td>
71-
<td> <status-d /> </td>
72-
<td> <status-d /> </td>
73-
</tr>
74-
<tr>
75-
<th scope="row"> [single dataset] </th>
76-
<td> <status-v /> </td>
77-
<td> <status-v /> </td>
78-
<td> <status-v /> </td>
79-
<td> <status-v /> </td>
80-
<td> <status-x /> </td>
81-
<td> <status-d /> </td>
82-
<td> <status-x /> </td>
83-
<td> <status-x /> </td>
84-
</tr>
85-
<tr>
86-
<th scope="row"> <code>multiple</code> </th>
87-
<td> <status-v /> </td>
88-
<td> <status-v /> </td>
89-
<td> <status-v /> </td>
90-
<td> <status-v /> </td>
91-
<td> <status-x /> </td>
92-
<td> <status-x /> </td>
93-
<td> <status-x /> </td>
94-
<td> <status-x /> </td>
95-
</tr>
96-
<tr>
97-
<th scope="row"> <code>hide-data</code> </th>
98-
<td> <status-v /> </td>
99-
<td> <status-v /> </td>
100-
<td> <status-v /> </td>
101-
<td> <status-v /> </td>
102-
<td> <status-d /> </td>
103-
<td> <status-d /> </td>
104-
<td> <status-d /> </td>
105-
<td> <status-d /> </td>
106-
</tr>
107-
<tr>
108-
<th scope="row"> <code>show-data-on-hover</code> </th>
109-
<td> <status-v /> </td>
110-
<td> <status-v /> </td>
111-
<td> <status-v /> </td>
112-
<td> <status-v /> </td>
113-
<td> <status-d /> </td>
114-
<td> <status-d /> </td>
115-
<td> <status-d /> </td>
116-
<td> <status-d /> </td>
117-
</tr>
118-
<tr>
119-
<th scope="row"> <code>reverse</code> </th>
120-
<td> <status-v /> </td>
121-
<td> <status-v /> </td>
122-
<td> <status-v /> </td>
123-
<td> <status-v /> </td>
124-
<td> <status-x /> </td>
125-
<td> <status-x /> </td>
126-
<td> <status-x /> </td>
127-
<td> <status-x /> </td>
128-
</tr>
129-
<tr>
130-
<th scope="row"> <code>show-labels</code> </th>
131-
<td> <status-v /> </td>
132-
<td> <status-v /> </td>
133-
<td> <status-v /> </td>
134-
<td> <status-v /> </td>
135-
<td> <status-x /> </td>
136-
<td> <status-x /> </td>
137-
<td> <status-x /> </td>
138-
<td> <status-x /> </td>
139-
</tr>
140-
<tr>
141-
<th scope="row"> <code>labels-align-start</code> </th>
142-
<td> <status-v /> </td>
143-
<td> <status-v /> </td>
144-
<td> <status-v /> </td>
145-
<td> <status-v /> </td>
146-
<td> <status-x /> </td>
147-
<td> <status-x /> </td>
148-
<td> <status-x /> </td>
149-
<td> <status-x /> </td>
150-
</tr>
151-
<tr>
152-
<th scope="row"> <code>labels-align-center</code> </th>
153-
<td> <status-v /> </td>
154-
<td> <status-v /> </td>
155-
<td> <status-v /> </td>
156-
<td> <status-v /> </td>
157-
<td> <status-x /> </td>
158-
<td> <status-x /> </td>
159-
<td> <status-x /> </td>
160-
<td> <status-x /> </td>
161-
</tr>
162-
<tr>
163-
<th scope="row"> <code>labels-align-end</code> </th>
164-
<td> <status-v /> </td>
165-
<td> <status-v /> </td>
166-
<td> <status-v /> </td>
167-
<td> <status-v /> </td>
168-
<td> <status-x /> </td>
169-
<td> <status-x /> </td>
170-
<td> <status-x /> </td>
171-
<td> <status-x /> </td>
172-
</tr>
173-
<tr>
174-
<th scope="row"> <code>show-primary-axis</code> </th>
175-
<td> <status-v /> </td>
176-
<td> <status-v /> </td>
177-
<td> <status-v /> </td>
178-
<td> <status-v /> </td>
179-
<td> <status-d /> </td>
180-
<td> <status-d /> </td>
181-
<td> <status-d /> </td>
182-
<td> <status-d /> </td>
183-
</tr>
184-
<tr>
185-
<th scope="row"> <code>show-*-secondary-axes</code> </th>
186-
<td> <status-v /> </td>
187-
<td> <status-v /> </td>
188-
<td> <status-v /> </td>
189-
<td> <status-v /> </td>
190-
<td> <status-d /> </td>
191-
<td> <status-d /> </td>
192-
<td> <status-d /> </td>
193-
<td> <status-d /> </td>
194-
</tr>
195-
<tr>
196-
<th scope="row"> <code>show-data-axes</code> </th>
197-
<td> <status-v /> </td>
198-
<td> <status-v /> </td>
199-
<td> <status-v /> </td>
200-
<td> <status-v /> </td>
201-
<td> <status-x /> </td>
202-
<td> <status-x /> </td>
203-
<td> <status-x /> </td>
204-
<td> <status-x /> </td>
205-
</tr>
206-
<tr>
207-
<th scope="row"> <code>data-spacing-*</code> </th>
208-
<td> <status-v /> </td>
209-
<td> <status-v /> </td>
210-
<td> <status-v /> </td>
211-
<td> <status-v /> </td>
212-
<td> <status-x /> </td>
213-
<td> <status-x /> </td>
214-
<td> <status-x /> </td>
215-
<td> <status-x /> </td>
216-
</tr>
217-
<tr>
218-
<th scope="row"> <code>datasets-spacing-*</code> </th>
219-
<td> <status-v /> </td>
220-
<td> <status-v /> </td>
221-
<td> <status-x /> </td>
222-
<td> <status-x /> </td>
223-
<td> <status-x /> </td>
224-
<td> <status-x /> </td>
225-
<td> <status-x /> </td>
226-
<td> <status-x /> </td>
227-
</tr>
228-
<tr>
229-
<th scope="row"> <code>reverse-data</code> </th>
230-
<td> <status-v /> </td>
231-
<td> <status-v /> </td>
232-
<td> <status-v /> </td>
233-
<td> <status-v /> </td>
234-
<td> <status-x /> </td>
235-
<td> <status-d /> </td>
236-
<td> <status-x /> </td>
237-
<td> <status-x /> </td>
238-
</tr>
239-
<tr>
240-
<th scope="row"> <code>reverse-datasets</code> </th>
241-
<td> <status-v /> </td>
242-
<td> <status-v /> </td>
243-
<td> <status-x /> </td>
244-
<td> <status-x /> </td>
245-
<td> <status-x /> </td>
246-
<td> <status-x /> </td>
247-
<td> <status-x /> </td>
248-
<td> <status-x /> </td>
249-
</tr>
250-
<tr>
251-
<th scope="row"> <code>stacked</code> </th>
252-
<td> <status-v /> </td>
253-
<td> <status-v /> </td>
254-
<td> <status-x /> </td>
255-
<td> <status-x /> </td>
256-
<td> <status-x /> </td>
257-
<td> <status-x /> </td>
258-
<td> <status-x /> </td>
259-
<td> <status-x /> </td>
260-
</tr>
261-
<tr>
262-
<th scope="row"> [tooltips] </th>
263-
<td> <status-v /> </td>
264-
<td> <status-v /> </td>
265-
<td> <status-x /> </td>
266-
<td> <status-x /> </td>
267-
<td> <status-x /> </td>
268-
<td> <status-x /> </td>
269-
<td> <status-x /> </td>
270-
<td> <status-x /> </td>
271-
</tr>
272-
</tbody>
273-
274-
</table>
275-
276-
* <status-v /> : Released and working.
277-
* <status-d /> : Currently under development.
278-
* <status-x /> : Not developed yet.
25+
Also see the [supported features](/development/supported-features/) for each chart type.

‎src/development/README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,9 @@ next: ./design-principles
99

1010
If you are a passionate frontend developer looking for a new open source project to contribute to, you are welcome to suggest new ideas and send pull request that improve and extend the framework.
1111

12-
Make sure to read our [design principles](/development/design-principles/) and [roadmap](/development/roadmap/) before sending new pull requests.
12+
## Charts.css Development
13+
14+
* [Design Principles](/development/design-principles/) - framework philosophical guidelines.
15+
* [Supported Features](/development/supported-features/) - current state of supported features.
16+
* [Cheat Sheet](/development/cheat-sheet/) - visual representation of charts.css anatomy.
17+
* [Roadmap](/development/roadmap/) - future development timeline.

‎src/development/cheat-sheet.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
permalink: /development/cheat-sheet/
3+
---
4+
5+
# Cheat Sheet
6+
7+
Visual representation of **charts.css anatomy**.
8+
9+
## Charts.css v0.9.0
10+
11+
<a href="/assets/pdf/charts-css-anatomy-0-9-0.pdf" target="_blank">
12+
<img src="/assets/img/charts-css-anatomy-0-9-0.jpg" title="Charts.css 0.9.0 Anatomy">
13+
</a>

0 commit comments

Comments
 (0)