fix: dashboard ui tweaks

instill-ai · Jan 16, 2025 · be7cf16 · be7cf16
1 parent f55b650
commit be7cf16
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 45 deletions.
diff --git a/apps/console/public/images/no-chart-placeholder.svg b/apps/console/public/images/no-chart-placeholder.svg
diff --git 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
@@ -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
@@ -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);