line charts

assets/dashboard.css

@@ -5,13 +5,14 @@ body {
 
 .container {
   display: grid;
-  grid-template-columns: minmax(200px, 1fr) 2fr 1.5fr;
+  grid-template-columns: 400px 2fr 1.6fr;
   gap: 20px;
 }
 
 #sidebar {
   background-color: #171b2e;
-  height: 100vh;
+  width: 400px;
+  height: 100%;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
 }
@@ -26,23 +27,29 @@ body {
 #top_container,
 #mid_container,
 #bottom_container {
-  background-color: #bb69f4;
+  box-sizing: border-box;
+  background-color: #171b2e;
   border-radius: 20px;
   width: 100%;
+  padding: 30px; 
 }
 
 .right_container {
   display: grid;
-  grid-template-rows: 450px 450px;
   gap: 20px;
   padding-top: 20px;
   padding-right: 20px;
+  max-height: calc(100vh - 40px);
 }
 
 .right_box {
-  background-color: #bb69f4;
+  box-sizing: border-box;
+  padding: 30px;
+  background-color: #171b2e;
   border-radius: 20px;
   width: 100%;
+  height: 100%;
+  overflow: auto;
 }
 
 @media (max-width: 1000px) {
@@ -57,6 +64,40 @@ body {
     display: none;
     height: 150px;
     border-radius: 20px;
+  }
+
+  .right_container {
+    padding-top: 10px;
+    aspect-ratio: 1 / 1;
     width: 100%;
   }
-}
+}
+
+
+.line-chart {
+  width: 100%;
+  height: 100%;
+}
+
+
+.line-chart-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.line-chart .fill {
+  background: linear-gradient(to right, red, yellow);
+  -webkit-mask: url(#svg-path);
+  mask: url(#svg-path);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+.line-chart .line {
+  stroke-width: 1px;
+}