feat(FOROME-936): reduced maximum items for bar chart (#609)

ForomePlatform · May 5, 2022 · 7d4bc80 · 7d4bc80
1 parent cfbd452
commit 7d4bc80
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 17 deletions.
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -158,6 +158,7 @@ export const en = {
       hide: 'Hide',
       total: 'Total',
       variants: '{value} variants',
+      shownSignificantItems: 'Shown {items} significant items (total: {total})',
     },
     delete: 'Delete',
     copy: 'Copy',

diff --git a/src/pages/filter/common/groups/chart/bar-chart/bar-chart.tsx b/src/pages/filter/common/groups/chart/bar-chart/bar-chart.tsx
@@ -1,28 +1,41 @@
 import { ReactElement } from 'react'
 
+import { t } from '@i18n'
 import { SvgChart } from '@components/svg-chart/svg-chart'
 import { TBarChartData } from '../chart.interface'
 import { BarChartSvg } from './bar-chart.styles'
 import { drawBarChart } from './bar-chart.utils'
 
 interface IBarChartProps {
   data: TBarChartData
+  totalItems: number
   width?: number
   height?: number
 }
 
 export const BarChart = ({
   data,
+  totalItems,
   width,
   height,
 }: IBarChartProps): ReactElement => {
   return (
-    <SvgChart
-      component={BarChartSvg}
-      width={width}
-      height={height}
-      data={data}
-      render={drawBarChart}
-    />
+    <div>
+      <SvgChart
+        component={BarChartSvg}
+        width={width}
+        height={height}
+        data={data}
+        render={drawBarChart}
+      />
+      {totalItems > data.length && (
+        <div className="text-xs text-grey-blue text-center mt-1 -mb-1">
+          {t('filter.chart.shownSignificantItems', {
+            items: data.length,
+            total: totalItems,
+          })}
+        </div>
+      )}
+    </div>
   )
 }
diff --git a/src/pages/filter/common/groups/chart/chart.interface.ts b/src/pages/filter/common/groups/chart/chart.interface.ts
@@ -26,7 +26,9 @@ export type TBaseChartConfig<Type extends ChartType, Data> = {
 }
 
 export type TPieChartConfig = TBaseChartConfig<ChartType.Pie, TPieChartData>
-export type TBarChartConfig = TBaseChartConfig<ChartType.Bar, TBarChartData>
+export type TBarChartConfig = TBaseChartConfig<ChartType.Bar, TBarChartData> & {
+  totalItems: number
+}
 export type THistogramChartConfig = TBaseChartConfig<
   ChartType.Histogram,
   THistogramChartData

diff --git a/src/pages/filter/common/groups/chart/query-builder-subgroup-chart.tsx b/src/pages/filter/common/groups/chart/query-builder-subgroup-chart.tsx
@@ -23,7 +23,13 @@ export const QueryBuilderSubgroupChart = ({
   let chart: ReactNode = null
   switch (chartConfig.type) {
     case ChartType.Bar:
-      chart = <BarChart data={chartConfig.data} height={150} />
+      chart = (
+        <BarChart
+          data={chartConfig.data}
+          totalItems={chartConfig.totalItems}
+          height={150}
+        />
+      )
       break
     case ChartType.Pie:
       chart = <PieChart data={chartConfig.data} />

diff --git a/src/pages/filter/common/groups/chart/utils/useChartConfig.ts b/src/pages/filter/common/groups/chart/utils/useChartConfig.ts
@@ -25,6 +25,8 @@ const HISTOGRAM_FLOAT_LOG_ZERO = -16
 
 const FLOAT_ROUND_PRECISION = 100
 
+const BAR_CHART_MAX_ITEMS = 40
+
 const floatRound = (num: number): number =>
   Math.round(num * FLOAT_ROUND_PRECISION) / FLOAT_ROUND_PRECISION
 
@@ -113,7 +115,8 @@ const getVariantsChartConfig = (
   if (
     !variants ||
     (renderMode !== AttributeChartRenderModes.Bar &&
-      renderMode !== AttributeChartRenderModes.Pie)
+      renderMode !== AttributeChartRenderModes.Pie &&
+      renderMode !== AttributeChartRenderModes.TreeMap)
   ) {
     return undefined
   }
@@ -122,11 +125,19 @@ const getVariantsChartConfig = (
     .filter(variant => variant[1] > 0)
     .sort((firstVariant, secondVariant) => secondVariant[1] - firstVariant[1])
 
+  const type =
+    renderMode === AttributeChartRenderModes.Pie ? ChartType.Pie : ChartType.Bar
+
+  if (type === ChartType.Bar) {
+    return {
+      type,
+      data: sortedVariants.slice(0, BAR_CHART_MAX_ITEMS),
+      totalItems: sortedVariants.length,
+    }
+  }
+
   return {
-    type:
-      renderMode === AttributeChartRenderModes.Bar
-        ? ChartType.Bar
-        : ChartType.Pie,
+    type,
     data: sortedVariants,
   }
 }

diff --git a/src/pages/filter/common/groups/query-builder-subgroup-item.tsx b/src/pages/filter/common/groups/query-builder-subgroup-item.tsx
@@ -117,14 +117,12 @@ export const QueryBuilderSubgroupItem = observer(
       }
     }
 
-    /* TODO: if variants length > 100  add another visualisation */
     const isChartVisible =
       isVisibleSubGroupItem &&
       !isModal &&
       ((subGroupItem.kind === AttributeKinds.ENUM &&
         subGroupItem.variants &&
-        subGroupItem.variants.length > 0 &&
-        subGroupItem.variants.length < 100) ||
+        subGroupItem.variants.length > 0) ||
         (subGroupItem.kind === AttributeKinds.NUMERIC &&
           subGroupItem.histogram &&
           subGroupItem.histogram.length > 0))

diff --git a/src/service-providers/common/common.interface.ts b/src/service-providers/common/common.interface.ts
@@ -113,6 +113,7 @@ export enum AttributeKinds {
 export enum AttributeChartRenderModes {
   Pie = 'pie',
   Bar = 'bar',
+  TreeMap = 'tree-map',
   Linear = 'linear',
   Log = 'log',
   Neighborhood = 'neighborhood',