chore: clean-up
This commit is contained in:
Łukasz Holeczek
parent
3a96c33d16
commit
c00d01b51b
@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"plugins": ["prettier"],
|
|
||||||
"rules": {
|
|
||||||
"prettier/prettier": "error"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CAvatar,
|
|
||||||
CBadge,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
} from '@coreui/react'
|
|
||||||
import CIcon from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const AppHeaderDropdownMssg = () => {
|
|
||||||
const itemsCount = 4
|
|
||||||
return (
|
|
||||||
<CDropdown variant="nav-item" direction="down">
|
|
||||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
|
||||||
<CIcon name="cil-envelope-open" />
|
|
||||||
<CBadge shape="rounded-pill" color="info">
|
|
||||||
{itemsCount}
|
|
||||||
</CBadge>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
||||||
<CDropdownItem header tag="div" color="light">
|
|
||||||
<strong>You have {itemsCount} messages</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem href="#">
|
|
||||||
<div className="message">
|
|
||||||
<div className="pt-3 me-3 float-start">
|
|
||||||
<CAvatar src={'avatars/7.jpg'} status="success" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small className="text-medium-emphasis">John Doe</small>
|
|
||||||
<small className="text-medium-emphasis float-end mt-1">Just now</small>
|
|
||||||
</div>
|
|
||||||
<div className="text-truncate font-weight-bold">
|
|
||||||
<span className="fa fa-exclamation text-danger"></span> Important message
|
|
||||||
</div>
|
|
||||||
<div className="small text-medium-emphasis text-truncate">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
||||||
incididunt...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CDropdownItem>
|
|
||||||
|
|
||||||
<CDropdownItem href="#">
|
|
||||||
<div className="message">
|
|
||||||
<div className="pt-3 me-3 float-start">
|
|
||||||
<CAvatar src={'avatars/6.jpg'} status="warning" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small className="text-medium-emphasis">Jane Dovve</small>
|
|
||||||
<small className="text-medium-emphasis float-end mt-1">5 minutes ago</small>
|
|
||||||
</div>
|
|
||||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<div className="small text-medium-emphasis text-truncate">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
||||||
incididunt...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CDropdownItem>
|
|
||||||
|
|
||||||
<CDropdownItem href="#">
|
|
||||||
<div className="message">
|
|
||||||
<div className="pt-3 me-3 float-start">
|
|
||||||
<CAvatar src={'avatars/5.jpg'} status="danger" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small className="text-medium-emphasis">Janet Doe</small>
|
|
||||||
<small className="text-medium-emphasis float-end mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<div className="small text-medium-emphasis text-truncate">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
||||||
incididunt...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CDropdownItem>
|
|
||||||
|
|
||||||
<CDropdownItem href="#">
|
|
||||||
<div className="message">
|
|
||||||
<div className="pt-3 me-3 float-start">
|
|
||||||
<CAvatar src={'avatars/4.jpg'} status="info" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small className="text-medium-emphasis">Joe Doe</small>
|
|
||||||
<small className="text-medium-emphasis float-end mt-1">4:03 AM</small>
|
|
||||||
</div>
|
|
||||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<div className="small text-medium-emphasis text-truncate">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
|
||||||
incididunt...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem href="#" className="text-center border-top">
|
|
||||||
<strong>View all messages</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AppHeaderDropdownMssg
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CProgress,
|
|
||||||
} from '@coreui/react'
|
|
||||||
import CIcon from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const AppHeaderDropdownNotif = () => {
|
|
||||||
const itemsCount = 5
|
|
||||||
return (
|
|
||||||
<CDropdown variant="nav-item">
|
|
||||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
|
||||||
<CIcon name="cil-bell" />
|
|
||||||
<CBadge shape="rounded-pill" color="danger">
|
|
||||||
{itemsCount}
|
|
||||||
</CBadge>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
|
||||||
<CDropdownItem header tag="div" className="text-center" color="light">
|
|
||||||
<strong>You have {itemsCount} notifications</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<CIcon name="cil-basket" className="me-2 text-primary" /> New client
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem header tag="div" color="light">
|
|
||||||
<strong>Server</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="text-uppercase mb-1">
|
|
||||||
<small>
|
|
||||||
<b>CPU Usage</b>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="info" value={25} />
|
|
||||||
<small className="text-medium-emphasis">348 Processes. 1/4 Cores.</small>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="text-uppercase mb-1">
|
|
||||||
<small>
|
|
||||||
<b>Memory Usage</b>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="warning" value={70} />
|
|
||||||
<small className="text-medium-emphasis">11444GB/16384MB</small>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="text-uppercase mb-1">
|
|
||||||
<small>
|
|
||||||
<b>SSD 1 Usage</b>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="danger" value={90} />
|
|
||||||
<small className="text-medium-emphasis">243GB/256GB</small>
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AppHeaderDropdownNotif
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CProgress,
|
|
||||||
} from '@coreui/react'
|
|
||||||
import CIcon from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const AppHeaderDropdownTasks = () => {
|
|
||||||
const itemsCount = 5
|
|
||||||
return (
|
|
||||||
<CDropdown variant="nav-item">
|
|
||||||
<CDropdownToggle>
|
|
||||||
<CIcon name="cil-list" />
|
|
||||||
<CBadge shape="rounded-pill" color="warning">
|
|
||||||
{itemsCount}
|
|
||||||
</CBadge>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
|
||||||
<CDropdownItem header tag="div" className="text-center" color="light">
|
|
||||||
<strong>You have {itemsCount} pending tasks</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="small mb-1">
|
|
||||||
Upgrade NPM & Bower{' '}
|
|
||||||
<span className="float-end">
|
|
||||||
<strong>0%</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="info" value={0} />
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="small mb-1">
|
|
||||||
ReactJS Version{' '}
|
|
||||||
<span className="float-end">
|
|
||||||
<strong>25%</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="danger" value={25} />
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="small mb-1">
|
|
||||||
VueJS Version{' '}
|
|
||||||
<span className="float-end">
|
|
||||||
<strong>50%</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="warning" value={50} />
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="small mb-1">
|
|
||||||
Add new layouts{' '}
|
|
||||||
<span className="float-end">
|
|
||||||
<strong>75%</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="info" value={75} />
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="d-block">
|
|
||||||
<div className="small mb-1">
|
|
||||||
Angular 2 Cli Version{' '}
|
|
||||||
<span className="float-end">
|
|
||||||
<strong>100%</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<CProgress size="xs" color="success" value={100} />
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem className="text-center border-top">
|
|
||||||
<strong>View all tasks</strong>
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AppHeaderDropdownTasks
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { getColor } from '@coreui/utils'
|
|
||||||
import { CChartBar } from '@coreui/react-chartjs'
|
|
||||||
|
|
||||||
const ChartBarSimple = (props) => {
|
|
||||||
const {
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const defaultDatasets = {
|
|
||||||
data: dataPoints,
|
|
||||||
backgroundColor: getColor(backgroundColor),
|
|
||||||
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
|
|
||||||
label: label,
|
|
||||||
barPercentage: 0.5,
|
|
||||||
categoryPercentage: 1,
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultOptions = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
display: false,
|
|
||||||
drawTicks: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
display: false,
|
|
||||||
drawBorder: false,
|
|
||||||
drawTicks: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
// render
|
|
||||||
return (
|
|
||||||
<CChartBar
|
|
||||||
{...attributes}
|
|
||||||
data={defaultDatasets}
|
|
||||||
// options={defaultOptions}
|
|
||||||
// labels={label}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartBarSimple.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool,
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartBarSimple.defaultProps = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,.2)',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChartBarSimple
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils'
|
|
||||||
|
|
||||||
import { CChartLine } from '@coreui/react-chartjs'
|
|
||||||
|
|
||||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
|
||||||
const brandInfo = getStyle('info') || '#20a8d8'
|
|
||||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
|
||||||
|
|
||||||
const ChartLineSimple = (props) => {
|
|
||||||
const {
|
|
||||||
borderColor,
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const pointHoverColor = (() => {
|
|
||||||
if (pointHoverBackgroundColor) {
|
|
||||||
return pointHoverBackgroundColor
|
|
||||||
} else if (backgroundColor !== 'transparent') {
|
|
||||||
return backgroundColor
|
|
||||||
}
|
|
||||||
return borderColor
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultDatasets = (() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
data: dataPoints,
|
|
||||||
borderColor: getColor(borderColor),
|
|
||||||
backgroundColor: getColor(backgroundColor),
|
|
||||||
pointBackgroundColor: getColor(pointHoverColor),
|
|
||||||
pointHoverBackgroundColor: getColor(pointHoverColor),
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})()
|
|
||||||
|
|
||||||
const pointedOptions = (() => {
|
|
||||||
return {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
display: false,
|
|
||||||
drawBorder: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false,
|
|
||||||
grid: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 1,
|
|
||||||
tension: 0.4,
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
const straightOptions = (() => {
|
|
||||||
return {
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2,
|
|
||||||
tension: 0.4,
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultOptions = (() => {
|
|
||||||
const options = pointed ? pointedOptions : straightOptions
|
|
||||||
return Object.assign({}, options, {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
||||||
const computedDatasets = (() => {
|
|
||||||
return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
|
|
||||||
})()
|
|
||||||
|
|
||||||
const computedOptions = (() => {
|
|
||||||
return deepObjectsMerge(defaultOptions, attributes.options || {})
|
|
||||||
})()
|
|
||||||
|
|
||||||
// render
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CChartLine
|
|
||||||
{...attributes}
|
|
||||||
datasets={computedDatasets}
|
|
||||||
options={computedOptions}
|
|
||||||
labels={label}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartLineSimple.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
borderColor: PropTypes.string,
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool,
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartLineSimple.defaultProps = {
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales',
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChartLineSimple
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CChartLine } from '@coreui/react-chartjs'
|
|
||||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
|
||||||
|
|
||||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
|
||||||
const brandInfo = getStyle('info') || '#20a8d8'
|
|
||||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
|
||||||
|
|
||||||
const MainChartExample = (attributes) => {
|
|
||||||
const random = (min, max) => {
|
|
||||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
||||||
}
|
|
||||||
|
|
||||||
let elements = 27
|
|
||||||
const data1 = []
|
|
||||||
const data2 = []
|
|
||||||
const data3 = []
|
|
||||||
|
|
||||||
for (let i = 0; i <= elements; i++) {
|
|
||||||
data1.push(random(50, 200))
|
|
||||||
data2.push(random(80, 100))
|
|
||||||
data3.push(65)
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'My First dataset',
|
|
||||||
backgroundColor: hexToRgba(brandInfo, 10),
|
|
||||||
borderColor: brandInfo,
|
|
||||||
pointHoverBackgroundColor: brandInfo,
|
|
||||||
borderWidth: 2,
|
|
||||||
data: data1,
|
|
||||||
fill: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Second dataset',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: brandSuccess,
|
|
||||||
pointHoverBackgroundColor: brandSuccess,
|
|
||||||
borderWidth: 2,
|
|
||||||
data: data2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Third dataset',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: brandDanger,
|
|
||||||
pointHoverBackgroundColor: brandDanger,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderDash: [8, 5],
|
|
||||||
data: data3,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
drawOnChartArea: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true,
|
|
||||||
maxTicksLimit: 5,
|
|
||||||
stepSize: Math.ceil(250 / 5),
|
|
||||||
max: 250,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0.4,
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
hoverBorderWidth: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
return <CChartLine data={data} options={options} {...attributes} />
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MainChartExample
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
/*
|
|
||||||
* required polyfills
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
|
||||||
// import "core-js";
|
|
||||||
// import 'core-js/features/symbol'
|
|
||||||
// import 'core-js/features/object'
|
|
||||||
// import 'core-js/features/function'
|
|
||||||
// import 'core-js/features/parse-int'
|
|
||||||
// import 'core-js/features/parse-float'
|
|
||||||
// import 'core-js/features/number'
|
|
||||||
// import 'core-js/features/math'
|
|
||||||
// import 'core-js/features/string'
|
|
||||||
// import 'core-js/features/date'
|
|
||||||
// import 'core-js/features/array'
|
|
||||||
// import 'core-js/features/regexp'
|
|
||||||
// import 'core-js/features/map'
|
|
||||||
// import 'core-js/features/weak-map'
|
|
||||||
// import 'core-js/features/set'
|
|
||||||
// import 'core-js/features/set/map';
|
|
||||||
|
|
||||||
/** IE10 and IE11 requires the following for the Reflect API. */
|
|
||||||
// import 'core-js/features/reflect';
|
|
||||||
|
|
||||||
/** Evergreen browsers require these. **/
|
|
||||||
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
|
|
||||||
// import 'core-js/features/reflect'
|
|
||||||
|
|
||||||
// CustomEvent() constructor functionality in IE9, IE10, IE11
|
|
||||||
;(function () {
|
|
||||||
if (typeof window.CustomEvent === 'function') return false
|
|
||||||
|
|
||||||
function CustomEvent(event, params) {
|
|
||||||
params = params || { bubbles: false, cancelable: false, detail: undefined }
|
|
||||||
var evt = document.createEvent('CustomEvent')
|
|
||||||
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
|
|
||||||
return evt
|
|
||||||
}
|
|
||||||
|
|
||||||
CustomEvent.prototype = window.Event.prototype
|
|
||||||
|
|
||||||
window.CustomEvent = CustomEvent
|
|
||||||
})()
|
|
||||||
|
|
||||||
if (!Element.prototype.matches) {
|
|
||||||
Element.prototype.matches =
|
|
||||||
Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Element.prototype.closest) {
|
|
||||||
Element.prototype.closest = function (s) {
|
|
||||||
var el = this
|
|
||||||
|
|
||||||
do {
|
|
||||||
if (Element.prototype.matches.call(el, s)) return el
|
|
||||||
el = el.parentElement || el.parentNode
|
|
||||||
} while (el !== null && el.nodeType === 1)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user