ChartSettingsPanel: Add UI for legend position

Author: labkey-alan

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

@@ -21,6 +21,7 @@ import { useEnterEscape } from '../../../public/useEnterEscape';
 import { ChartLabelInput } from './ChartLabelInput';
 import { ChartColorInputs } from './ChartColorInputs';
 import { Alert } from '../base/Alert';
+import { RadioGroupInput } from '../forms/input/RadioGroupInput';
 
 function changedIntValue(strVal: string, currentVal: number): [value: number, changed: boolean] {
     strVal = strVal.trim();
@@ -279,6 +280,7 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
         setChartConfig,
         setChartModel,
     } = props;
+    const legendPos = chartConfig.legendPos;
     const showTrendline = hasTrendline(chartType);
     const fields = chartType.fields.filter(f => f.name !== 'trendline');
 
@@ -326,6 +328,20 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
         [setChartConfig]
     );
 
+    const legendOptions = useMemo(() => {
+        return [
+            { label: 'Right', selected: !legendPos || legendPos === 'right', value: 'right' },
+            { label: 'Bottom', selected: legendPos === 'bottom', value: 'bottom' },
+        ];
+    }, [legendPos]);
+
+    const onLegendPosChange = useCallback(
+        value => setChartConfig(current => ({ ...current, legendPos: value })),
+        [setChartConfig]
+    );
+
+    const showLegendPos = chartType.name !== 'pie_chart';
+
     return (
         <div className="chart-settings">
             {error && <Alert>{error}</Alert>}
@@ -392,6 +408,22 @@ export const ChartSettingsPanel: FC<Props> = memo(props => {
                 value={chartConfig?.labels?.subtitle}
             />
             <SizeInputs height={chartConfig.height} setChartConfig={setChartConfig} width={chartConfig.width} />
+
+            {showLegendPos && (
+                <div className="chart-settings__legend-pos">
+                    <label>Legend Position</label>
+
+                    <div className="chart-settings__legend-pos-values">
+                        <RadioGroupInput
+                            formsy={false}
+                            name="legendPos"
+                            onValueChange={onLegendPosChange}
+                            options={legendOptions}
+                        />
+                    </div>
+                </div>
+            )}
+
             <ChartColorInputs chartConfig={chartConfig} model={model} setChartConfig={setChartConfig} />
         </div>
     );

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

@@ -18,6 +18,7 @@ export interface ChartConfig {
     gridLinesVisible: string;
     height?: number;
     labels: ChartLabels;
+    legendPos?: 'bottom' | 'right';
     measures: Record<string, Record<string, any>>; // TODO: we can probably do better than any
     measuresOptions?: Record<string, Record<string, MeasureOption>>; // map from measures to the options for the distinct values of that measure
     pointType: string;

packages/components/src/theme/charts.scss

@@ -224,6 +224,19 @@
     margin: 0 0 8px;
 }
 
+.chart-settings__legend-pos-values {
+    display: flex;
+    gap: 8px;
+}
+
+.chart-settings__legend-pos-values .radio-input-wrapper input {
+    margin-right: 4px;
+}
+
+.chart-settings__legend-pos-values .radioinput-label {
+    cursor: pointer;
+}
+
 .chart-builder-modal__chart-preview {
     flex: 3;
     overflow: auto;