Change design in bar widgets (#996)

data-for-change · Dec 24, 2023 · d432d0e · d432d0e
1 parent 24e2992
commit d432d0e
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/src/components/molecules/GenericBarChart.tsx b/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>

diff --git a/src/components/molecules/widgets/CountByYearBarWidget.tsx b/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;
diff --git a/src/components/molecules/widgets/CountInjuredByYearBarWidget.tsx b/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;
diff --git a/src/index.css b/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;
+}
diff --git a/src/models/WidgetData.ts b/src/models/WidgetData.ts
@@ -185,6 +185,7 @@ export interface IWidgetMultiBarData extends IWidgetDataBase {
   items: MultiSeriesDataItems[];
   text: {
     title?: string;
+    subtitle?: string;
     labels_map: LabelsMap;
   };
 }

diff --git a/src/services/widgets.style.service.ts b/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]: {