How to use @coreui/coreui - 10 common examples
To help you get started, we’ve selected a few @coreui/coreui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ahrnee / nestjs-bff / frontend / src / app / views / dashboard / dashboard.component.ts View on Github 
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
legend: {
display: false
}
};
public lineChart1Colours: Array = [
{
backgroundColor: getStyle('--primary'),
borderColor: 'rgba(255,255,255,.55)'
}
];
public lineChart1Legend = false;
public lineChart1Type = 'line';
// lineChart2
public lineChart2Data: Array = [
{
data: [1, 18, 9, 17, 34, 22, 11],
label: 'Series A'
}
];
public lineChart2Labels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChart2Options: any = {
tooltips: {}
};
public mainChartColours: Array = [
{ // brandInfo
backgroundColor: hexToRgba(getStyle('--info'), 10),
borderColor: getStyle('--info'),
pointHoverBackgroundColor: '#fff'
},
{ // brandSuccess
backgroundColor: 'transparent',
borderColor: getStyle('--success'),
pointHoverBackgroundColor: '#fff'
},
{ // brandDanger
backgroundColor: 'transparent',
borderColor: getStyle('--danger'),
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5]
}
];
public mainChartLegend = false;
public mainChartType = 'line';
// social box charts
public brandBoxChartData1: Array = [
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Facebook'
}
];CardTitle,
Col,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Progress,
Row,
Table,
} from 'reactstrap';
import Widget03 from '../../views/Widgets/Widget03'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
const brandPrimary = getStyle('--primary')
const brandSuccess = getStyle('--success')
const brandInfo = getStyle('--info')
const brandWarning = getStyle('--warning')
const brandDanger = getStyle('--danger')
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
};Col,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Progress,
Row,
Table,
} from 'reactstrap';
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
const Widget03 = lazy(() => import('../../views/Widgets/Widget03'));
const brandPrimary = getStyle('--primary')
const brandSuccess = getStyle('--success')
const brandInfo = getStyle('--info')
const brandWarning = getStyle('--warning')
const brandDanger = getStyle('--danger')
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
};DropdownToggle,
Progress,
Row,
Table,
} from 'reactstrap';
import Widget03 from '../../views/Widgets/Widget03'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { subscribeToTimer } from '../../api';
import FadeIn from 'react-fade-in';
const brandPrimary = getStyle('--primary')
const brandSuccess = getStyle('--success')
const brandInfo = getStyle('--info')
const brandWarning = getStyle('--warning')
const brandDanger = getStyle('--danger')
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
};}]
},
legend: {
display: false
}
};
public barChart3Primary: Array = [
{
backgroundColor: getStyle('--primary'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Danger: Array = [
{
backgroundColor: getStyle('--danger'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Success: Array = [
{
backgroundColor: getStyle('--success'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Legend = false;
public barChart3Type = 'bar';
// lineChart5CardHeader,
CardTitle,
Col,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Progress,
Row,
Table,
} from 'reactstrap';
import Widget03 from '../../views/Widgets/Widget03'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
const brandPrimary = getStyle('--primary')
const brandSuccess = getStyle('--success')
const brandInfo = getStyle('--info')
const brandWarning = getStyle('--warning')
const brandDanger = getStyle('--danger')
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40],
},
],{
backgroundColor: getStyle('--primary'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Danger: Array = [
{
backgroundColor: getStyle('--danger'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Success: Array = [
{
backgroundColor: getStyle('--success'),
borderColor: 'transparent',
borderWidth: 1
}
];
public barChart3Legend = false;
public barChart3Type = 'bar';
// lineChart5
public lineChart5Data: Array = [
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Series A'
}
];
public lineChart5Labels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];Progress,
Row,
Table,
} from 'reactstrap';
import Widget03 from '../../views/Widgets/Widget03'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
import { subscribeToTimer } from '../../api';
import FadeIn from 'react-fade-in';
const brandPrimary = getStyle('--primary')
const brandSuccess = getStyle('--success')
const brandInfo = getStyle('--info')
const brandWarning = getStyle('--warning')
const brandDanger = getStyle('--danger')
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
};
const cardChartOpts1 = {borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
},
legend: {
display: false
}
};
public mainChartColours: Array = [
{ // brandInfo
backgroundColor: hexToRgba(getStyle('--info'), 10),
borderColor: getStyle('--info'),
pointHoverBackgroundColor: '#fff'
},
{ // brandSuccess
backgroundColor: 'transparent',
borderColor: getStyle('--success'),
pointHoverBackgroundColor: '#fff'
},
{ // brandDanger
backgroundColor: 'transparent',
borderColor: getStyle('--danger'),
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5]
}
];@coreui/coreui
The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team
