98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
|
import { CommonProps } from '@/@types/common'
|
||
|
|
import { Meta } from '@/@types/routes'
|
||
|
|
import { Container } from '@/components/shared'
|
||
|
|
import { DX_CLASSNAMES } from '@/constants/app.constant'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import DxChart from 'devextreme-react/chart'
|
||
|
|
import { useEffect, useState } from 'react'
|
||
|
|
import { Helmet } from 'react-helmet'
|
||
|
|
import { useParams, useSearchParams } from 'react-router-dom'
|
||
|
|
import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
|
||
|
|
import { GridDto } from '@/proxy/form/models'
|
||
|
|
|
||
|
|
interface ChartProps extends CommonProps, Meta {
|
||
|
|
listFormCode: string
|
||
|
|
filter?: string
|
||
|
|
isSubForm?: boolean
|
||
|
|
level?: number
|
||
|
|
refreshData?: () => Promise<void>
|
||
|
|
gridDto?: GridDto
|
||
|
|
}
|
||
|
|
|
||
|
|
const Chart = (props: ChartProps) => {
|
||
|
|
const { listFormCode, filter, isSubForm, level, gridDto } = props
|
||
|
|
const { translate } = useLocalization()
|
||
|
|
|
||
|
|
const [searchParams] = useSearchParams()
|
||
|
|
const [chartOptions, setChartOptions] = useState<any>()
|
||
|
|
const { createSelectDataSource } = useListFormCustomDataSource({})
|
||
|
|
|
||
|
|
const params = useParams()
|
||
|
|
const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!gridDto) return
|
||
|
|
|
||
|
|
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
dataSource: dataSource,
|
||
|
|
|
||
|
|
adjustOnZoom: gridDto.gridOptions.commonDto?.adjustOnZoom ?? true,
|
||
|
|
containerBackgroundColor:
|
||
|
|
gridDto.gridOptions.commonDto?.containerBackgroundColor ?? '#FFFFFF',
|
||
|
|
disabled: gridDto.gridOptions.commonDto?.disabled ?? false,
|
||
|
|
palette: gridDto.gridOptions.commonDto?.palette ?? 'Material',
|
||
|
|
paletteExtensionMode: gridDto.gridOptions.commonDto?.paletteExtensionMode ?? 'blend',
|
||
|
|
//theme: s(chartDto.commonDto?.theme, 'generic.light'),
|
||
|
|
|
||
|
|
title: gridDto.gridOptions.titleDto,
|
||
|
|
size: gridDto.gridOptions.sizeDto?.useSize ? gridDto.gridOptions.sizeDto : null,
|
||
|
|
legend: gridDto.gridOptions.legendDto,
|
||
|
|
margin: gridDto.gridOptions.marginDto,
|
||
|
|
adaptiveLayout: gridDto.gridOptions.adaptivelayoutDto,
|
||
|
|
defaultPane: gridDto.gridOptions.commonDto?.defaultPane,
|
||
|
|
|
||
|
|
scrollBar: gridDto.gridOptions.scrollBarDto,
|
||
|
|
zoomAndPan: gridDto.gridOptions.zoomAndPanDto,
|
||
|
|
animation: gridDto.gridOptions.animationDto,
|
||
|
|
export: gridDto.gridOptions.exportDto,
|
||
|
|
crosshair: gridDto.gridOptions.crosshairDto,
|
||
|
|
argumentAxis: gridDto.gridOptions.argumentAxisDto,
|
||
|
|
valueAxis: gridDto.gridOptions.valueAxisDto,
|
||
|
|
tooltip: gridDto.gridOptions.tooltipDto,
|
||
|
|
|
||
|
|
panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
|
||
|
|
series: gridDto.gridOptions.seriesDto?.length > 0 ? gridDto.gridOptions.seriesDto : undefined,
|
||
|
|
commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
|
||
|
|
commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
|
||
|
|
commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto,
|
||
|
|
annotations: gridDto.gridOptions.annotationsDto,
|
||
|
|
commonAnnotationSettings: gridDto.gridOptions.commonAnnotationSettingsDto,
|
||
|
|
|
||
|
|
loadingIndicator: {
|
||
|
|
enabled: true,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
setChartOptions(options)
|
||
|
|
}, [gridDto, searchParams])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container className={DX_CLASSNAMES}>
|
||
|
|
{!isSubForm && gridDto && (
|
||
|
|
<Helmet
|
||
|
|
titleTemplate="%s | Sözsoft Kurs Platform"
|
||
|
|
title={translate('::' + gridDto?.gridOptions?.title)}
|
||
|
|
defaultTitle="Sözsoft Kurs Platform"
|
||
|
|
></Helmet>
|
||
|
|
)}
|
||
|
|
{_listFormCode && chartOptions && (
|
||
|
|
<DxChart key={'DxChart' + _listFormCode} {...chartOptions}></DxChart>
|
||
|
|
)}
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Chart
|