RELATED: ONE-3058 Treemap

gooddata · Jul 23, 2018 · 05a77cc · 05a77cc
1 parent 57bc8d5
commit 05a77cc
Show file tree

Hide file tree

Showing 83 changed files with 4,934 additions and 544 deletions.
diff --git a/.storybook/middleware.js b/.storybook/middleware.js
@@ -1,7 +1,7 @@
 const register = require('@gooddata/mock-js');
 
 function registerMocks(app) {
-    const schema = require('../mock-schema.json');
+    const schema = require('../mock-schema.js');
     const config = {
         randomSeed: 'reactcomponents',
         pollCount: 1

diff --git a/examples/src/components/TreemapExample.jsx b/examples/src/components/TreemapExample.jsx
@@ -0,0 +1,69 @@
+// (C) 2007-2018 GoodData Corporation
+import React, { Component } from 'react';
+import { Treemap } from '@gooddata/react-components';
+
+import '@gooddata/react-components/styles/css/main.css';
+
+import { numberOfChecksIdentifier, locationCityDisplayFormIdentifier, locationStateDisplayFormIdentifier, projectId } from '../utils/fixtures';
+
+export class TreeMapExample extends Component {
+    onLoadingChanged(...params) {
+        // eslint-disable-next-line no-console
+        console.info('TreeMapExample onLoadingChanged', ...params);
+    }
+
+    onError(...params) {
+        // eslint-disable-next-line no-console
+        console.info('TreeMapExample onLoadingChanged', ...params);
+    }
+
+    render() {
+        const numberOfChecks = {
+            measure: {
+                localIdentifier: 'numberOfChecks',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: numberOfChecksIdentifier
+                        }
+                    }
+                },
+                alias: '# Checks',
+                format: '#,##0'
+            }
+        };
+
+        const locationState = {
+            visualizationAttribute: {
+                displayForm: {
+                    identifier: locationStateDisplayFormIdentifier
+                },
+                localIdentifier: 'label.restaurantlocation.locationstate'
+            }
+        };
+
+        const locationCity = {
+            visualizationAttribute: {
+                displayForm: {
+                    identifier: locationCityDisplayFormIdentifier
+                },
+                localIdentifier: 'label.restaurantlocation.locationcity'
+            }
+        };
+
+        return (
+            <div style={{ height: 300 }} className="s-tree-map">
+                <Treemap
+                    projectId={projectId}
+                    measures={[numberOfChecks]}
+                    viewBy={locationState}
+                    segmentBy={locationCity}
+                    onLoadingChanged={this.onLoadingChanged}
+                    onError={this.onError}
+                />
+            </div>
+        );
+    }
+}
+
+export default TreeMapExample;
diff --git a/examples/src/routes/BasicComponents.jsx b/examples/src/routes/BasicComponents.jsx
@@ -13,6 +13,7 @@ import DonutChartExample from '../components/DonutChartExample';
 import ComboChartExample from '../components/ComboChartExample';
 import ScatterPlotExample from '../components/ScatterPlotExample';
 import BubbleChartExample from '../components/BubbleChartExample';
+import TreemapExample from '../components/TreemapExample';
 import TableExample from '../components/TableExample';
 import KpiExample from '../components/KpiExample';
 
@@ -26,6 +27,7 @@ import DonutChartExampleSRC from '!raw-loader!../components/DonutChartExample';
 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 BubbleChartExampleSRC from '!raw-loader!../components/BubbleChartExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
+import TreemapExampleSRC from '!raw-loader!../components/TreemapExample'; // 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
 
@@ -76,6 +78,9 @@ export const BasicComponents = () => (
         <h2 id="bubble-chart">Bubble chart</h2>
         <ExampleWithSource for={BubbleChartExample} source={BubbleChartExampleSRC} />
 
+        <h2 id="treemap">Treemap</h2>
+        <ExampleWithSource for={TreemapExample} source={TreemapExampleSRC} />
+
         <hr className="separator" />
 
         <h2 id="table">Table</h2>

diff --git a/examples/src/utils/fixtures.js b/examples/src/utils/fixtures.js
@@ -49,5 +49,6 @@ export const menuCategoryAttributeDFIdentifier = 'label.menuitem.menucategory';
 export const menuItemNameAttributeDFIdentifier = 'label.menuitem.menuitemname';
 export const monthDateIdentifier = 'date.abm81lMifn6q';
 export const monthDateIdentifierJanuary = `/gdc/md/${demoProjectId}/obj/2071/elements?id=1`;
+export const numberOfChecksIdentifier = 'aeOt50ngicOD';
 export const tableVisualizationIdentifier = 'aatFRvXBdilm';
 export const totalSalesIdentifier = 'aa7ulGyKhIE5';
diff --git a/examples/test/BasicComponents_test.js b/examples/test/BasicComponents_test.js
@@ -72,3 +72,7 @@ test('Scatter plot should render', async (t) => {
 test('Bubble chart should render', async (t) => {
     await checkRenderChart('.s-bubble-chart', t);
 });
+
+test('Treemap should render', async (t) => {
+    await checkRenderChart('.s-tree-map', t);
+});