Skip to content

Commit

Permalink
D3 Dashboard guide (#351)
Browse files Browse the repository at this point in the history
  • Loading branch information
keydunov authored Jan 16, 2020
1 parent 1afadb8 commit 0a38e25
Show file tree
Hide file tree
Showing 38 changed files with 16,392 additions and 2 deletions.
74 changes: 74 additions & 0 deletions guides/d3-dashboard/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
### Node ###
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity


# Build Files
public/
.cache/

# Gatsby context
.gatsby-context.js

# Bundle stats
bundle-stats.json

#Videos
static/videos

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
9 changes: 9 additions & 0 deletions guides/d3-dashboard/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<p align="center"><a href="https://cube.dev"><img src="https://i.imgur.com/zYHXm4o.png" alt="Cube.js" width="300px"></a></p>

[Website](https://cube.dev)[Docs](https://cube.dev/docs)[Blog](https://cube.dev/blog)[Slack](https://slack.cube.dev)[Twitter](https://twitter.com/thecubejs)

# D3 Dashboard Guide
You will learn how to build a D3 dashboard with React, Material UI and Cube.js. The guide covers setting up dashboard with Postgres, Cube.js, React and D3.js.
You can also check out a [live demo here](https://d3-dashboard-demo.cube.dev/).

[The guide is available here.](https://d3-dashboard.cube.dev/)
17 changes: 17 additions & 0 deletions guides/d3-dashboard/amplify/.config/project-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"projectName": "d3-dashboard",
"version": "2.0",
"frontend": "javascript",
"javascript": {
"framework": "react",
"config": {
"SourceDir": "src",
"DistributionDir": "public",
"BuildCommand": "npm run-script build",
"StartCommand": "npm run-script start"
}
},
"providers": [
"awscloudformation"
]
}
8 changes: 8 additions & 0 deletions guides/d3-dashboard/amplify/backend/backend-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"hosting": {
"S3AndCloudFront": {
"service": "S3AndCloudFront",
"providerPlugin": "awscloudformation"
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"bucketName": "d3-dashboard-20200115142209-hostingbucket"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
{
"AWSTemplateFormatVersion": "2010-09-09",
"Description": "Hosting resource stack creation using Amplify CLI",
"Parameters": {
"env": {
"Type": "String"
},
"bucketName": {
"Type": "String"
}
},
"Conditions": {
"ShouldNotCreateEnvResources": {
"Fn::Equals": [
{
"Ref": "env"
},
"NONE"
]
}
},
"Resources": {
"S3Bucket": {
"Type": "AWS::S3::Bucket",
"DeletionPolicy": "Retain",
"Properties": {
"BucketName": {
"Fn::If": [
"ShouldNotCreateEnvResources",
{
"Ref": "bucketName"
},
{
"Fn::Join": [
"",
[
{
"Ref": "bucketName"
},
"-",
{
"Ref": "env"
}
]
]
}
]
},
"WebsiteConfiguration": {
"IndexDocument": "index.html",
"ErrorDocument": "index.html"
},
"CorsConfiguration": {
"CorsRules": [
{
"AllowedHeaders": [
"Authorization",
"Content-Length"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"MaxAge": 3000
}
]
}
}
},
"PrivateBucketPolicy": {
"Type": "AWS::S3::BucketPolicy",
"DependsOn": "OriginAccessIdentity",
"Properties": {
"PolicyDocument": {
"Id": "MyPolicy",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "APIReadForGetBucketObjects",
"Effect": "Allow",
"Principal": {
"CanonicalUser": {
"Fn::GetAtt": [
"OriginAccessIdentity",
"S3CanonicalUserId"
]
}
},
"Action": "s3:GetObject",
"Resource": {
"Fn::Join": [
"",
[
"arn:aws:s3:::",
{
"Ref": "S3Bucket"
},
"/*"
]
]
}
}
]
},
"Bucket": {
"Ref": "S3Bucket"
}
}
},
"OriginAccessIdentity": {
"Type": "AWS::CloudFront::CloudFrontOriginAccessIdentity",
"Properties": {
"CloudFrontOriginAccessIdentityConfig": {
"Comment": "CloudFrontOriginAccessIdentityConfig"
}
}
},
"CloudFrontDistribution": {
"Type": "AWS::CloudFront::Distribution",
"DependsOn": [
"S3Bucket",
"OriginAccessIdentity"
],
"Properties": {
"DistributionConfig": {
"Origins": [
{
"DomainName": {
"Fn::GetAtt": [
"S3Bucket",
"DomainName"
]
},
"Id": "hostingS3Bucket",
"S3OriginConfig": {
"OriginAccessIdentity": {
"Fn::Join": [
"",
[
"origin-access-identity/cloudfront/",
{
"Ref": "OriginAccessIdentity"
}
]
]
}
}
}
],
"Enabled": "true",
"DefaultCacheBehavior": {
"AllowedMethods": [
"DELETE",
"GET",
"HEAD",
"OPTIONS",
"PATCH",
"POST",
"PUT"
],
"TargetOriginId": "hostingS3Bucket",
"ForwardedValues": {
"QueryString": "false"
},
"ViewerProtocolPolicy": "redirect-to-https",
"DefaultTTL": 86400,
"MaxTTL": 31536000,
"MinTTL": 60,
"Compress": true
},
"DefaultRootObject": "index.html",
"CustomErrorResponses": [
{
"ErrorCachingMinTTL": 300,
"ErrorCode": 400,
"ResponseCode": 200,
"ResponsePagePath": "/"
},
{
"ErrorCachingMinTTL": 300,
"ErrorCode": 403,
"ResponseCode": 200,
"ResponsePagePath": "/"
},
{
"ErrorCachingMinTTL": 300,
"ErrorCode": 404,
"ResponseCode": 200,
"ResponsePagePath": "/"
}
]
}
}
}
},
"Outputs": {
"Region": {
"Value": {
"Ref": "AWS::Region"
}
},
"HostingBucketName": {
"Description": "Hosting bucket name",
"Value": {
"Ref": "S3Bucket"
}
},
"WebsiteURL": {
"Value": {
"Fn::GetAtt": [
"S3Bucket",
"WebsiteURL"
]
},
"Description": "URL for website hosted on S3"
},
"S3BucketSecureURL": {
"Value": {
"Fn::Join": [
"",
[
"https://",
{
"Fn::GetAtt": [
"S3Bucket",
"DomainName"
]
}
]
]
},
"Description": "Name of S3 bucket to hold website content"
},
"CloudFrontDistributionID": {
"Value": {
"Ref": "CloudFrontDistribution"
}
},
"CloudFrontDomainName": {
"Value": {
"Fn::GetAtt": [
"CloudFrontDistribution",
"DomainName"
]
}
},
"CloudFrontSecureURL": {
"Value": {
"Fn::Join": [
"",
[
"https://",
{
"Fn::GetAtt": [
"CloudFrontDistribution",
"DomainName"
]
}
]
]
}
},
"CloudFrontOriginAccessIdentity": {
"Value": {
"Ref": "OriginAccessIdentity"
}
}
}
}
Loading

0 comments on commit 0a38e25

Please sign in to comment.