Skip to content
Permalink
Browse files

Fixed charts responsive

  • Loading branch information...
devias-io committed May 11, 2019
1 parent c478380 commit f12f256e406be56e5c31b7e4d504d5e847451deb
@@ -21,3 +21,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
@@ -1,10 +1,11 @@
# Change Log

## [0.1.1] 2019-05-10
## [0.1.1] 2019-05-11

### Updates

- Updated README.md
- Added docs for IE11 polyfill
- Removed unused scss from assets
- Removed unused components from shared components
- Removed `authGuard` since it won't be used in this version
@@ -59,6 +59,7 @@ material-react-dashboard
├── package.json
├── README.md
├── public
├── docs
└── src
├── assets
│ └── scss
@@ -0,0 +1,34 @@
# Polyfill for IE11

As part of this [issue](https://github.com/devias-io/react-material-dashboard/issues/1) here are the steps to add basic support for IE11.

## Install dependencies

`yarn add react-app-polyfill core-js`

## Import polyfills

Create a file `src/polyfill.js` with the following imports

```javascript
import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';
```

Import polyfill file in `src/index.js`

```javascript
import './polyfills';
```

## Update browserlist

Open `package.json` and update

```diff
"browserslist": [
- "not ie <= 11",
+ "not ie < 10",
```
@@ -22,6 +22,7 @@ import Routes from './Routes';
// Browser history
const browserHistory = createBrowserHistory();

// Configure ChartJS
Chart.helpers.extend(Chart.elements.Rectangle.prototype, { draw });

export default class App extends Component {
@@ -1,3 +1,6 @@
// ChartJS extension rounded bar chart
// https://codepen.io/jedtrow/full/ygRYgo

export function draw() {
const { ctx } = this._chart;
const vm = this._view;
@@ -26,7 +26,8 @@ export default theme => ({
profile: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
alignItems: 'center',
minHeight: 'fit-content'
},
avatar: {
width: '100px',
@@ -98,7 +98,7 @@ class NotificationList extends Component {
color="primary"
component={Link}
size="small"
to="/notifications"
to="#"
variant="contained"
>
See all
@@ -31,8 +31,7 @@ export default theme => ({
},
iconWrapper: {},
icon: {
color: theme.palette.text.secondary,
opacity: 0.2,
color: theme.palette.common.neutral,
width: '4rem',
height: '4rem',
fontSize: '4rem'
@@ -11,7 +11,9 @@ export const data = {
palette.danger.main,
palette.warning.main
],
borderWidth: 0
borderWidth: 8,
borderColor: palette.common.white,
hoverBorderColor: palette.common.white
}
],
labels: ['Desktop', 'Tablet', 'Mobile']
@@ -22,6 +24,20 @@ export const options = {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 70
animation: false,
cutoutPercentage: 80,
layout: { padding: 0 },
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
borderWidth: 1,
borderColor: palette.border,
backgroundColor: palette.common.white,
titleFontColor: palette.text.primary,
bodyFontColor: palette.text.secondary,
footerFontColor: palette.text.secondary
}
};
@@ -4,9 +4,8 @@ export default theme => ({
margin: -theme.spacing.unit * 2
},
chartWrapper: {
height: '300px',
maxHeight: '100%',
margin: '0 auto'
position: 'relative',
height: '300px'
},
stats: {
marginTop: theme.spacing.unit * 2,
@@ -96,7 +96,7 @@ class OrdersTable extends Component {
<Portlet className={rootClassName}>
<PortletHeader noDivider>
<PortletLabel
subtitle={`${ordersTotal} total`}
subtitle={`${ordersTotal} in total`}
title="Latest orders"
/>
<PortletToolbar>
@@ -15,6 +15,10 @@ export default theme => ({
cursor: 'pointer'
},
customerCell: {
maxWidth: '200px',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
fontWeight: 500
},
statusWrapper: {
@@ -23,8 +23,7 @@ export default theme => ({
},
iconWrapper: {},
icon: {
color: theme.palette.text.secondary,
opacity: 0.2,
color: theme.palette.common.neutral,
width: '4rem',
height: '4rem',
fontSize: '4rem'
@@ -8,33 +8,42 @@ export const data = {
{
label: 'This year',
backgroundColor: palette.primary.main,
data: [18000, 5000, 19000, 27000, 29000, 19000, 20000]
data: [18, 5, 19, 27, 29, 19, 20]
},
{
label: 'Last year',
backgroundColor: palette.common.neutral,
data: [11000, 20000, 12000, 29000, 30000, 25000, 13000]
data: [11, 20, 12, 29, 30, 25, 13]
}
]
};

// Chart options
export const options = {
responsive: true,
maintainAspectRatio: false,
animation: false,
legend: { display: false },
cornerRadius: 20,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
borderWidth: 1,
borderColor: palette.border,
backgroundColor: palette.common.white,
titleFontColor: palette.text.primary,
bodyFontColor: palette.text.secondary,
footerFontColor: palette.text.secondary
},
layout: { padding: 0 },
scales: {
xAxes: [
{
barThickness: 16,
maxBarThickness: 16,
barPercentage: 1,
barThickness: 12,
maxBarThickness: 10,
barPercentage: 0.5,
categoryPercentage: 0.5,
ticks: {
fontColor: palette.text.secondary
},
@@ -49,12 +58,7 @@ export const options = {
ticks: {
fontColor: palette.text.secondary,
beginAtZero: true,
min: 0,
callback: function(value) {
const v = value / 1000;

return v === 0 ? 0 : v + 'K';
}
min: 0
},
gridLines: {
borderDash: [2],
@@ -67,6 +71,5 @@ export const options = {
}
}
]
},
responsiveAnimationDuration: 1000
}
};
@@ -4,9 +4,8 @@ export default theme => ({
marginRight: -theme.spacing.unit * 2
},
chartWrapper: {
minWidth: '100%',
height: '400px',
maxHeight: '100%'
position: 'relative'
},
portletFooter: {
display: 'flex',
@@ -31,8 +31,7 @@ export default theme => ({
},
iconWrapper: {},
icon: {
color: theme.palette.text.secondary,
opacity: 0.2,
color: theme.palette.common.neutral,
width: '4rem',
height: '4rem',
fontSize: '4rem'
@@ -45,6 +45,7 @@ class Dashboard extends Component {
>
<Grid
item
lg={3}
sm={6}
xl={3}
xs={12}
@@ -53,6 +54,7 @@ class Dashboard extends Component {
</Grid>
<Grid
item
lg={3}
sm={6}
xl={3}
xs={12}
@@ -61,6 +63,7 @@ class Dashboard extends Component {
</Grid>
<Grid
item
lg={3}
sm={6}
xl={3}
xs={12}
@@ -69,6 +72,7 @@ class Dashboard extends Component {
</Grid>
<Grid
item
lg={3}
sm={6}
xl={3}
xs={12}
@@ -16,7 +16,7 @@ const styles = theme => ({
},
iframe: {
width: '100%',
minHeight: '600px',
minHeight: '640px',
border: 0
}
});
@@ -94,10 +94,10 @@ class UsersTable extends Component {
const rootClassName = classNames(classes.root, className);

return (
<Portlet>
<Portlet className={rootClassName}>
<PortletContent noPadding>
<PerfectScrollbar>
<Table className={rootClassName}>
<Table>
<TableHead>
<TableRow>
<TableCell align="left">
@@ -1,6 +1,5 @@
export default theme => ({
root: {},
table: {},
tableRow: {
height: '64px'
},

0 comments on commit f12f256

Please sign in to comment.
You can’t perform that action at this time.