RELATED: ONE-3355 Pass provided colorPalette to the charts

examples/src/components/BarChartDynamicExample.jsx

@@ -0,0 +1,101 @@
+// (C) 2007-2018 GoodData Corporation
+import React, { Component } from 'react';
+import { BarChart } from '@gooddata/react-components';
+
+import '@gooddata/react-components/styles/css/main.css';
+
+import {
+    totalSalesIdentifier,
+    locationResortIdentifier,
+    menuCategoryAttributeDFIdentifier,
+    projectId
+} from '../utils/fixtures';
+import { CUSTOM_COLOR_PALETTE } from '../utils/colors';
+
+const defaultProperties = {};
+
+export class BarChartDynamicExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            config: defaultProperties,
+            customPaletteUsed: false
+        };
+        this.onPaletteChange = this.onPaletteChange.bind(this);
+    }
+
+    onPaletteChange() {
+        const {
+            config: currentConfig,
+            customPaletteUsed
+        } = this.state;
+        const colorPaletteProp = {
+            colorPalette: customPaletteUsed ? undefined : CUSTOM_COLOR_PALETTE
+        };
+        this.setState({
+            config: {
+                ...currentConfig,
+                ...colorPaletteProp
+            },
+            customPaletteUsed: !customPaletteUsed
+        });
+    }
+
+    render() {
+        const {
+            config
+        } = this.state;
+
+        const amount = {
+            measure: {
+                localIdentifier: 'amount',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: totalSalesIdentifier
+                        }
+                    }
+                },
+                alias: '$ Total Sales',
+                format: '#,##0'
+            }
+        };
+
+        const locationResort = {
+            visualizationAttribute: {
+                displayForm: {
+                    identifier: locationResortIdentifier
+                },
+                localIdentifier: 'location_resort'
+            }
+        };
+
+        const menuCategory = {
+            visualizationAttribute: {
+                displayForm: {
+                    identifier: menuCategoryAttributeDFIdentifier
+                },
+                localIdentifier: 'label.menuitem.menucategory'
+            }
+        };
+        return (
+            <div>
+                <button onClick={this.onPaletteChange}>
+                    Change palette
+                </button>
+                <div style={{ height: 300 }} className="s-bar-chart">
+                    <BarChart
+                        projectId={projectId}
+                        measures={[amount]}
+                        viewBy={locationResort}
+                        stackBy={menuCategory}
+                        config={config}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default BarChartDynamicExample;

examples/src/components/BubbleChartExample.jsx

@@ -12,13 +12,6 @@ import {
     locationResortIdentifier
 } from '../utils/fixtures';
 
-export const CUSTOM_COLORS = [
-    'rgba(195, 49, 73, 1)',
-    'rgba(168, 194, 86, 1)',
-    'rgba(243, 217, 177, 1)',
-    'rgba(194, 153, 121, 1)'
-];
-
 export class BubbleChartExample extends Component {
     onLoadingChanged(...params) {
         // eslint-disable-next-line no-console
@@ -91,7 +84,6 @@ export class BubbleChartExample extends Component {
                     size={size}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    config={{ colors: CUSTOM_COLORS }}
                 />
             </div>
         );

examples/src/components/LineChartExample.jsx

@@ -13,12 +13,7 @@ import {
     franchiseFeesIdentifierOngoingRoyalty
 } from '../utils/fixtures';
 
-export const CUSTOM_COLORS = [
-    'rgba(195, 49, 73, 1)',
-    'rgba(168, 194, 86, 1)',
-    'rgba(243, 217, 177, 1)',
-    'rgba(194, 153, 121, 1)'
-];
+import { CUSTOM_COLOR_PALETTE } from '../utils/colors';
 
 export class LineChartExample extends Component {
     onLoadingChanged(...params) {
@@ -104,7 +99,7 @@ export class LineChartExample extends Component {
                     trendBy={attribute}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    config={{ colors: CUSTOM_COLORS }}
+                    config={{ colorPalette: CUSTOM_COLOR_PALETTE }}
                 />
             </div>
         );

examples/src/components/ScatterPlotExample.jsx

@@ -11,13 +11,6 @@ import {
     locationResortIdentifier
 } from '../utils/fixtures';
 
-export const CUSTOM_COLORS = [
-    'rgba(195, 49, 73, 1)',
-    'rgba(168, 194, 86, 1)',
-    'rgba(243, 217, 177, 1)',
-    'rgba(194, 153, 121, 1)'
-];
-
 export class ScatterPlotExample extends Component {
     onLoadingChanged(...params) {
         // eslint-disable-next-line no-console
@@ -76,7 +69,6 @@ export class ScatterPlotExample extends Component {
                     attribute={locationResort}
                     onLoadingChanged={this.onLoadingChanged}
                     onError={this.onError}
-                    config={{ colors: CUSTOM_COLORS }}
                 />
             </div>
         );

examples/src/routes/BarChartDynamic.jsx

@@ -0,0 +1,19 @@
+// (C) 2007-2018 GoodData Corporation
+import React from 'react';
+import ExampleWithSource from '../components/utils/ExampleWithSource';
+
+import BarChartDynamicExample from '../components/BarChartDynamicExample';
+import BarChartDynamicExampleSRC from '!raw-loader!../components/BarChartDynamicExample'; // eslint-disable-line
+
+
+export const BarChartDynamic = () => (
+    <div>
+        <h1>Bar Chart with dynamic colors example</h1>
+
+        <hr className="separator" />
+
+        <ExampleWithSource for={BarChartDynamicExample} source={BarChartDynamicExampleSRC} />
+    </div>
+);
+
+export default BarChartDynamic;

examples/src/routes/_list.js

@@ -23,6 +23,7 @@ import PivotTableDemo from './PivotTableDemo';
 import PivotTableDynamic from './PivotTableDynamic';
 import AggregationTest from './AggregationTest';
 import WithSubRoutes from './WithSubRoutes';
+import BarChartDynamic from './BarChartDynamic';
 
 export const advancedUseCasesRoutes = [
     { path: '/advanced/global-filters', title: 'Global Filters', Component: GlobalFilters },
@@ -32,7 +33,8 @@ export const advancedUseCasesRoutes = [
     { path: '/advanced/custom-legend', title: 'Custom Legend', Component: CustomLegend },
     { path: '/advanced/parent-filter', title: 'Parent Filter', Component: ParentFilter },
     { path: '/advanced/loading-and-error', title: 'Loading and Error Components', Component: LoadingAndError },
-    { path: '/advanced/drill-with-external-data', title: 'Drill With External Data', Component: DrillWithExternalData }
+    { path: '/advanced/drill-with-external-data', title: 'Drill With External Data', Component: DrillWithExternalData },
+    { path: '/advanced/bar-chart-dynamic', title: 'Chart Configuration', Component: BarChartDynamic }
 ];
 
 export const nextRoutes = [

examples/src/utils/colors.js

@@ -31,3 +31,46 @@ export const DEFAULT_COLOR_PALETTE = [
         .slice(-2))
     .join('')}`
 );
+
+export const CUSTOM_COLOR_PALETTE = [
+    {
+        guid: '01',
+        fill: {
+            r: 195,
+            g: 49,
+            b: 73
+        }
+    },
+    {
+        guid: '02',
+        fill: {
+            r: 168,
+            g: 194,
+            b: 86
+        }
+    },
+    {
+        guid: '03',
+        fill: {
+            r: 243,
+            g: 217,
+            b: 177
+        }
+    },
+    {
+        guid: '04',
+        fill: {
+            r: 194,
+            g: 153,
+            b: 121
+        }
+    },
+    {
+        guid: '05',
+        fill: {
+            r: 162,
+            g: 37,
+            b: 34
+        }
+    }
+];

src/components/visualizations/utils/test/color.spec.ts

@@ -1,5 +1,11 @@
 // (C) 2007-2018 GoodData Corporation
-import { getLighterColor, normalizeColorToRGB, getColorPaletteFromColors, DEFAULT_COLOR_PALETTE, getValidColorPalette } from '../color';
+import {
+    getLighterColor,
+    normalizeColorToRGB,
+    getColorPaletteFromColors,
+    DEFAULT_COLOR_PALETTE,
+    getValidColorPalette
+} from '../color';
 
 describe('Transformation', () => {
     describe('Lighten color', () => {