Axes: fix axes bugs

ChartsCSS · Oct 13, 2020 · 8eb7633 · 8eb7633
1 parent 2c5a375
commit 8eb7633
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/src/charts/_bar.scss b/src/charts/_bar.scss
@@ -186,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 )
-            );
+            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 ) );
           }
         }
       }

diff --git a/src/charts/_column.scss b/src/charts/_column.scss
@@ -179,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 ) );
+          }
         }
       }
     }

diff --git a/src/index.html b/src/index.html
@@ -193,7 +193,7 @@ <h2>Bar Chart</h2>
 
       <div>
         <h3>Single dataset</h3>
-        <table class="charts-css bar hover show-main-axis show-x-axes 1show-10-y-axes row-spacing-4">
+        <table class="charts-css bar hover show-main-axis show-x-axes show-1-y-axes row-spacing-4">
           <caption>Months Compare</caption>
           <thead>
             <tr>
@@ -256,7 +256,7 @@ <h3>Single dataset</h3>
 
       <div>
         <h3>Multiple reverse</h3>
-        <table class="charts-css bar hover show-main-axis 1show-x-axes multiple reverse reverse-datasets row-spacing-4">
+        <table class="charts-css bar hover show-main-axis multiple reverse reverse-datasets row-spacing-4">
           <caption>Countries Compare</caption>
           <thead>
             <tr>
@@ -297,7 +297,7 @@ <h3>Multiple reverse</h3>
 
       <div>
         <h3>Multiple labels-after</h3>
-        <table class="charts-css bar hover show-main-axis 1show-x-axes 1show-2-y-axes multiple labels-after row-spacing-4">
+        <table class="charts-css bar hover show-main-axis multiple labels-after row-spacing-4">
           <caption>Countries Compare</caption>
           <thead>
             <tr>
@@ -483,7 +483,7 @@ <h2>Column Chart</h2>
 
       <div>
         <h3>Single dataset</h3>
-        <table class="charts-css column hover show-main-axis show-y-axes 1show-10-x-axes row-spacing-4" style="height: 300px;">
+        <table class="charts-css column hover show-main-axis show-y-axes show-1-x-axes row-spacing-4" style="height: 300px;">
           <caption>Months Compare</caption>
           <thead>
             <tr>
@@ -546,7 +546,7 @@ <h3>Single dataset</h3>
 
       <div>
         <h3>Multiple reverse</h3>
-        <table class="charts-css column hover show-main-axis 1show-y-axes multiple reverse" style="height: 300px;">
+        <table class="charts-css column hover show-main-axis multiple reverse" style="height: 300px;">
           <caption>Countries Compare</caption>
           <thead>
             <tr>
@@ -587,7 +587,7 @@ <h3>Multiple reverse</h3>
 
       <div>
         <h3>Multiple labels-before</h3>
-        <table class="charts-css column hover show-main-axis 1show-y-axes 1show-2-x-axes multiple labels-before" style="height: 300px;">
+        <table class="charts-css column hover show-main-axis multiple labels-before" style="height: 300px;">
           <caption>Countries Compare</caption>
           <thead>
             <tr>