feat: グラフ共通コンポーネントを追加 #217 #255
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…oved visualization on test page
…rt visualization on test page
…guration on test page
…dant prop from filter.
…ies item styling.
…nd update GraphContainer to use children for flexibility
…ponents and update GraphStatusFilter to remove unused prop
… improved readability
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…le breakpoint handling and adjusting layouts in GraphContainer, GraphSizeLegend, and GraphStatusFilter
…roved visual consistency
kur00
reviewed
Dec 4, 2025
Comment on lines
+32
to
+39
| // クライアントサイドでのみecharts-for-reactをロード（SSR対策） | ||
| useEffect(() => { | ||
| const loadECharts = async () => { | ||
| const mod = await import("echarts-for-react"); | ||
| setReactECharts(() => mod.default); | ||
| }; | ||
| void loadECharts(); | ||
| }, []); |
Collaborator
There was a problem hiding this comment.
期間選択などの動的なデータローディングの関係でフロントでやっている感じですか？
Comment on lines
+8
to
+23
| /** ラベルテキスト（例: "インプレッション"） */ | ||
| label: string; | ||
| /** 最小値 */ | ||
| min: number; | ||
| /** 最大値 */ | ||
| max: number; | ||
| /** 表示するステップ数（デフォルト: 5） */ | ||
| steps?: number; | ||
| /** 値のフォーマット関数 */ | ||
| formatValue?: (value: number) => string; | ||
| /** バブルの最小サイズ（px）（デフォルト: 8） */ | ||
| minBubbleSize?: number; | ||
| /** バブルの最大サイズ（px）（デフォルト: 32） */ | ||
| maxBubbleSize?: number; | ||
| /** バブルの色（デフォルト: "#666"） */ | ||
| bubbleColor?: string; |
Collaborator
There was a problem hiding this comment.
ここら辺、コード見たら大体わかるやつはコメント無しでいいっすよ！
デフォルト情報とかも次のコード見たらわかるので！
Collaborator
There was a problem hiding this comment.
逆にstepsとかどういうステップなのかあると良いかもっすね。折れ線以外にも当てはまるやつですよね？色々、考えちゃいそうで
Comment on lines
+1
to
+31
| /** | ||
| * ステータスカラー定数 | ||
| * グラフやフィルターコンポーネントで使用 | ||
| */ | ||
| export const STATUS_COLORS = { | ||
| published: "#42a5f5", | ||
| evaluating: "#ab47bc", | ||
| unpublished: "#ec407a", | ||
| } as const; | ||
|
|
||
| export type StatusColorKey = keyof typeof STATUS_COLORS; | ||
|
|
||
| /** | ||
| * グラフスタイル定数 | ||
| * EChartsはCanvas/SVGベースのためCSS変数が使えないので、ここで定義 | ||
| */ | ||
| export const GRAPH_STYLES = { | ||
| /** テキスト色（軸ラベル、凡例など） */ | ||
| textColor: "#999999", | ||
| /** 軸線の色 */ | ||
| axisColor: "#666666", | ||
| /** グリッド線の色 */ | ||
| gridColor: "#333333", | ||
| /** ボーダー色 */ | ||
| borderColor: "#555555", | ||
| /** ツールチップ背景色 */ | ||
| tooltipBgColor: "rgba(30, 30, 30, 0.9)", | ||
| /** ツールチップボーダー色 */ | ||
| tooltipBorderColor: "#444444", | ||
| } as const; | ||
|
|
Collaborator
There was a problem hiding this comment.
ここら辺、良いっすね！
constantsディレクトリに収めちゃっても良いなとも思いました！
そしたら、コンポーネントとその他で分離ができるかと
Collaborator
Author
There was a problem hiding this comment.
そうなんですよね！
実は次の #218 の作業をやってる最中にそれに気が付きましたorz
なので、一旦マージしてからリファクタリングするしかないかなぁと考えております…！
Comment on lines
+27
to
+34
| /** 現在選択中のステータス */ | ||
| value: StatusValue; | ||
| /** ステータス変更時のコールバック */ | ||
| onChange: (value: StatusValue) => void; | ||
| /** カスタムステータス設定 */ | ||
| statuses?: StatusConfig[]; | ||
| /** ラベルテキスト（デフォルト: "ステータス"） */ | ||
| label?: string; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
概要
グラフ表示で使用する共通コンポーネントを追加しました。
関連イシュー
追加したコンポーネント
GraphContainer- グラフをラップするレイアウトコンテナEChartsGraph- EChartsグラフ描画コンポーネント（SSR対策済み）GraphStatusFilter- ステータスフィルター（全て/公開中/評価中/非公開）GraphSizeLegend- バブルサイズの凡例（インプレッション等）追加したライブラリ
echarts: 6.0.0echarts-for-react: 3.0.2定数
STATUS_COLORS- ステータス別の色定義GRAPH_STYLES- ECharts用のスタイル定数その他
app.cssにグラフボーダー用のCSS変数を追加test.tsx,test2.tsx）を追加実装結果