Chart Series Argument ve Value Field seçimi
This commit is contained in:
Sedat Öztürk
parent
4d1416d5a1
commit
d136fb2447
4 changed files with 174 additions and 63 deletions
|
|
@ -8,6 +8,8 @@ import {
|
|||
Select,
|
||||
Table,
|
||||
Tabs,
|
||||
Notification,
|
||||
toast,
|
||||
} from '@/components/ui'
|
||||
import TBody from '@/components/ui/Table/TBody'
|
||||
import THead from '@/components/ui/Table/THead'
|
||||
|
|
@ -31,18 +33,22 @@ import {
|
|||
chartSeriesSelectionModeOptions,
|
||||
chartSeriesDashStyleOptions,
|
||||
} from './options'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { JsonRowDialogData } from './json-row-operations/types'
|
||||
import JsonRowOpDialogSeries from './json-row-operations/JsonRowOpDialogSeries'
|
||||
import CreatableSelect from 'react-select/creatable'
|
||||
import { getListFormFields } from '@/services/admin/list-form-field.service'
|
||||
import groupBy from 'lodash/groupBy'
|
||||
|
||||
const schema = object().shape({
|
||||
name: string().required(),
|
||||
})
|
||||
|
||||
function ChartTabSeries(props: FormEditProps) {
|
||||
function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
|
||||
const [isJsonRowOpDialogOpen, setIsJsonRowOpDialogOpen] = useState(false)
|
||||
const [jsonRowOpModalData, setJsonRowOpModalData] = useState<JsonRowDialogData>()
|
||||
const { translate } = useLocalization()
|
||||
const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
|
||||
|
||||
const listFormValues = useStoreState((s) => s.admin.listFormValues)
|
||||
if (!listFormValues) {
|
||||
|
|
@ -63,6 +69,45 @@ function ChartTabSeries(props: FormEditProps) {
|
|||
}))
|
||||
}
|
||||
|
||||
const getFields = async () => {
|
||||
if (!props.listFormCode) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await getListFormFields({
|
||||
listFormCode: props.listFormCode,
|
||||
sorting: 'ListOrderNo',
|
||||
maxResultCount: 1000,
|
||||
})
|
||||
if (resp.data?.items) {
|
||||
const fieldNames = groupBy(resp?.data?.items, 'fieldName')
|
||||
setFieldList(
|
||||
Object.keys(fieldNames).map((a) => ({
|
||||
value: a,
|
||||
label: a,
|
||||
})),
|
||||
)
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.push(
|
||||
<Notification type="danger" duration={2000}>
|
||||
Alanlar getirilemedi
|
||||
{error.toString()}
|
||||
</Notification>,
|
||||
{
|
||||
placement: 'top-end',
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (props.listFormCode) {
|
||||
getFields()
|
||||
}
|
||||
}, [props.listFormCode])
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={listFormValues}
|
||||
|
|
@ -170,6 +215,7 @@ function ChartTabSeries(props: FormEditProps) {
|
|||
</Table>
|
||||
</Card>
|
||||
<JsonRowOpDialogSeries
|
||||
listFormCode={listFormValues.listFormCode!}
|
||||
isOpen={isJsonRowOpDialogOpen}
|
||||
setIsOpen={setIsJsonRowOpDialogOpen}
|
||||
data={jsonRowOpModalData}
|
||||
|
|
@ -272,28 +318,46 @@ function ChartTabSeries(props: FormEditProps) {
|
|||
|
||||
<FormItem
|
||||
label="Argument Field"
|
||||
invalid={
|
||||
!!(
|
||||
errors.commonSeriesSettingsDto?.argumentField &&
|
||||
touched.commonSeriesSettingsDto?.argumentField
|
||||
)
|
||||
}
|
||||
invalid={errors.commonSeriesSettingsDto?.argumentField && touched.commonSeriesSettingsDto?.argumentField}
|
||||
errorMessage={errors.commonSeriesSettingsDto?.argumentField}
|
||||
>
|
||||
<Field name="commonSeriesSettingsDto.argumentField" component={Input} />
|
||||
<Field type="text" name="commonSeriesSettingsDto.argumentField">
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
componentAs={CreatableSelect}
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
options={fieldList}
|
||||
value={fieldList.find((option) => option.value === values.commonSeriesSettingsDto.argumentField)}
|
||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||||
menuPlacement="auto"
|
||||
maxMenuHeight={150}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Value Field"
|
||||
invalid={
|
||||
!!(
|
||||
errors.commonSeriesSettingsDto?.valueField &&
|
||||
touched.commonSeriesSettingsDto?.valueField
|
||||
)
|
||||
}
|
||||
invalid={errors.commonSeriesSettingsDto?.valueField && touched.commonSeriesSettingsDto?.valueField}
|
||||
errorMessage={errors.commonSeriesSettingsDto?.valueField}
|
||||
>
|
||||
<Field name="commonSeriesSettingsDto.valueField" component={Input} />
|
||||
<Field type="text" name="valueField">
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
componentAs={CreatableSelect}
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
options={fieldList}
|
||||
value={fieldList.find((option) => option.value === values.commonSeriesSettingsDto.valueField)}
|
||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||||
menuPlacement="auto"
|
||||
maxMenuHeight={150}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
|
|
|
|||
|
|
@ -426,12 +426,11 @@ const FormEdit = () => {
|
|||
<TabContent value="extrafilter">
|
||||
<FormTabExtraFilters listFormCode={listFormCode} />
|
||||
</TabContent>
|
||||
|
||||
<TabContent value="commonSettings">
|
||||
<ChartTabCommonSettings onSubmit={onSubmit} />
|
||||
</TabContent>
|
||||
<TabContent value="series">
|
||||
<ChartTabSeries onSubmit={onSubmit} />
|
||||
<ChartTabSeries onSubmit={onSubmit} listFormCode={listFormCode} />
|
||||
</TabContent>
|
||||
<TabContent value="panes">
|
||||
<ChartTabPanes onSubmit={onSubmit} />
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { SelectBoxOption } from '@/shared/types'
|
|||
import { useStoreActions, useStoreState } from '@/store'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||
import { Dispatch, SetStateAction } from 'react'
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react'
|
||||
import { boolean, number, object, string } from 'yup'
|
||||
import { JsonRowDialogData } from './types'
|
||||
import {
|
||||
|
|
@ -31,6 +31,9 @@ import {
|
|||
chartSeriesTypeOptions,
|
||||
} 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({
|
||||
visible: boolean().notRequired(),
|
||||
|
|
@ -65,11 +68,13 @@ const schema = object().shape({
|
|||
})
|
||||
|
||||
function JsonRowOpDialogSeries({
|
||||
listFormCode,
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
data,
|
||||
setData,
|
||||
}: {
|
||||
listFormCode: string
|
||||
isOpen: boolean
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>
|
||||
data: JsonRowDialogData | undefined
|
||||
|
|
@ -77,6 +82,7 @@ function JsonRowOpDialogSeries({
|
|||
}) {
|
||||
const { translate } = useLocalization()
|
||||
const { setJsonValue } = useStoreActions((a) => a.admin)
|
||||
const [fieldList, setFieldList] = useState<SelectBoxOption[]>([])
|
||||
|
||||
const handleClose = async (e?: any) => {
|
||||
if (e) {
|
||||
|
|
@ -111,6 +117,44 @@ function JsonRowOpDialogSeries({
|
|||
}))
|
||||
}
|
||||
|
||||
const getFields = async () => {
|
||||
if (!listFormCode) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await getListFormFields({
|
||||
listFormCode,
|
||||
sorting: 'ListOrderNo',
|
||||
maxResultCount: 1000,
|
||||
})
|
||||
if (resp.data?.items) {
|
||||
const fieldNames = groupBy(resp?.data?.items, 'fieldName')
|
||||
setFieldList(
|
||||
Object.keys(fieldNames).map((a) => ({
|
||||
value: a,
|
||||
label: a,
|
||||
})),
|
||||
)
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.push(
|
||||
<Notification type="danger" duration={2000}>
|
||||
Alanlar getirilemedi
|
||||
{error.toString()}
|
||||
</Notification>,
|
||||
{
|
||||
placement: 'top-end',
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (isOpen && data) {
|
||||
getFields()
|
||||
}
|
||||
}, [isOpen, data])
|
||||
|
||||
if (!data) {
|
||||
return null
|
||||
}
|
||||
|
|
@ -258,7 +302,23 @@ function JsonRowOpDialogSeries({
|
|||
invalid={errors.argumentField && touched.argumentField}
|
||||
errorMessage={errors.argumentField}
|
||||
>
|
||||
<Field type="text" name="argumentField" component={Input} />
|
||||
<Field type="text" name="argumentField">
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
componentAs={CreatableSelect}
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
options={fieldList}
|
||||
value={fieldList.find(
|
||||
(option) => option.value === values.argumentField,
|
||||
)}
|
||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||||
menuPlacement="auto"
|
||||
maxMenuHeight={150}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
|
|
@ -266,7 +326,21 @@ function JsonRowOpDialogSeries({
|
|||
invalid={errors.valueField && touched.valueField}
|
||||
errorMessage={errors.valueField}
|
||||
>
|
||||
<Field type="text" name="valueField" component={Input} />
|
||||
<Field type="text" name="valueField">
|
||||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||||
<Select
|
||||
componentAs={CreatableSelect}
|
||||
field={field}
|
||||
form={form}
|
||||
isClearable={true}
|
||||
options={fieldList}
|
||||
value={fieldList.find((option) => option.value === values.valueField)}
|
||||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||||
menuPlacement="auto"
|
||||
maxMenuHeight={150}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
|
|
@ -416,21 +490,13 @@ function JsonRowOpDialogSeries({
|
|||
</FormItem>
|
||||
|
||||
<Card className="my-2" header="Font">
|
||||
<FormItem
|
||||
label="Color"
|
||||
errorMessage={errors.label?.font?.color}
|
||||
>
|
||||
<FormItem label="Color" errorMessage={errors.label?.font?.color}>
|
||||
<Field name="label.font.color" component={Input} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Family"
|
||||
invalid={
|
||||
!!(
|
||||
errors.label?.font?.family &&
|
||||
touched.label?.font?.family
|
||||
)
|
||||
}
|
||||
invalid={!!(errors.label?.font?.family && touched.label?.font?.family)}
|
||||
errorMessage={errors.label?.font?.family}
|
||||
>
|
||||
<Field name="label.font.family" component={Input} />
|
||||
|
|
@ -438,36 +504,18 @@ function JsonRowOpDialogSeries({
|
|||
|
||||
<FormItem
|
||||
label="Size"
|
||||
invalid={
|
||||
!!(
|
||||
errors.label?.font?.size &&
|
||||
touched.label?.font?.size
|
||||
)
|
||||
}
|
||||
invalid={!!(errors.label?.font?.size && touched.label?.font?.size)}
|
||||
errorMessage={errors.label?.font?.size}
|
||||
>
|
||||
<Field
|
||||
type="number"
|
||||
name="label.font.size"
|
||||
component={Input}
|
||||
/>
|
||||
<Field type="number" name="label.font.size" component={Input} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="Weight"
|
||||
invalid={
|
||||
!!(
|
||||
errors.label?.font?.weight &&
|
||||
touched.label?.font?.weight
|
||||
)
|
||||
}
|
||||
invalid={!!(errors.label?.font?.weight && touched.label?.font?.weight)}
|
||||
errorMessage={errors.label?.font?.weight}
|
||||
>
|
||||
<Field
|
||||
type="number"
|
||||
name="label.font.weight"
|
||||
component={Input}
|
||||
/>
|
||||
<Field type="number" name="label.font.weight" component={Input} />
|
||||
</FormItem>
|
||||
</Card>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@ const Chart = (props: ChartProps) => {
|
|||
gridDto.gridOptions,
|
||||
listFormCode,
|
||||
searchParams,
|
||||
[],
|
||||
gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
|
||||
gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
|
||||
// [],
|
||||
// gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
|
||||
// gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
|
||||
)
|
||||
|
||||
const options = {
|
||||
|
|
@ -74,13 +74,13 @@ const Chart = (props: ChartProps) => {
|
|||
valueAxis: gridDto.gridOptions.valueAxisDto,
|
||||
tooltip: gridDto.gridOptions.tooltipDto,
|
||||
|
||||
series:
|
||||
gridDto.gridOptions.seriesDto?.length > 0
|
||||
? gridDto.gridOptions.seriesDto.map((s) => ({
|
||||
argumentField: 'key',
|
||||
valueField: 'summary',
|
||||
}))
|
||||
: undefined,
|
||||
series:gridDto.gridOptions.seriesDto,
|
||||
// gridDto.gridOptions.seriesDto?.length > 0
|
||||
// ? gridDto.gridOptions.seriesDto.map((s) => ({
|
||||
// argumentField: 'key',
|
||||
// valueField: 'summary',
|
||||
// }))
|
||||
// : undefined,
|
||||
panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
|
||||
commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
|
||||
commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
|
||||
|
|
|
|||
Loading…
Reference in a new issue