ui: fix in order for category

evidentlyai · Aug 9, 2024 · b1e74a4 · b1e74a4
1 parent a614c37
commit b1e74a4
Show file tree

Hide file tree

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

diff --git a/ui/packages/evidently-ui-lib/src/widgets/RichDataWidget.tsx b/ui/packages/evidently-ui-lib/src/widgets/RichDataWidget.tsx
@@ -27,6 +27,11 @@ 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')
+  const isCastXaxisToCategory = viewParams?.isXaxisAsCategorical && !isHistogram
+
+  const xaxisOptionsOverride = isCastXaxisToCategory
+    ? ({ type: 'category', categoryorder: 'category ascending' } as const)
+    : ({} as const)
 
   return (
     <React.Fragment>
@@ -66,10 +71,7 @@ const RichDataWidget: React.FunctionComponent<RichDataParams & { widgetSize: num
               layout={{
                 ...props.graph.layout,
                 title: undefined,
-                xaxis: {
-                  ...props.graph.layout?.xaxis,
-                  type: viewParams?.isXaxisAsCategorical && !isHistogram ? 'category' : undefined
-                }
+                xaxis: { ...props.graph.layout?.xaxis, ...xaxisOptionsOverride }
               }}
               config={{ responsive: true }}
               style={{