@cdc/chart 4.26.5 → 4.26.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 (91) hide show
  1. package/CONFIG.md +12 -8
  2. package/dist/{cdcchart-DQ00cQCm.es.js → cdcchart-BWVIUcAF.es.js} +5 -55
  3. package/dist/cdcchart.js +34093 -32767
  4. package/examples/feature/heatmap/average-age-categorical.json +1 -1
  5. package/examples/feature/heatmap/calendar-heatmap.json +1 -1
  6. package/examples/feature/heatmap/sparse-aggregation.json +1 -1
  7. package/examples/private/bad-y-axis.json +543 -0
  8. package/examples/private/bar-chart-negative-value.json +455 -0
  9. package/package.json +3 -3
  10. package/src/CdcChart.tsx +5 -4
  11. package/src/CdcChartComponent.tsx +32 -9
  12. package/src/_stories/Chart.SeriesColorAssignments.stories.tsx +183 -0
  13. package/src/_stories/Chart.YAxisAutoMaxStrategy.stories.tsx +52 -0
  14. package/src/_stories/Chart.YAxisFilterDomain.stories.tsx +90 -0
  15. package/src/_stories/ChartAnnotation.smoke.stories.tsx +10 -0
  16. package/src/_stories/_mock/annotation_event-line_mock.json +1064 -0
  17. package/src/_stories/_mock/heatmap-average-age-categorical.json +1 -1
  18. package/src/_stories/_mock/heatmap.json +1 -1
  19. package/src/components/Annotations/components/AnnotationDraggable.styles.css +22 -1
  20. package/src/components/Annotations/components/AnnotationDraggable.tsx +219 -119
  21. package/src/components/Annotations/tests/AnnotationDraggable.test.tsx +198 -0
  22. package/src/components/Axis/LeftAxis.tsx +3 -0
  23. package/src/components/Axis/LeftAxisGridlines.tsx +8 -1
  24. package/src/components/Axis/RightAxis.tsx +3 -0
  25. package/src/components/Axis/tests/AxisTickValues.test.tsx +86 -0
  26. package/src/components/EditorPanel/EditorPanel.tsx +367 -136
  27. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +101 -52
  28. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.test.tsx +98 -0
  29. package/src/components/EditorPanel/components/Panels/Panel.SmallMultiples.tsx +10 -0
  30. package/src/components/EditorPanel/components/Panels/Panel.Visual.test.tsx +484 -0
  31. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +3 -0
  32. package/src/components/EditorPanel/components/Panels/SeriesColorAssignments.tsx +262 -0
  33. package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +32 -0
  34. package/src/components/EditorPanel/components/panels.scss +10 -0
  35. package/src/components/EditorPanel/editor-panel.scss +47 -0
  36. package/src/components/EditorPanel/helpers/getVisualizationTypeConfigUpdate.ts +6 -2
  37. package/src/components/EditorPanel/helpers/tests/getVisualizationTypeConfigUpdate.test.ts +20 -2
  38. package/src/components/EditorPanel/useEditorPermissions.test.tsx +256 -11
  39. package/src/components/EditorPanel/useEditorPermissions.ts +41 -5
  40. package/src/components/HeatMap/components/HeatMap.tsx +22 -17
  41. package/src/components/HeatMap/components/HeatMapGradientLegend.tsx +29 -15
  42. package/src/components/HeatMap/heatmap.css +15 -1
  43. package/src/components/HeatMap/tests/HeatMap.test.tsx +39 -7
  44. package/src/components/Legend/Legend.Component.tsx +2 -2
  45. package/src/components/Legend/helpers/createFormatLabels.test.ts +88 -0
  46. package/src/components/Legend/helpers/createFormatLabels.tsx +6 -1
  47. package/src/components/LineChart/helpers.test.ts +230 -1
  48. package/src/components/LineChart/helpers.ts +26 -13
  49. package/src/components/LineChart/index.tsx +21 -4
  50. package/src/components/LinearChart/tests/LinearChart.test.tsx +30 -0
  51. package/src/components/LinearChart.tsx +50 -15
  52. package/src/components/ScatterPlot/ScatterPlot.jsx +3 -3
  53. package/src/components/SmallMultiples/SmallMultipleTile.tsx +3 -0
  54. package/src/components/SmallMultiples/SmallMultiples.tsx +38 -9
  55. package/src/components/SmallMultiples/tests/SmallMultiples.test.tsx +170 -0
  56. package/src/data/initial-state.js +1 -0
  57. package/src/helpers/calculateLeftYAxisWidth.ts +9 -3
  58. package/src/helpers/colorAssignmentHelpers.ts +102 -0
  59. package/src/helpers/dataHelpers.ts +11 -1
  60. package/src/helpers/getAxisMaxOverride.ts +16 -0
  61. package/src/helpers/getCleanTopTickMax.ts +64 -0
  62. package/src/helpers/getColorScale.ts +18 -9
  63. package/src/helpers/getHasBoundarySuppression.ts +26 -0
  64. package/src/helpers/getMinMax.ts +24 -22
  65. package/src/helpers/getYAxisDomainData.ts +38 -0
  66. package/src/helpers/getYAxisFinalizationEligibility.ts +40 -0
  67. package/src/helpers/hasSpacedInlineLabel.ts +10 -0
  68. package/src/helpers/seriesColumnSettings.ts +5 -4
  69. package/src/helpers/smallMultiplesHelpers.ts +5 -0
  70. package/src/helpers/tests/calculateLeftYAxisWidth.test.ts +38 -0
  71. package/src/helpers/tests/dataHelpers.test.ts +135 -0
  72. package/src/helpers/tests/getAxisMaxOverride.test.ts +36 -0
  73. package/src/helpers/tests/getCleanTopTickMax.test.ts +165 -0
  74. package/src/helpers/tests/getColorScale.test.ts +197 -0
  75. package/src/helpers/tests/getMinMax.test.ts +211 -0
  76. package/src/helpers/tests/getYAxisDomainData.test.ts +119 -0
  77. package/src/helpers/tests/getYAxisFinalizationEligibility.test.ts +185 -0
  78. package/src/helpers/tests/{getYAxisAutoPaddingMode.test.ts → hasSpacedInlineLabel.test.ts} +17 -32
  79. package/src/helpers/tests/seriesColumnSettings.test.ts +16 -2
  80. package/src/helpers/tests/smallMultiplesHelpers.test.ts +99 -0
  81. package/src/hooks/tests/useRightAxis.test.tsx +127 -0
  82. package/src/hooks/tests/useScales.test.tsx +307 -29
  83. package/src/hooks/useRightAxis.ts +30 -13
  84. package/src/hooks/useScales.ts +45 -28
  85. package/src/hooks/useTooltip.tsx +3 -1
  86. package/src/test/CdcChart.dataTable.test.tsx +122 -0
  87. package/src/types/ChartConfig.ts +6 -1
  88. package/src/types/ChartContext.ts +3 -0
  89. package/src/helpers/getYAxisAutoPadding.ts +0 -55
  90. package/src/helpers/getYAxisAutoPaddingMode.ts +0 -17
  91. package/src/helpers/tests/getYAxisAutoPadding.test.ts +0 -37
package/src/components/EditorPanel/EditorPanel.tsx CHANGED
@@ -142,7 +142,8 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
142
142
  hideBarSymbol: false,
143
143
  hideLineStyle: false,
144
144
  circleSize: 6,
145
- displayGray: true
145
+ displayGray: true,
146
+ weight: undefined
146
147
  }
147
148
  preliminaryData.push(defaultValues)
148
149
  updateConfig({ ...config, preliminaryData })
@@ -197,7 +198,8 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
197
198
  type,
198
199
  value,
199
200
  hideBarSymbol,
200
- hideLineStyle
201
+ hideLineStyle,
202
+ weight
201
203
  },
202
204
  i
203
205
  ) => (
@@ -296,6 +298,16 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
296
298
  updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
297
299
  options={getStyleOptions(type)}
298
300
  />
301
+ <TextField
302
+ type='number'
303
+ min={1}
304
+ max={9}
305
+ value={weight}
306
+ fieldName='weight'
307
+ label='Line Weight'
308
+ placeholder='Default'
309
+ updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
310
+ />
299
311
  <CheckBox
300
312
  value={hideLineStyle}
301
313
  fieldName='hideLineStyle'
@@ -496,6 +508,18 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
496
508
  updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
497
509
  />
498
510
  )}
511
+ {style && !style.includes('Circles') && (
512
+ <TextField
513
+ type='number'
514
+ min={1}
515
+ max={9}
516
+ value={weight}
517
+ fieldName='weight'
518
+ label='Line Weight'
519
+ placeholder='Default'
520
+ updateField={(_, __, fieldName, value) => update(fieldName, value, i)}
521
+ />
522
+ )}
499
523
  {style !== 'Filled Circles' && (
500
524
  <TextField
501
525
  value={label}
@@ -867,6 +891,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
867
891
  visSupportsDateCategoryNumTicks,
868
892
  visSupportsDateCategoryTickRotation,
869
893
  visSupportsDynamicSeries,
894
+ visSupportsAutoMaxStrategy,
895
+ visSupportsFilterDomainBehavior,
870
896
  visSupportsFilters,
871
897
  visSupportsLeftValueAxis,
872
898
  visSupportsPreliminaryData,
@@ -1225,7 +1251,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
1225
1251
  }
1226
1252
  break
1227
1253
  case 'subStyle':
1228
- if (config.visualizationType === 'Bar') {
1254
+ if (config.visualizationType === 'Bar' || config.visualizationType === 'HeatMap') {
1229
1255
  options.push('linear blocks')
1230
1256
  } else {
1231
1257
  options.push('linear blocks', 'smooth')
@@ -1258,6 +1284,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
1258
1284
  return unique ? [...new Set(values)] : values
1259
1285
  }
1260
1286
 
1287
+ const getAvailableExclusionValues = dataKey => {
1288
+ const excludedKeys = (config.exclusions.keys || []).map(String)
1289
+ return getDataValues(dataKey, true).filter(value => !excludedKeys.includes(String(value)))
1290
+ }
1291
+
1261
1292
  // prettier-ignore
1262
1293
  const {
1263
1294
  highlightedBarValues,
@@ -2558,26 +2589,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
2558
2589
  title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
2559
2590
  />
2560
2591
  )}
2561
- {visSupportsYPadding() && (
2562
- <CheckBox
2563
- value={config.yAxis.enablePadding}
2564
- section='yAxis'
2565
- fieldName='enablePadding'
2566
- label='Add Padding to Value Axis Scale'
2567
- updateField={updateFieldDeprecated}
2568
- />
2569
- )}
2570
- {config.yAxis.enablePadding && visSupportsYPadding() && (
2571
- <TextField
2572
- type='number'
2573
- section='yAxis'
2574
- fieldName='scalePadding'
2575
- label='Padding Percentage'
2576
- className='number-narrow'
2577
- updateField={updateFieldDeprecated}
2578
- value={config.yAxis.scalePadding}
2579
- />
2580
- )}
2581
2592
  </>
2582
2593
  )}
2583
2594
  <span className='divider-heading'>Number Formatting</span>
@@ -2759,32 +2770,41 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
2759
2770
  updateField={updateFieldDeprecated}
2760
2771
  />
2761
2772
  )}
2762
- {visSupportsValueAxisMax() && (
2763
- <TextField
2764
- value={config.xAxis.max}
2765
- section='xAxis'
2766
- fieldName='max'
2767
- label='max value'
2768
- type='number'
2769
- placeholder='Auto'
2770
- updateField={updateFieldDeprecated}
2771
- />
2772
- )}
2773
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
2774
- {visSupportsValueAxisMin() && (
2775
- <TextField
2776
- value={config.xAxis.min}
2777
- section='xAxis'
2778
- fieldName='min'
2779
- type='number'
2780
- label='min value'
2781
- placeholder='Auto'
2782
- updateField={updateFieldDeprecated}
2783
- />
2784
- )}
2785
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2786
- {config.visualizationType === 'Deviation Bar' && (
2787
- <>
2773
+ <div className='axis-domain-group'>
2774
+ <span className='axis-domain-group__title'>Value Axis Domain</span>
2775
+ <div className='axis-domain-group__row'>
2776
+ {visSupportsValueAxisMax() && (
2777
+ <div className='axis-domain-group__field'>
2778
+ <TextField
2779
+ value={config.xAxis.max}
2780
+ section='xAxis'
2781
+ fieldName='max'
2782
+ label='axis max value'
2783
+ type='number'
2784
+ placeholder='Auto'
2785
+ className='axis-domain-number'
2786
+ updateField={updateFieldDeprecated}
2787
+ />
2788
+ <span className='axis-domain-warning'>{warningMsg.maxMsg}</span>
2789
+ </div>
2790
+ )}
2791
+ {visSupportsValueAxisMin() && (
2792
+ <div className='axis-domain-group__field'>
2793
+ <TextField
2794
+ value={config.xAxis.min}
2795
+ section='xAxis'
2796
+ fieldName='min'
2797
+ type='number'
2798
+ label='axis min value'
2799
+ placeholder='Auto'
2800
+ className='axis-domain-number'
2801
+ updateField={updateFieldDeprecated}
2802
+ />
2803
+ <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
2804
+ </div>
2805
+ )}
2806
+ </div>
2807
+ {config.visualizationType === 'Deviation Bar' && (
2788
2808
  <TextField
2789
2809
  value={config.xAxis.target}
2790
2810
  section='xAxis'
@@ -2792,8 +2812,104 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
2792
2812
  type='number'
2793
2813
  label='Deviation point'
2794
2814
  placeholder='Auto'
2815
+ className='axis-domain-number'
2816
+ updateField={updateFieldDeprecated}
2817
+ />
2818
+ )}
2819
+ <TextField
2820
+ value={config.yAxis.smallestLeftAxisMax}
2821
+ section='yAxis'
2822
+ fieldName='smallestLeftAxisMax'
2823
+ type='number'
2824
+ label='Smallest axis maximum'
2825
+ placeholder='Auto'
2826
+ className='axis-domain-number'
2827
+ tooltip={
2828
+ <Tooltip style={{ textTransform: 'none' }}>
2829
+ <Tooltip.Target>
2830
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
2831
+ </Tooltip.Target>
2832
+ <Tooltip.Content>
2833
+ <p>
2834
+ Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
2835
+ 0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
2836
+ </p>
2837
+ </Tooltip.Content>
2838
+ </Tooltip>
2839
+ }
2840
+ updateField={updateFieldDeprecated}
2841
+ />
2842
+ {visSupportsAutoMaxStrategy() && (
2843
+ <Select
2844
+ value={config.yAxis.autoMaxStrategy || 'default'}
2845
+ section='yAxis'
2846
+ fieldName='autoMaxStrategy'
2847
+ label='Automatic max strategy'
2848
+ updateField={updateFieldDeprecated}
2849
+ options={[
2850
+ { value: 'default', label: 'Default' },
2851
+ { value: 'clean-top-tick', label: 'Clean top tick' }
2852
+ ]}
2853
+ tooltip={
2854
+ <Tooltip style={{ textTransform: 'none' }}>
2855
+ <Tooltip.Target>
2856
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
2857
+ </Tooltip.Target>
2858
+ <Tooltip.Content>
2859
+ {config.visualizationType === 'Combo' ? (
2860
+ <p>
2861
+ Clean top tick rounds automatic left and right axis maximums up to cleaner
2862
+ tick steps before axis padding is applied.
2863
+ </p>
2864
+ ) : (
2865
+ <p>
2866
+ Clean top tick rounds the automatic value axis maximum up to a cleaner tick
2867
+ step before axis padding is applied.
2868
+ </p>
2869
+ )}
2870
+ </Tooltip.Content>
2871
+ </Tooltip>
2872
+ }
2873
+ />
2874
+ )}
2875
+ {visSupportsFilterDomainBehavior() && (
2876
+ <Select
2877
+ value={config.yAxis.filterDomainBehavior || 'dynamic'}
2878
+ section='yAxis'
2879
+ fieldName='filterDomainBehavior'
2880
+ label='Filter Domain Behavior'
2795
2881
  updateField={updateFieldDeprecated}
2882
+ options={[
2883
+ { value: 'dynamic', label: 'Dynamic' },
2884
+ { value: 'stable', label: 'Stable' }
2885
+ ]}
2886
+ tooltip={
2887
+ <Tooltip style={{ textTransform: 'none' }}>
2888
+ <Tooltip.Target>
2889
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
2890
+ </Tooltip.Target>
2891
+ <Tooltip.Content>
2892
+ {config.visualizationType === 'Combo' ? (
2893
+ <p>
2894
+ Dynamic rescales the value axes to the currently filtered data. Stable keeps
2895
+ the left and right axes based on the full eligible dataset while still
2896
+ rendering filtered rows.
2897
+ </p>
2898
+ ) : (
2899
+ <p>
2900
+ Dynamic rescales the value axis to the currently filtered data. Stable keeps
2901
+ the value axis based on the full eligible dataset while still rendering
2902
+ filtered rows.
2903
+ </p>
2904
+ )}
2905
+ </Tooltip.Content>
2906
+ </Tooltip>
2907
+ }
2796
2908
  />
2909
+ )}
2910
+ </div>
2911
+ {config.visualizationType === 'Deviation Bar' && (
2912
+ <>
2797
2913
  <TextField
2798
2914
  value={config.xAxis.targetLabel || 'Target'}
2799
2915
  section='xAxis'
@@ -2841,52 +2957,151 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
2841
2957
  updateField={updateFieldDeprecated}
2842
2958
  />
2843
2959
 
2844
- <TextField
2845
- value={config.yAxis.max}
2846
- section='yAxis'
2847
- fieldName='max'
2848
- type='number'
2849
- label='left axis max value'
2850
- placeholder='Auto'
2851
- updateField={updateFieldDeprecated}
2852
- />
2853
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
2854
- {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
2855
- <>
2856
- <TextField
2857
- value={config.yAxis.min}
2960
+ <div className='axis-domain-group'>
2961
+ <span className='axis-domain-group__title'>Value Axis Domain</span>
2962
+ <div className='axis-domain-group__row'>
2963
+ <div className='axis-domain-group__field'>
2964
+ <TextField
2965
+ value={config.yAxis.max}
2966
+ section='yAxis'
2967
+ fieldName='max'
2968
+ type='number'
2969
+ label='axis max value'
2970
+ placeholder='Auto'
2971
+ className='axis-domain-number'
2972
+ updateField={updateFieldDeprecated}
2973
+ />
2974
+ <span className='axis-domain-warning'>{warningMsg.maxMsg}</span>
2975
+ </div>
2976
+ {config.visualizationType !== 'Area Chart' &&
2977
+ config.visualizationSubType !== 'stacked' && (
2978
+ <div className='axis-domain-group__field'>
2979
+ <TextField
2980
+ value={config.yAxis.min}
2981
+ section='yAxis'
2982
+ fieldName='min'
2983
+ type='number'
2984
+ label='axis min value'
2985
+ placeholder='Auto'
2986
+ className='axis-domain-number'
2987
+ updateField={updateFieldDeprecated}
2988
+ />
2989
+ <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
2990
+ </div>
2991
+ )}
2992
+ </div>
2993
+ <TextField
2994
+ value={config.yAxis.smallestLeftAxisMax}
2995
+ section='yAxis'
2996
+ fieldName='smallestLeftAxisMax'
2997
+ type='number'
2998
+ label='Smallest axis maximum'
2999
+ placeholder='Auto'
3000
+ className='axis-domain-number'
3001
+ tooltip={
3002
+ <Tooltip style={{ textTransform: 'none' }}>
3003
+ <Tooltip.Target>
3004
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
3005
+ </Tooltip.Target>
3006
+ <Tooltip.Content>
3007
+ <p>
3008
+ Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
3009
+ 0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
3010
+ </p>
3011
+ </Tooltip.Content>
3012
+ </Tooltip>
3013
+ }
3014
+ updateField={updateFieldDeprecated}
3015
+ />
3016
+ {visSupportsAutoMaxStrategy() && (
3017
+ <Select
3018
+ value={config.yAxis.autoMaxStrategy || 'default'}
3019
+ section='yAxis'
3020
+ fieldName='autoMaxStrategy'
3021
+ label='Automatic max strategy'
3022
+ updateField={updateFieldDeprecated}
3023
+ options={[
3024
+ { value: 'default', label: 'Default' },
3025
+ { value: 'clean-top-tick', label: 'Clean top tick' }
3026
+ ]}
3027
+ tooltip={
3028
+ <Tooltip style={{ textTransform: 'none' }}>
3029
+ <Tooltip.Target>
3030
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
3031
+ </Tooltip.Target>
3032
+ <Tooltip.Content>
3033
+ {config.visualizationType === 'Combo' ? (
3034
+ <p>
3035
+ Clean top tick rounds automatic left and right axis maximums up to cleaner
3036
+ tick steps before axis padding is applied.
3037
+ </p>
3038
+ ) : (
3039
+ <p>
3040
+ Clean top tick rounds the automatic value axis maximum up to a cleaner tick
3041
+ step before axis padding is applied.
3042
+ </p>
3043
+ )}
3044
+ </Tooltip.Content>
3045
+ </Tooltip>
3046
+ }
3047
+ />
3048
+ )}
3049
+ {visSupportsFilterDomainBehavior() && (
3050
+ <Select
3051
+ value={config.yAxis.filterDomainBehavior || 'dynamic'}
3052
+ section='yAxis'
3053
+ fieldName='filterDomainBehavior'
3054
+ label='Filter Domain Behavior'
3055
+ updateField={updateFieldDeprecated}
3056
+ options={[
3057
+ { value: 'dynamic', label: 'Dynamic' },
3058
+ { value: 'stable', label: 'Stable' }
3059
+ ]}
3060
+ tooltip={
3061
+ <Tooltip style={{ textTransform: 'none' }}>
3062
+ <Tooltip.Target>
3063
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
3064
+ </Tooltip.Target>
3065
+ <Tooltip.Content>
3066
+ {config.visualizationType === 'Combo' ? (
3067
+ <p>
3068
+ Dynamic rescales the value axes to the currently filtered data. Stable keeps
3069
+ the left and right axes based on the full eligible dataset while still
3070
+ rendering filtered rows.
3071
+ </p>
3072
+ ) : (
3073
+ <p>
3074
+ Dynamic rescales the value axis to the currently filtered data. Stable keeps
3075
+ the value axis based on the full eligible dataset while still rendering
3076
+ filtered rows.
3077
+ </p>
3078
+ )}
3079
+ </Tooltip.Content>
3080
+ </Tooltip>
3081
+ }
3082
+ />
3083
+ )}
3084
+ {visSupportsYPadding() && (
3085
+ <CheckBox
3086
+ value={config.yAxis.enablePadding}
2858
3087
  section='yAxis'
2859
- fieldName='min'
3088
+ fieldName='enablePadding'
3089
+ label='Add Padding to Value Axis Scale'
3090
+ updateField={updateFieldDeprecated}
3091
+ />
3092
+ )}
3093
+ {config.yAxis.enablePadding && visSupportsYPadding() && (
3094
+ <TextField
2860
3095
  type='number'
2861
- label='left axis min value'
2862
- placeholder='Auto'
3096
+ section='yAxis'
3097
+ fieldName='scalePadding'
3098
+ label='Padding Percentage'
3099
+ className='axis-domain-number'
2863
3100
  updateField={updateFieldDeprecated}
3101
+ value={config.yAxis.scalePadding}
2864
3102
  />
2865
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
2866
- </>
2867
- )}
2868
- <TextField
2869
- value={config.yAxis.smallestLeftAxisMax}
2870
- section='yAxis'
2871
- fieldName='smallestLeftAxisMax'
2872
- type='number'
2873
- label='Smallest Left Axis Maximum'
2874
- placeholder='Auto'
2875
- tooltip={
2876
- <Tooltip style={{ textTransform: 'none' }}>
2877
- <Tooltip.Target>
2878
- <Icon display='question' style={{ marginLeft: '0.5rem' }} />
2879
- </Tooltip.Target>
2880
- <Tooltip.Content>
2881
- <p>
2882
- Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
2883
- 0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
2884
- </p>
2885
- </Tooltip.Content>
2886
- </Tooltip>
2887
- }
2888
- updateField={updateFieldDeprecated}
2889
- />
3103
+ )}
3104
+ </div>
2890
3105
  </>
2891
3106
  )
2892
3107
  )}
@@ -3054,48 +3269,60 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
3054
3269
  updateField={updateFieldDeprecated}
3055
3270
  />
3056
3271
 
3057
- <TextField
3058
- value={config.yAxis.rightMax}
3059
- section='yAxis'
3060
- fieldName='rightMax'
3061
- type='number'
3062
- label='right axis max value'
3063
- placeholder='Auto'
3064
- updateField={updateFieldDeprecated}
3065
- />
3066
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
3067
- <TextField
3068
- value={config.yAxis.rightMin}
3069
- section='yAxis'
3070
- fieldName='rightMin'
3071
- type='number'
3072
- label='right axis min value'
3073
- placeholder='Auto'
3074
- updateField={updateFieldDeprecated}
3075
- />
3076
- <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
3077
- <TextField
3078
- value={config.yAxis.smallestRightAxisMax}
3079
- section='yAxis'
3080
- fieldName='smallestRightAxisMax'
3081
- type='number'
3082
- label='Smallest Right Axis Maximum'
3083
- placeholder='Auto'
3084
- tooltip={
3085
- <Tooltip style={{ textTransform: 'none' }}>
3086
- <Tooltip.Target>
3087
- <Icon display='question' style={{ marginLeft: '0.5rem' }} />
3088
- </Tooltip.Target>
3089
- <Tooltip.Content>
3090
- <p>
3091
- Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
3092
- Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
3093
- </p>
3094
- </Tooltip.Content>
3095
- </Tooltip>
3096
- }
3097
- updateField={updateFieldDeprecated}
3098
- />
3272
+ <div className='axis-domain-group'>
3273
+ <span className='axis-domain-group__title'>Right Axis Domain</span>
3274
+ <div className='axis-domain-group__row'>
3275
+ <div className='axis-domain-group__field'>
3276
+ <TextField
3277
+ value={config.yAxis.rightMax}
3278
+ section='yAxis'
3279
+ fieldName='rightMax'
3280
+ type='number'
3281
+ label='axis max value'
3282
+ placeholder='Auto'
3283
+ className='axis-domain-number'
3284
+ updateField={updateFieldDeprecated}
3285
+ />
3286
+ <span className='axis-domain-warning'>{warningMsg.rightMaxMessage}</span>
3287
+ </div>
3288
+ <div className='axis-domain-group__field'>
3289
+ <TextField
3290
+ value={config.yAxis.rightMin}
3291
+ section='yAxis'
3292
+ fieldName='rightMin'
3293
+ type='number'
3294
+ label='axis min value'
3295
+ placeholder='Auto'
3296
+ className='axis-domain-number'
3297
+ updateField={updateFieldDeprecated}
3298
+ />
3299
+ <span className='axis-domain-warning'>{warningMsg.minMsg}</span>
3300
+ </div>
3301
+ </div>
3302
+ <TextField
3303
+ value={config.yAxis.smallestRightAxisMax}
3304
+ section='yAxis'
3305
+ fieldName='smallestRightAxisMax'
3306
+ type='number'
3307
+ label='Smallest axis maximum'
3308
+ placeholder='Auto'
3309
+ className='axis-domain-number'
3310
+ tooltip={
3311
+ <Tooltip style={{ textTransform: 'none' }}>
3312
+ <Tooltip.Target>
3313
+ <Icon display='question' style={{ marginLeft: '0.5rem' }} />
3314
+ </Tooltip.Target>
3315
+ <Tooltip.Content>
3316
+ <p>
3317
+ Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
3318
+ Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
3319
+ </p>
3320
+ </Tooltip.Content>
3321
+ </Tooltip>
3322
+ }
3323
+ updateField={updateFieldDeprecated}
3324
+ />
3325
+ </div>
3099
3326
  </AccordionItemPanel>
3100
3327
  </AccordionItem>
3101
3328
  )}
@@ -3631,7 +3858,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
3631
3858
  }
3632
3859
  e.target.value = ''
3633
3860
  }}
3634
- options={getDataValues(config.xAxis.dataKey, true)}
3861
+ options={getAvailableExclusionValues(config.xAxis.dataKey)}
3635
3862
  />
3636
3863
  </>
3637
3864
  )}
@@ -4067,7 +4294,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
4067
4294
  }
4068
4295
  e.target.value = ''
4069
4296
  }}
4070
- options={getDataValues(config.xAxis.dataKey, true)}
4297
+ options={getAvailableExclusionValues(config.xAxis.dataKey)}
4071
4298
  />
4072
4299
  </>
4073
4300
  )}
@@ -4242,7 +4469,11 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
4242
4469
  options={getLegendStyleOptions('subStyle')}
4243
4470
  />
4244
4471
  <TextField
4245
- display={config.legend.style === 'gradient' && !config.legend.hide}
4472
+ display={
4473
+ config.visualizationType !== 'HeatMap' &&
4474
+ config.legend.style === 'gradient' &&
4475
+ !config.legend.hide
4476
+ }
4246
4477
  className='number-narrow'
4247
4478
  type='number'
4248
4479
  value={config.legend.tickRotation}