Skip to content

Commit

Permalink
Fix minor type issues in map, bar and kpi
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdityaKhatri
AdityaKhatri committed Mar 18, 2024
1 parent 7204751 commit 38c3dae
Show file tree
Hide file tree
Showing 12 changed files with 86 additions and 56 deletions.
10 changes: 5 additions & 5 deletions lib/src/components/BarList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>) {
Expand All @@ -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;

Expand All @@ -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)) {
Expand Down Expand Up @@ -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)) {
Expand Down
5 changes: 2 additions & 3 deletions lib/src/components/KPIs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down Expand Up @@ -53,7 +53,6 @@ function KPIs(props: Props) {
{kpi.subtitle}
</div>
</div>

<div className={styles.value}>
{kpi.value !== 0 && (
<div
Expand Down
20 changes: 12 additions & 8 deletions lib/src/components/Map/Layers/HeatmapLayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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],
);
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/Map/Layers/MapboxLayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import MapContext from '../MapContext';
export interface Props {
styleUrl: string;
accessToken: string;
opacity: number;
opacity: number | undefined;
zIndex: number;
}

Expand Down
51 changes: 35 additions & 16 deletions lib/src/components/Map/Layers/SymbolLayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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';
Expand Down Expand Up @@ -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;
}

Expand All @@ -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);
}

Expand Down Expand Up @@ -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({
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/Map/Layers/TileLayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
8 changes: 4 additions & 4 deletions lib/src/hooks/useCategoricalChartData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand All @@ -63,7 +63,7 @@ function useNumericChartData<DATUM, KEY extends string | number>(
yDomain,
yValueStartsFromZero,
yScale = 'linear',
groupingMode = 'none',
chartGroupingMode = 'none',
} = options;

const chartSize = useSizeTracking(containerRef);
Expand Down Expand Up @@ -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(
Expand Down
8 changes: 4 additions & 4 deletions lib/src/hooks/useNumericChartData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand All @@ -75,7 +75,7 @@ function useNumericChartData<DATUM, KEY extends string | number>(
yDomain,
yValueStartsFromZero,
yScale = 'linear',
groupingMode = 'none',
chartGroupingMode = 'none',
} = options;

const chartSize = useSizeTracking(containerRef);
Expand Down Expand Up @@ -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(
Expand Down
8 changes: 4 additions & 4 deletions lib/src/hooks/useTemporalChartData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -83,7 +83,7 @@ function useTemporalChartData<DATUM, KEY extends string | number>(
yValueStartsFromZero,
yScale = 'linear',
yDomain,
groupingMode = 'none',
chartGroupingMode = 'none',
} = options;

const chartSize = useSizeTracking(containerRef);
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 4 additions & 0 deletions lib/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ export {
type Props as MapProps,
} from './components/Map';

export {
type HeatMapLayerProperty,
} from './components/Map/Layers/HeatmapLayer';

export {
default as NumericLineChart,
type Props as NumericLineChartProps,
Expand Down
Loading

0 comments on commit 38c3dae

Please sign in to comment.