diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx index 16d08376..1db90716 100644 --- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx +++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx @@ -32,8 +32,6 @@ import { columnSummaryTypeListOptions, } from '../options' import { ChartPanesDto, ChartSeriesDto, ChartValueAxisDto } from '@/proxy/admin/charts/models' -import { getListFormFields } from '@/services/admin/list-form-field.service' -import { groupBy } from 'lodash' import CreatableSelect from 'react-select/creatable' const schema = object().shape({ diff --git a/ui/src/views/list/Chart.tsx b/ui/src/views/list/Chart.tsx index e0d6f575..9a2ad784 100644 --- a/ui/src/views/list/Chart.tsx +++ b/ui/src/views/list/Chart.tsx @@ -4,17 +4,20 @@ 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 { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, 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' import { usePermission } from '@/utils/hooks/usePermission' -import { Button } from '@/components/ui' +import { Button, FormContainer, FormItem, Input, toast, Notification, Dialog } from '@/components/ui' import { ROUTES_ENUM } from '@/routes/route.constant' import { usePWA } from '@/utils/hooks/usePWA' -import { FaCog, FaSearch, FaSyncAlt } from 'react-icons/fa' +import { FaCog, FaCrosshairs, FaMinus, FaPlus, FaSearch, FaSyncAlt } from 'react-icons/fa' import { buildSeriesDto } from './Utils' +import { ChartSeriesDto } from '@/proxy/admin/charts/models' +import { Formik, Form, Field, FieldArray, useFormikContext } from 'formik' // sadece buradan Form +import { object, string, array } from 'yup' interface ChartProps extends CommonProps, Meta { listFormCode: string @@ -31,6 +34,8 @@ const Chart = (props: ChartProps) => { const { translate } = useLocalization() const { checkPermission } = usePermission() const isPwaMode = usePWA() + const [series, setSeries] = useState([]) + const initialized = useRef(false) const [searchParams] = useSearchParams() const [chartOptions, setChartOptions] = useState() @@ -45,11 +50,27 @@ const Chart = (props: ChartProps) => { searchParams ? new URLSearchParams(searchParams) : new URLSearchParams(), ) + const schema = object().shape({ + series: array().of( + object().shape({ + name: string().required('Name Required'), + argumentField: string().required('Argument Field Required'), + valueField: string().required('Value Field Required'), + summaryType: string().required('Summary Type Required'), + }), + ), + }) + useEffect(() => { if (!gridDto) return + const gridOptions = { + ...gridDto.gridOptions, + seriesDto: series ?? gridDto.gridOptions.seriesDto, + } + const dataSource = createSelectDataSource( - gridDto.gridOptions, + gridOptions, listFormCode, urlSearchParams, [], @@ -85,7 +106,7 @@ const Chart = (props: ChartProps) => { valueAxis: gridDto.gridOptions.valueAxisDto, tooltip: gridDto.gridOptions.tooltipDto, - series: buildSeriesDto(gridDto.gridOptions.seriesDto), + series: buildSeriesDto(series ?? gridDto.gridOptions.seriesDto), panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined, commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto, @@ -100,7 +121,7 @@ const Chart = (props: ChartProps) => { } setChartOptions(options) - }, [gridDto, searchParams, urlSearchParams]) + }, [gridDto, series, searchParams, urlSearchParams]) const onFilter = useCallback( (value?: string) => { @@ -148,6 +169,51 @@ const Chart = (props: ChartProps) => { [gridDto, urlSearchParams, searchText], ) + const newSeriesValue = () => { + return { + argumentField: '', + axis: '', + barOverlapGroup: '', + barPadding: 0, + barWidth: 0, + color: '', + cornerRadius: 0, + dashStyle: 'solid', + ignoreEmptyPoints: false, + name: '', + pane: '', + rangeValue1Field: '', + rangeValue2Field: '', + selectionMode: 'none', + showInLegend: true, + type: 'line', + valueField: '', + visible: true, + width: 2, + label: { + visible: true, + backgroundColor: '#f05b41', + customizeText: '', + format: 'decimal', + font: { + color: '#FFFFFF', + family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif', + size: 12, + weight: 400, + }, + }, + } + } + + useEffect(() => { + if (gridDto && !initialized.current) { + setSeries(gridDto.gridOptions.seriesDto) + initialized.current = true + } + }, [gridDto]) + + const [openDialog, setOpenDialog] = useState(false) + return ( {!isSubForm && gridDto && ( @@ -192,12 +258,24 @@ const Chart = (props: ChartProps) => { variant={'default'} className="text-sm" onClick={async () => { + setSeries(gridDto?.gridOptions?.seriesDto ?? []) await props.refreshGridDto() }} title="Refresh Data" > + + + {checkPermission(gridDto?.gridOptions.permissionDto.u) && ( + + + + + )} + + )}