sales-embedding-demo - v2 WIP2

gooddata · Apr 19, 2021 · f2c37ac · f2c37ac
1 parent 4999ed5
commit f2c37ac
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 70 deletions.
diff --git a/sales-embedding-demo/package.json b/sales-embedding-demo/package.json
@@ -17,6 +17,7 @@
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-helmet": "^5.2.1",
+        "react-highcharts": "^16.1.0",
         "react-router-dom": "^5.0.1",
         "react-router-use-location-state": "^2.3.1",
         "react-scripts": "3.4.3",

diff --git a/sales-embedding-demo/src/components/CustomBarChart.js b/sales-embedding-demo/src/components/CustomBarChart.js
@@ -0,0 +1,34 @@
+import React from "react";
+import ReactHighcharts from "react-highcharts";
+
+const CustomBarChart = ({ error, isLoading, result }) => {
+    if (isLoading) {
+        return <span>Loading…</span>;
+    }
+
+    if (error) {
+        return <span>Something went wrong :-(</span>;
+    }
+
+    if (result) {
+        const config = {
+            chart: {
+                type: "column",
+            },
+            title: {
+                text: "🎉🍾🙌 Custom Chart 🙌🍾🎉",
+            },
+            series: result
+                .data()
+                .slices()
+                .toArray()
+                .map(slice => ({ data: [parseFloat(slice.rawData()[0])] })),
+        };
+
+        return <ReactHighcharts config={config} />;
+    }
+
+    return <span>Init…</span>;
+};
+
+export default CustomBarChart;
diff --git a/sales-embedding-demo/src/components/Header/Links.js b/sales-embedding-demo/src/components/Header/Links.js
@@ -28,7 +28,6 @@ const Links = () => {
                 className={styles.Link}
                 style={{ color: config.linkColor }}
                 activeClassName={styles.LinkActive}
-                exact
             >
                 Reports
             </NavLink>

diff --git a/sales-embedding-demo/src/components/Page.js b/sales-embedding-demo/src/components/Page.js
@@ -1,20 +1,55 @@
 import React from "react";
 import Helmet from "react-helmet";
 import cx from "classnames";
+import { NavLink } from "react-router-dom";
 
 import Header from "./Header/Header";
 import Footer from "./Footer";
+import config from "../config";
 
 import styles from "./Page.module.scss";
 
-const Page = ({ children, className = null, mainClassName = null, title = "GoodData App" }) => {
+const Page = ({
+    children,
+    className = null,
+    mainClassName = null,
+    contentClassName = null,
+    title = "GoodData App",
+}) => {
     return (
         <div className={cx(styles.Page, className)}>
             <Helmet>
                 <title>{title}</title>
             </Helmet>
             <Header />
-            <main className={cx(styles.Main, mainClassName, "s-page")}>{children}</main>
+            <main className={cx(styles.Main, mainClassName, "s-page")}>
+                <nav className={styles.Nav} style={{ backgroundColor: config.leftPaneBackgroundColor }}>
+                    <ul>
+                        <li>
+                            <NavLink
+                                to={"/"}
+                                className={styles.Link}
+                                activeClassName={styles.LinkActive}
+                                style={{ color: config.linkColor }}
+                                exact
+                            >
+                                Embedded Dashboard
+                            </NavLink>
+                        </li>
+                        <li>
+                            <NavLink
+                                to={"/gduicomponents"}
+                                className={styles.Link}
+                                activeClassName={styles.LinkActive}
+                                style={{ color: config.linkColor }}
+                            >
+                                GD.UI Components
+                            </NavLink>
+                        </li>
+                    </ul>
+                </nav>
+                <div className={cx(styles.Content, contentClassName)}>{children}</div>
+            </main>
             <Footer />
         </div>
     );

diff --git a/sales-embedding-demo/src/components/Page.module.scss b/sales-embedding-demo/src/components/Page.module.scss
@@ -8,11 +8,31 @@
 }
 
 .Main {
+    display: flex;
+    padding: 56px 0 0 0;
+    margin: 0;
+    width: 100%;
     flex: 1 0 auto;
-    padding: $spacing * 2 + 56px $spacing $spacing * 2 $spacing;
-    max-width: 1200px;
-    width: calc(100% - (#{$spacing} * 2));
-    margin: 0 auto;
+
+    .Nav {
+        width: 255px;
+
+        .Link {
+            text-decoration: none;
+
+            &.LinkActive {
+                font-weight: bold;
+            }
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .Content {
+        flex: 1 0 auto;
+    }
 }
 
 .VerticalCenter {

diff --git a/sales-embedding-demo/src/config.js b/sales-embedding-demo/src/config.js
@@ -3,7 +3,7 @@
 /************************************************************************/
 /*
 /* Note: Common mistake is to forget the comma at the end of each line.
-/*       Except for lines that are commented out (they start with //).
+/*       Except for lines that are commented out (they start with // ).
 /*
 /* Note: Values must be inside of quotes.
 /*       It doesn't matter if single ' or double ", but they must match.
@@ -26,6 +26,18 @@ export default {
     dashboardUrl:
         "https://e2e-demo28.na.gooddata.com/dashboards/embedded/#/project/gf5ar7e02sth33atdbzpabhvbddaqva3/dashboard/aadPCE04gggj?showNavigation=false",
 
+    // Identifier of the insight
+    insightIdentifier: "abg8hF92fKWg",
+
+    // TODO
+    insightMeasure: "aaWP28vUgl64",
+
+    // TODO
+    insightViewByAttribute: "label.product.productbrand",
+
+    // TODO
+    insightStackByAttribute: "label.product.productcategory",
+
     // Uncomment line below to change the header background color
     // headerBackgroundColor: "#303442",
 

diff --git a/sales-embedding-demo/src/routes/AppRouter.js b/sales-embedding-demo/src/routes/AppRouter.js
@@ -2,12 +2,12 @@ import React from "react";
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
 
 import { WorkspaceProvider } from "../contexts/Workspace";
-import Page from "../components/Page";
 
 import Login from "./Login";
 import Logout from "./Logout";
 import Welcome from "./Welcome";
 import Home from "./Home";
+import GDUIComponents from "./GDUIComponents";
 
 import styles from "./AppRouter.module.scss";
 
@@ -25,9 +25,9 @@ const AppRouter = () => {
             <Router>
                 {/* WorkspaceProvider depends on Router so it must be nested */}
                 <WorkspaceProvider>
-                    <Route exact path="/" component={Home} />
                     <Route exact path="/welcome" component={Welcome} />
-                    <Route exact path="/dashboard" component={() => <Page>Dashboard</Page>} />
+                    <Route exact path="/" component={Home} />
+                    <Route exact path="/gduiComponents" component={GDUIComponents} />
                     <Route exact path="/login" component={Login} />
                     <Route exact path="/logout" component={Logout} />
                     <RedirectIfNotLoggedIn />

diff --git a/sales-embedding-demo/src/routes/GDUIComponents.js b/sales-embedding-demo/src/routes/GDUIComponents.js
@@ -0,0 +1,38 @@
+import React from "react";
+import { InsightView } from "@gooddata/sdk-ui-ext";
+import { ColumnChart } from "@gooddata/sdk-ui-charts";
+import { newMeasure, newAttribute } from "@gooddata/sdk-model";
+import { Execute } from "@gooddata/sdk-ui";
+
+import Page from "../components/Page";
+import CustomBarChart from "../components/CustomBarChart";
+import config from "../config";
+
+import styles from "./GDUIComponents.module.scss";
+
+const GDUIComponents = () => {
+    return (
+        <Page contentClassName={styles.GDUIComponents}>
+            <div className={styles.Insight}>
+                <InsightView insight={config.insightIdentifier} config={{ legend: { position: "right" } }} />
+            </div>
+            <div className={styles.Insight}>
+                <ColumnChart
+                    measures={[newMeasure(config.insightMeasure)]}
+                    viewBy={newAttribute(config.insightViewByAttribute)}
+                    stackBy={newAttribute(config.insightStackByAttribute)}
+                    config={{ legend: { position: "right" } }}
+                />
+            </div>
+            <div className={styles.Insight}>
+                <Execute
+                    seriesBy={[newMeasure(config.insightMeasure)]}
+                    slicesBy={[newAttribute(config.insightViewByAttribute)]}
+                    children={CustomBarChart}
+                />
+            </div>
+        </Page>
+    );
+};
+
+export default GDUIComponents;
diff --git a/sales-embedding-demo/src/routes/GDUIComponents.module.scss b/sales-embedding-demo/src/routes/GDUIComponents.module.scss
@@ -0,0 +1,7 @@
+.GDUIComponents {
+    padding: 20px;
+
+    .Insight {
+        height: 400px;
+    }
+}
diff --git a/sales-embedding-demo/src/routes/Home.js b/sales-embedding-demo/src/routes/Home.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
 
 import Page from "../components/Page";
 import config from "../config";
@@ -8,34 +7,8 @@ import styles from "./Home.module.scss";
 
 const Home = () => {
     return (
-        <Page mainClassName={styles.Home}>
-            <nav className={styles.Nav} style={{ backgroundColor: config.leftPaneBackgroundColor }}>
-                <ul>
-                    <li>
-                        <NavLink
-                            to={"/"}
-                            className={styles.Link}
-                            activeClassName={styles.LinkActive}
-                            style={{ color: config.linkColor }}
-                        >
-                            Analytics Dashboard (iframe)
-                        </NavLink>
-                    </li>
-                    <li>
-                        <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
-                            DashboardView
-                        </NavLink>
-                    </li>
-                    <li>
-                        <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
-                            InsightView
-                        </NavLink>
-                    </li>
-                </ul>
-            </nav>
-            <div className={styles.Content}>
-                <iframe src={config.dashboardUrl} title="Embedded Dashboard"></iframe>
-            </div>
+        <Page contentClassName={styles.Home}>
+            <iframe src={config.dashboardUrl} title="Embedded Dashboard"></iframe>
         </Page>
     );
 };

diff --git a/sales-embedding-demo/src/routes/Home.module.scss b/sales-embedding-demo/src/routes/Home.module.scss
@@ -1,33 +1,7 @@
 .Home {
-    display: flex;
-    padding: 56px 0 0 0;
-    margin: 0;
-    width: 100%;
-    max-width: none;
-
-    .Nav {
-        width: 255px;
-
-        .Link {
-            text-decoration: none;
-
-            &.LinkActive {
-                font-weight: bold;
-            }
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    .Content {
-        flex: 1 0 auto;
-
-        iframe {
-            border: 0;
-            width: 100%;
-            height: 100%;
-        }
+    iframe {
+        border: 0;
+        width: 100%;
+        height: 100%;
     }
 }
diff --git a/sales-embedding-demo/yarn.lock b/sales-embedding-demo/yarn.lock
@@ -7387,6 +7387,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-7.1.1.tgz#8c4433e39d5e7dbdc064685d9548181a35e12c19"
   integrity sha512-BQtWDQmH4AweQNFLGJCHBQwv9tj9kyp35bp2FFpmNBm7LOecCQdLjvZNgUKvCsKzBzJJIywcwWu4QEcAkPGCjg==
 
+highcharts@^6.0.4:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-6.2.0.tgz#2a6d04652eb43c66f462ca7e2d2808f1f2782b61"
+  integrity sha512-A4E89MA+kto8giic7zyLU6ZxfXnVeCUlKOyzFsah3+n4BROx4bgonl92KIBtwLud/mIWir8ahqhuhe2by9LakQ==
+
 highlight-es@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/highlight-es/-/highlight-es-1.0.3.tgz#12abc300a27e686f6f18010134e3a5c6d2fe6930"
@@ -11958,6 +11963,13 @@ react-helmet@^5.2.1:
     react-fast-compare "^2.0.2"
     react-side-effect "^1.1.0"
 
+react-highcharts@^16.1.0:
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/react-highcharts/-/react-highcharts-16.1.0.tgz#aa2d451171197462e07fa8652a42bac43da6068a"
+  integrity sha512-CHpCSMN96lXKeTIpx8UJPsUgeNeJqh81NN6cbzraiHQBiQz2mzXa5aaIWYbMEQ2NHhAEWU5uj5DPhZY1f1Rq+A==
+  dependencies:
+    highcharts "^6.0.4"
+
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"