Skip to content

Commit

Permalink
using vega
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrieldev755 committed Jan 25, 2021
1 parent 369bfbf commit 95f41d2
Show file tree
Hide file tree
Showing 3 changed files with 432 additions and 207 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@data-ui/sparkline": "0.0.79",
"@data-ui/xy-chart": "0.0.79",
"@date-io/date-fns": "^1.3.11",
"@material-ui/core": "^4.11.2",
"@material-ui/core": "^4.9.9",
"@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.48",
"@material-ui/pickers": "^3.2.8",
Expand All @@ -42,6 +42,7 @@
"i18next": "^19.8.3",
"i18next-http-backend": "^1.0.21",
"javascript-time-ago": "^2.0.4",
"json-stable-stringify": "^1.0.1",
"jsonexport": "^2.4.1",
"jszip": "^3.3.0",
"lamp-core": "^1.0.8",
Expand All @@ -66,7 +67,8 @@
"remark-gfm": "^1.0.0",
"url-search-params-polyfill": "^7.0.0",
"vega": "^5.17.0",
"vega-lite": "^4.17.0"
"vega-lite": "^4.17.0",
"workbox-build": "^6.0.2"
},
"scripts": {
"start": "BROWSER=none NODE_ENV=production REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts start",
Expand Down
225 changes: 176 additions & 49 deletions src/components/Prevent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import hi from "javascript-time-ago/locale/hi"
import es from "javascript-time-ago/locale/es"
import TimeAgo from "javascript-time-ago"
import { useTranslation } from "react-i18next"
import { Vega } from "react-vega"
import { Vega, VegaLite } from "react-vega"

TimeAgo.addLocale(en)
const timeAgo = new TimeAgo("en-US")
Expand Down Expand Up @@ -555,10 +555,6 @@ export const strategies = {
(parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
"lamp.cats_and_dogs": (slices, activity, scopedItem) =>
(parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
"lamp.scratch_image": (slices, activity, scopedItem) =>
((parseInt(slices.duration ?? 0) / 1000).toFixed(1) || 0) > 100
? 100
: (parseInt(slices.duration ?? 0) / 1000).toFixed(1) || 0,
__default__: (slices, activity, scopedItem) =>
slices.map((x) => parseInt(x.item) || 0).reduce((prev, curr) => (prev > curr ? prev : curr), 0),
}
Expand Down Expand Up @@ -745,6 +741,7 @@ export default function Prevent({
let activityEvents = await getActivityEvents(participant, activities, hiddenEvents)
let timeSpans = Object.fromEntries(Object.entries(activityEvents || {}).map((x) => [x[0], x[1][x[1].length - 1]]))
setActivityEvents(activityEvents)

let activityEventCount = getActivityEventCount(activityEvents)
// if (typeof goals !== "undefined") {
// groupByType = goals.reduce((goal, it) => {
Expand All @@ -754,7 +751,6 @@ export default function Prevent({
// return goal
// }, {})
// }
console.log(activityEvents)
setTimeSpans(timeSpans)
setActivityCounts(activityEventCount)
activities = activities.filter((activity) => activityEventCount[activity.name] > 0)
Expand Down Expand Up @@ -944,47 +940,105 @@ export default function Prevent({
<Box component="span">({activityCounts[activity.name]})</Box>
</Typography>
<Box className={classes.maxw300}>
<Sparkline
ariaLabel={activity.name}
margin={{ top: 5, right: 0, bottom: 5, left: 0 }}
width={300}
height={70}
startDate={earliestDate()}
data={activityEvents?.[activity.name]?.map((d) => ({
x: new Date(d.timestamp),
y: strategies[activity.spec]
? strategies[activity.spec](
activity.spec === "lamp.survey"
? d?.temporal_slices ?? d["temporal_slices"]
: activity.spec === "lamp.scratch_image"
? d
: d.static_data,
activity,
undefined
)
: 0,
}))}
valueAccessor={(datum) => datum}
>
<LinearGradient
id="gredient"
from="#ECF4FF"
to="#FFFFFF"
fromOffset="30%"
fromOpacity="1"
toOpacity="1"
toOffset="100%"
rotate={90}
/>
<LineSeries
showArea={true}
fill={`url(#gradient)`}
stroke="#3C5DDD"
strokeWidth={activityEvents?.[activity.name]?.length === 1 ? 4 : 2}
strokeLinecap="round"
/>
</Sparkline>
<VegaLite
style={{ backgroundColor: "#00000000" }}
spec={{
data: {
values: activityEvents?.[activity.name]?.map((d) => ({
x: new Date(d.timestamp),
y: strategies[activity.spec]
? strategies[activity.spec](
activity.spec === "lamp.survey"
? d?.temporal_slices ?? d["temporal_slices"]
: d.static_data,
activity,
undefined
)
: 0,
})),
},
width: 300,
height: 70,
background: "#00000000",
config: {
view: { stroke: "transparent" },
title: {
color: "rgba(0, 0, 0, 0.75)",
fontSize: 25,
font: "Inter",
fontWeight: 600,
align: "left",
anchor: "start",
},
legend: {
title: null,
orient: "bottom",
columns: 2,
labelColor: "rgba(0, 0, 0, 0.75)",
labelFont: "Inter",
labelFontSize: 14,
labelFontWeight: 600,
symbolStrokeWidth: 12,
symbolSize: 150,
symbolType: "circle",
offset: 0,
},
axisX: {
disable: true,
},
axisY: {
disable: true,
},
},
mark: { type: "line", interpolate: "cardinal", tension: 0.9 },
encoding: {
x: { field: "x", type: "ordinal", timeUnit: "utcyearmonthdate" },
y: { field: "y", type: "quantitative" },
strokeWidth: { value: 2 },
},
}}
/>
</Box>
{/* <Box className={classes.maxw300}>
<Sparkline
ariaLabel={activity.name}
margin={{ top: 5, right: 0, bottom: 5, left: 0 }}
width={300}
height={20}
startDate={earliestDate()}
data={activityEvents?.[activity.name]?.map((d) => ({
x: new Date(d.timestamp),
y: strategies[activity.spec]
? strategies[activity.spec](
activity.spec === "lamp.survey"
? d?.temporal_slices ?? d["temporal_slices"]
: d.static_data,
activity,
undefined
)
: 0,
}))}
valueAccessor={(datum) => datum}
>
<LinearGradient
id="gredient"
from="#ECF4FF"
to="#FFFFFF"
fromOffset="30%"
fromOpacity="1"
toOpacity="1"
toOffset="100%"
rotate={90}
/>
<LineSeries
showArea={true}
fill={`url(#gradient)`}
stroke="#3C5DDD"
strokeWidth={activityEvents?.[activity.name]?.length === 1 ? 4 : 2}
strokeLinecap="round"
/>
</Sparkline>
</Box> */}
<Typography variant="h6">{timeAgo.format(timeSpans[activity.name]?.timestamp)}</Typography>
</Card>
</ButtonBase>
Expand Down Expand Up @@ -1087,12 +1141,85 @@ export default function Prevent({
<Typography className={classes.preventlabel}>
{t("Step Count")} <Box component="span">({sensorCounts["Step Count"]})</Box>
</Typography>

<Box mt={3} mb={1} className={classes.maxw150}>
<Sparkline
<VegaLite
spec={{
data: {
values:
sensorEvents?.["lamp.steps"]?.map((d) => ({
x: new Date(parseInt(d.timestamp)),
y: typeof d.data.value !== "number" ? 0 : d.data.value || 0,
})) ?? [],
},
width: 126,
height: 70,
config: {
view: { stroke: "transparent" },
title: {
color: "rgba(0, 0, 0, 0.75)",
fontSize: 25,
font: "Inter",
fontWeight: 600,
align: "left",
anchor: "start",
dy: -40,
},
legend: {
title: null,
orient: "bottom",
columns: 2,
labelColor: "rgba(0, 0, 0, 0.75)",
labelFont: "Inter",
labelFontSize: 14,
labelFontWeight: 600,
rowPadding: 20,
columnPadding: 50,
symbolStrokeWidth: 12,
symbolSize: 150,
symbolType: "circle",
offset: 30,
},
axisX: {
orient: "bottom",
format: "%b %d",
labelColor: "rgba(0, 0, 0, 0.4)",
labelFont: "Inter",
labelFontWeight: 500,
labelFontSize: 10,
ticks: false,
labelPadding: 32,
title: null,
grid: false,
disable: true,
},
axisY: {
orient: "left",
tickCount: 5,
labelColor: "rgba(0, 0, 0, 0.4)",
labelFont: "Inter",
labelFontWeight: 500,
labelFontSize: 10,
ticks: false,
labelPadding: 10,
title: null,
grid: false,
disable: true,
},
},
mark: { type: "line", interpolate: "cardinal", tension: 0.9 },
encoding: {
x: { field: "x", type: "ordinal", timeUnit: "utcyearmonthdate" },
y: { field: "y", type: "quantitative" },
strokeWidth: { value: 2 },
},
}}
/>
{/* <Sparkline
ariaLabel="Step count"
margin={{ top: 5, right: 0, bottom: 4, left: 0 }}
width={126}
height={70}
height={20}
XAxisLabel="Time"
YAxisLabel="Steps Taken"
startDate={earliestDate()}
Expand Down Expand Up @@ -1120,7 +1247,7 @@ export default function Prevent({
strokeWidth={2}
strokeLinecap="butt"
/>
</Sparkline>
</Sparkline> */}
</Box>
</Card>
</ButtonBase>
Expand Down
Loading

0 comments on commit 95f41d2

Please sign in to comment.