Skip to content

Commit 963a8df

Browse files
Adding NeoDash Dashboard Gallery (#219)
* V1 of the gallery * Live population of example gallery * Work in progress on the example gallery * Finalized gallery page * Minor style fixes * Added movies dashboard * Added gallery screenshot * Added gallery screenshot * Added gallery screenshot * WIP on auto-deployed gallery * Added fraud dashboard * Added fraud dashboard * Added recommendations dashboard * Update recommendations.json Gotta learn today * Added BOM example to gallery * Added twitter dashboard * Added WIP twitter dashboard * Cleaning up gallery code * Cleanup readme * Update twitter.json * Removed old lockfile * Finalizing the example gallery * Fixed typo Co-authored-by: BennuFire <[email protected]>
1 parent f2f8387 commit 963a8df

39 files changed

+11504
-24767
lines changed

.github/workflows/develop-deployment.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,25 @@ jobs:
5656
aws-region: us-west-1
5757
- run: curl ${{ secrets.INDEX_HTML_DEPLOYMENT_URL }} > dist/index.html
5858
- run: aws s3 rm s3://neodash-test.graphapp.io/ --recursive && aws s3 sync dist s3://neodash-test.graphapp.io/ --acl public-read
59+
deploy-gallery:
60+
needs: build-test
61+
runs-on: ubuntu-latest
62+
strategy:
63+
matrix:
64+
node-version: [18.x]
65+
steps:
66+
- uses: actions/checkout@v2
67+
- name: Use Node.js ${{ matrix.node-version }}
68+
uses: actions/setup-node@v1
69+
with:
70+
node-version: ${{ matrix.node-version }}
71+
- run: cd gallery
72+
- run: yarn install
73+
- run: yarn run build
74+
- name: Set AWS credentials
75+
uses: aws-actions/configure-aws-credentials@v1
76+
with:
77+
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
78+
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
79+
aws-region: us-west-1
80+
- run: aws s3 rm s3://neodash-gallery.graphapp.io/ --recursive && aws s3 sync build s3://neodash-gallery.graphapp.io/ --acl public-read

gallery/.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
PORT=4000
2+
PUBLIC_URL=https://s3.eu-west-2.amazonaws.com/neodash-gallery.graphapp.io/

gallery/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

gallery/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# NeoDash Dashboard Gallery 🎨
2+
This is the source code for the NeoDash dashboard gallery located at [https://neodash-gallery.graphapp.io](https://neodash-gallery.graphapp.io).
3+
4+
## Run the app locally
5+
This app is built with React, Tailwind and the Neo4j Design Language.
6+
7+
- `yarn install` installs the dependencies.
8+
- `yarn start` runs the app in development mode.
9+
- `yarn build` builds the app for production.
10+
11+
## Contribute to the Gallery
12+
Want to add a dashboard to the gallery?
13+
Send us an [e-mail]([mailto:[email protected]), and we will add your dashboard to the next release!
14+
15+
To add a dashboard - we need the following information.
16+
- Your name.
17+
- A URL to your page (GitHub, LinkedIn, Personal Website, ...)
18+
- The name of your dashboard.
19+
- A one sentence description for the dashboard.
20+
- A screenshot of the main page.
21+
- A data dump of the Neo4j database populating the dashboard.
22+
- A list of 5 keywords.
23+
24+
Keep in mind that the data you provide needs to be public data, as it will be accessible by anyone.

gallery/dashboards/bom.json

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
{
2+
"title": "BOM - Lista de materiales",
3+
"version": "2.1",
4+
"settings": {
5+
"pagenumber": 0,
6+
"editable": true,
7+
"fullscreenEnabled": true,
8+
"parameters": {
9+
"neodash_supplier_name": "Manchester Manufacturing",
10+
"neodash_model_number": null,
11+
"neodash_model_name": "EveryRoad GPS Car Navigation Unit - Model 500 - UK Edition",
12+
"neodash_model_name_1": "EveryRoad GPS Car Navigation Unit - Model 300 - US Edition",
13+
"neodash_model_name_2": "EveryRoad GPS Car Navigation Unit - Model 500 - UK Edition"
14+
}
15+
},
16+
"pages": [
17+
{
18+
"title": "Provedores",
19+
"reports": [
20+
{
21+
"x": 0,
22+
"y": 0,
23+
"title": "Data Model",
24+
"query": "CALL db.schema.visualization();\n\n\n",
25+
"width": 6,
26+
"type": "graph",
27+
"height": 2,
28+
"selection": {
29+
"Model": "name",
30+
"Supplier": "name",
31+
"Component": "name"
32+
},
33+
"settings": {
34+
"nodePositions": {}
35+
}
36+
},
37+
{
38+
"x": 6,
39+
"y": 0,
40+
"title": "Provedores",
41+
"query": "MATCH (s:Supplier) RETURN s.name\n\n\n",
42+
"width": 3,
43+
"type": "table",
44+
"height": 2,
45+
"selection": {},
46+
"settings": {
47+
"nodePositions": {}
48+
}
49+
},
50+
{
51+
"x": 9,
52+
"y": 0,
53+
"title": "Elija un provedor",
54+
"query": "MATCH (n:`Supplier`) \nWHERE toLower(toString(n.`name`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`name` as value LIMIT 5",
55+
"width": 3,
56+
"type": "select",
57+
"height": 2,
58+
"selection": {},
59+
"settings": {
60+
"type": "Node Property",
61+
"entityType": "Supplier",
62+
"propertyType": "name",
63+
"parameterName": "neodash_supplier_name"
64+
}
65+
},
66+
{
67+
"x": 0,
68+
"y": 2,
69+
"title": "Modelos conectados a provedor",
70+
"query": "MATCH p=(m:Model)-[*]->(s:Supplier {name: $neodash_supplier_name}) return p\n\n\n",
71+
"width": 12,
72+
"type": "graph",
73+
"height": 2,
74+
"selection": {
75+
"Model": "name",
76+
"Component": "name",
77+
"Supplier": "name"
78+
},
79+
"settings": {
80+
"nodePositions": {}
81+
}
82+
}
83+
]
84+
},
85+
{
86+
"title": "BOM Modelos",
87+
"reports": [
88+
{
89+
"x": 0,
90+
"y": 0,
91+
"title": "Modelos",
92+
"query": "MATCH (m:Model) RETURN m.number AS ID, m.name AS name\n\n\n",
93+
"width": 6,
94+
"type": "table",
95+
"height": 2,
96+
"selection": {},
97+
"settings": {
98+
"nodePositions": {}
99+
}
100+
},
101+
{
102+
"x": 6,
103+
"y": 0,
104+
"title": "Elija un modelo de producto",
105+
"query": "MATCH (n:`Model`) \nWHERE toLower(toString(n.`name`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`name` as value LIMIT 5",
106+
"width": 6,
107+
"type": "select",
108+
"height": 2,
109+
"selection": {},
110+
"settings": {
111+
"nodePositions": {},
112+
"type": "Node Property",
113+
"entityType": "Model",
114+
"propertyType": "name",
115+
"parameterName": "neodash_model_name"
116+
}
117+
},
118+
{
119+
"x": 6,
120+
"y": 2,
121+
"title": "BOM",
122+
"query": "MATCH path = (m:Model {name: $neodash_model_name})-[:HAS*]->(:Component)\nRETURN path\n\n",
123+
"width": 6,
124+
"type": "graph",
125+
"height": 2,
126+
"selection": {
127+
"Model": "name",
128+
"Component": "number"
129+
},
130+
"settings": {
131+
"nodePositions": {},
132+
"nodeColorScheme": "neodash",
133+
"layout": "tree"
134+
}
135+
},
136+
{
137+
"x": 0,
138+
"y": 2,
139+
"title": "Precios",
140+
"query": "MATCH path = (m:Model {name: $neodash_model_name})-[:HAS*]->(c:Component)\nWITH c.name AS name, c.price AS price, reduce(acc = 1, qty IN [r IN relationships(path)| r.count] | acc * qty) AS quantity\nRETURN name, round(price, 2) AS price, quantity, round(price*quantity, 2) AS total_price\nORDER BY total_price DESC\n\n\n",
141+
"width": 6,
142+
"type": "table",
143+
"height": 2,
144+
"selection": {},
145+
"settings": {
146+
"nodePositions": {}
147+
}
148+
}
149+
]
150+
},
151+
{
152+
"title": "Comparar Modelos",
153+
"reports": [
154+
{
155+
"x": 0,
156+
"y": 0,
157+
"title": "Lista de Modelos",
158+
"query": "MATCH (m:Model) RETURN m.name AS name",
159+
"width": 3,
160+
"type": "table",
161+
"height": 2,
162+
"selection": {},
163+
"settings": {
164+
"type": "Node Property",
165+
"entityType": "Model",
166+
"propertyType": "name",
167+
"parameterName": "neodash_model_name"
168+
}
169+
},
170+
{
171+
"x": 3,
172+
"y": 0,
173+
"title": "Modelo 1",
174+
"query": "MATCH (n:`Model`) \nWHERE toLower(toString(n.`name`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`name` as value LIMIT 5",
175+
"width": 4,
176+
"type": "select",
177+
"height": 2,
178+
"selection": {},
179+
"settings": {
180+
"type": "Node Property",
181+
"entityType": "Model",
182+
"propertyType": "name",
183+
"parameterName": "neodash_model_name_1",
184+
"id": "1"
185+
}
186+
},
187+
{
188+
"x": 7,
189+
"y": 0,
190+
"title": "Modelo 2",
191+
"query": "MATCH (n:`Model`) \nWHERE toLower(toString(n.`name`)) CONTAINS toLower($input) \nRETURN DISTINCT n.`name` as value LIMIT 5",
192+
"width": 5,
193+
"type": "select",
194+
"height": 2,
195+
"selection": {},
196+
"settings": {
197+
"type": "Node Property",
198+
"entityType": "Model",
199+
"propertyType": "name",
200+
"parameterName": "neodash_model_name_2",
201+
"id": "2"
202+
}
203+
},
204+
{
205+
"x": 7,
206+
"y": 2,
207+
"title": "Components en ambos",
208+
"query": "MATCH (m:Model {name: $neodash_model_name_1})-[:HAS*]->(c:Component)\nWITH collect(c) as in_first\nMATCH (m2:Model {name: $neodash_model_name_2})-[:HAS*]->(c2:Component) WHERE c2 IN in_first\nRETURN c2.name AS component, c2.number AS ref\n\n\n",
209+
"width": 5,
210+
"type": "table",
211+
"height": 2,
212+
"selection": {},
213+
"settings": {
214+
"nodePositions": {}
215+
}
216+
},
217+
{
218+
"x": 0,
219+
"y": 2,
220+
"title": "Components en primero solo",
221+
"query": "MATCH (m:Model {name: $neodash_model_name_2})-[:HAS*]->(c:Component)\nWITH collect(c) as in_first\nMATCH (m2:Model {name: $neodash_model_name_1})-[:HAS*]->(c2:Component) WHERE NOT c2 IN in_first\nRETURN c2.name AS component, c2.number AS ref\n\n\n",
222+
"width": 4,
223+
"type": "table",
224+
"height": 2,
225+
"selection": {},
226+
"settings": {
227+
"nodePositions": {}
228+
}
229+
},
230+
{
231+
"x": 4,
232+
"y": 2,
233+
"title": "Similaridad",
234+
"query": "MATCH (m:Model {name: $neodash_model_name_1})-[:HAS*]->(c:Component)\nWITH collect(c) as in_first\nMATCH (m2:Model {name: $neodash_model_name_2})-[:HAS*]->(c2:Component) WHERE c2 IN in_first\nWITH in_first, count(c2) AS inter\nMATCH (m3:Model {name: $neodash_model_name_2})-[:HAS*]->(c3:Component)\nWITH size(in_first) - inter AS in_first, inter, size(collect(c3)) - inter as in_second\nWITH apoc.coll.zip([\"first only\", \"both\", \"second only\"], [in_first, inter, in_second]) AS l\nUNWIND l AS row\nRETURN row[0] AS name, row[1] AS cardinality\n\n\n",
235+
"width": 3,
236+
"type": "pie",
237+
"height": 2,
238+
"selection": {
239+
"index": "name",
240+
"value": "cardinality",
241+
"key": "(none)"
242+
},
243+
"settings": {
244+
"nodePositions": {}
245+
}
246+
}
247+
]
248+
}
249+
]
250+
}

gallery/dashboards/bom.png

504 KB
Loading

0 commit comments

Comments
 (0)