upgade package
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,174 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const MixedWidget1: FC<Props> = ({className, color}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Header */}
|
||||
<div className={`px-9 pt-7 card-rounded h-275px w-100 bg-${color}`}>
|
||||
{/* begin::Heading */}
|
||||
<div className='d-flex flex-stack'>
|
||||
<h3 className='m-0 text-white fw-bold fs-3'>Sales Summary</h3>
|
||||
<div className='ms-1'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className={`btn btn-sm btn-icon btn-color-white btn-active-white btn-active-color-${color} border-0 me-n3`}
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Heading */}
|
||||
{/* begin::Balance */}
|
||||
<div className='d-flex text-center flex-column text-white pt-8'>
|
||||
<span className='fw-semibold fs-7'>You Balance</span>
|
||||
<span className='fw-bold fs-2x pt-1'>$37,562.00</span>
|
||||
</div>
|
||||
{/* end::Balance */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Items */}
|
||||
<div
|
||||
className='shadow-xs card-rounded mx-9 mb-9 px-6 py-9 position-relative z-index-1 bg-body'
|
||||
style={{marginTop: '-100px'}}
|
||||
>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='compass' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Sales
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>100 Regions</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$2,5b</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='category' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Revenue
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>Quarter 2/3</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$1,7b</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-6'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='phone' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Growth
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>80% Rate</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$8,8m</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-45px w-40px me-5'>
|
||||
<span className='symbol-label bg-lighten'>
|
||||
<KTIcon iconName='document' className='fs-1' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
{/* begin::Description */}
|
||||
<div className='d-flex align-items-center flex-wrap w-100'>
|
||||
{/* begin::Title */}
|
||||
<div className='mb-1 pe-3 flex-grow-1'>
|
||||
<a href='#' className='fs-5 text-gray-800 text-hover-primary fw-bold'>
|
||||
Dispute
|
||||
</a>
|
||||
<div className='text-gray-500 fw-semibold fs-7'>3090 Refunds</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
{/* begin::Label */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fw-bold fs-5 text-gray-800 pe-1'>$270m</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Items */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget1}
|
||||
@@ -0,0 +1,192 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget10: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column p-0'>
|
||||
{/* begin::Stats */}
|
||||
<div className='flex-grow-1 card-p pb-0'>
|
||||
<div className='d-flex flex-stack flex-wrap'>
|
||||
<div className='me-2'>
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bold fs-3'>
|
||||
Generate Reports
|
||||
</a>
|
||||
|
||||
<div className='text-muted fs-7 fw-semibold'>Finance and accounting reports</div>
|
||||
</div>
|
||||
|
||||
<div className={`fw-bold fs-3 text-${chartColor}`}>$24,500</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-7-chart card-rounded-bottom'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [15, 25, 15, 40, 20, 50],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget10}
|
||||
@@ -0,0 +1,180 @@
|
||||
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget11: React.FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex justify-content-between flex-column overflow-hidden'>
|
||||
{/* begin::Hidden */}
|
||||
<div className='d-flex flex-stack flex-wrap flex-grow-1 px-9 pt-9 pb-3'>
|
||||
<div className='me-2'>
|
||||
<span className='fw-bold text-gray-800 d-block fs-3'>Sales</span>
|
||||
|
||||
<span className='text-gray-500 fw-semibold'>Oct 8 - Oct 26 2021</span>
|
||||
</div>
|
||||
|
||||
<div className={`fw-bold fs-3 text-${chartColor}`}>$15,300</div>
|
||||
</div>
|
||||
{/* end::Hidden */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-10-chart'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const secondaryColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [50, 60, 70, 80, 60, 50, 70, 60],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [50, 60, 70, 80, 60, 50, 70, 60],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' revenue'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor, secondaryColor],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 10,
|
||||
},
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget11}
|
||||
@@ -0,0 +1,222 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget13: FC<Props> = ({className, backGroundColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column flex-grow-1'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Earnings
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-13-chart'
|
||||
style={{height: chartHeight, minHeight: chartHeight}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='pt-5'>
|
||||
{/* begin::Symbol */}
|
||||
<span className='text-gray-900 fw-bolder fs-2x lh-0'>$</span>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Number */}
|
||||
<span className='text-gray-900 fw-bolder fs-3x me-2 lh-0'>560</span>
|
||||
{/* end::Number */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<span className='text-gray-900 fw-bolder fs-6 lh-0'>+ 28% this week</span>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300') as string
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [15, 25, 15, 40, 20, 50],
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0,
|
||||
stops: [20, 120, 120, 120],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: ['#FFFFFF'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff'],
|
||||
markers: {
|
||||
colors: [labelColor],
|
||||
strokeColors: [strokeColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget13}
|
||||
@@ -0,0 +1,185 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget14: FC<Props> = ({className, backGroundColor, chartHeight = '150px'}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column flex-grow-1'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Contributors
|
||||
</a>
|
||||
|
||||
{/* end::Title */}
|
||||
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-14-chart'
|
||||
style={{height: chartHeight, minHeight: chartHeight}}
|
||||
></div>
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='pt-5'>
|
||||
{/* begin::Symbol */}
|
||||
<span className='text-gray-900 fw-bolder fs-2x lh-0'>$</span>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Number */}
|
||||
<span className='text-gray-900 fw-bolder fs-3x me-2 lh-0'>47</span>
|
||||
{/* end::Number */}
|
||||
|
||||
{/* begin::Text */}
|
||||
<span className='text-gray-900 fw-bolder fs-6 lh-0'>- 12% this week</span>
|
||||
{/* end::Text */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
// const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Inflation',
|
||||
data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: chartHeight,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2.5,
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
columnWidth: '20%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#304758'],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
],
|
||||
position: 'top',
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
// background: labelColor,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget14}
|
||||
@@ -0,0 +1,115 @@
|
||||
import {FC} from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
backGroundColor: string
|
||||
}
|
||||
|
||||
const MixedWidget15: FC<Props> = ({className, backGroundColor}) => (
|
||||
<div
|
||||
className={`card ${className} theme-dark-bg-body`}
|
||||
style={{backgroundColor: backGroundColor}}
|
||||
>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Wrapper */}
|
||||
<div className='d-flex flex-column mb-7'>
|
||||
{/* begin::Title */}
|
||||
<a href='#' className='text-gray-900 text-hover-primary fw-bolder fs-3'>
|
||||
Summary
|
||||
</a>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Wrapper */}
|
||||
|
||||
<div className='row g-0'>
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center mb-9 me-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-42' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$50K</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Sales</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center mb-9 ms-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-45' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$4,5K</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Revenue</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-21' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>40</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Tasks</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
|
||||
{/*begin::Col*/}
|
||||
<div className='col-6'>
|
||||
<div className='d-flex align-items-center ms-2'>
|
||||
{/*begin::Symbol*/}
|
||||
<div className='symbol symbol-40px me-3'>
|
||||
<div className='symbol-label bg-body bg-opacity-50'>
|
||||
<KTIcon iconName='abstract-44' className='fs-1 text-gray-900' />
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Symbol*/}
|
||||
|
||||
{/*begin::Title*/}
|
||||
<div>
|
||||
<div className='fs-5 text-gray-900 fw-bolder lh-1'>$5.8M</div>
|
||||
<div className='fs-7 text-gray-600 fw-bold'>Sales</div>
|
||||
</div>
|
||||
{/*end::Title*/}
|
||||
</div>
|
||||
</div>
|
||||
{/*end::Col*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export {MixedWidget15}
|
||||
@@ -0,0 +1,259 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
strokeColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget2: FC<Props> = ({className, chartColor, chartHeight, strokeColor}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(
|
||||
chartRef.current,
|
||||
chartOptions(chartHeight, chartColor, strokeColor)
|
||||
)
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className={`card-header border-0 py-5 bg-${chartColor}`}>
|
||||
<h3 className='card-title fw-bold text-white'>Sales Statistics</h3>
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-white btn-active-white btn-active-color- border-0 me-n3'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className={`mixed-widget-2-chart card-rounded-bottom bg-${chartColor}`}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
{/* begin::Stats */}
|
||||
<div className='card-p mt-n20 position-relative'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-warning px-6 py-8 rounded-2 me-7 mb-7'>
|
||||
<KTIcon iconName='chart-simple' className='fs-3x text-warning d-block my-2' />
|
||||
<a href='#' className='text-warning fw-semibold fs-6'>
|
||||
Weekly Sales
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-primary px-6 py-8 rounded-2 mb-7'>
|
||||
<KTIcon iconName='plus' className='fs-3x text-primary d-block my-2' />
|
||||
<a href='#' className='text-primary fw-semibold fs-6'>
|
||||
New Users
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-danger px-6 py-8 rounded-2 me-7'>
|
||||
<KTIcon iconName='abstract-26' className='fs-3x text-danger d-block my-2' />
|
||||
<a href='#' className='text-danger fw-semibold fs-6 mt-2'>
|
||||
Item Orders
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
{/* begin::Col */}
|
||||
<div className='col bg-light-success px-6 py-8 rounded-2'>
|
||||
<KTIcon iconName='sms' className='fs-3x text-success d-block my-2' />
|
||||
<a href='#' className='text-success fw-semibold fs-6 mt-2'>
|
||||
Bug Reports
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (
|
||||
chartHeight: string,
|
||||
chartColor: string,
|
||||
strokeColor: string
|
||||
): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
const color = getCSSVariableValue('--bs-' + chartColor)
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 45, 32, 70, 40, 40, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
enabledOnSeries: undefined,
|
||||
top: 5,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: strokeColor,
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [strokeColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: borderColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 80,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ['transparent'],
|
||||
markers: {
|
||||
colors: [color],
|
||||
strokeColors: [strokeColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget2}
|
||||
@@ -0,0 +1,248 @@
|
||||
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import clsx from 'clsx'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget3: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
<div className={`card-header border-0 bg-${chartColor} py-5`}>
|
||||
<h3 className='card-title fw-bold text-white'>Sales Progress</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className={clsx(
|
||||
'btn btn-sm btn-icon btn-color-white btn-active-white',
|
||||
`btn-active-color-${chartColor}`,
|
||||
'border-0 me-n3'
|
||||
)}
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0'>
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className={`mixed-widget-12-chart card-rounded-bottom bg-${chartColor}`}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
|
||||
{/* begin::Stats */}
|
||||
<div className='card-rounded bg-body mt-n10 position-relative card-px py-15'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mb-7'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Avarage Sale</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$650</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Comissions</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$29,500</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Revenue</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$55,000</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col mx-5'>
|
||||
<div className='fs-6 text-gray-500'>Expenses</div>
|
||||
<div className='fs-2 fw-bold text-gray-800'>$1,130,600</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-500')
|
||||
const borderColor = getCSSVariableValue('--bs-gray-200')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [35, 65, 75, 55, 45, 60, 55],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [40, 70, 80, 60, 50, 65, 60],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'bar',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: ['solid', 'solid'],
|
||||
opacity: [0.25, 1],
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ['#ffffff', '#ffffff'],
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 4,
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget3}
|
||||
@@ -0,0 +1,120 @@
|
||||
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
color: string
|
||||
image: string
|
||||
title: string
|
||||
date: string
|
||||
progress: string
|
||||
}
|
||||
|
||||
const MixedWidget4: React.FC<Props> = ({className, color, image, title, date, progress}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body'>
|
||||
{/* begin::Heading */}
|
||||
<div className='d-flex flex-stack'>
|
||||
{/* begin:Info */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin:Image */}
|
||||
<div className='symbol symbol-60px me-5'>
|
||||
<span className={clsx(`symbol-label`, `bg-${color}-light`)}>
|
||||
<img src={toAbsoluteUrl(image)} className='h-50 align-self-center' alt='' />
|
||||
</span>
|
||||
</div>
|
||||
{/* end:Image */}
|
||||
|
||||
{/* begin:Title */}
|
||||
<div className='d-flex flex-column flex-grow-1 my-lg-0 my-2 pr-3'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-5'>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<span className='text-muted fw-semibold'>{date}</span>
|
||||
</div>
|
||||
{/* end:Title */}
|
||||
</div>
|
||||
{/* begin:Info */}
|
||||
|
||||
{/* begin:Menu */}
|
||||
<div className='ms-1'>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
</div>
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
{/* end::Heading */}
|
||||
|
||||
{/* begin:Stats */}
|
||||
<div className='d-flex flex-column w-100 mt-12'>
|
||||
<span className='text-gray-900 me-2 fw-bold pb-3'>Progress</span>
|
||||
|
||||
<div className='progress h-5px w-100'>
|
||||
<div
|
||||
className={`progress-bar bg-${color}`}
|
||||
role='progressbar'
|
||||
style={{width: progress}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end:Stats */}
|
||||
|
||||
{/* begin:Team */}
|
||||
<div className='d-flex flex-column mt-10'>
|
||||
<div className='text-gray-900 me-2 fw-bold pb-4'>Team</div>
|
||||
|
||||
<div className='d-flex'>
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Ana Stone'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Mark Larson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Sam Harris'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a href='#' className='symbol symbol-35px' data-bs-toggle='tooltip' title='Alice Micto'>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-10.jpg')} alt='' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end:Team */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget4}
|
||||
@@ -0,0 +1,78 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {toAbsoluteUrl} from '../../../helpers'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
time: string
|
||||
image: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const MixedWidget5: FC<Props> = ({className, time, image, title, description}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column pb-10 pb-lg-15'>
|
||||
<div className='flex-grow-1'>
|
||||
{/* begin::Info */}
|
||||
<div className='d-flex align-items-center pe-2 mb-5'>
|
||||
<span className='text-muted fw-bold fs-5 flex-grow-1'>{time}</span>
|
||||
|
||||
<div className='symbol symbol-50px'>
|
||||
<span className='symbol-label bg-light'>
|
||||
<img src={toAbsoluteUrl(image)} className='h-50 align-self-center' alt='' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Info */}
|
||||
|
||||
{/* begin::Link */}
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-4'>
|
||||
{title}
|
||||
</a>
|
||||
{/* end::Link */}
|
||||
|
||||
{/* begin::Desc */}
|
||||
<p className='py-3' dangerouslySetInnerHTML={{__html: description}}></p>
|
||||
{/* end::Desc */}
|
||||
</div>
|
||||
|
||||
{/* begin::Team */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Ana Stone'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-6.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Mark Larson'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-5.jpg')} alt='' />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href='#'
|
||||
className='symbol symbol-35px me-2'
|
||||
data-bs-toggle='tooltip'
|
||||
title='Sam Harris'
|
||||
>
|
||||
<img src={toAbsoluteUrl('media/avatars/300-9.jpg')} alt='' />
|
||||
</a>
|
||||
</div>
|
||||
{/* end::Team */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {MixedWidget5}
|
||||
@@ -0,0 +1,273 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartHeight: string
|
||||
chartColor: string
|
||||
}
|
||||
|
||||
const MixedWidget6: FC<Props> = ({className, chartHeight, chartColor}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight, chartColor))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Sales Overview</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Recent sales statistics</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex flex-column'>
|
||||
{/* begin::Stats */}
|
||||
<div className='card-p pt-5 bg-body flex-grow-1'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mr-8'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Average Sale</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fs-4 fw-bold'>$650</div>
|
||||
<KTIcon iconName='arrow-up' className='fs-5 text-success ms-1' />
|
||||
</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Commission</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='fs-4 fw-bold'>$233,600</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mt-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col mr-8'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Annual Taxes 2019</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='fs-4 fw-bold'>$29,004</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
{/* begin::Label */}
|
||||
<div className='fs-7 text-muted fw-semibold'>Annual Income</div>
|
||||
{/* end::Label */}
|
||||
|
||||
{/* begin::Stat */}
|
||||
<div className='d-flex align-items-center'>
|
||||
<div className='fs-4 fw-bold'>$1,480,00</div>
|
||||
<KTIcon iconName='arrow-down' className='fs-5 text-danger ms-1' />
|
||||
</div>
|
||||
{/* end::Stat */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div
|
||||
ref={chartRef}
|
||||
className='mixed-widget-3-chart card-rounded-bottom'
|
||||
data-kt-chart-color={chartColor}
|
||||
style={{height: chartHeight}}
|
||||
></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartHeight: string, chartColor: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 25, 45, 30, 55, 55],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget6}
|
||||
@@ -0,0 +1,139 @@
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget7: React.FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Action Needed</span>
|
||||
<span className='text-muted fw-semibold fs-7'>Complete your profile setup</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
<div className='flex-grow-1'>
|
||||
<div ref={chartRef} className='mixed-widget-4-chart'></div>
|
||||
</div>
|
||||
|
||||
<div className='pt-5'>
|
||||
<p className='text-center fs-6 pb-5 '>
|
||||
<span className='badge badge-light-danger fs-8'>Notes:</span> Current sprint
|
||||
requires stakeholders
|
||||
<br />
|
||||
to approve newly amended policies
|
||||
</p>
|
||||
|
||||
<a href='#' className={`btn btn-${chartColor} w-100 py-3`}>
|
||||
Take Action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
const labelColor = getCSSVariableValue('--bs-gray-700')
|
||||
|
||||
return {
|
||||
series: [74],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: chartHeight,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '65%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
fontWeight: '700',
|
||||
},
|
||||
value: {
|
||||
color: labelColor,
|
||||
fontSize: '30px',
|
||||
fontWeight: '700',
|
||||
offsetY: 12,
|
||||
show: true,
|
||||
formatter: function (val) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
track: {
|
||||
background: lightColor,
|
||||
strokeWidth: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [baseColor],
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
labels: ['Progress'],
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget7}
|
||||
@@ -0,0 +1,325 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget8: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart1 = new ApexCharts(chartRef.current, chart1Options(chartColor, chartHeight))
|
||||
if (chart1) {
|
||||
chart1.render()
|
||||
}
|
||||
|
||||
return chart1
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart1 = refreshChart()
|
||||
|
||||
return () => {
|
||||
if (chart1) {
|
||||
chart1.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Trends</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Latest trends</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body d-flex flex-column'>
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-5-chart card-rounded-top'></div>
|
||||
{/* end::Chart */}
|
||||
|
||||
{/* begin::Items */}
|
||||
<div className='mt-5'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack mb-5'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/plurk.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Authors
|
||||
</a>
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>Ricky Hunt, Sandra Trepp</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack mb-5'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/figma-1.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Sales
|
||||
</a>
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>PitStop Emails</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex flex-stack'>
|
||||
{/* begin::Section */}
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light'>
|
||||
<img
|
||||
src={toAbsoluteUrl('media/svg/brand-logos/vimeo.svg')}
|
||||
alt=''
|
||||
className='h-50'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div className='py-1'>
|
||||
<a href='#' className='fs-6 text-gray-800 text-hover-primary fw-bold'>
|
||||
Top Engagement
|
||||
</a>
|
||||
|
||||
<div className='fs-7 text-muted fw-semibold mt-1'>KT.com</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
{/* end::Section */}
|
||||
|
||||
{/* begin::Label */}
|
||||
<div className='badge badge-light fw-semibold py-4 px-3'>+82$</div>
|
||||
{/* end::Label */}
|
||||
</div>
|
||||
{/* end::Item */}
|
||||
</div>
|
||||
{/* end::Items */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chart1Options = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor) as string
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 30, 60, 25, 25, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
// fill1: {
|
||||
// type: 'gradient',
|
||||
// opacity: 1,
|
||||
// gradient: {
|
||||
// type: 'vertical',
|
||||
// shadeIntensity: 0.5,
|
||||
// gradientToColors: undefined,
|
||||
// inverseColors: true,
|
||||
// opacityFrom: 1,
|
||||
// opacityTo: 0.375,
|
||||
// stops: [25, 50, 100],
|
||||
// colorStops: [],
|
||||
// },
|
||||
// },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
formatter: undefined,
|
||||
offsetY: 0,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 65,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget8}
|
||||
@@ -0,0 +1,297 @@
|
||||
import {useEffect, useRef, FC} from 'react'
|
||||
import ApexCharts, {ApexOptions} from 'apexcharts'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {getCSSVariableValue} from '../../../assets/ts/_utils'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import {useThemeMode} from '../../layout/theme-mode/ThemeModeProvider'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
chartColor: string
|
||||
chartHeight: string
|
||||
}
|
||||
|
||||
const MixedWidget9: FC<Props> = ({className, chartColor, chartHeight}) => {
|
||||
const chartRef = useRef<HTMLDivElement | null>(null)
|
||||
const {mode} = useThemeMode()
|
||||
const refreshChart = () => {
|
||||
if (!chartRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const chart = new ApexCharts(chartRef.current, chartOptions(chartColor, chartHeight))
|
||||
if (chart) {
|
||||
chart.render()
|
||||
}
|
||||
|
||||
return chart
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const chart = refreshChart()
|
||||
return () => {
|
||||
if (chart) {
|
||||
chart.destroy()
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chartRef, mode])
|
||||
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Beader */}
|
||||
<div className='card-header border-0 py-5'>
|
||||
<h3 className='card-title align-items-start flex-column'>
|
||||
<span className='card-label fw-bold fs-3 mb-1'>Sales Statistics</span>
|
||||
|
||||
<span className='text-muted fw-semibold fs-7'>Recent sales statistics</span>
|
||||
</h3>
|
||||
|
||||
<div className='card-toolbar'>
|
||||
{/* begin::Menu */}
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
|
||||
data-kt-menu-trigger='click'
|
||||
data-kt-menu-placement='bottom-end'
|
||||
data-kt-menu-flip='top-end'
|
||||
>
|
||||
<KTIcon iconName='category' className='fs-2' />
|
||||
</button>
|
||||
<Dropdown1 />
|
||||
{/* end::Menu */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<div className='card-body p-0 d-flex flex-column'>
|
||||
{/* begin::Stats */}
|
||||
<div className='card-px pt-5 pb-10 flex-grow-1'>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0 mt-5 mb-10'>
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-info'>
|
||||
<KTIcon iconName='bucket' className='fs-1 text-info' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$2,034</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Author Sales</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-danger'>
|
||||
<KTIcon iconName='abstract-26' className='fs-1 text-danger' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$706</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Commision</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-0'>
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-success'>
|
||||
<KTIcon iconName='basket' className='fs-1 text-success' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$49</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>Average Bid</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col'>
|
||||
<div className='d-flex align-items-center me-2'>
|
||||
{/* begin::Symbol */}
|
||||
<div className='symbol symbol-50px me-3'>
|
||||
<div className='symbol-label bg-light-primary'>
|
||||
<KTIcon iconName='cheque' className='fs-1 text-primary' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Symbol */}
|
||||
|
||||
{/* begin::Title */}
|
||||
<div>
|
||||
<div className='fs-4 text-gray-900 fw-bold'>$5.8M</div>
|
||||
<div className='fs-7 text-muted fw-semibold'>All Time Sales</div>
|
||||
</div>
|
||||
{/* end::Title */}
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</div>
|
||||
{/* end::Stats */}
|
||||
|
||||
{/* begin::Chart */}
|
||||
<div ref={chartRef} className='mixed-widget-6-chart card-rounded-bottom'></div>
|
||||
{/* end::Chart */}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chartOptions = (chartColor: string, chartHeight: string): ApexOptions => {
|
||||
const labelColor = getCSSVariableValue('--bs-gray-800')
|
||||
const strokeColor = getCSSVariableValue('--bs-gray-300')
|
||||
const baseColor = getCSSVariableValue('--bs-' + chartColor)
|
||||
const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light')
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [30, 25, 45, 30, 55, 55],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'area',
|
||||
height: chartHeight,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: true,
|
||||
width: 3,
|
||||
colors: [baseColor],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
position: 'front',
|
||||
stroke: {
|
||||
color: strokeColor,
|
||||
width: 1,
|
||||
dashArray: 3,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 60,
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
allowMultipleDataPointsSelection: false,
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return '$' + val + ' thousands'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [lightColor],
|
||||
markers: {
|
||||
colors: [lightColor],
|
||||
strokeColors: [baseColor],
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export {MixedWidget9}
|
||||
Reference in New Issue
Block a user