RELATED: RAIL-655 Add components with bucket interface

.editorconfig

@@ -2,6 +2,10 @@
 indent_style = space
 indent_size = 4
 
+[*.{ts,tsx}]
+indent_style = space
+indent_size = 4
+
 [*.json]
 indent_style = space
 indent_size = 2

package.json

@@ -45,7 +45,8 @@
     "ts-jest": "21.2.4",
     "ts-loader": "2.3.7",
     "tslint-config-gooddata": "0.0.8",
-    "typescript": "2.3.3"
+    "typescript": "2.3.3",
+    "utility-types": "^1.1.0"
   },
   "dependencies": {
     "@gooddata/data-layer": "7.0.0-alpha3",

src/components/BarChart.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject, AFM } from '@gooddata/typings';
+
+import { BarChart as AfmBarChart } from './afm/BarChart';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+import { generateStackedDimensions } from '../helpers/dimensions';
+import { isStackedChart } from '../helpers/stacks';
+
+export interface IBarChartBucketProps {
+    measures: VisualizationObject.BucketItem[];
+    viewBy?: VisualizationObject.IVisualizationAttribute;
+    stackBy?: VisualizationObject.IVisualizationAttribute;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface IBarChartProps extends ICommonChartProps, IBarChartBucketProps {
+    projectId: string;
+}
+
+type IBarChartNonBucketProps = Subtract<IBarChartProps, IBarChartBucketProps>;
+
+function generateDefaultDimensions(afm: AFM.IAfm): AFM.IDimension[] {
+    return [
+        {
+            itemIdentifiers: ['measureGroup']
+        },
+        {
+            itemIdentifiers: (afm.attributes || []).map(a => a.localIdentifier)
+        }
+    ];
+}
+
+function getStackingResultSpec(buckets: VisualizationObject.IBucket[]): AFM.IResultSpec {
+    if (isStackedChart(buckets)) {
+        return {
+            dimensions: generateStackedDimensions(buckets)
+        };
+    }
+
+    return {
+        dimensions: generateDefaultDimensions(convertBucketsToAFM(buckets))
+    };
+}
+
+export function BarChart(props: IBarChartProps): JSX.Element {
+    const buckets: VisualizationObject.IBucket[] = [
+        {
+            localIdentifier: 'measures',
+            items: props.measures || []
+        },
+        {
+            localIdentifier: 'attributes',
+            items: props.viewBy ? [props.viewBy] : []
+        },
+        {
+            localIdentifier: 'stacks',
+            items: props.stackBy ? [props.stackBy] : []
+        }
+    ];
+
+    const newProps
+        = omit<IBarChartBucketProps, IBarChartNonBucketProps>(props, ['measures', 'viewBy', 'stackBy', 'filters']);
+
+    return (
+        <AfmBarChart
+            {...newProps}
+            projectId={props.projectId}
+            afm={convertBucketsToAFM(buckets)}
+            resultSpec={getStackingResultSpec(buckets)}
+        />
+    );
+}

src/components/ColumnChart.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject, AFM } from '@gooddata/typings';
+
+import { ColumnChart as AfmColumnChart } from './afm/ColumnChart';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+import { generateStackedDimensions } from '../helpers/dimensions';
+import { isStackedChart } from '../helpers/stacks';
+
+export interface IColumnChartBucketProps {
+    measures: VisualizationObject.BucketItem[];
+    viewBy?: VisualizationObject.IVisualizationAttribute;
+    stackBy?: VisualizationObject.IVisualizationAttribute;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface IColumnChartProps extends ICommonChartProps, IColumnChartBucketProps {
+    projectId: string;
+}
+
+type IColumnChartNonBucketProps = Subtract<IColumnChartProps, IColumnChartBucketProps>;
+
+function generateDefaultDimensions(afm: AFM.IAfm): AFM.IDimension[] {
+    return [
+        {
+            itemIdentifiers: ['measureGroup']
+        },
+        {
+            itemIdentifiers: (afm.attributes || []).map(a => a.localIdentifier)
+        }
+    ];
+}
+
+function getStackingResultSpec(buckets: VisualizationObject.IBucket[]): AFM.IResultSpec {
+    if (isStackedChart(buckets)) {
+        return {
+            dimensions: generateStackedDimensions(buckets)
+        };
+    }
+
+    return {
+        dimensions: generateDefaultDimensions(convertBucketsToAFM(buckets))
+    };
+}
+
+export function ColumnChart(props: IColumnChartProps): JSX.Element {
+    const buckets: VisualizationObject.IBucket[] = [
+        {
+            localIdentifier: 'measures',
+            items: props.measures || []
+        },
+        {
+            localIdentifier: 'attributes',
+            items: props.viewBy ? [props.viewBy] : []
+        },
+        {
+            localIdentifier: 'stacks',
+            items: props.stackBy ? [props.stackBy] : []
+        }
+    ];
+
+    const newProps
+        = omit<IColumnChartProps, IColumnChartNonBucketProps>(props, ['measures', 'viewBy', 'stackBy', 'filters']);
+
+    return (
+        <AfmColumnChart
+            {...newProps}
+            projectId={props.projectId}
+            afm={convertBucketsToAFM(buckets)}
+            resultSpec={getStackingResultSpec(buckets)}
+        />
+    );
+}

src/components/Headline.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject } from '@gooddata/typings';
+
+import { Headline as AfmHeadline } from './afm/Headline';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+
+export interface IHeadlineBucketProps {
+    measure: VisualizationObject.IMeasure;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface IHeadlineProps extends ICommonChartProps, IHeadlineBucketProps {
+    projectId: string;
+}
+
+type IHeadlineNonBucketProps = Subtract<IHeadlineProps, IHeadlineBucketProps>;
+
+export function Headline(props: IHeadlineProps): JSX.Element {
+    const buckets = [
+        {
+            localIdentifier: 'measures',
+            items: [props.measure]
+        }
+    ];
+
+    const newProps = omit<IHeadlineProps, IHeadlineNonBucketProps>(props, ['measure', 'filters']);
+
+    return (
+        <AfmHeadline
+            {...newProps}
+            afm={convertBucketsToAFM(buckets, props.filters)}
+        />
+    );
+}

src/components/LineChart.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject, AFM } from '@gooddata/typings';
+
+import { LineChart as AfmLineChart } from './afm/LineChart';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+import { generateStackedDimensions } from '../helpers/dimensions';
+import { isStackedChart } from '../helpers/stacks';
+
+export interface ILineChartBucketProps {
+    measures: VisualizationObject.BucketItem[];
+    trendBy?: VisualizationObject.IVisualizationAttribute;
+    segmentBy?: VisualizationObject.IVisualizationAttribute;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface ILineChartProps extends ICommonChartProps, ILineChartBucketProps {
+    projectId: string;
+}
+
+type ILineChartNonBucketProps = Subtract<ILineChartProps, ILineChartBucketProps>;
+
+export interface ILineChartProps extends ICommonChartProps {
+    projectId: string;
+}
+
+function generateDefaultDimensions(afm: AFM.IAfm): AFM.IDimension[] {
+    return [
+        {
+            itemIdentifiers: ['measureGroup']
+        },
+        {
+            itemIdentifiers: (afm.attributes || []).map(a => a.localIdentifier)
+        }
+    ];
+}
+
+function getStackingResultSpec(buckets: VisualizationObject.IBucket[]): AFM.IResultSpec {
+    if (isStackedChart(buckets)) {
+        return {
+            dimensions: generateStackedDimensions(buckets)
+        };
+    }
+
+    return {
+        dimensions: generateDefaultDimensions(convertBucketsToAFM(buckets))
+    };
+}
+
+export function LineChart(props: ILineChartProps): JSX.Element {
+    const buckets: VisualizationObject.IBucket[] = [
+        {
+            localIdentifier: 'measures',
+            items: props.measures || []
+        },
+        {
+            localIdentifier: 'attributes',
+            items: props.trendBy ? [props.trendBy] : []
+        },
+        {
+            localIdentifier: 'stacks',
+            items: props.segmentBy ? [props.segmentBy] : []
+        }
+    ];
+
+    const newProps
+        = omit<ILineChartProps, ILineChartNonBucketProps>(props, ['measures', 'trendBy', 'segmentBy', 'filters']);
+
+    return (
+        <AfmLineChart
+            {...newProps}
+            projectId={props.projectId}
+            afm={convertBucketsToAFM(buckets)}
+            resultSpec={getStackingResultSpec(buckets)}
+        />
+    );
+}

src/components/PieChart.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject } from '@gooddata/typings';
+
+import { PieChart as AfmPieChart } from './afm/PieChart';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+
+export interface IPieChartBucketProps {
+    measures: VisualizationObject.BucketItem[];
+    viewBy?: VisualizationObject.IVisualizationAttribute;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface IPieChartProps extends ICommonChartProps, IPieChartBucketProps {
+    projectId: string;
+}
+
+type IPieChartNonBucketProps = Subtract<IPieChartProps, IPieChartBucketProps>;
+
+export function PieChart(props: IPieChartProps): JSX.Element {
+    const buckets: VisualizationObject.IBucket[] = [
+        {
+            localIdentifier: 'measures',
+            items: props.measures || []
+        },
+        {
+            localIdentifier: 'view',
+            items: props.viewBy ? [props.viewBy] : []
+        }
+    ];
+
+    const newProps
+        = omit<IPieChartProps, IPieChartNonBucketProps>(props, ['measures', 'viewBy', 'filters']);
+
+    return (
+        <AfmPieChart
+            {...newProps}
+            projectId={props.projectId}
+            afm={convertBucketsToAFM(buckets)}
+        />
+    );
+}

src/components/Table.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { omit } from 'lodash';
+import { Subtract } from 'utility-types';
+import { VisualizationObject } from '@gooddata/typings';
+
+import { Table as AfmTable } from './afm/Table';
+import { ICommonChartProps } from './core/base/BaseChart';
+import { convertBucketsToAFM } from '../helpers/conversion';
+import { getTableDimensions } from '../helpers/dimensions';
+
+export interface ITableBucketProps {
+    measures: VisualizationObject.BucketItem[];
+    attributes?: VisualizationObject.IVisualizationAttribute[];
+    totals?: VisualizationObject.IVisualizationTotal[];
+    totalsEditAllowed?: boolean;
+    filters?: VisualizationObject.VisualizationObjectFilter[];
+}
+
+export interface ITableProps extends ICommonChartProps, ITableBucketProps {
+    projectId: string;
+    totalsEditAllowed?: boolean;
+}
+
+type ITableNonBucketProps = Subtract<ITableProps, ITableBucketProps>;
+
+export function Table(props: ITableProps): JSX.Element {
+    const buckets: VisualizationObject.IBucket[] = [
+        {
+            localIdentifier: 'measures',
+            items: props.measures || [],
+            totals: props.totals || []
+        },
+        {
+            localIdentifier: 'attributes',
+            items: props.attributes || []
+        }
+    ];
+
+    const newProps
+        = omit<ITableProps, ITableNonBucketProps>(props, ['measures', 'attributes', 'totals', 'filters']);
+
+    return (
+        <AfmTable
+            {...newProps}
+            afm={convertBucketsToAFM(buckets, props.filters)}
+            resultSpec={{ dimensions: getTableDimensions(buckets) }}
+        />
+    );
+}