Skip to content

Commit

Permalink
Merge pull request #11 from ramiy/master
Browse files Browse the repository at this point in the history
Version 0.9.0
  • Loading branch information
ramiy authored Dec 22, 2020
2 parents f33de9f + 4e4c487 commit 79a92eb
Show file tree
Hide file tree
Showing 13 changed files with 513 additions and 396 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

![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)

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

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

## Documentation

Expand Down
282 changes: 109 additions & 173 deletions dist/charts.css

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion dist/charts.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/charts.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "charts.css",
"version": "0.8.2",
"version": "0.9.0",
"description": "Open source CSS framework for data visualization.",
"author": "Rami Yushuvaev",
"homepage": "https://ChartsCSS.org/",
Expand Down
3 changes: 2 additions & 1 deletion src/charts.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Charts.css v0.8.2 (https://ChartsCSS.org/)
* Charts.css v0.9.0 (https://ChartsCSS.org/)
* Copyright 2020 Rami Yushuvaev
* Licensed under MIT
*/
Expand All @@ -13,6 +13,7 @@
@import "components/heading";
@import "components/colors";
@import "components/data";
@import "components/labels";
@import "components/axes";
@import "components/legend";
@import "components/tooltips";
Expand Down
61 changes: 24 additions & 37 deletions src/charts/_area.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
position: absolute;
right: 0;
left: 0;
justify-content: var(--labels-align, center);
}

td {
Expand Down Expand Up @@ -67,38 +66,6 @@
}
}

// Labels
&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 1.5rem;

tbody tr th {
display: flex;
align-items: center;
}
}
&.labels-align-start {
tbody tr th {
justify-content: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
justify-content: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
justify-content: var(--labels-align, center);
}
}

// Orientation
&:not(.reverse) {
tbody {
Expand Down Expand Up @@ -165,7 +132,12 @@
align-items: flex-end;

&::before {
clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
clip-path: polygon(
0% calc(100% * (1 - var(--start, var(--size)))),
100% calc(100% * (1 - var(--size))),
100% 100%,
0% 100%
);
}

.data {
Expand All @@ -183,7 +155,12 @@
align-items: flex-start;

&::before {
clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
clip-path: polygon(
0% calc(100% * (1 - var(--size))),
100% calc(100% * (1 - var(--start, var(--size)))),
100% 100%,
0% 100%
);
}

.data {
Expand All @@ -203,7 +180,12 @@
align-items: flex-end;

&::before {
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% * var(--size)),
0% calc(100% * var(--start, var(--size)))
);
}

.data {
Expand All @@ -221,7 +203,12 @@
align-items: flex-start;

&::before {
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% * var(--start, var(--size))),
0% calc(100% * var(--size))
);
}

.data {
Expand Down
34 changes: 0 additions & 34 deletions src/charts/_bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,38 +46,6 @@
}
}

// Labels
&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 80px;

tbody tr th {
display: flex;
align-items: center;
}
}
&.labels-align-start {
tbody tr th {
align-items: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
align-items: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
align-items: var(--labels-align, center);
}
}

// Orientation
&:not(.reverse) {
tbody {
Expand All @@ -88,7 +56,6 @@
th {
left: calc(-1 * var(--labels-size) - var(--primary-axis-width));
width: var(--labels-size);
justify-content: var(--labels-align, flex-start);
}

td {
Expand All @@ -106,7 +73,6 @@
th {
right: calc(-1 * var(--labels-size) - var(--primary-axis-width));
width: var(--labels-size);
justify-content: var(--labels-align, flex-end);
}

td {
Expand Down
33 changes: 0 additions & 33 deletions src/charts/_column.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
position: absolute;
right: 0;
left: 0;
justify-content: var(--labels-align, center);
}

td {
Expand All @@ -47,38 +46,6 @@
}
}

// Labels
&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 1.5rem;

tbody tr th {
display: flex;
align-items: center;
}
}
&.labels-align-start {
tbody tr th {
justify-content: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
justify-content: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
justify-content: var(--labels-align, center);
}
}

// Orientation
&:not(.reverse) {
tbody {
Expand Down
33 changes: 0 additions & 33 deletions src/charts/_line.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
position: absolute;
right: 0;
left: 0;
justify-content: var(--labels-align, center);
}

td {
Expand Down Expand Up @@ -69,38 +68,6 @@
}
}

// Labels
&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 1.5rem;

tbody tr th {
display: flex;
align-items: center;
}
}
&.labels-align-start {
tbody tr th {
justify-content: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
justify-content: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
justify-content: var(--labels-align, center);
}
}

// Orientation
&:not(.reverse) {
tbody {
Expand Down
92 changes: 92 additions & 0 deletions src/components/_labels.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* Chart labels
*/
.charts-css {

&.bar {

&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 80px;

tbody tr th {
display: flex;
justify-content: var(--labels-align, center);
align-items: center;
flex-direction: column;
}

tr.hide-label th,
th.hide-label {
display: none;
}
}
&.labels-align-start {
tbody tr th {
align-items: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
align-items: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
align-items: var(--labels-align, center);
}
}

}

&.column,
&.area,
&.line {

&:not(.show-labels) {
--labels-size: 0;

tbody tr th {
display: none;
}
}
&.show-labels {
--labels-size: 1.5rem;

tbody tr th {
display: flex;
justify-content: var(--labels-align, center);
align-items: center;
flex-direction: column;
}

tr.hide-label th,
th.hide-label {
display: none;
}
}
&.labels-align-start {
tbody tr th {
justify-content: var(--labels-align, flex-start);
}
}
&.labels-align-end {
tbody tr th {
justify-content: var(--labels-align, flex-end);
}
}
&.labels-align-center {
tbody tr th {
justify-content: var(--labels-align, center);
}
}

}

}
Loading

0 comments on commit 79a92eb

Please sign in to comment.