[Feat] Widget motorcycle_accidents_vs_all_accidents

[atalyaalon]

Create new widget - exists in API as motorcycle_accidents_vs_all_accidents

Use both title and labels of location and vehicle from the API

title is under data["text"]["title"]

vehicle label (appears on graph) is under data[i]["vehicle"] bar label is under data[i]["location"]

Additional context Visualization: Final design

UPDATE:

• This widget ALWAYS contain (only) 2 bars
• Legend should be on top, like here

Updated

Original

[atalyaalon]

This widget is added to mock data API - in the coming future it will be added to API Widget name: motorcycle_accidents_vs_all_accidents Mock API: www.anyway.co.il/api/infographics-data?mock=true

[grandcohen]

@atalyaalon @yuvalbl here's the final design: https://drive.google.com/file/d/1A1aG3MAVm7-OKFAVeoggh3A8aBagFy99/view?usp=sharing

[ziv17]

Hi @chenmu10 I want to coordinate with you the format of the date for this widget. Is the below OK? Thanks, Ziv

{
  "name": "motorcycle_accidents_vs_all_accidents",
  "data": {
    "items": [
      {
        "label_key": "כביש 6",
        "series": [
          {"label_key": "motorcycle",, "value": 0.18877551020408162},
          {"label_key": "other", "value": 0.8112244897959183}
        ]
      },
      {
        "label_key": "כל הארץ",
        "series": [
          {
            "label_key": "motorcycle",
            "value": 0.2424742268041237
          },
          {
            "label_key": "other",
            "value": 0.7575257731958763
          }
        ]
      }
    ],
    "text": {
      "title": "תאונות אופנוע קטלניות - 6 בהשוואה לשאר הארץ",
      "labels_map": {
        "motorcycle": "אופנוע",
        "other": "אחר"
      }
    }
  },
  "meta": {
    "rank": 20,
    "information": "Project-Id-Version: PROJECT VERSION\nReport-Msgid-Bugs-To: EMAIL@ADDRESS\nPOT-Creation-Date: 2022-01-08 14:56+0200\nPO-Revision-Date: 2020-10-16 15:42+0000\nLast-Translator: FULL NAME <EMAIL@ADDRESS>\nLanguage: he\nLanguage-Team: he <LL@li.org>\nPlural-Forms: nplurals=2; plural=(n != 1)\nMIME-Version: 1.0\nContent-Type: text/plain; charset=utf-8\nContent-Transfer-Encoding: 8bit\nGenerated-By: Babel 2.9.1\n"
  }
}

[chenmu10]

@ziv17 looks good.

[atalyaalon]

@chenmu10 do you need to receive the data as percentages or whole numbers (meaning the count of the accidents) and you turn it into percentages? I think we discussed having it as whole numbers at the time?

[ziv17]

@ziv17 looks good.

OK, I will start implement.

[ziv17]

Hi @chenmu10 , it is now merged to dev branch of anyway backend.

[atalyaalon]

@ziv17 great work! Data is now in API! @yuvalbl @danielsh28 @MichalOren FYI

[danielsh28]

@EyalIlan tech details : changes need to be made into BarChartContainer inside GenericBarChart.tsx file we need to add the following to add a grid view <CartesianGrid/> <YAxis/>