企业内部仪表板图表组件
我们没有为炼油企业内部仪表板系统的每个界面单独制作图表,而是设计并开发了多个界面共用的图表组件。仪表板各界面的数据不同,若每个界面都重做图表,同类图表就会有多少界面就有多少份。我们把数据与显示方式分开,让组件放到任何界面都以同样的方式绘制。在系统建设项目中,我们自主策划,整理了组件的结构与用法。
把各界面重做的图表合而为一的通用组件
内部仪表板系统每个界面要显示的数据不同,每次都重做图表,同类图表就会有多少界面就有多少份。我们没有为单个界面专门制作,而是以多个仪表板界面都能直接取用的图表组件为目标。组件只有一个,要修改的地方也只有一处,并会一起反映到所有使用该图表的界面。

分别接收数据与显示方式的设计
可复用图表组件分别接收要绘制的数据和绘制方式。只替换数据,同一个组件就能绘制另一个界面的数字;只更换显示方式,同一份数据就能呈现为另一种图表。若为单个界面专门制作,两者就绑在一起,难以搬到其他界面使用。

在信息密集的业务界面中依然易读的图表
业务仪表板会在一个界面上密集摆放数字与图表。我们统一了组件的接口,让图表类型不同时仪表板数据也以同样的方式呈现。并权衡一个界面能容纳的信息量、易读性和界面响应速度,打磨了图表的表现。

在建设项目中自主发起的组件标准化
图表组件是在系统建设项目中,由内部自主策划推进的标准化工作。我们整理了组件的结构与用法,为之后其他界面和项目取用打下基础。这时积累的图表与可视化技术,延续到了下一项工作,即炼油企业的网页地图服务。

项目亮点
数据与显示方式分离的可复用图表组件
多个仪表板界面以同样方式绘制的图表
自主策划并整理的组件结构与用法
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



