create-iot-react-app
Advanced tools
Comparing version
@@ -72,3 +72,3 @@ #!/usr/bin/env node | ||
exec( | ||
`cd ${appName} && yarn --cwd ${appDirectory} add node-sass @reach/router react-intl d3@5.14.2 carbon-addons-iot-react classnames`, | ||
`cd ${appName} && yarn --cwd ${appDirectory} add node-sass@^5.0.0 @reach/router react-intl d3@5.14.2 carbon-addons-iot-react classnames`, | ||
(error, stdout, stderr) => { | ||
@@ -75,0 +75,0 @@ if (error) { |
{ | ||
"name": "create-iot-react-app", | ||
"version": "1.3.0", | ||
"version": "1.4.0", | ||
"description": "thin wrapper around create-react-app that add extra functionality needed on most iot projects", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -11,3 +11,4 @@ module.exports = ` | ||
Button, | ||
PageTitleBar | ||
PageTitleBar, | ||
BarChartCard, | ||
} from "carbon-addons-iot-react"; | ||
@@ -21,2 +22,217 @@ | ||
const barChartData = { | ||
quarters: [ | ||
{ | ||
quarter: "2020-Q1", | ||
city: "Amsterdam", | ||
particles: 447, | ||
temperature: 44, | ||
emissions: 120, | ||
}, | ||
{ | ||
quarter: "2020-Q2", | ||
city: "Amsterdam", | ||
particles: 450, | ||
temperature: 45, | ||
emissions: 240, | ||
}, | ||
{ | ||
quarter: "2020-Q3", | ||
city: "Amsterdam", | ||
particles: 512, | ||
temperature: 12, | ||
emissions: 300, | ||
}, | ||
{ | ||
quarter: "2020-Q4", | ||
city: "Amsterdam", | ||
particles: 565, | ||
temperature: 85, | ||
emissions: 200, | ||
}, | ||
{ | ||
quarter: "2020-Q1", | ||
city: "New York", | ||
particles: 528, | ||
temperature: 11, | ||
emissions: 130, | ||
}, | ||
{ | ||
quarter: "2020-Q2", | ||
city: "New York", | ||
particles: 365, | ||
temperature: 90, | ||
emissions: 160, | ||
}, | ||
{ | ||
quarter: "2020-Q3", | ||
city: "New York", | ||
particles: 442, | ||
temperature: 85, | ||
emissions: 240, | ||
}, | ||
{ | ||
quarter: "2020-Q4", | ||
city: "New York", | ||
particles: 453, | ||
temperature: 91, | ||
emissions: 220, | ||
}, | ||
{ | ||
quarter: "2020-Q1", | ||
city: "Bangkok", | ||
particles: 435, | ||
temperature: 32, | ||
emissions: 30, | ||
}, | ||
{ | ||
quarter: "2020-Q2", | ||
city: "Bangkok", | ||
particles: 410, | ||
temperature: 96, | ||
emissions: 210, | ||
}, | ||
{ | ||
quarter: "2020-Q3", | ||
city: "Bangkok", | ||
particles: 397, | ||
temperature: 10, | ||
emissions: 190, | ||
}, | ||
{ | ||
quarter: "2020-Q4", | ||
city: "Bangkok", | ||
particles: 412, | ||
temperature: 101, | ||
emissions: 300, | ||
}, | ||
{ | ||
quarter: "2020-Q1", | ||
city: "San Francisco", | ||
particles: 388, | ||
temperature: 120, | ||
emissions: 312, | ||
}, | ||
{ | ||
quarter: "2020-Q2", | ||
city: "San Francisco", | ||
particles: 341, | ||
temperature: 10, | ||
emissions: 210, | ||
}, | ||
{ | ||
quarter: "2020-Q3", | ||
city: "San Francisco", | ||
particles: 270, | ||
temperature: 50, | ||
emissions: 150, | ||
}, | ||
{ | ||
quarter: "2020-Q4", | ||
city: "San Francisco", | ||
particles: 489, | ||
temperature: 60, | ||
emissions: 200, | ||
}, | ||
], | ||
timestamps: [ | ||
{ | ||
timestamp: 1581265425000, | ||
city: "Amsterdam", | ||
particles: 447, | ||
emissions: 120, | ||
}, | ||
{ | ||
timestamp: 1581351825000, | ||
city: "Amsterdam", | ||
particles: 450, | ||
emissions: 150, | ||
}, | ||
{ | ||
timestamp: 1581438225000, | ||
city: "Amsterdam", | ||
particles: 512, | ||
emissions: 170, | ||
}, | ||
{ | ||
timestamp: 1581524625000, | ||
city: "Amsterdam", | ||
particles: 565, | ||
emissions: 200, | ||
}, | ||
{ | ||
timestamp: 1581265425000, | ||
city: "New York", | ||
particles: 528, | ||
emissions: 40, | ||
}, | ||
{ | ||
timestamp: 1581351825000, | ||
city: "New York", | ||
particles: 365, | ||
emissions: 10, | ||
}, | ||
{ | ||
timestamp: 1581438225000, | ||
city: "New York", | ||
particles: 442, | ||
emissions: 320, | ||
}, | ||
{ | ||
timestamp: 1581524625000, | ||
city: "New York", | ||
particles: 453, | ||
emissions: 210, | ||
}, | ||
{ | ||
timestamp: 1581265425000, | ||
city: "Bangkok", | ||
particles: 435, | ||
emissions: 160, | ||
}, | ||
{ | ||
timestamp: 1581351825000, | ||
city: "Bangkok", | ||
particles: 410, | ||
emissions: 70, | ||
}, | ||
{ | ||
timestamp: 1581438225000, | ||
city: "Bangkok", | ||
particles: 397, | ||
emissions: 130, | ||
}, | ||
{ | ||
timestamp: 1581524625000, | ||
city: "Bangkok", | ||
particles: 412, | ||
emissions: 120, | ||
}, | ||
{ | ||
timestamp: 1581265425000, | ||
city: "San Francisco", | ||
particles: 388, | ||
emissions: 120, | ||
}, | ||
{ | ||
timestamp: 1581351825000, | ||
city: "San Francisco", | ||
particles: 341, | ||
emissions: 200, | ||
}, | ||
{ | ||
timestamp: 1581438225000, | ||
city: "San Francisco", | ||
particles: 270, | ||
emissions: 180, | ||
}, | ||
{ | ||
timestamp: 1581524625000, | ||
city: "San Francisco", | ||
particles: 489, | ||
emissions: 130, | ||
}, | ||
], | ||
}; | ||
const links = [ | ||
@@ -122,2 +338,28 @@ { | ||
</Button> | ||
<BarChartCard | ||
title="Particles by city" | ||
id="simple-sample" | ||
isLoading={false} | ||
isEditable={true} | ||
isExpanded={false} | ||
content={{ | ||
xLabel: "Cities", | ||
yLabel: "Particles", | ||
series: [ | ||
{ | ||
dataSourceId: "particles", | ||
color: ["blue", "red", "green", "yellow"], | ||
}, | ||
], | ||
timeDataSourceId: "timestamp", | ||
layout: "VERTICAL", | ||
unit: "P", | ||
type: "SIMPLE", | ||
}} | ||
values={barChartData.quarters.filter( | ||
(q) => q.quarter === "2020-Q1" | ||
)} | ||
size="MEDIUMWIDE" | ||
availableActions={{ expand: true }} | ||
/> | ||
</div> | ||
@@ -124,0 +366,0 @@ </section> |
15551
45.69%533
82.53%