Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: start screen icons #558

Merged
merged 13 commits into from
Jan 27, 2020
Merged

fix: start screen icons #558

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
38561c2
fix: fetching vis type for the most used vis's WIP
martinkrulltott Jan 23, 2020
2abb5c0
fix: added and styled the icon element
martinkrulltott Jan 23, 2020
2bed84c
fix: upgraded to Analytics v2.8.4 + fn name change
martinkrulltott Jan 23, 2020
c042b79
fix: changed svg ids to prevent collision with other svgs
martinkrulltott Jan 23, 2020
561b85b
fix: improved the icon vertical centering
martinkrulltott Jan 23, 2020
1c945e8
fix: added check for empty data
martinkrulltott Jan 24, 2020
2d4c131
fix: prevent start screen from flashing by when opening an AO
martinkrulltott Jan 24, 2020
151b1b8
refactor: reverted query change that should be unaffected by this branch
martinkrulltott Jan 27, 2020
6f537a7
refactor: removed a deprecated test
martinkrulltott Jan 27, 2020
31125f1
fix: extracted the query from visualizations
martinkrulltott Jan 27, 2020
5106373
refactor: changed query params to reduce logic exposure
martinkrulltott Jan 27, 2020
0e7dd4a
fix: upgraded to Analytics v2.8.5
martinkrulltott Jan 27, 2020
37e11c8
chore: merge with epic
martinkrulltott Jan 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"redux-mock-store": "^1.5.3"
},
"dependencies": {
"@dhis2/analytics": "2.8.3",
"@dhis2/analytics": "^2.8.4",
"@dhis2/d2-ui-core": "^6.5.0",
"@dhis2/d2-ui-file-menu": "^6.5.0",
"@dhis2/d2-ui-interpretations": "^6.5.0",
Expand Down
13 changes: 13 additions & 0 deletions packages/app/src/api/visualization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,23 @@ const visualizationQuery = {
},
}

const visualizationsQuery = {
visualization: {
resource: 'visualizations',
params: ({ params }) => params,
martinkrulltott marked this conversation as resolved.
Show resolved Hide resolved
},
}

export const apiFetchVisualization = (dataEngine, id) => {
return dataEngine.query(visualizationQuery, { variables: { id } })
}

export const apiFetchVisualizations = (dataEngine, filter, fields) => {
return dataEngine.query(visualizationsQuery, {
variables: { params: { filter, fields } },
})
}

martinkrulltott marked this conversation as resolved.
Show resolved Hide resolved
export const apiSaveVisualization = (dataEngine, visualization) => {
const mutation = {
type: 'create',
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/assets/AreaIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ const AreaIcon = ({
<SvgIcon viewBox="0,0,48,48" style={style}>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<mask id="mask-2" fill="white">
<mask id="mask-area-icon" fill="white">
<rect x="0" y="0" width="48" height="48" />
</mask>
<g />
<polygon
stroke="#1976D2"
strokeWidth="2"
fill="#63A4FF"
mask="url(#mask-2)"
mask="url(#mask-area-icon)"
points="4 28 16 16 26.7935166 26.7935166 33.0558406 20.5311926 53 36 53 51 0 51 0 28"
/>
<rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
Expand Down
12 changes: 6 additions & 6 deletions packages/app/src/assets/GlobeIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ const GlobeIcon = ({
>
<g id="Icon/48x48/chart_GIS">
<g id="icon_chart_GIS">
<mask id="mask-2" fill="white">
<mask id="mask-globe-icon" fill="white">
<use xlinkHref="#path-1" />
</mask>
<g id="Bounds" />
<circle
id="Oval-4"
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-globe-icon)"
cx="24"
cy="24"
r="23"
Expand All @@ -37,28 +37,28 @@ const GlobeIcon = ({
id="Path-6"
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-globe-icon)"
points="1 21 4 24 8 26 9 24 6 19 11 18 18 12 14 9 16 6 15 3"
/>
<polyline
id="Path-7"
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-globe-icon)"
points="47 25 45 21 43 19 40 18 37 18 34 17 32 18 30 23 33 27 37 27 38 30 38 38 38.5 42"
/>
<polyline
id="Path-5"
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-globe-icon)"
points="38 6 37 7 34 6 32 8 34 10 33 12 33 15 37 14 39 15 43 12"
/>
<polyline
id="Path-8"
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-globe-icon)"
points="18 46 16 41 15 36 13 34 10 31 11 28 14 26 18 27 20 29 23 30 25 32 25 36 23 40 21 47"
/>
</g>
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/assets/LineIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ const LineIcon = ({
<SvgIcon viewBox="0,0,48,48" style={style}>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<mask id="mask-2" fill="white">
<mask id="mask-line-icon" fill="white">
<rect x="0" y="0" width="48" height="48" />
</mask>
<polygon
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-line-icon)"
points="4 28 16 16 26.7935166 26.7935166 33.0558406 20.5311926 53 36 53 51 0 51 0 28"
/>
<rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/assets/YearOverYearLineIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,25 @@ const YearOverYearLineIcon = ({
<SvgIcon viewBox="0,0,48,48" style={style}>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<mask id="mask-2" fill="white">
<mask id="mask-yoyl-icon" fill="white">
<rect x="0" y="0" width="48" height="48" />
</mask>
<polygon
stroke="#1976D2"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-yoyl-icon)"
points="1 28 10 35 18 16 34 35 50 36 50 51 -3 51 -3 28"
/>
<polygon
stroke="#004BA0"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-yoyl-icon)"
points="1 20 8 20 19 29 36 17 50 28 50 51 -3 51 -3 20"
/>
<polygon
stroke="#63A4FF"
strokeWidth="2"
mask="url(#mask-2)"
mask="url(#mask-yoyl-icon)"
points="1 35 19 39 28 31 38 28 50 43 50 66 -3 66 -3 35"
/>
<rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
Expand Down
7 changes: 5 additions & 2 deletions packages/app/src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export class App extends Component {

state = {
previousLocation: null,
initialLoadIsComplete: false,
}

/**
Expand Down Expand Up @@ -99,7 +100,7 @@ export class App extends Component {
fromActions.clearVisualization(store.dispatch, store.getState)
fromActions.fromUi.acClearUiInterpretation(store.dispatch)
}

this.setState({ initialLoadIsComplete: true })
this.setState({ previousLocation: location.pathname })
}

Expand Down Expand Up @@ -179,7 +180,9 @@ export class App extends Component {
<TitleBar />
</div>
<div className="main-center-canvas flex-grow-1">
<Visualization />
{this.state.initialLoadIsComplete && (
<Visualization />
)}
</div>
</div>
{this.props.ui.rightSidebarOpen && this.props.current && (
Expand Down
66 changes: 49 additions & 17 deletions packages/app/src/components/Visualization/StartScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,39 @@ import { withStyles } from '@material-ui/core/styles'
import { useDataEngine } from '@dhis2/app-runtime'
import { VisualizationError } from '../../modules/error'
import { GenericError } from '../../assets/ErrorIcons'
import { apiFetchVisualizations } from '../../api/visualization'
import { visTypeIcons } from '@dhis2/analytics'

const StartScreen = ({ error, classes }) => {
const [mostViewedVisualizations, setMostViewedVisualizations] = useState([])

const engine = useDataEngine()

useEffect(() => {
async function fetchData(engine) {
const result = await apiFetchMostViewedVisualizations(engine, 6)
setMostViewedVisualizations(result.visualization)
async function populateMostViewedVisualizations(engine) {
const mostViewedVisualizationsResult = await apiFetchMostViewedVisualizations(
engine,
6
)
const visualizations = mostViewedVisualizationsResult.visualization
if (visualizations && visualizations.length) {
const visualizationsResult = await apiFetchVisualizations(
engine,
`id:in:[${visualizations.map(vis => vis.id)}]`,
martinkrulltott marked this conversation as resolved.
Show resolved Hide resolved
'id,type'
martinkrulltott marked this conversation as resolved.
Show resolved Hide resolved
)
const visualizationsWithType =
visualizationsResult.visualization.visualizations
const result = visualizations.map(vis => ({
...visualizationsWithType.find(
visWithType => visWithType.id === vis.id && visWithType
),
...vis,
}))

setMostViewedVisualizations(result)
}
}
fetchData(engine)
populateMostViewedVisualizations(engine)
}, [])

const getContent = () =>
Expand All @@ -44,18 +65,29 @@ const StartScreen = ({ error, classes }) => {
</li>
</ul>
</div>
<div style={styles.section}>
<h3 style={styles.title}>Most viewed charts and tables</h3>
{mostViewedVisualizations.map((visualization, index) => (
<p
key={index}
className={classes.visualization}
onClick={() => history.push(`/${visualization.id}`)}
>
{visualization.name}
</p>
))}
</div>
{mostViewedVisualizations.length > 0 && (
<div style={styles.section}>
<h3 style={styles.title}>
Most viewed charts and tables
</h3>
{mostViewedVisualizations.map(
(visualization, index) => (
<p
key={index}
className={classes.visualization}
onClick={() =>
history.push(`/${visualization.id}`)
}
>
<span className={classes.visIcon}>
{visTypeIcons[visualization.type]}
</span>
<span>{visualization.name}</span>
</p>
)
)}
</div>
)}
</div>
)

Expand Down
9 changes: 9 additions & 0 deletions packages/app/src/components/Visualization/styles/StartScreen.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ export default {
marginBottom: '12px',
},
visualization: {
display: 'flex',
alignItems: 'center',
margin: '0 0 12px 0',
padding: 0,
letterSpacing: '0.1px',
Expand All @@ -80,4 +82,11 @@ export default {
textDecoration: 'underline',
},
},
visIcon: {
height: '16px',
'& svg': {
height: '16px',
marginRight: '8px',
},
},
}
5 changes: 0 additions & 5 deletions packages/app/src/components/__tests__/App.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react'
import { shallow } from 'enzyme'
import { App } from '../App'
import Snackbar from '../Snackbar/Snackbar'
import Visualization from '../Visualization/Visualization'
import * as actions from '../../actions/'
import history from '../../modules/history'

Expand Down Expand Up @@ -73,10 +72,6 @@ describe('App', () => {
expect(app().find('div').length).toBeGreaterThan(0)
})

it('renders Visualization component', () => {
expect(app().find(Visualization).length).toBeGreaterThan(0)
})

it('renders a Snackbar', () => {
const snackbar = app().find(Snackbar)
expect(snackbar.length).toBeGreaterThan(0)
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"module": "./build/es/lib.js",
"license": "BSD-3-Clause",
"dependencies": {
"@dhis2/analytics": "2.8.3",
"@dhis2/analytics": "^2.8.4",
"@material-ui/core": "^3.1.2",
"d2-analysis": "33.2.11",
"lodash-es": "^4.17.11",
Expand Down
16 changes: 8 additions & 8 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1243,10 +1243,10 @@
debug "^3.1.0"
lodash.once "^4.1.1"

"@dhis2/analytics@2.8.3":
version "2.8.3"
resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.3.tgz#062118d257c29d5e28cf4bf035842f112b9eef41"
integrity sha512-bF38HNa6vL9JcJApSPE1KvLAb8M3p1nh/ymtcD6ULIhnTTqKy9eOaiz8hulH2NYRG+aJkXFNtp46OhmQGTZ7Ng==
"@dhis2/analytics@^2.1.0":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.1.tgz#228af6524f35c864689e28678752f1c8f42072e8"
integrity sha512-uIiQA8kIxUdRZEC+y0cwUDQUxBqgq1yVMRdEuevkm1zTuFJxKaNrJ6nZT9WyrVtnxpzYQneK5LsXsjMMo4vl8g==
dependencies:
"@dhis2/d2-i18n" "^1.0.4"
"@dhis2/d2-ui-org-unit-dialog" "^6.3.2"
Expand All @@ -1262,10 +1262,10 @@
react-beautiful-dnd "^10.1.1"
styled-jsx "^3.2.1"

"@dhis2/analytics@^2.1.0":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.1.tgz#228af6524f35c864689e28678752f1c8f42072e8"
integrity sha512-uIiQA8kIxUdRZEC+y0cwUDQUxBqgq1yVMRdEuevkm1zTuFJxKaNrJ6nZT9WyrVtnxpzYQneK5LsXsjMMo4vl8g==
"@dhis2/analytics@^2.8.4":
version "2.8.4"
resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.4.tgz#4217d89aeefadb5dc939b868b812ba9100c521ca"
integrity sha512-k0/UUvw+8MshZf93GhWwRdz8eZ9JM8uhLqCsMoXxRUkXKYU5JlwCvRIXFANlkeUVXU/Mahz1UasDAB/iqdNprQ==
dependencies:
"@dhis2/d2-i18n" "^1.0.4"
"@dhis2/d2-ui-org-unit-dialog" "^6.3.2"
Expand Down