From be7cf16eab7270013a624672df5901903e6685b9 Mon Sep 17 00:00:00 2001 From: Alexander Petcoglo Date: Thu, 16 Jan 2025 15:55:21 +0100 Subject: [PATCH] fix: dashboard ui tweaks --- .../public/images/no-chart-placeholder.svg | 19 --------------- packages/toolkit/package.json | 4 ++-- .../activity/ModelsTriggerCountsLineChart.tsx | 23 +++++++++---------- .../PipelineTriggerCountsLineChart.tsx | 23 +++++++++---------- 4 files changed, 24 insertions(+), 45 deletions(-) delete mode 100644 apps/console/public/images/no-chart-placeholder.svg diff --git a/apps/console/public/images/no-chart-placeholder.svg b/apps/console/public/images/no-chart-placeholder.svg deleted file mode 100644 index a857a90026..0000000000 --- a/apps/console/public/images/no-chart-placeholder.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index 4caacf0196..b70c9bd3ea 100644 --- a/packages/toolkit/package.json +++ b/packages/toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@instill-ai/toolkit", - "version": "0.115.3", + "version": "0.115.3-rc.16", "description": "Instill AI's frontend toolkit", "repository": "https://github.com/instill-ai/design-system.git", "bugs": "https://github.com/instill-ai/design-system/issues", @@ -17,7 +17,7 @@ "ts-type": "tsc --emitDeclarationOnly", "build": "tsup && pnpm ts-type", "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache", - "publish-rc": "pnpm build && pnpm publish --no-git-checks" + "publish-rc": "pnpm build && pnpm publish --no-git-checks --tag rc" }, "files": [ "dist" diff --git a/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx index a17be59102..12c9a0c5bb 100644 --- a/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx +++ b/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx @@ -53,6 +53,7 @@ export const ModelsTriggerCountsLineChart = ({ () => generateModelTriggerChartRecordData(models, selectedTimeOption.value), [models, selectedTimeOption.value], ); + const showGraph = models.length > 0; React.useEffect(() => { if (chartRef.current) { @@ -68,16 +69,6 @@ export const ModelsTriggerCountsLineChart = ({ top: 10, bottom: 50, }, - graphic: { - type: "image", - style: { - image: "/images/no-chart-placeholder.svg", - x: "45%", - y: "0%", - width: models.length === 0 ? 225 : 0, - height: models.length === 0 ? 225 : 0, - }, - }, animation: false, title: { show: models.length === 0, @@ -89,8 +80,8 @@ export const ModelsTriggerCountsLineChart = ({ fontStyle: "italic", }, text: isLoading ? "Loading..." : "No models have been triggered yet", - left: `${isLoading ? "49.5%" : "44.5%"}`, - bottom: 100, + left: `${isLoading ? "46%" : "37%"}`, + top: "47.5%", }, tooltip: { trigger: "item", @@ -120,6 +111,7 @@ export const ModelsTriggerCountsLineChart = ({ }, }, xAxis: { + show: showGraph, type: "category", data: xAxis, axisLabel: { @@ -131,6 +123,7 @@ export const ModelsTriggerCountsLineChart = ({ }, }, yAxis: { + show: showGraph, type: "value", minInterval: 1, axisLabel: { @@ -155,6 +148,12 @@ export const ModelsTriggerCountsLineChart = ({ }, }, ], + legend: { + show: false, + selected: { + "Model Runs": showGraph, + }, + }, }; myChart.setOption(option, true); diff --git a/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx index bc207b150d..eca95afa60 100644 --- a/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx +++ b/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx @@ -55,6 +55,7 @@ export const PipelineTriggerCountsLineChart = ({ const xAxisData = xAxis; const seriesData = yAxis; + const showGraph = pipelines.length > 0; React.useEffect(() => { if (chartRef.current) { @@ -70,16 +71,6 @@ export const PipelineTriggerCountsLineChart = ({ top: 10, bottom: 50, }, - graphic: { - type: "image", - style: { - image: "/images/no-chart-placeholder.svg", - x: "45%", - y: "0%", - width: pipelines.length === 0 ? 225 : 0, - height: pipelines.length === 0 ? 225 : 0, - }, - }, animation: false, title: { show: pipelines.length === 0, @@ -93,8 +84,8 @@ export const PipelineTriggerCountsLineChart = ({ text: isLoading ? "Loading..." : "No pipelines have been triggered yet", - left: `${isLoading ? "49.5%" : "44.5%"}`, - bottom: 100, + left: `${isLoading ? "46%" : "36%"}`, + top: "47.5%", }, tooltip: { trigger: "item", @@ -124,6 +115,7 @@ export const PipelineTriggerCountsLineChart = ({ }, }, xAxis: { + show: showGraph, type: "category", data: xAxisData, axisTick: { @@ -138,6 +130,7 @@ export const PipelineTriggerCountsLineChart = ({ }, }, yAxis: { + show: showGraph, type: "value", minInterval: 1, axisTick: { @@ -160,6 +153,12 @@ export const PipelineTriggerCountsLineChart = ({ borderWidth: 0, }, })), + legend: { + show: false, + selected: { + [`${seriesData?.[0]?.name}`]: showGraph, + }, + }, }; myChart.setOption(option, true);