Chart (Part 1)
This commit is contained in:
vinibiavatti
parent
6dff41b95a
commit
4fd7f76200
42
CHANGELOG.md
Normal file
42
CHANGELOG.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# TuiCss ChangeLog
|
||||||
|
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
|
||||||
|
|
||||||
|
#### 2.0.0
|
||||||
|
- Chart example page
|
||||||
|
- Contributing markdown
|
||||||
|
- Readme update
|
||||||
|
- Changelog markdown
|
||||||
|
- Jquery removed (Vanilla Javascript)
|
||||||
|
- Chart component
|
||||||
|
|
||||||
|
#### 1.0.0
|
||||||
|
- Utilities
|
||||||
|
- Examples
|
||||||
|
- DOS font
|
||||||
|
- Wiki documentation
|
||||||
|
- Button component
|
||||||
|
- Checkbox component
|
||||||
|
- Divider component
|
||||||
|
- Dropdown component
|
||||||
|
- Fieldset component
|
||||||
|
- Input component
|
||||||
|
- Navbar component
|
||||||
|
- Panel component
|
||||||
|
- Progressbar component
|
||||||
|
- Radio component
|
||||||
|
- Scrollbar component
|
||||||
|
- Sidenav component
|
||||||
|
- Statusbar component
|
||||||
|
- Table component
|
||||||
|
- Tablegrid component
|
||||||
|
- Tabs component
|
||||||
|
- Textarea component
|
||||||
|
- Window component
|
||||||
|
- Screen component
|
||||||
|
- Datetime component
|
||||||
|
- Shortcut component
|
||||||
|
- Shadow component
|
||||||
|
- Background component
|
||||||
|
- Border component
|
||||||
|
- Grid component
|
||||||
|
- Modal component
|
||||||
108
dist/tuicss.css
vendored
108
dist/tuicss.css
vendored
@ -745,7 +745,12 @@ input[type=button] {
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding: 2px; }
|
padding: 2px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none; }
|
||||||
.tui-fieldset-button.left {
|
.tui-fieldset-button.left {
|
||||||
right: initial;
|
right: initial;
|
||||||
left: 16px !important; }
|
left: 16px !important; }
|
||||||
@ -1925,3 +1930,104 @@ input[type=button] {
|
|||||||
display: none; }
|
display: none; }
|
||||||
.tui-overlap.active {
|
.tui-overlap.active {
|
||||||
display: block !important; }
|
display: block !important; }
|
||||||
|
|
||||||
|
/* 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-vertical .tui-chart-display.no-x-axis {
|
||||||
|
bottom: 0px; }
|
||||||
|
.tui-chart-vertical .tui-chart-display.no-y-axis {
|
||||||
|
left: 0px; }
|
||||||
|
|
||||||
|
.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; }
|
||||||
|
.tui-chart-horizontal .tui-chart-display.no-x-axis {
|
||||||
|
bottom: 0px; }
|
||||||
|
.tui-chart-horizontal .tui-chart-display.no-y-axis {
|
||||||
|
left: 0px; }
|
||||||
|
|
||||||
|
/* 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 {
|
||||||
|
flex-basis: 100%;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
overflow: hidden; }
|
||||||
|
|||||||
2
dist/tuicss.min.css
vendored
2
dist/tuicss.min.css
vendored
File diff suppressed because one or more lines are too long
@ -24,22 +24,22 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td rowspan="2" width="60%" class="blue-168-text">
|
<td rowspan="2" width="60%" class="blue-168-text">
|
||||||
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 135px" />
|
<br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
|
||||||
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 135px" />
|
<br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
|
||||||
<br>
|
<br>
|
||||||
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 135px" />]
|
<br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
|
||||||
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 135px" />
|
<br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
|
||||||
<br>
|
<br>
|
||||||
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
<br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||||
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
<br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||||
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 135px" />
|
<br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
|
||||||
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 135px" />
|
<br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
|
||||||
<br>
|
<br>
|
||||||
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 135px" />
|
<br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
|
||||||
<br>
|
<br>
|
||||||
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 135px" />
|
<br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
|
||||||
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 135px" />
|
<br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
|
||||||
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 135px" />
|
<br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
|
||||||
</td>
|
</td>
|
||||||
<td width="40%" class="center">Item Specified Help</td>
|
<td width="40%" class="center">Item Specified Help</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -4,100 +4,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Chart Example</title>
|
<title>Chart Example</title>
|
||||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
|
||||||
<script src="../dist/tuicss.min.js"></script>
|
<script src="../dist/tuicss.min.js"></script>
|
||||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||||
<style>
|
|
||||||
.tui-chart-vertical {
|
|
||||||
position: relative;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
.tui-chart-horizontal {
|
|
||||||
position: relative;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.tui-chart-x-axis {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
height: 30px;
|
|
||||||
left: 50px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
.tui-chart-y-axis {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
bottom: 30px;
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="center">
|
<body class="center">
|
||||||
@ -108,20 +16,31 @@
|
|||||||
<legend class="">Vertical Bar Chart</legend>
|
<legend class="">Vertical Bar Chart</legend>
|
||||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||||
<div class="tui-chart-display">
|
<div class="tui-chart-display">
|
||||||
<div class="tui-chart-value red-168" style="height: 80%;">80%</div>
|
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
|
||||||
<div class="tui-chart-value green-168" style="height: 60%;">60%</div>
|
<div class="tui-chart-value green-168" style="height: 30%;">30%</div>
|
||||||
<div class="tui-chart-value blue-168" style="height: 100%;">100%</div>
|
<div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
|
||||||
|
<div class="tui-chart-value yellow-168" style="height: 90%;">90%</div>
|
||||||
|
<div class="tui-chart-value purple-168" style="height: 60%;">60%</div>
|
||||||
|
<div class="tui-chart-value orange-168" style="height: 100%;">100%</div>
|
||||||
|
<div class="tui-chart-value cyan-168" style="height: 10%;">10%</div>
|
||||||
|
<div class="tui-chart-value red-168" style="height: 75%;">75%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tui-chart-y-axis">
|
<div class="tui-chart-y-axis">
|
||||||
<div class="tui-chart-legend">100%</div>
|
<div class="tui-chart-legend">100%</div>
|
||||||
<div class="tui-chart-legend">75%</div>
|
<div class="tui-chart-legend">80%</div>
|
||||||
<div class="tui-chart-legend">50%</div>
|
<div class="tui-chart-legend">60%</div>
|
||||||
<div class="tui-chart-legend">25%</div>
|
<div class="tui-chart-legend">40%</div>
|
||||||
|
<div class="tui-chart-legend">20%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tui-chart-x-axis">
|
<div class="tui-chart-x-axis">
|
||||||
<div class="tui-chart-legend">2018</div>
|
<div class="tui-chart-legend">s1</div>
|
||||||
<div class="tui-chart-legend">2019</div>
|
<div class="tui-chart-legend">s2</div>
|
||||||
<div class="tui-chart-legend">2020</div>
|
<div class="tui-chart-legend">s3</div>
|
||||||
|
<div class="tui-chart-legend">s4</div>
|
||||||
|
<div class="tui-chart-legend">s5</div>
|
||||||
|
<div class="tui-chart-legend">s6</div>
|
||||||
|
<div class="tui-chart-legend">s7</div>
|
||||||
|
<div class="tui-chart-legend">s8</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@ -151,5 +70,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<div class="tui-window black-168 left-align">
|
||||||
|
<fieldset class="tui-fieldset">
|
||||||
|
<legend class="">Chart (no axis legend)</legend>
|
||||||
|
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||||
|
<div class="tui-chart-display no-x-axis no-y-axis">
|
||||||
|
<div class="tui-chart-value red-168 animated" style="height: 50%;">50%</div>
|
||||||
|
<div class="tui-chart-value green-168" style="height: 70%;">70%</div>
|
||||||
|
<div class="tui-chart-value blue-168" style="height: 30%;">30%</div>
|
||||||
|
<div class="tui-chart-value yellow-168" style="height: 100%;">100%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const { series, src, dest } = require('gulp');
|
const { series, src, dest } = require('gulp');
|
||||||
const sass = require('gulp-sass');
|
const sass = require('gulp-sass');
|
||||||
const gulpClean = require('gulp-clean');
|
const gulpClean = require('gulp-clean');
|
||||||
@ -13,13 +12,14 @@ function clean() {
|
|||||||
.pipe(gulpClean());
|
.pipe(gulpClean());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Compile scss
|
// Compile scss and copy to dist folder (.css)
|
||||||
function sassCompile() {
|
function sassCompile() {
|
||||||
return src('src/tuicss.scss')
|
return src('src/tuicss.scss')
|
||||||
.pipe(sass())
|
.pipe(sass())
|
||||||
.pipe(dest(distPath));
|
.pipe(dest(distPath));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Minify css and copy to dist folder (.min.css)
|
||||||
function minifyCss() {
|
function minifyCss() {
|
||||||
return src(distPath + '/tuicss.css')
|
return src(distPath + '/tuicss.css')
|
||||||
.pipe(cleanCss())
|
.pipe(cleanCss())
|
||||||
@ -29,11 +29,13 @@ function minifyCss() {
|
|||||||
.pipe(dest(distPath));
|
.pipe(dest(distPath));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Copy js script to dist folder (.js)
|
||||||
function copyScript() {
|
function copyScript() {
|
||||||
return src('src/js/tuicss.js')
|
return src('src/js/tuicss.js')
|
||||||
.pipe(dest(distPath));
|
.pipe(dest(distPath));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Minify js script and copy to dist folder (.min.js)
|
||||||
function minifyJs() {
|
function minifyJs() {
|
||||||
return src(distPath + '/tuicss.js')
|
return src(distPath + '/tuicss.js')
|
||||||
.pipe(gulpMinify({
|
.pipe(gulpMinify({
|
||||||
@ -44,16 +46,19 @@ function minifyJs() {
|
|||||||
.pipe(dest(distPath));
|
.pipe(dest(distPath));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Copy images to dist folder (/images)
|
||||||
function copyImages() {
|
function copyImages() {
|
||||||
return src('src/images/*')
|
return src('src/images/*')
|
||||||
.pipe(dest(distPath + "/images"));
|
.pipe(dest(distPath + "/images"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Copy fonts to dist folder (/fonts)
|
||||||
function copyFonts() {
|
function copyFonts() {
|
||||||
return src('src/fonts/*')
|
return src('src/fonts/*')
|
||||||
.pipe(dest(distPath + "/fonts"));
|
.pipe(dest(distPath + "/fonts"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Export
|
||||||
exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
|
exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
12
package.json
12
package.json
@ -1,12 +1,14 @@
|
|||||||
{
|
{
|
||||||
"name": "tuicss",
|
"name": "tuicss",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "TuiCss is a framework made to develop text-based user interface applications (TUI)",
|
"description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"TUI",
|
"tui",
|
||||||
"Text based user interface",
|
"text based user interface",
|
||||||
"Turbo vision",
|
"turbo vision",
|
||||||
"TuiCss"
|
"tuicss",
|
||||||
|
"ncurses",
|
||||||
|
"msdos"
|
||||||
],
|
],
|
||||||
"main": "dist/tuicss.min.css",
|
"main": "dist/tuicss.min.css",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -19,6 +19,13 @@
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
border-bottom: 2px solid white;
|
border-bottom: 2px solid white;
|
||||||
border-left: 2px solid white;
|
border-left: 2px solid white;
|
||||||
|
|
||||||
|
&.no-x-axis {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
&.no-y-axis {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.tui-chart-horizontal .tui-chart-display {
|
.tui-chart-horizontal .tui-chart-display {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -31,6 +38,13 @@
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
border-bottom: 2px solid white;
|
border-bottom: 2px solid white;
|
||||||
border-left: 2px solid white;
|
border-left: 2px solid white;
|
||||||
|
|
||||||
|
&.no-x-axis {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
&.no-y-axis {
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Chart X axis */
|
/* Chart X axis */
|
||||||
@ -83,16 +97,16 @@
|
|||||||
|
|
||||||
/* Chart value */
|
/* Chart value */
|
||||||
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
.tui-chart-vertical .tui-chart-display .tui-chart-value {
|
||||||
margin: 0px 30px;
|
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
.tui-chart-horizontal .tui-chart-display .tui-chart-value {
|
||||||
margin: 5px 0px;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user