Hide unused settings in barchart

app/components/report/ReportBuilder/ReportContainer/BarChartEdit/index.tsx

@@ -53,7 +53,7 @@ import {
     aggregate,
 } from '../../../utils';
 import TextElementsStylesEdit from '../TextElementsStylesEdit';
-import LegendElementsStylesEdit from '../LegendStylesEdit';
+// import LegendElementsStylesEdit from '../LegendStylesEdit';
 import GridLineStylesEdit from '../GridLineStylesEdit';
 import TickStylesEdit from '../TickStylesEdit';
 import VerticalAxisInput from './VerticalAxisInput';
@@ -147,7 +147,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
     const {
         horizontalAxisTypeOptions,
         barChartTypeOptions,
-        barChartDirectionOptions,
+        // barChartDirectionOptions,
         aggregationTypeOptions,
     } = useMemo(() => ({
         horizontalAxisTypeOptions: enumsData?.enums?.AnalysisReportHorizontalAxisSerializerType,
@@ -395,6 +395,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     error={error?.type}
                     spacing="compact"
                 />
+                {/*
                 <SegmentInput
                     label="Chart Direction"
                     name="direction"
@@ -407,6 +408,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     spacing="compact"
                     disabled
                 />
+                */}
                 <ContainerCard
                     className={_cs(
                         styles.container,
@@ -488,6 +490,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     error={error?.verticalAxisTitle}
                     disabled={disabled}
                 />
+                {/*
                 <TextInput
                     value={value?.legendHeading}
                     name="legendHeading"
@@ -504,6 +507,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     error={error?.horizontalTickLabelRotation}
                     disabled={disabled}
                 />
+                */}
                 <NumberInput
                     value={value?.verticalAxisExtendMaximumValue}
                     name="verticalAxisExtendMaximumValue"
@@ -548,6 +552,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onFieldChange}
                     disabled={disabled}
                 />
+                {/*
                 <Checkbox
                     value={value?.horizontalTickVisible}
                     name="horizontalTickVisible"
@@ -562,6 +567,7 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onFieldChange}
                     disabled={disabled}
                 />
+                */}
             </ExpandableContainer>
             <ExpandableContainer
                 heading="Styling"
@@ -584,13 +590,15 @@ function BarChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onStyleChange}
                     disabled={disabled}
                 />
+                {/*
                 <LegendElementsStylesEdit
                     name="legend"
                     label="Legend"
                     value={value?.style?.legend}
                     onChange={onStyleChange}
                     disabled={disabled}
                 />
+                */}
                 <TextElementsStylesEdit
                     name="horizontalAxisTitle"
                     label="Horizontal Axis Title"

app/components/report/ReportBuilder/ReportContainer/Content/BarContent/index.tsx

@@ -7,7 +7,7 @@ import {
 
 import {
     CategoricalBarChart,
-    // NumericBarChart,
+    NumericBarChart,
     TemporalBarChart,
 } from '@the-deep/reporting-module-components';
 
@@ -89,9 +89,6 @@ function BarContent(props: Props) {
                     undefined,
                 ),
             },
-            keySelector: (item: Datum) => item.key ?? '',
-            xValueSelector: (item: Datum) => item.key,
-            yValueSelector,
             yValueKeys: yKeys ?? [],
             groupingMode: configuration?.type === 'STACKED'
                 ? 'stacked' as const : 'side-by-side' as const,
@@ -163,6 +160,18 @@ function BarContent(props: Props) {
         configuration,
     ]);
 
+    const configForNumericChart = useMemo(() => (config ? ({
+        ...config,
+        chartOptions: {
+            ...config.chartOptions,
+            xValueSelector: (item: Datum) => {
+                const safeNumber = Number(item.key);
+
+                return !Number.isNaN(safeNumber) ? safeNumber : undefined;
+            },
+        },
+    }) : undefined), [config]);
+
     const chartType = configuration?.horizontalAxis?.type ?? 'CATEGORICAL';
 
     return (
@@ -177,11 +186,11 @@ function BarContent(props: Props) {
                     {...config}
                 />
             )}
-            {/* config && chartType === 'NUMERIC' && (
+            {configForNumericChart && chartType === 'NUMERIC' && (
                 <NumericBarChart
-                    {...config}
+                    {...configForNumericChart}
                 />
-            ) */}
+            )}
         </div>
     );
 }

app/components/report/ReportBuilder/ReportContainer/ContentAddModal/index.tsx

@@ -100,7 +100,7 @@ function ContentAddModal(props: Props) {
                     className={styles.button}
                 >
                     <IoKeyOutline className={styles.icon} />
-                    KPIs
+                    Key Metrics
                 </RawButton>
                 <RawButton
                     name="BAR_CHART"

app/components/report/ReportBuilder/ReportContainer/LineChartEdit/index.tsx

@@ -48,7 +48,7 @@ import {
     aggregate,
 } from '../../../utils';
 import TextElementsStylesEdit from '../TextElementsStylesEdit';
-import LegendElementsStylesEdit from '../LegendStylesEdit';
+// import LegendElementsStylesEdit from '../LegendStylesEdit';
 import GridLineStylesEdit from '../GridLineStylesEdit';
 import TickStylesEdit from '../TickStylesEdit';
 import VerticalAxisInput from './VerticalAxisInput';
@@ -419,6 +419,7 @@ function LineChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     error={error?.verticalAxisTitle}
                     disabled={disabled}
                 />
+                {/*
                 <TextInput
                     value={value?.legendHeading}
                     name="legendHeading"
@@ -435,6 +436,7 @@ function LineChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     error={error?.horizontalTickLabelRotation}
                     disabled={disabled}
                 />
+                */}
                 <NumberInput
                     value={value?.verticalAxisExtendMaximumValue}
                     name="verticalAxisExtendMaximumValue"
@@ -479,6 +481,7 @@ function LineChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onFieldChange}
                     disabled={disabled}
                 />
+                {/*
                 <Checkbox
                     value={value?.horizontalTickVisible}
                     name="horizontalTickVisible"
@@ -493,6 +496,7 @@ function LineChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onFieldChange}
                     disabled={disabled}
                 />
+                */}
             </ExpandableContainer>
             <ExpandableContainer
                 heading="Styling"
@@ -515,13 +519,15 @@ function LineChartChartEdit<NAME extends string>(props: Props<NAME>) {
                     onChange={onStyleChange}
                     disabled={disabled}
                 />
+                {/*
                 <LegendElementsStylesEdit
                     name="legend"
                     label="Legend"
                     value={value?.style?.legend}
                     onChange={onStyleChange}
                     disabled={disabled}
-                />
+                /
+                */}
                 <TextElementsStylesEdit
                     name="horizontalAxisTitle"
                     label="Horizontal Axis Title"

app/components/report/ReportBuilder/ReportContainer/MapEdit/MapLayerEdit/ColorSchemeInput/index.tsx

@@ -259,13 +259,15 @@ interface Props<NAME extends string> {
     name: NAME;
     value: string | undefined;
     onChange: (newVal: string | undefined, name: NAME) => void;
+    error?: string;
 }
 
 function ColorSchemeInput<NAME extends string>(props: Props<NAME>) {
     const {
         name,
         value,
         onChange,
+        error,
     } = props;
 
     const getGroupLabel = useCallback((groupKey: string) => (
@@ -285,6 +287,7 @@ function ColorSchemeInput<NAME extends string>(props: Props<NAME>) {
             grouped
             groupKeySelector={colorGroupKeySelector}
             groupLabelSelector={(item) => getGroupLabel(item.groupKey)}
+            error={error}
         />
     );
 }

app/components/report/ReportBuilder/ReportContainer/MapEdit/MapLayerEdit/HeatmapLayerEdit/index.tsx

@@ -223,6 +223,7 @@ function HeatMapLayerEdit<NAME extends string>(props: Props<NAME>) {
                 name="fillPalette"
                 value={value?.fillPalette}
                 onChange={onFieldChange}
+                error={error?.fillPalette}
             />
         </ContainerCard>
     );

app/components/report/ReportBuilder/index.tsx

@@ -9,6 +9,7 @@ import {
 } from '@togglecorp/fujs';
 import {
     useAlert,
+    Tag,
     ListView,
     Button,
     Header,
@@ -23,14 +24,14 @@ import {
 } from '@togglecorp/toggle-form';
 import { IoPencil } from 'react-icons/io5';
 
-import Avatar from '#components/Avatar';
 import Portal from '#components/Portal';
 import { useLazyRequest } from '#base/utils/restRequest';
 
 import {
     BasicOrganization,
     organizationTitleSelector,
     organizationLogoSelector,
+    organizationShortNameSelector,
 } from '#components/selections/NewOrganizationMultiSelectInput';
 import NonFieldError from '#components/NonFieldError';
 import { BasicAnalysisReportUpload } from '#components/report/ReportBuilder/DatasetSelectInput';
@@ -348,14 +349,22 @@ function ReportBuilder(props: Props) {
                         description={value?.subTitle}
                         actionsContainerClassName={styles.organizations}
                         actions={value?.organizations?.map((org) => (
-                            <Avatar
-                                className={styles.organizationLogo}
+                            <Tag
                                 key={org}
-                                src={orgMap?.[org]
-                                    ? organizationLogoSelector(orgMap[org]) : undefined}
-                                name={orgMap?.[org]
-                                    ? organizationTitleSelector(orgMap[org]) : undefined}
-                            />
+                                icons={orgMap?.[org] && organizationLogoSelector(orgMap[org]) && (
+                                    <img
+                                        className={styles.organizationLogo}
+                                        src={organizationLogoSelector(orgMap[org])}
+                                        alt={organizationShortNameSelector(orgMap[org])}
+                                    />
+                                )}
+                            >
+                                {orgMap?.[org]
+                                    ? (
+                                        organizationShortNameSelector(orgMap[org])
+                                        || organizationTitleSelector(orgMap[org])
+                                    ) : undefined}
+                            </Tag>
                         ))}
                     />
                     {!readOnly && (

app/components/report/ReportBuilder/styles.css

@@ -13,6 +13,7 @@
         .organization-logo {
             width: 2rem;
             height: 2rem;
+            object-fit: contain;
             font-size: var(--dui-font-size-extra-large);
         }
 

app/components/report/schema.ts

@@ -594,7 +594,7 @@ const heatMapLayerConfigSchema: HeatMapLayerConfigSchema = {
         blur: [],
         radius: [],
         weighted: [],
-        fillPalette: [],
+        fillPalette: [requiredCondition],
         weightPropertyKey: [requiredCondition],
         scaleDataMax: [],
     }),

app/components/report/utils.ts

@@ -153,16 +153,19 @@ export function resolveLineStyle(
     }
 
     const {
+        lineOpacity,
         lineWidth,
         lineColor,
     } = lineStyle ?? {};
 
     const {
+        lineOpacity: generalLineOpacity,
         lineWidth: generalLineWidth,
         lineColor: generalLineColor,
     } = generalLineStyle ?? {};
 
     return {
+        opacity: lineOpacity ?? generalLineOpacity ?? 1,
         stroke: lineColor ?? generalLineColor ?? 'lightgray',
         strokeWidth: lineWidth ?? generalLineWidth,
     };

app/utils/common.test.ts

@@ -5,6 +5,7 @@ import {
 import {
     sortByOrder,
     reorder,
+    reorderByKey,
     getMaximum,
     breadcrumb,
     mergeLists,
@@ -84,6 +85,48 @@ test('reorder', () => {
     ]);
 });
 
+test('reorderByKey', () => {
+    expect(reorderByKey([
+        { id: '2', order: 2 },
+        { id: '3', order: 3 },
+        { id: '1', order: 1 },
+    ])).toStrictEqual([
+        { id: '2', order: 1 },
+        { id: '3', order: 2 },
+        { id: '1', order: 3 },
+    ]);
+
+    expect(reorderByKey([
+        { id: '2', order: undefined, row: 1 },
+        { id: '3', order: 3, row: 3 },
+        { id: '1', order: 1, row: 5 },
+    ], 'row')).toStrictEqual([
+        { id: '2', order: undefined, row: 1 },
+        { id: '3', order: 3, row: 2 },
+        { id: '1', order: 1, row: 3 },
+    ]);
+
+    expect(reorderByKey([
+        { id: '2', row: undefined },
+        { id: '3', row: undefined },
+        { id: '1', row: undefined },
+    ], 'row')).toStrictEqual([
+        { id: '2', row: 1 },
+        { id: '3', row: 2 },
+        { id: '1', row: 3 },
+    ]);
+
+    expect(reorderByKey([
+        { id: '2', order: undefined },
+        { id: '3', order: undefined },
+        { id: '1', order: undefined },
+    ], 'row')).toStrictEqual([
+        { id: '2', order: undefined, row: 1 },
+        { id: '3', order: undefined, row: 2 },
+        { id: '1', order: undefined, row: 3 },
+    ]);
+});
+
 test('breadcrumb', () => {
     expect(breadcrumb([])).toBe('');
     expect(breadcrumb(['ram'])).toBe('ram');

app/utils/common.ts

@@ -29,6 +29,15 @@ export function reorder<T extends { order?: number }>(data: T[]) {
     return data.map((v, i) => ({ ...v, order: i + 1 }));
 }
 
+// FIXME: Optimize reorder function by not editing the object is new
+// order is equal to old order
+export function reorderByKey<T>(
+    data: T[],
+    orderKey = 'order',
+): T[] {
+    return data.map((v, i) => ({ ...v, [orderKey]: i + 1 }));
+}
+
 export function breadcrumb(args: (string | undefined)[], symbol = ' » ') {
     return args.filter((arg) => isDefined(arg)).join(symbol);
 }