Skip to content

Commit

Permalink
Merge pull request #295 from NASA-IMPACT/develop
Browse files Browse the repository at this point in the history 
Release 0.9.1
  • Loading branch information
@olafveerman
olafveerman authored Jun 24, 2020
2 parents 9f5e48b + 2e75146 commit a494f00
Show file tree
Hide file tree
Showing 6 changed files with 164 additions and 121 deletions.
4 changes: 2 additions & 2 deletions app/assets/scripts/components/common/meta-tags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Helmet } from 'react-helmet';
import theme from '../../styles/theme/theme';

import config from '../../config';
const { environment, baseUrl, appTitle } = config;
const { environment, baseUrl, appTitle, twitterHandle } = config;

const MetaTags = ({ title, description, children }) => {
return (
Expand All @@ -18,7 +18,7 @@ const MetaTags = ({ title, description, children }) => {

{/* Twitter */}
<meta name='twitter:card' content='summary' />
<meta name='twitter:site' content='@NASAEarthData' />
<meta name='twitter:site' content={twitterHandle} />
<meta name='twitter:title' content={title} />
{description ? (
<meta name='twitter:description' content={description} />
Expand Down
219 changes: 115 additions & 104 deletions app/assets/scripts/components/spotlight/single/sec-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,110 +71,119 @@ const Attribution = styled.p`
margin-bottom: ${glsp()};
`;

export default function SecPanel (props) {
const { onPanelChange, indicators, indicatorGroups, selectedDate, summary } = props;

// Ensure that we only deal with groups that have data.
const groups = (indicatorGroups || []).filter(g => (
g.indicators.some(indId => indicators.find(ind => ind.id === indId))
));

return (
<PanelSelf
collapsible
direction='right'
onPanelChange={onPanelChange}
initialState={isLargeViewport()}
headerContent={
<PanelHeadline>
<PanelTitle>Insights</PanelTitle>
</PanelHeadline>
}
bodyContent={
<BodyScroll>
{summary && (
<SummaryExpandable>{summary}</SummaryExpandable>
)}

<Accordion allowMultiple initialState={[true]}>
{({ checkExpanded, setExpanded }) => (
!!groups.length && groups.map((group, idx) => (
<AccordionFold
forwardedAs={PanelBlock}
key={group.id}
isFoldExpanded={checkExpanded(idx)}
setFoldExpanded={(v) => setExpanded(idx, v)}
renderHeader={({ isFoldExpanded, setFoldExpanded }) => (
<PanelBlockHeader>
<AccordionFoldTrigger
isExpanded={isFoldExpanded}
onClick={() => setFoldExpanded(!isFoldExpanded)}
>
<PanelBlockTitle>{group.label}</PanelBlockTitle>
</AccordionFoldTrigger>
</PanelBlockHeader>
)}
renderBody={() => (
<PanelBodyInner>
{group.prose && (
<Prose size='small'>
<p>{group.prose}</p>
</Prose>
)}
{group.indicators.map((indId) => {
const ind = indicators.find((o) => o.id === indId);
if (!ind) return null;

const xDomain = ind.domain.date.map(utcDate);
const yDomain = ind.domain.indicator;

return (
<section key={ind.id}>
<Prose size='small'>
<Heading as='h2' size='medium'>{ind.name}</Heading>
{ind.description && <p>{ind.description}</p>}
<figure>
<LineChart
xDomain={xDomain}
yDomain={yDomain}
data={ind.data}
yUnit={ind.units}
selectedDate={selectedDate}
highlightBands={
ind.highlight_bands &&
ind.highlight_bands.length
? ind.highlight_bands
: null
}
noBaseline={
ind.data[0].baseline === undefined
}
noBaselineConfidence
noIndicatorConfidence
/>
{ind.attribution && (
<figcaption>
<Attribution>
By: {ind.attribution}
</Attribution>
</figcaption>
)}
</figure>
{ind.notes && <p>{ind.notes}</p>}
</Prose>
</section>
);
})}
</PanelBodyInner>
)}
/>
))
)}
</Accordion>
</BodyScroll>
}
/>
);
class SecPanel extends React.Component {
renderChart (ind) {
const xDomain = ind.domain.date.map(utcDate);
const yDomain = ind.domain.indicator;
const { selectedDate } = this.props;

return (
<figure>
<LineChart
xDomain={xDomain}
yDomain={yDomain}
data={ind.data}
yUnit={ind.units}
selectedDate={selectedDate}
highlightBands={
ind.highlight_bands && ind.highlight_bands.length
? ind.highlight_bands
: null
}
noBaseline={ind.data[0].baseline === undefined}
noBaselineConfidence
noIndicatorConfidence
/>
{ind.attribution && (
<figcaption>
<Attribution>By: {ind.attribution}</Attribution>
</figcaption>
)}
</figure>
);
}

render () {
const {
onPanelChange,
indicators,
indicatorGroups,
summary
} = this.props;

// Ensure that we only deal with groups that have data.
const groups = (indicatorGroups || []).filter((g) =>
g.indicators.some((indId) => indicators.find((ind) => ind.id === indId))
);

return (
<PanelSelf
collapsible
direction='right'
onPanelChange={onPanelChange}
initialState={isLargeViewport()}
headerContent={
<PanelHeadline>
<PanelTitle>Insights</PanelTitle>
</PanelHeadline>
}
bodyContent={
<BodyScroll>
{summary && <SummaryExpandable>{summary}</SummaryExpandable>}

<Accordion allowMultiple initialState={[true]}>
{({ checkExpanded, setExpanded }) =>
!!groups.length &&
groups.map((group, idx) => (
<AccordionFold
forwardedAs={PanelBlock}
key={group.id}
isFoldExpanded={checkExpanded(idx)}
setFoldExpanded={(v) => setExpanded(idx, v)}
renderHeader={({ isFoldExpanded, setFoldExpanded }) => (
<PanelBlockHeader>
<AccordionFoldTrigger
isExpanded={isFoldExpanded}
onClick={() => setFoldExpanded(!isFoldExpanded)}
>
<PanelBlockTitle>{group.label}</PanelBlockTitle>
</AccordionFoldTrigger>
</PanelBlockHeader>
)}
renderBody={() => (
<PanelBodyInner>
{group.prose && (
<Prose size='small'>
<p>{group.prose}</p>
</Prose>
)}
{group.indicators.map((indId) => {
const ind = indicators.find((o) => o.id === indId);
if (!ind) return null;

return (
<section key={ind.id}>
<Prose size='small'>
<Heading as='h2' size='medium'>
{ind.name}
</Heading>
{ind.description && <p>{ind.description}</p>}
{ind.data && this.renderChart(ind)}
{ind.notes && <p>{ind.notes}</p>}
</Prose>
</section>
);
})}
</PanelBodyInner>
)}
/>
))}
</Accordion>
</BodyScroll>
}
/>
);
}
}

SecPanel.propTypes = {
Expand All @@ -184,3 +193,5 @@ SecPanel.propTypes = {
indicatorGroups: T.array,
selectedDate: T.object
};

export default SecPanel;
30 changes: 17 additions & 13 deletions app/assets/scripts/config/production.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
export default {
environment: 'production',
appTitle: 'COVID-19 Dashboard',
appDescription: 'Although NASA can&apos;t see the novel #coronavirus from space, we can see how our response to it affects the environment. Explore the data using our new experimental dashboard.',
gaTrackingCode: 'UA-170089104-1',
mbToken: 'pk.eyJ1IjoiY292aWQtbmFzYSIsImEiOiJja2F6eHBobTUwMzVzMzFueGJuczF6ZzdhIn0.8va1fkyaWgM57_gZ2rBMMg',
api: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1',
map: {
center: [0, 0],
zoom: 2,
minZoom: 1,
maxZoom: 20,
styleUrl: 'mapbox://styles/covid-nasa/ckb01h6f10bn81iqg98ne0i2y'
// module exports is required to be able to load from gulpfile.
module.exports = {
default: {
environment: 'production',
appTitle: 'COVID-19 Dashboard',
appDescription: 'Although NASA can&apos;t see the novel #coronavirus from space, we can see how our response to it affects the environment. Explore the data using our new experimental dashboard.',
gaTrackingCode: 'UA-170089104-1',
twitterHandle: '@NASAEarthData',
mbToken: 'pk.eyJ1IjoiY292aWQtbmFzYSIsImEiOiJja2F6eHBobTUwMzVzMzFueGJuczF6ZzdhIn0.8va1fkyaWgM57_gZ2rBMMg',
api: 'https://8ib71h0627.execute-api.us-east-1.amazonaws.com/v1',
map: {
center: [0, 0],
zoom: 2,
minZoom: 1,
maxZoom: 20,
styleUrl: 'mapbox://styles/covid-nasa/ckb01h6f10bn81iqg98ne0i2y'
}
}
};
16 changes: 16 additions & 0 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,22 @@
<link rel='icon' type='image/png' sizes='192x192' href='{{baseurl}}/assets/graphics/meta/android-chrome.png' />
<link rel='apple-touch-icon' sizes='180x180' href='{{baseurl}}/assets/graphics/meta/apple-touch-icon.png' />

<title>{{appTitle}}</title>
<meta name='description' content='{{appDescription}}' />

<meta name='twitter:card' content='summary' />
<meta name='twitter:site' content='{{twitterHandle}}' />
<meta name='twitter:title' content='{{appTitle}}' />
<meta name='twitter:description' content='{{appDescription}}' />
<meta name='twitter:image:src' content='{{baseurl}}/assets/graphics/meta/default-meta-image.png' />

<meta property='og:type' content='website' />
<meta property='og:url' content='{{baseurl}}' />
<meta property='og:site_name' content='{{appTitle}}' />
<meta property='og:title' content='{{appTitle}}' />
<meta property='og:image' content='{{baseurl}}/assets/graphics/meta/default-meta-image.png' />
<meta property='og:description' content='{{appDescription}}' />

<!-- build:css /assets/styles/vendor.css -->
<link rel='stylesheet' href='../node_modules/mapbox-gl/dist/mapbox-gl.css' />
<link rel='stylesheet' href='../node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css' />
Expand Down
14 changes: 13 additions & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ const through2 = require('through2');

const { compile: collecticonsCompile } = require('collecticons-processor');

const {
appTitle,
appDescription,
twitterHandle
} = require('./app/assets/scripts/config/production').default;

// /////////////////////////////////////////////////////////////////////////////
// --------------------------- Variables -------------------------------------//
// ---------------------------------------------------------------------------//
Expand Down Expand Up @@ -71,7 +77,10 @@ function serve () {
// Replace the baseUrl placeholder on runtime.
match: /{{baseurl}}/g,
replace: ''
}
},
{ match: /{{appTitle}}/g, replace: appTitle },
{ match: /{{appDescription}}/g, replace: appDescription },
{ match: /{{twitterHandle}}/g, replace: twitterHandle }
]
});

Expand Down Expand Up @@ -233,6 +242,9 @@ function html () {
// Add a prefix to all replacements so next line catches them.
.pipe($.revRewrite({ prefix: '{{baseurl}}' }))
.pipe($.replace('{{baseurl}}', baseurl))
.pipe($.replace('{{appTitle}}', appTitle))
.pipe($.replace('{{appDescription}}', appDescription))
.pipe($.replace('{{twitterHandle}}', twitterHandle))
.pipe(gulp.dest('dist'));
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "covid-dashboard",
"version": "0.9.0",
"version": "0.9.1",
"description": "Frontend application for the Covid Dashboard",
"repository": {
"type": "git",
Expand Down

0 comments on commit a494f00

Please sign in to comment.