diff --git a/frontend/config/selection.ts b/frontend/config/selection.ts index 98f1748..bd09807 100644 --- a/frontend/config/selection.ts +++ b/frontend/config/selection.ts @@ -1,24 +1,35 @@ +const categoricalPalette = [ + "#fba91e", + "#6ea56c", + "#3ac6e1", + "#feda2f", + "#f15f47", + "#244470", + "#9c80bb", + "#f595a6", +]; + const priorities = [ - { uid: "critical", color: "#d00002", chartColor: "#d00002" }, - { uid: "high", color: "#ee6b4e", chartColor: "#ee6b4e" }, - { uid: "medium", color: "#fccb69", chartColor: "#fccb69" }, - { uid: "low", color: "#0b62e8", chartColor: "#0b62e8" }, + { uid: "critical", color: "#bb3e03", chartColor: "#bb3e03" }, + { uid: "high", color: "#ca6702", chartColor: "#ca6702" }, + { uid: "medium", color: "#ee9b00", chartColor: "#ee9b00" }, + { uid: "low", color: "#94d2bd", chartColor: "#94d2bd" }, ]; const testTypes = [ - { uid: "other", chartColor: "#688ae8" }, - { uid: "security", chartColor: "#c33d69" }, - { uid: "performance", chartColor: "#2ea597" }, - { uid: "accessibility", chartColor: "#8456ce" }, - { uid: "functional", chartColor: "#e07941" }, - { uid: "acceptance", chartColor: "#3759ce" }, - { uid: "usability", chartColor: "#962249" }, - { uid: "smokeSanity", chartColor: "#096f64" }, - { uid: "compatibility", chartColor: "#6237a7" }, - { uid: "destructive", chartColor: "#a84401" }, - { uid: "regression", chartColor: "#273ea5" }, - { uid: "automated", chartColor: "#780d35" }, - { uid: "manual", chartColor: "#03524a" }, + { uid: "other", chartColor: categoricalPalette[0] }, + { uid: "security", chartColor: categoricalPalette[1] }, + { uid: "performance", chartColor: categoricalPalette[2] }, + { uid: "accessibility", chartColor: categoricalPalette[3] }, + { uid: "functional", chartColor: categoricalPalette[4] }, + { uid: "acceptance", chartColor: categoricalPalette[5] }, + { uid: "usability", chartColor: categoricalPalette[6] }, + { uid: "smokeSanity", chartColor: categoricalPalette[7] }, + { uid: "compatibility", chartColor: categoricalPalette[0] }, + { uid: "destructive", chartColor: categoricalPalette[1] }, + { uid: "regression", chartColor: categoricalPalette[2] }, + { uid: "automated", chartColor: categoricalPalette[3] }, + { uid: "manual", chartColor: categoricalPalette[4] }, ]; const automationStatus = [ @@ -43,12 +54,12 @@ const testRunCaseStatus = [ { uid: "untested", color: "primary", - chartColor: "#e5e7eb", + chartColor: "#3ac6e1", }, - { uid: "passed", color: "success", chartColor: "#059669" }, - { uid: "failed", color: "danger", chartColor: "#f87171" }, - { uid: "retest", color: "warning", chartColor: "#fbbf24" }, - { uid: "skipped", color: "primary", chartColor: "#4b5563" }, + { uid: "passed", color: "success", chartColor: "#6ea56c" }, + { uid: "failed", color: "danger", chartColor: "#f15f47" }, + { uid: "retest", color: "warning", chartColor: "#fba91e" }, + { uid: "skipped", color: "primary", chartColor: "#805aab" }, ]; export { diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 24b9969..8dd4005 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -37,7 +37,14 @@ "test_cases": "Test Cases", "test_runs": "Test Runs", "progress": "Progress", - "test_types": "Test types", + "untested": "Untested", + "passed": "Passed", + "failed": "Failed", + "retest": "Retest", + "skipped": "Skipped", + "test_classification": "Test Classification", + "by_type": "By test type", + "by_priority": "By test priority", "other": "Other", "security": "Security", "performance": "Performance", @@ -51,7 +58,6 @@ "regression": "Regression", "automated": "Automated", "manual": "Manual", - "priority": "Priority", "critical": "Critical", "high": "High", "medium": "Medium", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index 9b12b3b..70fd64b 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -37,7 +37,14 @@ "test_cases": "テストケース", "test_runs": "テスト実行", "progress": "進捗", - "test_types": "テスト種別", + "untested": "未実行", + "passed": "成功", + "failed": "失敗", + "retest": "再テスト", + "skipped": "スキップ", + "test_classification": "テスト分類", + "by_type": "タイプ別", + "by_priority": "優先度別", "other": "その他", "security": "セキュリティ", "performance": "パフォーマンス", @@ -51,7 +58,6 @@ "regression": "回帰", "automated": "自動", "manual": "手動", - "priority": "優先度", "critical": "致", "high": "高", "medium": "中", diff --git a/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx b/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx index 2919399..9bea200 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx @@ -2,6 +2,7 @@ import React from "react"; import { useState, useEffect } from "react"; import dynamic from "next/dynamic"; import { ProgressSeriesType } from "@/types/run"; +import { testRunCaseStatus } from "@/config/selection"; const Chart = dynamic(() => import("react-apexcharts"), { ssr: false }); type Props = { @@ -36,6 +37,9 @@ export default function TestProgressBarChart({ legend: { position: "right", }, + colors: testRunCaseStatus.map((itr) => { + return itr.chartColor; + }), xaxis: { type: "datetime", categories: progressCategories, diff --git a/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts b/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts index ada542d..50e0fb2 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts +++ b/frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts @@ -1,5 +1,6 @@ import { ProjectType } from "@/types/project"; import { testTypes, priorities, testRunCaseStatus } from "@/config/selection"; +import { HomeMessages } from "./page"; // aggregate folder, case, run mum function aggregateBasicInfo(project: ProjectType) { @@ -49,9 +50,9 @@ function aggregateTestPriority(project: ProjectType) { return result; } -function aggregateProgress(project: ProjectType) { +function aggregateProgress(project: ProjectType, messages: HomeMessages) { let series = testRunCaseStatus.map((status) => { - return { name: status.uid, data: [] }; + return { name: messages[status.uid], data: [] }; }); let categories = []; diff --git a/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx b/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx index af14d26..1dfac1a 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/home/home.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useEffect } from "react"; import { Divider } from "@nextui-org/react"; -import { title } from "@/components/primitives"; +import { title, subtitle } from "@/components/primitives"; import { Card, CardBody, Chip } from "@nextui-org/react"; import { Folder, Clipboard, FlaskConical } from "lucide-react"; import { CaseTypeCountType, CasePriorityCountType } from "@/types/case"; @@ -66,7 +66,6 @@ export function Home({ projectId, messages }: Props) { try { const data = await fetchProject(url); setProject(data); - console.log(data); } catch (error: any) { console.error("Error in effect:", error.message); } @@ -88,7 +87,7 @@ export function Home({ projectId, messages }: Props) { const priorityRet = aggregateTestPriority(project); setPriorityCounts([...priorityRet]); - const { series, categories } = aggregateProgress(project); + const { series, categories } = aggregateProgress(project, messages); setProgressSeries([...series]); setProgressCategories([...categories]); } @@ -123,27 +122,30 @@ export function Home({ projectId, messages }: Props) { - - {project.detail} - + {project.detail && ( + + {project.detail} + + )} - -
-

{messages.progress}

+ +

{messages.progress}

+
- + +

{messages.testClassification}

-

{messages.testTypes}

+

{messages.byType}

-

{messages.priority}

+

{messages.byPriority}