@cdc/chart 4.25.5-1 → 4.25.6

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 (40) hide show
  1. package/LICENSE +201 -0
  2. package/dist/cdcchart.js +32848 -27824
  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 +232 -147
  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/index.tsx +3 -6
  25. package/src/components/LinearChart.tsx +161 -132
  26. package/src/components/PieChart/PieChart.tsx +58 -13
  27. package/src/data/initial-state.js +8 -5
  28. package/src/helpers/getNewRuntime.ts +35 -0
  29. package/src/helpers/getPiePercent.ts +22 -0
  30. package/src/helpers/getTransformedData.ts +22 -0
  31. package/src/helpers/tests/getNewRuntime.test.ts +82 -0
  32. package/src/helpers/tests/getPiePercent.test.ts +38 -0
  33. package/src/hooks/useRightAxis.ts +1 -1
  34. package/src/hooks/useScales.ts +8 -3
  35. package/src/hooks/useTooltip.tsx +24 -10
  36. package/src/store/chart.actions.ts +2 -6
  37. package/src/store/chart.reducer.ts +23 -23
  38. package/src/types/ChartConfig.ts +6 -3
  39. package/src/types/ChartContext.ts +0 -2
  40. package/src/components/ZoomBrush.tsx +0 -251
package/src/components/EditorPanel/EditorPanel.tsx CHANGED
@@ -44,6 +44,9 @@ import EditorPanelContext from './EditorPanelContext'
44
44
  import _ from 'lodash'
45
45
  import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
46
46
  import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
47
+ import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
48
+ import { Datasets } from '@cdc/core/types/DataSet'
49
+ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
47
50
 
48
51
  interface PreliminaryProps {
49
52
  config: ChartConfig
@@ -590,7 +593,11 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
590
593
  )
591
594
  }
592
595
 
593
- const EditorPanel = () => {
596
+ type ChartEditorPanelProps = {
597
+ datasets?: Datasets
598
+ }
599
+
600
+ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
594
601
  const {
595
602
  config,
596
603
  updateConfig,
@@ -737,9 +744,10 @@ const EditorPanel = () => {
737
744
  }
738
745
  }
739
746
 
740
- const updateField = (section, subsection, fieldName, newValue) => {
747
+ const updateField = updateFieldFactory(config, updateConfig)
748
+ const updateFieldDeprecated = (section, subsection, fieldName, newValue) => {
741
749
  if (isDebug)
742
- console.log(
750
+ console.error(
743
751
  '#COVE: CHART: EditorPanel: section, subsection, fieldName, newValue',
744
752
  section,
745
753
  subsection,
@@ -813,10 +821,6 @@ const EditorPanel = () => {
813
821
  const [displayPanel, setDisplayPanel] = useState(true)
814
822
  const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
815
823
 
816
- if (isLoading) {
817
- return null
818
- }
819
-
820
824
  const setLollipopShape = shape => {
821
825
  updateConfig({
822
826
  ...config,
@@ -964,6 +968,18 @@ const EditorPanel = () => {
964
968
  })
965
969
  }
966
970
 
971
+ // prettier-ignore
972
+ const {
973
+ highlightedBarValues,
974
+ highlightedSeriesValues,
975
+ handleUpdateHighlightedBar,
976
+ handleAddNewHighlightedBar,
977
+ handleRemoveHighlightedBar,
978
+ handleUpdateHighlightedBarColor,
979
+ handleHighlightedBarLegendLabel,
980
+ handleUpdateHighlightedBorderWidth
981
+ } = useHighlightedBars(config, updateConfig)
982
+
967
983
  const convertStateToConfig = () => {
968
984
  let strippedState = _.cloneDeep(config)
969
985
  if (false === missingRequiredSections(config)) {
@@ -1177,7 +1193,7 @@ const EditorPanel = () => {
1177
1193
  if (isDebug && config?.series?.length === 0) {
1178
1194
  let setdatacol = setDataColumn()
1179
1195
  if (setdatacol !== '') addNewSeries(setdatacol)
1180
- if (isDebug) console.log('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
1196
+ if (isDebug) console.error('### COVE DEBUG: Chart: Setting default datacol=', setdatacol) // eslint-disable-line
1181
1197
  }
1182
1198
 
1183
1199
  const chartsWithOptions = [
@@ -1295,18 +1311,6 @@ const EditorPanel = () => {
1295
1311
  }
1296
1312
  }
1297
1313
 
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
1314
  const updateSeriesTooltip = (column, event) => {
1311
1315
  let updatedColumns = config.columns
1312
1316
 
@@ -1364,7 +1368,7 @@ const EditorPanel = () => {
1364
1368
  handleSeriesChange,
1365
1369
  handleAddNewHighlightedBar,
1366
1370
  setCategoryAxis,
1367
- updateField,
1371
+ updateField: updateFieldDeprecated,
1368
1372
  warningMsg,
1369
1373
  highlightedBarValues,
1370
1374
  handleHighlightedBarLegendLabel,
@@ -1376,6 +1380,13 @@ const EditorPanel = () => {
1376
1380
  handleUpdateHighlightedBarColor,
1377
1381
  setLollipopShape
1378
1382
  }
1383
+ if (isLoading) {
1384
+ return <></>
1385
+ }
1386
+
1387
+ if (isLoading) {
1388
+ return null
1389
+ }
1379
1390
 
1380
1391
  return (
1381
1392
  <EditorPanelContext.Provider value={editorContextValues}>
@@ -1410,7 +1421,7 @@ const EditorPanel = () => {
1410
1421
  value={config.dynamicSeries}
1411
1422
  fieldName='dynamicSeries'
1412
1423
  label='Dynamically generate series'
1413
- updateField={updateField}
1424
+ updateField={updateFieldDeprecated}
1414
1425
  />
1415
1426
  )} */}
1416
1427
  {config.dynamicSeries && config.visualizationType === 'Line' && (
@@ -1419,7 +1430,7 @@ const EditorPanel = () => {
1419
1430
  value={config.dynamicSeriesType}
1420
1431
  label='Series Type'
1421
1432
  initial='Select'
1422
- updateField={updateField}
1433
+ updateField={updateFieldDeprecated}
1423
1434
  options={['Line', 'dashed-sm', 'dashed-md', 'dashed-lg']}
1424
1435
  />
1425
1436
  )}
@@ -1431,7 +1442,7 @@ const EditorPanel = () => {
1431
1442
  value={config.dynamicSeriesLineType ? config.dynamicSeriesLineType : 'curveLinear'}
1432
1443
  label='Line Type'
1433
1444
  initial='Select'
1434
- updateField={updateField}
1445
+ updateField={updateFieldDeprecated}
1435
1446
  options={Object.keys(approvedCurveTypes).map(curveName => approvedCurveTypes[curveName])}
1436
1447
  />
1437
1448
  )}
@@ -1512,7 +1523,7 @@ const EditorPanel = () => {
1512
1523
  section='confidenceKeys'
1513
1524
  fieldName='upper'
1514
1525
  label='Upper'
1515
- updateField={updateField}
1526
+ updateField={updateFieldDeprecated}
1516
1527
  initial='Select'
1517
1528
  options={getColumns()}
1518
1529
  />
@@ -1521,7 +1532,7 @@ const EditorPanel = () => {
1521
1532
  section='confidenceKeys'
1522
1533
  fieldName='lower'
1523
1534
  label='Lower'
1524
- updateField={updateField}
1535
+ updateField={updateFieldDeprecated}
1525
1536
  initial='Select'
1526
1537
  options={getColumns()}
1527
1538
  />
@@ -1574,7 +1585,7 @@ const EditorPanel = () => {
1574
1585
  label='Data Column'
1575
1586
  initial='Select'
1576
1587
  required={true}
1577
- updateField={updateField}
1588
+ updateField={updateFieldDeprecated}
1578
1589
  options={getColumns(false)}
1579
1590
  tooltip={
1580
1591
  <Tooltip style={{ textTransform: 'none' }}>
@@ -1635,6 +1646,25 @@ const EditorPanel = () => {
1635
1646
  section='yAxis'
1636
1647
  fieldName='label'
1637
1648
  label='Label'
1649
+ updateField={updateFieldDeprecated}
1650
+ maxLength={35}
1651
+ tooltip={
1652
+ <Tooltip style={{ textTransform: 'none' }}>
1653
+ <Tooltip.Target>
1654
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
1655
+ </Tooltip.Target>
1656
+ <Tooltip.Content>
1657
+ <p>35 character limit</p>
1658
+ </Tooltip.Content>
1659
+ </Tooltip>
1660
+ }
1661
+ />
1662
+ <TextField
1663
+ display={!visHasCategoricalAxis()}
1664
+ value={config.yAxis.inlineLabel}
1665
+ section='yAxis'
1666
+ fieldName='inlineLabel'
1667
+ label='Inline Label'
1638
1668
  updateField={updateField}
1639
1669
  maxLength={35}
1640
1670
  tooltip={
@@ -1648,6 +1678,25 @@ const EditorPanel = () => {
1648
1678
  </Tooltip>
1649
1679
  }
1650
1680
  />
1681
+ <TextField
1682
+ display={!visHasCategoricalAxis()}
1683
+ value={config.yAxis.inlineLabel}
1684
+ section='yAxis'
1685
+ fieldName='inlineLabel'
1686
+ label='Inline Label'
1687
+ updateField={updateFieldDeprecated}
1688
+ maxLength={35}
1689
+ tooltip={
1690
+ <Tooltip style={{ textTransform: 'none' }}>
1691
+ <Tooltip.Target>
1692
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
1693
+ </Tooltip.Target>
1694
+ <Tooltip.Content>
1695
+ <p>35 character limit</p>
1696
+ </Tooltip.Content>
1697
+ </Tooltip>
1698
+ }
1699
+ />
1651
1700
  {config.runtime.seriesKeys &&
1652
1701
  config.runtime.seriesKeys.length === 1 &&
1653
1702
  !['Box Plot', 'Deviation Bar', 'Forest Plot'].includes(config.visualizationType) && (
@@ -1655,7 +1704,7 @@ const EditorPanel = () => {
1655
1704
  value={config.isLegendValue}
1656
1705
  fieldName='isLegendValue'
1657
1706
  label='Use Legend Value in Hover'
1658
- updateField={updateField}
1707
+ updateField={updateFieldDeprecated}
1659
1708
  />
1660
1709
  )}
1661
1710
 
@@ -1684,7 +1733,7 @@ const EditorPanel = () => {
1684
1733
  </Tooltip.Content>
1685
1734
  </Tooltip>
1686
1735
  }
1687
- updateField={updateField}
1736
+ updateField={updateFieldDeprecated}
1688
1737
  />
1689
1738
  <TextField
1690
1739
  value={config.yAxis.size}
@@ -1693,7 +1742,7 @@ const EditorPanel = () => {
1693
1742
  fieldName='size'
1694
1743
  label={config.orientation === 'horizontal' ? 'Size (Height)' : 'Size (Width)'}
1695
1744
  className='number-narrow'
1696
- updateField={updateField}
1745
+ updateField={updateFieldDeprecated}
1697
1746
  tooltip={
1698
1747
  <Tooltip style={{ textTransform: 'none' }}>
1699
1748
  <Tooltip.Target>
@@ -1716,14 +1765,14 @@ const EditorPanel = () => {
1716
1765
  label='Label offset'
1717
1766
  type='number'
1718
1767
  className='number-narrow'
1719
- updateField={updateField}
1768
+ updateField={updateFieldDeprecated}
1720
1769
  />
1721
1770
  {config.orientation === 'horizontal' && (
1722
1771
  <CheckBox
1723
1772
  value={config.isResponsiveTicks}
1724
1773
  fieldName='isResponsiveTicks'
1725
1774
  label='Use Responsive Ticks'
1726
- updateField={updateField}
1775
+ updateField={updateFieldDeprecated}
1727
1776
  />
1728
1777
  )}
1729
1778
  {(config.orientation === 'vertical' || !config.isResponsiveTicks) && (
@@ -1736,7 +1785,7 @@ const EditorPanel = () => {
1736
1785
  fieldName='tickRotation'
1737
1786
  label='Tick rotation (Degrees)'
1738
1787
  className='number-narrow'
1739
- updateField={updateField}
1788
+ updateField={updateFieldDeprecated}
1740
1789
  />
1741
1790
  )}
1742
1791
  {config.isResponsiveTicks && config.orientation === 'horizontal' && (
@@ -1748,7 +1797,7 @@ const EditorPanel = () => {
1748
1797
  fieldName='maxTickRotation'
1749
1798
  label='Max Tick Rotation'
1750
1799
  className='number-narrow'
1751
- updateField={updateField}
1800
+ updateField={updateFieldDeprecated}
1752
1801
  tooltip={
1753
1802
  <Tooltip style={{ textTransform: 'none' }}>
1754
1803
  <Tooltip.Target>
@@ -1766,14 +1815,14 @@ const EditorPanel = () => {
1766
1815
  )}
1767
1816
 
1768
1817
  {/* 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} /> */}
1818
+ {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateFieldDeprecated} /> */}
1770
1819
  {visSupportsValueAxisGridLines() && (
1771
1820
  <CheckBox
1772
1821
  value={config.yAxis.gridLines}
1773
1822
  section='yAxis'
1774
1823
  fieldName='gridLines'
1775
1824
  label='Show Gridlines'
1776
- updateField={updateField}
1825
+ updateField={updateFieldDeprecated}
1777
1826
  />
1778
1827
  )}
1779
1828
  {visSupportsValueAxisGridLines() && (
@@ -1782,7 +1831,7 @@ const EditorPanel = () => {
1782
1831
  section='yAxis'
1783
1832
  fieldName='labelsAboveGridlines'
1784
1833
  label='Tick labels above gridlines'
1785
- updateField={updateField}
1834
+ updateField={updateFieldDeprecated}
1786
1835
  disabled={!config.yAxis.gridLines}
1787
1836
  title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
1788
1837
  />
@@ -1793,7 +1842,7 @@ const EditorPanel = () => {
1793
1842
  section='yAxis'
1794
1843
  fieldName='enablePadding'
1795
1844
  label='Add Padding to Value Axis Scale'
1796
- updateField={updateField}
1845
+ updateField={updateFieldDeprecated}
1797
1846
  />
1798
1847
  )}
1799
1848
  {config.yAxis.enablePadding && visSupportsYPadding() && (
@@ -1803,7 +1852,7 @@ const EditorPanel = () => {
1803
1852
  fieldName='scalePadding'
1804
1853
  label='Padding Percentage'
1805
1854
  className='number-narrow'
1806
- updateField={updateField}
1855
+ updateField={updateFieldDeprecated}
1807
1856
  value={config.yAxis.scalePadding}
1808
1857
  />
1809
1858
  )}
@@ -1815,7 +1864,7 @@ const EditorPanel = () => {
1815
1864
  section='dataFormat'
1816
1865
  fieldName='commas'
1817
1866
  label='Add commas'
1818
- updateField={updateField}
1867
+ updateField={updateFieldDeprecated}
1819
1868
  tooltip={
1820
1869
  <Tooltip style={{ textTransform: 'none' }}>
1821
1870
  <Tooltip.Target>
@@ -1836,7 +1885,7 @@ const EditorPanel = () => {
1836
1885
  section='dataFormat'
1837
1886
  fieldName='abbreviated'
1838
1887
  label='Abbreviate Axis Values'
1839
- updateField={updateField}
1888
+ updateField={updateFieldDeprecated}
1840
1889
  tooltip={
1841
1890
  <Tooltip style={{ textTransform: 'none' }}>
1842
1891
  <Tooltip.Target>
@@ -1851,6 +1900,31 @@ const EditorPanel = () => {
1851
1900
  </Tooltip>
1852
1901
  }
1853
1902
  />
1903
+ <CheckBox
1904
+ display={config.visualizationType === 'Pie'}
1905
+ value={config.dataFormat.showPiePercent}
1906
+ section='dataFormat'
1907
+ fieldName='showPiePercent'
1908
+ label='Display Value From Data'
1909
+ updateField={updateFieldDeprecated}
1910
+ tooltip={
1911
+ <Tooltip style={{ textTransform: 'none' }}>
1912
+ <Tooltip.Target>
1913
+ <Icon
1914
+ display='question'
1915
+ style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
1916
+ />
1917
+ </Tooltip.Target>
1918
+ <Tooltip.Content className='text-start'>
1919
+ <p className='mb-2'>
1920
+ When enabled, pie slices are drawn using the exact values from your data as percentages. For
1921
+ example, 25 means 25%. If the sum of values below 100 will be supplemented to complete the
1922
+ pie. Feature is disabled if the sum of values is above 100
1923
+ </p>
1924
+ </Tooltip.Content>
1925
+ </Tooltip>
1926
+ }
1927
+ />
1854
1928
  <TextField
1855
1929
  value={config.dataFormat.roundTo ? config.dataFormat.roundTo : 0}
1856
1930
  type='number'
@@ -1858,7 +1932,7 @@ const EditorPanel = () => {
1858
1932
  fieldName='roundTo'
1859
1933
  label='Round to decimal point'
1860
1934
  className='number-narrow'
1861
- updateField={updateField}
1935
+ updateField={updateFieldDeprecated}
1862
1936
  min={0}
1863
1937
  />{' '}
1864
1938
  <div className='two-col-inputs'>
@@ -1867,7 +1941,7 @@ const EditorPanel = () => {
1867
1941
  section='dataFormat'
1868
1942
  fieldName='prefix'
1869
1943
  label='Prefix'
1870
- updateField={updateField}
1944
+ updateField={updateFieldDeprecated}
1871
1945
  tooltip={
1872
1946
  <Tooltip style={{ textTransform: 'none' }}>
1873
1947
  <Tooltip.Target>
@@ -1889,7 +1963,7 @@ const EditorPanel = () => {
1889
1963
  section='dataFormat'
1890
1964
  fieldName='suffix'
1891
1965
  label='Suffix'
1892
- updateField={updateField}
1966
+ updateField={updateFieldDeprecated}
1893
1967
  tooltip={
1894
1968
  <Tooltip style={{ textTransform: 'none' }}>
1895
1969
  <Tooltip.Target>
@@ -1915,7 +1989,7 @@ const EditorPanel = () => {
1915
1989
  section='xAxis'
1916
1990
  fieldName='hideAxis'
1917
1991
  label='Hide Axis'
1918
- updateField={updateField}
1992
+ updateField={updateFieldDeprecated}
1919
1993
  />
1920
1994
  )}
1921
1995
  {visSupportsValueAxisLabels() && (
@@ -1924,7 +1998,7 @@ const EditorPanel = () => {
1924
1998
  section='xAxis'
1925
1999
  fieldName='hideLabel'
1926
2000
  label='Hide Tick Labels'
1927
- updateField={updateField}
2001
+ updateField={updateFieldDeprecated}
1928
2002
  />
1929
2003
  )}
1930
2004
  {visSupportsValueAxisTicks() && (
@@ -1933,7 +2007,7 @@ const EditorPanel = () => {
1933
2007
  section='xAxis'
1934
2008
  fieldName='hideTicks'
1935
2009
  label='Hide Ticks'
1936
- updateField={updateField}
2010
+ updateField={updateFieldDeprecated}
1937
2011
  />
1938
2012
  )}
1939
2013
  {visSupportsValueAxisMax() && (
@@ -1944,7 +2018,7 @@ const EditorPanel = () => {
1944
2018
  label='max value'
1945
2019
  type='number'
1946
2020
  placeholder='Auto'
1947
- updateField={updateField}
2021
+ updateField={updateFieldDeprecated}
1948
2022
  />
1949
2023
  )}
1950
2024
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
@@ -1956,7 +2030,7 @@ const EditorPanel = () => {
1956
2030
  type='number'
1957
2031
  label='min value'
1958
2032
  placeholder='Auto'
1959
- updateField={updateField}
2033
+ updateField={updateFieldDeprecated}
1960
2034
  />
1961
2035
  )}
1962
2036
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
@@ -1969,7 +2043,7 @@ const EditorPanel = () => {
1969
2043
  type='number'
1970
2044
  label='Deviation point'
1971
2045
  placeholder='Auto'
1972
- updateField={updateField}
2046
+ updateField={updateFieldDeprecated}
1973
2047
  />
1974
2048
  <TextField
1975
2049
  value={config.xAxis.targetLabel || 'Target'}
@@ -1977,14 +2051,14 @@ const EditorPanel = () => {
1977
2051
  fieldName='targetLabel'
1978
2052
  type='text'
1979
2053
  label='Deviation point Label'
1980
- updateField={updateField}
2054
+ updateField={updateFieldDeprecated}
1981
2055
  />
1982
2056
  <CheckBox
1983
2057
  value={config.xAxis.showTargetLabel}
1984
2058
  section='xAxis'
1985
2059
  fieldName='showTargetLabel'
1986
2060
  label='Show Deviation point label'
1987
- updateField={updateField}
2061
+ updateField={updateFieldDeprecated}
1988
2062
  />
1989
2063
  </>
1990
2064
  )}
@@ -1992,21 +2066,13 @@ const EditorPanel = () => {
1992
2066
  ) : (
1993
2067
  config.visualizationType !== 'Pie' && (
1994
2068
  <>
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
2069
  <CheckBox
2004
2070
  display={!visHasCategoricalAxis()}
2005
2071
  value={config.yAxis.hideAxis}
2006
2072
  section='yAxis'
2007
2073
  fieldName='hideAxis'
2008
2074
  label='Hide Axis'
2009
- updateField={updateField}
2075
+ updateField={updateFieldDeprecated}
2010
2076
  />
2011
2077
  <CheckBox
2012
2078
  display={!visHasCategoricalAxis()}
@@ -2014,7 +2080,7 @@ const EditorPanel = () => {
2014
2080
  section='yAxis'
2015
2081
  fieldName='hideLabel'
2016
2082
  label='Hide Tick Labels'
2017
- updateField={updateField}
2083
+ updateField={updateFieldDeprecated}
2018
2084
  />
2019
2085
  <CheckBox
2020
2086
  display={!visHasCategoricalAxis()}
@@ -2022,7 +2088,7 @@ const EditorPanel = () => {
2022
2088
  section='yAxis'
2023
2089
  fieldName='hideTicks'
2024
2090
  label='Hide Ticks'
2025
- updateField={updateField}
2091
+ updateField={updateFieldDeprecated}
2026
2092
  />
2027
2093
 
2028
2094
  <TextField
@@ -2032,7 +2098,7 @@ const EditorPanel = () => {
2032
2098
  type='number'
2033
2099
  label='left axis max value'
2034
2100
  placeholder='Auto'
2035
- updateField={updateField}
2101
+ updateField={updateFieldDeprecated}
2036
2102
  />
2037
2103
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
2038
2104
  {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
@@ -2044,7 +2110,7 @@ const EditorPanel = () => {
2044
2110
  type='number'
2045
2111
  label='left axis min value'
2046
2112
  placeholder='Auto'
2047
- updateField={updateField}
2113
+ updateField={updateFieldDeprecated}
2048
2114
  />
2049
2115
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2050
2116
  </>
@@ -2319,7 +2385,7 @@ const EditorPanel = () => {
2319
2385
  section='yAxis'
2320
2386
  fieldName='rightLabel'
2321
2387
  label='Label'
2322
- updateField={updateField}
2388
+ updateField={updateFieldDeprecated}
2323
2389
  maxLength={35}
2324
2390
  tooltip={
2325
2391
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2340,7 +2406,7 @@ const EditorPanel = () => {
2340
2406
  fieldName='rightNumTicks'
2341
2407
  label='Number of ticks'
2342
2408
  className='number-narrow'
2343
- updateField={updateField}
2409
+ updateField={updateFieldDeprecated}
2344
2410
  />
2345
2411
  <TextField
2346
2412
  value={config.yAxis.rightAxisSize}
@@ -2349,7 +2415,7 @@ const EditorPanel = () => {
2349
2415
  fieldName='rightAxisSize'
2350
2416
  label='Size (Width)'
2351
2417
  className='number-narrow'
2352
- updateField={updateField}
2418
+ updateField={updateFieldDeprecated}
2353
2419
  />
2354
2420
  <TextField
2355
2421
  value={config.yAxis.rightLabelOffsetSize}
@@ -2358,7 +2424,7 @@ const EditorPanel = () => {
2358
2424
  fieldName='rightLabelOffsetSize'
2359
2425
  label='Label Offset'
2360
2426
  className='number-narrow'
2361
- updateField={updateField}
2427
+ updateField={updateFieldDeprecated}
2362
2428
  />
2363
2429
 
2364
2430
  <span className='divider-heading'>Number Formatting</span>
@@ -2367,7 +2433,7 @@ const EditorPanel = () => {
2367
2433
  section='dataFormat'
2368
2434
  fieldName='rightCommas'
2369
2435
  label='Add commas'
2370
- updateField={updateField}
2436
+ updateField={updateFieldDeprecated}
2371
2437
  />
2372
2438
  <TextField
2373
2439
  value={config.dataFormat.rightRoundTo}
@@ -2376,7 +2442,7 @@ const EditorPanel = () => {
2376
2442
  fieldName='rightRoundTo'
2377
2443
  label='Round to decimal point'
2378
2444
  className='number-narrow'
2379
- updateField={updateField}
2445
+ updateField={updateFieldDeprecated}
2380
2446
  min={0}
2381
2447
  />
2382
2448
  <div className='two-col-inputs'>
@@ -2385,7 +2451,7 @@ const EditorPanel = () => {
2385
2451
  section='dataFormat'
2386
2452
  fieldName='rightPrefix'
2387
2453
  label='Prefix'
2388
- updateField={updateField}
2454
+ updateField={updateFieldDeprecated}
2389
2455
  tooltip={
2390
2456
  <Tooltip style={{ textTransform: 'none' }}>
2391
2457
  <Tooltip.Target>
@@ -2407,7 +2473,7 @@ const EditorPanel = () => {
2407
2473
  section='dataFormat'
2408
2474
  fieldName='rightSuffix'
2409
2475
  label='Suffix'
2410
- updateField={updateField}
2476
+ updateField={updateFieldDeprecated}
2411
2477
  tooltip={
2412
2478
  <Tooltip style={{ textTransform: 'none' }}>
2413
2479
  <Tooltip.Target>
@@ -2431,21 +2497,21 @@ const EditorPanel = () => {
2431
2497
  section='yAxis'
2432
2498
  fieldName='rightHideAxis'
2433
2499
  label='Hide Axis'
2434
- updateField={updateField}
2500
+ updateField={updateFieldDeprecated}
2435
2501
  />
2436
2502
  <CheckBox
2437
2503
  value={config.yAxis.rightHideLabel}
2438
2504
  section='yAxis'
2439
2505
  fieldName='rightHideLabel'
2440
2506
  label='Hide Tick Labels'
2441
- updateField={updateField}
2507
+ updateField={updateFieldDeprecated}
2442
2508
  />
2443
2509
  <CheckBox
2444
2510
  value={config.yAxis.rightHideTicks}
2445
2511
  section='yAxis'
2446
2512
  fieldName='rightHideTicks'
2447
2513
  label='Hide Ticks'
2448
- updateField={updateField}
2514
+ updateField={updateFieldDeprecated}
2449
2515
  />
2450
2516
 
2451
2517
  <TextField
@@ -2455,7 +2521,7 @@ const EditorPanel = () => {
2455
2521
  type='number'
2456
2522
  label='right axis max value'
2457
2523
  placeholder='Auto'
2458
- updateField={updateField}
2524
+ updateField={updateFieldDeprecated}
2459
2525
  />
2460
2526
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
2461
2527
  <TextField
@@ -2465,7 +2531,7 @@ const EditorPanel = () => {
2465
2531
  type='number'
2466
2532
  label='right axis min value'
2467
2533
  placeholder='Auto'
2468
- updateField={updateField}
2534
+ updateField={updateFieldDeprecated}
2469
2535
  />
2470
2536
  <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2471
2537
  </AccordionItemPanel>
@@ -2526,7 +2592,7 @@ const EditorPanel = () => {
2526
2592
  section='xAxis'
2527
2593
  fieldName='manual'
2528
2594
  label='Manual Ticks'
2529
- updateField={updateField}
2595
+ updateField={updateFieldDeprecated}
2530
2596
  />
2531
2597
  <CheckBox
2532
2598
  display={config.xAxis.type !== 'categorical'}
@@ -2534,7 +2600,7 @@ const EditorPanel = () => {
2534
2600
  section='xAxis'
2535
2601
  fieldName='sortByRecentDate'
2536
2602
  label='Show dates newest to oldest'
2537
- updateField={updateField}
2603
+ updateField={updateFieldDeprecated}
2538
2604
  />
2539
2605
 
2540
2606
  {visSupportsDateCategoryAxisPadding() && (
@@ -2546,7 +2612,7 @@ const EditorPanel = () => {
2546
2612
  fieldName='padding'
2547
2613
  label={'Padding (Percent)'}
2548
2614
  className='number-narrow'
2549
- updateField={updateField}
2615
+ updateField={updateFieldDeprecated}
2550
2616
  tooltip={
2551
2617
  <Tooltip style={{ textTransform: 'none' }}>
2552
2618
  <Tooltip.Target>
@@ -2571,7 +2637,7 @@ const EditorPanel = () => {
2571
2637
  label='Data Key'
2572
2638
  initial='Select'
2573
2639
  required={true}
2574
- updateField={updateField}
2640
+ updateField={updateFieldDeprecated}
2575
2641
  options={getColumns(false)}
2576
2642
  tooltip={
2577
2643
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2595,7 +2661,7 @@ const EditorPanel = () => {
2595
2661
  label='Segment Labels'
2596
2662
  initial='Select'
2597
2663
  required={true}
2598
- updateField={updateField}
2664
+ updateField={updateFieldDeprecated}
2599
2665
  options={getColumns(false)}
2600
2666
  tooltip={
2601
2667
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2620,7 +2686,7 @@ const EditorPanel = () => {
2620
2686
  section='xAxis'
2621
2687
  fieldName='label'
2622
2688
  label='Label'
2623
- updateField={updateField}
2689
+ updateField={updateFieldDeprecated}
2624
2690
  maxLength={35}
2625
2691
  tooltip={
2626
2692
  <Tooltip style={{ textTransform: 'none' }}>
@@ -2641,7 +2707,7 @@ const EditorPanel = () => {
2641
2707
  section='dataFormat'
2642
2708
  fieldName='bottomPrefix'
2643
2709
  label='Prefix'
2644
- updateField={updateField}
2710
+ updateField={updateFieldDeprecated}
2645
2711
  tooltip={
2646
2712
  <Tooltip style={{ textTransform: 'none' }}>
2647
2713
  <Tooltip.Target>
@@ -2662,7 +2728,7 @@ const EditorPanel = () => {
2662
2728
  section='dataFormat'
2663
2729
  fieldName='bottomSuffix'
2664
2730
  label='Suffix'
2665
- updateField={updateField}
2731
+ updateField={updateFieldDeprecated}
2666
2732
  tooltip={
2667
2733
  <Tooltip style={{ textTransform: 'none' }}>
2668
2734
  <Tooltip.Target>
@@ -2683,7 +2749,7 @@ const EditorPanel = () => {
2683
2749
  section='dataFormat'
2684
2750
  fieldName='bottomAbbreviated'
2685
2751
  label='Abbreviate Axis Values'
2686
- updateField={updateField}
2752
+ updateField={updateFieldDeprecated}
2687
2753
  tooltip={
2688
2754
  <Tooltip style={{ textTransform: 'none' }}>
2689
2755
  <Tooltip.Target>
@@ -2732,7 +2798,7 @@ const EditorPanel = () => {
2732
2798
  fieldName='dateParseFormat'
2733
2799
  placeholder='Ex. %Y-%m-%d'
2734
2800
  label='Date Parse Format'
2735
- updateField={updateField}
2801
+ updateField={updateFieldDeprecated}
2736
2802
  />
2737
2803
  <TextField
2738
2804
  tooltip={
@@ -2756,7 +2822,7 @@ const EditorPanel = () => {
2756
2822
  fieldName='dateDisplayFormat'
2757
2823
  placeholder='Ex. %Y-%m-%d'
2758
2824
  label='AXIS DATE DISPLAY FORMAT'
2759
- updateField={updateField}
2825
+ updateField={updateFieldDeprecated}
2760
2826
  />
2761
2827
  <TextField
2762
2828
  tooltip={
@@ -2780,7 +2846,7 @@ const EditorPanel = () => {
2780
2846
  fieldName='dateDisplayFormat'
2781
2847
  placeholder='Ex. %Y-%m-%d'
2782
2848
  label='DATA TABLE DATE DISPLAY FORMAT'
2783
- updateField={updateField}
2849
+ updateField={updateFieldDeprecated}
2784
2850
  />
2785
2851
  <TextField
2786
2852
  tooltip={
@@ -2804,7 +2870,7 @@ const EditorPanel = () => {
2804
2870
  fieldName='dateDisplayFormat'
2805
2871
  placeholder='Ex. %Y-%m-%d'
2806
2872
  label='HOVER DATE DISPLAY FORMAT'
2807
- updateField={updateField}
2873
+ updateField={updateFieldDeprecated}
2808
2874
  />
2809
2875
  </>
2810
2876
  )}
@@ -2833,7 +2899,7 @@ const EditorPanel = () => {
2833
2899
  </Tooltip.Content>
2834
2900
  </Tooltip>
2835
2901
  }
2836
- updateField={updateField}
2902
+ updateField={updateFieldDeprecated}
2837
2903
  />
2838
2904
  <CheckBox
2839
2905
  value={config.xAxis.showYearsOnce}
@@ -2856,15 +2922,15 @@ const EditorPanel = () => {
2856
2922
  </Tooltip.Content>
2857
2923
  </Tooltip>
2858
2924
  }
2859
- updateField={updateField}
2925
+ updateField={updateFieldDeprecated}
2860
2926
  />
2861
2927
  {visHasBrushChart() && (
2862
2928
  <CheckBox
2863
- value={config.brush?.active}
2929
+ value={config.brush.active}
2864
2930
  section='brush'
2865
2931
  fieldName='active'
2866
2932
  label='Brush Slider '
2867
- updateField={updateField}
2933
+ updateField={updateFieldDeprecated}
2868
2934
  tooltip={
2869
2935
  <Tooltip style={{ textTransform: 'none' }}>
2870
2936
  <Tooltip.Target>
@@ -2919,7 +2985,7 @@ const EditorPanel = () => {
2919
2985
  section='exclusions'
2920
2986
  fieldName='dateStart'
2921
2987
  label='Start Date'
2922
- updateField={updateField}
2988
+ updateField={updateFieldDeprecated}
2923
2989
  value={config.exclusions.dateStart || ''}
2924
2990
  />
2925
2991
  <TextField
@@ -2927,7 +2993,7 @@ const EditorPanel = () => {
2927
2993
  section='exclusions'
2928
2994
  fieldName='dateEnd'
2929
2995
  label='End Date'
2930
- updateField={updateField}
2996
+ updateField={updateFieldDeprecated}
2931
2997
  value={config.exclusions.dateEnd || ''}
2932
2998
  />
2933
2999
  </>
@@ -2948,7 +3014,7 @@ const EditorPanel = () => {
2948
3014
  fieldName='manualStep'
2949
3015
  label='Step count'
2950
3016
  className='number-narrow'
2951
- updateField={updateField}
3017
+ updateField={updateFieldDeprecated}
2952
3018
  tooltip={
2953
3019
  <Tooltip style={{ textTransform: 'none' }}>
2954
3020
  <Tooltip.Target>
@@ -3015,7 +3081,7 @@ const EditorPanel = () => {
3015
3081
  fieldName='numTicks'
3016
3082
  label='Number of ticks'
3017
3083
  className='number-narrow'
3018
- updateField={updateField}
3084
+ updateField={updateFieldDeprecated}
3019
3085
  tooltip={
3020
3086
  <Tooltip style={{ textTransform: 'none' }}>
3021
3087
  <Tooltip.Target>
@@ -3079,7 +3145,7 @@ const EditorPanel = () => {
3079
3145
  fieldName='size'
3080
3146
  label={config.orientation === 'horizontal' ? 'Size (Width)' : 'Size (Height)'}
3081
3147
  className='number-narrow'
3082
- updateField={updateField}
3148
+ updateField={updateFieldDeprecated}
3083
3149
  />
3084
3150
  )}
3085
3151
  {config.orientation === 'horizontal' && (
@@ -3090,12 +3156,12 @@ const EditorPanel = () => {
3090
3156
  label='Label offset'
3091
3157
  type='number'
3092
3158
  className='number-narrow'
3093
- updateField={updateField}
3159
+ updateField={updateFieldDeprecated}
3094
3160
  />
3095
3161
  )}
3096
3162
 
3097
3163
  {/* 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} /> */}
3164
+ {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateFieldDeprecated} /> */}
3099
3165
  {(config.xAxis.type === 'continuous' || config.forestPlot.type === 'Logarithmic') && (
3100
3166
  <>
3101
3167
  <CheckBox
@@ -3103,7 +3169,7 @@ const EditorPanel = () => {
3103
3169
  section='dataFormat'
3104
3170
  fieldName='bottomCommas'
3105
3171
  label='Add commas'
3106
- updateField={updateField}
3172
+ updateField={updateFieldDeprecated}
3107
3173
  />
3108
3174
  <TextField
3109
3175
  value={config.dataFormat.bottomRoundTo}
@@ -3112,7 +3178,7 @@ const EditorPanel = () => {
3112
3178
  fieldName='bottomRoundTo'
3113
3179
  label='Round to decimal point'
3114
3180
  className='number-narrow'
3115
- updateField={updateField}
3181
+ updateField={updateFieldDeprecated}
3116
3182
  min={0}
3117
3183
  />
3118
3184
  </>
@@ -3124,7 +3190,7 @@ const EditorPanel = () => {
3124
3190
  value={config.isResponsiveTicks}
3125
3191
  fieldName='isResponsiveTicks'
3126
3192
  label='Use Responsive Ticks'
3127
- updateField={updateField}
3193
+ updateField={updateFieldDeprecated}
3128
3194
  />
3129
3195
  )}
3130
3196
  {(config.orientation === 'horizontal' || !config.isResponsiveTicks) &&
@@ -3137,7 +3203,7 @@ const EditorPanel = () => {
3137
3203
  fieldName='tickRotation'
3138
3204
  label='Tick rotation (Degrees)'
3139
3205
  className='number-narrow'
3140
- updateField={updateField}
3206
+ updateField={updateFieldDeprecated}
3141
3207
  />
3142
3208
  )}
3143
3209
  {config.orientation === 'vertical' &&
@@ -3151,7 +3217,7 @@ const EditorPanel = () => {
3151
3217
  fieldName='maxTickRotation'
3152
3218
  label='Max Tick Rotation'
3153
3219
  className='number-narrow'
3154
- updateField={updateField}
3220
+ updateField={updateFieldDeprecated}
3155
3221
  tooltip={
3156
3222
  <Tooltip style={{ textTransform: 'none' }}>
3157
3223
  <Tooltip.Target>
@@ -3178,7 +3244,7 @@ const EditorPanel = () => {
3178
3244
  section='yAxis'
3179
3245
  fieldName='hideAxis'
3180
3246
  label='Hide Axis'
3181
- updateField={updateField}
3247
+ updateField={updateFieldDeprecated}
3182
3248
  />
3183
3249
  )}
3184
3250
  {visSupportsDateCategoryAxisLabel() && (
@@ -3187,7 +3253,7 @@ const EditorPanel = () => {
3187
3253
  section='yAxis'
3188
3254
  fieldName='hideLabel'
3189
3255
  label='Hide Tick Labels'
3190
- updateField={updateField}
3256
+ updateField={updateFieldDeprecated}
3191
3257
  />
3192
3258
  )}
3193
3259
  </>
@@ -3199,7 +3265,7 @@ const EditorPanel = () => {
3199
3265
  section='xAxis'
3200
3266
  fieldName='hideAxis'
3201
3267
  label='Hide Axis'
3202
- updateField={updateField}
3268
+ updateField={updateFieldDeprecated}
3203
3269
  />
3204
3270
  )}
3205
3271
  {visSupportsDateCategoryAxisLabel() && (
@@ -3208,7 +3274,7 @@ const EditorPanel = () => {
3208
3274
  section='xAxis'
3209
3275
  fieldName='hideLabel'
3210
3276
  label='Hide Tick Labels'
3211
- updateField={updateField}
3277
+ updateField={updateFieldDeprecated}
3212
3278
  />
3213
3279
  )}
3214
3280
  {visSupportsDateCategoryAxisTicks() && (
@@ -3217,7 +3283,7 @@ const EditorPanel = () => {
3217
3283
  section='xAxis'
3218
3284
  fieldName='hideTicks'
3219
3285
  label='Hide Ticks'
3220
- updateField={updateField}
3286
+ updateField={updateFieldDeprecated}
3221
3287
  />
3222
3288
  )}
3223
3289
  </>
@@ -3304,7 +3370,7 @@ const EditorPanel = () => {
3304
3370
  section='exclusions'
3305
3371
  fieldName='active'
3306
3372
  label={'Exclude one or more values'}
3307
- updateField={updateField}
3373
+ updateField={updateFieldDeprecated}
3308
3374
  tooltip={
3309
3375
  <Tooltip style={{ textTransform: 'none' }}>
3310
3376
  <Tooltip.Target>
@@ -3357,7 +3423,7 @@ const EditorPanel = () => {
3357
3423
  type='number'
3358
3424
  label='min value'
3359
3425
  placeholder='Auto'
3360
- updateField={updateField}
3426
+ updateField={updateFieldDeprecated}
3361
3427
  />
3362
3428
  )}
3363
3429
 
@@ -3369,7 +3435,7 @@ const EditorPanel = () => {
3369
3435
  type='number'
3370
3436
  label='max value'
3371
3437
  placeholder='Auto'
3372
- updateField={updateField}
3438
+ updateField={updateFieldDeprecated}
3373
3439
  />
3374
3440
  )}
3375
3441
 
@@ -3640,7 +3706,11 @@ const EditorPanel = () => {
3640
3706
  <AccordionItemButton>Columns</AccordionItemButton>
3641
3707
  </AccordionItemHeading>
3642
3708
  <AccordionItemPanel>
3643
- <ColumnsEditor config={config} updateField={updateField} deleteColumn={removeAdditionalColumn} />{' '}
3709
+ <ColumnsEditor
3710
+ config={config}
3711
+ updateField={updateFieldDeprecated}
3712
+ deleteColumn={removeAdditionalColumn}
3713
+ />{' '}
3644
3714
  </AccordionItemPanel>
3645
3715
  </AccordionItem>
3646
3716
  )}
@@ -3656,7 +3726,7 @@ const EditorPanel = () => {
3656
3726
  section='legend'
3657
3727
  fieldName='position'
3658
3728
  label='Position'
3659
- updateField={updateField}
3729
+ updateField={updateFieldDeprecated}
3660
3730
  options={['right', 'left', 'bottom', 'top']}
3661
3731
  />
3662
3732
  {(config.legend.position === 'left' ||
@@ -3690,7 +3760,7 @@ const EditorPanel = () => {
3690
3760
  section='legend'
3691
3761
  fieldName='style'
3692
3762
  label='Legend Style'
3693
- updateField={updateField}
3763
+ updateField={updateFieldDeprecated}
3694
3764
  options={getLegendStyleOptions('style')}
3695
3765
  />
3696
3766
 
@@ -3700,7 +3770,7 @@ const EditorPanel = () => {
3700
3770
  fieldName='groupBy'
3701
3771
  initial='Select'
3702
3772
  label='Legend Group By:'
3703
- updateField={updateField}
3773
+ updateField={updateFieldDeprecated}
3704
3774
  options={getLegendStyleOptions('groupBy')}
3705
3775
  />
3706
3776
 
@@ -3723,7 +3793,7 @@ const EditorPanel = () => {
3723
3793
  section='legend'
3724
3794
  fieldName='hasShape'
3725
3795
  label='Shapes'
3726
- updateField={updateField}
3796
+ updateField={updateFieldDeprecated}
3727
3797
  />
3728
3798
 
3729
3799
  <Select
@@ -3732,7 +3802,7 @@ const EditorPanel = () => {
3732
3802
  section='legend'
3733
3803
  fieldName='subStyle'
3734
3804
  label='Gradient Style'
3735
- updateField={updateField}
3805
+ updateField={updateFieldDeprecated}
3736
3806
  options={getLegendStyleOptions('subStyle')}
3737
3807
  />
3738
3808
  <TextField
@@ -3743,7 +3813,7 @@ const EditorPanel = () => {
3743
3813
  section='legend'
3744
3814
  fieldName='tickRotation'
3745
3815
  label='Tick Rotation (Degrees)'
3746
- updateField={updateField}
3816
+ updateField={updateFieldDeprecated}
3747
3817
  />
3748
3818
 
3749
3819
  <CheckBox
@@ -3752,7 +3822,7 @@ const EditorPanel = () => {
3752
3822
  section='legend'
3753
3823
  fieldName='hideSuppressedLabels'
3754
3824
  label='Hide Suppressed Labels'
3755
- updateField={updateField}
3825
+ updateField={updateFieldDeprecated}
3756
3826
  tooltip={
3757
3827
  <Tooltip style={{ textTransform: 'none' }}>
3758
3828
  <Tooltip.Target>
@@ -3776,7 +3846,7 @@ const EditorPanel = () => {
3776
3846
  section='legend'
3777
3847
  fieldName='hideSuppressionLink'
3778
3848
  label='Hide Suppression Definition Link'
3779
- updateField={updateField}
3849
+ updateField={updateFieldDeprecated}
3780
3850
  tooltip={
3781
3851
  <Tooltip style={{ textTransform: 'none' }}>
3782
3852
  <Tooltip.Target>
@@ -3793,8 +3863,8 @@ const EditorPanel = () => {
3793
3863
  />
3794
3864
  {/* {config.visualizationType === 'Box Plot' &&
3795
3865
  <>
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' />
3866
+ <CheckBox value={config.boxplot.legend.displayHowToReadText} fieldName='displayHowToReadText' section='boxplot' subsection='legend' label='Display How To Read Text' updateField={updateFieldDeprecated} />
3867
+ <TextField type='textarea' value={config.boxplot.legend.howToReadText} updateField={updateFieldDeprecated} fieldName='howToReadText' section='boxplot' subsection='legend' label='How to read text' />
3798
3868
  </>
3799
3869
  } */}
3800
3870
  <Select
@@ -3813,7 +3883,7 @@ const EditorPanel = () => {
3813
3883
  fieldName='colorCode'
3814
3884
  label='Color code by category'
3815
3885
  initial='Select'
3816
- updateField={updateField}
3886
+ updateField={updateFieldDeprecated}
3817
3887
  options={getDataValueOptions(data)}
3818
3888
  />
3819
3889
  {visHasLegendAxisAlign() && (
@@ -3822,7 +3892,7 @@ const EditorPanel = () => {
3822
3892
  fieldName='axisAlign'
3823
3893
  section='legend'
3824
3894
  label='Align to Axis on Isolate'
3825
- updateField={updateField}
3895
+ updateField={updateFieldDeprecated}
3826
3896
  />
3827
3897
  )}
3828
3898
  {config.legend.behavior === 'highlight' && config.tooltips.singleSeries && (
@@ -3831,7 +3901,7 @@ const EditorPanel = () => {
3831
3901
  section='legend'
3832
3902
  fieldName='highlightOnHover'
3833
3903
  label='HIGHLIGHT DATA SERIES ON HOVER'
3834
- updateField={updateField}
3904
+ updateField={updateFieldDeprecated}
3835
3905
  />
3836
3906
  )}
3837
3907
  {/* start: isolated values */}
@@ -3862,7 +3932,7 @@ const EditorPanel = () => {
3862
3932
  event.preventDefault()
3863
3933
  const updatedSeriesHighlight = [...config.legend.seriesHighlight]
3864
3934
  updatedSeriesHighlight.splice(i, 1)
3865
- updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
3935
+ updateFieldDeprecated('legend', null, 'seriesHighlight', updatedSeriesHighlight)
3866
3936
  if (!updatedSeriesHighlight.length) {
3867
3937
  handleShowAll()
3868
3938
  }
@@ -3910,7 +3980,7 @@ const EditorPanel = () => {
3910
3980
  section='legend'
3911
3981
  fieldName='reverseLabelOrder'
3912
3982
  label='Reverse Labels'
3913
- updateField={updateField}
3983
+ updateField={updateFieldDeprecated}
3914
3984
  />
3915
3985
  <CheckBox
3916
3986
  display={!config.legend.hide}
@@ -3923,7 +3993,7 @@ const EditorPanel = () => {
3923
3993
  subsection='hideBorder'
3924
3994
  fieldName={['left', 'right'].includes(config.legend.position) ? 'side' : 'topBottom'}
3925
3995
  label='Hide Legend Box'
3926
- updateField={updateField}
3996
+ updateField={updateFieldDeprecated}
3927
3997
  tooltip={
3928
3998
  <Tooltip style={{ textTransform: 'none' }}>
3929
3999
  <Tooltip.Target>
@@ -3948,7 +4018,7 @@ const EditorPanel = () => {
3948
4018
  section='legend'
3949
4019
  fieldName='singleRow'
3950
4020
  label='Single Row Legend'
3951
- updateField={updateField}
4021
+ updateField={updateFieldDeprecated}
3952
4022
  />
3953
4023
  <CheckBox
3954
4024
  display={
@@ -3962,14 +4032,14 @@ const EditorPanel = () => {
3962
4032
  section='legend'
3963
4033
  fieldName='verticalSorted'
3964
4034
  label='Vertical sorted Legend'
3965
- updateField={updateField}
4035
+ updateField={updateFieldDeprecated}
3966
4036
  />
3967
4037
  <CheckBox
3968
4038
  value={config.legend.hide ? true : false}
3969
4039
  section='legend'
3970
4040
  fieldName='hide'
3971
4041
  label='Hide Legend'
3972
- updateField={updateField}
4042
+ updateField={updateFieldDeprecated}
3973
4043
  tooltip={
3974
4044
  <Tooltip style={{ textTransform: 'none' }}>
3975
4045
  <Tooltip.Target>
@@ -3989,12 +4059,12 @@ const EditorPanel = () => {
3989
4059
  section='legend'
3990
4060
  fieldName='label'
3991
4061
  label='Title'
3992
- updateField={updateField}
4062
+ updateField={updateFieldDeprecated}
3993
4063
  />
3994
4064
  <TextField
3995
4065
  type='textarea'
3996
4066
  value={config.legend.description}
3997
- updateField={updateField}
4067
+ updateField={updateFieldDeprecated}
3998
4068
  section='legend'
3999
4069
  fieldName='description'
4000
4070
  label='Legend Description'
@@ -4004,7 +4074,7 @@ const EditorPanel = () => {
4004
4074
  section='legend'
4005
4075
  fieldName='unified'
4006
4076
  label='Unified Legend'
4007
- updateField={updateField}
4077
+ updateField={updateFieldDeprecated}
4008
4078
  tooltip={
4009
4079
  <Tooltip style={{ textTransform: 'none' }}>
4010
4080
  <Tooltip.Target>
@@ -4026,14 +4096,29 @@ const EditorPanel = () => {
4026
4096
  </AccordionItem>
4027
4097
  )}
4028
4098
  {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>
4099
+ <>
4100
+ <AccordionItem>
4101
+ <AccordionItemHeading>
4102
+ <AccordionItemButton>Filters</AccordionItemButton>
4103
+ </AccordionItemHeading>
4104
+ <AccordionItemPanel>
4105
+ <VizFilterEditor
4106
+ config={config}
4107
+ updateField={updateField}
4108
+ rawData={rawData}
4109
+ hasFootnotes={isDashboard}
4110
+ />
4111
+ </AccordionItemPanel>
4112
+ </AccordionItem>
4113
+ <AccordionItem>
4114
+ <AccordionItemHeading>
4115
+ <AccordionItemButton>Footnotes</AccordionItemButton>
4116
+ </AccordionItemHeading>
4117
+ <AccordionItemPanel>
4118
+ <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
4119
+ </AccordionItemPanel>
4120
+ </AccordionItem>
4121
+ </>
4037
4122
  )}
4038
4123
  <Panels.Visual name='Visual' />
4039
4124
  {/* Spark Line has no data table */}
@@ -4046,7 +4131,7 @@ const EditorPanel = () => {
4046
4131
  <DataTableEditor
4047
4132
  config={config}
4048
4133
  columns={Object.keys(data[0] || {})}
4049
- updateField={updateField}
4134
+ updateField={updateFieldDeprecated}
4050
4135
  isDashboard={isDashboard}
4051
4136
  isLoadedFromUrl={isLoadedFromUrl}
4052
4137
  />{' '}