Merge pull request edp963#1753 from scottsut/fix_chart_error

Fix chart errors
baby636 · May 26, 2020 · 58f1054 · 58f1054
2 parents 63e37ea + 535a20f
commit 58f1054
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 150 deletions.
diff --git a/webapp/app/assets/less/variable.less b/webapp/app/assets/less/variable.less
@@ -78,6 +78,10 @@
         }
       }
     }
+    .ant-calendar-picker {
+      width: 100% !important;
+      min-width: auto !important;
+    }
   }
   &.small {
     :global {

diff --git a/webapp/app/components/Control/Control.less b/webapp/app/components/Control/Control.less
@@ -82,6 +82,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 
   .itemList {
     flex: 2;
@@ -180,9 +181,7 @@
 
 .controlForm {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+  overflow-y: auto;
   .controlFormAntdOverride;
 
   .optionList {

diff --git a/webapp/app/components/Control/Control/Date.tsx b/webapp/app/components/Control/Control/Date.tsx
@@ -25,7 +25,6 @@ import { DatePicker } from 'antd'
 const { WeekPicker, MonthPicker } = DatePicker
 const MultiDatePicker = React.lazy(() => import('components/MultiDatePicker'))
 import { DatePickerFormats } from '../constants'
-import styles from '../Panel/Layouts/Layouts.less'
 
 interface IDateProps {
   control: IControlBase
@@ -38,15 +37,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
   const { Week, Month, Year, Datetime, DatetimeMinute } = DatePickerFormats
   const { multiple, dateFormat } = control
 
-  const datetimePickerChange = useCallback(
-    (val) => {
-      if (!val || (Array.isArray(val) && !val.length)) {
-        onChange(val)
-      }
-    },
-    [onChange]
-  )
-
   const controlled = !!onChange
   if (multiple) {
     value = value || ''
@@ -66,7 +56,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <WeekPicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             size={size}
             {...(controlled && { value, onChange })}
@@ -77,7 +66,6 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <MonthPicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             format={dateFormat}
             size={size}
@@ -89,15 +77,12 @@ const Date: FC<IDateProps> = ({ control, value, size, onChange }, ref) => {
         return (
           <DatePicker
             ref={ref}
-            className={styles.controlComponent}
             placeholder="请选择"
             showTime={isDatetimePicker}
             format={dateFormat}
             size={size}
             {...(controlled && { value })}
-            {...(controlled && {
-              onChange: isDatetimePicker ? datetimePickerChange : onChange
-            })}
+            {...(controlled && { onChange })}
             {...(controlled && { onOk: onChange })}
           />
         )

diff --git a/webapp/app/components/Control/Control/DateRange.tsx b/webapp/app/components/Control/Control/DateRange.tsx
@@ -23,7 +23,6 @@ import { IControlBase } from '../types'
 import { DatePicker } from 'antd'
 const { RangePicker } = DatePicker
 import { DatePickerFormats } from '../constants'
-import styles from '../Panel/Layouts/Layouts.less'
 
 interface IDateRangeProps {
   control: IControlBase
@@ -38,24 +37,14 @@ const DateRange: FC<IDateRangeProps> = ({ control, value, size, onChange }) => {
   const { Datetime, DatetimeMinute } = DatePickerFormats
   const isDatetimePicker = [Datetime, DatetimeMinute].includes(dateFormat)
 
-  const datetimePickerChange = useCallback(
-    (val) => {
-      if (!val || (Array.isArray(val) && !val.length)) {
-        onChange(val)
-      }
-    },
-    [onChange]
-  )
-
   return (
     <RangePicker
-      className={styles.controlComponent}
       placeholder={placeholder}
       value={value}
       size={size}
       showTime={isDatetimePicker}
       format={dateFormat}
-      onChange={isDatetimePicker ? datetimePickerChange : onChange}
+      onChange={onChange}
       onOk={onChange}
     />
   )

diff --git a/webapp/app/components/Control/Panel/Layouts/Layouts.less b/webapp/app/components/Control/Panel/Layouts/Layouts.less
@@ -83,7 +83,3 @@
   .antFormItemLabelSmall;
   .antFormItemStyleWithoutForm;
 }
-
-.controlComponent {
-  width: 100% !important;
-}
diff --git a/webapp/app/components/SplitPane/SplitPane.less b/webapp/app/components/SplitPane/SplitPane.less
@@ -44,15 +44,18 @@
 
     &-1 {
       display: flex;
+      min-height: 0;
 
       & > .react-resizable {
         display: flex;
+        min-height: 0;
       }
     }
 
     &-2 {
       flex: 1;
       display: flex;
+      min-height: 0;
       overflow: hidden;
 
       & > .react-resizable {

diff --git a/webapp/app/containers/Dashboard/Grid.tsx b/webapp/app/containers/Dashboard/Grid.tsx
@@ -78,6 +78,7 @@ const {
   renderDashboardItem,
   resizeDashboardItem,
   resizeAllDashboardItem,
+  renderChartError,
   openSharePanel,
   drillDashboardItem,
   deleteDrillHistory,
@@ -393,9 +394,9 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
         const waitingItems = currentItems.filter((item) => !currentItemsInfo[item.id].rendered)
 
         if (waitingItems.length) {
+          const { offsetHeight, scrollTop } = this.containerBody
           waitingItems.forEach((item) => {
             const itemTop = this.calcItemTop(item.y)
-            const { offsetHeight, scrollTop } = this.containerBody
 
             if (itemTop - scrollTop < offsetHeight) {
               onRenderDashboardItem(item.id)
@@ -865,6 +866,7 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
       onLoadDashboardItemData,
       onLoadBatchDataWithControlValues,
       onResizeDashboardItem,
+      onRenderChartError,
       onSetFullScreenPanelItemId,
       onMonitoredSyncDataAction,
       onMonitoredSearchDataAction
@@ -975,6 +977,7 @@ export class Grid extends React.Component<IGridProps & RouteComponentWithParams,
               onShowDrillEdit={this.showDrillDashboardItemForm}
               onDeleteDashboardItem={this.deleteItem}
               onResizeDashboardItem={onResizeDashboardItem}
+              onRenderChartError={onRenderChartError}
               onOpenSharePanel={onOpenSharePanel}
               onDownloadCsv={this.initiateWidgetDownloadTask}
               onTurnOffInteract={this.turnOffInteract}
@@ -1250,6 +1253,8 @@ export function mapDispatchToProps (dispatch) {
     onRenderDashboardItem: (itemId: number) => dispatch(renderDashboardItem(itemId)),
     onResizeDashboardItem: (itemId: number) => dispatch(resizeDashboardItem(itemId)),
     onResizeAllDashboardItem: () => dispatch(resizeAllDashboardItem()),
+    onRenderChartError: (itemId: number, error: Error) =>
+      dispatch(renderChartError(itemId, error)),
     onOpenSharePanel: (
       id: number,
       type: SharePanelType,