Merge pull request #892 from lyp000119/changetheme

feat: Add a download button to the analysis chart page
running-elephant · Feb 28, 2022 · b6a6700 · b6a6700
2 parents c467e2c + 35a9683
commit b6a6700
Show file tree

Hide file tree

Showing 35 changed files with 580 additions and 195 deletions.
diff --git a/frontend/src/app/assets/fonts/iconfont.css b/frontend/src/app/assets/fonts/iconfont.css
@@ -1,163 +1,176 @@
 @font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1639456509648') format('woff2'),
-    url('iconfont.woff?t=1639456509648') format('woff'),
-    url('iconfont.ttf?t=1639456509648') format('truetype');
+  font-family: "iconfont"; /* Project id 2869064 */
+  src: url('iconfont.woff2?t=1645528895434') format('woff2'),
+       url('iconfont.woff?t=1645528895434') format('woff'),
+       url('iconfont.ttf?t=1645528895434') format('truetype');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-size: 20px;
   line-height: 20px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-CombinedShape:before {
+  content: "\e741";
+}
+
+.icon-kanban:before {
+  content: "\e806";
+}
+
+.icon-gitee:before {
+  content: "\e611";
+}
+
 .icon-rich-text:before {
-  content: '\e7a4';
+  content: "\e7a4";
 }
 
 .icon-graph-circular:before {
-  content: '\e7d0';
+  content: "\e7d0";
 }
 
 .icon-graph:before {
-  content: '\e6a8';
+  content: "\e6a8";
 }
 
 .icon-waterfall:before {
-  content: '\e617';
+  content: "\e617";
 }
 
 .icon-treemap:before {
-  content: '\e616';
+  content: "\e616";
 }
 
 .icon-sankey:before {
-  content: '\e618';
+  content: "\e618";
 }
 
 .icon-parallel:before {
-  content: '\e613';
+  content: "\e613";
 }
 
 .icon-graph-force:before {
-  content: '\e614';
+  content: "\e614";
 }
 
 .icon-radar:before {
-  content: '\e615';
+  content: "\e615";
 }
 
 .icon-gauge:before {
-  content: '\e607';
+  content: "\e607";
 }
 
 .icon-chart:before {
-  content: '\e635';
+  content: "\e635";
 }
 
 .icon-area-chart:before {
-  content: '\e654';
+  content: "\e654";
 }
 
 .icon-areachart:before {
-  content: '\ebc7';
+  content: "\ebc7";
 }
 
 .icon-fsux_tubiao_ditu:before {
-  content: '\e610';
+  content: "\e610";
 }
 
 .icon-ditu:before {
-  content: '\e72e';
+  content: "\e72e";
 }
 
 .icon-fsux_tubiao_ciyun:before {
-  content: '\e60f';
+  content: "\e60f";
 }
 
 .icon-fsux_tubiao_shuangzhoutu:before {
-  content: '\e60d';
+  content: "\e60d";
 }
 
 .icon-fsux_tubiao_loudoutu:before {
-  content: '\e60e';
+  content: "\e60e";
 }
 
 .icon-fsux_tubiao_bingtu:before {
-  content: '\e60a';
+  content: "\e60a";
 }
 
 .icon-fsux_tubiao_bingtu1:before {
-  content: '\e60b';
+  content: "\e60b";
 }
 
 .icon-fsux_tubiao_nandingmeiguitu:before {
-  content: '\e60c';
+  content: "\e60c";
 }
 
 .icon-fsux_zhexiantu:before {
-  content: '\e608';
+  content: "\e608";
 }
 
 .icon-sandiantu:before {
-  content: '\e7a0';
+  content: "\e7a0";
 }
 
 .icon-fsux_tubiao_zhuzhuangtu:before {
-  content: '\e601';
+  content: "\e601";
 }
 
 .icon-fsux_tubiao_duijizhuzhuangtu:before {
-  content: '\e602';
+  content: "\e602";
 }
 
 .icon-fsux_tubiao_duijizhuzhuangtu1:before {
-  content: '\e603';
+  content: "\e603";
 }
 
 .icon-fsux_tubiao_zhuzhuangtu1:before {
-  content: '\e604';
+  content: "\e604";
 }
 
 .icon-fsux_tubiao_baifenbiduijizhuzhuangtu:before {
-  content: '\e605';
+  content: "\e605";
 }
 
 .icon-fsux_tubiao_baifenbiduijitiaoxingtu:before {
-  content: '\e606';
+  content: "\e606";
 }
 
 .icon-fenzubiao:before {
-  content: '\e799';
+  content: "\e799";
 }
 
 .icon-mingxibiao:before {
-  content: '\e79a';
+  content: "\e79a";
 }
 
 .icon-fanpaiqi:before {
-  content: '\e7a2';
+  content: "\e7a2";
 }
 
 .icon-fasongyoujian:before {
-  content: '\e600';
+  content: "\e600";
 }
 
 .icon-shujukupeizhi:before {
-  content: '\e65f';
+  content: "\e65f";
 }
 
 .icon-24gf-table:before {
-  content: '\eb12';
+  content: "\eb12";
 }
 
 .icon-xietongzhihuidaping:before {
-  content: '\e631';
+  content: "\e631";
 }
 
 .icon-users1:before {
-  content: '\e92e';
+  content: "\e92e";
 }
+
diff --git a/frontend/src/app/assets/fonts/iconfont.ttf b/frontend/src/app/assets/fonts/iconfont.ttf
diff --git a/frontend/src/app/assets/fonts/iconfont.woff b/frontend/src/app/assets/fonts/iconfont.woff
diff --git a/frontend/src/app/assets/fonts/iconfont.woff2 b/frontend/src/app/assets/fonts/iconfont.woff2
diff --git a/frontend/src/app/components/ChartEditor.tsx b/frontend/src/app/components/ChartEditor.tsx
@@ -20,6 +20,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import useMount from 'app/hooks/useMount';
+import { ChartDataRequestBuilder } from 'app/pages/ChartWorkbenchPage/models/ChartDataRequestBuilder';
 import workbenchSlice, {
   aggregationSelector,
   backendChartSelector,
@@ -41,8 +42,10 @@ import {
   SaveFormContext,
   useSaveFormContext,
 } from 'app/pages/MainPage/pages/VizPage/SaveFormContext';
+import { useMainSlice } from 'app/pages/MainPage/slice';
 import { IChart } from 'app/types/Chart';
 import { ChartDTO } from 'app/types/ChartDTO';
+import { makeDownloadDataTask } from 'app/utils/fetch';
 import { transferChartConfigs } from 'app/utils/internalChartHelper';
 import { CommonFormTypes } from 'globalConstants';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -93,12 +96,14 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
   dataChartId,
   chartType,
   defaultViewId,
+  widgetId,
   onClose,
   onSaveInWidget,
   onSaveInDataChart,
 }) => {
   const saveFormContextValue = useSaveFormContext();
   const { actions } = useWorkbenchSlice();
+  const { actions: mainActions } = useMainSlice();
   const dispatch = useDispatch();
   const dataset = useSelector(datasetsSelector);
   const dataview = useSelector(currentDataViewSelector);
@@ -357,6 +362,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
                 computedFields: dataview?.computedFields,
               }),
               viewId: dataview?.id,
+              avatar: chart?.meta?.id,
             },
             callback: folder => {
               folder &&
@@ -434,6 +440,53 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
     await dispatch(refreshDatasetAction({}));
     setAllowQuery(false);
   }, [dispatch]);
+
+  const handleCreateDownloadDataTask = useCallback(async () => {
+    if (!dataview?.id) {
+      return;
+    }
+    const isWidget = dataChartId.includes('widget');
+    const builder = new ChartDataRequestBuilder(
+      {
+        ...dataview,
+      },
+      chartConfig?.datas,
+      chartConfig?.settings,
+      {},
+      true,
+      aggregation,
+    );
+    dispatch(
+      makeDownloadDataTask({
+        downloadParams: [
+          {
+            ...builder.build(),
+            ...{
+              analytics: dataChartId ? false : true,
+              vizName: backendChart?.name || 'chart',
+              vizId: isWidget ? widgetId : dataChartId,
+              vizType: isWidget ? 'widget' : 'dataChart',
+            },
+          },
+        ],
+        fileName: backendChart?.name || 'chart',
+        resolve: () => {
+          dispatch(mainActions.setDownloadPolling(true));
+        },
+      }),
+    );
+  }, [
+    aggregation,
+    backendChart?.name,
+    chartConfig?.datas,
+    chartConfig?.settings,
+    dataChartId,
+    dataview,
+    dispatch,
+    mainActions,
+    widgetId,
+  ]);
+
   return (
     <StyledChartWorkbenchPage>
       <SaveFormContext.Provider value={saveFormContextValue}>
@@ -461,6 +514,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
           onChartConfigChange={handleChartConfigChange}
           onDataViewChange={handleDataViewChanged}
           onRefreshDataset={handleRefreshDataset}
+          onCreateDownloadDataTask={handleCreateDownloadDataTask}
         />
         <SaveForm
           width={400}