4410 lines
192 KiB
TypeScript
4410 lines
192 KiB
TypeScript
import {
|
||
Alert,
|
||
Button,
|
||
Card,
|
||
Checkbox,
|
||
Dialog,
|
||
FormContainer,
|
||
FormItem,
|
||
Input,
|
||
Notification,
|
||
Select,
|
||
Table,
|
||
Tabs,
|
||
toast,
|
||
} from '@/components/ui'
|
||
import TBody from '@/components/ui/Table/TBody'
|
||
import THead from '@/components/ui/Table/THead'
|
||
import Td from '@/components/ui/Table/Td'
|
||
import Th from '@/components/ui/Table/Th'
|
||
import Tr from '@/components/ui/Table/Tr'
|
||
import TabContent from '@/components/ui/Tabs/TabContent'
|
||
import TabList from '@/components/ui/Tabs/TabList'
|
||
import TabNav from '@/components/ui/Tabs/TabNav'
|
||
import { getRoles, getUsers } from '@/services/identity.service'
|
||
import {
|
||
deleteChartJsonItem,
|
||
getChartByCode,
|
||
putChartJsonItem,
|
||
putCharts,
|
||
} from '@/services/chart.service'
|
||
import { LanguageInfo } from '@/proxy/config/models'
|
||
import { getDataSources } from '@/proxy/data-source'
|
||
import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
|
||
import { SelectBoxOption } from '@/shared/types'
|
||
import { useStoreState } from '@/store'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
import setNull from '@/utils/setNull'
|
||
import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
|
||
import { useEffect, useState } from 'react'
|
||
import { Helmet } from 'react-helmet'
|
||
import { FaEdit, FaMinus, FaFileMedical, FaPlus, FaTrash } from 'react-icons/fa'
|
||
import { Link, useParams } from 'react-router-dom'
|
||
import { object, string } from 'yup'
|
||
import {
|
||
chartAnnotationTypeListOptions,
|
||
chartArgumentAxisHoverModeListOptions,
|
||
chartArgumentAxisIntervalListOptions,
|
||
chartArgumentAxisLabelDisplayModeListOptions,
|
||
chartArgumentAxisLabelOverlappingBehaviorListOptions,
|
||
chartArgumentAxisPositionListOptions,
|
||
chartArgumentAxisTypeListOptions,
|
||
chartBreakStyleLineListOptions,
|
||
chartEasingListOptions,
|
||
chartLegendOrientationListOptions,
|
||
chartLegendPositionListOptions,
|
||
chartPaletteExtensionModeOptions,
|
||
chartPaletteOptions,
|
||
chartSeriesDashStyleOptions,
|
||
chartSeriesSelectionModeOptions,
|
||
chartSeriesTypeOptions,
|
||
chartTitleHorizantalAlignmentListOptions,
|
||
chartTitleTextOverFlowListOptions,
|
||
chartTitleVerticalAlignmentListOptions,
|
||
chartTitleWordWrapListOptions,
|
||
chartTooltipLocationListOptions,
|
||
chartWordWrapListOptions,
|
||
chartZoomAndPanAxisOptions,
|
||
chartZoomAndPanKeyOptions,
|
||
} from './options'
|
||
import { ChartDialogType, ChartOperation } from './types'
|
||
import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
|
||
import { MenuDto } from '@/proxy/menus/models'
|
||
import { DataSourceTypeEnum } from '@/proxy/form/models'
|
||
import {
|
||
BreakDto,
|
||
ChartAnnotationDto,
|
||
ChartEditDto,
|
||
ChartPanesDto,
|
||
ChartSeriesDto,
|
||
ChartValueAxisDto,
|
||
} from '@/proxy/charts/models'
|
||
import { Container } from '@/components/shared'
|
||
|
||
const chartPanesValidationSchema = object().shape({
|
||
name: string().required(),
|
||
})
|
||
|
||
const chartSeriesValidationSchema = object().shape({
|
||
name: string().required(),
|
||
})
|
||
|
||
const chartAxisValidationSchema = object().shape({
|
||
name: string().required(),
|
||
title: string().required(),
|
||
})
|
||
|
||
const chartAnnotationsValidationSchema = object().shape({
|
||
name: string().required(),
|
||
})
|
||
|
||
const fieldFeedback = (form: FormikProps<BreakDto>, name: string) => {
|
||
const error = getIn(form.errors, name)
|
||
const touch = getIn(form.touched, name)
|
||
return {
|
||
errorMessage: error || '',
|
||
invalid: typeof touch === 'undefined' ? false : error && touch,
|
||
}
|
||
}
|
||
|
||
const chartValidationSchema = object().shape({
|
||
cultureName: string().required(),
|
||
chartCode: string().required(),
|
||
})
|
||
|
||
interface DatabaseOperation {
|
||
isOpen: ChartDialogType
|
||
id: string
|
||
operation: ChartOperation
|
||
index: number
|
||
panesValues?: ChartPanesDto
|
||
seriesValues?: ChartSeriesDto
|
||
annotationsValues?: ChartAnnotationDto
|
||
axisValues?: ChartValueAxisDto
|
||
}
|
||
|
||
const defaultDatabaseOperation: DatabaseOperation = {
|
||
isOpen: '',
|
||
id: '',
|
||
operation: 'select',
|
||
index: -1,
|
||
}
|
||
|
||
interface ConfirmDelete {
|
||
isOpen: boolean
|
||
id: string
|
||
index: number
|
||
fieldName: ChartDialogType
|
||
}
|
||
|
||
const defaultConfirmDelete: ConfirmDelete = {
|
||
isOpen: false,
|
||
id: '',
|
||
index: -1,
|
||
fieldName: 'pane',
|
||
}
|
||
|
||
function ChartEdit() {
|
||
const { chartCode } = useParams()
|
||
const { translate } = useLocalization()
|
||
const [dataSourceList, setDataSourceList] = useState<SelectBoxOption[]>([])
|
||
|
||
const languages: LanguageInfo[] | undefined = useStoreState(
|
||
(state) => state.abpConfig.config?.localization.languages,
|
||
)
|
||
const permissions: Record<string, boolean> | undefined = useStoreState(
|
||
(state) => state.abpConfig.config?.auth.grantedPolicies,
|
||
)
|
||
const [chartValues, setChartValues] = useState<ChartEditDto>()
|
||
const [langOptions, setLangOptions] = useState<SelectBoxOption[]>([])
|
||
const [roleList, setRoleList] = useState<SelectBoxOption[]>([])
|
||
const [userList, setUserList] = useState<SelectBoxOption[]>([])
|
||
const [permissionOptions, setPermissionOptions] = useState<SelectBoxOption[]>([])
|
||
const [confirmDelete, setConfirmDelete] = useState<ConfirmDelete>(defaultConfirmDelete)
|
||
const [databaseOperationsModalData, setDatabaseOperationsModalData] =
|
||
useState<DatabaseOperation>(defaultDatabaseOperation)
|
||
|
||
const valueAxisList = () => {
|
||
return chartValues?.valueAxisDto.map((key: ChartValueAxisDto) => ({
|
||
value: key.name,
|
||
label: key.name,
|
||
}))
|
||
}
|
||
|
||
const valuePaneList = () => {
|
||
return chartValues?.panesDto.map((key: ChartPanesDto) => ({
|
||
value: key.name,
|
||
label: key.name,
|
||
}))
|
||
}
|
||
|
||
const SeriesList = () => {
|
||
return chartValues?.seriesDto.map((key: ChartSeriesDto) => ({
|
||
value: key.name,
|
||
label: key.name,
|
||
}))
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (languages) {
|
||
setLangOptions(
|
||
languages.map((lang) => ({
|
||
value: lang.cultureName,
|
||
label: lang.displayName,
|
||
})),
|
||
)
|
||
}
|
||
}, [languages])
|
||
|
||
useEffect(() => {
|
||
if (permissions) {
|
||
setPermissionOptions(
|
||
Object.keys(permissions).map((key) => {
|
||
return {
|
||
value: key,
|
||
label: key,
|
||
}
|
||
}),
|
||
)
|
||
}
|
||
}, [permissions])
|
||
|
||
const getRoleList = async () => {
|
||
const response = await getRoles()
|
||
if (response.data?.items) {
|
||
setRoleList(
|
||
response.data.items.map((role: IdentityRoleDto) => ({
|
||
value: role.id,
|
||
label: role.name,
|
||
})),
|
||
)
|
||
}
|
||
}
|
||
|
||
const getUserList = async () => {
|
||
const response = await getUsers()
|
||
if (response.data?.items) {
|
||
setUserList(
|
||
response.data.items.map((user: IdentityUserDto) => ({
|
||
value: user.id,
|
||
label: user.name,
|
||
})),
|
||
)
|
||
}
|
||
}
|
||
|
||
const getChartValues = async () => {
|
||
if (!chartCode) return
|
||
|
||
const res = await getChartByCode(chartCode)
|
||
setNull(res.data)
|
||
setChartValues(res.data)
|
||
}
|
||
|
||
const getDataSourceList = async () => {
|
||
const response = await getDataSources()
|
||
if (response.data?.items) {
|
||
setDataSourceList(
|
||
response.data.items.map((a) => ({
|
||
value: a.code,
|
||
label: a.code,
|
||
})),
|
||
)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
getChartValues()
|
||
getRoleList()
|
||
getUserList()
|
||
getDataSourceList()
|
||
}, [chartCode])
|
||
|
||
return chartValues && roleList && userList && permissionOptions ? (
|
||
<Container>
|
||
<Helmet
|
||
titleTemplate="%s | Kurs Platform"
|
||
title={chartCode}
|
||
defaultTitle="Kurs Platform"
|
||
></Helmet>
|
||
|
||
<Formik
|
||
initialValues={{ ...chartValues }}
|
||
validationSchema={chartValidationSchema}
|
||
onSubmit={async (values, { resetForm, setSubmitting }) => {
|
||
setSubmitting(true)
|
||
await putCharts({ ...values })
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{'Chart Bilgileri Kaydedildi.'}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
setSubmitting(false)
|
||
}}
|
||
>
|
||
{({ touched, errors, resetForm, isSubmitting, values }) => (
|
||
<Form>
|
||
<FormContainer size="sm">
|
||
<div className="lg:flex items-center justify-between mb-4 gap-3">
|
||
<div className="mb-4 lg:mb-0">
|
||
<h4>
|
||
<Link to={`/chart/${chartCode}`}>🔙 {chartCode}</Link>
|
||
</h4>
|
||
{chartValues.isTenant && (
|
||
<Alert showIcon className="mb-4" type="warning">
|
||
Bu bir MULTI TENANT form'dur, veri kaybı olmaması için, sorgularda TENANTID
|
||
parametresini kullanmayı unutmayınız.
|
||
</Alert>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<Tabs defaultValue="details" variant="pill">
|
||
<TabList className="flex-wrap border-b mb-2 bg-slate-50">
|
||
<TabNav value="details">Details</TabNav>
|
||
<TabNav value="database">Database</TabNav>
|
||
<TabNav value="commonSettings">Common</TabNav>
|
||
<TabNav value="permissions">Permissions</TabNav>
|
||
<TabNav value="series">Series</TabNav>
|
||
<TabNav value="axis">Axis</TabNav>
|
||
<TabNav value="panes">Panes</TabNav>
|
||
<TabNav value="animationsOptions">Animations</TabNav>
|
||
<TabNav value="crosshairOptions">Crosshair</TabNav>
|
||
<TabNav value="exportSettings">Export</TabNav>
|
||
<TabNav value="legendSettings">Legend</TabNav>
|
||
<TabNav value="zoomAndPanSettings">Zoom & Pan</TabNav>
|
||
<TabNav value="annotations">Annotations</TabNav>
|
||
</TabList>
|
||
<TabContent value="details">
|
||
<FormItem
|
||
label="Chart Code"
|
||
invalid={errors.chartCode && touched.chartCode}
|
||
errorMessage={errors.chartCode}
|
||
>
|
||
<Field type="text" name="chartCode" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Culture Name"
|
||
invalid={errors.cultureName && touched.cultureName}
|
||
errorMessage={errors.cultureName}
|
||
>
|
||
<Field type="text" name="cultureName">
|
||
{({ field, form }: FieldProps<LanguageInfo>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={langOptions}
|
||
isClearable={true}
|
||
value={langOptions.filter(
|
||
(option) => option.value === values.cultureName,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Role"
|
||
invalid={errors.roleId && touched.roleId}
|
||
errorMessage={errors.roleId}
|
||
>
|
||
<Field type="text" name="roleId">
|
||
{({ field, form }: FieldProps<IdentityRoleDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={roleList}
|
||
isClearable={true}
|
||
value={roleList.filter((option) => option.value === values.roleId)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="User"
|
||
invalid={errors.userId && touched.userId}
|
||
errorMessage={errors.userId}
|
||
>
|
||
<Field type="text" name="userId">
|
||
{({ field, form }: FieldProps<IdentityUserDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={userList}
|
||
isClearable={true}
|
||
value={userList.filter((option) => option.value === values.userId)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</TabContent>
|
||
|
||
<TabContent value="database">
|
||
<FormItem
|
||
label={translate('::ListForms.ListFormEdit.IsTenant')}
|
||
invalid={errors.isTenant && touched.isTenant}
|
||
errorMessage={errors.isTenant}
|
||
>
|
||
<Field
|
||
name="isTenant"
|
||
placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
<FormItem
|
||
label={translate('::ListForms.ListFormEdit.IsBranch')}
|
||
invalid={errors.isBranch && touched.isBranch}
|
||
errorMessage={errors.isBranch}
|
||
>
|
||
<Field
|
||
name="isBranch"
|
||
placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
<FormItem
|
||
label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
|
||
invalid={errors.isOrganizationUnit && touched.isOrganizationUnit}
|
||
errorMessage={errors.isOrganizationUnit}
|
||
>
|
||
<Field
|
||
name="isOrganizationUnit"
|
||
placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Data Source Code"
|
||
invalid={errors.dataSourceCode && touched.dataSourceCode}
|
||
errorMessage={errors.dataSourceCode}
|
||
>
|
||
<Field type="text" name="dataSourceCode">
|
||
{({ field, form }: FieldProps<DataSourceTypeEnum>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={dataSourceList}
|
||
value={dataSourceList?.filter(
|
||
(option) => option.value === values.dataSourceCode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="DataSource Query"
|
||
invalid={errors.dataSourceDto?.query && touched.dataSourceDto?.query}
|
||
errorMessage={errors.dataSourceDto?.query}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="dataSourceDto.query"
|
||
component={Input}
|
||
textArea={true}
|
||
/>
|
||
</FormItem>
|
||
</TabContent>
|
||
|
||
<TabContent value="commonSettings">
|
||
<Tabs defaultValue="commonSettings_general">
|
||
<TabList className="flex-wrap">
|
||
<TabNav value="commonSettings_general">General</TabNav>
|
||
<TabNav value="commonSettings_adaptiveLayouts">
|
||
Adaptive Layout Settings
|
||
</TabNav>
|
||
<TabNav value="commonSettings_title">Title Settings</TabNav>
|
||
<TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
|
||
<TabNav value="commonSettings_margin">Margin Settings</TabNav>
|
||
<TabNav value="commonSettings_size">Size Settings</TabNav>
|
||
<TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
|
||
</TabList>
|
||
<TabContent value="commonSettings_general">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Disabled"
|
||
invalid={errors.commonDto?.disabled && touched.commonDto?.disabled}
|
||
errorMessage={errors.commonDto?.disabled}
|
||
>
|
||
<Field name="commonDto.disabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Adjust On Zoom"
|
||
invalid={
|
||
errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom
|
||
}
|
||
errorMessage={errors.commonDto?.adjustOnZoom}
|
||
>
|
||
<Field name="commonDto.adjustOnZoom" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Container BackgroundColor"
|
||
invalid={
|
||
errors.commonDto?.containerBackgroundColor &&
|
||
touched.commonDto?.containerBackgroundColor
|
||
}
|
||
errorMessage={errors.commonDto?.containerBackgroundColor}
|
||
>
|
||
<Field name="commonDto.containerBackgroundColor" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Default Pane"
|
||
invalid={errors.commonDto?.defaultPane && touched.commonDto?.defaultPane}
|
||
errorMessage={errors.commonDto?.defaultPane}
|
||
>
|
||
<Field type="text" name="commonDto.defaultPane" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Theme"
|
||
invalid={errors.commonDto?.theme && touched.commonDto?.theme}
|
||
errorMessage={errors.commonDto?.theme}
|
||
>
|
||
<Field type="text" name="commonDto.theme">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={themeOptions}
|
||
isClearable={true}
|
||
value={themeOptions.filter(
|
||
(option) => option.value === values.commonDto.theme,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Palette"
|
||
invalid={errors.commonDto?.palette && touched.commonDto?.palette}
|
||
errorMessage={errors.commonDto?.palette}
|
||
>
|
||
<Field type="text" name="commonDto.palette">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartPaletteOptions}
|
||
isClearable={true}
|
||
value={chartPaletteOptions.filter(
|
||
(option) => option.value === values.commonDto.palette,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Palette Extension Mode"
|
||
invalid={
|
||
errors.commonDto?.paletteExtensionMode &&
|
||
touched.commonDto?.paletteExtensionMode
|
||
}
|
||
errorMessage={errors.commonDto?.paletteExtensionMode}
|
||
>
|
||
<Field type="text" name="commonDto.paletteExtensionMode">
|
||
{({ field, form }: FieldProps<any>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartPaletteExtensionModeOptions}
|
||
isClearable={true}
|
||
value={chartPaletteExtensionModeOptions.filter(
|
||
(option) =>
|
||
option.value === values.commonDto.paletteExtensionMode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_adaptiveLayouts">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Keep Labels"
|
||
invalid={
|
||
errors.adaptivelayoutDto?.keepLabels &&
|
||
touched.adaptivelayoutDto?.keepLabels
|
||
}
|
||
errorMessage={errors.adaptivelayoutDto?.keepLabels}
|
||
>
|
||
<Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width
|
||
}
|
||
errorMessage={errors.adaptivelayoutDto?.width}
|
||
>
|
||
<Field type="number" name="adaptivelayoutDto.width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Height"
|
||
invalid={
|
||
errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height
|
||
}
|
||
errorMessage={errors.adaptivelayoutDto?.height}
|
||
>
|
||
<Field type="number" name="adaptivelayoutDto.height" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_title">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Text"
|
||
invalid={errors.titleDto?.text && touched.titleDto?.text}
|
||
errorMessage={errors.titleDto?.text}
|
||
>
|
||
<Field name="titleDto.text" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Subtitle"
|
||
invalid={errors.titleDto?.subtitle && touched.titleDto?.subtitle}
|
||
errorMessage={errors.titleDto?.subtitle}
|
||
>
|
||
<Field name="titleDto.subtitle" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Vertical Alignment"
|
||
invalid={
|
||
errors.titleDto?.verticalAlignment &&
|
||
touched.titleDto?.verticalAlignment
|
||
}
|
||
errorMessage={errors.titleDto?.verticalAlignment}
|
||
>
|
||
<Field type="text" name="titleDto.verticalAlignment">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartTitleVerticalAlignmentListOptions}
|
||
isClearable={true}
|
||
value={chartTitleVerticalAlignmentListOptions.filter(
|
||
(option) => option.value === values.titleDto.verticalAlignment,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Horizontal Alignment"
|
||
invalid={
|
||
errors.titleDto?.horizontalAlignment &&
|
||
touched.titleDto?.horizontalAlignment
|
||
}
|
||
errorMessage={errors.titleDto?.horizontalAlignment}
|
||
>
|
||
<Field type="text" name="titleDto.horizontalAlignment">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartTitleHorizantalAlignmentListOptions}
|
||
isClearable={true}
|
||
value={chartTitleHorizantalAlignmentListOptions.filter(
|
||
(option) => option.value === values.titleDto.horizontalAlignment,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Text Overflow"
|
||
invalid={errors.titleDto?.textOverflow && touched.titleDto?.textOverflow}
|
||
errorMessage={errors.titleDto?.textOverflow}
|
||
>
|
||
<Field type="text" name="titleDto.textOverflow">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartTitleTextOverFlowListOptions}
|
||
isClearable={true}
|
||
value={chartTitleTextOverFlowListOptions.filter(
|
||
(option) => option.value === values.titleDto.textOverflow,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Word Wrap"
|
||
invalid={errors.titleDto?.wordWrap && touched.titleDto?.wordWrap}
|
||
errorMessage={errors.titleDto?.wordWrap}
|
||
>
|
||
<Field type="text" name="titleDto.wordWrap">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartTitleWordWrapListOptions}
|
||
isClearable={true}
|
||
value={chartTitleWordWrapListOptions.filter(
|
||
(option) => option.value === values.titleDto.wordWrap,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_tooltip">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Enabled"
|
||
invalid={errors.tooltipDto?.enabled && touched.tooltipDto?.enabled}
|
||
errorMessage={errors.tooltipDto?.enabled}
|
||
>
|
||
<Field name="tooltipDto.keepLabels" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Shared"
|
||
invalid={errors.tooltipDto?.shared && touched.tooltipDto?.shared}
|
||
errorMessage={errors.tooltipDto?.shared}
|
||
>
|
||
<Field name="tooltipDto.shared" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Format"
|
||
invalid={errors.tooltipDto?.format && touched.tooltipDto?.format}
|
||
errorMessage={errors.tooltipDto?.format}
|
||
>
|
||
<Field type="text" name="tooltipDto.format">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={tooltipFormatListOptions}
|
||
isClearable={true}
|
||
value={tooltipFormatListOptions.filter(
|
||
(option) => option.value === values.tooltipDto.format,
|
||
)}
|
||
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}
|
||
>
|
||
<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>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_margin">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Bottom"
|
||
invalid={errors.marginDto?.bottom && touched.marginDto?.bottom}
|
||
errorMessage={errors.marginDto?.bottom}
|
||
>
|
||
<Field type="number" name="marginDto.bottom" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Top"
|
||
invalid={errors.marginDto?.top && touched.marginDto?.top}
|
||
errorMessage={errors.marginDto?.top}
|
||
>
|
||
<Field type="number" name="marginDto.top" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Right"
|
||
invalid={errors.marginDto?.right && touched.marginDto?.right}
|
||
errorMessage={errors.marginDto?.right}
|
||
>
|
||
<Field type="number" name="marginDto.right" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Left"
|
||
invalid={errors.marginDto?.left && touched.marginDto?.left}
|
||
errorMessage={errors.marginDto?.left}
|
||
>
|
||
<Field type="number" name="marginDto.left" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_size">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Use Size"
|
||
invalid={errors.sizeDto?.useSize && touched.sizeDto?.useSize}
|
||
errorMessage={errors.sizeDto?.useSize}
|
||
>
|
||
<Field name="sizeDto.useSize" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.sizeDto?.width && touched.sizeDto?.width}
|
||
errorMessage={errors.sizeDto?.width}
|
||
>
|
||
<Field type="number" name="sizeDto.width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Height"
|
||
invalid={errors.sizeDto?.height && touched.sizeDto?.height}
|
||
errorMessage={errors.sizeDto?.height}
|
||
>
|
||
<Field type="number" name="sizeDto.height" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="commonSettings_scrollbar">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.scrollBarDto?.visible && touched.scrollBarDto?.visible}
|
||
errorMessage={errors.scrollBarDto?.visible}
|
||
>
|
||
<Field name="scrollBarDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.scrollBarDto?.color && touched.scrollBarDto?.color}
|
||
errorMessage={errors.scrollBarDto?.color}
|
||
>
|
||
<Field name="scrollBarDto.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Position"
|
||
invalid={errors.scrollBarDto?.position && touched.scrollBarDto?.position}
|
||
errorMessage={errors.scrollBarDto?.position}
|
||
>
|
||
<Field type="text" name="commonDto.position">
|
||
{({ field, form }: FieldProps<IdentityRoleDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisPositionListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisPositionListOptions.filter(
|
||
(option) => option.value === values.scrollBarDto.position,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Offset"
|
||
invalid={errors.scrollBarDto?.offset && touched.scrollBarDto?.offset}
|
||
errorMessage={errors.scrollBarDto?.offset}
|
||
>
|
||
<Field type="number" name="scrollBarDto.offset" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.scrollBarDto?.width && touched.scrollBarDto?.width}
|
||
errorMessage={errors.scrollBarDto?.width}
|
||
>
|
||
<Field type="number" name="scrollBarDto.width" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
</Tabs>
|
||
</TabContent>
|
||
|
||
<TabContent value="permissions">
|
||
<FormItem
|
||
label="Create"
|
||
invalid={errors.permissionDto?.c && touched.permissionDto?.c}
|
||
errorMessage={errors.permissionDto?.c}
|
||
>
|
||
<Field type="text" name="permissionDto.c">
|
||
{({ field, form }: FieldProps<MenuDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={permissionOptions}
|
||
isClearable={true}
|
||
value={permissionOptions.filter(
|
||
(option) => option.value === values.permissionDto.c,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
<FormItem
|
||
label="Read"
|
||
invalid={errors.permissionDto?.r && touched.permissionDto?.r}
|
||
errorMessage={errors.permissionDto?.r}
|
||
>
|
||
<Field type="text" name="permissionDto.r">
|
||
{({ field, form }: FieldProps<MenuDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={permissionOptions}
|
||
isClearable={true}
|
||
value={permissionOptions.filter(
|
||
(option) => option.value === values.permissionDto.r,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
<FormItem
|
||
label="Update"
|
||
invalid={errors.permissionDto?.u && touched.permissionDto?.u}
|
||
errorMessage={errors.permissionDto?.u}
|
||
>
|
||
<Field type="text" name="permissionDto.u">
|
||
{({ field, form }: FieldProps<MenuDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={permissionOptions}
|
||
isClearable={true}
|
||
value={permissionOptions.filter(
|
||
(option) => option.value === values.permissionDto.u,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
<FormItem
|
||
label="Delete"
|
||
invalid={errors.permissionDto?.d && touched.permissionDto?.d}
|
||
errorMessage={errors.permissionDto?.d}
|
||
>
|
||
<Field type="text" name="permissionDto.d">
|
||
{({ field, form }: FieldProps<MenuDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={permissionOptions}
|
||
isClearable={true}
|
||
value={permissionOptions.filter(
|
||
(option) => option.value === values.permissionDto.d,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</TabContent>
|
||
|
||
<TabContent value="series">
|
||
<Tabs defaultValue="series_general">
|
||
<TabList>
|
||
<TabNav value="series_general">General</TabNav>
|
||
<TabNav value="series_common">Common Series Settings</TabNav>
|
||
</TabList>
|
||
<TabContent value="series_general">
|
||
<Card className="my-2" bodyClass="p-0">
|
||
<Table compact>
|
||
<THead>
|
||
<Tr>
|
||
<Th>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Add"
|
||
icon={<FaPlus />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index: -1,
|
||
isOpen: 'serie',
|
||
operation: 'insert',
|
||
})
|
||
}}
|
||
/>
|
||
</Th>
|
||
<Th>Type</Th>
|
||
<Th>Name</Th>
|
||
<Th>Argument Field</Th>
|
||
<Th>Value Field</Th>
|
||
<Th>Pane</Th>
|
||
<Th>Axis</Th>
|
||
</Tr>
|
||
</THead>
|
||
<TBody>
|
||
{chartValues.seriesDto.map((row, index) => (
|
||
<Tr key={index}>
|
||
<Td>
|
||
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Edit"
|
||
icon={<FaEdit />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index,
|
||
isOpen: 'serie',
|
||
operation: 'update',
|
||
seriesValues: chartValues.seriesDto[index],
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Delete"
|
||
icon={<FaTrash />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setConfirmDelete({
|
||
isOpen: true,
|
||
id: values.id ?? '',
|
||
fieldName: 'serie',
|
||
index,
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</Td>
|
||
<Td>{row.type}</Td>
|
||
<Td>{row.name}</Td>
|
||
<Td>{row.argumentField}</Td>
|
||
<Td>{row.valueField}</Td>
|
||
<Td>{row.pane}</Td>
|
||
<Td>{row.axis}</Td>
|
||
</Tr>
|
||
))}
|
||
</TBody>
|
||
</Table>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="series_common">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.visible &&
|
||
touched.commonSeriesSettingsDto?.visible
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.visible}
|
||
>
|
||
<Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Show In Legend"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.showInLegend &&
|
||
touched.commonSeriesSettingsDto?.showInLegend
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
|
||
>
|
||
<Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Ignore Empty Points"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
|
||
touched.commonSeriesSettingsDto?.ignoreEmptyPoints
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
|
||
>
|
||
<Field
|
||
name="commonSeriesSettingsDto.ignoreEmptyPoints"
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.type &&
|
||
touched.commonSeriesSettingsDto?.type
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.type}
|
||
>
|
||
<Field type="text" name="commonSeriesSettingsDto.type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesTypeOptions}
|
||
isClearable={true}
|
||
value={chartSeriesTypeOptions.filter(
|
||
(option) => option.value === values.commonSeriesSettingsDto.type,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Selection Mode"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.selectionMode &&
|
||
touched.commonSeriesSettingsDto?.selectionMode
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
|
||
>
|
||
<Field type="text" name="commonSeriesSettingsDto.selectionMode">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesSelectionModeOptions}
|
||
isClearable={true}
|
||
value={chartSeriesSelectionModeOptions.filter(
|
||
(option) =>
|
||
option.value === values.commonSeriesSettingsDto.selectionMode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Argument Field"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.argumentField &&
|
||
touched.commonSeriesSettingsDto?.argumentField
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.argumentField}
|
||
>
|
||
<Field name="commonSeriesSettingsDto.argumentField" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Value Field"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.valueField &&
|
||
touched.commonSeriesSettingsDto?.valueField
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.valueField}
|
||
>
|
||
<Field name="commonSeriesSettingsDto.valueField" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Axis"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.axis &&
|
||
touched.commonSeriesSettingsDto?.axis
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.axis}
|
||
>
|
||
<Field type="text" name="commonSeriesSettingsDto.axis">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={valueAxisList()}
|
||
isClearable={true}
|
||
value={valueAxisList()?.find(
|
||
(option) => option.value === values.commonSeriesSettingsDto.axis,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Pane"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.pane &&
|
||
touched.commonSeriesSettingsDto?.pane
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.pane}
|
||
>
|
||
<Field type="text" name="commonSeriesSettingsDto.pane">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={valuePaneList()}
|
||
isClearable={true}
|
||
value={valuePaneList()?.find(
|
||
(option) => option.value === values.commonSeriesSettingsDto.pane,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.color &&
|
||
touched.commonSeriesSettingsDto?.color
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.color}
|
||
>
|
||
<Field name="commonSeriesSettingsDto.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Corner Radius"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.cornerRadius &&
|
||
touched.commonSeriesSettingsDto?.cornerRadius
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonSeriesSettingsDto.cornerRadius"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.dashStyle &&
|
||
touched.commonSeriesSettingsDto?.dashStyle
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
|
||
>
|
||
<Field type="text" name="commonSeriesSettingsDto.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) =>
|
||
option.value === values.commonSeriesSettingsDto.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.commonSeriesSettingsDto?.width &&
|
||
touched.commonSeriesSettingsDto?.width
|
||
}
|
||
errorMessage={errors.commonSeriesSettingsDto?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonSeriesSettingsDto.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
</Tabs>
|
||
</TabContent>
|
||
|
||
<TabContent value="axis">
|
||
<Tabs defaultValue="axis_value">
|
||
<TabList>
|
||
<TabNav value="axis_value">Value Axis</TabNav>
|
||
<TabNav value="axis_argument">Argument Axis Options</TabNav>
|
||
<TabNav value="axis_common">Common Axis Settings</TabNav>
|
||
</TabList>
|
||
<TabContent value="axis_value">
|
||
<Card className="my-2" bodyClass="p-0">
|
||
<Table compact>
|
||
<THead>
|
||
<Tr>
|
||
<Th>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Add"
|
||
icon={<FaPlus />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index: -1,
|
||
isOpen: 'axis',
|
||
operation: 'insert',
|
||
})
|
||
}}
|
||
/>
|
||
</Th>
|
||
<Th>Value Type</Th>
|
||
<Th>Position</Th>
|
||
<Th>Type</Th>
|
||
<Th>Name</Th>
|
||
<Th>Title</Th>
|
||
<Th>Visible</Th>
|
||
</Tr>
|
||
</THead>
|
||
<TBody>
|
||
{chartValues.valueAxisDto.map((row, index) => (
|
||
<Tr key={index}>
|
||
<Td>
|
||
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Edit"
|
||
icon={<FaEdit />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index,
|
||
isOpen: 'axis',
|
||
operation: 'update',
|
||
axisValues: chartValues.valueAxisDto[index],
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Delete"
|
||
icon={<FaTrash />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setConfirmDelete({
|
||
isOpen: true,
|
||
id: values.id ?? '',
|
||
fieldName: 'axis',
|
||
index,
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</Td>
|
||
<Td>{row.valueType}</Td>
|
||
<Td>{row.position}</Td>
|
||
<Td>{row.type}</Td>
|
||
<Td>{row.name}</Td>
|
||
<Td>{row.title}</Td>
|
||
<Td>{row.visible}</Td>
|
||
</Tr>
|
||
))}
|
||
</TBody>
|
||
</Table>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="axis_argument">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.visible}
|
||
>
|
||
<Field name="argumentAxisDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Workdays Only"
|
||
invalid={
|
||
errors.argumentAxisDto?.workdaysOnly &&
|
||
touched.argumentAxisDto?.workdaysOnly
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.workdaysOnly}
|
||
>
|
||
<Field name="argumentAxisDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Title"
|
||
invalid={errors.argumentAxisDto?.title && touched.argumentAxisDto?.title}
|
||
errorMessage={errors.argumentAxisDto?.title}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.title" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Hover Mode"
|
||
invalid={
|
||
errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.hoverMode}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.hoverMode">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisHoverModeListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisHoverModeListOptions.filter(
|
||
(option) => option.value === values.argumentAxisDto.hoverMode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Argument Type"
|
||
invalid={
|
||
errors.argumentAxisDto?.argumentType &&
|
||
touched.argumentAxisDto?.argumentType
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.argumentType}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.argumentType">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisTypeListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisTypeListOptions.filter(
|
||
(option) => option.value === values.argumentAxisDto.argumentType,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Position"
|
||
invalid={
|
||
errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.position}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.position">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisPositionListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisPositionListOptions.filter(
|
||
(option) => option.value === values.argumentAxisDto.position,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.argumentAxisDto?.width && touched.argumentAxisDto?.width}
|
||
errorMessage={errors.argumentAxisDto?.width}
|
||
>
|
||
<Field type="number" name="argumentAxisDto.width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Aggregation Interval"
|
||
invalid={
|
||
errors.argumentAxisDto?.aggregationInterval &&
|
||
touched.argumentAxisDto?.aggregationInterval
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.aggregationInterval}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.aggregationInterval">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisIntervalListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisIntervalListOptions.filter(
|
||
(option) =>
|
||
option.value === values.argumentAxisDto.aggregationInterval,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Argument Axis - Grid">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.argumentAxisDto?.grid?.visible &&
|
||
touched.argumentAxisDto?.grid?.visible
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.grid?.visible}
|
||
>
|
||
<Field name="argumentAxisDto.grid.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.argumentAxisDto?.grid?.color &&
|
||
touched.argumentAxisDto?.grid?.color
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.grid?.color}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.grid.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.argumentAxisDto?.grid?.width &&
|
||
touched.argumentAxisDto?.grid?.width
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.grid?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="argumentAxisDto.grid.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Argument Axis - Label">
|
||
<FormItem
|
||
label="Position"
|
||
invalid={
|
||
errors.argumentAxisDto?.label?.displayMode &&
|
||
touched.argumentAxisDto?.label?.displayMode
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.label?.displayMode}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.label.displayMode">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisLabelDisplayModeListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisLabelDisplayModeListOptions.filter(
|
||
(option) =>
|
||
option.value === values.argumentAxisDto.label.displayMode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Rotation Angle"
|
||
invalid={
|
||
errors.argumentAxisDto?.label?.rotationAngle &&
|
||
touched.argumentAxisDto?.label?.rotationAngle
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="argumentAxisDto.label.rotationAngle"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Overlapping Behavior"
|
||
invalid={
|
||
errors.argumentAxisDto?.label?.overlappingBehavior &&
|
||
touched.argumentAxisDto?.label?.overlappingBehavior
|
||
}
|
||
errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
|
||
>
|
||
<Field type="text" name="argumentAxisDto.label.overlappingBehavior">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
|
||
(option) =>
|
||
option.value ===
|
||
values.argumentAxisDto.label.overlappingBehavior,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="axis_common">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.visible &&
|
||
touched.commonAxisSettingsDto?.visible
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.visible}
|
||
>
|
||
<Field name="commonAxisSettingsDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Title"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.title &&
|
||
touched.commonAxisSettingsDto?.title
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.title}
|
||
>
|
||
<Field type="text" name="title" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.width &&
|
||
touched.commonAxisSettingsDto?.width
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAxisSettingsDto.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Common Axis Settings - Grid">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.grid?.visible &&
|
||
touched.commonAxisSettingsDto?.grid?.visible
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
|
||
>
|
||
<Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.grid?.color &&
|
||
touched.commonAxisSettingsDto?.grid?.color
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.grid?.color}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="commonAxisSettingsDto.grid.color"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.commonAxisSettingsDto?.grid?.width &&
|
||
touched.commonAxisSettingsDto?.grid?.width
|
||
}
|
||
errorMessage={errors.commonAxisSettingsDto?.grid?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAxisSettingsDto.grid.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
</Tabs>
|
||
</TabContent>
|
||
|
||
<TabContent value="panes">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={
|
||
errors.commonPaneSettingsDto?.backgroundColor &&
|
||
touched.commonPaneSettingsDto?.backgroundColor
|
||
}
|
||
errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="commonPaneSettingsDto.backgroundColor"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
<Card className="my-2" bodyClass="p-0">
|
||
<Table compact>
|
||
<THead>
|
||
<Tr>
|
||
<Th>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Add"
|
||
icon={<FaFileMedical />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index: -1,
|
||
isOpen: 'pane',
|
||
operation: 'insert',
|
||
})
|
||
}}
|
||
/>
|
||
</Th>
|
||
<Th>Name</Th>
|
||
<Th>Background Color</Th>
|
||
<Th>Height</Th>
|
||
</Tr>
|
||
</THead>
|
||
<TBody>
|
||
{chartValues.panesDto.map((row, index) => (
|
||
<Tr key={index}>
|
||
<Td>
|
||
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Edit"
|
||
icon={<FaEdit />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index,
|
||
isOpen: 'pane',
|
||
operation: 'update',
|
||
panesValues: chartValues.panesDto[index],
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Delete"
|
||
icon={<FaTrash />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setConfirmDelete({
|
||
isOpen: true,
|
||
id: values.id ?? '',
|
||
fieldName: 'pane',
|
||
index,
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</Td>
|
||
<Td>{row.name}</Td>
|
||
<Td>{row.backgroundColor}</Td>
|
||
<Td>{row.height}</Td>
|
||
</Tr>
|
||
))}
|
||
</TBody>
|
||
</Table>
|
||
</Card>
|
||
</TabContent>
|
||
|
||
<TabContent value="animationsOptions">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Enabled"
|
||
invalid={errors.animationDto?.enabled && touched.animationDto?.enabled}
|
||
errorMessage={errors.animationDto?.enabled}
|
||
>
|
||
<Field name="animationDto.enabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Easing"
|
||
invalid={errors.animationDto?.easing && touched.animationDto?.easing}
|
||
errorMessage={errors.animationDto?.easing}
|
||
>
|
||
<Field type="text" name="animationDto.easing">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartEasingListOptions}
|
||
isClearable={true}
|
||
value={chartEasingListOptions.filter(
|
||
(option) => option.value === values.animationDto.easing,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Duration"
|
||
invalid={errors.animationDto?.duration && touched.animationDto?.duration}
|
||
errorMessage={errors.animationDto?.duration}
|
||
>
|
||
<Field type="number" name="animationDto.duration" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Max Point Count Supported"
|
||
invalid={
|
||
errors.animationDto?.maxPointCountSupported &&
|
||
touched.animationDto?.maxPointCountSupported
|
||
}
|
||
errorMessage={errors.animationDto?.maxPointCountSupported}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="animationDto.maxPointCountSupported"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
|
||
<TabContent value="crosshairOptions">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Enabled"
|
||
invalid={errors.crosshairDto?.enabled && touched.crosshairDto?.enabled}
|
||
errorMessage={errors.crosshairDto?.enabled}
|
||
>
|
||
<Field name="crosshairDto.enabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.crosshairDto?.color && touched.crosshairDto?.color}
|
||
errorMessage={errors.crosshairDto?.color}
|
||
>
|
||
<Field type="text" name="crosshairDto.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle}
|
||
errorMessage={errors.crosshairDto?.dashStyle}
|
||
>
|
||
<Field type="text" name="crosshairDto.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) => option.value === values.crosshairDto.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.crosshairDto?.width && touched.crosshairDto?.width}
|
||
errorMessage={errors.crosshairDto?.width}
|
||
>
|
||
<Field type="numner" name="crosshairDto.width" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Crosshair Options - Label">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.visible}
|
||
>
|
||
<Field name="crosshairDto.label.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={
|
||
errors.crosshairDto?.label?.backgroundColor &&
|
||
touched.crosshairDto?.label?.backgroundColor
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.backgroundColor}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.label.backgroundColor"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Format"
|
||
invalid={
|
||
errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.format}
|
||
>
|
||
<Field type="text" name="crosshairDto.label.format">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={tooltipFormatListOptions}
|
||
isClearable={true}
|
||
value={tooltipFormatListOptions.filter(
|
||
(option) => option.value === values.crosshairDto.label.format,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Customize Text"
|
||
invalid={
|
||
errors.crosshairDto?.label?.customizeText &&
|
||
touched.crosshairDto?.label?.customizeText
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.customizeText}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.label.customizeText"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Crosshair Options - Label - Font">
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.crosshairDto?.label?.font?.color &&
|
||
touched.crosshairDto?.label?.font?.color
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.font?.color}
|
||
>
|
||
<Field type="text" name="crosshairDto.label.font.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Family"
|
||
invalid={
|
||
errors.crosshairDto?.label?.font?.family &&
|
||
touched.crosshairDto?.label?.font?.family
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.font?.family}
|
||
>
|
||
<Field type="text" name="crosshairDto.label.font.family" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Size"
|
||
invalid={
|
||
errors.crosshairDto?.label?.font?.size &&
|
||
touched.crosshairDto?.label?.font?.size
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.font?.size}
|
||
>
|
||
<Field type="number" name="crosshairDto.label.font.size" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Weight"
|
||
invalid={
|
||
errors.crosshairDto?.label?.font?.weight &&
|
||
touched.crosshairDto?.label?.font?.weight
|
||
}
|
||
errorMessage={errors.crosshairDto?.label?.font?.weight}
|
||
>
|
||
<Field type="number" name="crosshairDto.label.font.size" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.visible &&
|
||
touched.crosshairDto?.horizontalLine?.visible
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.visible}
|
||
>
|
||
<Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.color &&
|
||
touched.crosshairDto?.horizontalLine?.color
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.color}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.horizontalLine.color"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.dashStyle &&
|
||
touched.crosshairDto?.horizontalLine?.dashStyle
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
|
||
>
|
||
<Field type="text" name="crosshairDto.horizontalLine.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) =>
|
||
option.value === values.crosshairDto.horizontalLine.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.width &&
|
||
touched.crosshairDto?.horizontalLine?.width
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.width}
|
||
>
|
||
<Field
|
||
type="numner"
|
||
name="crosshairDto.horizontalLine.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card
|
||
className="my-2"
|
||
header="Crosshair Options - Label - Horizontal Line - Font"
|
||
>
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.label?.font?.color &&
|
||
touched.crosshairDto?.horizontalLine?.label?.font?.color
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.color}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.horizontalLine.label.font.color"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Family"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.label?.font?.family &&
|
||
touched.crosshairDto?.horizontalLine?.label?.font?.family
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.family}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.horizontalLine.label.font.family"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Size"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.label?.font?.size &&
|
||
touched.crosshairDto?.horizontalLine?.label?.font?.size
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.size}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="crosshairDto.horizontalLine.label.font.size"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Weight"
|
||
invalid={
|
||
errors.crosshairDto?.horizontalLine?.label?.font?.weight &&
|
||
touched.crosshairDto?.horizontalLine?.label?.font?.weight
|
||
}
|
||
errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.weight}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="crosshairDto.horizontalLine.label.font.weight"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Crosshair Options - Label - Vertical Line">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.visible &&
|
||
touched.crosshairDto?.verticalLine?.visible
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.visible}
|
||
>
|
||
<Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.color &&
|
||
touched.crosshairDto?.verticalLine?.color
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.color}
|
||
>
|
||
<Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.dashStyle &&
|
||
touched.crosshairDto?.verticalLine?.dashStyle
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
|
||
>
|
||
<Field type="text" name="crosshairDto.verticalLine.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) =>
|
||
option.value === values.crosshairDto.verticalLine.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.width &&
|
||
touched.crosshairDto?.verticalLine?.width
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.width}
|
||
>
|
||
<Field
|
||
type="numner"
|
||
name="crosshairDto.verticalLine.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card
|
||
className="my-2"
|
||
header="Crosshair Options - Label - Horizontal Line - Font"
|
||
>
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.label?.font?.color &&
|
||
touched.crosshairDto?.verticalLine?.label?.font?.color
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.color}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.verticalLine.label.font.color"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Family"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.label?.font?.family &&
|
||
touched.crosshairDto?.verticalLine?.label?.font?.family
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.family}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="crosshairDto.verticalLine.label.font.family"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Size"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.label?.font?.size &&
|
||
touched.crosshairDto?.verticalLine?.label?.font?.size
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.size}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="crosshairDto.verticalLine.label.font.size"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Weight"
|
||
invalid={
|
||
errors.crosshairDto?.verticalLine?.label?.font?.weight &&
|
||
touched.crosshairDto?.verticalLine?.label?.font?.weight
|
||
}
|
||
errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.weight}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="crosshairDto.verticalLine.label.font.weight"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
|
||
<TabContent value="exportSettings">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Enabled"
|
||
invalid={errors.exportDto?.enabled && touched.exportDto?.enabled}
|
||
errorMessage={errors.exportDto?.enabled}
|
||
>
|
||
<Field name="exportDto.enabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Printing Enabled"
|
||
invalid={
|
||
errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled
|
||
}
|
||
errorMessage={errors.exportDto?.printingEnabled}
|
||
>
|
||
<Field name="exportDto.printingEnabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={
|
||
errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor
|
||
}
|
||
errorMessage={errors.exportDto?.backgroundColor}
|
||
>
|
||
<Field type="text" name="exportDto.backgroundColor" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Margin"
|
||
invalid={errors.exportDto?.margin && touched.exportDto?.margin}
|
||
errorMessage={errors.exportDto?.margin}
|
||
>
|
||
<Field type="number" name="exportDto.margin" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
|
||
<TabContent value="legendSettings">
|
||
<Tabs defaultValue="legendSettings_general">
|
||
<TabList>
|
||
<TabNav value="legendSettings_general">General</TabNav>
|
||
<TabNav value="legendSettings_border">Border</TabNav>
|
||
</TabList>
|
||
<TabContent value="legendSettings_general">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.legendDto?.visible && touched.legendDto?.visible}
|
||
errorMessage={errors.legendDto?.visible}
|
||
>
|
||
<Field name="legendDto.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={
|
||
errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor
|
||
}
|
||
errorMessage={errors.legendDto?.backgroundColor}
|
||
>
|
||
<Field name="legendDto.backgroundColor" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Title"
|
||
invalid={errors.legendDto?.title && touched.legendDto?.title}
|
||
errorMessage={errors.legendDto?.title}
|
||
>
|
||
<Field name="legendDto.title" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Orientation"
|
||
invalid={errors.legendDto?.orientation && touched.legendDto?.orientation}
|
||
errorMessage={errors.legendDto?.orientation}
|
||
>
|
||
<Field type="text" name="legendDto.orientation">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartLegendOrientationListOptions}
|
||
isClearable={true}
|
||
value={chartLegendOrientationListOptions.filter(
|
||
(option) => option.value === values.legendDto.orientation,
|
||
)}
|
||
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>
|
||
|
||
<FormItem
|
||
label="Row Count"
|
||
invalid={errors.legendDto?.rowCount && touched.legendDto?.rowCount}
|
||
errorMessage={errors.legendDto?.rowCount}
|
||
>
|
||
<Field type="number" name="legendDto.rowCount" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Column Count"
|
||
invalid={errors.legendDto?.columnCount && touched.legendDto?.columnCount}
|
||
errorMessage={errors.legendDto?.columnCount}
|
||
>
|
||
<Field type="number" name="legendDto.columnCount" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="legendSettings_border">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.legendDto?.border?.visible && touched.legendDto?.border?.visible
|
||
}
|
||
errorMessage={errors.legendDto?.border?.visible}
|
||
>
|
||
<Field name="legendDto.border.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.legendDto?.border?.color && touched.legendDto?.border?.color
|
||
}
|
||
errorMessage={errors.legendDto?.border?.color}
|
||
>
|
||
<Field name="legendDto.border.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={
|
||
errors.legendDto?.border?.dashStyle &&
|
||
touched.legendDto?.border?.dashStyle
|
||
}
|
||
errorMessage={errors.legendDto?.border?.dashStyle}
|
||
>
|
||
<Field type="text" name="legendDto.border.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) => option.value === values.legendDto.border.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.legendDto?.border?.width && touched.legendDto?.border?.width
|
||
}
|
||
errorMessage={errors.legendDto?.border?.width}
|
||
>
|
||
<Field type="number" name="legendDto.border.width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Corner Radius"
|
||
invalid={
|
||
errors.legendDto?.border?.cornerRadius &&
|
||
touched.legendDto?.border?.cornerRadius
|
||
}
|
||
errorMessage={errors.legendDto?.border?.cornerRadius}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="legendDto.border.cornerRadius"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
</Tabs>
|
||
</TabContent>
|
||
|
||
<TabContent value="zoomAndPanSettings">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Allow Mouse Wheel"
|
||
invalid={
|
||
errors.zoomAndPanDto?.allowMouseWheel &&
|
||
touched.zoomAndPanDto?.allowMouseWheel
|
||
}
|
||
errorMessage={errors.zoomAndPanDto?.allowMouseWheel}
|
||
>
|
||
<Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Allow Touch Gestures"
|
||
invalid={
|
||
errors.zoomAndPanDto?.allowTouchGestures &&
|
||
touched.zoomAndPanDto?.allowTouchGestures
|
||
}
|
||
errorMessage={errors.zoomAndPanDto?.allowTouchGestures}
|
||
>
|
||
<Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Drag To Zoom"
|
||
invalid={
|
||
errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom
|
||
}
|
||
errorMessage={errors.zoomAndPanDto?.dragToZoom}
|
||
>
|
||
<Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<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
|
||
label="Value Axis"
|
||
invalid={errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis}
|
||
errorMessage={errors.zoomAndPanDto?.valueAxis}
|
||
>
|
||
<Field type="text" name="zoomAndPanDto.valueAxis">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartZoomAndPanAxisOptions}
|
||
isClearable={true}
|
||
value={chartZoomAndPanAxisOptions.filter(
|
||
(option) => option.value === values.zoomAndPanDto.valueAxis,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Pan Key"
|
||
invalid={errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey}
|
||
errorMessage={errors.zoomAndPanDto?.panKey}
|
||
>
|
||
<Field type="text" name="zoomAndPanDto.panKey">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartZoomAndPanKeyOptions}
|
||
isClearable={true}
|
||
value={chartZoomAndPanKeyOptions.filter(
|
||
(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
|
||
label="Color"
|
||
invalid={
|
||
errors.zoomAndPanDto?.dragBoxStyle?.color &&
|
||
touched.zoomAndPanDto?.dragBoxStyle?.color
|
||
}
|
||
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
|
||
>
|
||
<Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Opacity"
|
||
invalid={
|
||
errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
|
||
touched.zoomAndPanDto?.dragBoxStyle?.opacity
|
||
}
|
||
errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="zoomAndPanDto.dragBoxStyle.opacity"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
|
||
<TabContent value="annotations">
|
||
<Tabs defaultValue="annotations_general">
|
||
<TabList>
|
||
<TabNav value="annotations_general">General</TabNav>
|
||
<TabNav value="annotations_common">Common Pane</TabNav>
|
||
</TabList>
|
||
<TabContent value="annotations_general">
|
||
<Card className="my-2" bodyClass="p-0">
|
||
<Table compact>
|
||
<THead>
|
||
<Tr>
|
||
<Th>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Add"
|
||
icon={<FaFileMedical />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index: -1,
|
||
isOpen: 'annotation',
|
||
operation: 'insert',
|
||
})
|
||
}}
|
||
/>
|
||
</Th>
|
||
<Th>Type</Th>
|
||
<Th>Name</Th>
|
||
<Th>Text</Th>
|
||
<Th>Series</Th>
|
||
<Th>Value</Th>
|
||
<Th>Width</Th>
|
||
</Tr>
|
||
</THead>
|
||
<TBody>
|
||
{chartValues.annotationsDto.map((row, index) => (
|
||
<Tr key={index}>
|
||
<Td>
|
||
<div className="flex-wrap inline-flex xl:flex items-center gap-2">
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Edit"
|
||
icon={<FaEdit />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setDatabaseOperationsModalData({
|
||
id: values.id ?? '',
|
||
index,
|
||
isOpen: 'annotation',
|
||
operation: 'update',
|
||
annotationsValues: chartValues.annotationsDto[index],
|
||
})
|
||
}}
|
||
/>
|
||
<Button
|
||
shape="circle"
|
||
variant="plain"
|
||
type="button"
|
||
size="xs"
|
||
title="Delete"
|
||
icon={<FaTrash />}
|
||
onClick={async (e) => {
|
||
e.preventDefault()
|
||
setConfirmDelete({
|
||
isOpen: true,
|
||
id: values.id ?? '',
|
||
fieldName: 'annotation',
|
||
index,
|
||
})
|
||
}}
|
||
/>
|
||
</div>
|
||
</Td>
|
||
<Td>{row.type}</Td>
|
||
<Td>{row.name}</Td>
|
||
<Td>{row.text}</Td>
|
||
<Td>{row.series}</Td>
|
||
<Td>{row.value}</Td>
|
||
<Td>{row.width}</Td>
|
||
</Tr>
|
||
))}
|
||
</TBody>
|
||
</Table>
|
||
</Card>
|
||
</TabContent>
|
||
<TabContent value="annotations_common">
|
||
<Card className="my-2">
|
||
<FormItem
|
||
label="Tooltip Enabled"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.tooltipEnabled &&
|
||
touched.commonAnnotationSettingsDto?.tooltipEnabled
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
|
||
>
|
||
<Field
|
||
name="commonAnnotationSettingsDto.tooltipEnabled"
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Pan Key"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.type &&
|
||
touched.commonAnnotationSettingsDto?.type
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.type}
|
||
>
|
||
<Field type="text" name="commonAnnotationSettingsDto.type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartAnnotationTypeListOptions}
|
||
isClearable={true}
|
||
value={chartAnnotationTypeListOptions.filter(
|
||
(option) =>
|
||
option.value === values.commonAnnotationSettingsDto.type,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Pan Key"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.series &&
|
||
touched.commonAnnotationSettingsDto?.series
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.series}
|
||
>
|
||
<Field type="text" name="commonAnnotationSettingsDto.series">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={SeriesList()}
|
||
isClearable={true}
|
||
value={SeriesList()?.find(
|
||
(option) =>
|
||
option.value === values.commonAnnotationSettingsDto.series,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Argument"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.argument &&
|
||
touched.commonAnnotationSettingsDto?.argument
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.argument}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.argument" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.color &&
|
||
touched.commonAnnotationSettingsDto?.color
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.color}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Value"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.value &&
|
||
touched.commonAnnotationSettingsDto?.value
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.value}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.value" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Description"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.description &&
|
||
touched.commonAnnotationSettingsDto?.description
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.description}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.description" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Image"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.image &&
|
||
touched.commonAnnotationSettingsDto?.image
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.image}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.image" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Text"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.text &&
|
||
touched.commonAnnotationSettingsDto?.text
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.text}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.text" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Word Wrap"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.wordWrap &&
|
||
touched.commonAnnotationSettingsDto?.wordWrap
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
|
||
>
|
||
<Field type="text" name="commonAnnotationSettingsDto.wordWrap">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartWordWrapListOptions}
|
||
isClearable={true}
|
||
value={chartWordWrapListOptions.filter(
|
||
(option) =>
|
||
option.value === values.commonAnnotationSettingsDto.wordWrap,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.width &&
|
||
touched.commonAnnotationSettingsDto?.width
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Height"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.height &&
|
||
touched.commonAnnotationSettingsDto?.height
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.height}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.height"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="X"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.x &&
|
||
touched.commonAnnotationSettingsDto?.x
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.x}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.x"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Y"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.y &&
|
||
touched.commonAnnotationSettingsDto?.y
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.y}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.y"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Offset X"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.offsetX &&
|
||
touched.commonAnnotationSettingsDto?.offsetX
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.offsetX"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Offset Y"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.offsetY &&
|
||
touched.commonAnnotationSettingsDto?.offsetY
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.offsetY"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Padding Left/Right"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.paddingLeftRight &&
|
||
touched.commonAnnotationSettingsDto?.paddingLeftRight
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.paddingLeftRight"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Padding Top/Bottom"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.paddingTopBottom &&
|
||
touched.commonAnnotationSettingsDto?.paddingTopBottom
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.paddingTopBottom"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Common Annotations - Border">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.border?.visible &&
|
||
touched.commonAnnotationSettingsDto?.border?.visible
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
|
||
>
|
||
<Field
|
||
name="commonAnnotationSettingsDto.border.visible"
|
||
component={Checkbox}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.border?.color &&
|
||
touched.commonAnnotationSettingsDto?.border?.color
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
|
||
>
|
||
<Field
|
||
type="text"
|
||
name="commonAnnotationSettingsDto.border.color"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.border?.dashStyle &&
|
||
touched.commonAnnotationSettingsDto?.border?.dashStyle
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
|
||
>
|
||
<Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) =>
|
||
option.value ===
|
||
values.commonAnnotationSettingsDto.border.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Corner Radius"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
|
||
touched.commonAnnotationSettingsDto?.border?.cornerRadius
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.border.cornerRadius"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.border?.width &&
|
||
touched.commonAnnotationSettingsDto?.border?.width
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.border.width"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
|
||
<Card className="my-2" header="Common Annotations - Font">
|
||
<FormItem
|
||
label="Color"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.font?.color &&
|
||
touched.commonAnnotationSettingsDto?.font?.color
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.font.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Family"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.font?.family &&
|
||
touched.commonAnnotationSettingsDto?.font?.family
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
|
||
>
|
||
<Field name="commonAnnotationSettingsDto.font.family" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Size"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.font?.size &&
|
||
touched.commonAnnotationSettingsDto?.font?.size
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.font.size"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Weight"
|
||
invalid={
|
||
errors.commonAnnotationSettingsDto?.font?.weight &&
|
||
touched.commonAnnotationSettingsDto?.font?.weight
|
||
}
|
||
errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
|
||
>
|
||
<Field
|
||
type="number"
|
||
name="commonAnnotationSettingsDto.font.weight"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
</Card>
|
||
</TabContent>
|
||
</Tabs>
|
||
</TabContent>
|
||
</Tabs>
|
||
|
||
<div className="mt-4">
|
||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||
</Button>
|
||
</div>
|
||
</FormContainer>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
|
||
<Dialog
|
||
id="paneOperation"
|
||
contentClassName="pb-2 px-2"
|
||
isOpen={databaseOperationsModalData.isOpen == 'pane'}
|
||
onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
>
|
||
<h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>
|
||
|
||
<Formik
|
||
initialValues={
|
||
databaseOperationsModalData.panesValues ?? {
|
||
id: '',
|
||
backgroundColor: '',
|
||
height: 250,
|
||
name: '',
|
||
}
|
||
}
|
||
validationSchema={chartPanesValidationSchema}
|
||
onSubmit={async (values, { setSubmitting }) => {
|
||
setSubmitting(true)
|
||
await putChartJsonItem({
|
||
id: chartValues.id,
|
||
chartCode: chartValues.chartCode,
|
||
index: databaseOperationsModalData.index,
|
||
fieldName: 'pane',
|
||
itemPane: { ...values },
|
||
})
|
||
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{databaseOperationsModalData.index === -1
|
||
? 'Kayıt eklendi.'
|
||
: 'Kayıt Değiştirildi.'}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
getChartValues()
|
||
setSubmitting(false)
|
||
setDatabaseOperationsModalData(defaultDatabaseOperation)
|
||
}}
|
||
>
|
||
{({ touched, errors, resetForm, isSubmitting, values }) => (
|
||
<Form>
|
||
<FormContainer>
|
||
<div className="max-h-96 overflow-y-auto p-2">
|
||
<FormItem
|
||
label="Name"
|
||
invalid={errors.name && touched.name}
|
||
errorMessage={errors.name}
|
||
>
|
||
<Field type="text" name="name" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={errors.backgroundColor && touched.backgroundColor}
|
||
errorMessage={errors.backgroundColor}
|
||
>
|
||
<Field type="text" name="backgroundColor" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Height"
|
||
invalid={errors.height && touched.height}
|
||
errorMessage={errors.height}
|
||
>
|
||
<Field type="number" name="height" component={Input} />
|
||
</FormItem>
|
||
</div>
|
||
<div className="text-right mt-4">
|
||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||
</Button>
|
||
</div>
|
||
</FormContainer>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
id="seriesOperation"
|
||
width={900}
|
||
contentClassName="pb-2 px-2"
|
||
isOpen={databaseOperationsModalData.isOpen == 'serie'}
|
||
onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
>
|
||
<h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>
|
||
|
||
<Formik
|
||
initialValues={
|
||
databaseOperationsModalData.seriesValues ?? {
|
||
id: '',
|
||
argumentField: '',
|
||
axis: '',
|
||
barOverlapGroup: '',
|
||
barPadding: 0,
|
||
barWidth: 0,
|
||
color: '',
|
||
cornerRadius: 0,
|
||
dashStyle: 'solid',
|
||
ignoreEmptyPoints: false,
|
||
name: '',
|
||
pane: '',
|
||
rangeValue1Field: '',
|
||
rangeValue2Field: '',
|
||
selectionMode: 'none',
|
||
showInLegend: true,
|
||
type: 'line',
|
||
valueField: '',
|
||
visible: true,
|
||
width: 2,
|
||
label: {
|
||
visible: false,
|
||
backgroundColor: '#f05b41',
|
||
customizeText: '',
|
||
format: '',
|
||
font: null,
|
||
},
|
||
}
|
||
}
|
||
validationSchema={chartSeriesValidationSchema}
|
||
onSubmit={async (values, { resetForm, setSubmitting }) => {
|
||
setSubmitting(true)
|
||
await putChartJsonItem({
|
||
chartCode: chartValues.chartCode,
|
||
id: chartValues.id,
|
||
index: databaseOperationsModalData.index,
|
||
fieldName: 'serie',
|
||
itemSerie: { ...values },
|
||
})
|
||
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{databaseOperationsModalData.index === -1
|
||
? 'Kayıt eklendi.'
|
||
: 'Kayıt Değiştirildi.'}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
getChartValues()
|
||
setSubmitting(false)
|
||
setDatabaseOperationsModalData(defaultDatabaseOperation)
|
||
}}
|
||
>
|
||
{({ touched, errors, resetForm, isSubmitting, values }) => (
|
||
<Form>
|
||
<FormContainer>
|
||
<div className="max-h-96 overflow-y-auto p-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.visible && touched.visible}
|
||
errorMessage={errors.visible}
|
||
>
|
||
<Field name="visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Show In Legend"
|
||
invalid={errors.showInLegend && touched.showInLegend}
|
||
errorMessage={errors.showInLegend}
|
||
>
|
||
<Field name="showInLegend" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Ignore Empty Points"
|
||
invalid={errors.ignoreEmptyPoints && touched.ignoreEmptyPoints}
|
||
errorMessage={errors.ignoreEmptyPoints}
|
||
>
|
||
<Field name="ignoreEmptyPoints" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={errors.type && touched.type}
|
||
errorMessage={errors.type}
|
||
>
|
||
<Field type="text" name="type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesTypeOptions}
|
||
isClearable={true}
|
||
value={chartSeriesTypeOptions.filter(
|
||
(option) => option.value === values.type,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Name"
|
||
invalid={errors.name && touched.name}
|
||
errorMessage={errors.name}
|
||
>
|
||
<Field type="text" name="name" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Argument Field"
|
||
invalid={errors.argumentField && touched.argumentField}
|
||
errorMessage={errors.argumentField}
|
||
>
|
||
<Field type="text" name="argumentField" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Value Field"
|
||
invalid={errors.valueField && touched.valueField}
|
||
errorMessage={errors.valueField}
|
||
>
|
||
<Field type="text" name="valueField" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Axis"
|
||
invalid={errors.axis && touched.axis}
|
||
errorMessage={errors.axis}
|
||
>
|
||
<Field type="text" name="axis">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={valueAxisList()}
|
||
isClearable={true}
|
||
value={valueAxisList()?.find((option) => option.value === values.axis)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Pane"
|
||
invalid={errors.pane && touched.pane}
|
||
errorMessage={errors.pane}
|
||
>
|
||
<Field type="text" name="pane">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={valuePaneList()}
|
||
isClearable={true}
|
||
value={valuePaneList()?.find((option) => option.value === values.pane)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={errors.dashStyle && touched.dashStyle}
|
||
errorMessage={errors.dashStyle}
|
||
>
|
||
<Field type="text" name="dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) => option.value === values.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.color && touched.color}
|
||
errorMessage={errors.color}
|
||
>
|
||
<Field type="text" name="color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Selection Mode"
|
||
invalid={errors.selectionMode && touched.selectionMode}
|
||
errorMessage={errors.selectionMode}
|
||
>
|
||
<Field type="text" name="selectionMode">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesSelectionModeOptions}
|
||
isClearable={true}
|
||
value={chartSeriesSelectionModeOptions.filter(
|
||
(option) => option.value === values.selectionMode,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.width && touched.width}
|
||
errorMessage={errors.width}
|
||
>
|
||
<Field type="number" name="width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Corner Radius"
|
||
invalid={errors.cornerRadius && touched.cornerRadius}
|
||
errorMessage={errors.cornerRadius}
|
||
>
|
||
<Field type="number" name="cornerRadius" component={Input} />
|
||
</FormItem>
|
||
|
||
<Card className="my-2" header="Label">
|
||
<FormItem label="Label Visible">
|
||
<Field name="label.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Background Color"
|
||
invalid={errors.label?.backgroundColor && touched.label?.backgroundColor}
|
||
errorMessage={errors.label?.backgroundColor}
|
||
>
|
||
<Field type="text" name="label.backgroundColor" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Format"
|
||
invalid={errors.label?.format && touched.label?.format}
|
||
errorMessage={errors.label?.format}
|
||
>
|
||
<Field type="text" name="label.format">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={tooltipFormatListOptions}
|
||
isClearable={true}
|
||
value={tooltipFormatListOptions.filter(
|
||
(option) => option.value === values.label.format,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Customize Text"
|
||
invalid={errors.label?.customizeText && touched.label?.customizeText}
|
||
errorMessage={errors.label?.customizeText}
|
||
>
|
||
<Field type="text" name="label.customizeText" component={Input} />
|
||
</FormItem>
|
||
</Card>
|
||
</div>
|
||
<div className="text-right mt-4">
|
||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||
</Button>
|
||
</div>
|
||
</FormContainer>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
id="axisOperation"
|
||
width={900}
|
||
contentClassName="pb-2 px-2"
|
||
isOpen={databaseOperationsModalData.isOpen == 'axis'}
|
||
onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
>
|
||
<h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>
|
||
|
||
<Formik
|
||
initialValues={
|
||
databaseOperationsModalData.axisValues ?? {
|
||
grid: {
|
||
color: '#d3d3d3',
|
||
visible: false,
|
||
width: 1,
|
||
},
|
||
name: '',
|
||
position: '',
|
||
title: '',
|
||
valueType: '',
|
||
visible: false,
|
||
width: 0,
|
||
breaks: [
|
||
{
|
||
startValue: 0,
|
||
endValue: 0,
|
||
},
|
||
],
|
||
breakStyle: {
|
||
color: '#ababab',
|
||
line: 'waved',
|
||
width: 5,
|
||
},
|
||
type: '',
|
||
autoBreaksEnabled: false,
|
||
maxAutoBreakCount: 0,
|
||
}
|
||
}
|
||
validationSchema={chartAxisValidationSchema}
|
||
onSubmit={async (values, { setSubmitting }) => {
|
||
setSubmitting(true)
|
||
await putChartJsonItem({
|
||
chartCode: chartValues.chartCode,
|
||
id: chartValues.id,
|
||
index: databaseOperationsModalData.index,
|
||
fieldName: 'axis',
|
||
itemAxis: { ...values },
|
||
})
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{databaseOperationsModalData.index === -1
|
||
? 'Kayıt eklendi.'
|
||
: 'Kayıt Değiştirildi.'}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
getChartValues()
|
||
setSubmitting(false)
|
||
setDatabaseOperationsModalData(defaultDatabaseOperation)
|
||
}}
|
||
>
|
||
{({ touched, errors, resetForm, isSubmitting, values }) => {
|
||
const breaks = values.breaks
|
||
|
||
return (
|
||
<Form>
|
||
<FormContainer>
|
||
<div className="max-h-96 overflow-y-auto p-2">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.visible && touched.visible}
|
||
errorMessage={errors.visible}
|
||
>
|
||
<Field name="visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Value Type"
|
||
invalid={errors.valueType && touched.valueType}
|
||
errorMessage={errors.valueType}
|
||
>
|
||
<Field type="text" name="valueType">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisTypeListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisTypeListOptions.filter(
|
||
(option) => option.value === values.valueType,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={errors.type && touched.type}
|
||
errorMessage={errors.type}
|
||
>
|
||
<Field type="text" name="type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisTypeListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisTypeListOptions.filter(
|
||
(option) => option.value === values.type,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Position"
|
||
invalid={errors.position && touched.position}
|
||
errorMessage={errors.position}
|
||
>
|
||
<Field type="text" name="position">
|
||
{({ field, form }: FieldProps<IdentityRoleDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartArgumentAxisPositionListOptions}
|
||
isClearable={true}
|
||
value={chartArgumentAxisPositionListOptions.filter(
|
||
(option) => option.value === values.position,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Name"
|
||
invalid={errors.name && touched.name}
|
||
errorMessage={errors.name}
|
||
>
|
||
<Field type="text" name="name" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Title"
|
||
invalid={errors.title && touched.title}
|
||
errorMessage={errors.title}
|
||
>
|
||
<Field type="text" name="title" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.width && touched.width}
|
||
errorMessage={errors.width}
|
||
>
|
||
<Field type="number" name="width" component={Input} />
|
||
</FormItem>
|
||
|
||
<Tabs defaultValue="grid" variant="pill">
|
||
<TabList>
|
||
<TabNav value="grid">Grid</TabNav>
|
||
<TabNav value="breakStyle">Break Style</TabNav>
|
||
<TabNav value="breaks">Breaks</TabNav>
|
||
</TabList>
|
||
<div className="pt-4">
|
||
<TabContent value="grid">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.grid?.visible && touched.grid?.visible}
|
||
errorMessage={errors.grid?.visible}
|
||
>
|
||
<Field name="grid.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.grid?.color && touched.grid?.color}
|
||
errorMessage={errors.grid?.color}
|
||
>
|
||
<Field type="text" name="grid.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.grid?.width && touched.grid?.width}
|
||
errorMessage={errors.grid?.width}
|
||
>
|
||
<Field type="number" name="grid.width" component={Input} />
|
||
</FormItem>
|
||
</TabContent>
|
||
<TabContent value="breakStyle">
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.breakStyle?.color && touched.breakStyle?.color}
|
||
errorMessage={errors.breakStyle?.color}
|
||
>
|
||
<Field type="text" name="breakStyle.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.breakStyle?.width && touched.breakStyle?.width}
|
||
errorMessage={errors.breakStyle?.width}
|
||
>
|
||
<Field type="number" name="breakStyle.width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Line"
|
||
invalid={errors.breakStyle?.line && touched.breakStyle?.line}
|
||
errorMessage={errors.breakStyle?.line}
|
||
>
|
||
<Field type="text" name="breakStyle.line">
|
||
{({ field, form }: FieldProps<IdentityRoleDto>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartBreakStyleLineListOptions}
|
||
isClearable={true}
|
||
value={chartBreakStyleLineListOptions.filter(
|
||
(option) => option.value === values.breakStyle.line,
|
||
)}
|
||
onChange={(option) =>
|
||
form.setFieldValue(field.name, option?.value)
|
||
}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
</TabContent>
|
||
<TabContent value="breaks">
|
||
<FieldArray name="breaks">
|
||
{({ form, remove, push }) => (
|
||
<div>
|
||
{breaks && breaks.length > 0
|
||
? breaks.map((_, index) => {
|
||
const startValueFeedBack = fieldFeedback(
|
||
form,
|
||
`breaks[${index}].startValue`,
|
||
)
|
||
const endValueFeedBack = fieldFeedback(
|
||
form,
|
||
`breaks[${index}].endValue`,
|
||
)
|
||
|
||
return (
|
||
<div key={index}>
|
||
<FormItem
|
||
layout="inline"
|
||
label="Start Value"
|
||
invalid={startValueFeedBack.invalid}
|
||
errorMessage={startValueFeedBack.errorMessage}
|
||
>
|
||
<Field
|
||
invalid={startValueFeedBack.invalid}
|
||
name={`breaks[${index}].startValue`}
|
||
type="number"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
layout="inline"
|
||
label="End Value"
|
||
invalid={endValueFeedBack.invalid}
|
||
errorMessage={endValueFeedBack.errorMessage}
|
||
>
|
||
<Field
|
||
invalid={endValueFeedBack.invalid}
|
||
name={`breaks[${index}].endValue`}
|
||
type="number"
|
||
component={Input}
|
||
/>
|
||
</FormItem>
|
||
|
||
<Button
|
||
shape="circle"
|
||
type="button"
|
||
size="sm"
|
||
icon={<FaMinus />}
|
||
onClick={() => remove(index)}
|
||
/>
|
||
</div>
|
||
)
|
||
})
|
||
: null}
|
||
<div>
|
||
<Button
|
||
type="button"
|
||
className="ltr:mr-2 rtl:ml-2"
|
||
onClick={() => {
|
||
push({
|
||
startValue: 0,
|
||
endValue: 0,
|
||
})
|
||
}}
|
||
>
|
||
Add Break
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FieldArray>
|
||
</TabContent>
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
<div className="text-right mt-4">
|
||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||
</Button>
|
||
</div>
|
||
</FormContainer>
|
||
</Form>
|
||
)
|
||
}}
|
||
</Formik>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
id="annotationOperation"
|
||
width={900}
|
||
contentClassName="pb-2 px-2"
|
||
isOpen={databaseOperationsModalData.isOpen == 'annotation'}
|
||
onClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
onRequestClose={() => setDatabaseOperationsModalData(defaultDatabaseOperation)}
|
||
>
|
||
<h5 className="mb-4">{databaseOperationsModalData.index === -1 ? 'Add' : 'Update'}</h5>
|
||
|
||
<Formik
|
||
initialValues={
|
||
databaseOperationsModalData.annotationsValues ?? {
|
||
argument: '',
|
||
border: {
|
||
color: '#d3d3d3',
|
||
cornerRadius: 0,
|
||
dashStyle: 'solid',
|
||
visible: false,
|
||
width: 1,
|
||
},
|
||
color: '',
|
||
description: '',
|
||
font: {
|
||
color: '#FFFFFF',
|
||
family: '"Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif',
|
||
size: 12,
|
||
weight: 400,
|
||
},
|
||
height: 0,
|
||
image: '',
|
||
name: '',
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
paddingLeftRight: 0,
|
||
paddingTopBottom: 0,
|
||
series: '',
|
||
text: '',
|
||
tooltipEnabled: false,
|
||
type: '',
|
||
value: '',
|
||
width: 0,
|
||
wordWrap: '',
|
||
x: 0,
|
||
y: 0,
|
||
}
|
||
}
|
||
validationSchema={chartAnnotationsValidationSchema}
|
||
onSubmit={async (values, { resetForm, setSubmitting }) => {
|
||
setSubmitting(true)
|
||
await putChartJsonItem({
|
||
chartCode: chartValues.chartCode,
|
||
id: chartValues.id,
|
||
index: databaseOperationsModalData.index,
|
||
fieldName: 'annotation',
|
||
itemAnnotation: { ...values },
|
||
})
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{databaseOperationsModalData.index === -1
|
||
? 'Kayıt eklendi.'
|
||
: 'Kayıt Değiştirildi.'}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
getChartValues()
|
||
setSubmitting(false)
|
||
setDatabaseOperationsModalData(defaultDatabaseOperation)
|
||
}}
|
||
>
|
||
{({ touched, errors, resetForm, isSubmitting, values }) => (
|
||
<Form>
|
||
<FormContainer>
|
||
<div className="max-h-96 overflow-y-auto p-2">
|
||
<Tabs defaultValue="annotations_general">
|
||
<TabList>
|
||
<TabNav value="annotations_general">General</TabNav>
|
||
<TabNav value="annotations_border">Border</TabNav>
|
||
</TabList>
|
||
<TabContent value="annotations_general">
|
||
<FormItem
|
||
label="Tooltip Enabled"
|
||
invalid={errors.tooltipEnabled && touched.tooltipEnabled}
|
||
errorMessage={errors.tooltipEnabled}
|
||
>
|
||
<Field name="tooltipEnabled" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Type"
|
||
invalid={errors.type && touched.type}
|
||
errorMessage={errors.type}
|
||
>
|
||
<Field type="text" name="type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartAnnotationTypeListOptions}
|
||
isClearable={true}
|
||
value={chartAnnotationTypeListOptions.filter(
|
||
(option) => option.value === values.type,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Series"
|
||
invalid={errors.series && touched.series}
|
||
errorMessage={errors.series}
|
||
>
|
||
<Field type="text" name="type">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={SeriesList()}
|
||
isClearable={true}
|
||
value={SeriesList()?.find((option) => option.value === values.series)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Name"
|
||
invalid={errors.name && touched.name}
|
||
errorMessage={errors.name}
|
||
>
|
||
<Field type="text" name="name" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Text"
|
||
invalid={errors.text && touched.text}
|
||
errorMessage={errors.text}
|
||
>
|
||
<Field type="text" name="text" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Value"
|
||
invalid={errors.value && touched.value}
|
||
errorMessage={errors.value}
|
||
>
|
||
<Field type="text" name="value" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Argument"
|
||
invalid={errors.argument && touched.argument}
|
||
errorMessage={errors.argument}
|
||
>
|
||
<Field name="argument" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.color && touched.color}
|
||
errorMessage={errors.color}
|
||
>
|
||
<Field type="text" name="color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Word Wrap"
|
||
invalid={errors.wordWrap && touched.wordWrap}
|
||
errorMessage={errors.wordWrap}
|
||
>
|
||
<Field type="text" name="wordWrap">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartTitleWordWrapListOptions}
|
||
isClearable={true}
|
||
value={chartTitleWordWrapListOptions.filter(
|
||
(option) => option.value === values.wordWrap,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Description"
|
||
invalid={errors.description && touched.description}
|
||
errorMessage={errors.description}
|
||
>
|
||
<Field type="text" name="description" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Image"
|
||
invalid={errors.image && touched.image}
|
||
errorMessage={errors.image}
|
||
>
|
||
<Field type="text" name="image" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.width && touched.width}
|
||
errorMessage={errors.width}
|
||
>
|
||
<Field type="number" name="width" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Height"
|
||
invalid={errors.height && touched.height}
|
||
errorMessage={errors.height}
|
||
>
|
||
<Field type="number" name="height" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Padding Left/Right"
|
||
invalid={errors.paddingLeftRight && touched.paddingLeftRight}
|
||
errorMessage={errors.paddingLeftRight}
|
||
>
|
||
<Field type="number" name="paddingLeftRight" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Padding Top/Bottom"
|
||
invalid={errors.paddingTopBottom && touched.paddingTopBottom}
|
||
errorMessage={errors.paddingTopBottom}
|
||
>
|
||
<Field type="number" name="paddingTopBottom" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem label="X" invalid={errors.x && touched.x} errorMessage={errors.x}>
|
||
<Field type="number" name="x" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem label="Y" invalid={errors.y && touched.y} errorMessage={errors.y}>
|
||
<Field type="number" name="y" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="OffsetX"
|
||
invalid={errors.offsetX && touched.offsetX}
|
||
errorMessage={errors.offsetX}
|
||
>
|
||
<Field type="number" name="offsetX" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="OffsetY"
|
||
invalid={errors.offsetY && touched.offsetY}
|
||
errorMessage={errors.offsetY}
|
||
>
|
||
<Field type="number" name="offsetY" component={Input} />
|
||
</FormItem>
|
||
</TabContent>
|
||
<TabContent value="annotations_border">
|
||
<FormItem
|
||
label="Visible"
|
||
invalid={errors.border?.visible && touched.border?.visible}
|
||
errorMessage={errors.border?.visible}
|
||
>
|
||
<Field name="border.visible" component={Checkbox} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Color"
|
||
invalid={errors.border?.color && touched.border?.color}
|
||
errorMessage={errors.border?.color}
|
||
>
|
||
<Field type="text" name="border.color" component={Input} />
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Dash Style"
|
||
invalid={errors.border?.dashStyle && touched.border?.dashStyle}
|
||
errorMessage={errors.border?.dashStyle}
|
||
>
|
||
<Field type="text" name="border.dashStyle">
|
||
{({ field, form }: FieldProps<SelectBoxOption>) => (
|
||
<Select
|
||
field={field}
|
||
form={form}
|
||
options={chartSeriesDashStyleOptions}
|
||
isClearable={true}
|
||
value={chartSeriesDashStyleOptions.filter(
|
||
(option) => option.value === values.border.dashStyle,
|
||
)}
|
||
onChange={(option) => form.setFieldValue(field.name, option?.value)}
|
||
/>
|
||
)}
|
||
</Field>
|
||
</FormItem>
|
||
|
||
<FormItem
|
||
label="Width"
|
||
invalid={errors.border?.width && touched.border?.width}
|
||
errorMessage={errors.border?.width}
|
||
>
|
||
<Field type="number" name="border.width" component={Input} />
|
||
</FormItem>
|
||
</TabContent>
|
||
</Tabs>
|
||
</div>
|
||
<div className="text-right mt-4">
|
||
<Button block variant="solid" loading={isSubmitting} type="submit">
|
||
{isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
|
||
</Button>
|
||
</div>
|
||
</FormContainer>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
id="confirmDelete"
|
||
isOpen={confirmDelete.isOpen}
|
||
onClose={() => setConfirmDelete(defaultConfirmDelete)}
|
||
onRequestClose={() => setConfirmDelete(defaultConfirmDelete)}
|
||
>
|
||
<h5 className="mb-4">Delete</h5>
|
||
|
||
<p>Silmek istediğinize emin misiniz?</p>
|
||
|
||
<div className="text-right mt-6">
|
||
<Button
|
||
className="ltr:mr-2 rtl:ml-2"
|
||
variant="plain"
|
||
onClick={() => {
|
||
setConfirmDelete(defaultConfirmDelete)
|
||
}}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
variant="solid"
|
||
onClick={async () => {
|
||
if (chartCode == null) return
|
||
|
||
await deleteChartJsonItem(
|
||
confirmDelete.id,
|
||
chartCode,
|
||
confirmDelete.index,
|
||
confirmDelete.fieldName,
|
||
)
|
||
|
||
toast.push(
|
||
<Notification type="success" duration={2000}>
|
||
{translate('::ListForms.KayitSilindi')}
|
||
</Notification>,
|
||
{
|
||
placement: 'top-end',
|
||
},
|
||
)
|
||
|
||
getChartValues()
|
||
setConfirmDelete(defaultConfirmDelete)
|
||
}}
|
||
>
|
||
Delete
|
||
</Button>
|
||
</div>
|
||
</Dialog>
|
||
</Container>
|
||
) : (
|
||
<></>
|
||
)
|
||
}
|
||
|
||
export default ChartEdit
|