Chart feature (Part 1)

src/components/chart.scss

@@ -0,0 +1,98 @@
+/* Chart container */
+.tui-chart-vertical {
+    position: relative;
+    background-color: black;
+}
+.tui-chart-horizontal {
+    position: relative;
+    background-color: black;
+}
+
+/* Chart display */
+.tui-chart-vertical .tui-chart-display {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    left: 50px;
+    right: 0px;
+    bottom: 30px;
+    align-items: flex-end;
+    border-bottom: 2px solid white;
+    border-left: 2px solid white;
+}
+.tui-chart-horizontal .tui-chart-display {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    top: 0px;
+    left: 50px;
+    right: 0px;
+    bottom: 30px;
+    align-items: stretch;
+    border-bottom: 2px solid white;
+    border-left: 2px solid white;
+}
+
+/* Chart X axis */
+.tui-chart-x-axis {
+    display: flex;
+    position: absolute;
+    height: 30px;
+    left: 50px;
+    right: 0px;
+    bottom: 0px;
+    line-height: 30px;
+}
+
+/* Chart Y axis */
+.tui-chart-y-axis {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 30px;
+    width: 50px;
+}
+
+/* Chart legends */
+.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
+    flex-basis: 100%;
+    text-align: center;
+}
+.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
+    flex: 1;
+    text-align: right;
+    padding-right: 2px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
+    flex-basis: 100%;
+    text-align: right;
+}
+.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
+    flex: 1;
+    text-align: right;
+    padding-right: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Chart value */
+.tui-chart-vertical .tui-chart-display .tui-chart-value {
+    margin: 0px 30px;
+    flex-basis: 100%;
+    text-align: center;
+}
+.tui-chart-horizontal .tui-chart-display .tui-chart-value {
+    margin: 5px 0px;
+    flex: 1;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    align-content: flex-start;
+    justify-content: flex-end;
+}

src/tuicss.scss

@@ -29,4 +29,5 @@
 @import './components/background.scss';
 @import './components/border.scss';
 @import './components/grid.scss';
-@import './components/modal.scss';
+@import './components/modal.scss';
+@import './components/chart.scss';