From a8f642887dfdf8ade04277abafc3c008aa875fdf Mon Sep 17 00:00:00 2001 From: Jagger <634750802@qq.com> Date: Fri, 23 Aug 2024 11:23:44 +0800 Subject: [PATCH] style(widget): update default widget logo --- .../app/site_settings/default_settings.yml | 4 +-- frontend/app/public/tidbai-widget.svg | 19 ++++++++++++++ .../components/charts/IndexProgressChart.tsx | 26 ++++++++++++------- 3 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 frontend/app/public/tidbai-widget.svg diff --git a/backend/app/site_settings/default_settings.yml b/backend/app/site_settings/default_settings.yml index 7cd10798..e37240d4 100644 --- a/backend/app/site_settings/default_settings.yml +++ b/backend/app/site_settings/default_settings.yml @@ -79,12 +79,12 @@ custom_js: description: "The button label on the custom_js." client: true custom_js_button_img_src: - default: "https://tidb.ai/tidb-ai.svg" + default: "https://tidb.ai/tidb-ai-widget.svg" data_type: str description: "The button image on the custom_js." client: true custom_js_logo_src: - default: "https://tidb.ai/tidb-ai-light.svg" + default: "https://tidb.ai/tidb-ai-widget.svg" data_type: str description: "The logo on the custom_js." client: true diff --git a/frontend/app/public/tidbai-widget.svg b/frontend/app/public/tidbai-widget.svg new file mode 100644 index 00000000..33678add --- /dev/null +++ b/frontend/app/public/tidbai-widget.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app/src/components/charts/IndexProgressChart.tsx b/frontend/app/src/components/charts/IndexProgressChart.tsx index cb1c2a3d..8d6ab1f9 100644 --- a/frontend/app/src/components/charts/IndexProgressChart.tsx +++ b/frontend/app/src/components/charts/IndexProgressChart.tsx @@ -8,29 +8,35 @@ import * as React from 'react'; import { useMemo } from 'react'; import { Label, Pie, PieChart } from 'recharts'; +const color_error = '#ef4444'; +const color_succeed = '#22c55e'; +const color_in_progress = '#3b82f6'; +const color_pending = '#71717a'; +const color_blank = '#71717a80'; + const chartConfig = { total: { label: 'Total', }, completed: { label: 'Completed', - color: 'hsl(var(--chart-1))', + color: color_succeed, }, pending: { label: 'Pending', - color: 'hsl(var(--chart-2))', + color: color_pending, }, running: { label: 'Running', - color: 'hsl(var(--chart-3))', + color: color_in_progress, }, failed: { label: 'Failed', - color: 'hsl(var(--chart-4))', + color: color_error, }, not_started: { label: 'Not Started', - color: 'hsl(var(--chart-5))', + color: color_blank, }, } satisfies ChartConfig; @@ -42,11 +48,11 @@ export function IndexProgressChart ({ title, description, data }: { title: strin const chartData = useMemo(() => { return [ - { count: data.completed, state: 'Completed', fill: 'hsl(var(--chart-5))' }, - { count: data.failed, state: 'Failed', fill: 'hsl(var(--chart-4))' }, - { count: data.pending, state: 'Pending', fill: 'hsl(var(--chart-3))' }, - { count: data.running, state: 'Running', fill: 'hsl(var(--chart-2))' }, - { count: data.not_started, state: 'Not started', fill: 'hsl(var(--chart-1))' }, + { count: data.completed, state: 'Completed', fill: color_succeed }, + { count: data.failed, state: 'Failed', fill: color_error }, + { count: data.pending, state: 'Pending', fill: color_pending }, + { count: data.running, state: 'Running', fill: color_in_progress }, + { count: data.not_started, state: 'Not started', fill: color_blank }, ]; }, []);