merge dev into master (#999)

* [Feat-885] Add selection for stack bar graphs (#935)

* Added stacked bar widgets a checkbox option

* Add option to choose colors when changing displayed bars

* Changed any to proper type, make number of bar generic and add function createBarWidget

* Fix bug of changed values when closing card editor

* PR review changes

* Remove redundent imports

* add conditional label, refactor utils (#938)

Co-authored-by: Daniel Shely <>

* Update .env.staging (#947)

* Add critical indication (#948)

* Added image

* Added critical icon based on field value

* Added critical option to the filter panel

* Added enum value

* Had to increase width

* Added local critical filter

* Added field to model

* add alt attrinbte on image tag (#951)

* Update .env.staging (#952)

* Make critical filter non local (#958)

* sufficient condition

* Use object for fetch args

* Send params in object format

* Make fields optional

* don't use "any" type hint

* Update News.tsx (#961)

* Update news-flash-store.ts (#962)

* Update News.tsx

* Update thank-you-names.csv

* transaction dialog box (#966)

Co-authored-by: EyalIlan <eyalilan8@gmail.com>

* [Feat-925] Add location approval feature (#969)

* initial feature commit with icon and new field

* Added icon choice and display

* Move critical icon

* Add location change button

* Make critical icon transperent

* replace critical.gif with svg

* Window open pressing button, seperated newsFlash comp to new file

* Added user info

* Status icon and buttons

* Added map choice (need to finish with saving data)

* Saving location and qualificaion data

* Added manual option for location qualification and added user change

* Fix responsibilty issue between the two files

* Split Search city to 2 files

* Spacing and page look

* Changed initialLocation to be a function, and improved onClose location window

* Split radio buttons to seperate file

* updated put function for news flash

---------

Co-authored-by: Daniel Shely <>

* Feature add transcrption 4 widgets 957 (#968)

* transaction dialog box

* show transaction icon only widgets that has transaction

* add copy image to transaction box

* add widget vision_10_30_90 (#972)

* Feature widget vision zero 10 50 90 (#975)

* add widget vision_10_30_90

* change widget 10_30_90 to 10_50_90

* change the location of the start command in package.json (#977)

* change the location of the start command in package.json

change the location of the start command
after receive this error:
/usr/local/bin/node: bad option: --openssl-legacy-provider

* add npx browserslist@latest --update-db before start the docker

* add logo (#979)

* add natun square logo (#982)

* add widget lower bar (#981)

* update logo (#980)

* Update Footer.tsx (#986)

* add data-for-change (#988)

* Delete src/assets/hasadna.png (#989)

* Bug click twice to change news backround (#984)

* add widget lower bar

* fix news menu bar bug you need to click twice to make the news backround active

* Add dev-to-prod auth server change (#950)

* Spliting title and subtitle, making title bold (#995)

* Change design in bar widgets (#996)

---------

Co-authored-by: shaked-hayek <85109951+shaked-hayek@users.noreply.github.com>
Co-authored-by: danielsh28 <danielshely1@gmail.com>
Co-authored-by: carmelp16 <46032304+carmelp16@users.noreply.github.com>
Co-authored-by: EyalIlan <55767736+EyalIlan@users.noreply.github.com>
Co-authored-by: EyalIlan <eyalilan8@gmail.com>
Co-authored-by: Shai2022 <106345640+Shai2022@users.noreply.github.com>
Co-authored-by: BarVolunteering <58947331+BarVolunteering@users.noreply.github.com>

src/components/molecules/GenericBarChart.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar, Tooltip, Legend } from 'recharts';
 import { roseColor, honeyColor, yellowColor, blackColor, whiteColor } from 'style';
-import { Typography } from 'components/atoms';
 import tinycolor from 'tinycolor2';
 
 const colors = [roseColor, honeyColor, yellowColor];
@@ -54,7 +53,6 @@ const CustomizedLabel = (props: CustomizedLabelProps) => {
 const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
   return (
     <>
-      {!subtitle && <Typography.Body3>{textLabel}</Typography.Body3>}
       <ResponsiveContainer>
         <BarChart data={data} margin={{ bottom: 20 }}>
           <XAxis
@@ -66,7 +64,7 @@ const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle,
             style={{ fill: blackColor }}
           />
           <Tooltip />
-          {isStacked && <Legend verticalAlign="top" align="right" iconType="circle" height={35} />}
+          {isStacked && <Legend verticalAlign="bottom" align="right" iconType="circle" height={35} />}
           {children}
         </BarChart>
       </ResponsiveContainer>

src/components/molecules/card/AnyWayCard.tsx

@@ -156,7 +156,8 @@ const AnyWayCard: FC<IProps> = ({
               <CardHeader
                 orgIconPath={organizationData?.path}
                 variant={variant.header}
-                text={subtitle ? `${title} ${subtitle}` : title}
+                title={title}
+                subtitle={subtitle}
                 road={roadNumber}
               />
             </Box>

src/components/molecules/card/CardHeader.tsx

@@ -6,7 +6,6 @@ import LamasImage from 'assets/cbs.png';
 import AnywayImage from 'assets/anyway.png';
 import { Typography, Logo } from 'components/atoms';
 import { silverSmokeColor, opacity80percent } from 'style/';
-import { splitTextHeader } from 'utils/string.utils';
 
 const useStyles = makeStyles({
   wrapper: {
@@ -37,14 +36,14 @@ const useStyles = makeStyles({
 
 interface IProps {
   variant: HeaderVariant;
-  text: string | undefined;
+  title: string | undefined;
+  subtitle: string | undefined;
   road: number;
   orgIconPath?: string;
 }
-const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
+const CardHeader: FC<IProps> = ({ variant, title, subtitle, road,orgIconPath }) => {
   const classes = useStyles();
   let headerContent = null;
-  const headerText = splitTextHeader(text);
   const roadNumberComp: JSX.Element | null = road ? <RoadNumberImage roadNumber={road} /> : null;
 
   switch (variant) {
@@ -56,10 +55,10 @@ const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
           <Box display="flex" justifyContent="center" px={2} className={classes.textWrapper}>
             <Box display="flex" flexDirection="column">
               { variant === HeaderVariant.Centered &&
-                <>
-                <Typography.Body1>{headerText?.textLine1}</Typography.Body1>
-                <Typography.Body1>{headerText?.textLine2}</Typography.Body1>
-                </>
+                <Box textAlign="center">
+                  <Typography.Title2 bold>{title}</Typography.Title2>
+                  <Typography.Body2>{subtitle}</Typography.Body2>
+                </Box>
               }
             </Box>
           </Box>
@@ -73,7 +72,7 @@ const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
             {roadNumberComp}
           </Box>
           <Box textAlign="center" px={2} className={classes.label}>
-            <Typography.Body1>{text}</Typography.Body1>
+            <Typography.Body1>{subtitle ? `${title} ${subtitle}` : title}</Typography.Body1>
           </Box>
         </Box>
       );

src/components/molecules/widgets/CountByYearBarWidget.tsx

@@ -11,7 +11,9 @@ interface IProps {
 const CountByYearBarWidget: FC<IProps> = ({ data, editorBarOptions }) => {
   const { text } = data;
   const multiBarSeries = createBarWidget(data, editorBarOptions)
-  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries} textLabel={text.title}
+  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries}
+                        textLabel={text.title}
+                        subtitle={text.subtitle}
                         editorBarOptions={editorBarOptions} />;
 };
 export default CountByYearBarWidget;

src/components/molecules/widgets/CountInjuredByYearBarWidget.tsx

@@ -12,7 +12,9 @@ interface IProps {
 const CountInjuredByYearBarWidget: FC<IProps> = ({ data, editorBarOptions }) => {
   const { text } = data;
   const multiBarSeries = createBarWidget(data, editorBarOptions);
-  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries} textLabel={text.title}
+  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries}
+                        textLabel={text.title}
+                        subtitle={text.subtitle}
                         editorBarOptions={editorBarOptions} />;
 };
 export default CountInjuredByYearBarWidget;

src/index.css

@@ -48,3 +48,8 @@ svg {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+/* Add left padding for legend icons (for hebrew compatibility) */
+.recharts-legend-item-text {
+  padding-right: 5px;
+}

src/models/WidgetData.ts

@@ -185,6 +185,7 @@ export interface IWidgetMultiBarData extends IWidgetDataBase {
   items: MultiSeriesDataItems[];
   text: {
     title?: string;
+    subtitle?: string;
     labels_map: LabelsMap;
   };
 }

src/services/widgets.style.service.ts

@@ -37,8 +37,8 @@ const widgetVariants: { [index: string]: CardVariant } = {
     footer: FooterVariant.LogoWithRange,
   },
   [WidgetName.accident_count_by_accident_type]: { header: HeaderVariant.Centered, footer: FooterVariant.Logo },
-  [WidgetName.accident_count_by_accident_year]: { header: HeaderVariant.Logo, footer: FooterVariant.None },
-  [WidgetName.injured_count_by_accident_year]: { header: HeaderVariant.Logo, footer: FooterVariant.None },
+  [WidgetName.accident_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
+  [WidgetName.injured_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
   [WidgetName.accident_count_by_day_night]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
   [WidgetName.head_on_collisions_comparison]: { header: HeaderVariant.Label, footer: FooterVariant.LogoWithRange },
   [WidgetName.head_on_collisions_comparison_percentage]: {