Skip to content

Commit 79a92eb

Browse files
ramiyramiy
authored
Merge pull request #11 from ramiy/master
Version 0.9.0
2 parents f33de9f + 4e4c487 commit 79a92eb

13 files changed

+513
-396
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
![GitHub Version](https://img.shields.io/github/v/release/ChartsCSS/charts.css?style=for-the-badge) ![Minified Size](https://img.shields.io/bundlephobia/min/charts.css?style=for-the-badge) ![License](https://img.shields.io/github/license/ChartsCSS/charts.css?style=for-the-badge)
44

5-
**Charts.css is an MIT-licensed open source CSS framework for data visualization.**
5+
**Charts.css is an open source CSS framework for data visualization.**
66

7-
Visualization help end-users to understand data. **Charts.css** help frontend developers to turn data into beautiful charts and graphs using simple **CSS classes**.
7+
Visualization help end-users understand data. **Charts.css** help frontend developers turn data into beautiful charts and graphs using simple **CSS classes**.
88

99
## Documentation
1010

‎dist/charts.css

+109-173
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.css.map

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "charts.css",
3-
"version": "0.8.2",
3+
"version": "0.9.0",
44
"description": "Open source CSS framework for data visualization.",
55
"author": "Rami Yushuvaev",
66
"homepage": "https://ChartsCSS.org/",

‎src/charts.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Charts.css v0.8.2 (https://ChartsCSS.org/)
2+
* Charts.css v0.9.0 (https://ChartsCSS.org/)
33
* Copyright 2020 Rami Yushuvaev
44
* Licensed under MIT
55
*/
@@ -13,6 +13,7 @@
1313
@import "components/heading";
1414
@import "components/colors";
1515
@import "components/data";
16+
@import "components/labels";
1617
@import "components/axes";
1718
@import "components/legend";
1819
@import "components/tooltips";

‎src/charts/_area.scss

+24-37
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
position: absolute;
3232
right: 0;
3333
left: 0;
34-
justify-content: var(--labels-align, center);
3534
}
3635

3736
td {
@@ -67,38 +66,6 @@
6766
}
6867
}
6968

70-
// Labels
71-
&:not(.show-labels) {
72-
--labels-size: 0;
73-
74-
tbody tr th {
75-
display: none;
76-
}
77-
}
78-
&.show-labels {
79-
--labels-size: 1.5rem;
80-
81-
tbody tr th {
82-
display: flex;
83-
align-items: center;
84-
}
85-
}
86-
&.labels-align-start {
87-
tbody tr th {
88-
justify-content: var(--labels-align, flex-start);
89-
}
90-
}
91-
&.labels-align-end {
92-
tbody tr th {
93-
justify-content: var(--labels-align, flex-end);
94-
}
95-
}
96-
&.labels-align-center {
97-
tbody tr th {
98-
justify-content: var(--labels-align, center);
99-
}
100-
}
101-
10269
// Orientation
10370
&:not(.reverse) {
10471
tbody {
@@ -165,7 +132,12 @@
165132
align-items: flex-end;
166133

167134
&::before {
168-
clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
135+
clip-path: polygon(
136+
0% calc(100% * (1 - var(--start, var(--size)))),
137+
100% calc(100% * (1 - var(--size))),
138+
100% 100%,
139+
0% 100%
140+
);
169141
}
170142

171143
.data {
@@ -183,7 +155,12 @@
183155
align-items: flex-start;
184156

185157
&::before {
186-
clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
158+
clip-path: polygon(
159+
0% calc(100% * (1 - var(--size))),
160+
100% calc(100% * (1 - var(--start, var(--size)))),
161+
100% 100%,
162+
0% 100%
163+
);
187164
}
188165

189166
.data {
@@ -203,7 +180,12 @@
203180
align-items: flex-end;
204181

205182
&::before {
206-
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
183+
clip-path: polygon(
184+
0% 0%,
185+
100% 0%,
186+
100% calc(100% * var(--size)),
187+
0% calc(100% * var(--start, var(--size)))
188+
);
207189
}
208190

209191
.data {
@@ -221,7 +203,12 @@
221203
align-items: flex-start;
222204

223205
&::before {
224-
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
206+
clip-path: polygon(
207+
0% 0%,
208+
100% 0%,
209+
100% calc(100% * var(--start, var(--size))),
210+
0% calc(100% * var(--size))
211+
);
225212
}
226213

227214
.data {

‎src/charts/_bar.scss

-34
Original file line numberDiff line numberDiff line change
@@ -46,38 +46,6 @@
4646
}
4747
}
4848

49-
// Labels
50-
&:not(.show-labels) {
51-
--labels-size: 0;
52-
53-
tbody tr th {
54-
display: none;
55-
}
56-
}
57-
&.show-labels {
58-
--labels-size: 80px;
59-
60-
tbody tr th {
61-
display: flex;
62-
align-items: center;
63-
}
64-
}
65-
&.labels-align-start {
66-
tbody tr th {
67-
align-items: var(--labels-align, flex-start);
68-
}
69-
}
70-
&.labels-align-end {
71-
tbody tr th {
72-
align-items: var(--labels-align, flex-end);
73-
}
74-
}
75-
&.labels-align-center {
76-
tbody tr th {
77-
align-items: var(--labels-align, center);
78-
}
79-
}
80-
8149
// Orientation
8250
&:not(.reverse) {
8351
tbody {
@@ -88,7 +56,6 @@
8856
th {
8957
left: calc(-1 * var(--labels-size) - var(--primary-axis-width));
9058
width: var(--labels-size);
91-
justify-content: var(--labels-align, flex-start);
9259
}
9360

9461
td {
@@ -106,7 +73,6 @@
10673
th {
10774
right: calc(-1 * var(--labels-size) - var(--primary-axis-width));
10875
width: var(--labels-size);
109-
justify-content: var(--labels-align, flex-end);
11076
}
11177

11278
td {

‎src/charts/_column.scss

-33
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
position: absolute;
3232
right: 0;
3333
left: 0;
34-
justify-content: var(--labels-align, center);
3534
}
3635

3736
td {
@@ -47,38 +46,6 @@
4746
}
4847
}
4948

50-
// Labels
51-
&:not(.show-labels) {
52-
--labels-size: 0;
53-
54-
tbody tr th {
55-
display: none;
56-
}
57-
}
58-
&.show-labels {
59-
--labels-size: 1.5rem;
60-
61-
tbody tr th {
62-
display: flex;
63-
align-items: center;
64-
}
65-
}
66-
&.labels-align-start {
67-
tbody tr th {
68-
justify-content: var(--labels-align, flex-start);
69-
}
70-
}
71-
&.labels-align-end {
72-
tbody tr th {
73-
justify-content: var(--labels-align, flex-end);
74-
}
75-
}
76-
&.labels-align-center {
77-
tbody tr th {
78-
justify-content: var(--labels-align, center);
79-
}
80-
}
81-
8249
// Orientation
8350
&:not(.reverse) {
8451
tbody {

‎src/charts/_line.scss

-33
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
position: absolute;
3434
right: 0;
3535
left: 0;
36-
justify-content: var(--labels-align, center);
3736
}
3837

3938
td {
@@ -69,38 +68,6 @@
6968
}
7069
}
7170

72-
// Labels
73-
&:not(.show-labels) {
74-
--labels-size: 0;
75-
76-
tbody tr th {
77-
display: none;
78-
}
79-
}
80-
&.show-labels {
81-
--labels-size: 1.5rem;
82-
83-
tbody tr th {
84-
display: flex;
85-
align-items: center;
86-
}
87-
}
88-
&.labels-align-start {
89-
tbody tr th {
90-
justify-content: var(--labels-align, flex-start);
91-
}
92-
}
93-
&.labels-align-end {
94-
tbody tr th {
95-
justify-content: var(--labels-align, flex-end);
96-
}
97-
}
98-
&.labels-align-center {
99-
tbody tr th {
100-
justify-content: var(--labels-align, center);
101-
}
102-
}
103-
10471
// Orientation
10572
&:not(.reverse) {
10673
tbody {

‎src/components/_labels.scss

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/*
2+
* Chart labels
3+
*/
4+
.charts-css {
5+
6+
&.bar {
7+
8+
&:not(.show-labels) {
9+
--labels-size: 0;
10+
11+
tbody tr th {
12+
display: none;
13+
}
14+
}
15+
&.show-labels {
16+
--labels-size: 80px;
17+
18+
tbody tr th {
19+
display: flex;
20+
justify-content: var(--labels-align, center);
21+
align-items: center;
22+
flex-direction: column;
23+
}
24+
25+
tr.hide-label th,
26+
th.hide-label {
27+
display: none;
28+
}
29+
}
30+
&.labels-align-start {
31+
tbody tr th {
32+
align-items: var(--labels-align, flex-start);
33+
}
34+
}
35+
&.labels-align-end {
36+
tbody tr th {
37+
align-items: var(--labels-align, flex-end);
38+
}
39+
}
40+
&.labels-align-center {
41+
tbody tr th {
42+
align-items: var(--labels-align, center);
43+
}
44+
}
45+
46+
}
47+
48+
&.column,
49+
&.area,
50+
&.line {
51+
52+
&:not(.show-labels) {
53+
--labels-size: 0;
54+
55+
tbody tr th {
56+
display: none;
57+
}
58+
}
59+
&.show-labels {
60+
--labels-size: 1.5rem;
61+
62+
tbody tr th {
63+
display: flex;
64+
justify-content: var(--labels-align, center);
65+
align-items: center;
66+
flex-direction: column;
67+
}
68+
69+
tr.hide-label th,
70+
th.hide-label {
71+
display: none;
72+
}
73+
}
74+
&.labels-align-start {
75+
tbody tr th {
76+
justify-content: var(--labels-align, flex-start);
77+
}
78+
}
79+
&.labels-align-end {
80+
tbody tr th {
81+
justify-content: var(--labels-align, flex-end);
82+
}
83+
}
84+
&.labels-align-center {
85+
tbody tr th {
86+
justify-content: var(--labels-align, center);
87+
}
88+
}
89+
90+
}
91+
92+
}

0 commit comments

Comments
 (0)