sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Pivot ve Chart ile ilgili değişiklikler

Browse source
This commit is contained in:
Sedat Öztürk 2025-09-27 23:25:21 +03:00
parent b3c07ae19f
commit 4d1416d5a1
20 changed files with 1767 additions and 1530 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridPivotOptionDto.cs
View file

@ -4,6 +4,7 @@ public class GridPivotOptionDto
{ {
/// <summary> pivot grid için eklenmiş sütunlardır. /// <summary> pivot grid için eklenmiş sütunlardır.
/// </summary> /// </summary>
public bool ColumnChooserEnabled { get; set; }
public bool AllowFieldDragging { get; set; } = true; public bool AllowFieldDragging { get; set; } = true;
public bool ShowFieldPanel { get; set; } = true; public bool ShowFieldPanel { get; set; } = true;
public bool ShowDataFields { get; set; } = true; public bool ShowDataFields { get; set; } = true;

2
api/src/Kurs.Platform.Application/ListForms/ListFormCustomizationAppService.cs
View file

@ -89,7 +89,7 @@ public class ListFormCustomizationAppService : PlatformAppService
{ {
throw new BadHttpRequestException("Type UI veya Grid olmalıdır"); throw new BadHttpRequestException("Type UI veya Grid olmalıdır");
} }
if (input.CustomizationData.IsNullOrWhiteSpace()) if (!(input.CustomizationType == ListFormCustomizationTypeEnum.GridState) && input.CustomizationData.IsNullOrWhiteSpace())
{ {
throw new BadHttpRequestException("Filter data boş olamaz"); throw new BadHttpRequestException("Filter data boş olamaz");
} }

2
api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
View file

@ -7526,7 +7526,7 @@
{ {
"key": "admin.chart", "key": "admin.chart",
"path": "/admin/chart/:listFormCode", "path": "/admin/chart/:listFormCode",
"componentPath": "@/views/chart/Chart", "componentPath": "@/views/list/Chart",
"routeType": "protected", "routeType": "protected",
"authority": [] "authority": []
}, },

1
ui/src/proxy/form/models.ts
View file

@ -358,6 +358,7 @@ export interface GridColumnOptionDto {
} }
export interface GridPivotOptionDto { export interface GridPivotOptionDto {
columnChooserEnabled: boolean
allowFieldDragging: boolean allowFieldDragging: boolean
showFieldPanel: boolean showFieldPanel: boolean
showDataFields: boolean showDataFields: boolean

9
ui/src/shared/useListFormCustomDataSource.ts
View file

@ -1,9 +1,9 @@
import DataGrid from 'devextreme-react/data-grid' import DataGrid from 'devextreme-react/data-grid'
import PivotGrid from 'devextreme-react/pivot-grid' import PivotGrid from 'devextreme-react/pivot-grid'
import CustomStore from 'devextreme/data/custom_store' import CustomStore from 'devextreme/data/custom_store'
import { MutableRefObject, useCallback, useState } from 'react' import { MutableRefObject, useCallback } from 'react'
import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils' import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models' import { GridOptionsDto } from '../proxy/form/models'
import { GridColumnData } from '../views/list/GridColumnData' import { GridColumnData } from '../views/list/GridColumnData'
import { dynamicFetch } from '../services/form.service' import { dynamicFetch } from '../services/form.service'
import { MULTIVALUE_DELIMITER } from '../constants/app.constant' import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
@ -23,6 +23,8 @@ const useListFormCustomDataSource = ({
listFormCode: string, listFormCode: string,
searchParams?: URLSearchParams, searchParams?: URLSearchParams,
cols?: GridColumnData[], cols?: GridColumnData[],
group?: string,
groupSummary?: string
) => { ) => {
const store: any = new CustomStore({ const store: any = new CustomStore({
key: gridOptions.keyFieldName, key: gridOptions.keyFieldName,
@ -32,7 +34,8 @@ const useListFormCustomDataSource = ({
listFormCode, listFormCode,
filter: '', filter: '',
createDeleteQuery: searchParams?.get('createDeleteQuery'), createDeleteQuery: searchParams?.get('createDeleteQuery'),
group: '', group,
groupSummary
}) })
// 1. Default filter'ı al // 1. Default filter'ı al

2
ui/src/views/admin/listForm/edit/ChartTabAnimation.tsx
View file

@ -29,7 +29,6 @@ function ChartTabAnimation(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => ( {({ touched, errors, resetForm, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<Card className="my-2">
<FormItem <FormItem
label="Enabled" label="Enabled"
invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)} invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
@ -79,7 +78,6 @@ function ChartTabAnimation(props: FormEditProps) {
> >
<Field type="number" name="animationDto.maxPointCountSupported" component={Input} /> <Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
</FormItem> </FormItem>
</Card>
<div className="mt-4"> <div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

866
ui/src/views/admin/listForm/edit/ChartTabAnnotations.tsx
View file

@ -170,460 +170,470 @@ function ChartTabAnnotations(props: FormEditProps) {
/> />
</TabContent> </TabContent>
<TabContent value="annotations_common"> <TabContent value="annotations_common">
<Card className="my-2"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<FormItem <Card className="my-2" header="General">
label="Tooltip Enabled" <FormItem
invalid={ label="Tooltip Enabled"
!!( invalid={
errors.commonAnnotationSettingsDto?.tooltipEnabled && !!(
touched.commonAnnotationSettingsDto?.tooltipEnabled errors.commonAnnotationSettingsDto?.tooltipEnabled &&
) touched.commonAnnotationSettingsDto?.tooltipEnabled
} )
errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled} }
> errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
<Field name="commonAnnotationSettingsDto.tooltipEnabled" component={Checkbox} /> >
</FormItem> <Field
name="commonAnnotationSettingsDto.tooltipEnabled"
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label="Pan Key" label="Pan Key"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.type && errors.commonAnnotationSettingsDto?.type &&
touched.commonAnnotationSettingsDto?.type touched.commonAnnotationSettingsDto?.type
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.type} errorMessage={errors.commonAnnotationSettingsDto?.type}
> >
<Field type="text" name="commonAnnotationSettingsDto.type"> <Field type="text" name="commonAnnotationSettingsDto.type">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartAnnotationTypeListOptions} options={chartAnnotationTypeListOptions}
isClearable={true} isClearable={true}
value={chartAnnotationTypeListOptions.filter( value={chartAnnotationTypeListOptions.filter(
(option) => option.value === values.commonAnnotationSettingsDto.type, (option) => option.value === values.commonAnnotationSettingsDto.type,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Pan Key" label="Pan Key"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.series && errors.commonAnnotationSettingsDto?.series &&
touched.commonAnnotationSettingsDto?.series touched.commonAnnotationSettingsDto?.series
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.series} errorMessage={errors.commonAnnotationSettingsDto?.series}
> >
<Field type="text" name="commonAnnotationSettingsDto.series"> <Field type="text" name="commonAnnotationSettingsDto.series">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={SeriesList()} options={SeriesList()}
isClearable={true} isClearable={true}
value={SeriesList()?.find( value={SeriesList()?.find(
(option) => option.value === values.commonAnnotationSettingsDto.series, (option) =>
)} option.value === values.commonAnnotationSettingsDto.series,
onChange={(option) => form.setFieldValue(field.name, option?.value)} )}
/> onChange={(option) => form.setFieldValue(field.name, option?.value)}
)} />
</Field> )}
</FormItem> </Field>
</FormItem>
<FormItem <FormItem
label="Argument" label="Argument"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.argument && errors.commonAnnotationSettingsDto?.argument &&
touched.commonAnnotationSettingsDto?.argument touched.commonAnnotationSettingsDto?.argument
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.argument} errorMessage={errors.commonAnnotationSettingsDto?.argument}
> >
<Field name="commonAnnotationSettingsDto.argument" component={Input} /> <Field name="commonAnnotationSettingsDto.argument" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.color && errors.commonAnnotationSettingsDto?.color &&
touched.commonAnnotationSettingsDto?.color touched.commonAnnotationSettingsDto?.color
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.color} errorMessage={errors.commonAnnotationSettingsDto?.color}
> >
<Field name="commonAnnotationSettingsDto.color" component={Input} /> <Field name="commonAnnotationSettingsDto.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Value" label="Value"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.value && errors.commonAnnotationSettingsDto?.value &&
touched.commonAnnotationSettingsDto?.value touched.commonAnnotationSettingsDto?.value
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.value} errorMessage={errors.commonAnnotationSettingsDto?.value}
> >
<Field name="commonAnnotationSettingsDto.value" component={Input} /> <Field name="commonAnnotationSettingsDto.value" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Description" label="Description"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.description && errors.commonAnnotationSettingsDto?.description &&
touched.commonAnnotationSettingsDto?.description touched.commonAnnotationSettingsDto?.description
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.description} errorMessage={errors.commonAnnotationSettingsDto?.description}
> >
<Field name="commonAnnotationSettingsDto.description" component={Input} /> <Field name="commonAnnotationSettingsDto.description" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Image" label="Image"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.image && errors.commonAnnotationSettingsDto?.image &&
touched.commonAnnotationSettingsDto?.image touched.commonAnnotationSettingsDto?.image
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.image} errorMessage={errors.commonAnnotationSettingsDto?.image}
> >
<Field name="commonAnnotationSettingsDto.image" component={Input} /> <Field name="commonAnnotationSettingsDto.image" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Text" label="Text"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.text && errors.commonAnnotationSettingsDto?.text &&
touched.commonAnnotationSettingsDto?.text touched.commonAnnotationSettingsDto?.text
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.text} errorMessage={errors.commonAnnotationSettingsDto?.text}
> >
<Field name="commonAnnotationSettingsDto.text" component={Input} /> <Field name="commonAnnotationSettingsDto.text" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Word Wrap" label="Word Wrap"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.wordWrap && errors.commonAnnotationSettingsDto?.wordWrap &&
touched.commonAnnotationSettingsDto?.wordWrap touched.commonAnnotationSettingsDto?.wordWrap
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.wordWrap} errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
> >
<Field type="text" name="commonAnnotationSettingsDto.wordWrap"> <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartWordWrapListOptions} options={chartWordWrapListOptions}
isClearable={true} isClearable={true}
value={chartWordWrapListOptions.filter( value={chartWordWrapListOptions.filter(
(option) => (option) =>
option.value === values.commonAnnotationSettingsDto.wordWrap, option.value === values.commonAnnotationSettingsDto.wordWrap,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.width && errors.commonAnnotationSettingsDto?.width &&
touched.commonAnnotationSettingsDto?.width touched.commonAnnotationSettingsDto?.width
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.width} errorMessage={errors.commonAnnotationSettingsDto?.width}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.width" name="commonAnnotationSettingsDto.width"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Height" label="Height"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.height && errors.commonAnnotationSettingsDto?.height &&
touched.commonAnnotationSettingsDto?.height touched.commonAnnotationSettingsDto?.height
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.height} errorMessage={errors.commonAnnotationSettingsDto?.height}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.height" name="commonAnnotationSettingsDto.height"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="X" label="X"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.x && errors.commonAnnotationSettingsDto?.x &&
touched.commonAnnotationSettingsDto?.x touched.commonAnnotationSettingsDto?.x
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.x} errorMessage={errors.commonAnnotationSettingsDto?.x}
> >
<Field type="number" name="commonAnnotationSettingsDto.x" component={Input} /> <Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Y" label="Y"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.y && errors.commonAnnotationSettingsDto?.y &&
touched.commonAnnotationSettingsDto?.y touched.commonAnnotationSettingsDto?.y
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.y} errorMessage={errors.commonAnnotationSettingsDto?.y}
> >
<Field type="number" name="commonAnnotationSettingsDto.y" component={Input} /> <Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Offset X" label="Offset X"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.offsetX && errors.commonAnnotationSettingsDto?.offsetX &&
touched.commonAnnotationSettingsDto?.offsetX touched.commonAnnotationSettingsDto?.offsetX
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.offsetX} errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.offsetX" name="commonAnnotationSettingsDto.offsetX"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Offset Y" label="Offset Y"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.offsetY && errors.commonAnnotationSettingsDto?.offsetY &&
touched.commonAnnotationSettingsDto?.offsetY touched.commonAnnotationSettingsDto?.offsetY
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.offsetY} errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.offsetY" name="commonAnnotationSettingsDto.offsetY"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Padding Left/Right" label="Padding Left/Right"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.paddingLeftRight && errors.commonAnnotationSettingsDto?.paddingLeftRight &&
touched.commonAnnotationSettingsDto?.paddingLeftRight touched.commonAnnotationSettingsDto?.paddingLeftRight
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight} errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.paddingLeftRight" name="commonAnnotationSettingsDto.paddingLeftRight"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Padding Top/Bottom" label="Padding Top/Bottom"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.paddingTopBottom && errors.commonAnnotationSettingsDto?.paddingTopBottom &&
touched.commonAnnotationSettingsDto?.paddingTopBottom touched.commonAnnotationSettingsDto?.paddingTopBottom
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom} errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.paddingTopBottom" name="commonAnnotationSettingsDto.paddingTopBottom"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Common Annotations - Border"> <Card className="my-2" header="Border">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.border?.visible && errors.commonAnnotationSettingsDto?.border?.visible &&
touched.commonAnnotationSettingsDto?.border?.visible touched.commonAnnotationSettingsDto?.border?.visible
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.border?.visible} errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
> >
<Field name="commonAnnotationSettingsDto.border.visible" component={Checkbox} /> <Field
</FormItem> name="commonAnnotationSettingsDto.border.visible"
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.border?.color && errors.commonAnnotationSettingsDto?.border?.color &&
touched.commonAnnotationSettingsDto?.border?.color touched.commonAnnotationSettingsDto?.border?.color
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.border?.color} errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
> >
<Field <Field
type="text" type="text"
name="commonAnnotationSettingsDto.border.color" name="commonAnnotationSettingsDto.border.color"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Dash Style" label="Dash Style"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.border?.dashStyle && errors.commonAnnotationSettingsDto?.border?.dashStyle &&
touched.commonAnnotationSettingsDto?.border?.dashStyle touched.commonAnnotationSettingsDto?.border?.dashStyle
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle} errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
> >
<Field type="text" name="commonAnnotationSettingsDto.border.dashStyle"> <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesDashStyleOptions} options={chartSeriesDashStyleOptions}
isClearable={true} isClearable={true}
value={chartSeriesDashStyleOptions.filter( value={chartSeriesDashStyleOptions.filter(
(option) => (option) =>
option.value === values.commonAnnotationSettingsDto.border.dashStyle, option.value ===
)} values.commonAnnotationSettingsDto.border.dashStyle,
onChange={(option) => form.setFieldValue(field.name, option?.value)} )}
/> onChange={(option) => form.setFieldValue(field.name, option?.value)}
)} />
</Field> )}
</FormItem> </Field>
</FormItem>
<FormItem <FormItem
label="Corner Radius" label="Corner Radius"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.border?.cornerRadius && errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
touched.commonAnnotationSettingsDto?.border?.cornerRadius touched.commonAnnotationSettingsDto?.border?.cornerRadius
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius} errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.border.cornerRadius" name="commonAnnotationSettingsDto.border.cornerRadius"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.border?.width && errors.commonAnnotationSettingsDto?.border?.width &&
touched.commonAnnotationSettingsDto?.border?.width touched.commonAnnotationSettingsDto?.border?.width
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.border?.width} errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.border.width" name="commonAnnotationSettingsDto.border.width"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Common Annotations - Font"> <Card className="my-2" header="Font">
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.font?.color && errors.commonAnnotationSettingsDto?.font?.color &&
touched.commonAnnotationSettingsDto?.font?.color touched.commonAnnotationSettingsDto?.font?.color
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.font?.color} errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
> >
<Field name="commonAnnotationSettingsDto.font.color" component={Input} /> <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Family" label="Family"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.font?.family && errors.commonAnnotationSettingsDto?.font?.family &&
touched.commonAnnotationSettingsDto?.font?.family touched.commonAnnotationSettingsDto?.font?.family
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.font?.family} errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
> >
<Field name="commonAnnotationSettingsDto.font.family" component={Input} /> <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Size" label="Size"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.font?.size && errors.commonAnnotationSettingsDto?.font?.size &&
touched.commonAnnotationSettingsDto?.font?.size touched.commonAnnotationSettingsDto?.font?.size
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.font?.size} errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.font.size" name="commonAnnotationSettingsDto.font.size"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Weight" label="Weight"
invalid={ invalid={
!!( !!(
errors.commonAnnotationSettingsDto?.font?.weight && errors.commonAnnotationSettingsDto?.font?.weight &&
touched.commonAnnotationSettingsDto?.font?.weight touched.commonAnnotationSettingsDto?.font?.weight
) )
} }
errorMessage={errors.commonAnnotationSettingsDto?.font?.weight} errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
> >
<Field <Field
type="number" type="number"
name="commonAnnotationSettingsDto.font.weight" name="commonAnnotationSettingsDto.font.weight"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card> </Card>
</div>
</TabContent> </TabContent>
</Tabs> </Tabs>
<div className="mt-4"> <div className="mt-4">

641
ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
View file

@ -163,340 +163,353 @@ function ChartTabAxis(props: FormEditProps) {
/> />
</TabContent> </TabContent>
<TabContent value="axis_argument"> <TabContent value="axis_argument">
<Card className="my-2"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
<FormItem <Card className="my-2" header="General">
label="Visible" <FormItem
invalid={ label="Visible"
!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible) invalid={
} !!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
errorMessage={errors.argumentAxisDto?.visible} }
> errorMessage={errors.argumentAxisDto?.visible}
<Field name="argumentAxisDto.visible" component={Checkbox} /> >
</FormItem> <Field name="argumentAxisDto.visible" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Workdays Only" label="Workdays Only"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.workdaysOnly && errors.argumentAxisDto?.workdaysOnly &&
touched.argumentAxisDto?.workdaysOnly touched.argumentAxisDto?.workdaysOnly
) )
} }
errorMessage={errors.argumentAxisDto?.workdaysOnly} errorMessage={errors.argumentAxisDto?.workdaysOnly}
> >
<Field name="argumentAxisDto.workdaysOnly" component={Checkbox} /> <Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Title" label="Title"
invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)} invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
errorMessage={errors.argumentAxisDto?.title} errorMessage={errors.argumentAxisDto?.title}
> >
<Field type="text" name="argumentAxisDto.title" component={Input} /> <Field type="text" name="argumentAxisDto.title" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Hover Mode" label="Hover Mode"
invalid={ invalid={
!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode) !!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)
} }
errorMessage={errors.argumentAxisDto?.hoverMode} errorMessage={errors.argumentAxisDto?.hoverMode}
> >
<Field type="text" name="argumentAxisDto.hoverMode"> <Field type="text" name="argumentAxisDto.hoverMode">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisHoverModeListOptions} options={chartArgumentAxisHoverModeListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisHoverModeListOptions.filter( value={chartArgumentAxisHoverModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.hoverMode, (option) => option.value === values.argumentAxisDto.hoverMode,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Argument Type" label="Argument Type"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.argumentType && errors.argumentAxisDto?.argumentType &&
touched.argumentAxisDto?.argumentType touched.argumentAxisDto?.argumentType
) )
} }
errorMessage={errors.argumentAxisDto?.argumentType} errorMessage={errors.argumentAxisDto?.argumentType}
> >
<Field type="text" name="argumentAxisDto.argumentType"> <Field type="text" name="argumentAxisDto.argumentType">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisTypeListOptions} options={chartArgumentAxisTypeListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisTypeListOptions.filter( value={chartArgumentAxisTypeListOptions.filter(
(option) => option.value === values.argumentAxisDto.argumentType, (option) => option.value === values.argumentAxisDto.argumentType,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Position" label="Position"
invalid={ invalid={
!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position) !!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)
} }
errorMessage={errors.argumentAxisDto?.position} errorMessage={errors.argumentAxisDto?.position}
> >
<Field type="text" name="argumentAxisDto.position"> <Field type="text" name="argumentAxisDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisPositionListOptions} options={chartArgumentAxisPositionListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisPositionListOptions.filter( value={chartArgumentAxisPositionListOptions.filter(
(option) => option.value === values.argumentAxisDto.position, (option) => option.value === values.argumentAxisDto.position,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)} invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
errorMessage={errors.argumentAxisDto?.width} errorMessage={errors.argumentAxisDto?.width}
> >
<Field type="number" name="argumentAxisDto.width" component={Input} /> <Field type="number" name="argumentAxisDto.width" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Aggregation Interval" label="Aggregation Interval"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.aggregationInterval && errors.argumentAxisDto?.aggregationInterval &&
touched.argumentAxisDto?.aggregationInterval touched.argumentAxisDto?.aggregationInterval
) )
} }
errorMessage={errors.argumentAxisDto?.aggregationInterval} errorMessage={errors.argumentAxisDto?.aggregationInterval}
> >
<Field type="text" name="argumentAxisDto.aggregationInterval"> <Field type="text" name="argumentAxisDto.aggregationInterval">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisIntervalListOptions} options={chartArgumentAxisIntervalListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisIntervalListOptions.filter( value={chartArgumentAxisIntervalListOptions.filter(
(option) => option.value === values.argumentAxisDto.aggregationInterval, (option) =>
)} option.value === values.argumentAxisDto.aggregationInterval,
onChange={(option) => form.setFieldValue(field.name, option?.value)} )}
/> onChange={(option) => form.setFieldValue(field.name, option?.value)}
)} />
</Field> )}
</FormItem> </Field>
</Card> </FormItem>
</Card>
<Card className="my-2" header="Argument Axis - Grid"> <Card className="my-2" header="Grid">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.grid?.visible && errors.argumentAxisDto?.grid?.visible &&
touched.argumentAxisDto?.grid?.visible touched.argumentAxisDto?.grid?.visible
) )
} }
errorMessage={errors.argumentAxisDto?.grid?.visible} errorMessage={errors.argumentAxisDto?.grid?.visible}
> >
<Field name="argumentAxisDto.grid.visible" component={Checkbox} /> <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.grid?.color && touched.argumentAxisDto?.grid?.color errors.argumentAxisDto?.grid?.color &&
) touched.argumentAxisDto?.grid?.color
} )
errorMessage={errors.argumentAxisDto?.grid?.color} }
> errorMessage={errors.argumentAxisDto?.grid?.color}
<Field type="text" name="argumentAxisDto.grid.color" component={Input} /> >
</FormItem> <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
</FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.grid?.width && touched.argumentAxisDto?.grid?.width errors.argumentAxisDto?.grid?.width &&
) touched.argumentAxisDto?.grid?.width
} )
errorMessage={errors.argumentAxisDto?.grid?.width} }
> errorMessage={errors.argumentAxisDto?.grid?.width}
<Field type="number" name="argumentAxisDto.grid.width" component={Input} /> >
</FormItem> <Field type="number" name="argumentAxisDto.grid.width" component={Input} />
</Card> </FormItem>
</Card>
<Card className="my-2" header="Argument Axis - Label"> <Card className="my-2" header="Label">
<FormItem <FormItem
label="Position" label="Position"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.label?.displayMode && errors.argumentAxisDto?.label?.displayMode &&
touched.argumentAxisDto?.label?.displayMode touched.argumentAxisDto?.label?.displayMode
) )
} }
errorMessage={errors.argumentAxisDto?.label?.displayMode} errorMessage={errors.argumentAxisDto?.label?.displayMode}
> >
<Field type="text" name="argumentAxisDto.label.displayMode"> <Field type="text" name="argumentAxisDto.label.displayMode">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisLabelDisplayModeListOptions} options={chartArgumentAxisLabelDisplayModeListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisLabelDisplayModeListOptions.filter( value={chartArgumentAxisLabelDisplayModeListOptions.filter(
(option) => option.value === values.argumentAxisDto.label.displayMode, (option) => option.value === values.argumentAxisDto.label.displayMode,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Rotation Angle" label="Rotation Angle"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.label?.rotationAngle && errors.argumentAxisDto?.label?.rotationAngle &&
touched.argumentAxisDto?.label?.rotationAngle touched.argumentAxisDto?.label?.rotationAngle
) )
} }
errorMessage={errors.argumentAxisDto?.label?.rotationAngle} errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
> >
<Field <Field
type="number" type="number"
name="argumentAxisDto.label.rotationAngle" name="argumentAxisDto.label.rotationAngle"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
<FormItem <FormItem
label="Overlapping Behavior" label="Overlapping Behavior"
invalid={ invalid={
!!( !!(
errors.argumentAxisDto?.label?.overlappingBehavior && errors.argumentAxisDto?.label?.overlappingBehavior &&
touched.argumentAxisDto?.label?.overlappingBehavior touched.argumentAxisDto?.label?.overlappingBehavior
) )
} }
errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior} errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
> >
<Field type="text" name="argumentAxisDto.label.overlappingBehavior"> <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartArgumentAxisLabelOverlappingBehaviorListOptions} options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
isClearable={true} isClearable={true}
value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter( value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
(option) => (option) =>
option.value === values.argumentAxisDto.label.overlappingBehavior, option.value === values.argumentAxisDto.label.overlappingBehavior,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
</Card> </Card>
</div>
</TabContent> </TabContent>
<TabContent value="axis_common"> <TabContent value="axis_common">
<Card className="my-2"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<FormItem <Card className="my-2" header="General">
label="Visible" <FormItem
invalid={ label="Visible"
!!( invalid={
errors.commonAxisSettingsDto?.visible && !!(
touched.commonAxisSettingsDto?.visible errors.commonAxisSettingsDto?.visible &&
) touched.commonAxisSettingsDto?.visible
} )
errorMessage={errors.commonAxisSettingsDto?.visible} }
> errorMessage={errors.commonAxisSettingsDto?.visible}
<Field name="commonAxisSettingsDto.visible" component={Checkbox} /> >
</FormItem> <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Title" label="Title"
invalid={ invalid={
!!( !!(
errors.commonAxisSettingsDto?.title && touched.commonAxisSettingsDto?.title errors.commonAxisSettingsDto?.title &&
) touched.commonAxisSettingsDto?.title
} )
errorMessage={errors.commonAxisSettingsDto?.title} }
> errorMessage={errors.commonAxisSettingsDto?.title}
<Field type="text" name="title" component={Input} /> >
</FormItem> <Field type="text" name="title" component={Input} />
</FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.commonAxisSettingsDto?.width && touched.commonAxisSettingsDto?.width errors.commonAxisSettingsDto?.width &&
) touched.commonAxisSettingsDto?.width
} )
errorMessage={errors.commonAxisSettingsDto?.width} }
> errorMessage={errors.commonAxisSettingsDto?.width}
<Field type="number" name="commonAxisSettingsDto.width" component={Input} /> >
</FormItem> <Field type="number" name="commonAxisSettingsDto.width" component={Input} />
</Card> </FormItem>
</Card>
<Card className="my-2" header="Common Axis Settings - Grid"> <Card className="my-2" header="Grid">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!( !!(
errors.commonAxisSettingsDto?.grid?.visible && errors.commonAxisSettingsDto?.grid?.visible &&
touched.commonAxisSettingsDto?.grid?.visible touched.commonAxisSettingsDto?.grid?.visible
) )
} }
errorMessage={errors.commonAxisSettingsDto?.grid?.visible} errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
> >
<Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} /> <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.commonAxisSettingsDto?.grid?.color && errors.commonAxisSettingsDto?.grid?.color &&
touched.commonAxisSettingsDto?.grid?.color touched.commonAxisSettingsDto?.grid?.color
) )
} }
errorMessage={errors.commonAxisSettingsDto?.grid?.color} errorMessage={errors.commonAxisSettingsDto?.grid?.color}
> >
<Field type="text" name="commonAxisSettingsDto.grid.color" component={Input} /> <Field
</FormItem> type="text"
name="commonAxisSettingsDto.grid.color"
component={Input}
/>
</FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.commonAxisSettingsDto?.grid?.width && errors.commonAxisSettingsDto?.grid?.width &&
touched.commonAxisSettingsDto?.grid?.width touched.commonAxisSettingsDto?.grid?.width
) )
} }
errorMessage={errors.commonAxisSettingsDto?.grid?.width} errorMessage={errors.commonAxisSettingsDto?.grid?.width}
> >
<Field <Field
type="number" type="number"
name="commonAxisSettingsDto.grid.width" name="commonAxisSettingsDto.grid.width"
component={Input} component={Input}
/> />
</FormItem> </FormItem>
</Card> </Card>
</div>
</TabContent> </TabContent>
</Tabs> </Tabs>
<div className="mt-4"> <div className="mt-4">

414
ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
View file

@ -318,206 +318,228 @@ function ChartTabCommonSettings(props: FormEditProps) {
</Card> </Card>
</TabContent> </TabContent>
<TabContent value="commonSettings_tooltip"> <TabContent value="commonSettings_tooltip">
<Card className="my-2"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
<FormItem <Card className="my-2" header="General">
label="Enabled" <FormItem
invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)} label="Enabled"
errorMessage={errors.tooltipDto?.enabled as string} invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
> errorMessage={errors.tooltipDto?.enabled as string}
<Field name="tooltipDto.keepLabels" component={Checkbox} /> >
</FormItem> <Field name="tooltipDto.keepLabels" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Shared" label="Shared"
invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)} invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
errorMessage={errors.tooltipDto?.shared as string} errorMessage={errors.tooltipDto?.shared as string}
> >
<Field name="tooltipDto.shared" component={Checkbox} /> <Field name="tooltipDto.shared" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Format" label="Format"
invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)} invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
errorMessage={errors.tooltipDto?.format} errorMessage={errors.tooltipDto?.format}
> >
<Field type="text" name="tooltipDto.format"> <Field type="text" name="tooltipDto.format">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={tooltipFormatListOptions} options={tooltipFormatListOptions}
isClearable={true} isClearable={true}
value={tooltipFormatListOptions.filter( value={tooltipFormatListOptions.filter(
(option) => option.value === values.tooltipDto.format, (option) => option.value === values.tooltipDto.format,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)}
</Field>
</FormItem>
<FormItem
label="Location"
invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
errorMessage={errors.tooltipDto?.location}
>
<Field type="text" name="tooltipDto.location">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTooltipLocationListOptions}
isClearable={true}
value={chartTooltipLocationListOptions.filter(
(option) => option.value === values.tooltipDto.location,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color" component={Input} />
</FormItem>
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom && touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.tooltipDto?.paddingLeftRight && touched.tooltipDto?.paddingLeftRight
)
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
</FormItem>
</Card>
<div className="font-bold m-3">Tooltip Settings - Font</div>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)}
errorMessage={errors.tooltipDto?.font?.color}
>
<Field name="tooltipDto.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)}
errorMessage={errors.tooltipDto?.font?.family}
>
<Field name="tooltipDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
errorMessage={errors.tooltipDto?.font?.size}
>
<Field type="number" name="tooltipDto.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)}
errorMessage={errors.tooltipDto?.font?.weight}
>
<Field type="number" name="tooltipDto.font.weight" component={Input} />
</FormItem>
<div className="font-bold m-3">Tooltip Settings - Border</div>
<FormItem
label="Visible"
invalid={
!!(errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible)
}
errorMessage={errors.tooltipDto?.border?.visible as string}
>
<Field name="tooltipDto.border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.tooltipDto?.border?.dashStyle && touched.tooltipDto?.border?.dashStyle
)
}
errorMessage={errors.tooltipDto?.border?.dashStyle}
>
<Field type="text" name="tooltipDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.tooltipDto.border.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} </Field>
</FormItem>
<FormItem
label="Location"
invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
errorMessage={errors.tooltipDto?.location}
>
<Field type="text" name="tooltipDto.location">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartTooltipLocationListOptions}
isClearable={true}
value={chartTooltipLocationListOptions.filter(
(option) => option.value === values.tooltipDto.location,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Color"
invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
errorMessage={errors.tooltipDto?.color}
>
<Field name="tooltipDto.color" component={Input} />
</FormItem>
<FormItem
label="Argument Format"
invalid={
!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
}
errorMessage={errors.tooltipDto?.argumentFormat}
>
<Field name="tooltipDto.argumentFormat" component={Input} />
</FormItem>
<FormItem
label="Arrow Length"
invalid={
!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
}
errorMessage={errors.tooltipDto?.arrowLength}
>
<Field type="number" name="tooltipDto.arrowLength" component={Input} />
</FormItem>
<FormItem
label="Padding Top/Bottom"
invalid={
!!(
errors.tooltipDto?.paddingTopBottom &&
touched.tooltipDto?.paddingTopBottom
)
}
errorMessage={errors.tooltipDto?.paddingTopBottom}
>
<Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
</FormItem>
<FormItem
label="Padding Left/Right"
invalid={
!!(
errors.tooltipDto?.paddingLeftRight &&
touched.tooltipDto?.paddingLeftRight
)
}
errorMessage={errors.tooltipDto?.paddingLeftRight}
>
<Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Font">
<FormItem
label="Color"
invalid={
!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)
}
errorMessage={errors.tooltipDto?.font?.color}
>
<Field name="tooltipDto.font.color" component={Input} />
</FormItem>
<FormItem
label="Family"
invalid={
!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)
}
errorMessage={errors.tooltipDto?.font?.family}
>
<Field name="tooltipDto.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
errorMessage={errors.tooltipDto?.font?.size}
>
<Field type="number" name="tooltipDto.font.size" component={Input} />
</FormItem>
<FormItem
label="Weight"
invalid={
!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)
}
errorMessage={errors.tooltipDto?.font?.weight}
>
<Field type="number" name="tooltipDto.font.weight" component={Input} />
</FormItem>
</Card>
<Card className="my-2" header="Border">
<FormItem
label="Visible"
invalid={
!!(
errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible
)
}
errorMessage={errors.tooltipDto?.border?.visible as string}
>
<Field name="tooltipDto.border.visible" component={Checkbox} />
</FormItem>
<FormItem
label="Dash Style"
invalid={
!!(
errors.tooltipDto?.border?.dashStyle &&
touched.tooltipDto?.border?.dashStyle
)
}
errorMessage={errors.tooltipDto?.border?.dashStyle}
>
<Field type="text" name="tooltipDto.border.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartSeriesDashStyleOptions}
isClearable={true}
value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.tooltipDto.border.dashStyle,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Width"
invalid={
!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)
}
errorMessage={errors.tooltipDto?.border?.width}
>
<Field type="number" name="tooltipDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.tooltipDto?.border?.cornerRadius &&
touched.tooltipDto?.border?.cornerRadius
)
}
errorMessage={errors.tooltipDto?.border?.cornerRadius}
>
<Field
type="number"
name="tooltipDto.border.cornerRadius"
component={Input}
/> />
)} </FormItem>
</Field> </Card>
</FormItem> </div>
<FormItem
label="Width"
invalid={
!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)
}
errorMessage={errors.tooltipDto?.border?.width}
>
<Field type="number" name="tooltipDto.border.width" component={Input} />
</FormItem>
<FormItem
label="Corner Radius"
invalid={
!!(
errors.tooltipDto?.border?.cornerRadius &&
touched.tooltipDto?.border?.cornerRadius
)
}
errorMessage={errors.tooltipDto?.border?.cornerRadius}
>
<Field type="number" name="tooltipDto.border.cornerRadius" component={Input} />
</FormItem>
</TabContent> </TabContent>
<TabContent value="commonSettings_margin"> <TabContent value="commonSettings_margin">
<Card className="my-2"> <Card className="my-2">

554
ui/src/views/admin/listForm/edit/ChartTabCrosshair.tsx
View file

@ -30,301 +30,303 @@ function ChartTabCrosshair(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => ( {({ touched, errors, resetForm, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<Card className="my-2"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
<FormItem <Card className="my-2" header="Crosshair Options">
label="Enabled" <FormItem
invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)} label="Enabled"
errorMessage={errors.crosshairDto?.enabled as string} invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
> errorMessage={errors.crosshairDto?.enabled as string}
<Field name="crosshairDto.enabled" component={Checkbox} /> >
</FormItem> <Field name="crosshairDto.enabled" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)} invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
errorMessage={errors.crosshairDto?.color} errorMessage={errors.crosshairDto?.color}
> >
<Field type="text" name="crosshairDto.color" component={Input} /> <Field type="text" name="crosshairDto.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Dash Style" label="Dash Style"
invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)} invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
errorMessage={errors.crosshairDto?.dashStyle} errorMessage={errors.crosshairDto?.dashStyle}
> >
<Field type="text" name="crosshairDto.dashStyle"> <Field type="text" name="crosshairDto.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesDashStyleOptions} options={chartSeriesDashStyleOptions}
isClearable={true} isClearable={true}
value={chartSeriesDashStyleOptions.filter( value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.dashStyle, (option) => option.value === values.crosshairDto.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)} invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
errorMessage={errors.crosshairDto?.width} errorMessage={errors.crosshairDto?.width}
> >
<Field type="number" name="crosshairDto.width" component={Input} /> <Field type="number" name="crosshairDto.width" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Crosshair Options - Label"> <Card className="my-2" header="Label Options">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible) !!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)
} }
errorMessage={errors.crosshairDto?.label?.visible as string} errorMessage={errors.crosshairDto?.label?.visible as string}
> >
<Field name="crosshairDto.label.visible" component={Checkbox} /> <Field name="crosshairDto.label.visible" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Background Color" label="Background Color"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.backgroundColor && errors.crosshairDto?.label?.backgroundColor &&
touched.crosshairDto?.label?.backgroundColor touched.crosshairDto?.label?.backgroundColor
) )
} }
errorMessage={errors.crosshairDto?.label?.backgroundColor} errorMessage={errors.crosshairDto?.label?.backgroundColor}
> >
<Field type="text" name="crosshairDto.label.backgroundColor" component={Input} /> <Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Format" label="Format"
invalid={ invalid={
!!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format) !!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)
} }
errorMessage={errors.crosshairDto?.label?.format} errorMessage={errors.crosshairDto?.label?.format}
> >
<Field type="text" name="crosshairDto.label.format"> <Field type="text" name="crosshairDto.label.format">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={tooltipFormatListOptions} options={tooltipFormatListOptions}
isClearable={true} isClearable={true}
value={tooltipFormatListOptions.filter( value={tooltipFormatListOptions.filter(
(option) => option.value === values.crosshairDto.label.format, (option) => option.value === values.crosshairDto.label.format,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Customize Text" label="Customize Text"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.customizeText && errors.crosshairDto?.label?.customizeText &&
touched.crosshairDto?.label?.customizeText touched.crosshairDto?.label?.customizeText
) )
} }
errorMessage={errors.crosshairDto?.label?.customizeText} errorMessage={errors.crosshairDto?.label?.customizeText}
> >
<Field type="text" name="crosshairDto.label.customizeText" component={Input} /> <Field type="text" name="crosshairDto.label.customizeText" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Crosshair Options - Label - Font"> <Card className="my-2" header="Font Options">
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.font?.color && errors.crosshairDto?.label?.font?.color &&
touched.crosshairDto?.label?.font?.color touched.crosshairDto?.label?.font?.color
) )
} }
errorMessage={errors.crosshairDto?.label?.font?.color} errorMessage={errors.crosshairDto?.label?.font?.color}
> >
<Field type="text" name="crosshairDto.label.font.color" component={Input} /> <Field type="text" name="crosshairDto.label.font.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Family" label="Family"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.font?.family && errors.crosshairDto?.label?.font?.family &&
touched.crosshairDto?.label?.font?.family touched.crosshairDto?.label?.font?.family
) )
} }
errorMessage={errors.crosshairDto?.label?.font?.family} errorMessage={errors.crosshairDto?.label?.font?.family}
> >
<Field type="text" name="crosshairDto.label.font.family" component={Input} /> <Field type="text" name="crosshairDto.label.font.family" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Size" label="Size"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.font?.size && errors.crosshairDto?.label?.font?.size &&
touched.crosshairDto?.label?.font?.size touched.crosshairDto?.label?.font?.size
) )
} }
errorMessage={errors.crosshairDto?.label?.font?.size} errorMessage={errors.crosshairDto?.label?.font?.size}
> >
<Field type="number" name="crosshairDto.label.font.size" component={Input} /> <Field type="number" name="crosshairDto.label.font.size" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Weight" label="Weight"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.label?.font?.weight && errors.crosshairDto?.label?.font?.weight &&
touched.crosshairDto?.label?.font?.weight touched.crosshairDto?.label?.font?.weight
) )
} }
errorMessage={errors.crosshairDto?.label?.font?.weight} errorMessage={errors.crosshairDto?.label?.font?.weight}
> >
<Field type="number" name="crosshairDto.label.font.weight" component={Input} /> <Field type="number" name="crosshairDto.label.font.weight" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Crosshair Options - Label - Horizontal Line"> <Card className="my-2" header="Label - Horizontal Line">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.horizontalLine?.visible && errors.crosshairDto?.horizontalLine?.visible &&
touched.crosshairDto?.horizontalLine?.visible touched.crosshairDto?.horizontalLine?.visible
) )
} }
errorMessage={errors.crosshairDto?.horizontalLine?.visible as string} errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
> >
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} /> <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.horizontalLine?.color && errors.crosshairDto?.horizontalLine?.color &&
touched.crosshairDto?.horizontalLine?.color touched.crosshairDto?.horizontalLine?.color
) )
} }
errorMessage={errors.crosshairDto?.horizontalLine?.color} errorMessage={errors.crosshairDto?.horizontalLine?.color}
> >
<Field type="text" name="crosshairDto.horizontalLine.color" component={Input} /> <Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Dash Style" label="Dash Style"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.horizontalLine?.dashStyle && errors.crosshairDto?.horizontalLine?.dashStyle &&
touched.crosshairDto?.horizontalLine?.dashStyle touched.crosshairDto?.horizontalLine?.dashStyle
) )
} }
errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle} errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
> >
<Field type="text" name="crosshairDto.horizontalLine.dashStyle"> <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesDashStyleOptions} options={chartSeriesDashStyleOptions}
isClearable={true} isClearable={true}
value={chartSeriesDashStyleOptions.filter( value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.horizontalLine.dashStyle, (option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.horizontalLine?.width && errors.crosshairDto?.horizontalLine?.width &&
touched.crosshairDto?.horizontalLine?.width touched.crosshairDto?.horizontalLine?.width
) )
} }
errorMessage={errors.crosshairDto?.horizontalLine?.width} errorMessage={errors.crosshairDto?.horizontalLine?.width}
> >
<Field type="number" name="crosshairDto.horizontalLine.width" component={Input} /> <Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
<Card className="my-2" header="Crosshair Options - Label - Vertical Line"> <Card className="my-2" header="Label - Vertical Line">
<FormItem <FormItem
label="Visible" label="Visible"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.verticalLine?.visible && errors.crosshairDto?.verticalLine?.visible &&
touched.crosshairDto?.verticalLine?.visible touched.crosshairDto?.verticalLine?.visible
) )
} }
errorMessage={errors.crosshairDto?.verticalLine?.visible as string} errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
> >
<Field name="crosshairDto.verticalLine.visible" component={Checkbox} /> <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.verticalLine?.color && errors.crosshairDto?.verticalLine?.color &&
touched.crosshairDto?.verticalLine?.color touched.crosshairDto?.verticalLine?.color
) )
} }
errorMessage={errors.crosshairDto?.verticalLine?.color} errorMessage={errors.crosshairDto?.verticalLine?.color}
> >
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} /> <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Dash Style" label="Dash Style"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.verticalLine?.dashStyle && errors.crosshairDto?.verticalLine?.dashStyle &&
touched.crosshairDto?.verticalLine?.dashStyle touched.crosshairDto?.verticalLine?.dashStyle
) )
} }
errorMessage={errors.crosshairDto?.verticalLine?.dashStyle} errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
> >
<Field type="text" name="crosshairDto.verticalLine.dashStyle"> <Field type="text" name="crosshairDto.verticalLine.dashStyle">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartSeriesDashStyleOptions} options={chartSeriesDashStyleOptions}
isClearable={true} isClearable={true}
value={chartSeriesDashStyleOptions.filter( value={chartSeriesDashStyleOptions.filter(
(option) => option.value === values.crosshairDto.verticalLine.dashStyle, (option) => option.value === values.crosshairDto.verticalLine.dashStyle,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={
!!( !!(
errors.crosshairDto?.verticalLine?.width && errors.crosshairDto?.verticalLine?.width &&
touched.crosshairDto?.verticalLine?.width touched.crosshairDto?.verticalLine?.width
) )
} }
errorMessage={errors.crosshairDto?.verticalLine?.width} errorMessage={errors.crosshairDto?.verticalLine?.width}
> >
<Field type="number" name="crosshairDto.verticalLine.width" component={Input} /> <Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
</div>
<div className="mt-4"> <div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

2
ui/src/views/admin/listForm/edit/ChartTabExport.tsx
View file

@ -27,7 +27,6 @@ function ChartTabExport(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => ( {({ touched, errors, resetForm, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<Card className="my-2">
<FormItem <FormItem
label="Enabled" label="Enabled"
invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)} invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
@ -63,7 +62,6 @@ function ChartTabExport(props: FormEditProps) {
> >
<Field type="number" name="exportDto.margin" component={Input} /> <Field type="number" name="exportDto.margin" component={Input} />
</FormItem> </FormItem>
</Card>
<div className="mt-4"> <div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

269
ui/src/views/admin/listForm/edit/ChartTabLegend.tsx
View file

@ -45,81 +45,76 @@ function ChartTabLegend(props: FormEditProps) {
{({ touched, errors, resetForm, isSubmitting, values }) => ( {({ touched, errors, resetForm, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<Tabs defaultValue="legendSettings_general"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<TabList> <Card className="my-2" header="General">
<TabNav value="legendSettings_general">General</TabNav> <FormItem
<TabNav value="legendSettings_border">Border</TabNav> label="Visible"
</TabList> invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
<TabContent value="legendSettings_general"> errorMessage={errors.legendDto?.visible}
<Card className="my-2"> >
<FormItem <Field name="legendDto.visible" component={Checkbox} />
label="Visible" </FormItem>
invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
errorMessage={errors.legendDto?.visible}
>
<Field name="legendDto.visible" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Background Color" label="Background Color"
invalid={ invalid={
!!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor) !!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)
} }
errorMessage={errors.legendDto?.backgroundColor} errorMessage={errors.legendDto?.backgroundColor}
> >
<Field name="legendDto.backgroundColor" component={Input} /> <Field name="legendDto.backgroundColor" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Title" label="Title"
invalid={!!(errors.legendDto?.title && touched.legendDto?.title)} invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
errorMessage={errors.legendDto?.title} errorMessage={errors.legendDto?.title}
> >
<Field name="legendDto.title" component={Input} /> <Field name="legendDto.title" component={Input} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Orientation" label="Orientation"
invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)} invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
errorMessage={errors.legendDto?.orientation} errorMessage={errors.legendDto?.orientation}
> >
<Field type="text" name="legendDto.orientation"> <Field type="text" name="legendDto.orientation">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartLegendOrientationListOptions} options={chartLegendOrientationListOptions}
isClearable={true} isClearable={true}
value={chartLegendOrientationListOptions.filter( value={chartLegendOrientationListOptions.filter(
(option) => option.value === values.legendDto.orientation, (option) => option.value === values.legendDto.orientation,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
<FormItem
label="Position"
invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
errorMessage={errors.legendDto?.position}
>
<Field type="text" name="legendDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendPositionListOptions}
isClearable={true}
value={chartLegendPositionListOptions.filter(
(option) => option.value === values.legendDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem
label="Position"
invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
errorMessage={errors.legendDto?.position}
>
<Field type="text" name="legendDto.position">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartLegendPositionListOptions}
isClearable={true}
value={chartLegendPositionListOptions.filter(
(option) => option.value === values.legendDto.position,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<div className="flex gap-5">
<FormItem <FormItem
label="Row Count" label="Row Count"
invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)} invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
@ -135,80 +130,72 @@ function ChartTabLegend(props: FormEditProps) {
> >
<Field type="number" name="legendDto.columnCount" component={Input} /> <Field type="number" name="legendDto.columnCount" component={Input} />
</FormItem> </FormItem>
</Card> </div>
</TabContent> </Card>
<TabContent value="legendSettings_border"> <Card className="my-2" header="Border">
<Card className="my-2"> <FormItem
<FormItem label="Visible"
label="Visible" invalid={
invalid={ !!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)
!!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible) }
} errorMessage={errors.legendDto?.border?.visible}
errorMessage={errors.legendDto?.border?.visible} >
> <Field name="legendDto.border.visible" component={Checkbox} />
<Field name="legendDto.border.visible" component={Checkbox} /> </FormItem>
</FormItem>
<FormItem <FormItem
label="Color" label="Color"
invalid={ invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color) errorMessage={errors.legendDto?.border?.color}
} >
errorMessage={errors.legendDto?.border?.color} <Field name="legendDto.border.color" component={Input} />
> </FormItem>
<Field name="legendDto.border.color" component={Input} />
</FormItem>
<FormItem <FormItem
label="Dash Style" label="Dash Style"
invalid={ invalid={
!!( !!(errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle)
errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle }
) errorMessage={errors.legendDto?.border?.dashStyle}
} >
errorMessage={errors.legendDto?.border?.dashStyle} <Field type="text" name="legendDto.border.dashStyle">
> {({ field, form }: FieldProps<SelectBoxOption>) => (
<Field type="text" name="legendDto.border.dashStyle"> <Select
{({ field, form }: FieldProps<SelectBoxOption>) => ( field={field}
<Select form={form}
field={field} options={chartSeriesDashStyleOptions}
form={form} isClearable={true}
options={chartSeriesDashStyleOptions} value={chartSeriesDashStyleOptions.filter(
isClearable={true} (option) => option.value === values.legendDto.border.dashStyle,
value={chartSeriesDashStyleOptions.filter( )}
(option) => option.value === values.legendDto.border.dashStyle, onChange={(option) => form.setFieldValue(field.name, option?.value)}
)} />
onChange={(option) => form.setFieldValue(field.name, option?.value)} )}
/> </Field>
)} </FormItem>
</Field>
</FormItem>
<FormItem <FormItem
label="Width" label="Width"
invalid={ invalid={!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)}
!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width) errorMessage={errors.legendDto?.border?.width}
} >
errorMessage={errors.legendDto?.border?.width} <Field type="number" name="legendDto.border.width" component={Input} />
> </FormItem>
<Field type="number" name="legendDto.border.width" component={Input} />
</FormItem>
<FormItem <FormItem
label="Corner Radius" label="Corner Radius"
invalid={ invalid={
!!( !!(
errors.legendDto?.border?.cornerRadius && errors.legendDto?.border?.cornerRadius &&
touched.legendDto?.border?.cornerRadius touched.legendDto?.border?.cornerRadius
) )
} }
errorMessage={errors.legendDto?.border?.cornerRadius} errorMessage={errors.legendDto?.border?.cornerRadius}
> >
<Field type="number" name="legendDto.border.cornerRadius" component={Input} /> <Field type="number" name="legendDto.border.cornerRadius" component={Input} />
</FormItem> </FormItem>
</Card> </Card>
</TabContent> </div>
</Tabs>
<div className="mt-4"> <div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

252
ui/src/views/admin/listForm/edit/ChartTabZoomAndPan.tsx
View file

@ -29,133 +29,143 @@ const ChartTabZoomAndPan = (props: FormEditProps) => {
{({ touched, errors, resetForm, isSubmitting, values }) => ( {({ touched, errors, resetForm, isSubmitting, values }) => (
<Form> <Form>
<FormContainer size="sm"> <FormContainer size="sm">
<Card className="my-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<FormItem <Card className="my-2" header="General">
label="Allow Mouse Wheel" <div className="flex gap-5">
invalid={ <FormItem
!!( label="Allow Mouse Wheel"
errors.zoomAndPanDto?.allowMouseWheel && touched.zoomAndPanDto?.allowMouseWheel invalid={
) !!(
} errors.zoomAndPanDto?.allowMouseWheel &&
errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string} touched.zoomAndPanDto?.allowMouseWheel
> )
<Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} /> }
</FormItem> errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
>
<Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
</FormItem>
<FormItem <FormItem
label="Allow Touch Gestures" label="Allow Touch Gestures"
invalid={ invalid={
!!( !!(
errors.zoomAndPanDto?.allowTouchGestures && errors.zoomAndPanDto?.allowTouchGestures &&
touched.zoomAndPanDto?.allowTouchGestures touched.zoomAndPanDto?.allowTouchGestures
) )
} }
errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string} errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
> >
<Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} /> <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
</FormItem> </FormItem>
<FormItem <FormItem
label="Drag To Zoom" label="Drag To Zoom"
invalid={!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)} invalid={
errorMessage={errors.zoomAndPanDto?.dragToZoom as string} !!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)
> }
<Field name="zoomAndPanDto.dragToZoom" component={Checkbox} /> errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
</FormItem> >
<Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
</FormItem>
</div>
<FormItem
label="Argument Axis"
invalid={
!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)
}
errorMessage={errors.zoomAndPanDto?.argumentAxis}
>
<Field type="text" name="zoomAndPanDto.argumentAxis">
{({ field, form }: FieldProps<SelectBoxOption>) => (
<Select
field={field}
form={form}
options={chartZoomAndPanAxisOptions}
isClearable={true}
value={chartZoomAndPanAxisOptions.filter(
(option) => option.value === values.zoomAndPanDto.argumentAxis,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
<FormItem <FormItem
label="Argument Axis" label="Value Axis"
invalid={ invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis) errorMessage={errors.zoomAndPanDto?.valueAxis}
} >
errorMessage={errors.zoomAndPanDto?.argumentAxis} <Field type="text" name="zoomAndPanDto.valueAxis">
> {({ field, form }: FieldProps<SelectBoxOption>) => (
<Field type="text" name="zoomAndPanDto.argumentAxis"> <Select
{({ field, form }: FieldProps<SelectBoxOption>) => ( field={field}
<Select form={form}
field={field} options={chartZoomAndPanAxisOptions}
form={form} isClearable={true}
options={chartZoomAndPanAxisOptions} value={chartZoomAndPanAxisOptions.filter(
isClearable={true} (option) => option.value === values.zoomAndPanDto.valueAxis,
value={chartZoomAndPanAxisOptions.filter( )}
(option) => option.value === values.zoomAndPanDto.argumentAxis, onChange={(option) => form.setFieldValue(field.name, option?.value)}
)} />
onChange={(option) => form.setFieldValue(field.name, option?.value)} )}
/> </Field>
)} </FormItem>
</Field>
</FormItem>
<FormItem <FormItem
label="Value Axis" label="Pan Key"
invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)} invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
errorMessage={errors.zoomAndPanDto?.valueAxis} errorMessage={errors.zoomAndPanDto?.panKey}
> >
<Field type="text" name="zoomAndPanDto.valueAxis"> <Field type="text" name="zoomAndPanDto.panKey">
{({ field, form }: FieldProps<SelectBoxOption>) => ( {({ field, form }: FieldProps<SelectBoxOption>) => (
<Select <Select
field={field} field={field}
form={form} form={form}
options={chartZoomAndPanAxisOptions} options={chartZoomAndPanKeyOptions}
isClearable={true} isClearable={true}
value={chartZoomAndPanAxisOptions.filter( value={chartZoomAndPanKeyOptions.filter(
(option) => option.value === values.zoomAndPanDto.valueAxis, (option) => option.value === values.zoomAndPanDto.panKey,
)} )}
onChange={(option) => form.setFieldValue(field.name, option?.value)} onChange={(option) => form.setFieldValue(field.name, option?.value)}
/> />
)} )}
</Field> </Field>
</FormItem> </FormItem>
</Card>
<FormItem <Card className="my-2" header="DragBox Style">
label="Pan Key" <FormItem
invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)} label="Color"
errorMessage={errors.zoomAndPanDto?.panKey} invalid={
> !!(
<Field type="text" name="zoomAndPanDto.panKey"> errors.zoomAndPanDto?.dragBoxStyle?.color &&
{({ field, form }: FieldProps<SelectBoxOption>) => ( touched.zoomAndPanDto?.dragBoxStyle?.color
<Select )
field={field} }
form={form} errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
options={chartZoomAndPanKeyOptions} >
isClearable={true} <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
value={chartZoomAndPanKeyOptions.filter( </FormItem>
(option) => option.value === values.zoomAndPanDto.panKey,
)}
onChange={(option) => form.setFieldValue(field.name, option?.value)}
/>
)}
</Field>
</FormItem>
</Card>
<Card className="my-2" header="Zoom and Pan - DragBox Style"> <FormItem
<FormItem label="Opacity"
label="Color" invalid={
invalid={ !!(
!!( errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
errors.zoomAndPanDto?.dragBoxStyle?.color && touched.zoomAndPanDto?.dragBoxStyle?.opacity
touched.zoomAndPanDto?.dragBoxStyle?.color )
) }
} errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color} >
> <Field
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} /> type="number"
</FormItem> name="zoomAndPanDto.dragBoxStyle.opacity"
component={Input}
<FormItem />
label="Opacity" </FormItem>
invalid={ </Card>
!!( </div>
errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
touched.zoomAndPanDto?.dragBoxStyle?.opacity
)
}
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
>
<Field type="number" name="zoomAndPanDto.dragBoxStyle.opacity" component={Input} />
</FormItem>
</Card>
<div className="mt-4"> <div className="mt-4">
<Button block variant="solid" loading={isSubmitting} type="submit"> <Button block variant="solid" loading={isSubmitting} type="submit">
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')} {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}

10
ui/src/views/admin/listForm/edit/FormEdit.tsx
View file

@ -289,17 +289,17 @@ const FormEdit = () => {
<TabNav value="legendSettings"> <TabNav value="legendSettings">
{translate('::ListForms.ListFormEdit.TabChartLegend')} {translate('::ListForms.ListFormEdit.TabChartLegend')}
</TabNav> </TabNav>
)}
{visibleTabs.includes('crosshairOptions') && (
<TabNav value="crosshairOptions">
{translate('::ListForms.ListFormEdit.TabChartCrosshair')}
</TabNav>
)} )}
{visibleTabs.includes('exportSettings') && ( {visibleTabs.includes('exportSettings') && (
<TabNav value="exportSettings"> <TabNav value="exportSettings">
{translate('::ListForms.ListFormEdit.TabChartExport')} {translate('::ListForms.ListFormEdit.TabChartExport')}
</TabNav> </TabNav>
)} )}
{visibleTabs.includes('crosshairOptions') && (
<TabNav value="crosshairOptions">
{translate('::ListForms.ListFormEdit.TabChartCrosshair')}
</TabNav>
)}
</TabList> </TabList>
{/* <TabList className="flex-wrap border-b mb-2 bg-slate-50"> {/* <TabList className="flex-wrap border-b mb-2 bg-slate-50">

14
ui/src/views/admin/listForm/edit/FormTabPivots.tsx
View file

@ -58,6 +58,20 @@ function FormTabColumns(props: FormEditProps) {
component={Checkbox} component={Checkbox}
/> />
</FormItem> </FormItem>
<FormItem
label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
invalid={
errors.pivotOptionDto?.columnChooserEnabled &&
touched.pivotOptionDto?.columnChooserEnabled
}
errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
>
<Field
name="pivotOptionDto.columnChooserEnabled"
placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
component={Checkbox}
/>
</FormItem>
<FormItem <FormItem
label={translate('::ListForms.ListFormEdit.ShowColumnFields')} label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
invalid={ invalid={

69
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
View file

@ -15,7 +15,7 @@ import { SelectBoxOption } from '@/shared/types'
import { useStoreActions, useStoreState } from '@/store' import { useStoreActions, useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik' import { Field, FieldProps, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useEffect, useState } from 'react' import { Dispatch, SetStateAction } from 'react'
import { boolean, number, object, string } from 'yup' import { boolean, number, object, string } from 'yup'
import { JsonRowDialogData } from './types' import { JsonRowDialogData } from './types'
import { import {
@ -149,11 +149,16 @@ function JsonRowOpDialogSeries({
visible: true, visible: true,
width: 2, width: 2,
label: { label: {
visible: false, visible: true,
backgroundColor: '#f05b41', backgroundColor: '#f05b41',
customizeText: '', customizeText: '',
format: '', format: 'decimal',
font: null, font: {
color: '#FFFFFF',
family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
size: 12,
weight: 400,
},
}, },
} }
} }
@ -409,6 +414,62 @@ function JsonRowOpDialogSeries({
> >
<Field type="text" name="label.customizeText" component={Input} /> <Field type="text" name="label.customizeText" component={Input} />
</FormItem> </FormItem>
<Card className="my-2" header="Font">
<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
)
}
errorMessage={errors.label?.font?.family}
>
<Field name="label.font.family" component={Input} />
</FormItem>
<FormItem
label="Size"
invalid={
!!(
errors.label?.font?.size &&
touched.label?.font?.size
)
}
errorMessage={errors.label?.font?.size}
>
<Field
type="number"
name="label.font.size"
component={Input}
/>
</FormItem>
<FormItem
label="Weight"
invalid={
!!(
errors.label?.font?.weight &&
touched.label?.font?.weight
)
}
errorMessage={errors.label?.font?.weight}
>
<Field
type="number"
name="label.font.weight"
component={Input}
/>
</FormItem>
</Card>
</Card> </Card>
</div> </div>
<div className="text-right mt-4"> <div className="text-right mt-4">

22
ui/src/views/list/Chart.tsx
View file

@ -33,7 +33,19 @@ const Chart = (props: ChartProps) => {
useEffect(() => { useEffect(() => {
if (!gridDto) return if (!gridDto) return
const dataSource = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams) console.log(
gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
)
console.log(gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '))
const dataSource = createSelectDataSource(
gridDto.gridOptions,
listFormCode,
searchParams,
[],
gridDto.gridOptions?.seriesDto?.map((s) => `${s.argumentField} asc false`).join(', '),
gridDto.gridOptions?.seriesDto?.map((s) => `${s.valueField} count`).join(', '),
)
const options = { const options = {
dataSource: dataSource, dataSource: dataSource,
@ -62,8 +74,14 @@ const Chart = (props: ChartProps) => {
valueAxis: gridDto.gridOptions.valueAxisDto, valueAxis: gridDto.gridOptions.valueAxisDto,
tooltip: gridDto.gridOptions.tooltipDto, tooltip: gridDto.gridOptions.tooltipDto,
series:
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, panes: gridDto.gridOptions.panesDto?.length > 0 ? gridDto.gridOptions.panesDto : undefined,
series: gridDto.gridOptions.seriesDto?.length > 0 ? gridDto.gridOptions.seriesDto : undefined,
commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto, commonSeriesSettings: gridDto.gridOptions.commonSeriesSettingsDto,
commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto, commonPaneSettings: gridDto.gridOptions.commonPaneSettingsDto,
commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto, commonAxisSettings: gridDto.gridOptions.commonAxisSettingsDto,

36
ui/src/views/list/List.tsx
View file

@ -29,32 +29,34 @@ const List = () => {
const { states } = useStoreState((state) => state.base.lists) const { states } = useStoreState((state) => state.base.lists)
const { setStates } = useStoreActions((a) => a.base.lists) const { setStates } = useStoreActions((a) => a.base.lists)
useEffect(() => { // 🔹 Tekrar çağırılabilir metod
const initializeGridAsync = async () => { const refreshGridDto = async () => {
if (!listFormCode) return
try {
const response = await getList({ listFormCode }) const response = await getList({ listFormCode })
setGridDto(response.data) setGridDto(response.data)
} catch (error) {
console.error('GridDto refresh error:', error)
} }
}
initializeGridAsync() useEffect(() => {
.then(() => { refreshGridDto().then(() => {
//base içerisine kaydedilen state içerisinden bakılacak //base içerisine kaydedilen state içerisinden bakılacak
const listFormStates = states.find((a) => a.listFormCode === listFormCode) const listFormStates = states.find((a) => a.listFormCode === listFormCode)
if (listFormStates) { if (listFormStates) {
setViewMode(listFormStates.layout || 'grid') setViewMode(listFormStates.layout || 'grid')
} else { } else {
setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout || 'grid') setViewMode(gridDto?.gridOptions?.layoutDto.defaultLayout || 'grid')
} }
}) })
.catch((error) => {
console.error('Hata oluştu:', error)
})
}, [listFormCode]) }, [listFormCode])
if (!listFormCode) { if (!listFormCode) {
return null return null
} }
if (!gridDto) { if (!gridDto) {
return null return null
} }
@ -109,6 +111,7 @@ const List = () => {
<FaTh className="w-4 h-4" /> <FaTh className="w-4 h-4" />
</Button> </Button>
)} )}
{gridDto?.gridOptions?.layoutDto.pivot && ( {gridDto?.gridOptions?.layoutDto.pivot && (
<Button <Button
size="xs" size="xs"
@ -145,6 +148,7 @@ const List = () => {
searchParams={searchParams} searchParams={searchParams}
isSubForm={false} isSubForm={false}
gridDto={gridDto} gridDto={gridDto}
refreshGridDto={refreshGridDto}
/> />
) : viewMode === 'card' ? ( ) : viewMode === 'card' ? (
<Card <Card

115
ui/src/views/list/Pivot.tsx
View file

@ -2,7 +2,6 @@
import Container from '@/components/shared/Container' import Container from '@/components/shared/Container'
import { DX_CLASSNAMES } from '@/constants/app.constant' import { DX_CLASSNAMES } from '@/constants/app.constant'
import { GridDto, ListFormCustomizationTypeEnum } from '@/proxy/form/models' import { GridDto, ListFormCustomizationTypeEnum } from '@/proxy/form/models'
import { getList } from '@/services/form.service'
import { import {
getListFormCustomization, getListFormCustomization,
postListFormCustomization, postListFormCustomization,
@ -34,21 +33,29 @@ import {
} from './Utils' } from './Utils'
import { useFilters } from './useFilters' import { useFilters } from './useFilters'
import WidgetGroup from '@/components/common/WidgetGroup' import WidgetGroup from '@/components/common/WidgetGroup'
import { Button } from '@/components/ui'
import { FaInfoCircle, FaSyncAlt, FaTrash, FaTrashAlt } from 'react-icons/fa'
import { usePermission } from '@/utils/hooks/usePermission'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePWA } from '@/utils/hooks/usePWA'
interface GridProps { interface PivotProps {
listFormCode: string listFormCode: string
searchParams?: URLSearchParams searchParams?: URLSearchParams
isSubForm?: boolean isSubForm?: boolean
level?: number level?: number
refreshData?: () => Promise<void> refreshData?: () => Promise<void>
gridDto?: GridDto gridDto?: GridDto
refreshGridDto: () => Promise<void>
} }
const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)' // kullanici tanimli gridState ile islem gormus gridin paneline ait renk const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)' // kullanici tanimli gridState ile islem gormus gridin paneline ait renk
const Pivot = (props: GridProps) => { const Pivot = (props: PivotProps) => {
const { listFormCode, searchParams, isSubForm, level, gridDto } = props const { listFormCode, searchParams, isSubForm, level, gridDto } = props
const { translate } = useLocalization() const { translate } = useLocalization()
const { checkPermission } = usePermission()
const isPwaMode = usePWA()
const gridRef = useRef<PivotGrid>() const gridRef = useRef<PivotGrid>()
const chartRef = useRef<Chart>(null) const chartRef = useRef<Chart>(null)
@ -104,6 +111,57 @@ const Pivot = (props: GridProps) => {
} }
} }
const clearPivotFilters = () => {
const grid = gridRef.current?.instance
if (!grid) return
const ds = grid.getDataSource()
if (ds) {
const fields = ds.fields()
fields.forEach((f: any) => {
f.filterValues = undefined
f.filterType = undefined
})
ds.reload()
}
}
const moveAllFieldsToFilterArea = () => {
const grid = gridRef.current?.instance
if (!grid) return
const ds = grid.getDataSource()
if (!ds) return
const fields = ds.fields()
fields.forEach((field) => {
field.area = 'filter' // tüm alanları filtre alanına taşı
field.areaIndex = undefined
})
ds.fields(fields)
ds.reload() // PivotGrid’i yeniden yükle
grid.repaint() // UI güncelle
}
const resetPivotGridState = async () => {
const grid = gridRef.current?.instance
if (grid) {
// kullaniciya ait kayitli grid state i sil customizationData boşalt silinsin.
await postListFormCustomization({
listFormCode: listFormCode,
customizationType: ListFormCustomizationTypeEnum.GridState,
filterName: `pivot-${gridRef.current?.instance.option('stateStoring')?.storageKey ?? ''}`,
customizationData: '',
})
await props.refreshGridDto()
clearPivotFilters()
moveAllFieldsToFilterArea()
}
}
const customSaveState = useCallback( const customSaveState = useCallback(
(state: any) => (state: any) =>
postListFormCustomization({ postListFormCustomization({
@ -249,7 +307,50 @@ const Pivot = (props: GridProps) => {
></Helmet> ></Helmet>
)} )}
{gridDto && columnData && ( {gridDto && columnData && (
<> <div className="p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 ">
<div className="flex justify-end items-center">
<div className="relative pb-1 flex gap-1 border-b-1">
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={clearPivotFilters}
title="Remove Filter"
>
<FaTrash className="w-3 h-3" />
</Button>
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={resetPivotGridState}
title="Reset Grid State"
>
<FaSyncAlt className="w-3 h-3" />
</Button>
{checkPermission(gridDto?.gridOptions.permissionDto.u) && (
<Button
size="xs"
variant={'default'}
className="text-sm"
onClick={() => {
window.open(
ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(
':listFormCode',
listFormCode,
),
isPwaMode ? '_self' : '_blank',
)
}}
title="Form Manager"
>
<FaInfoCircle className="w-3 h-3" />
</Button>
)}
</div>
</div>
{gridDto.gridOptions.pivotOptionDto.showChart && ( {gridDto.gridOptions.pivotOptionDto.showChart && (
<Chart ref={chartRef as any}> <Chart ref={chartRef as any}>
<Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} /> <Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
@ -260,6 +361,8 @@ const Pivot = (props: GridProps) => {
</Chart> </Chart>
)} )}
<div className="dx-datagrid-header-panel h-1"></div>
<PivotGrid <PivotGrid
ref={gridRef as any} ref={gridRef as any}
id={'Pivot-' + listFormCode} id={'Pivot-' + listFormCode}
@ -292,12 +395,12 @@ const Pivot = (props: GridProps) => {
showFilterFields={gridDto.gridOptions.pivotOptionDto.showFilterFields} showFilterFields={gridDto.gridOptions.pivotOptionDto.showFilterFields}
/> />
<FieldChooser <FieldChooser
enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled} enabled={gridDto.gridOptions.pivotOptionDto.columnChooserEnabled}
height={500} height={500}
/> />
<Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} /> <Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
</PivotGrid> </PivotGrid>
</> </div>
)} )}
</Container> </Container>
</> </>

16
ui/src/views/list/useFilters.tsx
View file

@ -103,12 +103,6 @@ const useFilters = ({
const menus = [] const menus = []
menus.push({
text: translate('::ListForms.ListForm.Pivots'),
id: 'openPivotGrid',
icon: 'search',
})
// #region Save/Reset grid state and Filters // #region Save/Reset grid state and Filters
if (grdOpt.filterRowDto?.allowUserUiFilterSave || grdOpt.stateStoringDto?.enabled) { if (grdOpt.filterRowDto?.allowUserUiFilterSave || grdOpt.stateStoringDto?.enabled) {
//Kullanicinin filtre islemi yapmasina izin verilmis ise filtreleme menu elemanlarini ekle //Kullanicinin filtre islemi yapmasina izin verilmis ise filtreleme menu elemanlarini ekle
@ -126,7 +120,7 @@ const useFilters = ({
menus.push({ menus.push({
text: translate('::ListForms.ListForm.RemoveFilter'), text: translate('::ListForms.ListForm.RemoveFilter'),
id: 'clearFilter', id: 'clearFilter',
icon: 'clear', icon: 'close',
}) })
} }
@ -135,7 +129,7 @@ const useFilters = ({
menus.push({ menus.push({
text: translate('::ListForms.ListForm.ResetGridState'), text: translate('::ListForms.ListForm.ResetGridState'),
id: 'resetGridState', id: 'resetGridState',
icon: 'return', icon: 'refresh',
}) })
} }
@ -143,7 +137,7 @@ const useFilters = ({
menus.push({ menus.push({
text: translate('::ListForms.ListForm.Manage'), text: translate('::ListForms.ListForm.Manage'),
id: 'openManage', id: 'openManage',
icon: 'info', icon: 'preferences',
}) })
} }
@ -151,7 +145,7 @@ const useFilters = ({
menus.push({ menus.push({
text: translate('::ListForms.ListForm.ImportManager'), text: translate('::ListForms.ListForm.ImportManager'),
id: 'importManager', id: 'importManager',
icon: 'import', icon: 'upload',
}) })
} }
@ -183,8 +177,6 @@ const useFilters = ({
} else if (itemData.id === 'deleteFilter') { } else if (itemData.id === 'deleteFilter') {
// Kayitli bir filtreyi silmek icin ilgili ekrani ac // Kayitli bir filtreyi silmek icin ilgili ekrani ac
setIsDeleteModalOpen(true) setIsDeleteModalOpen(true)
} else if (itemData.id === 'openPivotGrid') {
navigate(ROUTES_ENUM.protected.admin.pivot.replace(':listFormCode', listFormCode))
} else if (itemData.id === 'openManage') { } else if (itemData.id === 'openManage') {
window.open( window.open(
ROUTES_ENUM.protected.saas.listFormManagement.edit.replace( ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(