refactor: table legend support click to active

n9e · Aug 11, 2022 · 7e0f19f · 7e0f19f
1 parent 447c13b
commit 7e0f19f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/src/components/PromGraphCpt/Graph.tsx b/src/components/PromGraphCpt/Graph.tsx
@@ -114,7 +114,9 @@ export default function Graph(props: IProps) {
         .then((res) => {
           const series = _.map(res?.result, (item) => {
             return {
+              id: _.uniqueId('series_'),
               name: getSerieName(item.metric),
+              metric: item.metric,
               data: item.values,
             };
           });

diff --git a/src/pages/dashboard/Renderer/Renderer/Timeseries/index.tsx b/src/pages/dashboard/Renderer/Renderer/Timeseries/index.tsx
@@ -296,6 +296,24 @@ export default function index(props: IProps) {
                 emptyText: '暂无数据',
               }}
               pagination={false}
+              rowClassName={(record) => {
+                return record.disabled ? 'disabled' : '';
+              }}
+              onRow={(record) => {
+                return {
+                  onClick: () => {
+                    setActiveLegend(activeLegend !== record.id ? record.id : '');
+                    setSeriesData(
+                      _.map(seriesData, (subItem) => {
+                        return {
+                          ...subItem,
+                          visible: activeLegend === record.id ? true : record.id === subItem.id,
+                        };
+                      }),
+                    );
+                  },
+                };
+              }}
             />
           )}
           {displayMode === 'list' && !_.isEmpty(legendData) && (

diff --git a/src/pages/dashboard/Renderer/Renderer/Timeseries/style.less b/src/pages/dashboard/Renderer/Renderer/Timeseries/style.less
@@ -11,6 +11,11 @@
     line-height: unset !important;
     padding: 0 !important;
   }
+  .ant-table-row.disabled {
+    .ant-table-cell {
+      color: #24292e80
+    }
+  }
 }
 .renderer-timeseries-legend-container {
   position: relative;