社内ダッシュボード用チャート部品
石油精製会社の社内ダッシュボードシステムに載せるチャートを画面ごとに別々に作らず、複数の画面が共に使うチャート部品として設計・開発しました。ダッシュボードは画面ごとにデータが異なり、チャートを画面ごとに新しく作ると同じ種類のチャートが画面の数だけ生まれます。データと表示方式を分け、どの画面に載せても同じ方式で描かれるようにしました。システム構築プロジェクトの中で自ら企画し、部品の構造と使い方まで整理しました。
画面ごとに作り直していたチャートを一つにまとめた共通部品
社内ダッシュボードシステムは画面ごとに見せるデータが異なり、そのたびにチャートを新しく作ると、同じ種類のチャートが画面の数だけ生まれます。一つの画面専用に作る代わりに、複数のダッシュボード画面に共通で載せて使えるチャート部品を目標にしました。部品が一つなので直す場所も一つで、そのチャートを使う画面にまとめて反映されます。

データと表示方式を別々に受け取る設計
再利用チャート部品は、描くデータと描き方を別々に受け取ります。データだけを差し替えれば同じ部品が別の画面の数字を描き、表示方式だけを変えれば同じデータを別の形のチャートで見せます。一つの画面専用に作ると、この二つが一体になり、別の画面に移して使いにくくなります。

情報が詰まった業務画面でも読めるチャート
業務用ダッシュボードは、一つの画面に数字とチャートがぎっしり並びます。チャートの種類が違ってもダッシュボードのデータが同じ方式で表現されるよう、部品のインターフェースをそろえました。一画面に載せる情報の量、読みやすさ、画面の反応の速さを考え合わせてチャートの表現を整えました。

構築プロジェクトの中で自ら始めた部品の標準化
チャート部品は、システム構築プロジェクトの中で社内から自ら企画して進めた標準化の作業でした。部品の構造と使い方を整理しておき、その後ほかの画面やプロジェクトでも取り込んで使える土台を作りました。ここで積んだチャート・可視化の技術は、次の仕事である石油精製会社のWeb地図サービスへとつながりました。

この仕事のポイント
データと表示方式を分けた再利用チャート部品
複数のダッシュボード画面が同じ方式で描くチャート
自ら企画して整理した部品の構造と使い方
インサイト
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…



