feat: implement drill by table

apache · Apr 6, 2023 · 9c27db7 · 9c27db7
1 parent 8ef49a5
commit 9c27db7
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 34 deletions.
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByChart.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByChart.tsx
@@ -16,41 +16,38 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState } from 'react';
-import { BaseFormData, Behavior, css, SuperChart } from '@superset-ui/core';
-import { getChartDataRequest } from 'src/components/Chart/chartAction';
+import React from 'react';
+import {
+  BaseFormData,
+  Behavior,
+  QueryData,
+  SuperChart,
+  css,
+} from '@superset-ui/core';
+
 import Loading from 'src/components/Loading';
 
 interface DrillByChartProps {
   formData: BaseFormData & { [key: string]: any };
+  result: QueryData[];
 }
 
-export default function DrillByChart({ formData }: DrillByChartProps) {
-  const [chartDataResult, setChartDataResult] = useState();
-
-  useEffect(() => {
-    getChartDataRequest({
-      formData,
-    }).then(({ json }) => {
-      setChartDataResult(json.result);
-    });
-  }, []);
-
+export default function DrillByChart({ formData, result }: DrillByChartProps) {
   return (
     <div
       css={css`
         width: 100%;
         height: 100%;
       `}
     >
-      {chartDataResult ? (
+      {result ? (
         <SuperChart
           disableErrorBoundary
           behaviors={[Behavior.INTERACTIVE_CHART]}
           chartType={formData.viz_type}
           enableNoResults
           formData={formData}
-          queriesData={chartDataResult}
+          queriesData={result}
           height="100%"
           width="100%"
         />

diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
@@ -22,6 +22,7 @@ import {
   BaseFormData,
   BinaryQueryObjectFilterClause,
   Column,
+  QueryData,
   css,
   ensureIsArray,
   t,
@@ -31,21 +32,30 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
+import { Radio } from 'src/components/Radio';
 import { DashboardLayout, RootState } from 'src/dashboard/types';
 import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
 import { postFormData } from 'src/explore/exploreUtils/formData';
 import { noOp } from 'src/utils/common';
 import { simpleFilterToAdhoc } from 'src/utils/simpleFilterToAdhoc';
 import { useDatasetMetadataBar } from 'src/features/datasets/metadataBar/useDatasetMetadataBar';
-import { Dataset } from '../types';
+import { SingleQueryResultPane } from 'src/explore/components/DataTablesPane/components/SingleQueryResultPane';
+import { Dataset, DrillByType } from '../types';
 import DrillByChart from './DrillByChart';
+import { getChartDataRequest } from '../chartAction';
 
+const DATA_SIZE = 14;
 interface ModalFooterProps {
   formData: BaseFormData;
   closeModal?: () => void;
+  showEditChart: boolean;
 }
 
-const ModalFooter = ({ formData, closeModal }: ModalFooterProps) => {
+const ModalFooter = ({
+  formData,
+  closeModal,
+  showEditChart,
+}: ModalFooterProps) => {
   const [url, setUrl] = useState('');
   const dashboardPageId = useContext(DashboardPageIdContext);
   const [datasource_id, datasource_type] = formData.datasource.split('__');
@@ -62,18 +72,20 @@ const ModalFooter = ({ formData, closeModal }: ModalFooterProps) => {
   }, [dashboardPageId, datasource_id, datasource_type, formData]);
   return (
     <>
-      <Button buttonStyle="secondary" buttonSize="small" onClick={noOp}>
-        <Link
-          css={css`
-            &:hover {
-              text-decoration: none;
-            }
-          `}
-          to={url}
-        >
-          {t('Edit chart')}
-        </Link>
-      </Button>
+      {showEditChart && (
+        <Button buttonStyle="secondary" buttonSize="small" onClick={noOp}>
+          <Link
+            css={css`
+              &:hover {
+                text-decoration: none;
+              }
+            `}
+            to={url}
+          >
+            {t('Edit chart')}
+          </Link>
+        </Button>
+      )}
       <Button
         buttonStyle="primary"
         buttonSize="small"
@@ -106,6 +118,12 @@ export default function DrillByModal({
   dataset,
 }: DrillByModalProps) {
   const theme = useTheme();
+  const [chartDataResult, setChartDataResult] = useState<QueryData[]>();
+  const [showChart, setShowChart] = useState(true);
+  const [datasourceId] = useMemo(
+    () => formData.datasource.split('__'),
+    [formData.datasource],
+  );
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
@@ -141,7 +159,17 @@ export default function DrillByModal({
     return updatedFormData;
   }, [column, filters, formData, groupbyFieldName]);
 
+  useEffect(() => {
+    if (updatedFormData && showModal) {
+      getChartDataRequest({
+        formData: updatedFormData,
+      }).then(({ json }) => {
+        setChartDataResult(json.result);
+      });
+    }
+  }, [updatedFormData, showModal]);
   const { metadataBar } = useDatasetMetadataBar({ dataset });
+
   return (
     <Modal
       css={css`
@@ -150,17 +178,23 @@ export default function DrillByModal({
         }
       `}
       show={showModal}
-      onHide={onHideModal ?? (() => null)}
+      onHide={() => {
+        setShowChart(true);
+        setChartDataResult(undefined);
+        onHideModal();
+      }}
       title={t('Drill by: %s', chartName)}
-      footer={<ModalFooter formData={updatedFormData} />}
+      footer={
+        <ModalFooter formData={updatedFormData} showEditChart={showChart} />
+      }
       responsive
       resizable
       resizableConfig={{
         minHeight: theme.gridUnit * 128,
         minWidth: theme.gridUnit * 128,
         defaultSize: {
           width: 'auto',
-          height: '75vh',
+          height: '80vh',
         },
       }}
       draggable
@@ -175,7 +209,48 @@ export default function DrillByModal({
         `}
       >
         {metadataBar}
-        <DrillByChart formData={updatedFormData} />
+        <div
+          css={css`
+            margin-bottom: ${theme.gridUnit * 6}px;
+            .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+              box-shadow: none;
+            }
+          `}
+        >
+          <Radio.Group
+            onChange={({ target: { value } }) => {
+              setShowChart(value === DrillByType.chart);
+            }}
+            defaultValue={DrillByType.chart}
+          >
+            <Radio.Button
+              value={DrillByType.chart}
+              data-test="drill-by-chart-radio"
+            >
+              {t('Chart')}
+            </Radio.Button>
+            <Radio.Button
+              value={DrillByType.table}
+              data-test="drill-by-table-radio"
+            >
+              {t('Table')}
+            </Radio.Button>
+          </Radio.Group>
+        </div>
+        {showChart && chartDataResult && (
+          <DrillByChart formData={updatedFormData} result={chartDataResult} />
+        )}
+        {!showChart && chartDataResult && (
+          <SingleQueryResultPane
+            data={chartDataResult[0].data}
+            colnames={chartDataResult[0].colnames}
+            coltypes={chartDataResult[0].coltypes}
+            datasourceId={datasourceId}
+            dataSize={DATA_SIZE}
+            key={1}
+            isVisible={!showChart}
+          />
+        )}
       </div>
     </Modal>
   );

diff --git a/superset-frontend/src/components/Chart/types.ts b/superset-frontend/src/components/Chart/types.ts
@@ -17,6 +17,11 @@
  * under the License.
  */
 
+export enum DrillByType {
+  chart,
+  table,
+}
+
 export type Dataset = {
   changed_by?: {
     first_name: string;