refactor(legend): showLegendExtra to false by default

change the default value of `showLegendExtra` to `false` BREAKING CHANGE: Previously `showLegendExtra` was true by default always showing the legend extra value. Now it becomes always hidden by default close elastic#246
markov00 · Feb 20, 2020 · ebb0637 · ebb0637
1 parent e1197ae
commit ebb0637
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 73 deletions.
diff --git a/src/components/legend/legend.test.tsx b/src/components/legend/legend.test.tsx
@@ -11,7 +11,7 @@ describe('Legend', () => {
   it('shall render the all the series names', () => {
     const wrapper = mount(
       <Chart>
-        <Settings showLegend />
+        <Settings showLegend showLegendExtra />
         <BarSeries
           id="areas"
           name="area"
@@ -78,7 +78,7 @@ describe('Legend', () => {
     const data = dg.generateGroupedSeries(10, numberOfSeries, 'split');
     const wrapper = mount(
       <Chart>
-        <Settings showLegend onLegendItemOver={onLegendItemOver} onLegendItemOut={onLegendItemOut} />
+        <Settings showLegend showLegendExtra onLegendItemOver={onLegendItemOver} onLegendItemOut={onLegendItemOut} />
         <BarSeries
           id="areas"
           xScaleType={ScaleType.Linear}
@@ -108,7 +108,7 @@ describe('Legend', () => {
     const data = dg.generateGroupedSeries(10, numberOfSeries, 'split');
     const wrapper = mount(
       <Chart>
-        <Settings showLegend onLegendItemClick={onLegendItemClick} />
+        <Settings showLegend showLegendExtra onLegendItemClick={onLegendItemClick} />
         <BarSeries
           id="areas"
           xScaleType={ScaleType.Linear}

diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
@@ -139,6 +139,7 @@ export interface SettingsSpec extends Spec {
   legendPosition: Position;
   /**
    * Show an extra parameter on each legend item defined by the chart type
+   * @default false
    */
   showLegendExtra: boolean;
   /**
@@ -205,7 +206,7 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
     snap: DEFAULT_TOOLTIP_SNAP,
   },
   legendPosition: Position.Right,
-  showLegendExtra: true,
+  showLegendExtra: false,
   hideDuplicateAxes: false,
   theme: LIGHT_THEME,
 };

diff --git a/stories/annotations.tsx b/stories/annotations.tsx
@@ -70,7 +70,7 @@ export const lineBasicXDomainContinous = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
+      <Settings showLegend showLegendExtra debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
       <LineAnnotation
         id={getAnnotationId('anno_1')}
         domainType={AnnotationDomainTypes.XDomain}

diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx
@@ -193,7 +193,7 @@ with4Axes.story = {
 export const wAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}
@@ -236,7 +236,7 @@ export const stackedWAxisAndLegend = () => {
   const allMetrics = [...data3, ...data2, ...data1];
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -271,7 +271,7 @@ export const stackedAsPercentage = () => {
   const stackedAsPercentage = boolean('stacked as percentage', true);
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -310,7 +310,7 @@ stackedAsPercentage.story = {
 export const stackedWithSeparatedSpecs = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -364,7 +364,7 @@ stackedWithSeparatedSpecs.story = {
 export const stackedWithSeparatedSpecsSameNaming = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -504,7 +504,7 @@ export const bandAreaChart = () => {
   const y1AccessorFormat = text('y1AccessorFormat', '');
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}
@@ -557,7 +557,7 @@ export const stackedBandAreaChart = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend />
+      <Settings showLegend showLegendExtra />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}

diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
@@ -135,7 +135,7 @@ export const withValueLabel = () => {
   const stackAccessors = isStackedSeries ? ['x'] : undefined;
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings theme={theme} debug={debug} rotation={getChartRotationKnob()} showLegend />
+      <Settings theme={theme} debug={debug} rotation={getChartRotationKnob()} showLegend showLegendExtra />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -450,7 +450,7 @@ withStackedLogYAxis.story = {
 export const withAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -483,7 +483,7 @@ withAxisAndLegend.story = {
 export const stackedWithAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -523,7 +523,7 @@ export const stackedAsPercentage = () => {
   const clusterBars = boolean('cluster', true);
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -579,7 +579,13 @@ export const clusteredWithAxisAndLegend = () => {
   };
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} theme={theme} rotation={getChartRotationKnob()} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        theme={theme}
+        rotation={getChartRotationKnob()}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -616,7 +622,7 @@ clusteredWithAxisAndLegend.story = {
 export const clusteredMultipleSeriesSpecs = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'elements'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -784,7 +790,7 @@ timeStackedUsingVariousSpecs.story = {
 export const barChart1y0g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -811,7 +817,7 @@ barChart1y0g.story = {
 export const barChart1y1g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -839,7 +845,7 @@ barChart1y1g.story = {
 export const barChart1y2g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -867,7 +873,7 @@ barChart1y2g.story = {
 export const barChart2y0g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -894,7 +900,7 @@ barChart2y0g.story = {
 export const barChart2y1g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -930,7 +936,7 @@ export const barChart2y2g = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -962,7 +968,7 @@ export const tooltipSeriesVisibility = () => {
   };
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}

diff --git a/stories/interactions.tsx b/stories/interactions.tsx
@@ -76,7 +76,13 @@ export const barClicksAndHovers = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} tooltip={tooltipProps} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        {...onElementListeners}
+        tooltip={tooltipProps}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -108,7 +114,7 @@ barClicksAndHovers.story = {
 export const areaPointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -140,7 +146,7 @@ areaPointClicksAndHovers.story = {
 export const linePointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -172,7 +178,7 @@ linePointClicksAndHovers.story = {
 export const lineAreaBarPointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -267,7 +273,13 @@ export const clicksHoversOnLegendItemsBarChart = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onLegendItemListeners} xDomain={xDomain} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        {...onLegendItemListeners}
+        xDomain={xDomain}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -298,7 +310,8 @@ export const clickHoversOnLegendItemsAreaChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -342,7 +355,8 @@ export const clickHoversOnLegendItemsLineChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -451,7 +465,8 @@ export const clickHoversOnLegendItemsMixedChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -781,7 +796,7 @@ crosshairWithTimeAxis.story = {
 export const renderChangeAction = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} onRenderChange={onRenderChange} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} onRenderChange={onRenderChange} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -817,7 +832,7 @@ renderChangeAction.story = {
 export const cursorUpdateAction = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} onPointerUpdate={onPointerUpdate} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} onPointerUpdate={onPointerUpdate} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -886,7 +901,7 @@ export const pngExportAction = () => {
   button(label, handler, groupId);
   return (
     <Chart className={'story-chart'} ref={chartRef}>
-      <Settings showLegend={true} />
+      <Settings showLegend showLegendExtra />
       <Axis
         id={getAxisId('time')}
         position={Position.Bottom}