sales-embedding-demo - v2 GD.UI Insights

sales-embedding-demo/CONFIGURATION.md

@@ -13,7 +13,7 @@ The purpose of running this app on your localhost is that you can alter it to yo
 * [Change the URL of the embedded dashboard](#change-the-url-of-the-embedded-dashboard)
 * [Change the logo](#change-the-logo)
 * [Change the colors](#change-the-colors)
-* [Integrate an individual insight](#integrate-an-individual-insight)
+* [Integrate individual insights](#integrate-individual-insights)
 * [Integrate a dashboard](#integrate-a-dashboard)
 
 ## Opening sales-embedding-demo in Visual Studio Code
@@ -101,21 +101,70 @@ TODO
   * `headerBorderBottomColor`
   * `leftPaneBackgroundColor`
   * `linkColor`
-* Uncomment the lines (delete the preceding `// `) and change HEX values to different colors
-  * To get the HEX value of a color, you can use [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
+* Uncomment the lines (delete the preceding `// `) and change the HEX values to different colors
+  * To get the [HEX value](https://en.wikipedia.org/wiki/Web_colors) of a color (e.g. `#ff0000`), you can use [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
 * Save the changes in `src/config.js` file (`CMD + S`)
 * Wait till your app refreshes in your browser (or refresh manually)
 
 <img src="public/configuration/03-change-colors-01.png" width=800>
 
 ---
 
-### Integrate an Individual Insight
+### Integrate Individual Insights
 
-TODO
+* Open sales-embedding-demo folder in VSCode
+  * If you don't know how, click [here](#opening-sales-embedding-demo-in-visual-studio-code) and then return back here
+* Open `src/config.js` in VSCode
+* Look for the following variables
+  * `insightIdentifier` - Identifier of the 1st insight
+  * `insightMeasure` - Identifier of a measure for the 2nd and 3rd insight
+  * `insightViewByAttribute` - Identifier of an attribute for the 2nd and 3rd insight
+  * `insightStackByAttribute` - Identifier of an attribute for the 2nd insight
+
+#### Get the Identifier of the First Insight
+
+* In your browser go to `https://<domain>/analyze/#/<workspace>` and create _and save_ an insight
+* In your browser go to `https://<domain>/labs/apps`, click on **Accelerator Toolkit** and then select **Metadata**
+* In the top left, **Pick metadata category** and select **Visualization Objects**
+* Look for your chart and copy its identifier (click the clipboard icon, or select text and `CMD + C`)
+* In the `src/config.js` replace the value of `insightIdentifier` variable with the identifier in your clipboard (`CMD + V`)
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)
+
+<img src="public/configuration/04-integrate-insight-01.png" width=800>
+<img src="public/configuration/04-integrate-insight-02.png" width=800>
+<img src="public/configuration/04-integrate-insight-03.png" width=800>
+<img src="public/configuration/04-integrate-insight-04.png" width=800>
+<img src="public/configuration/04-integrate-insight-05.png" width=800>
+
+#### Get the Identifier of the Metric
+
+* In your browser go to `https://<domain>/labs/apps`, click on **Accelerator Toolkit** and then select **Metadata**
+* In the top left, **Pick metadata category** and select **Measures**
+* Look for your desired measure and copy its identifier (click the clipboard icon, or select text and `CMD + C`)
+* In the `src/config.js` replace the value of `insightMeasure` variable with the identifier in your clipboard (`CMD + V`)
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)
+
+#### Get the Identifiers of Attributes
+
+* In your browser go to `https://<domain>/labs/apps`, click on **Accelerator Toolkit** and then select **Metadata**
+* In the top left, **Pick metadata category** and select **Attributes**
+* Look for your desired view-by attribute and copy its identifier
+* In the `src/config.js` replace the value of `insightViewByAttribute` variable with the identifier in your clipboard
+* Then, look for your desired stack-by attribute and copy its identifier
+* In the `src/config.js` replace the value of `insightStackByAttribute` variable with the identifier in your clipboard
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)
 
 ---
 
 ### Integrate a Dashboard
 
-TODO
+* In your browser go to `https://<domain>/dashboards/#/project/<workspace>` and create _and save_ a dashboard
+* In your browser go to `https://<domain>/labs/apps`, click on **Accelerator Toolkit** and then select **Metadata**
+* In the top left, **Pick metadata category** and select **Analytical Dashboards**
+* Look for your dashboard and copy its identifier (click the clipboard icon, or select text and `CMD + C`)
+* In the `src/config.js` replace the value of `insightIdentifier` variable with the identifier in your clipboard (`CMD + V`)
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)

sales-embedding-demo/src/components/Page.js

@@ -46,6 +46,16 @@ const Page = ({
                                 GD.UI Components
                             </NavLink>
                         </li>
+                        <li>
+                            <NavLink
+                                to={"/dashboardview"}
+                                className={styles.Link}
+                                activeClassName={styles.LinkActive}
+                                style={{ color: config.linkColor }}
+                            >
+                                Integrated Dashboard
+                            </NavLink>
+                        </li>
                     </ul>
                 </nav>
                 <div className={cx(styles.Content, contentClassName)}>{children}</div>

sales-embedding-demo/src/config.js

@@ -26,18 +26,21 @@ export default {
     dashboardUrl:
         "https://e2e-demo28.na.gooddata.com/dashboards/embedded/#/project/gf5ar7e02sth33atdbzpabhvbddaqva3/dashboard/aadPCE04gggj?showNavigation=false",
 
-    // Identifier of the insight
+    // Identifier of the 1st insight
     insightIdentifier: "abg8hF92fKWg",
 
-    // TODO
+    // Identifier of a measure for the 2nd and 3rd insight
     insightMeasure: "aaWP28vUgl64",
 
-    // TODO
+    // Identifier of an attribute for the 2nd and 3rd insight
     insightViewByAttribute: "label.product.productbrand",
 
-    // TODO
+    // Identifier of an attribute for the 2nd insight
     insightStackByAttribute: "label.product.productcategory",
 
+    // Identifier of an integrated dashboard
+    dashboardIdentifier: "aadPCE04gggj",
+
     // Uncomment line below to change the header background color
     // headerBackgroundColor: "#303442",
 

sales-embedding-demo/src/routes/AppRouter.js

@@ -8,6 +8,7 @@ import Logout from "./Logout";
 import Welcome from "./Welcome";
 import Home from "./Home";
 import GDUIComponents from "./GDUIComponents";
+import DashboardView from "./DashboardView";
 
 import styles from "./AppRouter.module.scss";
 
@@ -27,7 +28,8 @@ const AppRouter = () => {
                 <WorkspaceProvider>
                     <Route exact path="/welcome" component={Welcome} />
                     <Route exact path="/" component={Home} />
-                    <Route exact path="/gduiComponents" component={GDUIComponents} />
+                    <Route exact path="/gduicomponents" component={GDUIComponents} />
+                    <Route exact path="/dashboardview" component={DashboardView} />
                     <Route exact path="/login" component={Login} />
                     <Route exact path="/logout" component={Logout} />
                     <RedirectIfNotLoggedIn />

sales-embedding-demo/src/routes/DashboardView.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { DashboardView } from "@gooddata/sdk-ui-ext";
+
+import Page from "../components/Page";
+import config from "../config";
+
+import styles from "./DashboardView.module.scss";
+
+const DashboardViewRoute = () => {
+    return (
+        <Page contentClassName={styles.DashboardView}>
+            <DashboardView dashboard={config.dashboardIdentifier} />
+        </Page>
+    );
+};
+
+export default DashboardViewRoute;

sales-embedding-demo/src/routes/DashboardView.module.scss

@@ -0,0 +1,3 @@
+.DashboardView {
+    padding: 20px;
+}