diff --git a/lib/package.json b/lib/package.json index 328b1478..7f1fa124 100644 --- a/lib/package.json +++ b/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" diff --git a/lib/src/components/BarList/index.tsx b/lib/src/components/BarList/index.tsx index 0dc4ff3f..fdc97642 100644 --- a/lib/src/components/BarList/index.tsx +++ b/lib/src/components/BarList/index.tsx @@ -23,7 +23,7 @@ export interface Props { barGroupGap?: number; yValueKeys: KEY[]; colorMap: Record; - groupingMode?: BarGroupingMode; + barGroupingMode?: BarGroupingMode; } function BarList(props: Props) { @@ -38,10 +38,10 @@ function BarList(props: Props) { 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(props: Props) { return chartPoints.map((chartPoint) => ( - {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(props: Props) { /> ); })} - {groupingMode === 'stacked' && yValueKeys.map((yValueKey, i) => { + {barGroupingMode === 'stacked' && yValueKeys.map((yValueKey, i) => { const currentY = chartPoint.y[yValueKey]; if (isNotDefined(currentY)) { diff --git a/lib/src/components/KPIs/index.tsx b/lib/src/components/KPIs/index.tsx index e5762e39..08b647eb 100644 --- a/lib/src/components/KPIs/index.tsx +++ b/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} -
{kpi.value !== 0 && (
; 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], ); diff --git a/lib/src/components/Map/Layers/MapboxLayer.tsx b/lib/src/components/Map/Layers/MapboxLayer.tsx index 79fbe8e6..5a092bfe 100644 --- a/lib/src/components/Map/Layers/MapboxLayer.tsx +++ b/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; } diff --git a/lib/src/components/Map/Layers/SymbolLayer.tsx b/lib/src/components/Map/Layers/SymbolLayer.tsx index b62ba2b2..170ae18f 100644 --- a/lib/src/components/Map/Layers/SymbolLayer.tsx +++ b/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 ( diff --git a/lib/src/components/Map/Layers/TileLayer.tsx b/lib/src/components/Map/Layers/TileLayer.tsx index 94cf15c2..336159c6 100644 --- a/lib/src/components/Map/Layers/TileLayer.tsx +++ b/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; } diff --git a/lib/src/hooks/useCategoricalChartData.ts b/lib/src/hooks/useCategoricalChartData.ts index 132437f7..a8ce9d6e 100644 --- a/lib/src/hooks/useCategoricalChartData.ts +++ b/lib/src/hooks/useCategoricalChartData.ts @@ -41,7 +41,7 @@ export interface Options { yDomain?: Bounds; yValueStartsFromZero?: boolean; yScale?: ChartScale; - groupingMode?: ChartGroupingMode; + chartGroupingMode?: ChartGroupingMode; } function useNumericChartData( @@ -63,7 +63,7 @@ function useNumericChartData( yDomain, yValueStartsFromZero, yScale = 'linear', - groupingMode = 'none', + chartGroupingMode = 'none', } = options; const chartSize = useSizeTracking(containerRef); @@ -166,10 +166,10 @@ function useNumericChartData( chartData, numYAxisTicks, yValueStartsFromZero, - groupingMode, + chartGroupingMode, ); }, - [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, groupingMode], + [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, chartGroupingMode], ); const yScaleFn = useMemo( diff --git a/lib/src/hooks/useNumericChartData.ts b/lib/src/hooks/useNumericChartData.ts index 658b1849..c4d7ee7d 100644 --- a/lib/src/hooks/useNumericChartData.ts +++ b/lib/src/hooks/useNumericChartData.ts @@ -51,7 +51,7 @@ export interface Options { yDomain?: Bounds; yValueStartsFromZero?: boolean; yScale?: ChartScale; - groupingMode?: ChartGroupingMode; + chartGroupingMode?: ChartGroupingMode; } function useNumericChartData( @@ -75,7 +75,7 @@ function useNumericChartData( yDomain, yValueStartsFromZero, yScale = 'linear', - groupingMode = 'none', + chartGroupingMode = 'none', } = options; const chartSize = useSizeTracking(containerRef); @@ -233,10 +233,10 @@ function useNumericChartData( chartData, numYAxisTicks, yValueStartsFromZero, - groupingMode, + chartGroupingMode, ); }, - [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, groupingMode], + [chartData, yDomain, yValueStartsFromZero, numYAxisTicks, chartGroupingMode], ); const yScaleFn = useMemo( diff --git a/lib/src/hooks/useTemporalChartData.ts b/lib/src/hooks/useTemporalChartData.ts index e4955cf6..61d57a86 100644 --- a/lib/src/hooks/useTemporalChartData.ts +++ b/lib/src/hooks/useTemporalChartData.ts @@ -56,7 +56,7 @@ export interface Options { 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( yValueStartsFromZero, yScale = 'linear', yDomain, - groupingMode = 'none', + chartGroupingMode = 'none', } = options; const chartSize = useSizeTracking(containerRef); @@ -422,10 +422,10 @@ function useTemporalChartData( chartData, numYAxisTicks, yValueStartsFromZero, - groupingMode, + chartGroupingMode, ); }, - [chartData, yValueStartsFromZero, yDomain, numYAxisTicks, groupingMode], + [chartData, yValueStartsFromZero, yDomain, numYAxisTicks, chartGroupingMode], ); const yScaleFn = useMemo( diff --git a/lib/src/index.ts b/lib/src/index.ts index eda56711..468e72ea 100644 --- a/lib/src/index.ts +++ b/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, diff --git a/lib/src/utils/chart.ts b/lib/src/utils/chart.ts index e9a19b88..0fe0e42e 100644 --- a/lib/src/utils/chart.ts +++ b/lib/src/utils/chart.ts @@ -517,11 +517,11 @@ export function getYDomain( }>, numYAxisTicks: number, yValueStartsFromZero: boolean | undefined, - groupingMode: ChartGroupingMode, + chartGroupingMode: ChartGroupingMode, ) { let yValuesFlat: number[]; - if (groupingMode === 'sum') { + if (chartGroupingMode === 'sum') { yValuesFlat = yValues.map( ({ yValue }) => sumSafe( yValue.map( @@ -583,16 +583,16 @@ type CommonChartProps = Omit & { data: DATUM[] | undefined | null; yValueKeys: KEY[]; colorSelector: (yKey: KEY) => string; - groupingMode?: BarGroupingMode; + barGroupingMode?: BarGroupingMode; } export type CombinedBarChartProps< DATUM, KEY extends string | number, ChartOptions, -> = ChartOptions & CommonChartProps & { +> = CommonChartProps & { chartAxesOptions: Omit - barListOptions: Omit, 'chartData' | 'yValueKeys' | 'colorMap' | 'groupingMode' | 'xTickWidth'> + barListOptions: Omit, 'chartData' | 'yValueKeys' | 'colorMap' | 'barGroupingMode' | 'xTickWidth'> chartOptions: ChartOptions; } @@ -614,7 +614,7 @@ export function extractBarChartProps = ChartOptions & CommonChartProps & { +> = CommonChartProps & { chartAxesOptions: Omit chartOptions: ChartOptions; } @@ -683,7 +683,7 @@ export function extractLineChartProps