From 31b8152d37b8fbfb40e92a7829976c954102966c Mon Sep 17 00:00:00 2001 From: jsyang Date: Wed, 27 Aug 2025 14:56:02 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=A2=8C=EC=9A=B0=20a?= =?UTF-8?q?xis=20custom=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/LineBarChart.tsx | 48 ++++++++++++++++--- .../src/ui/chart/LineChart.tsx | 36 +++++++++++++- 2 files changed, 77 insertions(+), 7 deletions(-) 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) => { From 49c475709faa6fd83ebb0ad293f00282adeae447 Mon Sep 17 00:00:00 2001 From: swcho Date: Thu, 28 Aug 2025 17:11:35 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20-=20=EC=8B=9C=EC=84=A4=20=EA=B2=80?= =?UTF-8?q?=EC=83=89,=20=EB=8B=A4=EC=A4=91=20=EC=8B=9C=EC=84=A4=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=20=EC=8B=9C=20=EC=9D=B4=EC=A0=84=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EC=8B=9C=EC=84=A4=20=EB=A0=88=EC=9D=B4=EC=96=B4=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?-=20=EC=8B=9C=EC=84=A4=20=EC=9C=84=EC=B9=98=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=97=86=EC=9D=84=20=EB=95=8C=20alert=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20-=20=EC=8B=9C=EC=84=A4=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=EC=8B=9C=20=ED=95=B4=EB=8B=B9=20=EC=8B=9C=EC=84=A4=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=91=9C?= =?UTF-8?q?=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/map/lib/gis.layer.js | 59 +++++++++++++------ .../src/ui/map/lib/gis.select.js | 1 + 2 files changed, 43 insertions(+), 17 deletions(-) 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 538fad976..ff8266067 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 @@ -591,40 +591,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; @@ -659,12 +682,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({ @@ -689,13 +713,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 이벤트 활성화