Merge pull request #111 from ChartsCSS/release/1.1.0

Version 1.1.0
ChartsCSS · Oct 18, 2023 · aff66be · aff66be
2 parents a032a1c + b8ccf8c
commit aff66be
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 
 Visualization help end-users understand data. **Charts.css** help frontend developers turn data into beautiful charts and graphs using simple **CSS classes**.
 
-No dependencies. 72kb file size. Less than 6kb gzipped file size!
+No dependencies. 76kb minified size. 7kb gzipped file size!
 
 ## Documentation
 

diff --git a/dist/charts.css b/dist/charts.css
diff --git a/dist/charts.css.map b/dist/charts.css.map
diff --git a/dist/charts.min.css b/dist/charts.min.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "charts.css",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Open source CSS framework for data visualization.",
   "author": "Rami Yushuvaev",
   "homepage": "https://ChartsCSS.org/",

diff --git a/src/charts.scss b/src/charts.scss
@@ -1,5 +1,5 @@
 /*
- * Charts.css v1.0.1 (https://ChartsCSS.org/)
+ * Charts.css v1.1.0 (https://ChartsCSS.org/)
  * Copyright 2020 Rami Yushuvaev
  * Licensed under MIT
  */

diff --git a/src/charts/_area.scss b/src/charts/_area.scss
@@ -11,7 +11,7 @@
       justify-content: space-between;
       align-items: stretch;
       width: 100%;
-      aspect-ratio: 21/9;
+      aspect-ratio: var(--#{ $variable-prefix }aspect-ratio, 21 / 9);
 
       tr {
         position: relative;

diff --git a/src/charts/_bar.scss b/src/charts/_bar.scss
@@ -11,7 +11,7 @@
       justify-content: space-between;
       align-items: stretch;
       width: 100%;
-      aspect-ratio: none;
+      aspect-ratio: var(--#{ $variable-prefix }aspect-ratio, auto);
 
       tr {
         position: relative;

diff --git a/src/charts/_column.scss b/src/charts/_column.scss
@@ -11,7 +11,7 @@
       justify-content: space-between;
       align-items: stretch;
       width: 100%;
-      aspect-ratio: 21/9;
+      aspect-ratio: var(--#{ $variable-prefix }aspect-ratio, 21 / 9);
 
       tr {
         position: relative;

diff --git a/src/charts/_line.scss b/src/charts/_line.scss
@@ -12,7 +12,7 @@
       justify-content: space-between;
       align-items: stretch;
       width: 100%;
-      aspect-ratio: 21/9;
+      aspect-ratio: var(--#{ $variable-prefix }aspect-ratio, 21 / 9);
 
       tr {
         position: relative;

diff --git a/src/general/_properties.scss b/src/general/_properties.scss
@@ -16,6 +16,11 @@ $color-vars: color, chart-bg-color;
   }
 }
 
+// Chart Aspect Ratio
+@property --#{ $variable-prefix }aspect-ratio {
+  @include at-property( "<ratio>", auto, true );
+}
+
 // Labels
 @property --#{ $variable-prefix }labels-size {
   @include at-property( "<length>", 0, true );