feat: auto legend resize

.playground/playgroud.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { loremIpsum } from 'lorem-ipsum';
 
 import {
   Axis,
@@ -16,9 +17,33 @@ import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 
 export class Playground extends React.Component {
   render() {
-    return <>{this.renderChart(Position.Right)}</>;
+    return <>{this.renderChart(Position.Bottom)}</>;
   }
   renderChart(legendPosition: Position) {
+    const renderMore = () => {
+      const random = Math.floor(Math.random() * 3) + 1;
+      const id = loremIpsum({ count: random, units: 'words' });
+      return (
+        <AreaSeries
+          id={getSpecId(id)}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
+          xAccessor={0}
+          areaSeriesStyle={{
+            point: {
+              visible: true,
+              strokeWidth: 3,
+              radius: 10,
+            },
+            line: {
+              strokeWidth: 10,
+            },
+          }}
+          yAccessors={[1]}
+        />
+      );
+    };
     const theme = mergeWithDefaultTheme({
       lineSeriesStyle: {
         line: {
@@ -33,7 +58,6 @@ export class Playground extends React.Component {
         },
       },
     });
-    console.log(theme.areaSeriesStyle);
     return (
       <div className="chart">
         <Chart>
@@ -87,7 +111,7 @@ export class Playground extends React.Component {
             }}
           />
           <AreaSeries
-            id={getSpecId('dataset A with long title')}
+            id={getSpecId('dataset A')}
             xScaleType={ScaleType.Time}
             yScaleType={ScaleType.Linear}
             data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
@@ -104,6 +128,9 @@ export class Playground extends React.Component {
             }}
             yAccessors={[1]}
           />
+          {Array(10)
+            .fill(null)
+            .map(renderMore)}
         </Chart>
       </div>
     );

package.json

@@ -94,6 +94,7 @@
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "jest-environment-jsdom-fourteen": "^0.1.0",
+    "lorem-ipsum": "^2.0.3",
     "node-sass": "^4.11.0",
     "postcss-cli": "^6.1.3",
     "prettier": "1.16.4",

src/chart_types/xy_chart/store/chart_state.test.ts

@@ -108,14 +108,6 @@ describe('Chart Store', () => {
     expect(axesTicks.get(AXIS_ID)).not.toBeUndefined();
   });
 
-  test('can toggle legend visibility', () => {
-    store.toggleLegendCollapsed();
-    expect(store.legendCollapsed.get()).toBe(true);
-
-    store.toggleLegendCollapsed();
-    expect(store.legendCollapsed.get()).toBe(false);
-  });
-
   test('can set legend visibility', () => {
     store.showLegend.set(false);
     store.setShowLegend(true);

src/chart_types/xy_chart/store/chart_state.ts

@@ -110,7 +110,8 @@ export type LegendItemListener = (dataSeriesIdentifiers: DataSeriesColorsValues
 export class ChartStore {
   debug = false;
   specsInitialized = observable.box(false);
-  initialized = observable.box(false);
+  chartInitialized = observable.box(false);
+  legendInitialized = observable.box(false);
   enableHistogramMode = observable.box(false);
 
   parentDimensions: Dimensions = {
@@ -221,15 +222,9 @@ export class ChartStore {
   canDataBeAnimated = false;
 
   showLegend = observable.box(false);
-  legendCollapsed = observable.box(false);
-  legendPosition: Position | undefined;
+  legendPosition = observable.box<Position>(Position.Right);
   showLegendDisplayValue = observable.box(true);
 
-  toggleLegendCollapsed = action(() => {
-    this.legendCollapsed.set(!this.legendCollapsed.get());
-    this.computeChart();
-  });
-
   /**
    * determine if crosshair cursor should be visible based on cursor position and brush enablement
    */
@@ -766,7 +761,7 @@ export class ChartStore {
   }
 
   computeChart() {
-    this.initialized.set(false);
+    this.chartInitialized.set(false);
     // compute only if parent dimensions are computed
     if (this.parentDimensions.width === 0 || this.parentDimensions.height === 0) {
       return;
@@ -812,6 +807,14 @@ export class ChartStore {
       this.deselectedDataSeries,
     );
 
+    if (!this.legendInitialized.get()) {
+      this.legendInitialized.set(true);
+
+      if (this.legendItems.size > 0 && this.showLegend.get()) {
+        return;
+      }
+    }
+
     this.isChartEmpty = isAllSeriesDeselected(this.legendItems);
 
     const { xDomain, yDomain, formattedDataSeries } = this.seriesDomainsAndData;
@@ -846,14 +849,12 @@ export class ChartStore {
     });
     bboxCalculator.destroy();
 
-    // // compute chart dimensions
+    // compute chart dimensions
     this.chartDimensions = computeChartDimensions(
       this.parentDimensions,
       this.chartTheme,
       this.axesTicksDimensions,
       this.axesSpecs,
-      this.showLegend.get() && !this.legendCollapsed.get(),
-      this.legendPosition,
     );
 
     this.chartTransform = computeChartTransform(this.chartDimensions, this.chartRotation);
@@ -872,8 +873,6 @@ export class ChartStore {
       this.enableHistogramMode.get(),
     );
 
-    // tslint:disable-next-line:no-console
-    // console.log({ seriesGeometries });
     this.geometries = seriesGeometries.geometries;
     this.xScale = seriesGeometries.scales.xScale;
 
@@ -886,23 +885,19 @@ export class ChartStore {
     this.geometriesIndex = seriesGeometries.geometriesIndex;
     this.geometriesIndexKeys = [...this.geometriesIndex.keys()].sort(compareByValueAsc);
 
-    // // compute visible ticks and their positions
+    // compute visible ticks and their positions
     const axisTicksPositions = getAxisTicksPositions(
       this.chartDimensions,
       this.chartTheme,
       this.chartRotation,
-      this.showLegend.get() && !this.legendCollapsed.get(),
       this.axesSpecs,
       this.axesTicksDimensions,
       xDomain,
       yDomain,
       totalBarsInCluster,
       this.enableHistogramMode.get(),
-      this.legendPosition,
       barsPadding,
     );
-    // tslint:disable-next-line:no-console
-    // console.log({axisTicksPositions});
     this.axesPositions = axisTicksPositions.axisPositions;
     this.axesTicks = axisTicksPositions.axisTicks;
     this.axesVisibleTicks = axisTicksPositions.axisVisibleTicks;
@@ -926,6 +921,6 @@ export class ChartStore {
     // temporary disabled until
     // https://github.com/elastic/elastic-charts/issues/89 and https://github.com/elastic/elastic-charts/issues/41
     this.canDataBeAnimated = false;
-    this.initialized.set(true);
+    this.chartInitialized.set(true);
   }
 }

src/chart_types/xy_chart/utils/axis_utils.ts

@@ -531,18 +531,15 @@ export function getAxisTicksPositions(
   chartDimensions: Dimensions,
   chartTheme: Theme,
   chartRotation: Rotation,
-  showLegend: boolean,
   axisSpecs: Map<AxisId, AxisSpec>,
   axisDimensions: Map<AxisId, AxisTicksDimensions>,
   xDomain: XDomain,
   yDomain: YDomain[],
   totalGroupsCount: number,
   enableHistogramMode: boolean,
-  legendPosition?: Position,
   barsPadding?: number,
 ) {
   const { chartPaddings, chartMargins } = chartTheme;
-  const legendStyle = chartTheme.legend;
   const axisPositions: Map<AxisId, Dimensions> = new Map();
   const axisVisibleTicks: Map<AxisId, AxisTick[]> = new Map();
   const axisTicks: Map<AxisId, AxisTick[]> = new Map();
@@ -552,27 +549,7 @@ export function getAxisTicksPositions(
   let cumBottomSum = chartPaddings.bottom;
   let cumLeftSum = 0;
   let cumRightSum = chartPaddings.right;
-  if (showLegend) {
-    switch (legendPosition) {
-      case Position.Left:
-        cumLeftSum += legendStyle.verticalWidth;
-        break;
-      // case Position.Right:
-      //   cumRightSum += legendStyle.verticalWidth;
-      //   break;
-      // case Position.Bottom:
-      //   cumBottomSum += legendStyle.horizontalHeight;
-      //   break;
-      case Position.Top:
-        cumTopSum += legendStyle.horizontalHeight;
-        break;
-    }
-  }
-  // console.log({cumRightSum});
-  // let cumTopSum = showLegend ? legendStyle.horizontalHeight : 0;
-  // let cumBottomSum = chartConfig.paddings.bottom;
-  // let cumLeftSum = showLegend ? legendStyle.verticalWidth : 0;
-  // let cumRightSum = chartConfig.paddings.right;
+
   axisDimensions.forEach((axisDim, id) => {
     const axisSpec = axisSpecs.get(id);
 
@@ -661,7 +638,7 @@ export function isVertical(position: Position) {
 }
 
 export function isHorizontal(position: Position) {
-  return !isVertical(position);
+  return position === Position.Top || position === Position.Bottom;
 }
 
 export function isLowerBound(domain: Partial<CompleteBoundedDomain>): domain is LowerBoundedDomain {

src/chart_types/xy_chart/utils/dimensions.ts

@@ -19,11 +19,8 @@ export function computeChartDimensions(
   chartTheme: Theme,
   axisDimensions: Map<AxisId, AxisTicksDimensions>,
   axisSpecs: Map<AxisId, AxisSpec>,
-  showLegend: boolean,
-  legendPosition?: Position,
 ): Dimensions {
   const { chartMargins, chartPaddings } = chartTheme;
-  const legendStyle = chartTheme.legend;
   const { axisTitleStyle } = chartTheme.axes;
 
   const axisTitleHeight = axisTitleStyle.fontSize + axisTitleStyle.padding;
@@ -72,37 +69,18 @@ export function computeChartDimensions(
   if (vRightAxisSpecWidth === 0) {
     hMargin += chartMargins.right;
   }
-  let legendTopMargin = 0;
-  let legendLeftMargin = 0;
-  if (showLegend) {
-    switch (legendPosition) {
-      case Position.Right:
-        hMargin += legendStyle.verticalWidth;
-        break;
-      case Position.Left:
-        hMargin += legendStyle.verticalWidth;
-        legendLeftMargin = legendStyle.verticalWidth;
-        break;
-      case Position.Top:
-        vMargin += legendStyle.horizontalHeight;
-        legendTopMargin = legendStyle.horizontalHeight;
-        break;
-      case Position.Bottom:
-        vMargin += legendStyle.horizontalHeight;
-        break;
-    }
-  }
+
   let top = 0;
   let left = 0;
   if (hTopAxisSpecHeight === 0) {
-    top = chartMargins.top + chartPaddings.top + legendTopMargin;
+    top = chartMargins.top + chartPaddings.top;
   } else {
-    top = hTopAxisSpecHeight + chartPaddings.top + legendTopMargin;
+    top = hTopAxisSpecHeight + chartPaddings.top;
   }
   if (vLeftAxisSpecWidth === 0) {
-    left = chartMargins.left + chartPaddings.left + legendLeftMargin;
+    left = chartMargins.left + chartPaddings.left;
   } else {
-    left = vLeftAxisSpecWidth + chartPaddings.left + legendLeftMargin;
+    left = vLeftAxisSpecWidth + chartPaddings.left;
   }
   return {
     top,

src/components/_container.scss

@@ -3,9 +3,8 @@
  */
 
 .echContainer {
+  flex: 1;
   position: relative;
-  width: 100%;
-  height: 100%;
 
   &:hover {
     .echLegend__toggle {
@@ -14,6 +13,15 @@
   }
 }
 
-.echChart--isBrushEnabled {
-  cursor: crosshair;
+.echChart {
+  display: flex;
+  height: 100%;
+
+  &--isBrushEnabled {
+    cursor: crosshair;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
 }

src/components/_global.scss

@@ -0,0 +1,3 @@
+.invisible {
+  visibility: hidden;
+}

src/components/_index.scss

@@ -1,3 +1,4 @@
+@import 'global';
 @import 'container';
 @import 'annotation';
 @import 'crosshair';