Merge pull request #6 from ramiy/master

Version 0.6.0

Author: ramiy

dist/charts.css

@@ -1,6 +1,6 @@
 {
   "name": "charts.css",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Open source CSS framework for data visualization.",
   "author": "Rami Yushuvaev",
   "homepage": "https://ChartsCSS.org/",

dist/charts.css.map

@@ -1,5 +1,5 @@
 /*
- * Charts.css v0.5.0 (https://ChartsCSS.org/)
+ * Charts.css v0.6.0 (https://ChartsCSS.org/)
  * Copyright 2020 Rami Yushuvaev
  * Licensed under MIT
  */
@@ -10,6 +10,7 @@
 
 // Components
 @import "components/wrapper";
+@import "components/heading";
 @import "components/colors";
 @import "components/data";
 @import "components/legend";

dist/charts.min.css

@@ -1,13 +1,9 @@
 .charts-css {
 
   &.bar {
-    // Shape
     display: block;
     width: 100%;
 
-    --labels-size: 80px;
-
-    caption,
     colgroup,
     thead,
     tfoot {
@@ -21,7 +17,7 @@
       align-items: stretch;
 
       width: 100%;
-      height: 100%;
+      height: calc(100% - var(--heading-size));
 
       tr {
         position: relative;
@@ -37,9 +33,6 @@
         justify-content: flex-start;
 
         th {
-          display: flex;
-          align-items: center;
-
           position: absolute;
           top: 0;
           bottom: 0;
@@ -59,17 +52,39 @@
     }
 
     // Labels
-    &.labels-hide {
+    &:not(.show-labels) {
       --labels-size: 0;
-      tbody {
-        tr {
-          th {
-            display: none;
-          }
-        }
+
+      tbody tr th {
+        display: none;
+      }
+    }
+    &.show-labels {
+      --labels-size: 80px;
+
+      tbody tr th {
+        display: flex;
+        align-items: center;
+      }
+    }
+    &.labels-align-start {
+      tbody tr th {
+        justify-content: var(--labels-align, flex-start);
       }
     }
-    &:not(.labels-after) {
+    &.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);
+      }
+    }
+
+    // Chart Direction
+    &:not(.reverse) {
       tbody {
         tr {
           align-items: flex-start;
@@ -87,7 +102,7 @@
         }
       }
     }
-    &.labels-after {
+    &.reverse {
       tbody {
         tr {
           align-items: flex-end;
@@ -105,21 +120,6 @@
         }
       }
     }
-    &.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);
-      }
-    }
 
     // Stacked
     &:not(.stacked) {
@@ -167,13 +167,13 @@
       }
 
       &.stacked {
-        &:not(.labels-after) {
+        &:not(.reverse) {
           tbody tr {
             flex-direction: row;
           }
         }
 
-        &.labels-after {
+        &.reverse {
           tbody tr {
             flex-direction: row-reverse;
           }
@@ -188,13 +188,13 @@
       }
 
       &.stacked {
-        &:not(.labels-after) {
+        &:not(.reverse) {
           tbody tr {
             flex-direction: row-reverse;
           }
         }
 
-        &.labels-after {
+        &.reverse {
           tbody tr {
             flex-direction: row;
           }
@@ -222,26 +222,26 @@
 
     // Axes
     &.show-primary-axis {
-      &:not(.labels-after) {
+      &:not(.reverse) {
         tbody tr {
           border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
         }
       }
-      &.labels-after {
+      &.reverse {
         tbody tr {
           border-inline-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
         }
       }
     }
     @for $i from 1 through $max-axes {
       &.show-#{$i}-secondary-axes {
-        &:not(.labels-after) {
+        &:not(.reverse) {
           tbody tr {
             background-size: (100% / $i) 100%;
             background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
           }
         }
-        &.labels-after {
+        &.reverse {
           tbody tr {
             background-size: (100% / $i) 100%;
             background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));

package-lock.json

@@ -1,19 +1,27 @@
 .charts-css {
 
   &.bubble {
-    // Shape
-    @include rectangle();
+    display: block;
+    width: 100%;
+    height: 100%;
 
-    // Background
-    background-color: var(--chart-bg-color);
-
-    caption,
     colgroup,
-    tbody,
     thead,
     tfoot {
       display: none;
     }
+
+    // Layout
+    tbody {
+      display: block;
+      width: 100%;
+      height: calc(100% - var(--heading-size));
+      background-color: var(--chart-bg-color);
+
+      tr {
+        display: none;
+      }
+    }
   }
 
 }