UI: fix show-in-order

evidentlyai · Jul 9, 2024 · fe96d20 · fe96d20
1 parent ab9ea17
commit fe96d20
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx b/ui/packages/evidently-ui-lib/src/widgets/BigGraphWidgetContent.tsx
@@ -10,6 +10,7 @@ interface BigGraphWidgetProps extends AdditionalGraphInfo {
 
 const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (props) => {
   const viewParams = useDashboardViewParams()
+  const isHistogram = props.data.some(({ type }) => type === 'histogram')
 
   return (
     <div>
@@ -20,7 +21,7 @@ const BigGraphWidgetContent: React.FunctionComponent<BigGraphWidgetProps> = (pro
           title: undefined,
           xaxis: {
             ...props.layout?.xaxis,
-            type: viewParams?.isXaxisAsCategorical ? 'category' : undefined
+            type: viewParams?.isXaxisAsCategorical && !isHistogram ? 'category' : undefined
           }
         }}
         config={{ responsive: true }}

diff --git a/ui/packages/evidently-ui-lib/src/widgets/RichDataWidget.tsx b/ui/packages/evidently-ui-lib/src/widgets/RichDataWidget.tsx
@@ -26,6 +26,8 @@ const RichDataWidget: React.FunctionComponent<RichDataParams & { widgetSize: num
 ) => {
   const [details, setDetails] = useState<boolean>(false)
   const viewParams = useDashboardViewParams()
+  const isHistogram = props.graph?.data.some(({ type }) => type === 'histogram')
+
   return (
     <React.Fragment>
       <Grid container spacing={2} justifyContent="center" alignItems="center">
@@ -66,7 +68,7 @@ const RichDataWidget: React.FunctionComponent<RichDataParams & { widgetSize: num
                 title: undefined,
                 xaxis: {
                   ...props.graph.layout?.xaxis,
-                  type: viewParams?.isXaxisAsCategorical ? 'category' : undefined
+                  type: viewParams?.isXaxisAsCategorical && !isHistogram ? 'category' : undefined
                 }
               }}
               config={{ responsive: true }}