Skip to content

Commit 5bc5d64

Browse files
ramiyramiy
authored
Merge pull request #2 from ramiy/master
Version 0.3.0
2 parents 39713e1 + b8a9736 commit 5bc5d64

20 files changed

+1227
-823
lines changed

‎dist/charts.css‎

Lines changed: 625 additions & 436 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.css.map‎

Lines changed: 16 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/charts.min.css‎

Lines changed: 1 addition & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "charts.css",
3-
"version": "0.2.0",
4-
"description": "Open source data visualization framework using pure CSS.",
3+
"version": "0.3.0",
4+
"description": "Open source CSS framework for data visualization.",
55
"author": "Rami Yushuvaev",
66
"homepage": "https://ChartsCSS.org/",
77
"license": "MIT",
@@ -33,9 +33,6 @@
3333
"bugs": {
3434
"url": "https://github.com/ChartsCSS/charts.css/issues"
3535
},
36-
"publishConfig": {
37-
"registry": "https://npm.pkg.github.com/"
38-
},
3936
"devDependencies": {
4037
"node-sass": "^4.14.1",
4138
"nodemon": "^2.0.4",

‎src/charts.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
/*!
2-
* charts.css v0.2.0 (https://ChartsCSS.org/)
1+
/*
2+
* Charts.css v0.3.0 (https://ChartsCSS.org/)
33
* Copyright 2020 Rami Yushuvaev
44
* Licensed under MIT
55
*/
66

7-
// Configuration
87
// General
98
@import "general/variables";
109
@import "general/mixins";
@@ -13,6 +12,7 @@
1312

1413
// Components
1514
@import "components/wrapper";
15+
@import "components/colors";
1616
@import "components/legend";
1717
@import "components/tooltips";
1818

@@ -24,6 +24,5 @@
2424

2525
@import "charts/pie";
2626
@import "charts/donut";
27-
@import "charts/radar";
2827
@import "charts/polar";
29-
@import "charts/gauge"; // with a dial
28+
@import "charts/radar";

‎src/charts/_bar.scss‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,12 @@
3232
// Display cells in a column
3333
display: flex;
3434
justify-content: space-around;
35-
flex-direction: column;
3635

3736
padding: 0;
3837
margin: 0;
3938

4039
td {
41-
// Even cell size
42-
flex-grow: 1;
43-
flex-shrink: 1;
44-
flex-basis: 0;
45-
46-
width: 100%;
40+
width: calc( 100% * var( --size, 1 ) );
4741
height: 100%;
4842

4943
padding: 0;
@@ -69,7 +63,7 @@
6963
}
7064

7165
// Labels Position
72-
&:not(.end-labels) {
66+
&:not(.labels-after) {
7367
tbody {
7468
tr {
7569
align-items: flex-start;
@@ -86,7 +80,7 @@
8680
}
8781
}
8882
}
89-
&.end-labels {
83+
&.labels-after {
9084
tbody {
9185
tr {
9286
align-items: flex-end;
@@ -104,28 +98,28 @@
10498
}
10599
}
106100

107-
// Colors
108-
&:not(.multiple) {
109-
@for $i from 1 through $max-items {
110-
tbody tr:nth-of-type( #{ $i } ) td,
111-
tbody tr:nth-of-type( #{ $i + 10 } ) td,
112-
tbody tr:nth-of-type( #{ $i + 20 } ) td,
113-
tbody tr:nth-of-type( #{ $i + 30 } ) td,
114-
tbody tr:nth-of-type( #{ $i + 40 } ) td,
115-
tbody tr:nth-of-type( #{ $i + 50 } ) td {
116-
background-color: var( --color, var( --color-#{ $i }));
101+
// Stacked
102+
&:not(.stacked) {
103+
tbody tr {
104+
105+
td {
106+
// Even cell size
107+
flex-grow: 1;
108+
flex-shrink: 1;
109+
flex-basis: 0;
117110
}
118111
}
119112
}
120-
&.multiple {
121-
@for $i from 1 through $max-items {
122-
tbody tr td:nth-of-type( #{ $i } ),
123-
tbody tr td:nth-of-type( #{ $i + 10 } ),
124-
tbody tr td:nth-of-type( #{ $i + 20 } ),
125-
tbody tr td:nth-of-type( #{ $i + 30 } ),
126-
tbody tr td:nth-of-type( #{ $i + 40 } ),
127-
tbody tr td:nth-of-type( #{ $i + 50 } ) {
128-
background-color: var( --color, var( --color-#{ $i }));
113+
&.multiple.stacked {
114+
tbody tr {
115+
flex-direction: row;
116+
justify-content: start;
117+
align-items: flex-start;
118+
119+
td {
120+
flex-grow: unset;
121+
flex-shrink: unset;
122+
flex-basis: unset;
129123
}
130124
}
131125
}
@@ -141,25 +135,35 @@
141135
flex-direction: column-reverse;
142136
}
143137
}
138+
&:not(.reverse-datasets) {
139+
tbody tr {
140+
flex-direction: column;
141+
}
142+
}
143+
&.reverse-datasets {
144+
tbody tr {
145+
flex-direction: column-reverse;
146+
}
147+
}
144148

145149
// Row Spacing
146-
@for $i from 1 through 10 {
147-
&.row-spacing {
150+
@for $i from 1 through 20 {
151+
&.row-spacing-#{$i} {
148152
tbody tr {
149-
padding-block-start: 4px;
150-
padding-block-end: 4px;
153+
padding-block-start: #{$i}px;
154+
padding-block-end: #{$i}px;
151155
}
152156
}
153157
}
154158

155159
// Axes
156160
&.show-main-axis {
157-
&:not(.end-labels) {
161+
&:not(.labels-after) {
158162
tbody tr {
159163
border-inline-start: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
160164
}
161165
}
162-
&.end-labels {
166+
&.labels-after {
163167
tbody tr {
164168
border-inline-end: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
165169
}
@@ -182,14 +186,16 @@
182186
}
183187
@for $i from 1 through $max-items {
184188
&.show-#{$i}-y-axes {
185-
tbody {
186-
tr {
189+
&:not(.labels-after) {
190+
tbody tr {
191+
background-size: ( 100% / $i ) 100%;
192+
background-image: linear-gradient( -90deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
193+
}
194+
}
195+
&.labels-after {
196+
tbody tr {
187197
background-size: ( 100% / $i ) 100%;
188-
background-image: linear-gradient(
189-
90deg,
190-
var( --axis-color ) var( --axis-width ),
191-
transparent var( --axis-width )
192-
);
198+
background-image: linear-gradient( 90deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
193199
}
194200
}
195201
}

‎src/charts/_bubble.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
.charts-css {
22

33
&.bubble {
4+
// Shape
5+
@include rectangle();
6+
7+
// Background
8+
background-color: var( --chart-bg-color );
9+
10+
caption,
11+
colgroup,
12+
tbody,
13+
thead,
14+
tfoot {
15+
display: none;
16+
}
417
}
518

619
}

‎src/charts/_column.scss‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,15 @@
3333
// Display cells in a row
3434
display: flex;
3535
justify-content: space-around;
36-
flex-direction: row;
3736

3837
padding: 0;
3938
margin: 0;
4039

4140
text-align: center;
4241

4342
td {
44-
// Even cell size
45-
flex-grow: 1;
46-
flex-shrink: 1;
47-
flex-basis: 0;
48-
4943
width: 100%;
50-
height: 100%;
44+
height: calc( 100% * var( --size, 1 ) );
5145

5246
padding: 0;
5347
margin: 0;
@@ -72,7 +66,7 @@
7266
}
7367

7468
// Labels Position
75-
&:not(.top-labels) {
69+
&:not(.labels-before) {
7670
tbody {
7771
tr {
7872
align-items: flex-end;
@@ -85,7 +79,7 @@
8579
}
8680
}
8781
}
88-
&.top-labels {
82+
&.labels-before {
8983
tbody {
9084
tr {
9185
align-items: flex-start;
@@ -99,20 +93,28 @@
9993
}
10094
}
10195

102-
// Colors
103-
&:not(.multiple) {
104-
@for $i from 1 through $max-items {
105-
tbody tr:nth-of-type( #{ $i } ) td,
106-
tbody tr:nth-of-type( #{ $i + $max-items } ) td {
107-
background-color: var( --color, var( --color-#{ $i }));
96+
// Stacked
97+
&:not(.stacked) {
98+
tbody tr {
99+
100+
td {
101+
// Even cell size
102+
flex-grow: 1;
103+
flex-shrink: 1;
104+
flex-basis: 0;
108105
}
109106
}
110107
}
111-
&.multiple {
112-
@for $i from 1 through $max-items {
113-
tbody tr td:nth-of-type( #{ $i } ),
114-
tbody tr td:nth-of-type( #{ $i + $max-items } ) {
115-
background-color: var( --color, var( --color-#{ $i }));
108+
&.stacked {
109+
tbody tr {
110+
flex-direction: column-reverse;
111+
justify-content: start;
112+
align-items: flex-start;
113+
114+
td {
115+
flex-grow: unset;
116+
flex-shrink: unset;
117+
flex-basis: unset;
116118
}
117119
}
118120
}
@@ -128,25 +130,35 @@
128130
flex-direction: row-reverse;
129131
}
130132
}
133+
&:not(.reverse-datasets) {
134+
tbody tr {
135+
flex-direction: row;
136+
}
137+
}
138+
&.reverse-datasets {
139+
tbody tr {
140+
flex-direction: row-reverse;
141+
}
142+
}
131143

132144
// Row Spacing
133-
@for $i from 1 through 10 {
134-
&.row-spacing {
145+
@for $i from 1 through 20 {
146+
&.row-spacing-#{$i} {
135147
tbody tr {
136-
padding-inline-start: 4px;
137-
padding-inline-end: 4px;
148+
padding-inline-start: #{$i}px;
149+
padding-inline-end: #{$i}px;
138150
}
139151
}
140152
}
141153

142154
// Axes
143155
&.show-main-axis {
144-
&:not(.top-labels) {
156+
&:not(.labels-before) {
145157
tbody tr {
146158
border-block-end: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
147159
}
148160
}
149-
&.top-labels {
161+
&.labels-before {
150162
tbody tr {
151163
border-block-start: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
152164
}
@@ -167,18 +179,19 @@
167179
}
168180
}
169181
}
170-
@for $i from 1 through 10 {
182+
@for $i from 1 through $max-items {
171183
&.show-#{$i}-x-axes {
172-
tbody {
173-
background-size: 100% ( 100% / $i );
174-
background-image: linear-gradient(
175-
var( --axis-color ) var( --axis-width ),
176-
transparent var( --axis-width )
177-
);
178-
179-
// tr {
180-
// border-block-start-color: transparent;
181-
// }
184+
&:not(.labels-before) {
185+
tbody tr {
186+
background-size: 100% ( 100% / $i );
187+
background-image: linear-gradient( var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
188+
}
189+
}
190+
&.labels-before {
191+
tbody tr {
192+
background-size: 100% ( 100% / $i );
193+
background-image: linear-gradient( 0deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
194+
}
182195
}
183196
}
184197
}

0 commit comments

Comments
 (0)