feat: add chart size type overrides (#317)

Now the Chart size prop takes multiple types as input: basic string or number, a tuple of string or number or undefined, an object with width and height (string, number or optionals). fix #177
elastic · Aug 19, 2019 · b8dc9e1 · b8dc9e1
1 parent f9f13dd
commit b8dc9e1
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 4 deletions.
diff --git a/.playground/index.html b/.playground/index.html
@@ -23,7 +23,7 @@
       .chart {
         position: relative;
         width: 100%;
-        height: 50%;
+        height: 100%;
       }
     </style>
   </head>

diff --git a/src/components/chart.tsx b/src/components/chart.tsx
@@ -13,13 +13,14 @@ import { LegendButton } from './legend/legend_button';
 import { ReactiveChart as ReactChart } from './react_canvas/reactive_chart';
 import { Tooltips } from './tooltips';
 import { CursorEvent } from '../specs/settings';
+import { ChartSize, getChartSize } from '../utils/chart_size';
 
 interface ChartProps {
   /** The type of rendered
    * @default 'canvas'
    */
   renderer: 'svg' | 'canvas';
-  size?: [number, number];
+  size?: ChartSize;
   className?: string;
 }
 
@@ -60,8 +61,7 @@ export class Chart extends React.Component<ChartProps> {
     if (size) {
       containerStyle = {
         position: 'relative',
-        width: size[0],
-        height: size[1],
+        ...getChartSize(size),
       };
     } else {
       containerStyle = {};

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,6 @@
 export * from './specs';
 export { Chart } from './components/chart';
+export { ChartSize, ChartSizeArray, ChartSizeObject } from './utils/chart_size';
 export { TooltipType, TooltipValue, TooltipValueFormatter } from './chart_types/xy_chart/utils/interactions';
 export { SpecId, GroupId, AxisId, AnnotationId, getAxisId, getGroupId, getSpecId, getAnnotationId } from './utils/ids';
 export { ScaleType } from './utils/scales/scales';

diff --git a/src/utils/chart_size.test.ts b/src/utils/chart_size.test.ts
@@ -0,0 +1,62 @@
+import { getChartSize } from './chart_size';
+
+describe('chart size utilities', () => {
+  test('array', () => {
+    expect(getChartSize([100, 100])).toEqual({
+      width: 100,
+      height: 100,
+    });
+    expect(getChartSize([undefined, 100])).toEqual({
+      width: '100%',
+      height: 100,
+    });
+    expect(getChartSize([100, undefined])).toEqual({
+      width: 100,
+      height: '100%',
+    });
+    expect(getChartSize([undefined, undefined])).toEqual({
+      width: '100%',
+      height: '100%',
+    });
+    expect(getChartSize([0, '100em'])).toEqual({
+      width: 0,
+      height: '100em',
+    });
+  });
+  test('value', () => {
+    expect(getChartSize(1)).toEqual({
+      width: 1,
+      height: 1,
+    });
+    expect(getChartSize('100em')).toEqual({
+      width: '100em',
+      height: '100em',
+    });
+    expect(getChartSize(0)).toEqual({
+      width: 0,
+      height: 0,
+    });
+  });
+  test('object', () => {
+    expect(getChartSize({ width: 100, height: 100 })).toEqual({
+      width: 100,
+      height: 100,
+    });
+    expect(getChartSize({ height: 100 })).toEqual({
+      width: '100%',
+      height: 100,
+    });
+    expect(getChartSize({ width: 100 })).toEqual({
+      width: 100,
+      height: '100%',
+    });
+    expect(getChartSize({})).toEqual({
+      width: '100%',
+      height: '100%',
+    });
+    expect(getChartSize({ width: 0, height: '100em' })).toEqual({
+      width: 0,
+      height: '100em',
+    });
+  });
+});
diff --git a/src/utils/chart_size.ts b/src/utils/chart_size.ts
@@ -0,0 +1,26 @@
+export type ChartSizeArray = [number | string | undefined, number | string | undefined];
+export interface ChartSizeObject {
+  width?: number | string;
+  height?: number | string;
+}
+
+export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
+
+export function getChartSize(size: ChartSize) {
+  if (Array.isArray(size)) {
+    return {
+      width: size[0] === undefined ? '100%' : size[0],
+      height: size[1] === undefined ? '100%' : size[1],
+    };
+  } else if (typeof size === 'object') {
+    return {
+      width: size.width === undefined ? '100%' : size.width,
+      height: size.height === undefined ? '100%' : size.height,
+    };
+  }
+  const sameSize = size === undefined ? '100%' : size;
+  return {
+    width: sameSize,
+    height: sameSize,
+  };
+}
diff --git a/stories/styling.tsx b/stories/styling.tsx
@@ -21,6 +21,9 @@ import {
   Settings,
   BaseThemeTypes,
   LineSeriesStyle,
+  TooltipType,
+  RecursivePartial,
+  Theme,
 } from '../src/';
 import * as TestDatasets from '../src/utils/data_samples/test_dataset';
 import { palettes } from '../src/utils/themes/colors';
@@ -103,6 +106,75 @@ const data2 = dg.generateSimpleSeries(40);
 const data3 = dg.generateSimpleSeries(40);
 
 storiesOf('Stylings', module)
+  .add('chart size', () => {
+    const theme: RecursivePartial<Theme> = {
+      chartMargins: {
+        bottom: 0,
+        left: 0,
+        top: 0,
+        right: 0,
+      },
+    };
+    return (
+      <div>
+        <Chart className={'story-chart'} size={{ width: 100, height: 50 }}>
+          <Settings tooltip={TooltipType.None} theme={theme} />
+          <BarSeries
+            id={getSpecId('bars')}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data2}
+          />
+        </Chart>
+        <Chart className={'story-chart'} size={{ height: 50 }}>
+          <Settings tooltip={TooltipType.None} theme={theme} />
+          <BarSeries
+            id={getSpecId('bars')}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data2}
+          />
+        </Chart>
+        <Chart className={'story-chart'} size={['50%', 50]}>
+          <Settings tooltip={TooltipType.None} theme={theme} />
+          <BarSeries
+            id={getSpecId('bars')}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data2}
+          />
+        </Chart>
+        <Chart className={'story-chart'} size={[undefined, 50]}>
+          <Settings tooltip={TooltipType.None} theme={theme} />
+          <BarSeries
+            id={getSpecId('bars')}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data2}
+          />
+        </Chart>
+        <Chart className={'story-chart'} size={50}>
+          <Settings tooltip={TooltipType.None} theme={theme} />
+          <BarSeries
+            id={getSpecId('bars')}
+            xScaleType={ScaleType.Linear}
+            yScaleType={ScaleType.Linear}
+            xAccessor="x"
+            yAccessors={['y']}
+            data={data2}
+          />
+        </Chart>
+      </div>
+    );
+  })
   .add('margins and paddings', () => {
     const theme: PartialTheme = {
       chartMargins: {