Pivot üzerinde Grafik göster kısmı seçilebiliyor

This commit is contained in:
Sedat Öztürk 2026-02-07 01:44:44 +03:00
parent e3413f4a5a
commit d42e6f61bd

View file

@ -41,6 +41,7 @@ import { layoutTypes } from '../admin/listForm/edit/types'
import { useListFormCustomDataSource } from './useListFormCustomDataSource' import { useListFormCustomDataSource } from './useListFormCustomDataSource'
import { useListFormColumns } from './useListFormColumns' import { useListFormColumns } from './useListFormColumns'
import { useStoreState } from '@/store' import { useStoreState } from '@/store'
import Checkbox from '@/components/ui/Checkbox'
interface PivotProps { interface PivotProps {
listFormCode: string listFormCode: string
@ -67,6 +68,7 @@ const Pivot = (props: PivotProps) => {
const [gridDataSource, setGridDataSource] = useState<CustomStore<any, any>>() const [gridDataSource, setGridDataSource] = useState<CustomStore<any, any>>()
const [columnData, setColumnData] = useState<GridColumnData[]>() const [columnData, setColumnData] = useState<GridColumnData[]>()
const [showChart, setShowChart] = useState(false)
// StateStoring için storageKey'i memoize et // StateStoring için storageKey'i memoize et
const storageKey = useMemo(() => { const storageKey = useMemo(() => {
@ -282,6 +284,9 @@ const Pivot = (props: PivotProps) => {
addCss(css) addCss(css)
} }
} }
// Set initial chart visibility
setShowChart(gridDto.gridOptions.pivotOptionDto.showChart ?? false)
}, [gridDto]) }, [gridDto])
// Kolonları memoize et // Kolonları memoize et
@ -388,9 +393,9 @@ const Pivot = (props: PivotProps) => {
} }
}, [gridDto, columnData, gridDataSource, customLoadState]) }, [gridDto, columnData, gridDataSource, customLoadState])
// Chart binding - sadece bir kez // Chart binding - showChart değiştiğinde de çalışmalı
useEffect(() => { useEffect(() => {
if (!gridRef?.current || !chartRef?.current) return if (!showChart || !gridRef?.current || !chartRef?.current) return
const pivotInstance = gridRef?.current?.instance() const pivotInstance = gridRef?.current?.instance()
const chartInstance = chartRef?.current?.instance() const chartInstance = chartRef?.current?.instance()
@ -400,7 +405,7 @@ const Pivot = (props: PivotProps) => {
alternateDataFields: false, alternateDataFields: false,
}) })
} }
}, [gridDto]) }, [showChart, gridDto])
return ( return (
<> <>
@ -418,6 +423,14 @@ const Pivot = (props: PivotProps) => {
<div className="p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 "> <div className="p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 ">
<div className="flex justify-end items-center"> <div className="flex justify-end items-center">
<div className="relative pb-1 flex gap-1 border-b-1"> <div className="relative pb-1 flex gap-1 border-b-1">
<label className="flex items-center gap-2 text-sm px-2 cursor-pointer">
<Checkbox
checked={showChart}
onChange={(checked) => setShowChart(checked)}
/>
<span>{translate('::ListForms.ListFormEdit.ShowChart') || 'Grafik'}</span>
</label>
<Button <Button
size="xs" size="xs"
variant={'default'} variant={'default'}
@ -494,7 +507,7 @@ const Pivot = (props: PivotProps) => {
)} )}
</div> </div>
</div> </div>
{gridDto.gridOptions.pivotOptionDto.showChart && ( {showChart && (
<Chart ref={chartRef as any}> <Chart ref={chartRef as any}>
<Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} /> <Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
<Tooltip enabled={true}></Tooltip> <Tooltip enabled={true}></Tooltip>