@cdc/chart 4.23.8 → 4.23.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcchart.js +44114 -44410
- package/examples/feature/__data__/area-chart-date-apple.json +1 -5073
- package/examples/feature/area/area-chart-date-apple.json +73 -10316
- package/examples/feature/area/area-chart-date-city-temperature.json +204 -80
- package/examples/{private/confidence_interval_test.json → feature/area/area-chart-stacked.json} +65 -74
- package/examples/feature/filters/bar-filter.json +5027 -0
- package/examples/feature/legend-highlights/highlights.json +567 -0
- package/index.html +28 -7
- package/package.json +3 -2
- package/src/{CdcChart.jsx → CdcChart.tsx} +77 -71
- package/src/components/AreaChart.Stacked.jsx +73 -0
- package/src/components/AreaChart.jsx +24 -26
- package/src/components/BarChart.StackedVertical.jsx +2 -0
- package/src/components/DeviationBar.jsx +67 -13
- package/src/components/EditorPanel.jsx +493 -454
- package/src/components/Forecasting.jsx +5 -5
- package/src/components/Legend.jsx +17 -8
- package/src/components/LineChart.Circle.tsx +108 -0
- package/src/components/{LineChart.jsx → LineChart.tsx} +10 -42
- package/src/components/LinearChart.jsx +460 -443
- package/src/components/PieChart.jsx +54 -25
- package/src/components/Series.jsx +63 -17
- package/src/components/SparkLine.jsx +7 -19
- package/src/data/initial-state.js +10 -1
- package/src/hooks/useEditorPermissions.js +87 -24
- package/src/hooks/useLegendClasses.js +14 -11
- package/src/hooks/useReduceData.js +6 -1
- package/src/hooks/useScales.js +2 -2
- package/src/hooks/useTooltip.jsx +21 -8
- package/src/scss/legend.scss +206 -0
- package/src/scss/main.scss +25 -24
- package/examples/private/tooltip-issue.json +0 -45275
- package/src/components/DataTable.jsx +0 -374
- /package/src/{components → hooks}/useIntersectionObserver.jsx +0 -0
|
@@ -5,24 +5,27 @@ import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, Acc
|
|
|
5
5
|
|
|
6
6
|
import { useDebounce } from 'use-debounce'
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
import
|
|
8
|
+
// @cdc/core
|
|
9
|
+
import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
|
|
10
10
|
import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
|
|
11
|
-
|
|
12
11
|
import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
|
|
13
|
-
import
|
|
14
|
-
|
|
12
|
+
import Icon from '@cdc/core/components/ui/Icon'
|
|
15
13
|
import InputToggle from '@cdc/core/components/inputs/InputToggle'
|
|
16
14
|
import Tooltip from '@cdc/core/components/ui/Tooltip'
|
|
17
|
-
import Icon from '@cdc/core/components/ui/Icon'
|
|
18
|
-
import useReduceData from '../hooks/useReduceData'
|
|
19
|
-
import useRightAxis from '../hooks/useRightAxis'
|
|
20
|
-
import { useFilters } from '@cdc/core/components/Filters'
|
|
21
|
-
import Series from './Series'
|
|
22
|
-
import { useHighlightedBars } from '../hooks/useHighlightedBars'
|
|
23
15
|
|
|
16
|
+
// chart components
|
|
24
17
|
import ForestPlotSettings from './ForestPlotSettings'
|
|
18
|
+
import Series from './Series'
|
|
19
|
+
|
|
20
|
+
// cdc additional
|
|
21
|
+
import { useColorPalette } from '../hooks/useColorPalette'
|
|
25
22
|
import { useEditorPermissions } from '../hooks/useEditorPermissions'
|
|
23
|
+
import { useFilters } from '@cdc/core/components/Filters'
|
|
24
|
+
import { useHighlightedBars } from '../hooks/useHighlightedBars'
|
|
25
|
+
import ConfigContext from '../ConfigContext'
|
|
26
|
+
import useReduceData from '../hooks/useReduceData'
|
|
27
|
+
import useRightAxis from '../hooks/useRightAxis'
|
|
28
|
+
import WarningImage from '../images/warning.svg'
|
|
26
29
|
|
|
27
30
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
28
31
|
const TextField = memo(({ label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', i = null, min = null, ...attributes }) => {
|
|
@@ -209,8 +212,6 @@ const Regions = memo(({ config, updateConfig }) => {
|
|
|
209
212
|
)
|
|
210
213
|
})
|
|
211
214
|
|
|
212
|
-
const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
|
|
213
|
-
|
|
214
215
|
const EditorPanel = () => {
|
|
215
216
|
const { config, updateConfig, transformedData: data, loading, colorPalettes, twoColorPalette, unfilteredData, excludedData, isDashboard, setParentConfig, missingRequiredSections, isDebug, setFilteredData, lineOptions, rawData } = useContext(ConfigContext)
|
|
216
217
|
|
|
@@ -220,6 +221,7 @@ const EditorPanel = () => {
|
|
|
220
221
|
|
|
221
222
|
const {
|
|
222
223
|
enabledChartTypes,
|
|
224
|
+
headerColors,
|
|
223
225
|
visSupportsTooltipLines,
|
|
224
226
|
visSupportsNonSequentialPallete,
|
|
225
227
|
visSupportsSequentialPallete,
|
|
@@ -244,7 +246,15 @@ const EditorPanel = () => {
|
|
|
244
246
|
visSupportsValueAxisLabels,
|
|
245
247
|
visSupportsBarSpace,
|
|
246
248
|
visSupportsBarThickness,
|
|
247
|
-
|
|
249
|
+
visSupportsFootnotes,
|
|
250
|
+
visSupportsSuperTitle,
|
|
251
|
+
visSupportsDataCutoff,
|
|
252
|
+
visSupportsChartHeight,
|
|
253
|
+
visSupportsLeftValueAxis,
|
|
254
|
+
visSupportsTooltipOpacity,
|
|
255
|
+
visSupportsRankByValue,
|
|
256
|
+
visSupportsResponsiveTicks,
|
|
257
|
+
visSupportsDateCategoryHeight
|
|
248
258
|
} = useEditorPermissions()
|
|
249
259
|
|
|
250
260
|
// argument acts as props
|
|
@@ -553,15 +563,9 @@ const EditorPanel = () => {
|
|
|
553
563
|
})
|
|
554
564
|
|
|
555
565
|
if (filter) {
|
|
566
|
+
const { lower, upper } = config.confidenceKeys || {}
|
|
556
567
|
Object.keys(columns).forEach(key => {
|
|
557
|
-
if (
|
|
558
|
-
(config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
|
|
559
|
-
(config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
|
|
560
|
-
/*
|
|
561
|
-
TODO: Resolve errors when config keys exist, but have no value
|
|
562
|
-
Proposal: (((confidenceUpper && confidenceLower) || confidenceUpper || confidenceLower) && Object.keys(config.confidenceKeys).includes(key))
|
|
563
|
-
*/
|
|
564
|
-
) {
|
|
568
|
+
if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key) && ((lower && upper) || lower || upper) && key !== lower && key !== upper)) {
|
|
565
569
|
delete columns[key]
|
|
566
570
|
}
|
|
567
571
|
})
|
|
@@ -733,6 +737,9 @@ const EditorPanel = () => {
|
|
|
733
737
|
config.runtime.editorErrorMessage = 'Paired Bar charts must use exactly two data series'
|
|
734
738
|
}
|
|
735
739
|
|
|
740
|
+
if (config.visualizationType === 'Deviation Bar' && config?.series?.length !== 1) {
|
|
741
|
+
config.runtime.editorErrorMessage = 'Deviation Bar charts must use exactly one data series'
|
|
742
|
+
}
|
|
736
743
|
if (config.isLollipopChart && config?.series?.length === 0) {
|
|
737
744
|
config.runtime.editorErrorMessage = 'Add a data series'
|
|
738
745
|
}
|
|
@@ -974,14 +981,10 @@ const EditorPanel = () => {
|
|
|
974
981
|
} = useHighlightedBars(config, updateConfig)
|
|
975
982
|
|
|
976
983
|
const updateSeriesTooltip = (column, event) => {
|
|
977
|
-
console.log('tooltip value', event)
|
|
978
|
-
|
|
979
984
|
let updatedColumns = config.columns
|
|
980
985
|
|
|
981
986
|
updatedColumns[column].tooltips = event
|
|
982
987
|
|
|
983
|
-
console.log('updatedColumns', updatedColumns)
|
|
984
|
-
|
|
985
988
|
updateConfig({
|
|
986
989
|
...config,
|
|
987
990
|
columns: updatedColumns
|
|
@@ -1007,7 +1010,12 @@ const EditorPanel = () => {
|
|
|
1007
1010
|
</AccordionItemHeading>
|
|
1008
1011
|
<AccordionItemPanel>
|
|
1009
1012
|
<Select value={config.visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />
|
|
1010
|
-
{(config.visualizationType === 'Bar' || config.visualizationType === 'Combo'
|
|
1013
|
+
{(config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Area Chart') && (
|
|
1014
|
+
<Select value={config.visualizationSubType || 'Regular'} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['regular', 'stacked']} />
|
|
1015
|
+
)}
|
|
1016
|
+
{config.visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked' && (
|
|
1017
|
+
<Select value={config.stackedAreaChartLineType || 'Linear'} fieldName='stackedAreaChartLineType' label='Stacked Area Chart Line Type' updateField={updateField} options={Object.keys(approvedCurveTypes)} />
|
|
1018
|
+
)}
|
|
1011
1019
|
{config.visualizationType === 'Bar' && <Select value={config.orientation || 'vertical'} fieldName='orientation' label='Orientation' updateField={updateField} options={['vertical', 'horizontal']} />}
|
|
1012
1020
|
{config.visualizationType === 'Deviation Bar' && <Select label='Orientation' options={['horizontal']} />}
|
|
1013
1021
|
{(config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') && <Select value={config.isLollipopChart ? 'lollipop' : config.barStyle || 'flat'} fieldName='barStyle' label='bar style' updateField={updateField} options={showBarStyleOptions()} />}
|
|
@@ -1044,30 +1052,33 @@ const EditorPanel = () => {
|
|
|
1044
1052
|
}
|
|
1045
1053
|
/>
|
|
1046
1054
|
<CheckBox value={config.showTitle} fieldName='showTitle' label='Show Title' updateField={updateField} />
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1055
|
+
|
|
1056
|
+
{visSupportsSuperTitle() && (
|
|
1057
|
+
<TextField
|
|
1058
|
+
value={config.superTitle}
|
|
1059
|
+
updateField={updateField}
|
|
1060
|
+
fieldName='superTitle'
|
|
1061
|
+
label='Super Title'
|
|
1062
|
+
placeholder='Super Title'
|
|
1063
|
+
tooltip={
|
|
1064
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1065
|
+
<Tooltip.Target>
|
|
1066
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1067
|
+
</Tooltip.Target>
|
|
1068
|
+
<Tooltip.Content>
|
|
1069
|
+
<p>Super Title</p>
|
|
1070
|
+
</Tooltip.Content>
|
|
1071
|
+
</Tooltip>
|
|
1072
|
+
}
|
|
1073
|
+
/>
|
|
1074
|
+
)}
|
|
1064
1075
|
|
|
1065
1076
|
<TextField
|
|
1066
1077
|
type='textarea'
|
|
1067
1078
|
value={config.introText}
|
|
1068
1079
|
updateField={updateField}
|
|
1069
1080
|
fieldName='introText'
|
|
1070
|
-
label='
|
|
1081
|
+
label='Message'
|
|
1071
1082
|
tooltip={
|
|
1072
1083
|
<Tooltip style={{ textTransform: 'none' }}>
|
|
1073
1084
|
<Tooltip.Target>
|
|
@@ -1081,10 +1092,10 @@ const EditorPanel = () => {
|
|
|
1081
1092
|
/>
|
|
1082
1093
|
|
|
1083
1094
|
<TextField
|
|
1084
|
-
type='
|
|
1095
|
+
type='text'
|
|
1085
1096
|
value={config.description}
|
|
1086
1097
|
fieldName='description'
|
|
1087
|
-
label='Subtext'
|
|
1098
|
+
label='Subtext/Citation'
|
|
1088
1099
|
updateField={updateField}
|
|
1089
1100
|
tooltip={
|
|
1090
1101
|
<Tooltip style={{ textTransform: 'none' }}>
|
|
@@ -1098,25 +1109,27 @@ const EditorPanel = () => {
|
|
|
1098
1109
|
}
|
|
1099
1110
|
/>
|
|
1100
1111
|
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
<Tooltip
|
|
1110
|
-
<
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
<
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1112
|
+
{visSupportsFootnotes() && (
|
|
1113
|
+
<TextField
|
|
1114
|
+
type='textarea'
|
|
1115
|
+
value={config.footnotes}
|
|
1116
|
+
updateField={updateField}
|
|
1117
|
+
fieldName='footnotes'
|
|
1118
|
+
label='Footnotes'
|
|
1119
|
+
tooltip={
|
|
1120
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1121
|
+
<Tooltip.Target>
|
|
1122
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1123
|
+
</Tooltip.Target>
|
|
1124
|
+
<Tooltip.Content>
|
|
1125
|
+
<p>Footnotes</p>
|
|
1126
|
+
</Tooltip.Content>
|
|
1127
|
+
</Tooltip>
|
|
1128
|
+
}
|
|
1129
|
+
/>
|
|
1130
|
+
)}
|
|
1118
1131
|
|
|
1119
|
-
{config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
|
|
1132
|
+
{visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
|
|
1120
1133
|
</AccordionItemPanel>
|
|
1121
1134
|
</AccordionItem>
|
|
1122
1135
|
{config.visualizationType === 'Forest Plot' && <ForestPlotSettings />}
|
|
@@ -1180,7 +1193,7 @@ const EditorPanel = () => {
|
|
|
1180
1193
|
</>
|
|
1181
1194
|
)}
|
|
1182
1195
|
|
|
1183
|
-
{config.series && config.series.length === 1 && <Select fieldName='visualizationType' label='Rank by Value' initial='Select' onChange={e => sortSeries(e.target.value)} options={['asc', 'desc']} />}
|
|
1196
|
+
{visSupportsRankByValue() && config.series && config.series.length === 1 && <Select fieldName='visualizationType' label='Rank by Value' initial='Select' onChange={e => sortSeries(e.target.value)} options={['asc', 'desc']} />}
|
|
1184
1197
|
</AccordionItemPanel>
|
|
1185
1198
|
</AccordionItem>
|
|
1186
1199
|
)}
|
|
@@ -1319,71 +1332,50 @@ const EditorPanel = () => {
|
|
|
1319
1332
|
</AccordionItemPanel>
|
|
1320
1333
|
</AccordionItem>
|
|
1321
1334
|
)}
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
label='Data Column'
|
|
1336
|
-
initial='Select'
|
|
1337
|
-
required={true}
|
|
1338
|
-
updateField={updateField}
|
|
1339
|
-
options={getColumns(false)}
|
|
1340
|
-
tooltip={
|
|
1341
|
-
<Tooltip style={{ textTransform: 'none' }}>
|
|
1342
|
-
<Tooltip.Target>
|
|
1343
|
-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1344
|
-
</Tooltip.Target>
|
|
1345
|
-
<Tooltip.Content>
|
|
1346
|
-
<p>Select the source data to be visually represented.</p>
|
|
1347
|
-
</Tooltip.Content>
|
|
1348
|
-
</Tooltip>
|
|
1349
|
-
}
|
|
1350
|
-
/>
|
|
1351
|
-
)}
|
|
1352
|
-
{config.visualizationType !== 'Pie' && (
|
|
1353
|
-
<>
|
|
1354
|
-
<TextField value={config.yAxis.label} section='yAxis' fieldName='label' label='Label' updateField={updateField} />
|
|
1355
|
-
{config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && config.visualizationType !== 'Box Plot' && <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />}
|
|
1356
|
-
<TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
|
|
1357
|
-
{config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
|
|
1358
|
-
<TextField
|
|
1359
|
-
value={config.yAxis.size}
|
|
1360
|
-
type='number'
|
|
1335
|
+
{/* Left Value Axis */}
|
|
1336
|
+
{visSupportsLeftValueAxis() && (
|
|
1337
|
+
<AccordionItem>
|
|
1338
|
+
<AccordionItemHeading>
|
|
1339
|
+
<AccordionItemButton>
|
|
1340
|
+
{config.visualizationType === 'Pie' ? 'Data Format' : config.orientation === 'vertical' ? 'Left Value Axis' : 'Value Axis'}
|
|
1341
|
+
{config.visualizationType === 'Pie' && !config.yAxis.dataKey && <WarningImage width='25' className='warning-icon' />}
|
|
1342
|
+
</AccordionItemButton>
|
|
1343
|
+
</AccordionItemHeading>
|
|
1344
|
+
<AccordionItemPanel>
|
|
1345
|
+
{config.visualizationType === 'Pie' && (
|
|
1346
|
+
<Select
|
|
1347
|
+
value={config.yAxis.dataKey || ''}
|
|
1361
1348
|
section='yAxis'
|
|
1362
|
-
fieldName='
|
|
1363
|
-
label=
|
|
1364
|
-
|
|
1349
|
+
fieldName='dataKey'
|
|
1350
|
+
label='Data Column'
|
|
1351
|
+
initial='Select'
|
|
1352
|
+
required={true}
|
|
1365
1353
|
updateField={updateField}
|
|
1354
|
+
options={getColumns(false)}
|
|
1366
1355
|
tooltip={
|
|
1367
1356
|
<Tooltip style={{ textTransform: 'none' }}>
|
|
1368
1357
|
<Tooltip.Target>
|
|
1369
|
-
<Icon display='question' style={{ marginLeft: '0.5rem'
|
|
1358
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1370
1359
|
</Tooltip.Target>
|
|
1371
1360
|
<Tooltip.Content>
|
|
1372
|
-
<p>
|
|
1361
|
+
<p>Select the source data to be visually represented.</p>
|
|
1373
1362
|
</Tooltip.Content>
|
|
1374
1363
|
</Tooltip>
|
|
1375
1364
|
}
|
|
1376
1365
|
/>
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1366
|
+
)}
|
|
1367
|
+
{config.visualizationType !== 'Pie' && (
|
|
1368
|
+
<>
|
|
1369
|
+
<TextField value={config.yAxis.label} section='yAxis' fieldName='label' label='Label' updateField={updateField} />
|
|
1370
|
+
{config.runtime.seriesKeys && config.runtime.seriesKeys.length === 1 && config.visualizationType !== 'Box Plot' && <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />}
|
|
1371
|
+
<TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
|
|
1372
|
+
{config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
|
|
1380
1373
|
<TextField
|
|
1381
|
-
value={config.
|
|
1374
|
+
value={config.yAxis.size}
|
|
1382
1375
|
type='number'
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
label='Max Tick Rotation'
|
|
1376
|
+
section='yAxis'
|
|
1377
|
+
fieldName='size'
|
|
1378
|
+
label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
|
|
1387
1379
|
className='number-narrow'
|
|
1388
1380
|
updateField={updateField}
|
|
1389
1381
|
tooltip={
|
|
@@ -1392,367 +1384,391 @@ const EditorPanel = () => {
|
|
|
1392
1384
|
<Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
|
|
1393
1385
|
</Tooltip.Target>
|
|
1394
1386
|
<Tooltip.Content>
|
|
1395
|
-
<p>
|
|
1387
|
+
<p>{`Increase the size if elements in the ${config.orientation} axis are being crowded or hidden behind other elements. Decrease if less space is required for the value axis.`}</p>
|
|
1396
1388
|
</Tooltip.Content>
|
|
1397
1389
|
</Tooltip>
|
|
1398
1390
|
}
|
|
1399
1391
|
/>
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
tooltip={
|
|
1438
|
-
<Tooltip style={{ textTransform: 'none' }}>
|
|
1439
|
-
<Tooltip.Target>
|
|
1440
|
-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1441
|
-
</Tooltip.Target>
|
|
1442
|
-
<Tooltip.Content>
|
|
1443
|
-
{config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
|
|
1444
|
-
{config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
|
|
1445
|
-
</Tooltip.Content>
|
|
1446
|
-
</Tooltip>
|
|
1447
|
-
}
|
|
1448
|
-
/>
|
|
1449
|
-
<TextField
|
|
1450
|
-
value={config.dataFormat.suffix}
|
|
1392
|
+
{config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
|
|
1393
|
+
{(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
|
|
1394
|
+
{config.isResponsiveTicks && config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && (
|
|
1395
|
+
<TextField
|
|
1396
|
+
value={config.xAxis.maxTickRotation}
|
|
1397
|
+
type='number'
|
|
1398
|
+
min='0'
|
|
1399
|
+
section='xAxis'
|
|
1400
|
+
fieldName='maxTickRotation'
|
|
1401
|
+
label='Max Tick Rotation'
|
|
1402
|
+
className='number-narrow'
|
|
1403
|
+
updateField={updateField}
|
|
1404
|
+
tooltip={
|
|
1405
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1406
|
+
<Tooltip.Target>
|
|
1407
|
+
<Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
|
|
1408
|
+
</Tooltip.Target>
|
|
1409
|
+
<Tooltip.Content>
|
|
1410
|
+
<p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
|
|
1411
|
+
</Tooltip.Content>
|
|
1412
|
+
</Tooltip>
|
|
1413
|
+
}
|
|
1414
|
+
/>
|
|
1415
|
+
)}
|
|
1416
|
+
|
|
1417
|
+
{/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
|
|
1418
|
+
{/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
|
|
1419
|
+
{config.orientation === 'horizontal' && <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />}
|
|
1420
|
+
{visSupportsValueAxisGridLines() && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Show Gridlines' updateField={updateField} />}
|
|
1421
|
+
<CheckBox value={config.yAxis.enablePadding} section='yAxis' fieldName='enablePadding' label='Add Padding to Value Axis Scale' updateField={updateField} />
|
|
1422
|
+
{config.visualizationSubType === 'regular' && <CheckBox value={config.useLogScale} fieldName='useLogScale' label='use logarithmic scale' updateField={updateField} />}
|
|
1423
|
+
</>
|
|
1424
|
+
)}
|
|
1425
|
+
<span className='divider-heading'>Number Formatting</span>
|
|
1426
|
+
<CheckBox value={config.dataFormat.commas} section='dataFormat' fieldName='commas' label='Add commas' updateField={updateField} />
|
|
1427
|
+
<CheckBox
|
|
1428
|
+
value={config.dataFormat.abbreviated}
|
|
1451
1429
|
section='dataFormat'
|
|
1452
|
-
fieldName='
|
|
1453
|
-
label='
|
|
1430
|
+
fieldName='abbreviated'
|
|
1431
|
+
label='Abbreviate Axis Values'
|
|
1454
1432
|
updateField={updateField}
|
|
1455
1433
|
tooltip={
|
|
1456
1434
|
<Tooltip style={{ textTransform: 'none' }}>
|
|
1457
1435
|
<Tooltip.Target>
|
|
1458
|
-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1436
|
+
<Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
|
|
1459
1437
|
</Tooltip.Target>
|
|
1460
1438
|
<Tooltip.Content>
|
|
1461
|
-
|
|
1462
|
-
{config.visualizationType !== 'Pie' && <p>Enter a data suffix (such as "%"), if applicable.</p>}
|
|
1439
|
+
<p>{`This option abbreviates very large or very small numbers on the value axis`}</p>
|
|
1463
1440
|
</Tooltip.Content>
|
|
1464
1441
|
</Tooltip>
|
|
1465
1442
|
}
|
|
1466
1443
|
/>
|
|
1467
|
-
|
|
1444
|
+
<TextField value={config.dataFormat.roundTo ? config.dataFormat.roundTo : 0} type='number' section='dataFormat' fieldName='roundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
|
|
1445
|
+
<div className='two-col-inputs'>
|
|
1446
|
+
<TextField
|
|
1447
|
+
value={config.dataFormat.prefix}
|
|
1448
|
+
section='dataFormat'
|
|
1449
|
+
fieldName='prefix'
|
|
1450
|
+
label='Prefix'
|
|
1451
|
+
updateField={updateField}
|
|
1452
|
+
tooltip={
|
|
1453
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1454
|
+
<Tooltip.Target>
|
|
1455
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1456
|
+
</Tooltip.Target>
|
|
1457
|
+
<Tooltip.Content>
|
|
1458
|
+
{config.visualizationType === 'Pie' && <p>Enter a data prefix to display in the data table and chart tooltips, if applicable.</p>}
|
|
1459
|
+
{config.visualizationType !== 'Pie' && <p>Enter a data prefix (such as "$"), if applicable.</p>}
|
|
1460
|
+
</Tooltip.Content>
|
|
1461
|
+
</Tooltip>
|
|
1462
|
+
}
|
|
1463
|
+
/>
|
|
1464
|
+
<TextField
|
|
1465
|
+
value={config.dataFormat.suffix}
|
|
1466
|
+
section='dataFormat'
|
|
1467
|
+
fieldName='suffix'
|
|
1468
|
+
label='Suffix'
|
|
1469
|
+
updateField={updateField}
|
|
1470
|
+
tooltip={
|
|
1471
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1472
|
+
<Tooltip.Target>
|
|
1473
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1474
|
+
</Tooltip.Target>
|
|
1475
|
+
<Tooltip.Content>
|
|
1476
|
+
{config.visualizationType === 'Pie' && <p>Enter a data suffix to display in the data table and tooltips, if applicable.</p>}
|
|
1477
|
+
{config.visualizationType !== 'Pie' && <p>Enter a data suffix (such as "%"), if applicable.</p>}
|
|
1478
|
+
</Tooltip.Content>
|
|
1479
|
+
</Tooltip>
|
|
1480
|
+
}
|
|
1481
|
+
/>
|
|
1482
|
+
</div>
|
|
1468
1483
|
|
|
1469
|
-
|
|
1470
|
-
<>
|
|
1471
|
-
{visSupportsValueAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
|
|
1472
|
-
{visSupportsValueAxisLabels() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
|
|
1473
|
-
{visSupportsValueAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
|
|
1474
|
-
<TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />
|
|
1475
|
-
<span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
|
|
1476
|
-
<TextField value={config.xAxis.min} section='xAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />
|
|
1477
|
-
<span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
|
|
1478
|
-
{config.visualizationType === 'Deviation Bar' && (
|
|
1479
|
-
<>
|
|
1480
|
-
<TextField value={config.xAxis.target} section='xAxis' fieldName='target' type='number' label='Deviation point' placeholder='Auto' updateField={updateField} />
|
|
1481
|
-
<TextField value={config.xAxis.targetLabel || 'Target'} section='xAxis' fieldName='targetLabel' type='text' label='Deviation point Label' updateField={updateField} />
|
|
1482
|
-
<CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Show Deviation point label' updateField={updateField} />
|
|
1483
|
-
</>
|
|
1484
|
-
)}
|
|
1485
|
-
</>
|
|
1486
|
-
) : (
|
|
1487
|
-
config.visualizationType !== 'Pie' && (
|
|
1484
|
+
{config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
|
|
1488
1485
|
<>
|
|
1489
|
-
<CheckBox value={config.
|
|
1490
|
-
<CheckBox value={config.
|
|
1491
|
-
<CheckBox value={config.
|
|
1492
|
-
|
|
1493
|
-
<TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='max value' placeholder='Auto' updateField={updateField} />
|
|
1486
|
+
{visSupportsValueAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
|
|
1487
|
+
{visSupportsValueAxisLabels() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
|
|
1488
|
+
{visSupportsValueAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
|
|
1489
|
+
<TextField value={config.xAxis.max} section='xAxis' fieldName='max' label='max value' type='number' placeholder='Auto' updateField={updateField} />
|
|
1494
1490
|
<span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
|
|
1495
|
-
<TextField value={config.
|
|
1491
|
+
<TextField value={config.xAxis.min} section='xAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />
|
|
1496
1492
|
<span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
|
|
1493
|
+
{config.visualizationType === 'Deviation Bar' && (
|
|
1494
|
+
<>
|
|
1495
|
+
<TextField value={config.xAxis.target} section='xAxis' fieldName='target' type='number' label='Deviation point' placeholder='Auto' updateField={updateField} />
|
|
1496
|
+
<TextField value={config.xAxis.targetLabel || 'Target'} section='xAxis' fieldName='targetLabel' type='text' label='Deviation point Label' updateField={updateField} />
|
|
1497
|
+
<CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Show Deviation point label' updateField={updateField} />
|
|
1498
|
+
</>
|
|
1499
|
+
)}
|
|
1497
1500
|
</>
|
|
1498
|
-
)
|
|
1499
|
-
|
|
1501
|
+
) : (
|
|
1502
|
+
config.visualizationType !== 'Pie' && (
|
|
1503
|
+
<>
|
|
1504
|
+
<CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
|
|
1505
|
+
<CheckBox value={config.yAxis.hideLabel} section='yAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />
|
|
1506
|
+
<CheckBox value={config.yAxis.hideTicks} section='yAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />
|
|
1507
|
+
|
|
1508
|
+
<TextField value={config.yAxis.max} section='yAxis' fieldName='max' type='number' label='max value' placeholder='Auto' updateField={updateField} />
|
|
1509
|
+
<span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
|
|
1510
|
+
<TextField value={config.yAxis.min} section='yAxis' fieldName='min' type='number' label='min value' placeholder='Auto' updateField={updateField} />
|
|
1511
|
+
<span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
|
|
1512
|
+
</>
|
|
1513
|
+
)
|
|
1514
|
+
)}
|
|
1500
1515
|
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1516
|
+
{/* start: anchors */}
|
|
1517
|
+
{visHasAnchors() && config.orientation !== 'horizontal' && (
|
|
1518
|
+
<div className='edit-block'>
|
|
1519
|
+
<span className='edit-label column-heading'>Anchors</span>
|
|
1520
|
+
<Accordion allowZeroExpanded>
|
|
1521
|
+
{config.yAxis?.anchors?.map((anchor, index) => (
|
|
1522
|
+
<AccordionItem className='series-item series-item--chart' key={`yaxis-anchors-2-${index}`}>
|
|
1523
|
+
<AccordionItemHeading className='series-item__title'>
|
|
1524
|
+
<>
|
|
1525
|
+
<AccordionItemButton className={'accordion__button accordion__button'}>
|
|
1526
|
+
Anchor {index + 1}
|
|
1527
|
+
<button
|
|
1528
|
+
className='series-list__remove'
|
|
1529
|
+
onClick={e => {
|
|
1530
|
+
e.preventDefault()
|
|
1531
|
+
const copiedAnchorGroups = [...config.yAxis.anchors]
|
|
1532
|
+
copiedAnchorGroups.splice(index, 1)
|
|
1533
|
+
updateConfig({
|
|
1534
|
+
...config,
|
|
1535
|
+
yAxis: {
|
|
1536
|
+
...config.yAxis,
|
|
1537
|
+
anchors: copiedAnchorGroups
|
|
1538
|
+
}
|
|
1539
|
+
})
|
|
1540
|
+
}}
|
|
1541
|
+
>
|
|
1542
|
+
Remove
|
|
1543
|
+
</button>
|
|
1544
|
+
</AccordionItemButton>
|
|
1545
|
+
</>
|
|
1546
|
+
</AccordionItemHeading>
|
|
1547
|
+
<AccordionItemPanel>
|
|
1548
|
+
<label>
|
|
1549
|
+
<span>Anchor Value</span>
|
|
1550
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1551
|
+
<Tooltip.Target>
|
|
1552
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1553
|
+
</Tooltip.Target>
|
|
1554
|
+
<Tooltip.Content>
|
|
1555
|
+
<p>Enter the value as its shown in the data column</p>
|
|
1556
|
+
</Tooltip.Content>
|
|
1557
|
+
</Tooltip>
|
|
1558
|
+
<input
|
|
1559
|
+
type='text'
|
|
1560
|
+
value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
|
|
1561
|
+
onChange={e => {
|
|
1562
|
+
e.preventDefault()
|
|
1563
|
+
const copiedAnchors = [...config.yAxis.anchors]
|
|
1564
|
+
copiedAnchors[index].value = e.target.value
|
|
1565
|
+
updateConfig({
|
|
1566
|
+
...config,
|
|
1567
|
+
yAxis: {
|
|
1568
|
+
...config.yAxis,
|
|
1569
|
+
anchors: copiedAnchors
|
|
1570
|
+
}
|
|
1571
|
+
})
|
|
1572
|
+
}}
|
|
1573
|
+
/>
|
|
1574
|
+
</label>
|
|
1575
|
+
|
|
1576
|
+
<label>
|
|
1577
|
+
<span>Anchor Color</span>
|
|
1578
|
+
<input
|
|
1579
|
+
type='text'
|
|
1580
|
+
value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
|
|
1581
|
+
onChange={e => {
|
|
1582
|
+
e.preventDefault()
|
|
1583
|
+
const copiedAnchors = [...config.yAxis.anchors]
|
|
1584
|
+
copiedAnchors[index].color = e.target.value
|
|
1585
|
+
updateConfig({
|
|
1586
|
+
...config,
|
|
1587
|
+
yAxis: {
|
|
1588
|
+
...config.yAxis,
|
|
1589
|
+
anchors: copiedAnchors
|
|
1590
|
+
}
|
|
1591
|
+
})
|
|
1592
|
+
}}
|
|
1593
|
+
/>
|
|
1594
|
+
</label>
|
|
1595
|
+
|
|
1596
|
+
<label>
|
|
1597
|
+
Anchor Line Style
|
|
1598
|
+
<select
|
|
1599
|
+
value={config.yAxis.anchors[index].lineStyle || ''}
|
|
1600
|
+
onChange={e => {
|
|
1601
|
+
const copiedAnchors = [...config.yAxis.anchors]
|
|
1602
|
+
copiedAnchors[index].lineStyle = e.target.value
|
|
1603
|
+
updateConfig({
|
|
1604
|
+
...config,
|
|
1605
|
+
yAxis: {
|
|
1606
|
+
...config.yAxis,
|
|
1607
|
+
anchors: copiedAnchors
|
|
1608
|
+
}
|
|
1609
|
+
})
|
|
1610
|
+
}}
|
|
1611
|
+
>
|
|
1612
|
+
<option>Select</option>
|
|
1613
|
+
{lineOptions.map(line => (
|
|
1614
|
+
<option key={line.key}>{line.value}</option>
|
|
1615
|
+
))}
|
|
1616
|
+
</select>
|
|
1617
|
+
</label>
|
|
1618
|
+
</AccordionItemPanel>
|
|
1619
|
+
</AccordionItem>
|
|
1620
|
+
))}
|
|
1621
|
+
</Accordion>
|
|
1622
|
+
|
|
1623
|
+
<button
|
|
1624
|
+
className='btn full-width'
|
|
1625
|
+
onClick={e => {
|
|
1626
|
+
e.preventDefault()
|
|
1627
|
+
const anchors = [...config.yAxis.anchors]
|
|
1628
|
+
anchors.push({})
|
|
1629
|
+
updateConfig({
|
|
1630
|
+
...config,
|
|
1631
|
+
yAxis: {
|
|
1632
|
+
...config.yAxis,
|
|
1633
|
+
anchors
|
|
1634
|
+
}
|
|
1635
|
+
})
|
|
1636
|
+
}}
|
|
1637
|
+
>
|
|
1638
|
+
Add Anchor
|
|
1639
|
+
</button>
|
|
1640
|
+
</div>
|
|
1641
|
+
)}
|
|
1642
|
+
|
|
1643
|
+
{visHasAnchors() && config.orientation === 'horizontal' && (
|
|
1644
|
+
<div className='edit-block'>
|
|
1645
|
+
<span className='edit-label column-heading'>Anchors</span>
|
|
1646
|
+
<Accordion allowZeroExpanded>
|
|
1647
|
+
{config.xAxis?.anchors?.map((anchor, index) => (
|
|
1648
|
+
<AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-${index}`}>
|
|
1649
|
+
<AccordionItemHeading className='series-item__title'>
|
|
1650
|
+
<>
|
|
1651
|
+
<AccordionItemButton className={'accordion__button accordion__button'}>
|
|
1652
|
+
Anchor {index + 1}
|
|
1653
|
+
<button
|
|
1654
|
+
className='series-list__remove'
|
|
1655
|
+
onClick={e => {
|
|
1656
|
+
e.preventDefault()
|
|
1657
|
+
const copiedAnchorGroups = [...config.xAxis.anchors]
|
|
1658
|
+
copiedAnchorGroups.splice(index, 1)
|
|
1659
|
+
updateConfig({
|
|
1660
|
+
...config,
|
|
1661
|
+
xAxis: {
|
|
1662
|
+
...config.xAxis,
|
|
1663
|
+
anchors: copiedAnchorGroups
|
|
1664
|
+
}
|
|
1665
|
+
})
|
|
1666
|
+
}}
|
|
1667
|
+
>
|
|
1668
|
+
Remove
|
|
1669
|
+
</button>
|
|
1670
|
+
</AccordionItemButton>
|
|
1671
|
+
</>
|
|
1672
|
+
</AccordionItemHeading>
|
|
1673
|
+
<AccordionItemPanel>
|
|
1674
|
+
<label>
|
|
1675
|
+
<span>Anchor Value</span>
|
|
1676
|
+
<Tooltip style={{ textTransform: 'none' }}>
|
|
1677
|
+
<Tooltip.Target>
|
|
1678
|
+
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1679
|
+
</Tooltip.Target>
|
|
1680
|
+
<Tooltip.Content>
|
|
1681
|
+
<p>Enter the value as its shown in the data column</p>
|
|
1682
|
+
</Tooltip.Content>
|
|
1683
|
+
</Tooltip>
|
|
1684
|
+
<input
|
|
1685
|
+
type='text'
|
|
1686
|
+
value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
|
|
1687
|
+
onChange={e => {
|
|
1688
|
+
e.preventDefault()
|
|
1689
|
+
const copiedAnchors = [...config.xAxis.anchors]
|
|
1690
|
+
copiedAnchors[index].value = e.target.value
|
|
1691
|
+
updateConfig({
|
|
1692
|
+
...config,
|
|
1693
|
+
xAxis: {
|
|
1694
|
+
...config.xAxis,
|
|
1695
|
+
anchors: copiedAnchors
|
|
1696
|
+
}
|
|
1697
|
+
})
|
|
1698
|
+
}}
|
|
1699
|
+
/>
|
|
1700
|
+
</label>
|
|
1701
|
+
|
|
1702
|
+
<label>
|
|
1703
|
+
<span>Anchor Color</span>
|
|
1704
|
+
<input
|
|
1705
|
+
type='text'
|
|
1706
|
+
value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
|
|
1707
|
+
onChange={e => {
|
|
1515
1708
|
e.preventDefault()
|
|
1516
|
-
const
|
|
1517
|
-
|
|
1709
|
+
const copiedAnchors = [...config.xAxis.anchors]
|
|
1710
|
+
copiedAnchors[index].color = e.target.value
|
|
1518
1711
|
updateConfig({
|
|
1519
1712
|
...config,
|
|
1520
|
-
|
|
1521
|
-
...config.
|
|
1522
|
-
anchors:
|
|
1713
|
+
xAxis: {
|
|
1714
|
+
...config.xAxis,
|
|
1715
|
+
anchors: copiedAnchors
|
|
1523
1716
|
}
|
|
1524
1717
|
})
|
|
1525
1718
|
}}
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
</button>
|
|
1529
|
-
</AccordionItemButton>
|
|
1530
|
-
</>
|
|
1531
|
-
</AccordionItemHeading>
|
|
1532
|
-
<AccordionItemPanel>
|
|
1533
|
-
<label>
|
|
1534
|
-
<span>Anchor Value</span>
|
|
1535
|
-
<Tooltip style={{ textTransform: 'none' }}>
|
|
1536
|
-
<Tooltip.Target>
|
|
1537
|
-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1538
|
-
</Tooltip.Target>
|
|
1539
|
-
<Tooltip.Content>
|
|
1540
|
-
<p>Enter the value as its shown in the data column</p>
|
|
1541
|
-
</Tooltip.Content>
|
|
1542
|
-
</Tooltip>
|
|
1543
|
-
<input
|
|
1544
|
-
type='text'
|
|
1545
|
-
value={config.yAxis.anchors[index].value ? config.yAxis.anchors[index].value : ''}
|
|
1546
|
-
onChange={e => {
|
|
1547
|
-
e.preventDefault()
|
|
1548
|
-
const copiedAnchors = [...config.yAxis.anchors]
|
|
1549
|
-
copiedAnchors[index].value = e.target.value
|
|
1550
|
-
updateConfig({
|
|
1551
|
-
...config,
|
|
1552
|
-
yAxis: {
|
|
1553
|
-
...config.yAxis,
|
|
1554
|
-
anchors: copiedAnchors
|
|
1555
|
-
}
|
|
1556
|
-
})
|
|
1557
|
-
}}
|
|
1558
|
-
/>
|
|
1559
|
-
</label>
|
|
1560
|
-
|
|
1561
|
-
<label>
|
|
1562
|
-
<span>Anchor Color</span>
|
|
1563
|
-
<input
|
|
1564
|
-
type='text'
|
|
1565
|
-
value={config.yAxis.anchors[index].color ? config.yAxis.anchors[index].color : ''}
|
|
1566
|
-
onChange={e => {
|
|
1567
|
-
e.preventDefault()
|
|
1568
|
-
const copiedAnchors = [...config.yAxis.anchors]
|
|
1569
|
-
copiedAnchors[index].color = e.target.value
|
|
1570
|
-
updateConfig({
|
|
1571
|
-
...config,
|
|
1572
|
-
yAxis: {
|
|
1573
|
-
...config.yAxis,
|
|
1574
|
-
anchors: copiedAnchors
|
|
1575
|
-
}
|
|
1576
|
-
})
|
|
1577
|
-
}}
|
|
1578
|
-
/>
|
|
1579
|
-
</label>
|
|
1580
|
-
|
|
1581
|
-
<label>
|
|
1582
|
-
Anchor Line Style
|
|
1583
|
-
<select
|
|
1584
|
-
value={config.yAxis.anchors[index].lineStyle || ''}
|
|
1585
|
-
onChange={e => {
|
|
1586
|
-
const copiedAnchors = [...config.yAxis.anchors]
|
|
1587
|
-
copiedAnchors[index].lineStyle = e.target.value
|
|
1588
|
-
updateConfig({
|
|
1589
|
-
...config,
|
|
1590
|
-
yAxis: {
|
|
1591
|
-
...config.yAxis,
|
|
1592
|
-
anchors: copiedAnchors
|
|
1593
|
-
}
|
|
1594
|
-
})
|
|
1595
|
-
}}
|
|
1596
|
-
>
|
|
1597
|
-
<option>Select</option>
|
|
1598
|
-
{lineOptions.map(line => (
|
|
1599
|
-
<option key={line.key}>{line.value}</option>
|
|
1600
|
-
))}
|
|
1601
|
-
</select>
|
|
1602
|
-
</label>
|
|
1603
|
-
</AccordionItemPanel>
|
|
1604
|
-
</AccordionItem>
|
|
1605
|
-
))}
|
|
1606
|
-
</Accordion>
|
|
1607
|
-
|
|
1608
|
-
<button
|
|
1609
|
-
className='btn full-width'
|
|
1610
|
-
onClick={e => {
|
|
1611
|
-
e.preventDefault()
|
|
1612
|
-
const anchors = [...config.yAxis.anchors]
|
|
1613
|
-
anchors.push({})
|
|
1614
|
-
updateConfig({
|
|
1615
|
-
...config,
|
|
1616
|
-
yAxis: {
|
|
1617
|
-
...config.yAxis,
|
|
1618
|
-
anchors
|
|
1619
|
-
}
|
|
1620
|
-
})
|
|
1621
|
-
}}
|
|
1622
|
-
>
|
|
1623
|
-
Add Anchor
|
|
1624
|
-
</button>
|
|
1625
|
-
</div>
|
|
1626
|
-
)}
|
|
1719
|
+
/>
|
|
1720
|
+
</label>
|
|
1627
1721
|
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
<>
|
|
1636
|
-
<AccordionItemButton className={'accordion__button accordion__button'}>
|
|
1637
|
-
Anchor {index + 1}
|
|
1638
|
-
<button
|
|
1639
|
-
className='series-list__remove'
|
|
1640
|
-
onClick={e => {
|
|
1641
|
-
e.preventDefault()
|
|
1642
|
-
const copiedAnchorGroups = [...config.xAxis.anchors]
|
|
1643
|
-
copiedAnchorGroups.splice(index, 1)
|
|
1722
|
+
<label>
|
|
1723
|
+
Anchor Line Style
|
|
1724
|
+
<select
|
|
1725
|
+
value={config.xAxis.anchors[index].lineStyle || ''}
|
|
1726
|
+
onChange={e => {
|
|
1727
|
+
const copiedAnchors = [...config.xAxis.anchors]
|
|
1728
|
+
copiedAnchors[index].lineStyle = e.target.value
|
|
1644
1729
|
updateConfig({
|
|
1645
1730
|
...config,
|
|
1646
1731
|
xAxis: {
|
|
1647
1732
|
...config.xAxis,
|
|
1648
|
-
anchors:
|
|
1733
|
+
anchors: copiedAnchors
|
|
1649
1734
|
}
|
|
1650
1735
|
})
|
|
1651
1736
|
}}
|
|
1652
1737
|
>
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
<Icon display='question' style={{ marginLeft: '0.5rem' }} />
|
|
1664
|
-
</Tooltip.Target>
|
|
1665
|
-
<Tooltip.Content>
|
|
1666
|
-
<p>Enter the value as its shown in the data column</p>
|
|
1667
|
-
</Tooltip.Content>
|
|
1668
|
-
</Tooltip>
|
|
1669
|
-
<input
|
|
1670
|
-
type='text'
|
|
1671
|
-
value={config.xAxis.anchors[index].value ? config.xAxis.anchors[index].value : ''}
|
|
1672
|
-
onChange={e => {
|
|
1673
|
-
e.preventDefault()
|
|
1674
|
-
const copiedAnchors = [...config.xAxis.anchors]
|
|
1675
|
-
copiedAnchors[index].value = e.target.value
|
|
1676
|
-
updateConfig({
|
|
1677
|
-
...config,
|
|
1678
|
-
xAxis: {
|
|
1679
|
-
...config.xAxis,
|
|
1680
|
-
anchors: copiedAnchors
|
|
1681
|
-
}
|
|
1682
|
-
})
|
|
1683
|
-
}}
|
|
1684
|
-
/>
|
|
1685
|
-
</label>
|
|
1686
|
-
|
|
1687
|
-
<label>
|
|
1688
|
-
<span>Anchor Color</span>
|
|
1689
|
-
<input
|
|
1690
|
-
type='text'
|
|
1691
|
-
value={config.xAxis.anchors[index].color ? config.xAxis.anchors[index].color : ''}
|
|
1692
|
-
onChange={e => {
|
|
1693
|
-
e.preventDefault()
|
|
1694
|
-
const copiedAnchors = [...config.xAxis.anchors]
|
|
1695
|
-
copiedAnchors[index].color = e.target.value
|
|
1696
|
-
updateConfig({
|
|
1697
|
-
...config,
|
|
1698
|
-
xAxis: {
|
|
1699
|
-
...config.xAxis,
|
|
1700
|
-
anchors: copiedAnchors
|
|
1701
|
-
}
|
|
1702
|
-
})
|
|
1703
|
-
}}
|
|
1704
|
-
/>
|
|
1705
|
-
</label>
|
|
1706
|
-
|
|
1707
|
-
<label>
|
|
1708
|
-
Anchor Line Style
|
|
1709
|
-
<select
|
|
1710
|
-
value={config.xAxis.anchors[index].lineStyle || ''}
|
|
1711
|
-
onChange={e => {
|
|
1712
|
-
const copiedAnchors = [...config.xAxis.anchors]
|
|
1713
|
-
copiedAnchors[index].lineStyle = e.target.value
|
|
1714
|
-
updateConfig({
|
|
1715
|
-
...config,
|
|
1716
|
-
xAxis: {
|
|
1717
|
-
...config.xAxis,
|
|
1718
|
-
anchors: copiedAnchors
|
|
1719
|
-
}
|
|
1720
|
-
})
|
|
1721
|
-
}}
|
|
1722
|
-
>
|
|
1723
|
-
<option>Select</option>
|
|
1724
|
-
{lineOptions.map(line => (
|
|
1725
|
-
<option key={line.key}>{line.value}</option>
|
|
1726
|
-
))}
|
|
1727
|
-
</select>
|
|
1728
|
-
</label>
|
|
1729
|
-
</AccordionItemPanel>
|
|
1730
|
-
</AccordionItem>
|
|
1731
|
-
))}
|
|
1732
|
-
</Accordion>
|
|
1738
|
+
<option>Select</option>
|
|
1739
|
+
{lineOptions.map(line => (
|
|
1740
|
+
<option key={line.key}>{line.value}</option>
|
|
1741
|
+
))}
|
|
1742
|
+
</select>
|
|
1743
|
+
</label>
|
|
1744
|
+
</AccordionItemPanel>
|
|
1745
|
+
</AccordionItem>
|
|
1746
|
+
))}
|
|
1747
|
+
</Accordion>
|
|
1733
1748
|
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1749
|
+
<button
|
|
1750
|
+
className='btn full-width'
|
|
1751
|
+
onClick={e => {
|
|
1752
|
+
e.preventDefault()
|
|
1753
|
+
const anchors = [...config.xAxis.anchors]
|
|
1754
|
+
anchors.push({})
|
|
1755
|
+
updateConfig({
|
|
1756
|
+
...config,
|
|
1757
|
+
xAxis: {
|
|
1758
|
+
...config.xAxis,
|
|
1759
|
+
anchors
|
|
1760
|
+
}
|
|
1761
|
+
})
|
|
1762
|
+
}}
|
|
1763
|
+
>
|
|
1764
|
+
Add Anchor
|
|
1765
|
+
</button>
|
|
1766
|
+
</div>
|
|
1767
|
+
)}
|
|
1768
|
+
{/* end: anchors */}
|
|
1769
|
+
</AccordionItemPanel>
|
|
1770
|
+
</AccordionItem>
|
|
1771
|
+
)}
|
|
1756
1772
|
{/* Right Value Axis Settings */}
|
|
1757
1773
|
{hasRightAxis && (
|
|
1758
1774
|
<AccordionItem>
|
|
@@ -1826,6 +1842,7 @@ const EditorPanel = () => {
|
|
|
1826
1842
|
{config.visualizationType !== 'Forest Plot' && (
|
|
1827
1843
|
<Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'continuous', 'date']} />
|
|
1828
1844
|
)}
|
|
1845
|
+
<CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />{' '}
|
|
1829
1846
|
<Select
|
|
1830
1847
|
value={config.xAxis.dataKey || setCategoryAxis() || ''}
|
|
1831
1848
|
section='xAxis'
|
|
@@ -2006,8 +2023,7 @@ const EditorPanel = () => {
|
|
|
2006
2023
|
)}
|
|
2007
2024
|
|
|
2008
2025
|
{visSupportsDateCategoryNumTicks() && <TextField value={config.xAxis.numTicks} placeholder='Auto' type='number' min='1' section='xAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />}
|
|
2009
|
-
|
|
2010
|
-
<TextField value={config.xAxis.size} type='number' min='0' section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />
|
|
2026
|
+
{visSupportsDateCategoryHeight() && <TextField value={config.xAxis.size} type='number' min='0' section='xAxis' fieldName='size' label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'} className='number-narrow' updateField={updateField} />}
|
|
2011
2027
|
|
|
2012
2028
|
{/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
|
|
2013
2029
|
{/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
|
|
@@ -2018,7 +2034,7 @@ const EditorPanel = () => {
|
|
|
2018
2034
|
<TextField value={config.dataFormat.bottomRoundTo} type='number' section='dataFormat' fieldName='bottomRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
|
|
2019
2035
|
</>
|
|
2020
2036
|
)}
|
|
2021
|
-
{config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
|
|
2037
|
+
{visSupportsResponsiveTicks() && config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
|
|
2022
2038
|
{(config.orientation === 'horizontal' || !config.isResponsiveTicks) && visSupportsDateCategoryTickRotation() && (
|
|
2023
2039
|
<TextField value={config.xAxis.tickRotation} type='number' min='0' section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />
|
|
2024
2040
|
)}
|
|
@@ -2052,9 +2068,9 @@ const EditorPanel = () => {
|
|
|
2052
2068
|
</>
|
|
2053
2069
|
) : (
|
|
2054
2070
|
<>
|
|
2055
|
-
<CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
|
|
2056
|
-
<CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />
|
|
2057
|
-
<CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />
|
|
2071
|
+
{visSupportsDateCategoryAxisLine() && <CheckBox value={config.xAxis.hideAxis} section='xAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />}
|
|
2072
|
+
{visSupportsDateCategoryAxisLabel() && <CheckBox value={config.xAxis.hideLabel} section='xAxis' fieldName='hideLabel' label='Hide Label' updateField={updateField} />}
|
|
2073
|
+
{visSupportsDateCategoryAxisTicks() && <CheckBox value={config.xAxis.hideTicks} section='xAxis' fieldName='hideTicks' label='Hide Ticks' updateField={updateField} />}
|
|
2058
2074
|
</>
|
|
2059
2075
|
)}
|
|
2060
2076
|
|
|
@@ -2678,13 +2694,20 @@ const EditorPanel = () => {
|
|
|
2678
2694
|
|
|
2679
2695
|
{config.visualizationType !== 'Box Plot' && <CheckBox value={config.legend.showLegendValuesTooltip ? true : false} section='legend' fieldName='showLegendValuesTooltip' label='Show Legend Values in Tooltip' updateField={updateField} />}
|
|
2680
2696
|
|
|
2697
|
+
{config.visualizationType === 'Line' && <CheckBox value={config.legend.lineMode} section='legend' fieldName='lineMode' label='Show Lined Style Legend' updateField={updateField} />}
|
|
2698
|
+
|
|
2681
2699
|
{config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
|
|
2682
2700
|
<Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
|
|
2683
2701
|
)}
|
|
2684
2702
|
<Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={updateField} options={['highlight', 'isolate']} />
|
|
2685
2703
|
<TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
|
|
2686
2704
|
<Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
|
|
2687
|
-
{config.legend.position === 'bottom' &&
|
|
2705
|
+
{config.legend.position === 'bottom' && (
|
|
2706
|
+
<>
|
|
2707
|
+
<CheckBox value={config.legend.singleRow} section='legend' fieldName='singleRow' label='Single Row Legend' updateField={updateField} />
|
|
2708
|
+
<CheckBox value={config.legend.verticalSorted} section='legend' fieldName='verticalSorted' label='Vertical sorted Legend' updateField={updateField} />
|
|
2709
|
+
</>
|
|
2710
|
+
)}
|
|
2688
2711
|
<TextField type='textarea' value={config.legend.description} updateField={updateField} section='legend' fieldName='description' label='Legend Description' />
|
|
2689
2712
|
</AccordionItemPanel>
|
|
2690
2713
|
</AccordionItem>
|
|
@@ -2882,7 +2905,7 @@ const EditorPanel = () => {
|
|
|
2882
2905
|
|
|
2883
2906
|
{/*<CheckBox value={config.animateReplay} fieldName="animateReplay" label="Replay Animation When Filters Are Changed" updateField={updateField} />*/}
|
|
2884
2907
|
|
|
2885
|
-
{((config.series?.some(series => series.type === 'Line') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') && (
|
|
2908
|
+
{((config.series?.some(series => series.type === 'Line' || series.type === 'dashed-lg' || series.type === 'dashed-sm' || series.type === 'dashed-md') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') && (
|
|
2886
2909
|
<Select value={config.lineDatapointStyle} fieldName='lineDatapointStyle' label='Line Datapoint Style' updateField={updateField} options={['hidden', 'hover', 'always show']} />
|
|
2887
2910
|
)}
|
|
2888
2911
|
|
|
@@ -3064,8 +3087,7 @@ const EditorPanel = () => {
|
|
|
3064
3087
|
<CheckBox value={config.visual.horizontalHoverLine} fieldName='horizontalHoverLine' section='visual' label='Horizontal Hover Line' updateField={updateField} />
|
|
3065
3088
|
</>
|
|
3066
3089
|
)}
|
|
3067
|
-
|
|
3068
|
-
{
|
|
3090
|
+
{visSupportsTooltipOpacity() && (
|
|
3069
3091
|
<label>
|
|
3070
3092
|
<span className='edit-label column-heading'>Tooltip Opacity</span>
|
|
3071
3093
|
<input
|
|
@@ -3082,7 +3104,24 @@ const EditorPanel = () => {
|
|
|
3082
3104
|
}
|
|
3083
3105
|
/>
|
|
3084
3106
|
</label>
|
|
3085
|
-
}
|
|
3107
|
+
)}
|
|
3108
|
+
|
|
3109
|
+
<label>
|
|
3110
|
+
<span className='edit-label column-heading'>No Data Message</span>
|
|
3111
|
+
<input
|
|
3112
|
+
type='text'
|
|
3113
|
+
value={config.chartMessage.noData ? config.chartMessage.noData : ''}
|
|
3114
|
+
onChange={e =>
|
|
3115
|
+
updateConfig({
|
|
3116
|
+
...config,
|
|
3117
|
+
chartMessage: {
|
|
3118
|
+
...config.chartMessage,
|
|
3119
|
+
noData: e.target.value
|
|
3120
|
+
}
|
|
3121
|
+
})
|
|
3122
|
+
}
|
|
3123
|
+
/>
|
|
3124
|
+
</label>
|
|
3086
3125
|
</AccordionItemPanel>
|
|
3087
3126
|
</AccordionItem>
|
|
3088
3127
|
{/* Spark Line has no data table */}
|
|
@@ -3175,7 +3214,7 @@ const EditorPanel = () => {
|
|
|
3175
3214
|
{isDashboard && <CheckBox value={config.table.showDataTableLink} section='table' fieldName='showDataTableLink' label='Show Data Table Name & Link' updateField={updateField} />}
|
|
3176
3215
|
{isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} section='table' fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' updateField={updateField} />}
|
|
3177
3216
|
<CheckBox value={config.table.download} section='table' fieldName='download' label='Show Download CSV Link' updateField={updateField} />
|
|
3178
|
-
|
|
3217
|
+
<CheckBox value={config.table.showDownloadImgButton} section='table' fieldName='showDownloadImgButton' label='Display Image Button' updateField={updateField} />
|
|
3179
3218
|
{/* <CheckBox value={config.table.showDownloadPdfButton} section='table' fieldName='showDownloadPdfButton' label='Display PDF Button' updateField={updateField} /> */}
|
|
3180
3219
|
</AccordionItemPanel>
|
|
3181
3220
|
</AccordionItem>
|