Merge pull request #2 from ramiy/master

Version 0.3.0
ChartsCSS · Oct 13, 2020 · 5bc5d64 · 5bc5d64
2 parents 39713e1 + b8a9736
commit 5bc5d64
Show file tree

Hide file tree

Showing 20 changed files with 1,227 additions and 823 deletions.
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,7 +1,7 @@
 {
   "name": "charts.css",
-  "version": "0.2.0",
-  "description": "Open source data visualization framework using pure CSS.",
+  "version": "0.3.0",
+  "description": "Open source CSS framework for data visualization.",
   "author": "Rami Yushuvaev",
   "homepage": "https://ChartsCSS.org/",
   "license": "MIT",
@@ -33,9 +33,6 @@
   "bugs": {
     "url": "https://github.com/ChartsCSS/charts.css/issues"
   },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
-  },
   "devDependencies": {
     "node-sass": "^4.14.1",
     "nodemon": "^2.0.4",

diff --git a/src/charts.scss b/src/charts.scss
@@ -1,10 +1,9 @@
-/*!
- * charts.css v0.2.0 (https://ChartsCSS.org/)
+/*
+ * Charts.css v0.3.0 (https://ChartsCSS.org/)
  * Copyright 2020 Rami Yushuvaev
  * Licensed under MIT
  */
 
-// Configuration
 // General
 @import "general/variables";
 @import "general/mixins";
@@ -13,6 +12,7 @@
 
 // Components
 @import "components/wrapper";
+@import "components/colors";
 @import "components/legend";
 @import "components/tooltips";
 
@@ -24,6 +24,5 @@
 
 @import "charts/pie";
 @import "charts/donut";
-@import "charts/radar";
 @import "charts/polar";
-@import "charts/gauge"; // with a dial
+@import "charts/radar";
diff --git a/src/charts/_bar.scss b/src/charts/_bar.scss
@@ -32,18 +32,12 @@
         // Display cells in a column
         display: flex;
         justify-content: space-around;
-        flex-direction: column;
 
         padding: 0;
         margin: 0;
 
         td {
-          // Even cell size
-          flex-grow: 1;
-          flex-shrink: 1;
-          flex-basis: 0;
-
-          width: 100%;
+          width: calc( 100% * var( --size, 1 ) );
           height: 100%;
 
           padding: 0;
@@ -69,7 +63,7 @@
     }
 
     // Labels Position
-    &:not(.end-labels) {
+    &:not(.labels-after) {
       tbody {
         tr {
           align-items: flex-start;
@@ -86,7 +80,7 @@
         }
       }
     }
-    &.end-labels {
+    &.labels-after {
       tbody {
         tr {
           align-items: flex-end;
@@ -104,28 +98,28 @@
       }
     }
 
-    // Colors
-    &:not(.multiple) {
-      @for $i from 1 through $max-items {
-        tbody tr:nth-of-type( #{ $i } ) td,
-        tbody tr:nth-of-type( #{ $i + 10 } ) td,
-        tbody tr:nth-of-type( #{ $i + 20 } ) td,
-        tbody tr:nth-of-type( #{ $i + 30 } ) td,
-        tbody tr:nth-of-type( #{ $i + 40 } ) td,
-        tbody tr:nth-of-type( #{ $i + 50 } ) td {
-          background-color: var( --color, var( --color-#{ $i }));
+    // Stacked
+    &:not(.stacked) {
+      tbody tr {
+
+        td {
+          // Even cell size
+          flex-grow: 1;
+          flex-shrink: 1;
+          flex-basis: 0;
         }
       }
     }
-    &.multiple {
-      @for $i from 1 through $max-items {
-        tbody tr td:nth-of-type( #{ $i } ),
-        tbody tr td:nth-of-type( #{ $i + 10 } ),
-        tbody tr td:nth-of-type( #{ $i + 20 } ),
-        tbody tr td:nth-of-type( #{ $i + 30 } ),
-        tbody tr td:nth-of-type( #{ $i + 40 } ),
-        tbody tr td:nth-of-type( #{ $i + 50 } ) {
-          background-color: var( --color, var( --color-#{ $i }));
+    &.multiple.stacked {
+      tbody tr {
+        flex-direction: row;
+        justify-content: start;
+        align-items: flex-start;
+
+        td {
+          flex-grow: unset;
+          flex-shrink: unset;
+          flex-basis: unset;
         }
       }
     }
@@ -141,25 +135,35 @@
         flex-direction: column-reverse;
       }
     }
+    &:not(.reverse-datasets) {
+      tbody tr {
+        flex-direction: column;
+      }
+    }
+    &.reverse-datasets {
+      tbody tr {
+        flex-direction: column-reverse;
+      }
+    }
 
     // Row Spacing
-    @for $i from 1 through 10 {
-      &.row-spacing {
+    @for $i from 1 through 20 {
+      &.row-spacing-#{$i} {
         tbody tr {
-          padding-block-start: 4px;
-          padding-block-end: 4px;
+          padding-block-start: #{$i}px;
+          padding-block-end: #{$i}px;
         }
       }
     }
 
     // Axes
     &.show-main-axis {
-      &:not(.end-labels) {
+      &:not(.labels-after) {
         tbody tr {
           border-inline-start: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
         }
       }
-      &.end-labels {
+      &.labels-after {
         tbody tr {
           border-inline-end: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
         }
@@ -182,14 +186,16 @@
     }
     @for $i from 1 through $max-items {
       &.show-#{$i}-y-axes {
-        tbody {
-          tr {
+        &:not(.labels-after) {
+          tbody tr {
+            background-size: ( 100% / $i ) 100%;
+            background-image: linear-gradient( -90deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
+          }
+        }
+        &.labels-after {
+          tbody tr {
             background-size: ( 100% / $i ) 100%;
-            background-image: linear-gradient(
-              90deg,
-              var( --axis-color ) var( --axis-width ),
-              transparent var( --axis-width )
-            );
+            background-image: linear-gradient( 90deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
           }
         }
       }

diff --git a/src/charts/_bubble.scss b/src/charts/_bubble.scss
@@ -1,6 +1,19 @@
 .charts-css {
 
   &.bubble {
+    // Shape
+    @include rectangle();
+
+    // Background
+    background-color: var( --chart-bg-color );
+
+    caption,
+    colgroup,
+    tbody,
+    thead,
+    tfoot {
+      display: none;
+    }
   }
 
 }
diff --git a/src/charts/_column.scss b/src/charts/_column.scss
@@ -33,21 +33,15 @@
         // Display cells in a row
         display: flex;
         justify-content: space-around;
-        flex-direction: row;
 
         padding: 0;
         margin: 0;
 
         text-align: center;
 
         td {
-          // Even cell size
-          flex-grow: 1;
-          flex-shrink: 1;
-          flex-basis: 0;
-
           width: 100%;
-          height: 100%;
+          height: calc( 100% * var( --size, 1 ) );
 
           padding: 0;
           margin: 0;
@@ -72,7 +66,7 @@
     }
 
     // Labels Position
-    &:not(.top-labels) {
+    &:not(.labels-before) {
       tbody {
         tr {
           align-items: flex-end;
@@ -85,7 +79,7 @@
         }
       }
     }
-    &.top-labels {
+    &.labels-before {
       tbody {
         tr {
           align-items: flex-start;
@@ -99,20 +93,28 @@
       }
     }
 
-    // Colors
-    &:not(.multiple) {
-      @for $i from 1 through $max-items {
-        tbody tr:nth-of-type( #{ $i } ) td,
-        tbody tr:nth-of-type( #{ $i + $max-items } ) td {
-          background-color: var( --color, var( --color-#{ $i }));
+    // Stacked
+    &:not(.stacked) {
+      tbody tr {
+
+        td {
+          // Even cell size
+          flex-grow: 1;
+          flex-shrink: 1;
+          flex-basis: 0;
         }
       }
     }
-    &.multiple {
-      @for $i from 1 through $max-items {
-        tbody tr td:nth-of-type( #{ $i } ),
-        tbody tr td:nth-of-type( #{ $i + $max-items } ) {
-          background-color: var( --color, var( --color-#{ $i }));
+    &.stacked {
+      tbody tr {
+        flex-direction: column-reverse;
+        justify-content: start;
+        align-items: flex-start;
+
+        td {
+          flex-grow: unset;
+          flex-shrink: unset;
+          flex-basis: unset;
         }
       }
     }
@@ -128,25 +130,35 @@
         flex-direction: row-reverse;
       }
     }
+    &:not(.reverse-datasets) {
+      tbody tr {
+        flex-direction: row;
+      }
+    }
+    &.reverse-datasets {
+      tbody tr {
+        flex-direction: row-reverse;
+      }
+    }
 
     // Row Spacing
-    @for $i from 1 through 10 {
-      &.row-spacing {
+    @for $i from 1 through 20 {
+      &.row-spacing-#{$i} {
         tbody tr {
-          padding-inline-start: 4px;
-          padding-inline-end: 4px;
+          padding-inline-start: #{$i}px;
+          padding-inline-end: #{$i}px;
         }
       }
     }
 
     // Axes
     &.show-main-axis {
-      &:not(.top-labels) {
+      &:not(.labels-before) {
         tbody tr {
           border-block-end: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
         }
       }
-      &.top-labels {
+      &.labels-before {
         tbody tr {
           border-block-start: var( --main-axis-width ) var( --main-axis-style ) var( --main-axis-color );
         }
@@ -167,18 +179,19 @@
         }
       }
     }
-    @for $i from 1 through 10 {
+    @for $i from 1 through $max-items {
       &.show-#{$i}-x-axes {
-        tbody {
-          background-size: 100% ( 100% / $i );
-          background-image: linear-gradient(
-            var( --axis-color ) var( --axis-width ),
-            transparent var( --axis-width )
-          );
-
-          // tr {
-          //   border-block-start-color: transparent;
-          // }
+        &:not(.labels-before) {
+          tbody tr {
+            background-size: 100% ( 100% / $i );
+            background-image: linear-gradient( var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
+          }
+        }
+        &.labels-before {
+          tbody tr {
+            background-size: 100% ( 100% / $i );
+            background-image: linear-gradient( 0deg, var( --axis-color ) var( --axis-width ), transparent var( --axis-width ) );
+          }
         }
       }
     }