@material-ui/core#colors JavaScript Examples
The following examples show how to use
@material-ui/core#colors.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: "100%"
},
avatar: {
backgroundColor: colors.green[600],
height: 56,
width: 56
},
content: {
height: "100%"
}
}))
Example #2
| Source File: NavigationItem.js From SESTA-FMS with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = (theme) => ({
root: {},
item: {
display: "flex",
paddingTop: 0,
paddingBottom: 0,
},
button: {
color: colors.blueGrey[800],
padding: "10px 8px",
justifyContent: "flex-start",
textTransform: "none",
letterSpacing: 0,
width: "100%",
fontWeight: theme.typography.fontWeightMedium,
},
icon: {
color: theme.palette.icon,
width: 24,
height: 24,
display: "flex",
alignItems: "center",
marginRight: theme.spacing(1),
},
active: {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
"& $icon": {
color: theme.palette.primary.main,
},
},
})
Example #3
| Source File: UpgradePlan.js From git-insights with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
backgroundColor: colors.grey[50]
},
media: {
paddingTop: theme.spacing(2),
height: 80,
textAlign: 'center',
'& > img': {
height: '100%',
width: 'auto'
}
},
content: {
padding: theme.spacing(1, 2)
},
actions: {
padding: theme.spacing(1, 2),
display: 'flex',
justifyContent: 'center'
}
}))
Example #4
| Source File: SidebarNav.js From git-insights with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {},
item: {
display: 'flex',
paddingTop: 0,
paddingBottom: 0
},
button: {
color: colors.blueGrey[800],
padding: '10px 8px',
justifyContent: 'flex-start',
textTransform: 'none',
letterSpacing: 0,
width: '100%',
fontWeight: theme.typography.fontWeightMedium
},
icon: {
color: theme.palette.icon,
width: 24,
height: 24,
display: 'flex',
alignItems: 'center',
marginRight: theme.spacing(1)
},
active: {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
'& $icon': {
color: theme.palette.primary.main
}
},
divider: {
margin: theme.spacing(2, 0)
},
}))
Example #5
| Source File: TotalProfit.js From EMP with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.indigo[600],
height: 56,
width: 56
}
}))
Example #6
| Source File: TotalCustomers.js From EMP with MIT License | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.green[600],
height: 56,
width: 56
},
differenceIcon: {
color: colors.green[900]
},
differenceValue: {
color: colors.green[900],
marginRight: theme.spacing(1)
}
}))
Example #7
| Source File: TasksProgress.js From EMP with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.orange[600],
height: 56,
width: 56
}
}))
Example #8
| Source File: Budget.js From EMP with MIT License | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.red[600],
height: 56,
width: 56
},
differenceIcon: {
color: colors.red[900]
},
differenceValue: {
color: colors.red[900],
marginRight: theme.spacing(1)
}
}))
Example #9
| Source File: Info.js From management-center with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: theme.palette?.dashboard?.icons || colors.green[600],
height: 40,
width: 40
},
differenceIcon: {
color: colors.red[900]
},
differenceValue: {
color: colors.red[900],
marginRight: theme.spacing(1)
}
}))
Example #10
| Source File: UpgradePlan.js From telar-cli with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
backgroundColor: colors.grey[50]
},
media: {
paddingTop: theme.spacing(2),
height: 80,
textAlign: 'center',
'& > img': {
height: '100%',
width: 'auto'
}
},
content: {
padding: theme.spacing(1, 2)
},
actions: {
padding: theme.spacing(1, 2),
display: 'flex',
justifyContent: 'center'
}
}))
Example #11
| Source File: SidebarNav.js From telar-cli with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {},
item: {
display: 'flex',
paddingTop: 0,
paddingBottom: 0
},
button: {
color: colors.blueGrey[800],
padding: '10px 8px',
justifyContent: 'flex-start',
textTransform: 'none',
letterSpacing: 0,
width: '100%',
fontWeight: theme.typography.fontWeightMedium
},
icon: {
color: theme.palette.icon,
width: 24,
height: 24,
display: 'flex',
alignItems: 'center',
marginRight: theme.spacing(1)
},
active: {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
'& $icon': {
color: theme.palette.primary.main
}
}
}))
Example #12
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
theme = createTheme({
palette: {
background: {
dark: "#F4F6F8",
default: colors.common.white,
paper: colors.common.white
},
primary: {
main: colors.indigo[500]
},
secondary: {
main: colors.indigo[500]
},
text: {
primary: colors.blueGrey[900],
secondary: colors.blueGrey[600]
},
button: {
success: colors.green[300],
warning: colors.yellow[500],
dangerous: colors.red[300],
neutral: colors.indigo[100]
}
},
shadows,
typography
})
Example #13
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: "100%"
},
avatar: {
backgroundColor: colors.amber[500],
height: 56,
width: 56
},
content: {
height: "100%"
}
}))
Example #14
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.green[500],
height: 56,
width: 56
},
content: {
height: '100%'
}
}))
Example #15
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: '100%'
},
avatar: {
backgroundColor: colors.orange[600],
height: 56,
width: 56
},
content: {
height: '100%'
}
}))
Example #16
| Source File: index.js From flame-coach-web with MIT License | 6 votes |
|
useStyles = makeStyles(() => ({
root: {
height: "100%"
},
avatar: {
backgroundColor: colors.indigo[500],
height: 56,
width: 56
},
content: {
height: "100%"
}
}))
Example #17
| Source File: SideAndTopNavBar.js From medha-STPC with GNU Affero General Public License v3.0 | 5 votes |
|
useListStyles = makeStyles(theme => ({
root: {},
item: {
display: "flex",
paddingTop: "0",
paddingBottom: "0",
margin: "0px"
},
button: {
color: colors.blueGrey[800],
padding: "8px 0px 8px 10px",
justifyContent: "flex-start",
letterSpacing: 0,
width: "100%",
fontWeight: theme.typography.fontWeightBold,
borderRadius: "0px",
backgroundColor: "#fff",
borderLeft: "4px solid #fff",
fontSize: "12px",
color: "#010101",
textTransform: "Uppercase",
"&:hover": {
backgroundColor: "#fff7d8",
color: "010101",
borderLeft: "4px solid #f6c80a"
}
},
activeItem: {
backgroundColor: "#666",
color: "#f6c80a",
borderLeft: "4px solid #f6c80a"
},
active: {
color: "#010101",
backgroundColor: "#f1f1f1",
fontWeight: theme.typography.fontWeightBold
},
nested: {
paddingLeft: theme.spacing(0),
paddingTop: 0,
paddingBottom: 0,
"& a": {
fontSize: "13px",
paddingLeft: "51px",
paddingTop: "5px",
paddingBottom: "5px",
textTransform: "Capitalize",
color: "010101",
"&:active": {
backgroundColor: "#f1f1f1",
color: "010101"
},
"&:hover": {
backgroundColor: "#f1f1f1",
color: "010101",
borderLeft: "4px solid #f1f1f1"
}
}
},
padding: {
paddingTop: "0px",
paddingBottom: "0px"
},
expandPadding: {
paddingRight: "10px"
}
}))
Example #18
| Source File: NavigationItems.js From SESTA-FMS with GNU Affero General Public License v3.0 | 5 votes |
|
useStyles = makeStyles((theme) => ({
root: {},
item: {
display: "flex",
paddingTop: 0,
paddingBottom: 0,
},
button: {
color: colors.blueGrey[800],
padding: "10px 8px",
justifyContent: "flex-start",
textTransform: "none",
letterSpacing: 0,
width: "100%",
fontWeight: theme.typography.fontWeightMedium,
},
icon: {
color: theme.palette.icon,
width: 24,
height: 24,
display: "flex",
alignItems: "center",
marginRight: theme.spacing(1),
},
active: {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
"& $icon": {
color: theme.palette.primary.main,
},
},
masterMenuSubHeader: {
color: "#37474f",
width: "100%",
padding: "0px 8px",
fontWeight: "500",
letterSpacing: "0",
textTransform: "none",
justifyContent: "flex-start",
marginBottom: "0px !important",
},
masterMenuSpan: {
display: "inline-block",
verticalAlign: "middle",
padding: "0px 8px",
marginBottom: "0px !important",
},
masterMenuIcon: {
display: "inline-block",
verticalAlign: "middle",
marginBottom: "0px !important",
},
masterMenuExtendIcon: {
display: "inline-block",
verticalAlign: "middle",
marginBottom: "0px !important",
},
subMenuList: {
padding: "0px !important",
margin: "0px !important",
},
}))
Example #19
| Source File: index.js From conectadev with MIT License | 5 votes |
|
themes = [
{
darkMode: false,
palette: {
type: 'light',
primary: {
dark: colors.indigo.A700,
main: colors.indigo.A400,
light: colors.indigo.A200,
},
secondary: {
dark: colors.orange.A700,
main: colors.orange.A700,
light: colors.orange.A200,
},
background: {
default: colors.common.white,
dark: '#f4f6f8',
paper: colors.common.white,
},
text: {
primary: colors.blueGrey[900],
secondary: colors.blueGrey[600],
},
},
},
{
darkMode: true,
palette: {
type: 'dark',
primary: {
dark: colors.indigo.A700,
main: colors.indigo.A400,
light: colors.indigo.A200,
},
secondary: {
dark: colors.indigo.A700,
main: colors.indigo.A400,
light: colors.indigo.A200,
},
background: {
default: '#282C34',
dark: '#1c2025',
paper: '#282C34',
},
text: {
primary: '#e6e5e8',
secondary: '#adb0bb',
},
},
},
]
Example #20
| Source File: nav-menu.styles.js From horondi_admin with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
fontWeight: 600,
'& .MuiListItemIcon-root': {
color: theme.palette.textColor
}
},
drawerPaper: {
width: drawerWidth,
'&::-webkit-scrollbar': {
width: '5px'
},
'&::-webkit-scrollbar-track': {
backgroundColor: '#f1f1f1'
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#888'
},
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: '#555'
}
},
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3)
},
selectedCategory: {
color: theme.palette.secondary.main,
'& .MuiListItemIcon-root': {
color: colors.indigo[400]
}
},
nested: {
paddingLeft: theme.spacing(4)
},
sliderTab: {
paddingLeft: theme.spacing(8)
}
}))
Example #21
| Source File: app.pallete.js From horondi_admin with MIT License | 5 votes |
|
paletteGenerator = (colorScheme) => ({
black,
white,
red,
textColor: theme[colorScheme].textColor,
bodyColor: theme[colorScheme].bodyColor,
primary: {
contrastText: white,
dark: colors.indigo[900],
main: colors.indigo[500],
light: colors.indigo[100]
},
secondary: {
contrastText: white,
dark: colors.blue[900],
main: colors.blue.A400,
light: colors.blue.A400
},
success: {
contrastText: white,
dark: colors.green[900],
main: colors.green[600],
light: colors.green[400]
},
info: {
contrastText: white,
dark: colors.blue[900],
main: colors.blue[600],
light: colors.blue[400]
},
warning: {
contrastText: white,
dark: colors.orange[900],
main: colors.orange[600],
light: colors.orange[400]
},
error: {
contrastText: white,
dark: colors.red[900],
main: colors.red[600],
light: colors.red[400]
},
icon: colors.blueGrey[600],
type: colorScheme
})
Example #22
| Source File: index.js From horondi_admin with MIT License | 4 votes |
|
config = {
fetchPolicy: 'no-cache',
app: {
title: 'Horondi Admin Portal',
serverUrl: 'http://localhost:5000/',
drawerWidth: 363,
snackBarDuration: 4000,
rowsPerPageOptions: [10, 25, 50, 100]
},
languages,
tokenName: 'HORONDI_AUTH_TOKEN',
templates: {
categoryTemplate: {
available: false,
code: '',
images: {
large: '',
medium: '',
small: '',
thumbnail: ''
},
name: []
}
},
imgSizes: {
large: 'large',
medium: 'medium',
small: 'small',
thumbnail: 'thumbnail'
},
userRole: {
user: 'user',
admin: 'admin',
superadmin: 'superadmin'
},
userRoles: [
{ role: 'user', label: 'Користувач' },
{ role: 'admin', label: 'Адмін' },
{ role: 'superadmin', label: 'Суперадмін' }
],
allowedforRegistrationRoles: ['admin', 'superadmin'],
tabNames: {
users: ['Користувачі', 'Адміністратори'],
userOrdersComments: ['Замовлення', 'Коментарі']
},
tableSizes: {
SMALL_SIZE: 'small',
DEFAULT_SIZE: 'medium'
},
iconSizes: {
SMALL_SIZE: 'small',
DEFAULT_SIZE: 'default'
},
colorCircleSizes: {
SMALL_CIRCLE: '25px',
DEFAULT_CIRCLE: '50px'
},
theme: {
DARK_THEME: 'dark',
LIGHT_THEME: 'light'
},
forbiddenRolesFromDeleting: ['superadmin'],
dialogFormTitles: {
REGISTER_ADMIN: 'Створити спецкористувача'
},
paginationPayload: {
skip: 0,
limit: 5,
countPerPage: 6
},
sizesAvailableVariants: {
AVAILABLE_TEXT: 'Доступний',
UNAVAILABLE_TEXT: 'Відсутній'
},
pocketsAvailableVariants: {
AVAILABLE_TEXT: 'Доступний',
UNAVAILABLE_TEXT: 'Недоступний'
},
strapsAvailableVariants: {
AVAILABLE_TEXT: 'Доступний',
UNAVAILABLE_TEXT: 'Недоступний'
},
closuresAvailableVariants: {
AVAILABLE_TEXT: 'Доступний',
UNAVAILABLE_TEXT: 'Недоступний'
},
positionAvailableVariants: {
AVAILABLE_TEXT: 'Доступна',
UNAVAILABLE_TEXT: 'Недоступна'
},
basicsAvailableVariants: {
AVAILABLE_TEXT: 'Доступна',
UNAVAILABLE_TEXT: 'Недоступна'
},
IMG_URL: 'https://horondi.blob.core.windows.net/horondi/images/',
newsPerPage: 6,
product: {
sortBySelectOptions: [
{
label: 'Популярністю',
value: 'popularity'
},
{
label: 'Від дорогих до дешевих',
value: 'sortDesc'
},
{
label: 'Від дешевих до дорогих',
value: 'sortAsc'
},
{
label: 'Рейтингом',
value: 'rate'
}
],
responsive: {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 1
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1
},
tablet: {
breakpoint: { max: 1146, min: 464 },
items: 1
},
mobile: {
breakpoint: { max: 810, min: 0 },
items: 1
}
}
},
popularity: 'popularity',
rate: 'rate',
sortAsc: 'sortAsc',
sortDesc: 'sortDesc',
submitKey: 'Enter',
imagePrefix: 'https://horondi.blob.core.windows.net/horondi/images/',
initialLanguageValues: [
{
lang: 'ua',
value: ''
},
{
lang: 'en',
value: ''
}
],
doughnut: {
colors: [
colors.green[500],
colors.red[700],
colors.amber[600],
colors.indigo[500],
colors.lime[600],
colors.purple[900],
colors.red[300]
],
initialValues: {
names: [],
counts: [],
relations: [],
total: null
}
},
bar: {
initialValues: {
labels: [],
counts: []
}
},
UAH: 'грн',
maxItemsPerPage: 10,
buttonTitles,
detailTitles,
messages,
menuCategories,
materialMenuCategories,
clientMenuCategories,
catalogMenuCategories,
promoMenuCategories,
constructorMenuCategories,
certificatesMenuCategories,
staticPagesCategories,
routes,
statuses,
tableHeadRowTitles,
formRegExp,
labels,
titles,
commonErrorMessages,
promoCodeErrorMessages,
loginErrorMessages,
colorErrorMessages,
contactErrorMessages,
categoryErrorMessages,
patternErrorMessages,
backErrorMessages,
bottomErrorMessages,
materialErrorMessages,
newsErrorMessages,
errorMessages,
newsPaginationPayload,
productsTranslations,
tableTranslations,
userRoleTranslations,
contactsPaginationPayload,
modelErrorMessages,
headerErrorMessages,
statsErrorMessages,
constructorErrorMessages,
paginationInputErrorMessages,
filterLabels,
materialUiConstants,
materialTranslations,
slidesTranslations,
sizeErrorMessages,
businessPageErrorMessages,
aboutUsPageErrorMessages,
productErrorMessages,
imageUploadNewsInputsId,
imageUploadSlideInputsId,
valueKeys,
inputNames,
pocketsErrorMessages,
closuresErrorMessages,
basicsErrorMessages,
strapsErrorMessages,
constructorErrors,
backTranslations,
businessPageErrors,
bottomTranslations,
categoryErrors,
colorsTranslations,
contactTranslations,
headerTranslations,
modelTranslations,
newsErrors,
patternTranlations,
homePageEditErrors,
commentsErrors,
slidesMessages,
materialMessages,
productsErrors,
userTranslations,
errorStatuses,
userErrorMessages,
RESET: 'reset'
}
Example #23
| Source File: app.pallete.js From horondi_client_fe with MIT License | 4 votes |
|
paletteGenerator = (colorSchema) => ({
black,
white,
lightGray,
lightGrayShade,
mediumGray,
darkGray,
yellow,
blue,
red,
lightPing,
green,
textColor: theme[colorSchema].textColor,
backgroundColor: theme[colorSchema].backgroundColor,
card: {
backgroundColor: theme[colorSchema].card.backgroundColor,
border: theme[colorSchema].card.border,
childrenBackgroundColor: theme[colorSchema].card.childrenBackgroundColor,
selectedButton: {
backgroundColor: theme[colorSchema].card.selectedButton.backgroundColor,
color: theme[colorSchema].card.selectedButton.color
}
},
catalog: {
pageFilterCell: {
hover: {
backgroundColor: theme[colorSchema].catalogPageFilterCell.hover.backgroundColor
}
}
},
button: {
normal: {
backgroundColor: theme[colorSchema].button.normal.backgroundColor,
color: theme[colorSchema].button.normal.color,
borderColor: theme[colorSchema].button.border.borderColor
},
hover: {
backgroundColor: theme[colorSchema].button.hover.backgroundColor,
color: theme[colorSchema].button.hover.color
},
hoverSecondary: {
backgroundColor: theme[colorSchema].button.hoverSecondary.backgroundColor,
color: theme[colorSchema].button.hoverSecondary.color
},
disabled: {
backgroundColor: theme[colorSchema].button.disabled.backgroundColor,
color: theme[colorSchema].button.disabled.color
}
},
cart: {
borderColor: theme[colorSchema].cart.borderColor,
iconColor: theme[colorSchema].cart.iconColor
},
contactForm: {
background: theme[colorSchema].contactForm.background
},
productDescription: {
borderColor: theme[colorSchema].productDescription.borderColor
},
arrowIcon: {
arrowColor: theme[colorSchema].arrowIcon.arrowColor
},
imageContainer: {
border: theme[colorSchema].imageContainer.border
},
orderHistoryHeading: {
background: theme[colorSchema].orderHistoryHeading.background
},
profilePageLabel: {
normal: {
backgroundColor: theme[colorSchema].profilePageLabel.normal.backgroundColor
},
hover: {
backgroundColor: theme[colorSchema].profilePageLabel.hover.backgroundColor
}
},
carouselItem: {
normal: {
backgroundColor: theme[colorSchema].carouselItem.normal.backgroundColor
},
shadow: {
boxShadow: theme[colorSchema].carouselItem.shadow.boxShadow
},
hover: {
border: theme[colorSchema].carouselItem.hover.border
}
},
seachBar: {
backgroundColor: theme[colorSchema].seachBar.backgroundColor,
color: theme[colorSchema].seachBar.color,
border: theme[colorSchema].seachBar.border
},
comments: {
border: theme[colorSchema].comments.border,
formBorder: {
borderColor: theme[colorSchema].comments.formBorder.borderColor
},
cancelButtonBorder: {
border: theme[colorSchema].comments.cancelButtonBorder.border
},
deleteIcon: {
color: theme[colorSchema].comments.deleteIcon.color
},
modal: {
closeModalIcon: {
color: theme[colorSchema].comments.modal.closeModalIcon.color
},
titleBorder: {
border: theme[colorSchema].comments.modal.titleBorder.border
},
buttonBorder: {
border: theme[colorSchema].comments.modal.buttonBorder.border
}
}
},
backspaceIcon: {
color: theme[colorSchema].backspaceIcon.color
},
primary: {
contrastText: white,
dark: colors.grey[900],
main: colors.grey[900],
light: colors.grey[900]
},
secondary: {
contrastText: white,
dark: colors.blue[900],
main: colors.blue.A400,
light: colors.blue.A400
},
success: {
contrastText: white,
dark: colors.green[900],
main: colors.green[600],
light: colors.green[400]
},
info: {
contrastText: white,
dark: colors.blue[900],
main: colors.blue[600],
light: colors.blue[400]
},
warning: {
contrastText: white,
dark: colors.orange[900],
main: colors.orange[600],
light: colors.orange[400]
},
error: {
contrastText: white,
dark: colors.red[900],
main: colors.red[600],
light: colors.red[400]
},
icon: colors.blueGrey[600],
type: colorSchema
})
Example #24
| Source File: TrafficByDevice.js From EMP with MIT License | 4 votes |
|
TrafficByDevice = () => {
// const classes = useStyles();
const theme = useTheme();
const data = {
datasets: [
{
data: [63, 15, 22],
backgroundColor: [
colors.indigo[500],
colors.red[600],
colors.orange[600]
],
borderWidth: 8,
borderColor: colors.common.white,
hoverBorderColor: colors.common.white
}
],
labels: ['Desktop', 'Tablet', 'Mobile']
};
const options = {
animation: false,
cutoutPercentage: 80,
layout: { padding: 0 },
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
backgroundColor: theme.palette.background.default,
bodyFontColor: theme.palette.text.secondary,
borderColor: theme.palette.divider,
borderWidth: 1,
enabled: true,
footerFontColor: theme.palette.text.secondary,
intersect: false,
mode: 'index',
titleFontColor: theme.palette.text.primary
}
};
const devices = [
{
title: 'Desktop',
value: 63,
icon: LaptopMacIcon,
color: colors.indigo[500]
},
{
title: 'Tablet',
value: 15,
icon: TabletIcon,
color: colors.red[600]
},
{
title: 'Mobile',
value: 23,
icon: PhoneIcon,
color: colors.orange[600]
}
];
return (
<Card>
<CardHeader title="Traffic by Device" />
<Divider />
<CardContent>
<Box
height={300}
position="relative"
>
<Doughnut
data={data}
options={options}
/>
</Box>
<Box
display="flex"
justifyContent="center"
mt={2}
>
{devices.map(({
color,
icon: Icon,
title,
value
}) => (
<Box
key={title}
p={1}
textAlign="center"
>
<Icon color="action" />
<Typography
color="textPrimary"
variant="body1"
>
{title}
</Typography>
<Typography
style={{ color }}
variant="h2"
>
{value}
%
</Typography>
</Box>
))}
</Box>
</CardContent>
</Card>
);
}
Example #25
| Source File: Sales.js From EMP with MIT License | 4 votes |
|
Sales = () => {
// const classes = useStyles();
const theme = useTheme();
const data = {
datasets: [
{
backgroundColor: colors.indigo[500],
data: [18, 5, 19, 27, 29, 19, 20],
label: 'This year'
},
{
backgroundColor: colors.grey[200],
data: [11, 20, 12, 29, 30, 25, 13],
label: 'Last year'
}
],
labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug']
};
const options = {
animation: false,
cornerRadius: 20,
layout: { padding: 0 },
legend: { display: false },
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [
{
barThickness: 12,
maxBarThickness: 10,
barPercentage: 0.5,
categoryPercentage: 0.5,
ticks: {
fontColor: theme.palette.text.secondary
},
gridLines: {
display: false,
drawBorder: false
}
}
],
yAxes: [
{
ticks: {
fontColor: theme.palette.text.secondary,
beginAtZero: true,
min: 0
},
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: theme.palette.divider,
drawBorder: false,
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
zeroLineColor: theme.palette.divider
}
}
]
},
tooltips: {
backgroundColor: theme.palette.background.default,
bodyFontColor: theme.palette.text.secondary,
borderColor: theme.palette.divider,
borderWidth: 1,
enabled: true,
footerFontColor: theme.palette.text.secondary,
intersect: false,
mode: 'index',
titleFontColor: theme.palette.text.primary
}
};
return (
<Card>
<CardHeader
action={(
<Button
endIcon={<ArrowDropDownIcon />}
size="small"
variant="text"
>
Last 7 days
</Button>
)}
title="Latest Sales"
/>
<Divider />
<CardContent>
<Box
height={400}
position="relative"
>
<Bar
data={data}
options={options}
/>
</Box>
</CardContent>
<Divider />
<Box
display="flex"
justifyContent="flex-end"
p={2}
>
<Button
color="primary"
endIcon={<ArrowRightIcon />}
size="small"
variant="text"
>
Overview
</Button>
</Box>
</Card>
);
}
Example #26
| Source File: Status.js From management-center with Apache License 2.0 | 4 votes |
|
Status = ({ brokerLicense, brokerLicenseLoading, lastUpdated, systemStatus, defaultClient, currentConnection, currentConnectionName }) => {
const classes = useStyles();
const totalMessages = parseInt(systemStatus?.$SYS?.broker?.messages?.sent);
const publishMessages = (parseInt(systemStatus?.$SYS?.broker?.publish?.messages?.sent) / totalMessages) * 100;
const otherMessages =
((totalMessages - parseInt(systemStatus?.$SYS?.broker?.publish?.messages?.sent)) / totalMessages) * 100;
const data = {
datasets: [
{
data: [publishMessages, otherMessages],
backgroundColor: [colors.indigo[500], colors.red[600], colors.orange[600]],
borderWidth: 8,
borderColor: colors.common.white,
hoverBorderColor: colors.common.white
}
],
labels: ['PUBLISH', 'Other']
};
const dataDescriptions = [
{
title: 'PUBLISH',
value: Math.round(publishMessages),
icon: MessageIcon,
color: colors.indigo[500]
},
{
title: 'Other',
value: Math.round(otherMessages),
icon: MessageIcon,
color: colors.red[600]
}
];
return (
<div>
<Breadcrumbs aria-label="breadcrumb">
<RouterLink className={classes.breadcrumbLink} to="/home">
Home
</RouterLink>
<RouterLink className={classes.breadcrumbLink} to="/system">
System
</RouterLink>
<Typography className={classes.breadcrumbItem} color="textPrimary">
Status
</Typography>
</Breadcrumbs>
<br />
{systemStatus?.$SYS ? <Container maxWidth={false}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h5" component="div" gutterBottom>
{currentConnectionName}
</Typography>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Clients total"
value={systemStatus?.$SYS?.broker?.clients?.total}
icon={<ClientIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Subscriptions"
value={systemStatus?.$SYS?.broker?.subscriptions?.count}
icon={<SubscriptionIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="PUBLISH received"
value={systemStatus?.$SYS?.broker?.publish?.messages?.received}
icon={<MessageIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="PUBLISH sent"
value={systemStatus?.$SYS?.broker?.publish?.messages?.sent}
icon={<MessageIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Bytes received"
value={systemStatus?.$SYS?.broker?.bytes?.received}
icon={<DataReceivedIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Bytes sent"
value={systemStatus?.$SYS?.broker?.bytes?.sent}
icon={<DataSentIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Total received"
value={systemStatus?.$SYS?.broker?.messages?.received}
icon={<MessageIcon />}
/>
</Grid>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Info
label="Total messages sent"
value={systemStatus?.$SYS?.broker?.messages?.sent}
icon={<MessageIcon />}
/>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<TableContainer component={Paper}>
<Table className={classes.table}>
<TableHead>
<TableCell colSpan={2}>Broker</TableCell>
</TableHead>
<TableBody>
<TableRow key="version">
<TableCell component="th" scope="row">
Broker version
</TableCell>
<TableCell align="right">{systemStatus?.$SYS?.broker?.version}</TableCell>
</TableRow>
<TableRow key="uptime">
<TableCell component="th" scope="row">
Uptime
</TableCell>
<TableCell align="right">{systemStatus?.$SYS?.broker?.uptime}</TableCell>
</TableRow>
<TableRow key="url">
<TableCell component="th" scope="row">
URL
</TableCell>
<TableCell align="right">{currentConnection?.url}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<TableContainer component={Paper}>
<Table className={classes.table}>
<TableHead>
<TableCell colSpan={2}>Clients</TableCell>
</TableHead>
<TableBody>
<TableRow key="clients-total">
<TableCell component="th" scope="row">
Total clients
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.clients?.total}
</TableCell>
</TableRow>
<TableRow key="clients-active">
<TableCell component="th" scope="row">
Active clients
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.clients?.active}
</TableCell>
</TableRow>
<TableRow key="clients-connected">
<TableCell component="th" scope="row">
Connected clients
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.clients?.connected}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
<Grid item lg={4} sm={4} xl={4} xs={12}>
<TableContainer component={Paper}>
<Table className={classes.table}>
<TableHead>
<TableCell colSpan={2}>Messages</TableCell>
</TableHead>
<TableBody>
<TableRow key="messsages-received">
<TableCell component="th" scope="row">
Received messages
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.messages?.received}
</TableCell>
</TableRow>
<TableRow key="messsages-sent">
<TableCell component="th" scope="row">
Sent messages
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.messages?.sent}
</TableCell>
</TableRow>
<TableRow key="messsages-stored">
<TableCell component="th" scope="row">
Stored messages
</TableCell>
<TableCell align="right">
{systemStatus?.$SYS?.broker?.messages?.stored}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
{/* <Grid item lg={3} sm={3} xl={3} xs={12}>
<Chart
title="Sent messages by type"
data={data}
dataDescriptions={dataDescriptions}
/>
</Grid> */}
<Grid item lg={12} sm={12} xl={12} xs={12}>
{brokerLicenseLoading ?
<Alert severity="info">
<AlertTitle>Loading license information</AlertTitle>
<CircularProgress color="secondary" />
</Alert> : null}
{brokerLicense ? <LicenseTable license={brokerLicense} /> : null}
</Grid>
</Grid>
</Container> : <Alert severity="warning">
<AlertTitle>System status information not accessible</AlertTitle>
We couldn't retrieve the system status information.
Please make sure that the user "{defaultClient?.username}" has the rights to read the "$SYS" topic on the selected broker.
</Alert>
}
{systemStatus?.$SYS && <div style={{
fontSize: '0.9em',
position: 'absolute',
right: '15px',
top: '70px'
}}>
Dashboard last updated at: {moment(lastUpdated).format('hh:mm:ss a')}
</div>}
</div>
);
}
