FEATURE: BB-682 added headline live example

gooddata · Aug 9, 2018 · 15aa8a1 · 15aa8a1
1 parent 3c09d74
commit 15aa8a1
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 0 deletions.
diff --git a/examples/src/components/HeadlineExample.jsx b/examples/src/components/HeadlineExample.jsx
@@ -0,0 +1,83 @@
+// (C) 2007-2018 GoodData Corporation
+import React, { Component } from 'react';
+import { Headline } from '@gooddata/react-components';
+
+import '@gooddata/react-components/styles/css/main.css';
+
+import {
+    projectId,
+    franchiseFeesIdentifier,
+    franchiseFeesAdRoyaltyIdentifier
+} from '../utils/fixtures';
+
+export class HeadlineExample extends Component {
+    onLoadingChanged(...params) {
+    // eslint-disable-next-line no-console
+        return console.log('ColumnChartExample onLoadingChanged', ...params);
+    }
+
+    onError(...params) {
+    // eslint-disable-next-line no-console
+        return console.log('ColumnChartExample onError', ...params);
+    }
+
+    render() {
+        const primaryMeasure = {
+            measure: {
+                localIdentifier: 'franchiseFeesIdentifier',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: franchiseFeesIdentifier
+                        }
+                    }
+                },
+                format: '#,##0'
+            }
+        };
+        const secondaryMeasure = {
+            measure: {
+                localIdentifier: 'franchiseFeesAdRoyaltyIdentifier',
+                definition: {
+                    measureDefinition: {
+                        item: {
+                            identifier: franchiseFeesAdRoyaltyIdentifier
+                        }
+                    }
+                },
+                format: '#,##0'
+            }
+        };
+
+        return (
+            <div className="s-headline" style={{ display: 'flex' }}>
+                <style jsx>
+                    {`
+                        .column {
+                            flex: '1 1 50%'
+                        }
+                    `}
+                </style>
+                <div className="column">
+                    <Headline
+                        projectId={projectId}
+                        primaryMeasure={primaryMeasure}
+                        onLoadingChanged={this.onLoadingChanged}
+                        onError={this.onError}
+                    />
+                </div>
+                <div className="column">
+                    <Headline
+                        projectId={projectId}
+                        primaryMeasure={primaryMeasure}
+                        secondaryMeasure={secondaryMeasure}
+                        onLoadingChanged={this.onLoadingChanged}
+                        onError={this.onError}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default HeadlineExample;
diff --git a/examples/src/routes/BasicComponents.jsx b/examples/src/routes/BasicComponents.jsx
@@ -15,6 +15,7 @@ import ScatterPlotExample from '../components/ScatterPlotExample';
 import BubbleChartExample from '../components/BubbleChartExample';
 import TreemapExample from '../components/TreemapExample';
 import TableExample from '../components/TableExample';
+import HeadlineExample from '../components/HeadlineExample';
 import KpiExample from '../components/KpiExample';
 
 import BarChartExampleSRC from '!raw-loader!../components/BarChartExample'; // eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved, import/extensions, import/first
@@ -29,6 +30,7 @@ import ScatterPlotExampleSRC from '!raw-loader!../components/ScatterPlotExample'
 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 HeadlineExampleSRC from '!raw-loader!../components/HeadlineExample'; // 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
 
 export const BasicComponents = () => (
@@ -86,6 +88,9 @@ export const BasicComponents = () => (
         <h2 id="table">Table</h2>
         <ExampleWithSource for={TableExample} source={TableExampleSRC} />
 
+        <h2 id="table">Headline</h2>
+        <ExampleWithSource for={HeadlineExample} source={HeadlineExampleSRC} />
+
         <h2 id="kpi">KPI</h2>
         <p>
             The interface of the KPI component is different compared to the components above.

diff --git a/examples/test/BasicComponents_test.js b/examples/test/BasicComponents_test.js
@@ -76,3 +76,7 @@ test('Bubble chart should render', async (t) => {
 test('Treemap should render', async (t) => {
     await checkRenderChart('.s-tree-map', t);
 });
+
+test('Headline should render', async (t) => {
+    await checkRenderChart('.s-headline', t);
+});