ChartBuilderModal: Fix margins for title/subtitle

Author: labkey-alan

packages/components/src/internal/components/chart/ChartBuilderModal.tsx

@@ -149,9 +149,6 @@ const ChartPreview: FC<ChartPreviewProps> = memo(props => {
                     height: 350,
                     width,
                 };
-                if (!savedChartModel || savedChartModel.visualizationConfig.chartConfig.geomOptions.marginTop === 20) {
-                    chartConfig_.geomOptions.marginTop = 15;
-                }
 
                 if (ref.current) ref.current.innerHTML = ''; // clear again, right before render
                 LABKEY_VIS.GenericChartHelper.generateChartSVG(divId, chartConfig_, measureStore, trendlineData);

packages/components/src/internal/components/chart/ChartSettingsPanel.tsx

@@ -27,7 +27,13 @@ const LabelInput: FC<LabelInputProps> = memo(({ label, name, onChange, value })
     return (
         <div>
             <label>{label}</label>
-            <input className="form-control" name={name as string} onChange={onChange_} type="text" value={value} />
+            <input
+                className="form-control"
+                name={name as string}
+                onChange={onChange_}
+                type="text"
+                value={value ?? ''}
+            />
         </div>
     );
 });
@@ -157,7 +163,23 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
 
     const onLabelChange = useCallback(
         (key: LabelKey, value: string) => {
-            setChartConfig(current => ({ ...current, labels: { ...current.labels, [key]: value } }));
+            setChartConfig(current => {
+                const labels = { ...current.labels, [key]: value };
+                let geomOptions = current.geomOptions;
+                let marginTop = 15;
+                const hasTitle = !!labels.main?.trim();
+                const hasSubtitle = !!labels.subtitle?.trim();
+
+                if (hasTitle && hasSubtitle) marginTop += 50;
+                else if (hasTitle) marginTop += 25;
+                // Yes, really, subtitle only gets the most padding. Our charting library is probably setting some
+                // default amount if main is present
+                else if (hasSubtitle) marginTop += 55;
+
+                if (marginTop != geomOptions.marginTop) geomOptions = { ...geomOptions, marginTop };
+
+                return { ...current, labels, geomOptions };
+            });
         },
         [setChartConfig]
     );

packages/components/src/internal/components/chart/utils.ts

@@ -114,7 +114,7 @@ const makeGeomOptions = (chartType: string) => ({
     marginBottom: null,
     marginLeft: null,
     marginRight: null,
-    marginTop: 20, // this will be saved with the chartConfig, but we will override it for the preview in the modal
+    marginTop: 15,
     opacity: chartType === 'bar_chart' || chartType === 'line_plot' ? 1.0 : 0.5,
     pieHideWhenLessThanPercentage: 5,
     pieInnerRadius: 0,