Fix minor type issues in map, bar and kpi

lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@the-deep/reporting-module-components",
-    "version": "1.1.0-beta.9",
+    "version": "1.1.0-beta.11",
     "description": "React library for Reporting Module",
     "files": [
         "/build"

lib/src/components/BarList/index.tsx

@@ -23,7 +23,7 @@ export interface Props<KEY extends string | number> {
     barGroupGap?: number;
     yValueKeys: KEY[];
     colorMap: Record<KEY, string>;
-    groupingMode?: BarGroupingMode;
+    barGroupingMode?: BarGroupingMode;
 }
 
 function BarList<KEY extends string | number>(props: Props<KEY>) {
@@ -38,10 +38,10 @@ function BarList<KEY extends string | number>(props: Props<KEY>) {
         barGroupMargin = 1,
         yValueKeys,
         colorMap,
-        groupingMode = 'side-by-side',
+        barGroupingMode = 'side-by-side',
     } = props;
 
-    const maxBarWidth = groupingMode === 'side-by-side'
+    const maxBarWidth = barGroupingMode === 'side-by-side'
         ? Math.max((xTickWidth - barGroupMargin * 2), 0) / yValueKeys.length
         : xTickWidth;
 
@@ -52,7 +52,7 @@ function BarList<KEY extends string | number>(props: Props<KEY>) {
 
     return chartPoints.map((chartPoint) => (
         <g key={chartPoint.key}>
-            {groupingMode === 'side-by-side' && yValueKeys.map((yValueKey, i) => {
+            {barGroupingMode === 'side-by-side' && yValueKeys.map((yValueKey, i) => {
                 const currentY = chartPoint.y[yValueKey];
 
                 if (isNotDefined(currentY)) {
@@ -83,7 +83,7 @@ function BarList<KEY extends string | number>(props: Props<KEY>) {
                     />
                 );
             })}
-            {groupingMode === 'stacked' && yValueKeys.map((yValueKey, i) => {
+            {barGroupingMode === 'stacked' && yValueKeys.map((yValueKey, i) => {
                 const currentY = chartPoint.y[yValueKey];
 
                 if (isNotDefined(currentY)) {

lib/src/components/KPIs/index.tsx

@@ -4,6 +4,7 @@ import { IoOpenOutline } from 'react-icons/io5';
 import styles from './styles.module.css';
 
 interface KpiData {
+    key: string;
     title?: string;
     titleStyle: React.CSSProperties;
     subtitle?: string;
@@ -21,9 +22,8 @@ export interface Props {
     data: KpiData[],
 }
 
-// FIXME: Is this the correct way to get Kpi key?
 function getKey(item: KpiData) {
-    return `${item.title}:${item.value}`;
+    return item.key;
 }
 
 function KPIs(props: Props) {
@@ -53,7 +53,6 @@ function KPIs(props: Props) {
                             {kpi.subtitle}
                         </div>
                     </div>
-
                     <div className={styles.value}>
                         {kpi.value !== 0 && (
                             <div

lib/src/components/Map/Layers/HeatmapLayer.tsx

@@ -28,13 +28,13 @@ type D3InterpolationSchemes = 'Blues' | 'Greens' | 'Greys' | 'Oranges' | 'Purple
 export interface Props {
     data: HeatMapLayerProperty[] | GeoJSON.FeatureCollection<GeoJSON.Point>;
     zIndex: number;
-    opacity: number;
-    blur: number;
-    radius: number;
+    opacity: number | undefined;
+    blur: number | undefined;
+    radius: number | undefined;
     fillPalette: D3InterpolationSchemes;
     weighted: boolean;
-    weightPropertyKey: string; // Only applicable when weighted = true
-    scaleDataMax: number;
+    weightPropertyKey: string | undefined; // Only applicable when weighted = true
+    scaleDataMax: number | undefined;
 }
 
 function HeatmapLayer(props: Props) {
@@ -101,7 +101,7 @@ function HeatmapLayer(props: Props) {
                 gradient: colors,
                 zIndex: configRef.current.zIndex,
                 weight: (feature) => {
-                    if (configRef.current.weighted) {
+                    if (configRef.current.weighted && configRef.current.weightPropertyKey) {
                         const w = scaleWeight(
                             parseFloat(feature.get(configRef.current.weightPropertyKey)),
                         ) || 0;
@@ -175,8 +175,12 @@ function HeatmapLayer(props: Props) {
 
             layerData.setOpacity(opacity);
             layerData.setZIndex(zIndex);
-            layerData.setBlur(blur);
-            layerData.setRadius(radius);
+            if (blur) {
+                layerData.setBlur(blur);
+            }
+            if (radius) {
+                layerData.setRadius(radius);
+            }
         },
         [layerData, opacity, zIndex, radius, blur],
     );

lib/src/components/Map/Layers/MapboxLayer.tsx

@@ -13,7 +13,7 @@ import MapContext from '../MapContext';
 export interface Props {
     styleUrl: string;
     accessToken: string;
-    opacity: number;
+    opacity: number | undefined;
     zIndex: number;
 }
 

lib/src/components/Map/Layers/SymbolLayer.tsx

@@ -51,21 +51,25 @@ const symbolIcons = {
     triangle,
 };
 
+export type Symbols = keyof typeof symbolIcons;
+export type ScaleTypes = 'fixed' | 'proportional';
+export type ScalingTechnique = 'absolute' | 'flannery';
+
 export interface Props {
     // layerId: string;
 
     labelVariant?: 'population';
     labelPropertyKey?: string;
-    scalePropertyKey: string;
+    scalePropertyKey?: string;
 
-    opacity: number;
-    scaleDataMax: number;
+    opacity: number | undefined;
+    scaleDataMax: number | undefined;
     // scaleDataMin: number;
-    scale: number;
-    scaleType?: 'fixed' | 'proportional';
-    scalingTechnique?: 'absolute' | 'flannery';
+    scale: number | undefined;
+    scaleType?: ScaleTypes;
+    scalingTechnique?: ScalingTechnique;
     showLabels: boolean;
-    symbol: keyof typeof symbolIcons;
+    symbol: Symbols;
 
     /*
     enableTooltips: boolean;
@@ -76,15 +80,15 @@ export interface Props {
 
     zIndex: number;
     symbolStyle: {
-        fill: ColorLike;
-        stroke: ColorLike;
+        fill: ColorLike | undefined;
+        stroke: ColorLike | undefined;
         strokeWidth: number;
     }
     labelStyle: {
-        color: ColorLike;
-        fontFamily: string;
+        color: ColorLike | undefined;
+        fontFamily: string | undefined;
         fontSize: number;
-        fontWeight: 'bold' | 'normal';
+        fontWeight?: 'bold' | 'normal';
         showHalo: boolean;
         textAlign?: 'left' | 'center' | 'right';
         transform?: 'uppercase';
@@ -181,7 +185,11 @@ function SymbolLayer(props: Props) {
                     const exp = scalingTechnique === 'flannery' ? 0.5716 : 0.5;
 
                     function getSize() {
-                        if (isNotDefined(properties) || scaleType !== 'proportional') {
+                        if (
+                            isNotDefined(properties)
+                            || scaleType !== 'proportional'
+                            || isNotDefined(scalePropertyKey)
+                        ) {
                             return scale;
                         }
 
@@ -190,7 +198,11 @@ function SymbolLayer(props: Props) {
                     }
 
                     function getRadius() {
-                        if (isNotDefined(properties) || scaleType !== 'proportional') {
+                        if (
+                            isNotDefined(properties)
+                            || scaleType !== 'proportional'
+                            || isNotDefined(scalePropertyKey)
+                        ) {
                             return (1 / Math.PI) ** exp * (10 * scale);
                         }
 
@@ -249,7 +261,10 @@ function SymbolLayer(props: Props) {
                         }
 
                         if (labelVariant === 'population') yPos = -5;
-                        if (labelVariant !== 'population' || properties[scalePropertyKey] >= 5) {
+                        if (
+                            labelVariant !== 'population'
+                            || (scalePropertyKey && properties[scalePropertyKey] >= 5)
+                        ) {
                             return (
                                 new Style({
                                     text: new Text({
@@ -267,7 +282,11 @@ function SymbolLayer(props: Props) {
                             );
                         }
 
-                        if (labelVariant === 'population' && properties[scalePropertyKey] >= 5) {
+                        if (
+                            labelVariant === 'population'
+                            && scalePropertyKey
+                            && properties[scalePropertyKey] >= 5
+                        ) {
                             const labelValue = properties[scalePropertyKey];
 
                             return (

lib/src/components/Map/Layers/TileLayer.tsx

@@ -12,7 +12,7 @@ import * as olSource from 'ol/source';
 import MapContext from '../MapContext';
 
 export interface Props {
-    opacity: number;
+    opacity: number | undefined;
     zIndex: number;
     source?: TileSource;
 }

lib/src/hooks/useCategoricalChartData.ts

@@ -41,7 +41,7 @@ export interface Options<DATUM, KEY> {
     yDomain?: Bounds;
     yValueStartsFromZero?: boolean;
     yScale?: ChartScale;
-    groupingMode?: ChartGroupingMode;
+    chartGroupingMode?: ChartGroupingMode;
 }
 
 function useNumericChartData<DATUM, KEY extends string | number>(
@@ -63,7 +63,7 @@ function useNumericChartData<DATUM, KEY extends string | number>(
         yDomain,
         yValueStartsFromZero,
         yScale = 'linear',
-        groupingMode = 'none',
+        chartGroupingMode = 'none',
     } = options;
 
     const chartSize = useSizeTracking(containerRef);
@@ -166,10 +166,10 @@ function useNumericChartData<DATUM, KEY extends string | number>(
                 chartData,
                 numYAxisTicks,
                 yValueStartsFromZero,
-                groupingMode,
+                chartGroupingMode,
             );
         },
-        [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, groupingMode],
+        [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, chartGroupingMode],
     );
 
     const yScaleFn = useMemo(

lib/src/hooks/useNumericChartData.ts

@@ -51,7 +51,7 @@ export interface Options<DATUM, KEY> {
     yDomain?: Bounds;
     yValueStartsFromZero?: boolean;
     yScale?: ChartScale;
-    groupingMode?: ChartGroupingMode;
+    chartGroupingMode?: ChartGroupingMode;
 }
 
 function useNumericChartData<DATUM, KEY extends string | number>(
@@ -75,7 +75,7 @@ function useNumericChartData<DATUM, KEY extends string | number>(
         yDomain,
         yValueStartsFromZero,
         yScale = 'linear',
-        groupingMode = 'none',
+        chartGroupingMode = 'none',
     } = options;
 
     const chartSize = useSizeTracking(containerRef);
@@ -233,10 +233,10 @@ function useNumericChartData<DATUM, KEY extends string | number>(
                 chartData,
                 numYAxisTicks,
                 yValueStartsFromZero,
-                groupingMode,
+                chartGroupingMode,
             );
         },
-        [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, groupingMode],
+        [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, chartGroupingMode],
     );
 
     const yScaleFn = useMemo(

lib/src/hooks/useTemporalChartData.ts

@@ -56,7 +56,7 @@ export interface Options<DATUM, KEY> {
     yAxisTickLabelSelector?: (value: number, index: number) => React.ReactNode;
     yValueStartsFromZero?: boolean;
     yScale?: ChartScale;
-    groupingMode?: ChartGroupingMode;
+    chartGroupingMode?: ChartGroupingMode;
     yDomain?: Bounds;
     temporalResolution?: 'auto' | TemporalResolution;
     // NOTE: should be between 3 - 12
@@ -83,7 +83,7 @@ function useTemporalChartData<DATUM, KEY extends string | number>(
         yValueStartsFromZero,
         yScale = 'linear',
         yDomain,
-        groupingMode = 'none',
+        chartGroupingMode = 'none',
     } = options;
 
     const chartSize = useSizeTracking(containerRef);
@@ -422,10 +422,10 @@ function useTemporalChartData<DATUM, KEY extends string | number>(
                 chartData,
                 numYAxisTicks,
                 yValueStartsFromZero,
-                groupingMode,
+                chartGroupingMode,
             );
         },
-        [chartData, yValueStartsFromZero, yDomain, numYAxisTicks, groupingMode],
+        [chartData, yValueStartsFromZero, yDomain, numYAxisTicks, chartGroupingMode],
     );
 
     const yScaleFn = useMemo(

lib/src/index.ts

@@ -35,6 +35,30 @@ export {
     type Props as MapProps,
 } from './components/Map';
 
+export {
+    type HeatMapLayerProperty,
+    type Props as HeatMapLayerProps,
+} from './components/Map/Layers/HeatmapLayer';
+
+export {
+    type Props as LineLayerProps,
+} from './components/Map/Layers/LineLayer';
+
+export {
+    type Props as MapboxLayerProps,
+} from './components/Map/Layers/MapboxLayer';
+
+export {
+    type Props as TileLayerProps,
+} from './components/Map/Layers/TileLayer';
+
+export {
+    type Symbols,
+    type ScaleTypes as SymbolLayerScaleTypes,
+    type ScalingTechnique as SymbolLayerScalingTechnique,
+    type Props as SymbolLayerProps,
+} from './components/Map/Layers/SymbolLayer';
+
 export {
     default as NumericLineChart,
     type Props as NumericLineChartProps,