From 36fa1c976656261381e5e2c53e39ca4907e0bce1 Mon Sep 17 00:00:00 2001 From: Wojciech Bandzerewicz <57405495+thewbuk@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:01:13 +0000 Subject: [PATCH] puch recharts --- packages/toolkit/package.json | 2 +- .../activity/ModelsTriggerCountsLineChart.tsx | 296 +++++++--------- .../PipelineTriggerCountsLineChart.tsx | 316 ++++++++---------- 3 files changed, 258 insertions(+), 356 deletions(-) diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index e072133a1..8455dd7b8 100644 --- a/packages/toolkit/package.json +++ b/packages/toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@instill-ai/toolkit", - "version": "0.110.0-rc.93", + "version": "0.110.0-rc.103", "description": "Instill AI's frontend toolkit", "repository": "https://github.com/instill-ai/design-system.git", "bugs": "https://github.com/instill-ai/design-system/issues", diff --git a/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx index 6f3f33e06..2b22e6787 100644 --- a/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx +++ b/packages/toolkit/src/view/dashboard/activity/ModelsTriggerCountsLineChart.tsx @@ -1,18 +1,23 @@ "use client"; import * as React from "react"; -import * as echarts from "echarts"; +import { + LineChart, + Line, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, +} from "recharts"; +import { Icons, SelectOption, Tooltip as InstillTooltip } from "@instill-ai/design-system"; +import { generateModelTriggerChartRecordData } from "../../../lib"; +import { ModelTriggersSummary } from "./ModelTriggersSummary"; import { ModelTriggersStatusSummary, ModelTriggerTableRecord, Nullable, } from "instill-sdk"; -import { Icons, SelectOption, Tooltip } from "@instill-ai/design-system"; - -import { generateModelTriggerChartRecordData } from "../../../lib"; -import { ModelTriggersSummary } from "./ModelTriggersSummary"; - type ModelsTriggerCountsLineChartProps = { models: ModelTriggerTableRecord[]; isLoading: boolean; @@ -20,159 +25,23 @@ type ModelsTriggerCountsLineChartProps = { modelTriggersSummary: Nullable; }; -/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ -function selectGraph(params: any, myChart: echarts.ECharts): void { - myChart.dispatchAction({ - type: "legendSelect", - // legend name - name: params.name as string, - }); -} - -/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ -function unselectGraph(params: any, myChart: echarts.ECharts): void { - for (const legend in params.selected) { - if (legend !== params.name) { - myChart.dispatchAction({ - type: "legendUnSelect", - // legend name - name: legend, - }); - } - } -} - export const ModelsTriggerCountsLineChart = ({ isLoading, models, selectedTimeOption, modelTriggersSummary, }: ModelsTriggerCountsLineChartProps) => { - const chartRef = React.useRef(null); const { xAxis, yAxis } = React.useMemo( () => generateModelTriggerChartRecordData(models, selectedTimeOption.value), - [models, selectedTimeOption.value], + [models, selectedTimeOption.value] ); - React.useEffect(() => { - if (chartRef.current) { - // Dispose the previous chart instance - echarts.dispose(chartRef.current); // eslint-disable-line - const myChart = echarts.init(chartRef.current, null, { - renderer: "svg", - }); // eslint-disable-line - const option = { - grid: { - left: "50px", - right: "50px", - 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, - textStyle: { - color: "#1D2433A6", - fontSize: 14, - fontWeight: 500, - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "italic", - }, - text: isLoading ? "Loading..." : "No models have been triggered yet", - left: `${isLoading ? "49.5%" : "44.5%"}`, - bottom: 100, - }, - tooltip: { - trigger: "item", - tiggerOn: "click", - backgroundColor: "white", - borderColor: "transparent", - textStyle: { - color: "var(--semantic-fg-primary)", - }, - /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - formatter: function (params: any) { - const triggerTime = params.name; - const computeTimeDuration = params.value; - return ` -
-
-
${triggerTime}
-
- - All model triggers  - - ${computeTimeDuration} -
-
-
- `; - }, - }, - xAxis: { - type: "category", - data: xAxis, - axisLabel: { - fontSize: "10px", - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "normal", - fontWeight: "500", - color: "#6B7280", - }, - }, - yAxis: { - type: "value", - minInterval: 1, - axisLabel: { - fontSize: "10px", - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "normal", - fontWeight: "500", - color: "#6B7280", - }, - }, - series: [ - { - name: "Model Triggers", - type: "line", - smooth: true, - data: yAxis, - symbol: "circle", - symbolSize: 8, - itemStyle: { - borderColor: "white", - borderWidth: 2, - }, - }, - ], - }; - - myChart.setOption(option, true); - - /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - myChart.on("legendselectchanged", function (params: any) { - const selected = Object.values(params.selected); - if (selected.filter((select) => !select).length === selected.length) { - myChart.dispatchAction({ - type: "legendAllSelect", - }); - } else { - selectGraph(params, myChart); - unselectGraph(params, myChart); - } - }); - } - }, [isLoading, xAxis, yAxis, models]); + const chartData = React.useMemo(() => { + return xAxis.map((date, index) => ({ + name: date, + value: yAxis[index] || 0, + })); + }, [xAxis, yAxis]); return (
@@ -182,18 +51,18 @@ export const ModelsTriggerCountsLineChart = ({
Number of model triggers
- - - + + +
- - - + +
@@ -207,40 +76,117 @@ export const ModelsTriggerCountsLineChart = ({
- - - - - + + + + - {/* Status */} +
-
+ +
+ {isLoading ? ( +
+ Loading... +
+ ) : models.length === 0 ? ( +
+ No data +

+ No models have been triggered yet +

+
+ ) : ( + + + + + { + return [ +
+
+ {name} +
+
+ + All model triggers  + + + {value} + +
+
+ ]; + }} + /> + + + + )} +
); -}; +}; \ No newline at end of file diff --git a/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx index d3e8f8ec3..17e794633 100644 --- a/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx +++ b/packages/toolkit/src/view/dashboard/activity/PipelineTriggerCountsLineChart.tsx @@ -1,16 +1,21 @@ "use client"; import * as React from "react"; -import * as echarts from "echarts"; -import { Nullable, PipelinesChart } from "instill-sdk"; - -import { Icons, SelectOption, Tooltip } from "@instill-ai/design-system"; - +import { + LineChart, + Line, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, +} from "recharts"; +import { Icons, SelectOption, Tooltip as InstillTooltip } from "@instill-ai/design-system"; import { generatePipelineChartData, PipelineTriggersStatusSummary, } from "../../../lib"; import { PipelineTriggersSummary } from "./PipelineTriggersSummary"; +import { Nullable, PipelinesChart } from "instill-sdk"; type PipelineTriggerCountsLineChartProps = { pipelines: PipelinesChart[]; @@ -19,165 +24,38 @@ type PipelineTriggerCountsLineChartProps = { pipelineTriggersSummary: Nullable; }; -/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ -function selectGraph(params: any, myChart: echarts.ECharts): void { - myChart.dispatchAction({ - type: "legendSelect", - // legend name - name: params.name as string, - }); -} - -/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ -function unselectGraph(params: any, myChart: echarts.ECharts): void { - for (const legend in params.selected) { - if (legend !== params.name) { - myChart.dispatchAction({ - type: "legendUnSelect", - // legend name - name: legend, - }); - } - } -} - export const PipelineTriggerCountsLineChart = ({ isLoading, pipelines, selectedTimeOption, pipelineTriggersSummary, }: PipelineTriggerCountsLineChartProps) => { - const chartRef = React.useRef(null); const { xAxis, yAxis } = generatePipelineChartData( pipelines, - selectedTimeOption.value, + selectedTimeOption.value ); - const xAxisData = xAxis; - const seriesData = yAxis; - - React.useEffect(() => { - if (chartRef.current) { - // Dispose the previous chart instance - echarts.dispose(chartRef.current); // eslint-disable-line - const myChart = echarts.init(chartRef.current, null, { - renderer: "svg", - }); // eslint-disable-line - const option = { - grid: { - left: "50px", - right: "50px", - 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, - textStyle: { - color: "#1D2433A6", - fontSize: 14, - fontWeight: 500, - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "italic", - }, - text: isLoading - ? "Loading..." - : "No pipelines have been triggered yet", - left: `${isLoading ? "49.5%" : "44.5%"}`, - bottom: 100, - }, - tooltip: { - trigger: "item", - tiggerOn: "click", - backgroundColor: "white", - borderColor: "transparent", - textStyle: { - color: "var(--semantic-fg-primary)", - }, - /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - formatter: function (params: any) { - const triggerTime = params.name; - const computeTimeDuration = params.value; - return ` -
-
-
${triggerTime}
-
- - All pipeline triggers  - - ${computeTimeDuration} -
-
-
- `; - }, - }, - xAxis: { - type: "category", - data: xAxisData, - axisTick: { - length: 0, - }, - axisLabel: { - fontSize: "10px", - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "normal", - fontWeight: "500", - color: "#6B7280", - }, - }, - yAxis: { - type: "value", - minInterval: 1, - axisTick: { - length: 0, - }, - axisLabel: { - fontSize: "10px", - fontFamily: "var(--font-ibm-plex-sans)", - fontStyle: "normal", - fontWeight: "500", - color: "#6B7280", - }, - }, - series: seriesData.map((series) => ({ - ...series, - symbol: "circle", - symbolSize: 8, - itemStyle: { - borderColor: "white", - borderWidth: 2, - }, - })), - }; - - myChart.setOption(option, true); - - /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ - myChart.on("legendselectchanged", function (params: any) { - const selected = Object.values(params.selected); - if (selected.filter((select) => !select).length === selected.length) { - myChart.dispatchAction({ - type: "legendAllSelect", - }); - } else { - selectGraph(params, myChart); - unselectGraph(params, myChart); + const chartData = React.useMemo(() => { + return xAxis.map((date, dateIndex) => { + const dataPoint: Record = { name: date }; + yAxis.forEach((series, seriesIndex) => { + const pipeline = pipelines[seriesIndex]; + if (pipeline && series && typeof series === 'object' && 'data' in series) { + dataPoint[pipeline.pipelineId] = (series.data as number[])[dateIndex] ?? 0; } }); - } - }, [isLoading, xAxisData, seriesData, pipelines]); + return dataPoint; + }); + }, [xAxis, yAxis, pipelines]); + + const colors = React.useMemo(() => { + return yAxis.map(series => { + if (series && typeof series === 'object' && 'itemStyle' in series) { + return (series.itemStyle as { color?: string })?.color || '#3B82F6'; + } + return '#3B82F6'; + }); + }, [yAxis]); return (
@@ -187,18 +65,18 @@ export const PipelineTriggerCountsLineChart = ({
Number of pipeline triggers
- - - + + +
- - - + +
@@ -212,42 +90,120 @@ export const PipelineTriggerCountsLineChart = ({
- - - - - + + + + - {/* Status */} +
-
+ +
+ {isLoading ? ( +
+ Loading... +
+ ) : pipelines.length === 0 ? ( +
+ No data +

+ No pipelines have been triggered yet +

+
+ ) : ( + + + + + { + return [ +
+
+ {name} +
+
+ + All pipeline triggers  + + + {value} + +
+
+ ]; + }} + /> + {pipelines.map((pipeline, index) => ( + + ))} + + + )} +
); -}; +}; \ No newline at end of file