data-for-change / anyway-newsflash-infographics Goto Github PK

WidgetType would work better as an enum with textual values.

add top bar
click on anyway logo should go to home page (with no params)

Update Text.stories.tsx so it will contain all Text options

Create a Link Atom component

Guidlines

• All links should use this Atom
• Should be using react-router Link internally
• Style: color according to attached image
• Style: hover - change color to slightly brighter. No underline should appear
• Colors should be defined in styles/_globals.ts

Improve README.md
add link to Diving in section:

• documentation

• good first issue

Report for any other missing links in README.md

At the moment SelectButton is hard coded and needs to be connected to API, MobX
Needs to be a reusable component for other types of filters

Is your feature request related to a problem? Please describe.
Each newsflash should have its own URL that could be linked to, sent, bookmarked...

Describe the solution you'd like
Our main page should have a path with a variable (/:id) that represents the newsflash.
When the page loads or the path changes, the page will launch a request to fetch the relevant newsflash's data, then display it.
This will replace the current behavior of loading the data in an onClick callback.

Additional context
This should work with the implementation for issue #71.

change the tile layer for the location and heat maps to google maps

Accidents severity widget markers should be colored according to severity.

Currently most_severe_accidents is not displayed.
This widget should show:

1. a map with locations (see LocationMap component)
2. each location should displayed as a marker with appropriate color:
   קשה - אדום
   בינוני - צהוב
   קלה - כחול

Add a widget that receives an array of data of the format:

{
    "accident_year": 2010,
    "count": 39
  }

and displays it on a bar chart.

1. At the root directory, Add file named Vision.MD
2. Write an overview about the project's vision using markdown. Include links and resources which explain the anyway and vision zero.

Keep in mind: The Goal here is to help new contributors to understand the project and it needs. It should provide a good replacement to AnyWay introduction talk in case a project leader is not around to give one.

side bar cover the footer

steps

1. local storybook
2. add a story for 1 basic component
3. add stories for all atoms

Add a widget that receives an array of data in the format:

{
  "accident_severity": "קלה",
  "count": 197
}

And shows it on a pie charts/

See notes from #92

// TODO: Move to init.service once it's merged.
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

Filter should behave as a dropdown list with the following values:

• 1 year
• 3 years
• 5 years
• 8 years

At this stage not action required on selection

Change scroll design on widget area to look more aesthetic.

We would like to support different themes in the future.
For that, we will support basic theme as following

• add theme observable to RootStore. it should be of enum type with the following values: DEFAULT, YNET
• when theme value is DEFAULT - app will have the current appearance.
• when theme value is YNET - The application bar will have red background.
• Use MaterialUI theme to set the background color
• there is no need to allow the user to change theme at the moment - it will be done programmatically.

1. Add atoms index file.

Example:

// atoms/index.ts
export {default as Button}  from './AnyWayCard';
export {default as Text}  from './Text';
export {default as AnyWayCard}  from './AnyWayCard';
export {default as AnyWayGrid}  from './AnyWayGrid';

2. Refactor all other component to use the index.

Example:

// HomePage.ts - before:
import AnyWayCard  from '../components/atoms/AnyWayCard';
import AnyWayGrid from '../components/atoms/AnyWayGrid'

// HomePage.ts - after:
import {AnyWayCard, AnyWayGrid} from '../components/atoms'

connect the news flash collection to fetch from the API established in https://anyway.co.il/api/

• Create News component - contain multiple components
• Create (nested) NewsFlash component (contain date, source and)
• Create (mock only) filter buttons (all / ynet/ walla etc.) - simple buttons in a row, no style / action required

Is your feature request related to a problem? Please describe.
Make sure that map widgets show all of the data initially.

Add a widget that receives an array of data in the format:

{
  "longitude": 34.9780568296871,
  "latitude": 32.4543458814189,
  "accident_severity": "קשה",
  "accident_timestamp": "2016-05-15 21:00:00"
}

And shows it on a map.

There's a location widget component that you can use for this, but it might need modification to work with multiple locations.

add footer
click on Hasadna logo should go to hasadna home page

Use Anyway site as a reference. no need to add facebook / twitter buttons / icons

Describe the solution you'd like
We should have a Thanks page that displays some content.
Ask @atalyaalon about it. If no content is available yet. a boilerplate is a good start.

When clicking on "תודות" in the footer, the link should navigate to this page.

• Research heatmap functionality over leaflet.
• Create basic heatmap widget.

Describe the solution you'd like
We should have an about page that displays some content.
Ask @atalyaalon about it. If no content is available yet. a boilerplate is a good start.

When clicking on "אודות" in the footer, the link should navigate to this page.

Display location with google maps and leaflet (for the moment should be hard-coded location)

• Create action that's activated when clicking on a newsflash.
• This action should call the API and get the widgets' data for the selected newsflash.

Each newsflash should have its own URL. Newsflash items on the sidebar should navigate to these URLs instead of running an onClick event.

This will work once we have a component and a path that could detect the identifier in the URL and use it.

we now use the method for Initialization , and for update after getting data from data.service

Expected behavior
Horizontal scroll should be on sidebar (no matter the text length for item)

Changing design of sidebar to include location map and scroll option for the news feed using Material UI components

connect news component to store
Here is an example:

const News: React.FC = () => {
    const store = useStore();

    return useObserver(() => (
      <div> num of news flash items: {store.newsFlashCollection.length}</div>
    )
}

for more info see:
https://github.com/mobxjs/mobx-react-lite

Solve Compilation Warning:

./src/components/templates/News.tsx
  Line 13:6:  React Hook useCallback has a missing dependency: 'store'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Task: add store to useCallback as a dependency

  const onNewsClick = useCallback((id: number) => {
    store.selectNewsFlash(id)
  }, [store]);

Currently sidebar MapLocation component display static ("hard-coded") location.
Use report location instead

Add a widget that receives an array of data of the format:

{
  "accident_year": 2010,
  "count": 39
}

and displays it on a pie chart.

in SideBar LocationMap ,
a tile don't load on first render :

  <Box flexBasis={300} flexShrink={0} p={1}>
      <LocationMap data={[{latitude: 32.0853, longitude: 34.7818}]} center={{lat: 32.0853, lng: 34.7818}}/>
      </Box>

1 - can fix it with change in css of container (copied form AnyWayCard)

  const cardStyles: object = {
    padding: '10px',
    margin: '10px',
    width: '300px',
    height: '350px',
    display: 'flex',
    justifyContent: 'space-evenly',
    flexDirection: 'column'
  }
...

    <Box style={cardStyles}>
      <LocationMap data={[{latitude: 32.0853, longitude: 34.7818}]} center={{lat: 32.0853, lng: 34.7818}}/>
      </Box>

2- need to adjust the css.

3- in case of resize - maybe need to use
mapRef.current.leafletElement.invalidateSize(false);

As part of restyling the app to fit its basic design template. Make the sidebar styling identical to the template. Remove margins between the newflashes, edit colors, borders, fonts, filter buttons, add icons to side of newsflashes title. Add title ״מיקום משוער״ before map.