Commit efb3284a authored by Orne Brocaar's avatar Orne Brocaar
Browse files

Fix doughnut chart styling regression after chartjs update.

parent 0657d14a
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles";
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
......@@ -22,6 +23,16 @@ import InternalStore from "../../stores/InternalStore";
import theme from "../../theme";
const styles = {
doughtnutChart: {
maxWidth: "350px",
padding: 0,
margin: "auto",
display: "block",
},
};
class ListGatewaysMap extends Component {
constructor() {
super();
......@@ -165,7 +176,7 @@ class DevicesActiveInactive extends Component {
<Card>
<CardHeader title="Active devices" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -173,6 +184,8 @@ class DevicesActiveInactive extends Component {
}
}
DevicesActiveInactive = withStyles(styles)(DevicesActiveInactive);
class GatewaysActiveInactive extends Component {
render() {
......@@ -203,7 +216,7 @@ class GatewaysActiveInactive extends Component {
<Card>
<CardHeader title="Active gateways" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -211,6 +224,8 @@ class GatewaysActiveInactive extends Component {
}
}
GatewaysActiveInactive = withStyles(styles)(GatewaysActiveInactive);
class DevicesDataRates extends Component {
getColor = (dr) => {
......@@ -246,7 +261,7 @@ class DevicesDataRates extends Component {
<Card>
<CardHeader title="Device data-rate usage" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -254,6 +269,8 @@ class DevicesDataRates extends Component {
}
}
DevicesDataRates = withStyles(styles)(DevicesDataRates);
class Dashboard extends Component {
constructor() {
......
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
......@@ -19,6 +20,16 @@ import InternalStore from "../../stores/InternalStore";
import theme from "../../theme";
const styles = {
doughtnutChart: {
maxWidth: "350px",
padding: 0,
margin: "auto",
display: "block",
},
};
class ListGatewaysMap extends Component {
constructor() {
super();
......@@ -162,7 +173,7 @@ class DevicesActiveInactive extends Component {
<Card>
<CardHeader title="Active devices" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -170,6 +181,8 @@ class DevicesActiveInactive extends Component {
}
}
DevicesActiveInactive = withStyles(styles)(DevicesActiveInactive);
class GatewaysActiveInactive extends Component {
render() {
......@@ -199,7 +212,7 @@ class GatewaysActiveInactive extends Component {
<Card>
<CardHeader title="Active gateways" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -207,6 +220,7 @@ class GatewaysActiveInactive extends Component {
}
}
GatewaysActiveInactive = withStyles(styles)(GatewaysActiveInactive);
class DevicesDataRates extends Component {
......@@ -243,7 +257,7 @@ class DevicesDataRates extends Component {
<Card>
<CardHeader title="Device data-rate usage" />
<CardContent>
{data && <Doughnut data={data} options={options} />}
{data && <Doughnut data={data} options={options} className={this.props.classes.doughtnutChart} />}
{!data && <div>No data available.</div>}
</CardContent>
</Card>
......@@ -251,6 +265,8 @@ class DevicesDataRates extends Component {
}
}
DevicesDataRates = withStyles(styles)(DevicesDataRates);
class OrganizationDashboard extends Component {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment