From 8e968fd2b2b5da5fee6059d35ee7d8ae17278295 Mon Sep 17 00:00:00 2001 From: Ivan Nejezchleb Date: Fri, 12 Oct 2018 15:16:25 +0200 Subject: [PATCH] RELATED: ONE-3355 Pass provided colorPalette to the charts --- .../src/components/BarChartDynamicExample.jsx | 101 ++++++++++++++++++ .../src/components/BubbleChartExample.jsx | 8 -- examples/src/components/LineChartExample.jsx | 9 +- .../src/components/ScatterPlotExample.jsx | 8 -- examples/src/routes/BarChartDynamic.jsx | 19 ++++ examples/src/routes/_list.js | 4 +- examples/src/utils/colors.js | 43 ++++++++ .../visualizations/utils/test/color.spec.ts | 8 +- 8 files changed, 175 insertions(+), 25 deletions(-) create mode 100644 examples/src/components/BarChartDynamicExample.jsx create mode 100644 examples/src/routes/BarChartDynamic.jsx diff --git a/examples/src/components/BarChartDynamicExample.jsx b/examples/src/components/BarChartDynamicExample.jsx new file mode 100644 index 0000000000..ce52ef91ca --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ ); + } +} + +export default BarChartDynamicExample; diff --git a/examples/src/components/BubbleChartExample.jsx b/examples/src/components/BubbleChartExample.jsx index 64f3b20c66..4402dd48ba 100644 --- a/examples/src/components/BubbleChartExample.jsx +++ b/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 }} /> ); diff --git a/examples/src/components/LineChartExample.jsx b/examples/src/components/LineChartExample.jsx index ea4c193483..cf1469db26 100644 --- a/examples/src/components/LineChartExample.jsx +++ b/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 }} /> ); diff --git a/examples/src/components/ScatterPlotExample.jsx b/examples/src/components/ScatterPlotExample.jsx index 6ee0997a2c..b347a43efb 100644 --- a/examples/src/components/ScatterPlotExample.jsx +++ b/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 }} /> ); diff --git a/examples/src/routes/BarChartDynamic.jsx b/examples/src/routes/BarChartDynamic.jsx new file mode 100644 index 0000000000..14ff791ea6 --- /dev/null +++ b/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 = () => ( +
+

Bar Chart with dynamic colors example

+ +
+ + +
+); + +export default BarChartDynamic; diff --git a/examples/src/routes/_list.js b/examples/src/routes/_list.js index c109200930..cb408159a8 100644 --- a/examples/src/routes/_list.js +++ b/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 = [ diff --git a/examples/src/utils/colors.js b/examples/src/utils/colors.js index 1dddb4d21d..54be28cb9d 100644 --- a/examples/src/utils/colors.js +++ b/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 + } + } +]; diff --git a/src/components/visualizations/utils/test/color.spec.ts b/src/components/visualizations/utils/test/color.spec.ts index b0a6230426..ced8854885 100644 --- a/src/components/visualizations/utils/test/color.spec.ts +++ b/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', () => {