Merge pull request #621 from adobe/clamoureux/legendLabelColumns

Author: marshallpete

packages/constants/constants.ts

@@ -47,6 +47,12 @@ export const DEFAULT_TRANSFORMED_TIME_DIMENSION = `${DEFAULT_TIME_DIMENSION}0`;
 export const DEFAULT_TITLE_FONT_WEIGHT = 'bold';
 export const DEFAULT_INTERACTION_MODE = 'nearest';
 
+// legend constants
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 250;
+export const DEFAULT_LEGEND_SYMBOL_WIDTH = 16; // approximate width for square symbols (√250 ≈ 15.8)
+export const DEFAULT_LEGEND_COLUMN_PADDING = 20;
+export const DEFAULT_LEGEND_LABEL_LIMIT = 184;
+
 // vega data table name
 export const TABLE = 'table';
 export const FILTERED_TABLE = 'filteredTable';

packages/docs/docs/api/components/Legend.md

@@ -64,7 +64,7 @@ The `Legend` component is used to display a legend for the visualization.
       <td>labelLimit</td>
       <td>number</td>
       <td>–</td>
-      <td>Max width in pixels before truncating a legend label. If not specified, labels will not be truncated.</td>
+      <td>Max width in pixels before truncating a legend label. If not specified, labels will not be truncated. Influences legend column layout by calculating how many legend items can fit horizontally based on the label width (for top/bottom positioned legends).</td>
     </tr>
     <tr>
       <td>legendLabels</td>

packages/themes/src/spectrumTheme.ts

@@ -15,6 +15,9 @@ import {
   DEFAULT_BACKGROUND_COLOR,
   DEFAULT_FONT_COLOR,
   DEFAULT_FONT_SIZE,
+  DEFAULT_LEGEND_COLUMN_PADDING,
+  DEFAULT_LEGEND_LABEL_LIMIT,
+  DEFAULT_LEGEND_SYMBOL_SIZE,
   DEFAULT_SYMBOL_SIZE,
   DEFAULT_SYMBOL_STROKE_WIDTH,
   ROUNDED_SQUARE_PATH,
@@ -91,20 +94,20 @@ export function getSpectrumVegaConfig(colorScheme: 'light' | 'dark'): Config {
     },
     background: DEFAULT_BACKGROUND_COLOR,
     legend: {
-      columnPadding: 20,
+      columnPadding: DEFAULT_LEGEND_COLUMN_PADDING,
       labelColor: FONT_COLOR,
       labelFont: ADOBE_CLEAN_FONT,
       labelFontSize: DEFAULT_FONT_SIZE,
       labelFontWeight: 'normal',
-      labelLimit: 184,
+      labelLimit: DEFAULT_LEGEND_LABEL_LIMIT,
       layout: {
         bottom: horizontalLegendLayout,
         top: horizontalLegendLayout,
         left: verticalLegendLayout,
         right: verticalLegendLayout,
       },
       rowPadding: 8,
-      symbolSize: 250,
+      symbolSize: DEFAULT_LEGEND_SYMBOL_SIZE,
       symbolType: ROUNDED_SQUARE_PATH,
       symbolStrokeColor: gray700,
       titleColor: FONT_COLOR,

packages/vega-spec-builder/src/legend/legendSpecBuilder.test.ts

@@ -270,7 +270,7 @@ describe('addLegend()', () => {
       });
       const legend = legendSpec.legends?.[0];
       expect(legend?.labelLimit).toBe(300);
-      expect(legendSpec.legends).toEqual([{ ...defaultLegend, labelLimit: 300, encode: defaultTooltipLegendEncoding }]);
+      expect(legendSpec.legends).toEqual([{ ...defaultLegend, labelLimit: 300, encode: defaultTooltipLegendEncoding, columns: { signal: 'max(1, floor(width / 336))' } }]);
       expect(legendSpec.data).toEqual([defaultLegendAggregateData]);
       expect(legendSpec.scales).toEqual([...(defaultSpec.scales || []), defaultLegendEntriesScale]);
     });

packages/vega-spec-builder/src/legend/legendSpecBuilder.ts

@@ -209,7 +209,7 @@ const getCategoricalLegend = (facets: Facet[], options: LegendSpecOptions): Lege
     orient: position,
     title,
     encode: getEncodings(facets, options),
-    columns: getColumns(position),
+    columns: getColumns(position, labelLimit),
     labelLimit,
   };
   if (titleLimit !== undefined) legend.titleLimit = titleLimit;

packages/vega-spec-builder/src/legend/legendUtils.test.ts

@@ -9,12 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { FILTERED_TABLE } from '@spectrum-charts/constants';
+import { DEFAULT_LEGEND_COLUMN_PADDING, DEFAULT_LEGEND_SYMBOL_WIDTH, FILTERED_TABLE } from '@spectrum-charts/constants';
 import { spectrumColors } from '@spectrum-charts/themes';
 
 import { defaultLegendOptions } from './legendTestUtils';
 import {
   getClickEncodings,
+  getColumns,
   getHiddenSeriesColorRule,
   getSymbolEncodings,
   getSymbolType,
@@ -128,3 +129,55 @@ describe('getHiddenSeriesColorRule()', () => {
     expect(colorRules[0].test).toContain('hiddenSeries');
   });
 });
+
+describe('getColumns()', () => {
+  test('should return undefined for left position', () => {
+    expect(getColumns('left')).toBeUndefined();
+  });
+
+  test('should return undefined for right position', () => {
+    expect(getColumns('right')).toBeUndefined();
+  });
+
+  test('should return default signal for top position without labelLimit', () => {
+    expect(getColumns('top')).toEqual({ signal: 'floor(width / 220)' });
+  });
+
+  test('should return default signal for bottom position without labelLimit', () => {
+    expect(getColumns('bottom')).toEqual({ signal: 'floor(width / 220)' });
+  });
+
+  test('should return default signal when labelLimit is undefined', () => {
+    expect(getColumns('top', undefined)).toEqual({ signal: 'floor(width / 220)' });
+  });
+
+  test('should return default signal when labelLimit is 0', () => {
+    expect(getColumns('bottom', 0)).toEqual({ signal: 'floor(width / 220)' });
+  });
+
+  test('should return default signal when labelLimit is negative', () => {
+    expect(getColumns('top', -10)).toEqual({ signal: 'floor(width / 220)' });
+  });
+
+  test('should calculate columns based on labelLimit when provided', () => {
+    const labelLimit = 100;
+    const expectedItemWidth = labelLimit + DEFAULT_LEGEND_SYMBOL_WIDTH + DEFAULT_LEGEND_COLUMN_PADDING;
+    const expectedSignal = `max(1, floor(width / ${expectedItemWidth}))`;
+    
+    expect(getColumns('top', labelLimit)).toEqual({ signal: expectedSignal });
+  });
+
+  test('should calculate columns with different labelLimit values', () => {
+    const labelLimit50 = 50;
+    const expectedItemWidth50 = 50 + DEFAULT_LEGEND_SYMBOL_WIDTH + DEFAULT_LEGEND_COLUMN_PADDING;
+    expect(getColumns('bottom', labelLimit50)).toEqual({ 
+      signal: `max(1, floor(width / ${expectedItemWidth50}))` 
+    });
+
+    const labelLimit200 = 200;
+    const expectedItemWidth200 = 200 + DEFAULT_LEGEND_SYMBOL_WIDTH + DEFAULT_LEGEND_COLUMN_PADDING; // 200 + 16 + 20 = 236
+    expect(getColumns('top', labelLimit200)).toEqual({ 
+      signal: `max(1, floor(width / ${expectedItemWidth200}))` 
+    });
+  });
+});

packages/vega-spec-builder/src/legend/legendUtils.ts

@@ -26,6 +26,8 @@ import {
 import {
   COLOR_SCALE,
   COMPONENT_NAME,
+  DEFAULT_LEGEND_COLUMN_PADDING,
+  DEFAULT_LEGEND_SYMBOL_WIDTH,
   DEFAULT_OPACITY_RULE,
   FILTERED_TABLE,
   HIGHLIGHTED_GROUP,
@@ -61,10 +63,20 @@ export interface Facet {
 /**
  * Get the number of columns for the legend
  * @param position
+ * @param labelLimit
  * @returns
  */
-export const getColumns = (position: Position): SignalRef | undefined => {
+export const getColumns = (position: Position, labelLimit?: number): SignalRef | undefined => {
   if (['left', 'right'].includes(position)) return;
+  
+  if (labelLimit !== undefined && labelLimit > 0) {
+    const symbolAndSpacingWidth = DEFAULT_LEGEND_SYMBOL_WIDTH + DEFAULT_LEGEND_COLUMN_PADDING;
+    
+    const itemWidth = labelLimit + symbolAndSpacingWidth;
+    return { signal: `max(1, floor(width / ${itemWidth}))` };
+  }
+  
+  // Keeping hardcoded 220 for so we don't break existing behavior.
   return { signal: 'floor(width / 220)' };
 };
 

packages/vega-spec-builder/src/types/legendSpec.types.ts

@@ -46,7 +46,7 @@ export interface LegendOptions {
   keys?: string[];
   /** labels for each of the series */
   legendLabels?: LegendLabel[];
-  /** max width in pixels before truncating a legend label */
+  /** max width in pixels before truncating a legend label. Influences legend column layout by calculating how many legend items can fit horizontally based on the label width. */
   labelLimit?: number;
   /** line type or key in the data that is used as the line type facet for the symbols */
   lineType?: LineTypeFacet;