DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

removed unresolved packages

Browse Source
This commit was merged in pull request #16.
This commit is contained in:
victorAnumudu
2025-04-17 13:19:53 +01:00
parent 669ba34a8b
commit d1524b84d3
5 changed files with 318 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/Widget1.jsx
+176 -176
View File
@@ -1,187 +1,187 @@
import {useEffect, useRef} from 'react'
import ApexCharts from 'apexcharts'
// import {useEffect, useRef} from 'react'
// import ApexCharts from 'apexcharts'
const Widget1 = ({chartHeight='50px'}) => {
const chartRef = useRef(null)
// const Widget1 = ({chartHeight='50px'}) => {
// const chartRef = useRef(null)
const {mode} = '' // to be replaced by theme mode value later
// const {mode} = '' // to be replaced by theme mode value later
useEffect(() => {
const chart = refreshChart()
// useEffect(() => {
// const chart = refreshChart()
return () => {
if (chart) {
chart.destroy()
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chartRef, mode])
// return () => {
// if (chart) {
// chart.destroy()
// }
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [chartRef, mode])
const refreshChart = () => {
if (!chartRef.current) {
return
}
// const refreshChart = () => {
// if (!chartRef.current) {
// return
// }
const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
if (chart) {
chart.render()
}
// const chart = new ApexCharts(chartRef.current, chartOptions(chartHeight))
// if (chart) {
// chart.render()
// }
return chart
}
// return chart
// }
return (
<div className='w-full'>
{/* end::Title */}
<div
ref={chartRef}
className='mixed-widget-13-chart'
style={{height: chartHeight, minHeight: chartHeight}}
></div>
</div>
)
}
// return (
// <div className='w-full'>
// {/* end::Title */}
// <div
// ref={chartRef}
// className='mixed-widget-13-chart'
// style={{height: chartHeight, minHeight: chartHeight}}
// ></div>
// </div>
// )
// }
const chartOptions = (chartHeight) => {
// const labelColor = getCSSVariableValue('--bs-gray-800')
// const strokeColor = getCSSVariableValue('--bs-gray-300')
const labelColor = '#e9e9e9'
const strokeColor = '#e3e3e3'
// const strokeColor = getCSSVariableValue('--bs-gray-300') as string
// const chartOptions = (chartHeight) => {
// // const labelColor = getCSSVariableValue('--bs-gray-800')
// // const strokeColor = getCSSVariableValue('--bs-gray-300')
// const labelColor = '#e9e9e9'
// const strokeColor = '#e3e3e3'
// // const strokeColor = getCSSVariableValue('--bs-gray-300') as string
return {
series: [
{
name: 'Loans',
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 + ' thousand'
},
},
},
colors: ['#ffffff'],
markers: {
colors: [labelColor],
strokeColors: [strokeColor],
strokeWidth: 3,
},
}
}
// return {
// series: [
// {
// name: 'Loans',
// 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 + ' thousand'
// },
// },
// },
// colors: ['#ffffff'],
// markers: {
// colors: [labelColor],
// strokeColors: [strokeColor],
// strokeWidth: 3,
// },
// }
// }
export {Widget1}
// export {Widget1}