feat: initial indicator dashboards [WAC-85] #1
Conversation
ChasNelson1990
changed the title
There was a problem hiding this comment.
Are we missing the BarChart as per the ToR?
I am not sure that colours should be being passed in via the HTML data props? I think that we should be using the WHO colour palette and defining it in the CSS or JS and the charts should cycle through those colours.
Finally, you'll see I've added eslint and prettier; I have done a prettier format for you but if you run npm run lint you'll see some errors that need fixing.
| @@ -0,0 +1 @@ | |||
| v20.14.0 | |||
There was a problem hiding this comment.
Why v20.14.0, my NVM is telling me that LTS Iron should be v20.15.0? Has that just been released since you did this work?
| @@ -0,0 +1,33 @@ | |||
| <img width="1027" alt="image" src="https://github.com/Manoj-nathwani/WHO-African-Regional-Health-Data-Hub-React-Components/assets/2634482/98cb7219-a767-4705-ab2d-2e7f0a38e220"> | |||
There was a problem hiding this comment.
This is pointing to the old repo and needs to be updated.
|
|
||
| This repository contains small, independent React components designed to be integrated into CKAN resource templates. These components can be individually built and added to Jinja2 templates for CKAN resources. | ||
|
|
||
| The project uses [parcel](https://parceljs.org) to build components into their respective directories. This approach allows for the creation of small, independent components that can be reused and repurposed while maintaining a consistent development workflow. |
There was a problem hiding this comment.
A list of component names and how to import them into other projects probably belongs here.
There was a problem hiding this comment.
This top-level README is great, thanks @Manoj-nathwani. But I think we should also have component-level READMEs in the ckan and map folders detailing the components and their props.
| "src/map/index.html", | ||
| "src/ckan/index.html" | ||
| ], | ||
| "browserslist": "> 0.5%, last 2 versions, not dead", |
src/ckan/ConfigContext.ts
Outdated
| } | ||
| ); | ||
|
|
||
| export default ConfigContext |
There was a problem hiding this comment.
Just a style preference here but can we use named exports, i.e. add export to the start of line 4 and remove the default. Same elsewhere
|
|
||
| const [selectedCountry, setSelectedCountry] = useState<selectedCountryType>(); | ||
| const [selectedYear, setSelectedYear] = useState<selectedYearType>(); | ||
| const [selectedSex, setSelectedSex] = useState<selectedSexType>(config.SEXES[0].id); |
There was a problem hiding this comment.
Is this always sex? Perhaps it should be called "facet" or similar?
src/ckan/index.html
Outdated
| </head> | ||
| <body> | ||
|
|
||
| <!-- <div |
There was a problem hiding this comment.
Why a big block of commented out HTML?
|
|
||
| export default function Map({ country, setCountry }) { | ||
|
|
||
| const colorScale = scaleQuantize() |
| setCountry(geo) | ||
| } | ||
| }} | ||
| // fill={colorScale(cur ? cur.unemployment_rate : "#EEE")} |
Discussed this with @jonathansberry and we are happy with the table-based solution to this produce this. However, we need to bound it in a sensible vertical scroll-box. |
also: remove tension on line chart
Description
@Manoj-nathwani's work creating three dashboard components for indicators:
Dependency Changes
Testing
No tests have been made.
Documentation
Internationalisation and Localisation
None done so far.
Checklist