Merge branch 'iipbs/common/main' into iipbs/sn/dev
This commit is contained in:
@@ -6,6 +6,7 @@ import {
|
|||||||
type ChartConfig
|
type ChartConfig
|
||||||
} from "./lib/chart";
|
} from "./lib/chart";
|
||||||
import type { CSSProperties } from "react";
|
import type { CSSProperties } from "react";
|
||||||
|
import { formatCommaNumber } from "./lib/function";
|
||||||
|
|
||||||
const customStyles = {
|
const customStyles = {
|
||||||
legendContainer: {
|
legendContainer: {
|
||||||
@@ -119,6 +120,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
|
|||||||
fontWeight={500}
|
fontWeight={500}
|
||||||
domain={[0, globalMax]}
|
domain={[0, globalMax]}
|
||||||
ticks={ticks}
|
ticks={ticks}
|
||||||
|
tickFormatter={(value) => formatCommaNumber(value)}
|
||||||
label={yFieldText ? { value: yFieldText, className:"text-[15px] font-bold", position: 'insideLeft', angle: -90, offset: -30 } : undefined}
|
label={yFieldText ? { value: yFieldText, className:"text-[15px] font-bold", position: 'insideLeft', angle: -90, offset: -30 } : undefined}
|
||||||
/>
|
/>
|
||||||
<ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
|
<ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
|
||||||
|
|||||||
@@ -94,6 +94,7 @@ export default function LineBarchart({
|
|||||||
|
|
||||||
// 데이터의 최대값 계산
|
// 데이터의 최대값 계산
|
||||||
const getMaxValue = (data: any[], keyPrefix: string) => {
|
const getMaxValue = (data: any[], keyPrefix: string) => {
|
||||||
|
if (!data || data.length === 0) return 0;
|
||||||
return Math.max(...data.map(item =>
|
return Math.max(...data.map(item =>
|
||||||
Object.keys(item)
|
Object.keys(item)
|
||||||
.filter(key => key.includes(keyPrefix))
|
.filter(key => key.includes(keyPrefix))
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
// 숫자입력시 , 삽입
|
||||||
|
export const formatCommaNumber = (
|
||||||
|
value: number | string | undefined | null
|
||||||
|
): string => {
|
||||||
|
if (value === undefined || value === null || value === "") return "";
|
||||||
|
const num = Number(value);
|
||||||
|
// 숫자로 변환할 수 없는 값이 들어올 경우 빈 문자열을 반환하여 예상치 못한 "NaN" 출력을 방지합니다.
|
||||||
|
if (isNaN(num)) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return num.toLocaleString();
|
||||||
|
};
|
||||||
@@ -86,20 +86,28 @@ function Gis({
|
|||||||
foundFeature = data;
|
foundFeature = data;
|
||||||
} else {
|
} else {
|
||||||
// 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
|
// 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
|
||||||
let featureId
|
let featureId = data.fid;
|
||||||
const layerName = layerNmRef.current
|
const layerName = layerNmRef.current
|
||||||
if (layerName === '하수재이용시설') {
|
if (layerName === '하수재이용시설') {
|
||||||
featureId = data.searchPk;
|
featureId = data.searchPk;
|
||||||
} else if (layerName === '빗물이용시설'|| layerName == '중수도시설') {
|
} else if (layerName === '빗물이용시설' || layerName == '중수도시설') {
|
||||||
featureId = data.bdstInfoSn;
|
featureId = data.bdstInfoSn;
|
||||||
} else if (layerName === '하수처리시설') {
|
} else if (layerName === '하수처리시설') {
|
||||||
featureId = data.bscFctCd;
|
featureId = data.bscFctCd;
|
||||||
} else if (layerName === '온배수시설' ) {
|
} else if (layerName === '온배수시설') {
|
||||||
featureId = data.bdstRuseFcltSn;
|
featureId = data.bdstRuseFcltSn;
|
||||||
} else {
|
} else {
|
||||||
console.warn('해당 레이어에 대한 featureId 매핑 없음', layerNm);
|
console.warn('해당 레이어에 대한 featureId 매핑 없음', layerNm);
|
||||||
featureId = data.fid || data.id || data.ftrIdn;
|
featureId = data.fid || data.id || data.ftrIdn;
|
||||||
}
|
}
|
||||||
|
// gisMap.getLayers().getArray().forEach(layer => {
|
||||||
|
// const source = layer.getSource?.();
|
||||||
|
// if (source?.getFeatureById) {
|
||||||
|
// const feature = source.getFeatureById(String(featureId).trim());
|
||||||
|
// if (feature) foundFeature = feature;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// const [layerType, id] = String(featureId).split('.');
|
||||||
gisMap.getLayers().getArray().forEach(layer => {
|
gisMap.getLayers().getArray().forEach(layer => {
|
||||||
const source = layer.getSource?.();
|
const source = layer.getSource?.();
|
||||||
if (source?.getFeatures) {
|
if (source?.getFeatures) {
|
||||||
|
|||||||
@@ -1,45 +0,0 @@
|
|||||||
/**
|
|
||||||
* @remarks
|
|
||||||
* 이 버전은 SearchModal에서 사용하기 위해 `SelectContent`의 z-index를 `z-[101]`로 수정하였습니다.
|
|
||||||
*/
|
|
||||||
import { Label } from "@common/components";
|
|
||||||
import React from "react";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./lib/selectBox";
|
|
||||||
|
|
||||||
/** 차트 기본 스타일 */
|
|
||||||
interface SelectBox1 {
|
|
||||||
text:string,
|
|
||||||
val:string|number
|
|
||||||
}
|
|
||||||
|
|
||||||
const SelectBox2 = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement> & {
|
|
||||||
label:string,
|
|
||||||
selectClass:string|undefined,
|
|
||||||
className:string,
|
|
||||||
selectArray:SelectBox1[],
|
|
||||||
onSelectValue:(val:string|number)=>void,
|
|
||||||
value?: string|number
|
|
||||||
}
|
|
||||||
>(({ label, className, selectClass, selectArray, onSelectValue, value }, ref)=>{
|
|
||||||
const placeHolder = selectArray?.[0]?.text ?? "";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className+" flex items-center flex-nowrap"} ref={ref}>
|
|
||||||
{label && <Label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">{label}</Label>}
|
|
||||||
<Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}>
|
|
||||||
<SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
|
|
||||||
<SelectValue placeholder={placeHolder} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="z-[101]">
|
|
||||||
{selectArray.map((selectArray) => (
|
|
||||||
<SelectItem key={selectArray.val} value={String(selectArray.val)}>{selectArray.text}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
export { SelectBox2 };
|
|
||||||
@@ -27,6 +27,7 @@ const SelectBox = React.forwardRef<
|
|||||||
onSelectValue: (val: string | number) => void;
|
onSelectValue: (val: string | number) => void;
|
||||||
value?: string | number;
|
value?: string | number;
|
||||||
readOnly?: boolean; // readOnly 속성 추가
|
readOnly?: boolean; // readOnly 속성 추가
|
||||||
|
selectContentClass?: string;
|
||||||
}
|
}
|
||||||
>(
|
>(
|
||||||
(
|
(
|
||||||
@@ -38,6 +39,7 @@ const SelectBox = React.forwardRef<
|
|||||||
onSelectValue,
|
onSelectValue,
|
||||||
value,
|
value,
|
||||||
readOnly = false,
|
readOnly = false,
|
||||||
|
selectContentClass,
|
||||||
},
|
},
|
||||||
ref,
|
ref,
|
||||||
) => {
|
) => {
|
||||||
@@ -87,7 +89,7 @@ const SelectBox = React.forwardRef<
|
|||||||
>
|
>
|
||||||
<SelectValue placeholder={placeHolder} />
|
<SelectValue placeholder={placeHolder} />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent className={selectContentClass}>
|
||||||
{visibleItems.map((selectArray) => (
|
{visibleItems.map((selectArray) => (
|
||||||
<SelectItem key={selectArray.val} value={String(selectArray.val)}>
|
<SelectItem key={selectArray.val} value={String(selectArray.val)}>
|
||||||
{selectArray.text}
|
{selectArray.text}
|
||||||
|
|||||||
Reference in New Issue
Block a user