From f2c37ac6823857c1509f753ffba87a39b5f1418c Mon Sep 17 00:00:00 2001 From: Jiri Zajic Date: Tue, 13 Apr 2021 19:22:17 -0700 Subject: [PATCH] sales-embedding-demo - v2 WIP2 --- sales-embedding-demo/package.json | 1 + .../src/components/CustomBarChart.js | 34 ++++++++++++++++ .../src/components/Header/Links.js | 1 - sales-embedding-demo/src/components/Page.js | 39 ++++++++++++++++++- .../src/components/Page.module.scss | 28 +++++++++++-- sales-embedding-demo/src/config.js | 14 ++++++- sales-embedding-demo/src/routes/AppRouter.js | 6 +-- .../src/routes/GDUIComponents.js | 38 ++++++++++++++++++ .../src/routes/GDUIComponents.module.scss | 7 ++++ sales-embedding-demo/src/routes/Home.js | 31 +-------------- .../src/routes/Home.module.scss | 34 ++-------------- sales-embedding-demo/yarn.lock | 12 ++++++ 12 files changed, 175 insertions(+), 70 deletions(-) create mode 100644 sales-embedding-demo/src/components/CustomBarChart.js create mode 100644 sales-embedding-demo/src/routes/GDUIComponents.js create mode 100644 sales-embedding-demo/src/routes/GDUIComponents.module.scss diff --git a/sales-embedding-demo/package.json b/sales-embedding-demo/package.json index 76ccff82..20bc1cf6 100644 --- 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 new file mode 100644 index 00000000..b2b8dedc --- /dev/null +++ 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 Loadingโ€ฆ; + } + + if (error) { + return Something went wrong :-(; + } + + if (result) { + const config = { + chart: { + type: "column", + }, + title: { + text: "๐ŸŽ‰๐Ÿพ๐Ÿ™Œ Custom Chart ๐Ÿ™Œ๐Ÿพ๐ŸŽ‰", + }, + series: result + .data() + .slices() + .toArray() + .map(slice => ({ data: [parseFloat(slice.rawData()[0])] })), + }; + + return ; + } + + return Initโ€ฆ; +}; + +export default CustomBarChart; diff --git a/sales-embedding-demo/src/components/Header/Links.js b/sales-embedding-demo/src/components/Header/Links.js index 8d7588fd..3e5ca9bb 100644 --- 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 diff --git a/sales-embedding-demo/src/components/Page.js b/sales-embedding-demo/src/components/Page.js index 8018006b..0dd4e25e 100644 --- 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 (
{title}
-
{children}
+
+ +
{children}
+
); diff --git a/sales-embedding-demo/src/components/Page.module.scss b/sales-embedding-demo/src/components/Page.module.scss index 2d76fd62..da63b4f6 100644 --- 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 index 5ba3ccab..740a2f08 100644 --- 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 index 68a76dd2..23d94fc0 100644 --- 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 = () => { {/* WorkspaceProvider depends on Router so it must be nested */} - - Dashboard} /> + + diff --git a/sales-embedding-demo/src/routes/GDUIComponents.js b/sales-embedding-demo/src/routes/GDUIComponents.js new file mode 100644 index 00000000..47df3208 --- /dev/null +++ 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 ( + +
+ +
+
+ +
+
+ +
+ + ); +}; + +export default GDUIComponents; diff --git a/sales-embedding-demo/src/routes/GDUIComponents.module.scss b/sales-embedding-demo/src/routes/GDUIComponents.module.scss new file mode 100644 index 00000000..510ae26f --- /dev/null +++ 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 index 0185017f..ef992207 100644 --- 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 ( - - -
- -
+ + ); }; diff --git a/sales-embedding-demo/src/routes/Home.module.scss b/sales-embedding-demo/src/routes/Home.module.scss index c9841526..f4cab643 100644 --- 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 index 2b2dd041..8a17491f 100644 --- a/sales-embedding-demo/yarn.lock +++ b/sales-embedding-demo/yarn.lock @@ -7387,6 +7387,11 @@ highcharts@7.1.1: 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"