diff --git a/examples/chart.html b/examples/chart.html new file mode 100644 index 0000000..c48f727 --- /dev/null +++ b/examples/chart.html @@ -0,0 +1,155 @@ + + + + + + Chart Example + + + + + + + +
+ +
+
+ Vertical Bar Chart +
+
+
80%
+
60%
+
100%
+
+
+
100%
+
75%
+
50%
+
25%
+
+
+
2018
+
2019
+
2020
+
+
+
+
+

+ +
+
+ Horizontal Bar Chart +
+
+
80%
+
60%
+
100%
+
+
+
2018
+
2019
+
2020
+
+
+
25%
+
50%
+
75%
+
100%
+
+
+
+
+ + \ No newline at end of file diff --git a/src/components/chart.scss b/src/components/chart.scss new file mode 100644 index 0000000..51c7e31 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/tuicss.scss b/src/tuicss.scss index 5056906..0b33563 100644 --- a/src/tuicss.scss +++ b/src/tuicss.scss @@ -29,4 +29,5 @@ @import './components/background.scss'; @import './components/border.scss'; @import './components/grid.scss'; -@import './components/modal.scss'; \ No newline at end of file +@import './components/modal.scss'; +@import './components/chart.scss'; \ No newline at end of file