Merge pull request #8 from ramiy/master

Version 0.8.0
ChartsCSS · Nov 19, 2020 · 090eecd · 090eecd
2 parents 9e97129 + cdd90b3
commit 090eecd
Show file tree

Hide file tree

Showing 23 changed files with 1,925 additions and 1,457 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,6 +1,6 @@
 {
   "name": "charts.css",
-  "version": "0.7.0",
+  "version": "0.8.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 v0.7.0 (https://ChartsCSS.org/)
+ * Charts.css v0.8.0 (https://ChartsCSS.org/)
  * Copyright 2020 Rami Yushuvaev
  * Licensed under MIT
  */
@@ -13,14 +13,15 @@
 @import "components/heading";
 @import "components/colors";
 @import "components/data";
+@import "components/axes";
 @import "components/legend";
 @import "components/tooltips";
 
 // Charts
 @import "charts/bar";
 @import "charts/column";
-@import "charts/line";
 @import "charts/area";
+@import "charts/line";
 
 @import "charts/radial";
 @import "charts/pie";

diff --git a/src/charts/_area.scss b/src/charts/_area.scss
@@ -1,15 +1,9 @@
+/*
+ * Area Chart
+ */
 .charts-css {
 
   &.area {
-    display: block;
-    width: 100%;
-    height: 100%;
-
-    colgroup,
-    thead,
-    tfoot {
-      display: none;
-    }
 
     // Layout
     tbody {
@@ -60,6 +54,7 @@
             right: 0;
             bottom: 0;
             left: 0;
+            z-index: -1;
           }
 
           &::after {
@@ -241,92 +236,15 @@
 
     // Spacing
     @for $i from 1 through 20 {
-      &.data-spacing-#{$i} {
-        tbody tr {
-          padding-inline-start: $i * 1px;
-          padding-inline-end: $i * 1px;
-        }
-      }
-    }
-    @for $i from 1 through 20 {
+      &.data-spacing-#{$i},
       &.datasets-spacing-#{$i} {
-        tbody tr td {
+          tbody tr td::before {
           margin-inline-start: $i * 1px;
           margin-inline-end: $i * 1px;
         }
       }
     }
 
-    // Axes
-    &.show-primary-axis {
-      &:not(.reverse) {
-        tbody tr {
-          border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
-        }
-      }
-      &.reverse {
-        tbody tr {
-          border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
-        }
-      }
-    }
-    @for $i from 1 through $max-axes {
-      &.show-#{$i}-secondary-axes {
-        &:not(.reverse) {
-          tbody tr {
-            background-size: 100% (100% / $i);
-            background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
-          }
-        }
-        &.reverse {
-          tbody tr {
-            background-size: 100% (100% / $i);
-            background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
-          }
-        }
-      }
-    }
-    &.show-data-axes {
-      tbody tr {
-        border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-    &.show-dataset-axes { // TODO: fix this
-      tbody tr td {
-        border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type td {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type td {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-
-    // Hover
-    &.hover {
-      tr:hover {
-        background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
-      }
-      td:hover {
-        opacity: .75;
-      }
-    }
-
   }
 
 }
diff --git a/src/charts/_bar.scss b/src/charts/_bar.scss
@@ -1,14 +1,9 @@
+/*
+ * Bar Chart
+ */
 .charts-css {
 
   &.bar {
-    display: block;
-    width: 100%;
-
-    colgroup,
-    thead,
-    tfoot {
-      display: none;
-    }
 
     // Layout
     tbody {
@@ -220,76 +215,6 @@
       }
     }
 
-    // Axes
-    &.show-primary-axis {
-      &:not(.reverse) {
-        tbody tr {
-          border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
-        }
-      }
-      &.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(.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));
-          }
-        }
-        &.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));
-          }
-        }
-      }
-    }
-    &.show-data-axes {
-      tbody tr {
-        border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type {
-          border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type {
-          border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-    &.show-dataset-axes { // TODO: fix this
-      tbody tr td {
-        border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type td {
-          border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type td {
-          border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-
-    // Hover
-    &.hover {
-      tr:hover {
-        background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
-      }
-      td:hover {
-        opacity: .75;
-      }
-    }
-
   }
 
 }
diff --git a/src/charts/_column.scss b/src/charts/_column.scss
@@ -1,15 +1,9 @@
+/*
+ * Column Chart
+ */
 .charts-css {
 
   &.column {
-    display: block;
-    width: 100%;
-    height: 100%;
-
-    colgroup,
-    thead,
-    tfoot {
-      display: none;
-    }
 
     // Layout
     tbody {
@@ -220,76 +214,6 @@
       }
     }
 
-    // Axes
-    &.show-primary-axis {
-      &:not(.reverse) {
-        tbody tr {
-          border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
-        }
-      }
-      &.reverse {
-        tbody tr {
-          border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
-        }
-      }
-    }
-    @for $i from 1 through $max-axes {
-      &.show-#{$i}-secondary-axes {
-        &:not(.reverse) {
-          tbody tr {
-            background-size: 100% (100% / $i);
-            background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
-          }
-        }
-        &.reverse {
-          tbody tr {
-            background-size: 100% (100% / $i);
-            background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
-          }
-        }
-      }
-    }
-    &.show-data-axes {
-      tbody tr {
-        border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-    &.show-dataset-axes { // TODO: fix this
-      tbody tr td {
-        border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-      }
-      &:not(.reverse-data) {
-        tbody tr:first-of-type td {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-      &.reverse-data {
-        tbody tr:last-of-type td {
-          border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
-        }
-      }
-    }
-
-    // Hover
-    &.hover {
-      tr:hover {
-        background-color: var(--tr-hover-color, rgba(0, 0, 0, .05));
-      }
-      td:hover {
-        opacity: .75;
-      }
-    }
-
   }
 
 }
diff --git a/src/charts/_donut.scss b/src/charts/_donut.scss
@@ -1,15 +1,9 @@
+/*
+ * Donut Chart
+ */
 .charts-css {
 
   &.donut {
-    display: block;
-    width: 100%;
-    height: 100%;
-
-    colgroup,
-    thead,
-    tfoot {
-      display: none;
-    }
 
     // Layout
     tbody {