-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
gd-ui-boilerplate - Older version renamed to gd-ui-boilerplate-v7, la…
…test version is now simply gd-ui-boilerplate
- Loading branch information
1 parent
a551a4c
commit 4ec3e88
Showing
60 changed files
with
11,721 additions
and
11,720 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,8 +2,6 @@ | |
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| # GoodData.UI@v7 Boilerplate App | ||
|
|
||
| This app follows steps from https://sdk.gooddata.com/gooddata-ui/docs/ht_create_your_first_visualization.html: | ||
|
|
||
| * It initializes create-react-app | ||
| * It configures GoodData proxy | ||
| * It adds [@gooddata/react-components](https://www.npmjs.com/package/@gooddata/react-components) package | ||
|
|
||
| This app also shows: | ||
|
|
||
| * Use of `<AttributeFilter>` component | ||
| * Use of `<Kpi>` component | ||
|
|
||
| And finally this app demonstrates 3 approaches how to render visualizations: | ||
|
|
||
| * By referencing `<Visualization>` created in Analytical Designer | ||
| * By specifying buckets (measures, viewBy, stackBy) with `<ColumnChart>` component | ||
| * By creating custom column chart using `<Execute>` component and [Highcharts](https://www.highcharts.com/) library | ||
|
|
||
| ## Live demo | ||
|
|
||
| This app is deployed at https://gooddata-demo.s3.amazonaws.com/gd-ui-boilerplate-v7/index.html. For access, you can register at https://gooddata-examples.herokuapp.com/. | ||
|
|
||
| ## How to run locally | ||
|
|
||
| * `git clone --depth 1 https://github.com/gooddata/ui-sdk-examples.git` | ||
| * `cd ui-sdk-examples/gd-ui-boilerplate-v7/` | ||
| * `yarn install --pure-lockfile` (or `npm install`) | ||
| * `yarn start` (or `GD_URL=developer.na.gooddata.com yarn start`) | ||
|
|
||
| ## How to build for deployment | ||
|
|
||
| * `yarn build` when deploying to root folder | ||
| * `PUBLIC_URL=/gd-ui-boilerplate-v7 yarn build` when deploying to `/gd-ui-boilerplate-v7` folder | ||
|
|
||
| ## Backend/proxy info | ||
|
|
||
| This app is configured to run against https://developer.na.gooddata.com/. For access, you can register at https://gooddata-examples.herokuapp.com/. | ||
|
|
||
| ## Compatibility | ||
|
|
||
| An ES6 [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill) was added to support Internet Explorer. | ||
|
|
||
| ## Screnshots | ||
|
|
||
|  | ||
|
|
||
| --- | ||
|
|
||
| This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| { | ||
| "name": "gd-ui-boilerplate-v7", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "@gooddata/react-components": "^7.1.1", | ||
| "node-sass": "^4.9.4", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6", | ||
| "react-highcharts": "^16.0.2", | ||
| "react-scripts": "2.0.5", | ||
| "react-select": "^3.1.0" | ||
| }, | ||
| "scripts": { | ||
| "start": "cross-env HTTPS=true react-scripts start", | ||
| "build": "react-scripts build", | ||
| "test": "react-scripts test", | ||
| "eject": "react-scripts eject", | ||
| "buildgd": "cross-env PUBLIC_URL=/gd-ui-boilerplate-v7 yarn build", | ||
| "syncgd": "s3cmd --config .s3cfg sync --delete-removed ./build/ s3://gooddata-demo/gd-ui-boilerplate-v7/" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "react-app" | ||
| }, | ||
| "browserslist": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not ie <= 11", | ||
| "not op_mini all" | ||
| ], | ||
| "devDependencies": { | ||
| "cross-env": "^5.2.0" | ||
| } | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .App { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .App-logo { | ||
| animation: App-logo-spin infinite 20s linear; | ||
| height: 40vmin; | ||
| } | ||
|
|
||
| .App-header { | ||
| background-color: #282c34; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: calc(10px + 2vmin); | ||
| color: white; | ||
| } | ||
|
|
||
| .App-link { | ||
| color: #61dafb; | ||
| } | ||
|
|
||
| @keyframes App-logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { Headline, ColumnChart, Execute, Visualization, Model } from '@gooddata/react-components'; | ||
| import C from './catalog'; | ||
| import config from './config'; | ||
| import AttributeDropdown from './components/AttributeDropdown'; | ||
| import CustomBarChart from './components/CustomBarChart'; | ||
| import { loginMachinery } from './utils'; | ||
|
|
||
| import '@gooddata/react-components/styles/css/main.css'; | ||
| import './App.css'; | ||
|
|
||
| function App() { | ||
| const [isLogged, setIsLogged] = useState(false); | ||
| const [filters, setFilters] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| loginMachinery({ ...config }, () => setIsLogged(true)); | ||
| }); | ||
|
|
||
| if (!isLogged) { | ||
| return <span>Checking your credentials, please wait…</span>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="App"> | ||
| <div style={{ width: 400, margin: 'auto', marginBottom: 20, marginTop: 20 }}> | ||
| <AttributeDropdown | ||
| {...config} | ||
| placeholder="Filter cities" | ||
| attribute={C.attributeDisplayForm('Location City')} | ||
| filters={filters} | ||
| updateFilters={setFilters} | ||
| /> | ||
| </div> | ||
| <div> | ||
| # of Location City: <Headline | ||
| {...config} | ||
| filters={filters} | ||
| primaryMeasure={Model.measure(C.measure('# Location City'))} | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| </div> | ||
| <div style={{ height: 400 }}> | ||
| <Visualization | ||
| {...config} | ||
| filters={filters} | ||
| identifier="aby6oS6DbpFX" | ||
| /> | ||
| </div> | ||
| <div style={{ height: 400 }}> | ||
| <ColumnChart | ||
| {...config} | ||
| filters={filters} | ||
| measures={[Model.measure(C.measure('# Checks'))]} | ||
| viewBy={Model.attribute(C.attributeDisplayForm('Location City'))} | ||
| stackBy={Model.attribute(C.attributeDisplayForm('Location Name'))} | ||
| /> | ||
| </div> | ||
| <div style={{ height: 400 }}> | ||
| <Execute | ||
| {...config} | ||
| afm={{ | ||
| measures: [{ | ||
| localIdentifier: 'm1', | ||
| definition: { | ||
| measure: { | ||
| item: { | ||
| identifier: C.measure('# Checks') | ||
| } | ||
| } | ||
| } | ||
| }], | ||
| attributes: [{ | ||
| localIdentifier: 'a1', | ||
| displayForm: { | ||
| identifier: C.attributeDisplayForm('Location City') | ||
| } | ||
| }], | ||
| filters | ||
| }} | ||
| children={CustomBarChart} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import App from './App'; | ||
|
|
||
| it('renders without crashing', () => { | ||
| const div = document.createElement('div'); | ||
| ReactDOM.render(<App />, div); | ||
| ReactDOM.unmountComponentAtNode(div); | ||
| }); |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // Copyright (C) 2007-2018, GoodData(R) Corporation. All rights reserved. | ||
| 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>; | ||
| } | ||
|
|
||
| const config = { | ||
| chart: { | ||
| type: 'column', | ||
| }, | ||
| title: { | ||
| text: '🎉🍾🙌 My First Custom Chart 🙌🍾🎉' | ||
| }, | ||
| series: result.executionResult.data.map((row, i) => | ||
| ({ data: [parseFloat(row[0])] })) | ||
| }; | ||
|
|
||
| if (result) { | ||
| return ( | ||
| <ReactHighcharts config={config} /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default CustomBarChart; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", | ||
| "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", | ||
| sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| code { | ||
| font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", | ||
| monospace; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // Copyright (C) 2007-2018, GoodData(R) Corporation. All rights reserved. | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| import App from './App'; | ||
| import * as serviceWorker from './serviceWorker'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| ReactDOM.render( | ||
| <App />, | ||
| document.getElementById('root') | ||
| ); | ||
|
|
||
| // If you want your app to work offline and load faster, you can change | ||
| // unregister() to register() below. Note this comes with some pitfalls. | ||
| // Learn more about service workers: http://bit.ly/CRA-PWA | ||
| serviceWorker.unregister(); |
Oops, something went wrong.