@cdc/chart 4.25.5-1 → 4.25.6-1

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.
Files changed (43) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcchart.js +32053 -27935
  3. package/index.html +130 -130
  4. package/package.json +2 -2
  5. package/src/CdcChartComponent.tsx +66 -26
  6. package/src/_stories/Chart.stories.tsx +99 -93
  7. package/src/_stories/ChartPrefixSuffix.stories.tsx +29 -32
  8. package/src/_stories/_mock/pie_calculated_area.json +417 -0
  9. package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -13
  10. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +3 -14
  11. package/src/components/BarChart/components/BarChart.Vertical.tsx +2 -8
  12. package/src/components/Brush/BrushChart.tsx +73 -0
  13. package/src/components/Brush/BrushController..tsx +39 -0
  14. package/src/components/DeviationBar.jsx +0 -1
  15. package/src/components/EditorPanel/EditorPanel.tsx +246 -156
  16. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +2 -2
  17. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -2
  18. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +2 -1
  19. package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +8 -0
  20. package/src/components/EditorPanel/useEditorPermissions.ts +7 -4
  21. package/src/components/HoverLine/HoverLine.tsx +74 -0
  22. package/src/components/Legend/Legend.Suppression.tsx +47 -3
  23. package/src/components/Legend/helpers/index.ts +1 -1
  24. package/src/components/LineChart/helpers.ts +7 -7
  25. package/src/components/LineChart/index.tsx +3 -6
  26. package/src/components/LinearChart.tsx +108 -72
  27. package/src/components/PieChart/PieChart.tsx +58 -13
  28. package/src/data/initial-state.js +8 -5
  29. package/src/helpers/countNumOfTicks.ts +4 -19
  30. package/src/helpers/getNewRuntime.ts +35 -0
  31. package/src/helpers/getPiePercent.ts +22 -0
  32. package/src/helpers/getTransformedData.ts +22 -0
  33. package/src/helpers/tests/getNewRuntime.test.ts +82 -0
  34. package/src/helpers/tests/getPiePercent.test.ts +38 -0
  35. package/src/hooks/useRightAxis.ts +1 -1
  36. package/src/hooks/useScales.ts +8 -3
  37. package/src/hooks/useTooltip.tsx +24 -10
  38. package/src/scss/main.scss +8 -4
  39. package/src/store/chart.actions.ts +2 -6
  40. package/src/store/chart.reducer.ts +23 -23
  41. package/src/types/ChartConfig.ts +7 -4
  42. package/src/types/ChartContext.ts +0 -2
  43. package/src/components/ZoomBrush.tsx +0 -251
package/src/components/EditorPanel/EditorPanel.tsx CHANGED
@@ -20,6 +20,7 @@ import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
20
20
  import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
21
21
  import Tooltip from '@cdc/core/components/ui/Tooltip'
22
22
  import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
23
+ import MultiSelect from '@cdc/core/components/MultiSelect'
23
24
  import { viewports } from '@cdc/core/helpers/getViewport'
24
25
  import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
25
26
 
@@ -44,6 +45,9 @@ import EditorPanelContext from './EditorPanelContext'
44
45
  import _ from 'lodash'
45
46
  import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
46
47
  import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
48
+ import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
49
+ import { Datasets } from '@cdc/core/types/DataSet'
50
+ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
47
51
 
48
52
  interface PreliminaryProps {
49
53
  config: ChartConfig
@@ -106,7 +110,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
106
110
  let preliminaryData = config.preliminaryData ? [...config.preliminaryData] : []
107
111
  const defaultValues = {
108
112
  type: defaultType,
109
- seriesKey: '',
113
+ seriesKeys: [],
110
114
  label: 'Suppressed',
111
115
  column: '',
112
116
  value: '',
@@ -156,7 +160,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
156
160
  displayTable,
157
161
  displayTooltip,
158
162
  label,
159
- seriesKey,
163
+ seriesKeys,
160
164
  style,
161
165
  symbol,
162
166
  type,
@@ -381,14 +385,18 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
381
385
  </>
382
386
  ) : (
383
387
  <>
384
- <Select
385
- value={seriesKey}
386
- initial='Select'
387
- fieldName='seriesKey'
388
- label='ASSOCIATE TO SERIES'
389
- updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
390
- options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys}
391
- />
388
+ <label>
389
+ <span className='edit-label'>ASSOCIATE TO THESE SERIES</span>
390
+ <MultiSelect
391
+ fieldName='seriesKeys'
392
+ updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
393
+ options={(config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys).map(c => ({
394
+ label: c,
395
+ value: c
396
+ }))}
397
+ selected={seriesKeys}
398
+ />
399
+ </label>
392
400
  <Select
393
401
  value={column}
394
402
  initial='Select'
@@ -590,7 +598,11 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
590
598
  )
591
599
  }
592
600
 
593
- const EditorPanel = () => {
601
+ type ChartEditorPanelProps = {
602
+ datasets?: Datasets
603
+ }
604
+
605
+ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
594
606
  const {
595
607
  config,
596
608
  updateConfig,
@@ -737,9 +749,10 @@ const EditorPanel = () => {
737
749
  }
738
750
  }
739
751
 
740
- const updateField = (section, subsection, fieldName, newValue) => {
752
+ const updateField = updateFieldFactory(config, updateConfig)
753
+ const updateFieldDeprecated = (section, subsection, fieldName, newValue) => {
741
754
  if (isDebug)
742
- console.log(
755
+ console.error(
743
756
  '#COVE: CHART: EditorPanel: section, subsection, fieldName, newValue',
744
757
  section,
745
758
  subsection,
@@ -813,10 +826,6 @@ const EditorPanel = () => {
813
826
  const [displayPanel, setDisplayPanel] = useState(true)
814
827
  const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
815
828
 
816
- if (isLoading) {
817
- return null
818
- }
819
-
820
829
  const setLollipopShape = shape => {
821
830
  updateConfig({
822
831
  ...config,
@@ -964,6 +973,18 @@ const EditorPanel = () => {
964
973
  })
965
974
  }
966
975
 
976
+ // prettier-ignore
977
+ const {
978
+ highlightedBarValues,
979
+ highlightedSeriesValues,
980
+ handleUpdateHighlightedBar,
981
+ handleAddNewHighlightedBar,
982
+ handleRemoveHighlightedBar,
983
+ handleUpdateHighlightedBarColor,
984
+ handleHighlightedBarLegendLabel,
985
+ handleUpdateHighlightedBorderWidth
986
+ } = useHighlightedBars(config, updateConfig)
987
+
967
988
  const convertStateToConfig = () => {
968
989
  let strippedState = _.cloneDeep(config)
969
990
  if (false === missingRequiredSections(config)) {
@@ -1295,18 +1316,6 @@ const EditorPanel = () => {
1295
1316
  }
1296
1317
  }
1297
1318
 
1298
- // prettier-ignore
1299
- const {
1300
- highlightedBarValues,
1301
- highlightedSeriesValues,
1302
- handleUpdateHighlightedBar,
1303
- handleAddNewHighlightedBar,
1304
- handleRemoveHighlightedBar,
1305
- handleUpdateHighlightedBarColor,
1306
- handleHighlightedBarLegendLabel,
1307
- handleUpdateHighlightedBorderWidth
1308
- } = useHighlightedBars(config, updateConfig)
1309
-
1310
1319
  const updateSeriesTooltip = (column, event) => {
1311
1320
  let updatedColumns = config.columns
1312
1321
 
@@ -1364,7 +1373,7 @@ const EditorPanel = () => {
1364
1373
  handleSeriesChange,
1365
1374
  handleAddNewHighlightedBar,
1366
1375
  setCategoryAxis,
1367
- updateField,
1376
+ updateField: updateFieldDeprecated,
1368
1377
  warningMsg,
1369
1378
  highlightedBarValues,
1370
1379
  handleHighlightedBarLegendLabel,
@@ -1376,6 +1385,13 @@ const EditorPanel = () => {
1376
1385
  handleUpdateHighlightedBarColor,
1377
1386
  setLollipopShape
1378
1387
  }
1388
+ if (isLoading) {
1389
+ return <></>
1390
+ }
1391
+
1392
+ if (isLoading) {
1393
+ return null
1394
+ }
1379
1395
 
1380
1396
  return (
1381
1397
  <EditorPanelContext.Provider value={editorContextValues}>
@@ -1410,7 +1426,7 @@ const EditorPanel = () => {
1410
1426
  value={config.dynamicSeries}
1411
1427
  fieldName='dynamicSeries'
1412
1428
  label='Dynamically generate series'
1413
- updateField={updateField}
1429
+ updateField={updateFieldDeprecated}
1414
1430
  />
1415
1431
  )} */}
1416
1432
  {config.dynamicSeries && config.visualizationType === 'Line' && (
@@ -1419,7 +1435,7 @@ const EditorPanel = () => {
1419
1435
  value={config.dynamicSeriesType}
1420
1436
  label='Series Type'
1421
1437
  initial='Select'
1422
- updateField={updateField}
1438
+ updateField={updateFieldDeprecated}
1423
1439
  options={['Line', 'dashed-sm', 'dashed-md', 'dashed-lg']}
1424
1440
  />
1425
1441
  )}
@@ -1431,7 +1447,7 @@ const EditorPanel = () => {
1431
1447
  value={config.dynamicSeriesLineType ? config.dynamicSeriesLineType : 'curveLinear'}
1432
1448
  label='Line Type'
1433
1449
  initial='Select'
1434
- updateField={updateField}
1450
+ updateField={updateFieldDeprecated}
1435
1451
  options={Object.keys(approvedCurveTypes).map(curveName => approvedCurveTypes[curveName])}
1436
1452
  />
1437
1453
  )}
@@ -1512,7 +1528,7 @@ const EditorPanel = () => {
1512
1528
  section='confidenceKeys'
1513
1529
  fieldName='upper'
1514
1530
  label='Upper'
1515
- updateField={updateField}
1531
+ updateField={updateFieldDeprecated}
1516
1532
  initial='Select'
1517
1533
  options={getColumns()}
1518
1534
  />
@@ -1521,7 +1537,7 @@ const EditorPanel = () => {
1521
1537
  section='confidenceKeys'
1522
1538
  fieldName='lower'
1523
1539
  label='Lower'
1524
- updateField={updateField}
1540
+ updateField={updateFieldDeprecated}
1525
1541
  initial='Select'
1526
1542
  options={getColumns()}
1527
1543
  />
@@ -1574,7 +1590,7 @@ const EditorPanel = () => {
1574
1590
  label='Data Column'
1575
1591
  initial='Select'
1576
1592
  required={true}
1577
- updateField={updateField}
1593
+ updateField={updateFieldDeprecated}
1578
1594
  options={getColumns(false)}
1579
1595
  tooltip={
1580
1596
  <Tooltip style={{ textTransform: 'none' }}>
@@ -1635,6 +1651,25 @@ const EditorPanel = () => {
1635
1651
  section='yAxis'
1636
1652
  fieldName='label'
1637
1653
  label='Label'
1654
+ updateField={updateFieldDeprecated}
1655
+ maxLength={35}
1656
+ tooltip={
1657
+ <Tooltip style={{ textTransform: 'none' }}>
1658
+ <Tooltip.Target>
1659
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
1660
+ </Tooltip.Target>
1661
+ <Tooltip.Content>
1662
+ <p>35 character limit</p>
1663
+ </Tooltip.Content>
1664
+ </Tooltip>
1665
+ }
1666
+ />
1667
+ <TextField
1668
+ display={!visHasCategoricalAxis()}
1669
+ value={config.yAxis.inlineLabel}
1670
+ section='yAxis'
1671
+ fieldName='inlineLabel'
1672
+ label='Inline Label'
1638
1673
  updateField={updateField}
1639
1674
  maxLength={35}
1640
1675
  tooltip={
@@ -1648,6 +1683,25 @@ const EditorPanel = () => {
1648
1683
  </Tooltip>
1649
1684
  }
1650
1685
  />
1686
+ <TextField
1687
+ display={!visHasCategoricalAxis()}
1688
+ value={config.yAxis.inlineLabel}
1689
+ section='yAxis'
1690
+ fieldName='inlineLabel'
1691
+ label='Inline Label'
1692
+ updateField={updateFieldDeprecated}
1693
+ maxLength={35}
1694
+ tooltip={
1695
+ <Tooltip style={{ textTransform: 'none' }}>
1696
+ <Tooltip.Target>
1697
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
1698
+ </Tooltip.Target>
1699
+ <Tooltip.Content>
1700
+ <p>35 character limit</p>
1701
+ </Tooltip.Content>
1702
+ </Tooltip>
1703
+ }
1704
+ />
1651
1705
  {config.runtime.seriesKeys &&
1652
1706
  config.runtime.seriesKeys.length === 1 &&
1653
1707
  !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
@@ -1655,7 +1709,7 @@ const EditorPanel = () => {
1655
1709
  value={config.isLegendValue}
1656
1710
  fieldName='isLegendValue'
1657
1711
  label='Use Legend Value in Hover'
1658
- updateField={updateField}
1712
+ updateField={updateFieldDeprecated}
1659
1713
  />
1660
1714
  )}
1661
1715
 
@@ -1684,7 +1738,7 @@ const EditorPanel = () => {
1684
1738
  </Tooltip.Content>
1685
1739
  </Tooltip>
1686
1740
  }
1687
- updateField={updateField}
1741
+ updateField={updateFieldDeprecated}
1688
1742
  />
1689
1743
  <TextField
1690
1744
  value={config.yAxis.size}
@@ -1693,7 +1747,7 @@ const EditorPanel = () => {
1693
1747
  fieldName='size'
1694
1748
  label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
1695
1749
  className='number-narrow'
1696
- updateField={updateField}
1750
+ updateField={updateFieldDeprecated}
1697
1751
  tooltip={
1698
1752
  <Tooltip style={{ textTransform: 'none' }}>
1699
1753
  <Tooltip.Target>
@@ -1716,14 +1770,14 @@ const EditorPanel = () => {
1716
1770
  label='Label offset'
1717
1771
  type='number'
1718
1772
  className='number-narrow'
1719
- updateField={updateField}
1773
+ updateField={updateFieldDeprecated}
1720
1774
  />
1721
1775
  {config.orientation === 'horizontal' && (
1722
1776
  <CheckBox
1723
1777
  value={config.isResponsiveTicks}
1724
1778
  fieldName='isResponsiveTicks'
1725
1779
  label='Use Responsive Ticks'
1726
- updateField={updateField}
1780
+ updateField={updateFieldDeprecated}
1727
1781
  />
1728
1782
  )}
1729
1783
  {(config.orientation === 'vertical' || !config.isResponsiveTicks) && (
@@ -1736,7 +1790,7 @@ const EditorPanel = () => {
1736
1790
  fieldName='tickRotation'
1737
1791
  label='Tick rotation (Degrees)'
1738
1792
  className='number-narrow'
1739
- updateField={updateField}
1793
+ updateField={updateFieldDeprecated}
1740
1794
  />
1741
1795
  )}
1742
1796
  {config.isResponsiveTicks && config.orientation === 'horizontal' && (
@@ -1748,7 +1802,7 @@ const EditorPanel = () => {
1748
1802
  fieldName='maxTickRotation'
1749
1803
  label='Max Tick Rotation'
1750
1804
  className='number-narrow'
1751
- updateField={updateField}
1805
+ updateField={updateFieldDeprecated}
1752
1806
  tooltip={
1753
1807
  <Tooltip style={{ textTransform: 'none' }}>
1754
1808
  <Tooltip.Target>
@@ -1766,14 +1820,14 @@ const EditorPanel = () => {
1766
1820
  )}
1767
1821
 
1768
1822
  {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
1769
- {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
1823
+ {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateFieldDeprecated} /> */}
1770
1824
  {visSupportsValueAxisGridLines() && (
1771
1825
  <CheckBox
1772
1826
  value={config.yAxis.gridLines}
1773
1827
  section='yAxis'
1774
1828
  fieldName='gridLines'
1775
1829
  label='Show Gridlines'
1776
- updateField={updateField}
1830
+ updateField={updateFieldDeprecated}
1777
1831
  />
1778
1832
  )}
1779
1833
  {visSupportsValueAxisGridLines() && (
@@ -1782,7 +1836,7 @@ const EditorPanel = () => {
1782
1836
  section='yAxis'
1783
1837
  fieldName='labelsAboveGridlines'
1784
1838
  label='Tick labels above gridlines'
1785
- updateField={updateField}
1839
+ updateField={updateFieldDeprecated}
1786
1840
  disabled={!config.yAxis.gridLines}
1787
1841
  title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
1788
1842
  />
@@ -1793,7 +1847,7 @@ const EditorPanel = () => {
1793
1847
  section='yAxis'
1794
1848
  fieldName='enablePadding'
1795
1849
  label='Add Padding to Value Axis Scale'
1796
- updateField={updateField}
1850
+ updateField={updateFieldDeprecated}
1797
1851
  />
1798
1852
  )}
1799
1853
  {config.yAxis.enablePadding && visSupportsYPadding() && (
@@ -1803,7 +1857,7 @@ const EditorPanel = () => {
1803
1857
  fieldName='scalePadding'
1804
1858
  label='Padding Percentage'
1805
1859
  className='number-narrow'
1806
- updateField={updateField}
1860
+ updateField={updateFieldDeprecated}
1807
1861
  value={config.yAxis.scalePadding}
1808
1862
  />
1809
1863
  )}
@@ -1815,7 +1869,7 @@ const EditorPanel = () => {
1815
1869
  section='dataFormat'
1816
1870
  fieldName='commas'
1817
1871
  label='Add commas'
1818
- updateField={updateField}
1872
+ updateField={updateFieldDeprecated}
1819
1873
  tooltip={
1820
1874
  <Tooltip style={{ textTransform: 'none' }}>
1821
1875
  <Tooltip.Target>
@@ -1836,7 +1890,7 @@ const EditorPanel = () => {
1836
1890
  section='dataFormat'
1837
1891
  fieldName='abbreviated'
1838
1892
  label='Abbreviate Axis Values'
1839
- updateField={updateField}
1893
+ updateField={updateFieldDeprecated}
1840
1894
  tooltip={
1841
1895
  <Tooltip style={{ textTransform: 'none' }}>
1842
1896
  <Tooltip.Target>
@@ -1851,6 +1905,31 @@ const EditorPanel = () => {
1851
1905
  </Tooltip>
1852
1906
  }
1853
1907
  />
1908
+ <CheckBox
1909
+ display={config.visualizationType === 'Pie'}
1910
+ value={config.dataFormat.showPiePercent}
1911
+ section='dataFormat'
1912
+ fieldName='showPiePercent'
1913
+ label='Display Value From Data'
1914
+ updateField={updateFieldDeprecated}
1915
+ tooltip={
1916
+ <Tooltip style={{ textTransform: 'none' }}>
1917
+ <Tooltip.Target>
1918
+ <Icon
1919
+ display='question'
1920
+ style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
1921
+ />
1922
+ </Tooltip.Target>
1923
+ <Tooltip.Content className='text-start'>
1924
+ <p className='mb-2'>
1925
+ When enabled, pie slices are drawn using the exact values from your data as percentages. For
1926
+ example, 25 means 25%. If the sum of values below 100 will be supplemented to complete the
1927
+ pie. Feature is disabled if the sum of values is above 100
1928
+ </p>
1929
+ </Tooltip.Content>
1930
+ </Tooltip>
1931
+ }
1932
+ />
1854
1933
  <TextField
1855
1934
  value={config.dataFormat.roundTo ? config.dataFormat.roundTo : 0}
1856
1935
  type='number'
@@ -1858,7 +1937,7 @@ const EditorPanel = () => {
1858
1937
  fieldName='roundTo'
1859
1938
  label='Round to decimal point'
1860
1939
  className='number-narrow'
1861
- updateField={updateField}
1940
+ updateField={updateFieldDeprecated}
1862
1941
  min={0}
1863
1942
  />{' '}
1864
1943
  <div className='two-col-inputs'>
@@ -1867,7 +1946,7 @@ const EditorPanel = () => {
1867
1946
  section='dataFormat'
1868
1947
  fieldName='prefix'
1869
1948
  label='Prefix'
1870
- updateField={updateField}
1949
+ updateField={updateFieldDeprecated}
1871
1950
  tooltip={
1872
1951
  <Tooltip style={{ textTransform: 'none' }}>
1873
1952
  <Tooltip.Target>
@@ -1889,7 +1968,7 @@ const EditorPanel = () => {
1889
1968
  section='dataFormat'
1890
1969
  fieldName='suffix'
1891
1970
  label='Suffix'
1892
- updateField={updateField}
1971
+ updateField={updateFieldDeprecated}
1893
1972
  tooltip={
1894
1973
  <Tooltip style={{ textTransform: 'none' }}>
1895
1974
  <Tooltip.Target>
@@ -1915,7 +1994,7 @@ const EditorPanel = () => {
1915
1994
  section='xAxis'
1916
1995
  fieldName='hideAxis'
1917
1996
  label='Hide Axis'
1918
- updateField={updateField}
1997
+ updateField={updateFieldDeprecated}
1919
1998
  />
1920
1999
  )}
1921
2000
  {visSupportsValueAxisLabels() && (
@@ -1924,7 +2003,7 @@ const EditorPanel = () => {
1924
2003
  section='xAxis'
1925
2004
  fieldName='hideLabel'
1926
2005
  label='Hide Tick Labels'
1927
- updateField={updateField}
2006
+ updateField={updateFieldDeprecated}
1928
2007
  />
1929
2008
  )}
1930
2009
  {visSupportsValueAxisTicks() && (
@@ -1933,7 +2012,7 @@ const EditorPanel = () => {
1933
2012
  section='xAxis'
1934
2013
  fieldName='hideTicks'
1935
2014
  label='Hide Ticks'
1936
- updateField={updateField}
2015
+ updateField={updateFieldDeprecated}
1937
2016
  />
1938
2017
  )}
1939
2018
  {visSupportsValueAxisMax() && (
@@ -1944,7 +2023,7 @@ const EditorPanel = () => {
1944
2023
  label='max value'
1945
2024
  type='number'
1946
2025
  placeholder='Auto'
1947
- updateField={updateField}
2026
+ updateField={updateFieldDeprecated}
1948
2027
  />
1949
2028
  )}
1950
2029
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
@@ -1956,7 +2035,7 @@ const EditorPanel = () => {
1956
2035
  type='number'
1957
2036
  label='min value'
1958
2037
  placeholder='Auto'
1959
- updateField={updateField}
2038
+ updateField={updateFieldDeprecated}
1960
2039
  />
1961
2040
  )}
1962
2041
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
@@ -1969,7 +2048,7 @@ const EditorPanel = () => {
1969
2048
  type='number'
1970
2049
  label='Deviation point'
1971
2050
  placeholder='Auto'
1972
- updateField={updateField}
2051
+ updateField={updateFieldDeprecated}
1973
2052
  />
1974
2053
  <TextField
1975
2054
  value={config.xAxis.targetLabel || 'Target'}
@@ -1977,14 +2056,14 @@ const EditorPanel = () => {
1977
2056
  fieldName='targetLabel'
1978
2057
  type='text'
1979
2058
  label='Deviation point Label'
1980
- updateField={updateField}
2059
+ updateField={updateFieldDeprecated}
1981
2060
  />
1982
2061
  <CheckBox
1983
2062
  value={config.xAxis.showTargetLabel}
1984
2063
  section='xAxis'
1985
2064
  fieldName='showTargetLabel'
1986
2065
  label='Show Deviation point label'
1987
- updateField={updateField}
2066
+ updateField={updateFieldDeprecated}
1988
2067
  />
1989
2068
  </>
1990
2069
  )}
@@ -1992,21 +2071,13 @@ const EditorPanel = () => {
1992
2071
  ) : (
1993
2072
  config.visualizationType !== 'Pie' && (
1994
2073
  <>
1995
- <CheckBox
1996
- display={!visHasCategoricalAxis()}
1997
- value={config.dataFormat.onlyShowTopPrefixSuffix}
1998
- section='dataFormat'
1999
- fieldName='onlyShowTopPrefixSuffix'
2000
- label='Only Show Top Prefix/Suffix'
2001
- updateField={updateField}
2002
- />
2003
2074
  <CheckBox
2004
2075
  display={!visHasCategoricalAxis()}
2005
2076
  value={config.yAxis.hideAxis}
2006
2077
  section='yAxis'
2007
2078
  fieldName='hideAxis'
2008
2079
  label='Hide Axis'
2009
- updateField={updateField}
2080
+ updateField={updateFieldDeprecated}
2010
2081
  />
2011
2082
  <CheckBox
2012
2083
  display={!visHasCategoricalAxis()}
@@ -2014,7 +2085,7 @@ const EditorPanel = () => {
2014
2085
  section='yAxis'
2015
2086
  fieldName='hideLabel'
2016
2087
  label='Hide Tick Labels'
2017
- updateField={updateField}
2088
+ updateField={updateFieldDeprecated}
2018
2089
  />
2019
2090
  <CheckBox
2020
2091
  display={!visHasCategoricalAxis()}
@@ -2022,7 +2093,7 @@ const EditorPanel = () => {
2022
2093
  section='yAxis'
2023
2094
  fieldName='hideTicks'
2024
2095
  label='Hide Ticks'
2025
- updateField={updateField}
2096
+ updateField={updateFieldDeprecated}
2026
2097
  />
2027
2098
 
2028
2099
  <TextField
@@ -2032,7 +2103,7 @@ const EditorPanel = () => {
2032
2103
  type='number'
2033
2104
  label='left axis max value'
2034
2105
  placeholder='Auto'
2035
- updateField={updateField}
2106
+ updateField={updateFieldDeprecated}
2036
2107
  />
2037
2108
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
2038
2109
  {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
@@ -2044,7 +2115,7 @@ const EditorPanel = () => {
2044
2115
  type='number'
2045
2116
  label='left axis min value'
2046
2117
  placeholder='Auto'
2047
- updateField={updateField}
2118
+ updateField={updateFieldDeprecated}
2048
2119
  />
2049
2120
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2050
2121
  </>
@@ -2319,7 +2390,7 @@ const EditorPanel = () => {
2319
2390
  section='yAxis'
2320
2391
  fieldName='rightLabel'
2321
2392
  label='Label'
2322
- updateField={updateField}
2393
+ updateField={updateFieldDeprecated}
2323
2394
  maxLength={35}
2324
2395
  tooltip={
2325
2396
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2340,7 +2411,7 @@ const EditorPanel = () => {
2340
2411
  fieldName='rightNumTicks'
2341
2412
  label='Number of ticks'
2342
2413
  className='number-narrow'
2343
- updateField={updateField}
2414
+ updateField={updateFieldDeprecated}
2344
2415
  />
2345
2416
  <TextField
2346
2417
  value={config.yAxis.rightAxisSize}
@@ -2349,7 +2420,7 @@ const EditorPanel = () => {
2349
2420
  fieldName='rightAxisSize'
2350
2421
  label='Size (Width)'
2351
2422
  className='number-narrow'
2352
- updateField={updateField}
2423
+ updateField={updateFieldDeprecated}
2353
2424
  />
2354
2425
  <TextField
2355
2426
  value={config.yAxis.rightLabelOffsetSize}
@@ -2358,7 +2429,7 @@ const EditorPanel = () => {
2358
2429
  fieldName='rightLabelOffsetSize'
2359
2430
  label='Label Offset'
2360
2431
  className='number-narrow'
2361
- updateField={updateField}
2432
+ updateField={updateFieldDeprecated}
2362
2433
  />
2363
2434
 
2364
2435
  <span className='divider-heading'>Number Formatting</span>
@@ -2367,7 +2438,7 @@ const EditorPanel = () => {
2367
2438
  section='dataFormat'
2368
2439
  fieldName='rightCommas'
2369
2440
  label='Add commas'
2370
- updateField={updateField}
2441
+ updateField={updateFieldDeprecated}
2371
2442
  />
2372
2443
  <TextField
2373
2444
  value={config.dataFormat.rightRoundTo}
@@ -2376,7 +2447,7 @@ const EditorPanel = () => {
2376
2447
  fieldName='rightRoundTo'
2377
2448
  label='Round to decimal point'
2378
2449
  className='number-narrow'
2379
- updateField={updateField}
2450
+ updateField={updateFieldDeprecated}
2380
2451
  min={0}
2381
2452
  />
2382
2453
  <div className='two-col-inputs'>
@@ -2385,7 +2456,7 @@ const EditorPanel = () => {
2385
2456
  section='dataFormat'
2386
2457
  fieldName='rightPrefix'
2387
2458
  label='Prefix'
2388
- updateField={updateField}
2459
+ updateField={updateFieldDeprecated}
2389
2460
  tooltip={
2390
2461
  <Tooltip style={{ textTransform: 'none' }}>
2391
2462
  <Tooltip.Target>
@@ -2407,7 +2478,7 @@ const EditorPanel = () => {
2407
2478
  section='dataFormat'
2408
2479
  fieldName='rightSuffix'
2409
2480
  label='Suffix'
2410
- updateField={updateField}
2481
+ updateField={updateFieldDeprecated}
2411
2482
  tooltip={
2412
2483
  <Tooltip style={{ textTransform: 'none' }}>
2413
2484
  <Tooltip.Target>
@@ -2431,21 +2502,21 @@ const EditorPanel = () => {
2431
2502
  section='yAxis'
2432
2503
  fieldName='rightHideAxis'
2433
2504
  label='Hide Axis'
2434
- updateField={updateField}
2505
+ updateField={updateFieldDeprecated}
2435
2506
  />
2436
2507
  <CheckBox
2437
2508
  value={config.yAxis.rightHideLabel}
2438
2509
  section='yAxis'
2439
2510
  fieldName='rightHideLabel'
2440
2511
  label='Hide Tick Labels'
2441
- updateField={updateField}
2512
+ updateField={updateFieldDeprecated}
2442
2513
  />
2443
2514
  <CheckBox
2444
2515
  value={config.yAxis.rightHideTicks}
2445
2516
  section='yAxis'
2446
2517
  fieldName='rightHideTicks'
2447
2518
  label='Hide Ticks'
2448
- updateField={updateField}
2519
+ updateField={updateFieldDeprecated}
2449
2520
  />
2450
2521
 
2451
2522
  <TextField
@@ -2455,7 +2526,7 @@ const EditorPanel = () => {
2455
2526
  type='number'
2456
2527
  label='right axis max value'
2457
2528
  placeholder='Auto'
2458
- updateField={updateField}
2529
+ updateField={updateFieldDeprecated}
2459
2530
  />
2460
2531
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
2461
2532
  <TextField
@@ -2465,7 +2536,7 @@ const EditorPanel = () => {
2465
2536
  type='number'
2466
2537
  label='right axis min value'
2467
2538
  placeholder='Auto'
2468
- updateField={updateField}
2539
+ updateField={updateFieldDeprecated}
2469
2540
  />
2470
2541
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2471
2542
  </AccordionItemPanel>
@@ -2526,7 +2597,7 @@ const EditorPanel = () => {
2526
2597
  section='xAxis'
2527
2598
  fieldName='manual'
2528
2599
  label='Manual Ticks'
2529
- updateField={updateField}
2600
+ updateField={updateFieldDeprecated}
2530
2601
  />
2531
2602
  <CheckBox
2532
2603
  display={config.xAxis.type !== 'categorical'}
@@ -2534,7 +2605,7 @@ const EditorPanel = () => {
2534
2605
  section='xAxis'
2535
2606
  fieldName='sortByRecentDate'
2536
2607
  label='Show dates newest to oldest'
2537
- updateField={updateField}
2608
+ updateField={updateFieldDeprecated}
2538
2609
  />
2539
2610
 
2540
2611
  {visSupportsDateCategoryAxisPadding() && (
@@ -2546,7 +2617,7 @@ const EditorPanel = () => {
2546
2617
  fieldName='padding'
2547
2618
  label={'Padding (Percent)'}
2548
2619
  className='number-narrow'
2549
- updateField={updateField}
2620
+ updateField={updateFieldDeprecated}
2550
2621
  tooltip={
2551
2622
  <Tooltip style={{ textTransform: 'none' }}>
2552
2623
  <Tooltip.Target>
@@ -2571,7 +2642,7 @@ const EditorPanel = () => {
2571
2642
  label='Data Key'
2572
2643
  initial='Select'
2573
2644
  required={true}
2574
- updateField={updateField}
2645
+ updateField={updateFieldDeprecated}
2575
2646
  options={getColumns(false)}
2576
2647
  tooltip={
2577
2648
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2595,7 +2666,7 @@ const EditorPanel = () => {
2595
2666
  label='Segment Labels'
2596
2667
  initial='Select'
2597
2668
  required={true}
2598
- updateField={updateField}
2669
+ updateField={updateFieldDeprecated}
2599
2670
  options={getColumns(false)}
2600
2671
  tooltip={
2601
2672
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2620,7 +2691,7 @@ const EditorPanel = () => {
2620
2691
  section='xAxis'
2621
2692
  fieldName='label'
2622
2693
  label='Label'
2623
- updateField={updateField}
2694
+ updateField={updateFieldDeprecated}
2624
2695
  maxLength={35}
2625
2696
  tooltip={
2626
2697
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2641,7 +2712,7 @@ const EditorPanel = () => {
2641
2712
  section='dataFormat'
2642
2713
  fieldName='bottomPrefix'
2643
2714
  label='Prefix'
2644
- updateField={updateField}
2715
+ updateField={updateFieldDeprecated}
2645
2716
  tooltip={
2646
2717
  <Tooltip style={{ textTransform: 'none' }}>
2647
2718
  <Tooltip.Target>
@@ -2662,7 +2733,7 @@ const EditorPanel = () => {
2662
2733
  section='dataFormat'
2663
2734
  fieldName='bottomSuffix'
2664
2735
  label='Suffix'
2665
- updateField={updateField}
2736
+ updateField={updateFieldDeprecated}
2666
2737
  tooltip={
2667
2738
  <Tooltip style={{ textTransform: 'none' }}>
2668
2739
  <Tooltip.Target>
@@ -2683,7 +2754,7 @@ const EditorPanel = () => {
2683
2754
  section='dataFormat'
2684
2755
  fieldName='bottomAbbreviated'
2685
2756
  label='Abbreviate Axis Values'
2686
- updateField={updateField}
2757
+ updateField={updateFieldDeprecated}
2687
2758
  tooltip={
2688
2759
  <Tooltip style={{ textTransform: 'none' }}>
2689
2760
  <Tooltip.Target>
@@ -2732,7 +2803,7 @@ const EditorPanel = () => {
2732
2803
  fieldName='dateParseFormat'
2733
2804
  placeholder='Ex. %Y-%m-%d'
2734
2805
  label='Date Parse Format'
2735
- updateField={updateField}
2806
+ updateField={updateFieldDeprecated}
2736
2807
  />
2737
2808
  <TextField
2738
2809
  tooltip={
@@ -2756,7 +2827,7 @@ const EditorPanel = () => {
2756
2827
  fieldName='dateDisplayFormat'
2757
2828
  placeholder='Ex. %Y-%m-%d'
2758
2829
  label='AXIS DATE DISPLAY FORMAT'
2759
- updateField={updateField}
2830
+ updateField={updateFieldDeprecated}
2760
2831
  />
2761
2832
  <TextField
2762
2833
  tooltip={
@@ -2780,7 +2851,7 @@ const EditorPanel = () => {
2780
2851
  fieldName='dateDisplayFormat'
2781
2852
  placeholder='Ex. %Y-%m-%d'
2782
2853
  label='DATA TABLE DATE DISPLAY FORMAT'
2783
- updateField={updateField}
2854
+ updateField={updateFieldDeprecated}
2784
2855
  />
2785
2856
  <TextField
2786
2857
  tooltip={
@@ -2804,7 +2875,7 @@ const EditorPanel = () => {
2804
2875
  fieldName='dateDisplayFormat'
2805
2876
  placeholder='Ex. %Y-%m-%d'
2806
2877
  label='HOVER DATE DISPLAY FORMAT'
2807
- updateField={updateField}
2878
+ updateField={updateFieldDeprecated}
2808
2879
  />
2809
2880
  </>
2810
2881
  )}
@@ -2833,7 +2904,7 @@ const EditorPanel = () => {
2833
2904
  </Tooltip.Content>
2834
2905
  </Tooltip>
2835
2906
  }
2836
- updateField={updateField}
2907
+ updateField={updateFieldDeprecated}
2837
2908
  />
2838
2909
  <CheckBox
2839
2910
  value={config.xAxis.showYearsOnce}
@@ -2856,15 +2927,15 @@ const EditorPanel = () => {
2856
2927
  </Tooltip.Content>
2857
2928
  </Tooltip>
2858
2929
  }
2859
- updateField={updateField}
2930
+ updateField={updateFieldDeprecated}
2860
2931
  />
2861
2932
  {visHasBrushChart() && (
2862
2933
  <CheckBox
2863
- value={config.brush?.active}
2934
+ value={config.brush.active}
2864
2935
  section='brush'
2865
2936
  fieldName='active'
2866
2937
  label='Brush Slider '
2867
- updateField={updateField}
2938
+ updateField={updateFieldDeprecated}
2868
2939
  tooltip={
2869
2940
  <Tooltip style={{ textTransform: 'none' }}>
2870
2941
  <Tooltip.Target>
@@ -2919,7 +2990,7 @@ const EditorPanel = () => {
2919
2990
  section='exclusions'
2920
2991
  fieldName='dateStart'
2921
2992
  label='Start Date'
2922
- updateField={updateField}
2993
+ updateField={updateFieldDeprecated}
2923
2994
  value={config.exclusions.dateStart || ''}
2924
2995
  />
2925
2996
  <TextField
@@ -2927,7 +2998,7 @@ const EditorPanel = () => {
2927
2998
  section='exclusions'
2928
2999
  fieldName='dateEnd'
2929
3000
  label='End Date'
2930
- updateField={updateField}
3001
+ updateField={updateFieldDeprecated}
2931
3002
  value={config.exclusions.dateEnd || ''}
2932
3003
  />
2933
3004
  </>
@@ -2948,7 +3019,7 @@ const EditorPanel = () => {
2948
3019
  fieldName='manualStep'
2949
3020
  label='Step count'
2950
3021
  className='number-narrow'
2951
- updateField={updateField}
3022
+ updateField={updateFieldDeprecated}
2952
3023
  tooltip={
2953
3024
  <Tooltip style={{ textTransform: 'none' }}>
2954
3025
  <Tooltip.Target>
@@ -3015,7 +3086,7 @@ const EditorPanel = () => {
3015
3086
  fieldName='numTicks'
3016
3087
  label='Number of ticks'
3017
3088
  className='number-narrow'
3018
- updateField={updateField}
3089
+ updateField={updateFieldDeprecated}
3019
3090
  tooltip={
3020
3091
  <Tooltip style={{ textTransform: 'none' }}>
3021
3092
  <Tooltip.Target>
@@ -3079,7 +3150,7 @@ const EditorPanel = () => {
3079
3150
  fieldName='size'
3080
3151
  label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'}
3081
3152
  className='number-narrow'
3082
- updateField={updateField}
3153
+ updateField={updateFieldDeprecated}
3083
3154
  />
3084
3155
  )}
3085
3156
  {config.orientation === 'horizontal' && (
@@ -3090,12 +3161,12 @@ const EditorPanel = () => {
3090
3161
  label='Label offset'
3091
3162
  type='number'
3092
3163
  className='number-narrow'
3093
- updateField={updateField}
3164
+ updateField={updateFieldDeprecated}
3094
3165
  />
3095
3166
  )}
3096
3167
 
3097
3168
  {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
3098
- {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
3169
+ {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateFieldDeprecated} /> */}
3099
3170
  {(config.xAxis.type === 'continuous' || config.forestPlot.type === 'Logarithmic') && (
3100
3171
  <>
3101
3172
  <CheckBox
@@ -3103,7 +3174,7 @@ const EditorPanel = () => {
3103
3174
  section='dataFormat'
3104
3175
  fieldName='bottomCommas'
3105
3176
  label='Add commas'
3106
- updateField={updateField}
3177
+ updateField={updateFieldDeprecated}
3107
3178
  />
3108
3179
  <TextField
3109
3180
  value={config.dataFormat.bottomRoundTo}
@@ -3112,7 +3183,7 @@ const EditorPanel = () => {
3112
3183
  fieldName='bottomRoundTo'
3113
3184
  label='Round to decimal point'
3114
3185
  className='number-narrow'
3115
- updateField={updateField}
3186
+ updateField={updateFieldDeprecated}
3116
3187
  min={0}
3117
3188
  />
3118
3189
  </>
@@ -3124,7 +3195,7 @@ const EditorPanel = () => {
3124
3195
  value={config.isResponsiveTicks}
3125
3196
  fieldName='isResponsiveTicks'
3126
3197
  label='Use Responsive Ticks'
3127
- updateField={updateField}
3198
+ updateField={updateFieldDeprecated}
3128
3199
  />
3129
3200
  )}
3130
3201
  {(config.orientation === 'horizontal' || !config.isResponsiveTicks) &&
@@ -3137,7 +3208,7 @@ const EditorPanel = () => {
3137
3208
  fieldName='tickRotation'
3138
3209
  label='Tick rotation (Degrees)'
3139
3210
  className='number-narrow'
3140
- updateField={updateField}
3211
+ updateField={updateFieldDeprecated}
3141
3212
  />
3142
3213
  )}
3143
3214
  {config.orientation === 'vertical' &&
@@ -3151,7 +3222,7 @@ const EditorPanel = () => {
3151
3222
  fieldName='maxTickRotation'
3152
3223
  label='Max Tick Rotation'
3153
3224
  className='number-narrow'
3154
- updateField={updateField}
3225
+ updateField={updateFieldDeprecated}
3155
3226
  tooltip={
3156
3227
  <Tooltip style={{ textTransform: 'none' }}>
3157
3228
  <Tooltip.Target>
@@ -3178,7 +3249,7 @@ const EditorPanel = () => {
3178
3249
  section='yAxis'
3179
3250
  fieldName='hideAxis'
3180
3251
  label='Hide Axis'
3181
- updateField={updateField}
3252
+ updateField={updateFieldDeprecated}
3182
3253
  />
3183
3254
  )}
3184
3255
  {visSupportsDateCategoryAxisLabel() && (
@@ -3187,7 +3258,7 @@ const EditorPanel = () => {
3187
3258
  section='yAxis'
3188
3259
  fieldName='hideLabel'
3189
3260
  label='Hide Tick Labels'
3190
- updateField={updateField}
3261
+ updateField={updateFieldDeprecated}
3191
3262
  />
3192
3263
  )}
3193
3264
  </>
@@ -3199,7 +3270,7 @@ const EditorPanel = () => {
3199
3270
  section='xAxis'
3200
3271
  fieldName='hideAxis'
3201
3272
  label='Hide Axis'
3202
- updateField={updateField}
3273
+ updateField={updateFieldDeprecated}
3203
3274
  />
3204
3275
  )}
3205
3276
  {visSupportsDateCategoryAxisLabel() && (
@@ -3208,7 +3279,7 @@ const EditorPanel = () => {
3208
3279
  section='xAxis'
3209
3280
  fieldName='hideLabel'
3210
3281
  label='Hide Tick Labels'
3211
- updateField={updateField}
3282
+ updateField={updateFieldDeprecated}
3212
3283
  />
3213
3284
  )}
3214
3285
  {visSupportsDateCategoryAxisTicks() && (
@@ -3217,7 +3288,7 @@ const EditorPanel = () => {
3217
3288
  section='xAxis'
3218
3289
  fieldName='hideTicks'
3219
3290
  label='Hide Ticks'
3220
- updateField={updateField}
3291
+ updateField={updateFieldDeprecated}
3221
3292
  />
3222
3293
  )}
3223
3294
  </>
@@ -3304,7 +3375,7 @@ const EditorPanel = () => {
3304
3375
  section='exclusions'
3305
3376
  fieldName='active'
3306
3377
  label={'Exclude one or more values'}
3307
- updateField={updateField}
3378
+ updateField={updateFieldDeprecated}
3308
3379
  tooltip={
3309
3380
  <Tooltip style={{ textTransform: 'none' }}>
3310
3381
  <Tooltip.Target>
@@ -3357,7 +3428,7 @@ const EditorPanel = () => {
3357
3428
  type='number'
3358
3429
  label='min value'
3359
3430
  placeholder='Auto'
3360
- updateField={updateField}
3431
+ updateField={updateFieldDeprecated}
3361
3432
  />
3362
3433
  )}
3363
3434
 
@@ -3369,7 +3440,7 @@ const EditorPanel = () => {
3369
3440
  type='number'
3370
3441
  label='max value'
3371
3442
  placeholder='Auto'
3372
- updateField={updateField}
3443
+ updateField={updateFieldDeprecated}
3373
3444
  />
3374
3445
  )}
3375
3446
 
@@ -3640,7 +3711,11 @@ const EditorPanel = () => {
3640
3711
  <AccordionItemButton>Columns</AccordionItemButton>
3641
3712
  </AccordionItemHeading>
3642
3713
  <AccordionItemPanel>
3643
- <ColumnsEditor config={config} updateField={updateField} deleteColumn={removeAdditionalColumn} />{' '}
3714
+ <ColumnsEditor
3715
+ config={config}
3716
+ updateField={updateFieldDeprecated}
3717
+ deleteColumn={removeAdditionalColumn}
3718
+ />{' '}
3644
3719
  </AccordionItemPanel>
3645
3720
  </AccordionItem>
3646
3721
  )}
@@ -3656,7 +3731,7 @@ const EditorPanel = () => {
3656
3731
  section='legend'
3657
3732
  fieldName='position'
3658
3733
  label='Position'
3659
- updateField={updateField}
3734
+ updateField={updateFieldDeprecated}
3660
3735
  options={['right', 'left', 'bottom', 'top']}
3661
3736
  />
3662
3737
  {(config.legend.position === 'left' ||
@@ -3690,7 +3765,7 @@ const EditorPanel = () => {
3690
3765
  section='legend'
3691
3766
  fieldName='style'
3692
3767
  label='Legend Style'
3693
- updateField={updateField}
3768
+ updateField={updateFieldDeprecated}
3694
3769
  options={getLegendStyleOptions('style')}
3695
3770
  />
3696
3771
 
@@ -3700,7 +3775,7 @@ const EditorPanel = () => {
3700
3775
  fieldName='groupBy'
3701
3776
  initial='Select'
3702
3777
  label='Legend Group By:'
3703
- updateField={updateField}
3778
+ updateField={updateFieldDeprecated}
3704
3779
  options={getLegendStyleOptions('groupBy')}
3705
3780
  />
3706
3781
 
@@ -3723,7 +3798,7 @@ const EditorPanel = () => {
3723
3798
  section='legend'
3724
3799
  fieldName='hasShape'
3725
3800
  label='Shapes'
3726
- updateField={updateField}
3801
+ updateField={updateFieldDeprecated}
3727
3802
  />
3728
3803
 
3729
3804
  <Select
@@ -3732,7 +3807,7 @@ const EditorPanel = () => {
3732
3807
  section='legend'
3733
3808
  fieldName='subStyle'
3734
3809
  label='Gradient Style'
3735
- updateField={updateField}
3810
+ updateField={updateFieldDeprecated}
3736
3811
  options={getLegendStyleOptions('subStyle')}
3737
3812
  />
3738
3813
  <TextField
@@ -3743,7 +3818,7 @@ const EditorPanel = () => {
3743
3818
  section='legend'
3744
3819
  fieldName='tickRotation'
3745
3820
  label='Tick Rotation (Degrees)'
3746
- updateField={updateField}
3821
+ updateField={updateFieldDeprecated}
3747
3822
  />
3748
3823
 
3749
3824
  <CheckBox
@@ -3752,7 +3827,7 @@ const EditorPanel = () => {
3752
3827
  section='legend'
3753
3828
  fieldName='hideSuppressedLabels'
3754
3829
  label='Hide Suppressed Labels'
3755
- updateField={updateField}
3830
+ updateField={updateFieldDeprecated}
3756
3831
  tooltip={
3757
3832
  <Tooltip style={{ textTransform: 'none' }}>
3758
3833
  <Tooltip.Target>
@@ -3776,7 +3851,7 @@ const EditorPanel = () => {
3776
3851
  section='legend'
3777
3852
  fieldName='hideSuppressionLink'
3778
3853
  label='Hide Suppression Definition Link'
3779
- updateField={updateField}
3854
+ updateField={updateFieldDeprecated}
3780
3855
  tooltip={
3781
3856
  <Tooltip style={{ textTransform: 'none' }}>
3782
3857
  <Tooltip.Target>
@@ -3793,8 +3868,8 @@ const EditorPanel = () => {
3793
3868
  />
3794
3869
  {/* {config.visualizationType === 'Box Plot' &&
3795
3870
  <>
3796
- <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateField} />
3797
- <TextField type='textarea' value={config.boxplot.legend.howToReadText} updateField={updateField} fieldName='howToReadText' section='boxplot' subsection='legend' label='How to read text' />
3871
+ <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateFieldDeprecated} />
3872
+ <TextField type='textarea' value={config.boxplot.legend.howToReadText} updateField={updateFieldDeprecated} fieldName='howToReadText' section='boxplot' subsection='legend' label='How to read text' />
3798
3873
  </>
3799
3874
  } */}
3800
3875
  <Select
@@ -3813,7 +3888,7 @@ const EditorPanel = () => {
3813
3888
  fieldName='colorCode'
3814
3889
  label='Color code by category'
3815
3890
  initial='Select'
3816
- updateField={updateField}
3891
+ updateField={updateFieldDeprecated}
3817
3892
  options={getDataValueOptions(data)}
3818
3893
  />
3819
3894
  {visHasLegendAxisAlign() && (
@@ -3822,7 +3897,7 @@ const EditorPanel = () => {
3822
3897
  fieldName='axisAlign'
3823
3898
  section='legend'
3824
3899
  label='Align to Axis on Isolate'
3825
- updateField={updateField}
3900
+ updateField={updateFieldDeprecated}
3826
3901
  />
3827
3902
  )}
3828
3903
  {config.legend.behavior === 'highlight' && config.tooltips.singleSeries && (
@@ -3831,7 +3906,7 @@ const EditorPanel = () => {
3831
3906
  section='legend'
3832
3907
  fieldName='highlightOnHover'
3833
3908
  label='HIGHLIGHT DATA SERIES ON HOVER'
3834
- updateField={updateField}
3909
+ updateField={updateFieldDeprecated}
3835
3910
  />
3836
3911
  )}
3837
3912
  {/* start: isolated values */}
@@ -3862,7 +3937,7 @@ const EditorPanel = () => {
3862
3937
  event.preventDefault()
3863
3938
  const updatedSeriesHighlight = [...config.legend.seriesHighlight]
3864
3939
  updatedSeriesHighlight.splice(i, 1)
3865
- updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
3940
+ updateFieldDeprecated('legend', null, 'seriesHighlight', updatedSeriesHighlight)
3866
3941
  if (!updatedSeriesHighlight.length) {
3867
3942
  handleShowAll()
3868
3943
  }
@@ -3910,7 +3985,7 @@ const EditorPanel = () => {
3910
3985
  section='legend'
3911
3986
  fieldName='reverseLabelOrder'
3912
3987
  label='Reverse Labels'
3913
- updateField={updateField}
3988
+ updateField={updateFieldDeprecated}
3914
3989
  />
3915
3990
  <CheckBox
3916
3991
  display={!config.legend.hide}
@@ -3923,7 +3998,7 @@ const EditorPanel = () => {
3923
3998
  subsection='hideBorder'
3924
3999
  fieldName={['left', 'right'].includes(config.legend.position) ? 'side' : 'topBottom'}
3925
4000
  label='Hide Legend Box'
3926
- updateField={updateField}
4001
+ updateField={updateFieldDeprecated}
3927
4002
  tooltip={
3928
4003
  <Tooltip style={{ textTransform: 'none' }}>
3929
4004
  <Tooltip.Target>
@@ -3948,7 +4023,7 @@ const EditorPanel = () => {
3948
4023
  section='legend'
3949
4024
  fieldName='singleRow'
3950
4025
  label='Single Row Legend'
3951
- updateField={updateField}
4026
+ updateField={updateFieldDeprecated}
3952
4027
  />
3953
4028
  <CheckBox
3954
4029
  display={
@@ -3962,14 +4037,14 @@ const EditorPanel = () => {
3962
4037
  section='legend'
3963
4038
  fieldName='verticalSorted'
3964
4039
  label='Vertical sorted Legend'
3965
- updateField={updateField}
4040
+ updateField={updateFieldDeprecated}
3966
4041
  />
3967
4042
  <CheckBox
3968
4043
  value={config.legend.hide ? true : false}
3969
4044
  section='legend'
3970
4045
  fieldName='hide'
3971
4046
  label='Hide Legend'
3972
- updateField={updateField}
4047
+ updateField={updateFieldDeprecated}
3973
4048
  tooltip={
3974
4049
  <Tooltip style={{ textTransform: 'none' }}>
3975
4050
  <Tooltip.Target>
@@ -3989,12 +4064,12 @@ const EditorPanel = () => {
3989
4064
  section='legend'
3990
4065
  fieldName='label'
3991
4066
  label='Title'
3992
- updateField={updateField}
4067
+ updateField={updateFieldDeprecated}
3993
4068
  />
3994
4069
  <TextField
3995
4070
  type='textarea'
3996
4071
  value={config.legend.description}
3997
- updateField={updateField}
4072
+ updateField={updateFieldDeprecated}
3998
4073
  section='legend'
3999
4074
  fieldName='description'
4000
4075
  label='Legend Description'
@@ -4004,7 +4079,7 @@ const EditorPanel = () => {
4004
4079
  section='legend'
4005
4080
  fieldName='unified'
4006
4081
  label='Unified Legend'
4007
- updateField={updateField}
4082
+ updateField={updateFieldDeprecated}
4008
4083
  tooltip={
4009
4084
  <Tooltip style={{ textTransform: 'none' }}>
4010
4085
  <Tooltip.Target>
@@ -4026,14 +4101,29 @@ const EditorPanel = () => {
4026
4101
  </AccordionItem>
4027
4102
  )}
4028
4103
  {visSupportsFilters() && (
4029
- <AccordionItem>
4030
- <AccordionItemHeading>
4031
- <AccordionItemButton>Filters</AccordionItemButton>
4032
- </AccordionItemHeading>
4033
- <AccordionItemPanel>
4034
- <VizFilterEditor config={config} updateField={updateField} rawData={rawData} />
4035
- </AccordionItemPanel>
4036
- </AccordionItem>
4104
+ <>
4105
+ <AccordionItem>
4106
+ <AccordionItemHeading>
4107
+ <AccordionItemButton>Filters</AccordionItemButton>
4108
+ </AccordionItemHeading>
4109
+ <AccordionItemPanel>
4110
+ <VizFilterEditor
4111
+ config={config}
4112
+ updateField={updateField}
4113
+ rawData={rawData}
4114
+ hasFootnotes={isDashboard}
4115
+ />
4116
+ </AccordionItemPanel>
4117
+ </AccordionItem>
4118
+ <AccordionItem>
4119
+ <AccordionItemHeading>
4120
+ <AccordionItemButton>Footnotes</AccordionItemButton>
4121
+ </AccordionItemHeading>
4122
+ <AccordionItemPanel>
4123
+ <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
4124
+ </AccordionItemPanel>
4125
+ </AccordionItem>
4126
+ </>
4037
4127
  )}
4038
4128
  <Panels.Visual name='Visual' />
4039
4129
  {/* Spark Line has no data table */}
@@ -4046,7 +4136,7 @@ const EditorPanel = () => {
4046
4136
  <DataTableEditor
4047
4137
  config={config}
4048
4138
  columns={Object.keys(data[0] || {})}
4049
- updateField={updateField}
4139
+ updateField={updateFieldDeprecated}
4050
4140
  isDashboard={isDashboard}
4051
4141
  isLoadedFromUrl={isLoadedFromUrl}
4052
4142
  />{' '}