diff --git a/README.md b/README.md
index d854a54..4d9846e 100644
--- a/README.md
+++ b/README.md
@@ -75,10 +75,16 @@ Some basic configuration options can be found in the file `index.jsx` in the top
* `tempUnit` `{String}` - CPU temperature unit, either `C` (Celsius) or `F` (Fahrenheit)
+* `position` `{String}` - Screen corner position, either `top-left`, `top-right`, `bottom-left` or `bottom-right`
+
* `top` `{String}` - Top position in px (e.g. `100px`)
* `left` `{String}` - Left position in px (e.g. `100px`)
+* `bottom` `{String}` - Bottom position in px (e.g. `100px`)
+
+* `right` `{String}` - Right position in px (e.g. `100px`)
+
* `animations` `{Boolean}` - Icon animations flag, either `true` or `false`
* `width` `{Number}` - Stat donut chart width in px (e.g. `74`)
diff --git a/index.css b/index.css
index d8b5232..d19e8f0 100644
--- a/index.css
+++ b/index.css
@@ -6,9 +6,26 @@
}
.stats {
+ position: absolute;
display: flex;
}
+.stats.top-left {
+ justify-content: flex-start;
+}
+
+.stats.top-right {
+ justify-content: flex-end;
+}
+
+.stats.bottom-left {
+ justify-content: flex-start;
+}
+
+.stats.bottom-right {
+ justify-content: flex-end;
+}
+
.stat {
position: relative;
}
diff --git a/index.jsx b/index.jsx
index 41da194..ea83bd5 100644
--- a/index.jsx
+++ b/index.jsx
@@ -38,9 +38,12 @@ const config = {
],
/* Temperature unit, either 'C' or 'F' */
tempUnit: 'C',
- /* Widget position (absolute) */
+ /* Widget position */
+ position: 'top-left',
top: '320px',
left: '14px',
+ bottom: '0px',
+ right: '0px',
/* Stat position */
width: '72',
height: '40',
@@ -71,8 +74,6 @@ export const className = `
font-family: 'Helvetica Neue';
font-size: 16px;
color: ${config.color};
- top: ${config.top};
- left: ${config.left};
`;
const isEmpty = (value) => {
diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx
index cf4b5ce..fd67c84 100644
--- a/src/components/Stats.jsx
+++ b/src/components/Stats.jsx
@@ -146,6 +146,21 @@ class Stats extends React.Component {
return key.replace(/\./, '-');
}
+ getPosition(config) {
+ switch(config.position) {
+ case 'top-left':
+ return {top: config.top, left: config.left}
+ case 'bottom-left':
+ return {bottom: config.bottom, left: config.left}
+ case 'top-right':
+ return {top: config.top, right: config.right}
+ case 'bottom-right':
+ return {bottom: config.bottom, right: config.right}
+ default:
+ return {top: config.top, left: config.left}
+ }
+ }
+
isObject(obj) {
return typeof obj === 'object' && obj !== null;
}
@@ -169,9 +184,12 @@ class Stats extends React.Component {
}
render() {
- let parsedData = IStatsParser.parse(this.props.output),
+ let config = this.props.config,
+ clsName = 'stats',
+ position = this.getPosition(config),
+ parsedData = IStatsParser.parse(this.props.output),
data = Transformer.transform(parsedData),
- stats = this.props.config.stats
+ stats = config.stats
.filter(item => {
let key = this.isObject(item) ? item.key : item,
ref = this.getRef(key);
@@ -182,7 +200,7 @@ class Stats extends React.Component {
this.resetFanAnimation(data, key);
return