Add killed and injured count per age group stacked

src/components/molecules/GenericBarChart.tsx

@@ -35,6 +35,7 @@ interface ISingleBarChartProps extends IBarChartBaseProps {}
 
 interface IMultiBarChartProps extends IBarChartBaseProps {
   isStacked: boolean;
+  customYLabels?: string[];
   editorBarOptions?: Record<number, boolean>;
 }
 
@@ -106,13 +107,15 @@ const MultiBarChart: FC<IMultiBarChartProps> = ({
   isStacked,
   textLabel,
   subtitle,
+  customYLabels,
   editorBarOptions,
 }) => {
   const theme = useTheme();
   const colors = (theme.palette.primary as ColorScheme).barChartColors;
 
-  const yLabels = data ? Object.keys(data[0]) : [];
-  yLabels.splice(0, 1);
+  const defaultYLabels = data ? Object.keys(data[0]) : [];
+  const yLabels= customYLabels  || defaultYLabels.slice(1);
+
   const maxBarsNum = yLabels.length;
   const filteredColors: Record<string, any> =
     editorBarOptions && Object.keys(editorBarOptions).length !== 0

src/components/molecules/widgets/KilledAndInjuredCountPerAgeGroupStackedWidget.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IWidgetMultiBarData } from 'models/WidgetData';
+import { createBarWidget } from 'utils/barChart.utils';
+import { MultiBarChart } from '../GenericBarChart';
+
+
+interface IProps {
+  data: IWidgetMultiBarData;
+  editorBarOptions: Record<number, boolean>;
+}
+
+const KilledAndInjuredCountPerAgeGroupStackedWidget: FC<IProps> = ({ data, editorBarOptions }) => {
+  const { text } = data;
+  const multiBarSeries = createBarWidget(data, editorBarOptions);
+  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries}
+                        textLabel={text.title}
+                        customYLabels={Object.values(text.labels_map)}
+                        subtitle={text.subtitle}
+                        editorBarOptions={editorBarOptions} />;
+};
+export default KilledAndInjuredCountPerAgeGroupStackedWidget;

src/components/molecules/widgets/WidgetWrapper.tsx

@@ -42,6 +42,7 @@ import { IPoint } from 'models/Point';
 import { WidgetName } from 'models/WidgetName';
 import KilledAndInjuredCountPerAgeGroupWidget from './KilledAndInjuredCountPerAgeGroupWidget';
 import { getInjuredBySeverityVerbLabel } from 'utils/text.utils';
+import KilledAndInjuredCountPerAgeGroupStackedWidget from './KilledAndInjuredCountPerAgeGroupStackedWidget';
 
 interface IProps {
   widget: IWidgetBase;
@@ -149,6 +150,10 @@ const WidgetWrapper: FC<IProps> = ({ widget, locationText, sizeOptions, editorBa
       widgetComponent = <CountInjuredByYearBarWidget data={data as IWidgetMultiBarData} editorBarOptions={editorBarOptions} />;
       break;
     }
+    case WidgetName.killed_and_injured_count_per_age_group_stacked: {
+      widgetComponent = <KilledAndInjuredCountPerAgeGroupStackedWidget data={data as IWidgetMultiBarData} editorBarOptions={editorBarOptions} />;
+      break;
+    }
     case WidgetName.accident_count_by_day_night: {
       widgetComponent = <CountAccidentsByDayNightPieWidget data={data as IWidgetAccidentsByDayNightData} />;
       break;

src/components/organisms/WidgetsTemplate.tsx

@@ -21,6 +21,7 @@ const WidgetsTemplate: FC = () => {
   const organizationData: OrgLogoData | undefined = logosSourceMap.find((p) => p.key === organizationName);
 
   const widgetCards = widgetsData.map((widget, index, sizeOptions) => {
+
     const widgetComponent = (
       <WidgetWrapper
         widget={widget}

src/const/cards.const.ts

@@ -17,7 +17,8 @@ export const operationalCards: WidgetName[] = [
   WidgetName.injured_count_by_accident_year,
   // WidgetName.accident_count_by_driver_type,
   WidgetName.killed_and_injured_count_per_age_group,
-  WidgetName.accident_count_by_day_night
+  WidgetName.accident_count_by_day_night,
+  WidgetName.killed_and_injured_count_per_age_group_stacked,
 ];
 
 export type OrgLogoData =  {key : string, path:string} ;

src/models/WidgetData.ts

@@ -196,4 +196,4 @@ export interface IWidgetKilledAndInjuredCountPerAgeGroup extends IWidgetDataBase
     subtitle?: string;
     title?: string;
   };
-}
+}

src/models/WidgetName.ts

@@ -22,4 +22,5 @@ export enum WidgetName {
   injured_accidents_with_pedestrians = 'injured_accidents_with_pedestrians',
   injured_count_by_severity = 'injured_count_by_severity',
   killed_and_injured_count_per_age_group = 'killed_and_injured_count_per_age_group',
+  killed_and_injured_count_per_age_group_stacked = 'killed_and_injured_count_per_age_group_stacked',
 }

src/services/data.verification/data.verification.ts

@@ -106,6 +106,10 @@ export const verifiedWidgetData = (widget: any) => {
       isValid = items.every((item: any) => validNumber(item.label_key) && validDataSeries(item.series));
       break;
     }
+    case 'killed_and_injured_count_per_age_group_stacked': {
+      isValid = items.every((item: any) => validString(item.label_key) && validDataSeries(item.series));
+      break;
+    }
     case 'accident_count_by_day_night': {
       isValid = items.every((item: any) => validString(item.day_night) && validNumber(item.count));
       break;

src/services/widgets.style.service.ts

@@ -65,6 +65,8 @@ const widgetVariants: { [index: string]: CardVariant } = {
     footer: FooterVariant.LogoWithRange,
   },
   [WidgetName.accidents_heat_map]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
+  [WidgetName.killed_and_injured_count_per_age_group_stacked]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
+
 };
 
 export function getWidgetVariant(widgetName: string) {