fix(dashboard/overview): graphs on Safari (#1771)

There seems to be a bug in Safari with flex layout, hard coding the height of the graph seems to do the trick.

Fixes #1755
This commit is contained in:
Nicolas Raynaud
2016-11-29 09:21:04 +01:00
committed by Julien Fontanet
parent f0a430f350
commit 82b1b81999
3 changed files with 13 additions and 6 deletions

View File

@@ -27,6 +27,13 @@ $ct-series-colors: (
flex-direction: column-reverse; flex-direction: column-reverse;
} }
// safari has a bug in flex computing that prevent charts from showing see #1755
// by fixing the height with a value found in Chrome it seems like it fixes the issue without breaking the layout
// elsewhere
.dashboardItem .ct-chart {
height: 150px;
}
// Line in charts with only 2px in width // Line in charts with only 2px in width
.ct-line { .ct-line {
stroke-width: 2px; stroke-width: 2px;

View File

@@ -1,7 +1,7 @@
.tooltipEnabled { .tooltipEnabled {
background-color: #222; background-color: #222;
border-radius: 3px; border-radius: 3px;
border: 1px solid $fff; border: 1px solid #fff;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
font-size: 13px; font-size: 13px;

View File

@@ -203,7 +203,7 @@ export default class Overview extends Component {
<CardHeader> <CardHeader>
<Icon icon='memory' /> {_('memoryStatePanel')} <Icon icon='memory' /> {_('memoryStatePanel')}
</CardHeader> </CardHeader>
<CardBlock> <CardBlock className='dashboardItem'>
<ChartistGraph <ChartistGraph
data={{ data={{
labels: ['Used Memory', 'Total Memory'], labels: ['Used Memory', 'Total Memory'],
@@ -227,7 +227,7 @@ export default class Overview extends Component {
<Icon icon='cpu' /> {_('cpuStatePanel')} <Icon icon='cpu' /> {_('cpuStatePanel')}
</CardHeader> </CardHeader>
<CardBlock> <CardBlock>
<div className='ct-chart'> <div className='ct-chart dashboardItem'>
<ChartistGraph <ChartistGraph
data={{ data={{
labels: ['vCPUs', 'CPUs'], labels: ['vCPUs', 'CPUs'],
@@ -252,7 +252,7 @@ export default class Overview extends Component {
<Icon icon='disk' /> {_('srUsageStatePanel')} <Icon icon='disk' /> {_('srUsageStatePanel')}
</CardHeader> </CardHeader>
<CardBlock> <CardBlock>
<div className='ct-chart'> <div className='ct-chart dashboardItem'>
<BlockLink to='/dashboard/health'> <BlockLink to='/dashboard/health'>
<ChartistGraph <ChartistGraph
data={{ data={{
@@ -318,7 +318,7 @@ export default class Overview extends Component {
<CardHeader> <CardHeader>
<Icon icon='vm-force-shutdown' /> {_('vmStatePanel')} <Icon icon='vm-force-shutdown' /> {_('vmStatePanel')}
</CardHeader> </CardHeader>
<CardBlock> <CardBlock className='dashboardItem'>
<BlockLink to='/home?t=VM'> <BlockLink to='/home?t=VM'>
<ChartistGraph <ChartistGraph
data={{ data={{
@@ -340,7 +340,7 @@ export default class Overview extends Component {
<CardHeader> <CardHeader>
<Icon icon='disk' /> {_('srTopUsageStatePanel')} <Icon icon='disk' /> {_('srTopUsageStatePanel')}
</CardHeader> </CardHeader>
<CardBlock> <CardBlock className='dashboardItem'>
<BlockLink to='/dashboard/health'> <BlockLink to='/dashboard/health'>
<ChartistGraph <ChartistGraph
style={{strokeWidth: '30px'}} style={{strokeWidth: '30px'}}