victorAnumudu
148 lines
3.3 KiB
React
148 lines
3.3 KiB
React
// import {useEffect, useRef} from 'react'
|
|
// import ApexCharts from 'apexcharts'
|
|
|
|
// const Widget2 = ({chartHeight='100px'}) => {
|
|
// const chartRef = useRef(null)
|
|
|
|
// const {mode} = '' // to be replaced by theme mode value later
|
|
|
|
// 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='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')
|
|
|
|
// return {
|
|
// series: [
|
|
// {
|
|
// name: 'Payments',
|
|
// 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 {Widget2}
|