Add minBarWidth, sorting in animated graphs, and max no of bars

UNDP-Data · Oct 24, 2024 · be9809d · be9809d
1 parent 44a4239
commit be9809d
Show file tree

Hide file tree

Showing 33 changed files with 404 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/src/Components/Dashboard/GraphEl.tsx b/src/Components/Dashboard/GraphEl.tsx
@@ -217,6 +217,8 @@ function GraphEl(props: Props) {
           minHeight: settings?.minHeight,
           showNAColor: settings?.showNAColor,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
         };
       case 'horizontalGroupedBarChart':
         return {
@@ -310,6 +312,9 @@ function GraphEl(props: Props) {
           language: settings?.language,
           minHeight: settings?.minHeight,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
+          sorParameter: settings?.sortParameter,
         };
       case 'verticalBarChart':
         return {
@@ -362,6 +367,8 @@ function GraphEl(props: Props) {
           minHeight: settings?.minHeight,
           showNAColor: settings?.showNAColor,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
         };
       case 'verticalGroupedBarChart':
         return {
@@ -455,6 +462,9 @@ function GraphEl(props: Props) {
           language: settings?.language,
           minHeight: settings?.minHeight,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
+          sorParameter: settings?.sortParameter,
         };
       case 'animatedHorizontalBarChart':
         return {
@@ -509,6 +519,8 @@ function GraphEl(props: Props) {
           autoSort: settings?.autoSort,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
         };
       case 'animatedHorizontalGroupedBarChart':
         return {
@@ -604,6 +616,9 @@ function GraphEl(props: Props) {
           autoPlay: settings?.autoPlay,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          sorParameter: settings?.sortParameter,
         };
       case 'animatedVerticalBarChart':
         return {
@@ -658,6 +673,8 @@ function GraphEl(props: Props) {
           autoSort: settings?.autoSort,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
         };
       case 'animatedVerticalGroupedBarChart':
         return {
@@ -753,6 +770,9 @@ function GraphEl(props: Props) {
           autoPlay: settings?.autoPlay,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          sorParameter: settings?.sortParameter,
         };
       case 'lineChart':
         return {
@@ -1307,6 +1327,8 @@ function GraphEl(props: Props) {
           arrowConnector: settings?.arrowConnector,
           connectorStrokeWidth: settings?.connectorStrokeWidth,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
         };
       case 'verticalDumbbellChart':
         return {
@@ -1356,6 +1378,8 @@ function GraphEl(props: Props) {
           arrowConnector: settings?.arrowConnector,
           connectorStrokeWidth: settings?.connectorStrokeWidth,
           maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
         };
       case 'treeMap':
         return {
@@ -2218,6 +2242,8 @@ function GraphEl(props: Props) {
           autoPlay: settings?.autoPlay,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
         };
       case 'animatedVerticalDumbbellChart':
         return {
@@ -2269,6 +2295,8 @@ function GraphEl(props: Props) {
           autoPlay: settings?.autoPlay,
           showOnlyActiveDate: settings?.showOnlyActiveDate,
           dateFormat: settings?.dateFormat,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
         };
       case 'animatedScatterPlot':
         return {

diff --git a/src/Components/Dashboard/GriddedGraphs.tsx b/src/Components/Dashboard/GriddedGraphs.tsx
@@ -149,7 +149,7 @@ export function GriddedGraphs(props: Props) {
             defaultValue: el.defaultValue,
             availableValues: getUniqValue(d, el.column)
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,
@@ -191,7 +191,7 @@ export function GriddedGraphs(props: Props) {
               defaultValue: el.defaultValue,
               availableValues: getUniqValue(d, el.column)
                 .filter(v =>
-                  el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                  el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
                 )
                 .map(v => ({
                   value: v,
@@ -222,7 +222,7 @@ export function GriddedGraphs(props: Props) {
             defaultValue: el.defaultValue,
             availableValues: getUniqValue(tempData, el.column)
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,

diff --git a/src/Components/Dashboard/MultiGraphDashboard.tsx b/src/Components/Dashboard/MultiGraphDashboard.tsx
@@ -113,7 +113,7 @@ export function MultiGraphDashboard(props: Props) {
             defaultValue: el.defaultValue,
             availableValues: getUniqValue(d, el.column)
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,
@@ -150,7 +150,7 @@ export function MultiGraphDashboard(props: Props) {
               defaultValue: el.defaultValue,
               availableValues: getUniqValue(d, el.column)
                 .filter(v =>
-                  el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                  el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
                 )
                 .map(v => ({
                   value: v,
@@ -176,7 +176,7 @@ export function MultiGraphDashboard(props: Props) {
             defaultValue: el.defaultValue,
             availableValues: getUniqValue(tempData, el.column)
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,

diff --git a/src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx b/src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx
@@ -277,7 +277,23 @@ export function MultiGraphDashboardWideToLongFormat(props: Props) {
                         dataSettings={{
                           data,
                         }}
-                        graphDataConfiguration={el.graphDataConfiguration}
+                        graphDataConfiguration={
+                          el.graphType === 'unitChart'
+                            ? [
+                                {
+                                  columnId: 'indicator',
+                                  chartConfigId: 'label',
+                                },
+                                { columnId: 'value', chartConfigId: 'value' },
+                              ]
+                            : [
+                                {
+                                  columnId: 'indicator',
+                                  chartConfigId: 'label',
+                                },
+                                { columnId: 'value', chartConfigId: 'size' },
+                              ]
+                        }
                         debugMode={debugMode}
                         readableHeader={readableHeader || []}
                       />

diff --git a/src/Components/Dashboard/SingleGraphDashboard.tsx b/src/Components/Dashboard/SingleGraphDashboard.tsx
@@ -134,7 +134,7 @@ export function SingleGraphDashboard(props: Props) {
               el.column,
             )
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,
@@ -171,7 +171,7 @@ export function SingleGraphDashboard(props: Props) {
               defaultValue: el.defaultValue,
               availableValues: getUniqValue(d, el.column)
                 .filter(v =>
-                  el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                  el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
                 )
                 .map(v => ({
                   value: v,
@@ -200,7 +200,7 @@ export function SingleGraphDashboard(props: Props) {
               el.column,
             )
               .filter(v =>
-                el.excludeValues ? el.excludeValues.indexOf(v) !== -1 : true,
+                el.excludeValues ? el.excludeValues.indexOf(v) === -1 : true,
               )
               .map(v => ({
                 value: v,

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/Graph.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/Graph.tsx
@@ -47,6 +47,8 @@ interface Props {
   rtl: boolean;
   language: 'en' | 'he' | 'ar';
   mode: 'light' | 'dark';
+  maxBarThickness?: number;
+  minBarThickness?: number;
 }
 
 export function Graph(props: Props) {
@@ -81,6 +83,8 @@ export function Graph(props: Props) {
     rtl,
     language,
     mode,
+    maxBarThickness,
+    minBarThickness,
   } = props;
   const [mouseOverData, setMouseOverData] = useState<any>(undefined);
   const [eventX, setEventX] = useState<number | undefined>(undefined);
@@ -152,7 +156,14 @@ export function Graph(props: Props) {
     .nice();
   const y = scaleBand()
     .domain(uniqLabels.map((_d, i) => `${i}`))
-    .range([0, graphHeight])
+    .range([
+      0,
+      minBarThickness
+        ? Math.max(graphHeight, minBarThickness * uniqLabels.length)
+        : maxBarThickness
+        ? Math.min(graphHeight, maxBarThickness * uniqLabels.length)
+        : graphHeight,
+    ])
     .paddingInner(barPadding);
   const xTicks = x.ticks(5);
 

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/index.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/index.tsx
@@ -64,6 +64,8 @@ interface Props {
   showNAColor?: boolean;
   minHeight?: number;
   mode?: 'light' | 'dark';
+  maxBarThickness?: number;
+  minBarThickness?: number;
 }
 
 export function AnimatedHorizontalBarChart(props: Props) {
@@ -113,6 +115,8 @@ export function AnimatedHorizontalBarChart(props: Props) {
     showNAColor,
     minHeight,
     mode,
+    maxBarThickness,
+    minBarThickness,
   } = props;
 
   const [svgWidth, setSvgWidth] = useState(0);
@@ -400,6 +404,8 @@ export function AnimatedHorizontalBarChart(props: Props) {
                   rtl={checkIfNullOrUndefined(rtl) ? false : (rtl as boolean)}
                   language={language || (rtl ? 'ar' : 'en')}
                   mode={mode || 'light'}
+                  maxBarThickness={maxBarThickness}
+                  minBarThickness={minBarThickness}
                 />
               ) : null}
             </div>

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedStackedBarChart/Graph.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedStackedBarChart/Graph.tsx
@@ -44,6 +44,9 @@ interface Props {
   rtl: boolean;
   language: 'en' | 'he' | 'ar';
   mode: 'light' | 'dark';
+  sortParameter?: number | 'total';
+  maxBarThickness?: number;
+  minBarThickness?: number;
 }
 
 export function Graph(props: Props) {
@@ -75,6 +78,9 @@ export function Graph(props: Props) {
     rtl,
     language,
     mode,
+    sortParameter,
+    maxBarThickness,
+    minBarThickness,
   } = props;
 
   const dataFormatted = sortBy(
@@ -92,21 +98,33 @@ export function Graph(props: Props) {
     ),
     ([date, values]) => ({
       date,
-      values: autoSort
-        ? sortBy(values, d => sum(d.size.map(el => el || 0)))
-            .reverse()
-            .map((el, i) => ({
+      values:
+        sortParameter !== undefined || autoSort
+          ? sortParameter === 'total' || sortParameter === undefined
+            ? sortBy(data, d => sum(d.size.filter(el => el !== undefined)))
+                .reverse()
+                .map((el, i) => ({
+                  ...el,
+                  id: `${i}`,
+                }))
+            : sortBy(data, d =>
+                checkIfNullOrUndefined(d.size[sortParameter])
+                  ? -Infinity
+                  : d.size[sortParameter],
+              )
+                .reverse()
+                .map((el, i) => ({
+                  ...el,
+                  id: `${i}`,
+                }))
+          : (
+              uniqLabels.map(label =>
+                values.find(o => o.label === label),
+              ) as GroupedBarGraphWithDateDataType[]
+            ).map((el, i) => ({
               ...el,
               id: `${i}`,
-            }))
-        : (
-            uniqLabels.map(label =>
-              values.find(o => o.label === label),
-            ) as GroupedBarGraphWithDateDataType[]
-          ).map((el, i) => ({
-            ...el,
-            id: `${i}`,
-          })),
+            })),
     }),
   );
 
@@ -129,7 +147,14 @@ export function Graph(props: Props) {
   const x = scaleLinear().domain([0, xMaxValue]).range([0, graphWidth]).nice();
   const y = scaleBand()
     .domain(uniqLabels.map((_d, i) => `${i}`))
-    .range([0, graphHeight])
+    .range([
+      0,
+      minBarThickness
+        ? Math.max(graphHeight, minBarThickness * uniqLabels.length)
+        : maxBarThickness
+        ? Math.min(graphHeight, maxBarThickness * uniqLabels.length)
+        : graphHeight,
+    ])
     .paddingInner(barPadding);
   const xTicks = x.ticks(5);