RELATED: ONE-3065 Scatter plot - production ready

examples/src/components/DonutChartExample.jsx

@@ -67,7 +67,7 @@ export class DonutChartExample extends Component {
         ];
 
         return (
-            <div style={{ height: 300 }} className="s-pie-chart">
+            <div style={{ height: 300 }} className="s-donut-chart">
                 <DonutChart
                     projectId={projectId}
                     measures={measures}

examples/src/components/ScatterPlotExample.jsx

@@ -0,0 +1,86 @@
+// (C) 2007-2018 GoodData Corporation
+import React, { Component } from 'react';
+import { ScatterPlot } from '@gooddata/react-components';
+
+import '@gooddata/react-components/styles/css/main.css';
+
+import {
+    projectId,
+    franchiseFeesIdentifier,
+    franchisedSalesIdentifier,
+    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
+        console.log('ScatterPlotExample onLoadingChanged', ...params);
+    }
+
+    onError(...params) {
+        // eslint-disable-next-line no-console
+        console.log('ScatterPlotExample onError', ...params);
+    }
+
+    render() {
+        const xMeasure = {
+            measure: {
+                localIdentifier: 'franchiseFeesIdentifier',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: franchiseFeesIdentifier
+                        }
+                    }
+                },
+                format: '#,##0'
+            }
+        };
+
+        const yMeasure = {
+            measure: {
+                localIdentifier: 'franchisedSalesIdentifier',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: franchisedSalesIdentifier
+                        }
+                    }
+                },
+                format: '#,##0'
+            }
+        };
+
+        const locationResort = {
+            visualizationAttribute: {
+                displayForm: {
+                    identifier: locationResortIdentifier
+                },
+                localIdentifier: 'location_resort'
+            }
+        };
+
+        return (
+            <div style={{ height: 300 }} className="s-scatter-plot">
+                <ScatterPlot
+                    projectId={projectId}
+                    xAxisMeasure={xMeasure}
+                    yAxisMeasure={yMeasure}
+                    attribute={locationResort}
+                    onLoadingChanged={this.onLoadingChanged}
+                    onError={this.onError}
+                    config={{ colors: CUSTOM_COLORS }}
+                />
+            </div>
+        );
+    }
+}
+
+export default ScatterPlotExample;

examples/src/routes/BasicComponents.jsx

@@ -12,6 +12,7 @@ import StackedAreaChartExample from '../components/StackedAreaChartExample';
 import PieChartExample from '../components/PieChartExample';
 import DonutChartExample from '../components/DonutChartExample';
 import ComboChartExample from '../components/ComboChartExample';
+import ScatterPlotExample from '../components/ScatterPlotExample';
 import TableExample from '../components/TableExample';
 import KpiExample from '../components/KpiExample';
 
@@ -23,6 +24,7 @@ import StackedAreaChartExampleSRC from '!raw-loader!../components/StackedAreaCha
 import PieChartExampleSRC from '!raw-loader!../components/PieChartExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
 import DonutChartExampleSRC from '!raw-loader!../components/DonutChartExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
 import ComboChartExampleSRC from '!raw-loader!../components/ComboChartExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
+import ScatterPlotExampleSRC from '!raw-loader!../components/ScatterPlotExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
 import TableExampleSRC from '!raw-loader!../components/TableExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
 import KpiExampleSRC from '!raw-loader!../components/KpiExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
 
@@ -71,6 +73,9 @@ export const BasicComponents = () => (
         <h2 id="combo-chart">Combo chart</h2>
         <ExampleWithSource for={ComboChartExample} source={ComboChartExampleSRC} />
 
+        <h2 id="scatter-plot">Scatter plot</h2>
+        <ExampleWithSource for={ScatterPlotExample} source={ScatterPlotExampleSRC} />
+
         <hr className="separator" />
 
         <h2 id="table">Table</h2>

examples/src/utils/fixtures.js

@@ -33,6 +33,7 @@ export const franchiseFeesIdentifierOngoingRoyalty = 'aaWGcgnsfxIg';
 export const franchiseFeesInitialFranchiseFeeIdentifier = 'aaDHcv6wevkl';
 export const franchiseFeesTag = 'franchise_fees';
 export const franchiseFeesVisualizationIdentifier = 'aahnVeLugyFj';
+export const franchisedSalesIdentifier = 'aclF4oDIe5hP';
 export const locationCityAttributeIdentifier = 'attr.restaurantlocation.locationcity';
 export const locationCityAttributeUri = '/gdc/md/k26dtejorcqlqf11crn6imbeevp2q4kg/obj/2208';
 export const locationCityDisplayFormIdentifier = 'label.restaurantlocation.locationcity';

examples/test/BasicComponents_test.js

@@ -76,3 +76,21 @@ test('KPI has correct number', async (t) => {
         .expect(kpi.textContent)
         .eql('$92,556,577');
 });
+
+test('Donut chart should render', async (t) => {
+    const loading = Selector('.s-loading');
+    const chart = Selector('.s-donut-chart');
+    await t
+        .expect(loading.exists).ok()
+        .expect(chart.exists).ok()
+        .expect(chart.textContent);
+});
+
+test('Scatter plot should render', async (t) => {
+    const loading = Selector('.s-loading');
+    const chart = Selector('.s-scatter-plot');
+    await t
+        .expect(loading.exists).ok()
+        .expect(chart.exists).ok()
+        .expect(chart.textContent);
+});

mock-schema.json

@@ -18,6 +18,11 @@
           "identifier": "3",
           "title": "Sum of Sales"
         },
+        {
+          "identifier": "4",
+          "title": "% of Goal",
+          "format": "#,##0.00%"
+        },
         {
           "identifier": "aagV61RmaPTt",
           "title": "Amount [BOP]"

package.json

@@ -13,9 +13,9 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@gooddata/mock-js": "1.0.0-alpha4",
+    "@gooddata/mock-js": "1.1.0",
     "@gooddata/test-storybook": "1.2.1",
-    "@gooddata/typings": "2.0.0-alpha2",
+    "@gooddata/typings": "2.0.0",
     "@storybook/addon-actions": "3.4.0",
     "@storybook/addon-options": "3.4.0",
     "@storybook/react": "3.4.0",
@@ -92,7 +92,7 @@
     "yup": "^0.24.1"
   },
   "dependencies": {
-    "@gooddata/gooddata-js": "6.0.0-alpha10",
+    "@gooddata/gooddata-js": "6.0.0",
     "@gooddata/goodstrap": "55.0.0",
     "@gooddata/js-utils": "^2.0.1",
     "@gooddata/numberjs": "^3.1.2",

src/components/DonutChart.tsx

@@ -20,7 +20,7 @@ export interface IDonutChartProps extends ICommonChartProps, IDonutChartBucketPr
 type IDonutChartNonBucketProps = Subtract<IDonutChartProps, IDonutChartBucketProps>;
 
 /**
- * [DonutChart](http://sdk.gooddata.com/gdc-ui-sdk-doc/docs/next/pie_chart_component.html)
+ * [DonutChart](http://sdk.gooddata.com/gooddata-ui/docs/donut_chart_component.html)
  * is a component with bucket props measures, viewBy, filters
  */
 export function DonutChart(props: IDonutChartProps): JSX.Element {

src/components/ScatterPlot.tsx

@@ -26,8 +26,8 @@ const generateScatterDimensionsFromBuckets =
     (buckets: VisualizationObject.IBucket[]) => generateDefaultScatterDimensions(convertBucketsToAFM(buckets));
 
 /**
- * [ScatterPlot](http://sdk.gooddata.com/gdc-ui-sdk-doc/docs/next/line_chart_component.html) TODO: change
- * is a component with bucket props measures, trendBy, segmentBy, filters
+ * [ScatterPlot](http://sdk.gooddata.com/gooddata-ui/docs/scatter_plot_component.html)
+ * is a component with bucket props xAxisMeasure, yAxisMeasure, attribute, filters
  */
 export function ScatterPlot(props: IScatterPlotProps): JSX.Element {
     const buckets: VisualizationObject.IBucket[] = [

src/components/core/ScatterPlot.tsx

@@ -2,17 +2,30 @@
 import * as React from 'react';
 import { BaseChart, IChartProps } from './base/BaseChart';
 import { ChartPropTypes, Requireable } from '../../proptypes/Chart';
+import { DEFAULT_SERIES_LIMIT } from '../visualizations/chart/highcharts/commonConfiguration';
 
 export { Requireable };
 
 export class ScatterPlot extends React.Component<IChartProps, null> {
     public static propTypes = ChartPropTypes;
 
     public render() {
+        const { config } = this.props;
+        const defaultConfig = {
+            limits: {
+                series: DEFAULT_SERIES_LIMIT,
+                categories: DEFAULT_SERIES_LIMIT
+            }
+        };
+        const finalConfig = {
+            ...defaultConfig,
+            ...config
+        };
         return (
             <BaseChart
                 type="scatter"
                 {...this.props}
+                config={finalConfig}
             />
         );
     }

src/components/visualizations/chart/chartOptions/comboChartOptions.ts

@@ -1,7 +1,4 @@
 import { MEASURES, SECONDARY_MEASURES } from '../../../../constants/bucketNames';
-import {
-    unwrap
-} from '../../utils/common';
 
 export function getComboChartOptions(
     config: any,
@@ -40,13 +37,7 @@ export function getComboChartOptions(
         });
     }
 
-    const showInPercent = measureGroup.items.some((wrappedMeasure: any) => {
-        const measure = unwrap(wrappedMeasure);
-        return measure.format.includes('%');
-    });
-
     return {
-        showInPercent,
         data: {
             series,
             categories