diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index 9f9a4feec..2a2ba2b1c 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -7,6 +7,7 @@ import { } from "./lib/chart"; import type { ContentType } from "recharts/types/component/DefaultLegendContent"; import type { set } from "date-fns"; +import React from "react"; // 툴크 커스텀 css /** 차트 기본 스타일 */ @@ -126,6 +127,37 @@ export default function LineBarchart({ monthTicks = getTicks(chartData); } + const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => { + const { x, y, width, height } = viewBox; // 축 영역 + const padding = 5; // 차트 바깥으로 띄우기 + + if('left' == position) { + return ( + + {fieldText} + + ); + }else{ + return ( + + {fieldText} + + ); + } + } + return (
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? ( @@ -151,18 +183,22 @@ export default function LineBarchart({ yAxisId="left" className="text-[12px] font-bold" tickCount={6} - orientation="left" - domain={[0, Math.ceil(lineMaxValue * 1)]} - label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8 }} + tickFormatter={(value) => + typeof value === "number" ? value.toLocaleString() : value + } + orientation="left" + label={(props) => } />} {/* 오른쪽 Y축: barVal */} {yFieldText2 && + typeof value === "number" ? value.toLocaleString() : value + } + label={(props) => } reversed={true} />} } /> diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx index a76807bae..314a0b240 100644 --- a/packages/common/business_components/src/ui/chart/LineChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineChart.tsx @@ -129,6 +129,37 @@ const CustomLegend = (props: LegendProps) => { ); }; +const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:string }> = ({ viewBox, fieldText, position }) => { + const { x, y, width, height } = viewBox; // 축 영역 + const padding = 5; // 차트 바깥으로 띄우기 + + if('left' == position) { + return ( + + {fieldText} + + ); + }else{ + return ( + + {fieldText} + + ); + } +} + type DataType = {label: string; val: string}; type ChartDataType = { @@ -220,7 +251,10 @@ export default function Linechart({ yAxisId="left" className="text-[12px] font-bold" orientation="left" - label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} /> + tickFormatter={(value) => + typeof value === "number" ? value.toLocaleString() : value + } + label={(props) => }/> } /> {showLegend && } {Object.keys(chartData).map((key) => { diff --git a/packages/common/business_components/src/ui/map/lib/gis.layer.js b/packages/common/business_components/src/ui/map/lib/gis.layer.js index b339214db..efd3621b4 100644 --- a/packages/common/business_components/src/ui/map/lib/gis.layer.js +++ b/packages/common/business_components/src/ui/map/lib/gis.layer.js @@ -597,40 +597,63 @@ GisOlLayer.prototype = { const tileSize = 256; // 기본 타일 크기 return Math.ceil(Math.log2(maxResolution / (cameraHeight / tileSize))); }, - ensureSearchLayer: function () { + ensureSearchLayer: function (option) { let layer = this.searchLayer; if (!layer) { - layer = new VectorLayer({ - source: new VectorSource(), + let source; + + try { + if (option.cmncNm == 'bbox') { + source = this.getVectorSourceBbox(option); + } else { + source = this.getVectorSourceAll(option); + } + } catch (error) { + console.warn(option); + } + + layer = new VectorImageLayer({ + ...option, + id: 'search-layer', + source: source, zIndex: 9999 }); + layer.setStyle(this.gisStyle.getLayerStyleFunction(layer, option)); + let map = GisApp.Module.core.map; map.addLayer(layer); + + this.searchLayer = layer; } return layer; }, - clearSearchLayer: function () { - const layer = this.ensureSearchLayer(); + clearSearchLayer: function (option) { + const layer = this.ensureSearchLayer(option); layer.getSource().clear(true); + + if (this.searchLayer) { + GisApp.Module.core.map.removeLayer(this.searchLayer); + this.searchLayer = null; + } }, showSearchResultsFromGeoJSON: function (lyrTyNm, featureId) { - const layer = this.ensureSearchLayer(); - - // 이전 검색결과는 깨끗이 - const prev = layer.getSource(); - if (prev) prev.clear(true); - //레이어 타입 설정(point, line 등. 이걸 style에서 사용) const layerCode = GisApp.layerCode; const matched = Object.values(layerCode).find(obj => obj.lyrTyNm === lyrTyNm); + // 이전 검색 레이어 완전히 제거 + this.clearSearchLayer(matched); + // 새로운 검색 레이어 생성 + const layer = this.ensureSearchLayer(matched); layer.set("gobjTy", matched.gobjTy); // 새 소스 만들기 - const source = this.getFeatureSourceFromGeoserver(lyrTyNm, featureId); + const source = this.getFeatureSourceFromGeoserver(lyrTyNm, featureId, matched); // 1) 로드 완료시 extent 맞추기 const onLoadEnd = () => { + if (Object.keys(source.nullGeometryFeatures_).length > 0) alert('해당 시설의 위치 정보가 없습니다.'); + const feats = source.getFeatures(); if (feats && feats.length > 0) { const select = GisApp.Module.select; @@ -665,12 +688,13 @@ GisOlLayer.prototype = { * @param {*} featureId * @returns */ - getFeatureSourceFromGeoserver: function (lyrTyNm, featureId) { + getFeatureSourceFromGeoserver: function (lyrTyNm, featureId, option) { const typeName = this.storageNm + lyrTyNm; const srsName = GisApp.TO_PROJ; const baseUrl = GisApp.GEOSERVER_URL; const source = new VectorSource({ + ...option, format: new GeoJSON(), url: () => { const params = new URLSearchParams({ @@ -695,13 +719,14 @@ GisOlLayer.prototype = { * @param {Array|string} featureIds 피처 ID 배열 또는 단일 ID */ showMultipleSearchResultsFromGeoJSON: function (lyrTyNm, featureIds) { - const layer = this.ensureSearchLayer(); - - const prev = layer.getSource(); - if (prev) prev.clear(true); const layerCode = GisApp.layerCode; const matched = Object.values(layerCode).find(obj => obj.lyrTyNm === lyrTyNm); + + // 이전 검색 레이어 완전히 제거 + this.clearSearchLayer(matched); + // 새로운 검색 레이어 생성 + const layer = this.ensureSearchLayer(matched); layer.set("gobjTy", matched.gobjTy); const source = this.getMultiFeatureSourceFromGeoserver(lyrTyNm, featureIds); diff --git a/packages/common/business_components/src/ui/map/lib/gis.select.js b/packages/common/business_components/src/ui/map/lib/gis.select.js index d0209a6ed..ed4f9a2a7 100644 --- a/packages/common/business_components/src/ui/map/lib/gis.select.js +++ b/packages/common/business_components/src/ui/map/lib/gis.select.js @@ -284,6 +284,7 @@ GisOlSelect.prototype = { selectedFeatures.forEach(feature => { selectedFeatures.remove(feature); }); + selectedFeatures.clear(); }, /** * SELECT 이벤트 활성화