Skip to content

Commit 090eecd

Browse files
ramiyramiy
authored
Merge pull request #8 from ramiy/master
Version 0.8.0
2 parents 9e97129 + cdd90b3 commit 090eecd

23 files changed

+1925
-1457
lines changed

‎dist/charts.css

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

‎dist/charts.css.map

+3-2
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.7.0",
3+
"version": "0.8.0",
44
"description": "Open source CSS framework for data visualization.",
55
"author": "Rami Yushuvaev",
66
"homepage": "https://ChartsCSS.org/",

‎src/charts.scss

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

1920
// Charts
2021
@import "charts/bar";
2122
@import "charts/column";
22-
@import "charts/line";
2323
@import "charts/area";
24+
@import "charts/line";
2425

2526
@import "charts/radial";
2627
@import "charts/pie";

‎src/charts/_area.scss

+6-88
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1+
/*
2+
* Area Chart
3+
*/
14
.charts-css {
25

36
&.area {
4-
display: block;
5-
width: 100%;
6-
height: 100%;
7-
8-
colgroup,
9-
thead,
10-
tfoot {
11-
display: none;
12-
}
137

148
// Layout
159
tbody {
@@ -60,6 +54,7 @@
6054
right: 0;
6155
bottom: 0;
6256
left: 0;
57+
z-index: -1;
6358
}
6459

6560
&::after {
@@ -241,92 +236,15 @@
241236

242237
// Spacing
243238
@for $i from 1 through 20 {
244-
&.data-spacing-#{$i} {
245-
tbody tr {
246-
padding-inline-start: $i * 1px;
247-
padding-inline-end: $i * 1px;
248-
}
249-
}
250-
}
251-
@for $i from 1 through 20 {
239+
&.data-spacing-#{$i},
252240
&.datasets-spacing-#{$i} {
253-
tbody tr td {
241+
tbody tr td::before {
254242
margin-inline-start: $i * 1px;
255243
margin-inline-end: $i * 1px;
256244
}
257245
}
258246
}
259247

260-
// Axes
261-
&.show-primary-axis {
262-
&:not(.reverse) {
263-
tbody tr {
264-
border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
265-
}
266-
}
267-
&.reverse {
268-
tbody tr {
269-
border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
270-
}
271-
}
272-
}
273-
@for $i from 1 through $max-axes {
274-
&.show-#{$i}-secondary-axes {
275-
&:not(.reverse) {
276-
tbody tr {
277-
background-size: 100% (100% / $i);
278-
background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
279-
}
280-
}
281-
&.reverse {
282-
tbody tr {
283-
background-size: 100% (100% / $i);
284-
background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
285-
}
286-
}
287-
}
288-
}
289-
&.show-data-axes {
290-
tbody tr {
291-
border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
292-
}
293-
&:not(.reverse-data) {
294-
tbody tr:first-of-type {
295-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
296-
}
297-
}
298-
&.reverse-data {
299-
tbody tr:last-of-type {
300-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
301-
}
302-
}
303-
}
304-
&.show-dataset-axes { // TODO: fix this
305-
tbody tr td {
306-
border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
307-
}
308-
&:not(.reverse-data) {
309-
tbody tr:first-of-type td {
310-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
311-
}
312-
}
313-
&.reverse-data {
314-
tbody tr:last-of-type td {
315-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
316-
}
317-
}
318-
}
319-
320-
// Hover
321-
&.hover {
322-
tr:hover {
323-
background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
324-
}
325-
td:hover {
326-
opacity: .75;
327-
}
328-
}
329-
330248
}
331249

332250
}

‎src/charts/_bar.scss

+3-78
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1+
/*
2+
* Bar Chart
3+
*/
14
.charts-css {
25

36
&.bar {
4-
display: block;
5-
width: 100%;
6-
7-
colgroup,
8-
thead,
9-
tfoot {
10-
display: none;
11-
}
127

138
// Layout
149
tbody {
@@ -220,76 +215,6 @@
220215
}
221216
}
222217

223-
// Axes
224-
&.show-primary-axis {
225-
&:not(.reverse) {
226-
tbody tr {
227-
border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
228-
}
229-
}
230-
&.reverse {
231-
tbody tr {
232-
border-inline-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
233-
}
234-
}
235-
}
236-
@for $i from 1 through $max-axes {
237-
&.show-#{$i}-secondary-axes {
238-
&:not(.reverse) {
239-
tbody tr {
240-
background-size: (100% / $i) 100%;
241-
background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
242-
}
243-
}
244-
&.reverse {
245-
tbody tr {
246-
background-size: (100% / $i) 100%;
247-
background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
248-
}
249-
}
250-
}
251-
}
252-
&.show-data-axes {
253-
tbody tr {
254-
border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
255-
}
256-
&:not(.reverse-data) {
257-
tbody tr:first-of-type {
258-
border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
259-
}
260-
}
261-
&.reverse-data {
262-
tbody tr:last-of-type {
263-
border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
264-
}
265-
}
266-
}
267-
&.show-dataset-axes { // TODO: fix this
268-
tbody tr td {
269-
border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
270-
}
271-
&:not(.reverse-data) {
272-
tbody tr:first-of-type td {
273-
border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
274-
}
275-
}
276-
&.reverse-data {
277-
tbody tr:last-of-type td {
278-
border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
279-
}
280-
}
281-
}
282-
283-
// Hover
284-
&.hover {
285-
tr:hover {
286-
background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
287-
}
288-
td:hover {
289-
opacity: .75;
290-
}
291-
}
292-
293218
}
294219

295220
}

‎src/charts/_column.scss

+3-79
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1+
/*
2+
* Column Chart
3+
*/
14
.charts-css {
25

36
&.column {
4-
display: block;
5-
width: 100%;
6-
height: 100%;
7-
8-
colgroup,
9-
thead,
10-
tfoot {
11-
display: none;
12-
}
137

148
// Layout
159
tbody {
@@ -220,76 +214,6 @@
220214
}
221215
}
222216

223-
// Axes
224-
&.show-primary-axis {
225-
&:not(.reverse) {
226-
tbody tr {
227-
border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
228-
}
229-
}
230-
&.reverse {
231-
tbody tr {
232-
border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
233-
}
234-
}
235-
}
236-
@for $i from 1 through $max-axes {
237-
&.show-#{$i}-secondary-axes {
238-
&:not(.reverse) {
239-
tbody tr {
240-
background-size: 100% (100% / $i);
241-
background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
242-
}
243-
}
244-
&.reverse {
245-
tbody tr {
246-
background-size: 100% (100% / $i);
247-
background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
248-
}
249-
}
250-
}
251-
}
252-
&.show-data-axes {
253-
tbody tr {
254-
border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
255-
}
256-
&:not(.reverse-data) {
257-
tbody tr:first-of-type {
258-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
259-
}
260-
}
261-
&.reverse-data {
262-
tbody tr:last-of-type {
263-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
264-
}
265-
}
266-
}
267-
&.show-dataset-axes { // TODO: fix this
268-
tbody tr td {
269-
border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
270-
}
271-
&:not(.reverse-data) {
272-
tbody tr:first-of-type td {
273-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
274-
}
275-
}
276-
&.reverse-data {
277-
tbody tr:last-of-type td {
278-
border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
279-
}
280-
}
281-
}
282-
283-
// Hover
284-
&.hover {
285-
tr:hover {
286-
background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
287-
}
288-
td:hover {
289-
opacity: .75;
290-
}
291-
}
292-
293217
}
294218

295219
}

‎src/charts/_donut.scss

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1+
/*
2+
* Donut Chart
3+
*/
14
.charts-css {
25

36
&.donut {
4-
display: block;
5-
width: 100%;
6-
height: 100%;
7-
8-
colgroup,
9-
thead,
10-
tfoot {
11-
display: none;
12-
}
137

148
// Layout
159
tbody {

0 commit comments

Comments
 (0)