@kanaries/graphic-walker 0.2.13 → 0.2.14

package/dist/insightBoard/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare const _default: React.FunctionComponent<{}>;
 export default _default;

package/dist/interfaces.d.ts

@@ -104,6 +104,7 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    details: IViewField[];
     filters: IFilterField[];
 }
 export interface IDraggableStateKey {

package/dist/renderer/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import { IReactVegaHandler } from '../vis/react-vega';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<React.RefAttributes<IReactVegaHandler>, "key"> & React.RefAttributes<IReactVegaHandler>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
+    themeKey?: "vega" | "g2" | undefined;
+} & React.RefAttributes<IReactVegaHandler>, "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/store/visualSpecStore.d.ts

@@ -93,6 +93,7 @@ export declare class VizSpecStore {
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;
+    replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string): void;
     private appendFilter;
     writeFilter(index: number, rule: IFilterRule | null): void;
     setFilterEditing(index: number): void;

package/dist/utils/index.d.ts

@@ -20,3 +20,5 @@ export declare function extendCountField(dataSource: IRow[], fields: IMutField[]
     dataSource: IRow[];
     fields: IMutField[];
 };
+export declare function getRange(nums: number[]): [number, number];
+export declare function makeNumbersBeautiful(nums: number[]): number[];

package/dist/utils/media.d.ts

@@ -0,0 +1,2 @@
+export declare function currentMediaTheme(): "dark" | "light";
+export declare function useCurrentMediaTheme(): "dark" | "light";

package/dist/vis/react-vega.d.ts

@@ -27,6 +27,8 @@ interface ReactVegaProps {
     onGeomClick?: (values: any, e: any) => void;
     selectEncoding: SingleViewProps['selectEncoding'];
     brushEncoding: SingleViewProps['brushEncoding'];
+    /** @default "vega" */
+    themeKey?: 'vega' | 'g2';
 }
 interface SingleViewProps {
     x: IViewField;

package/dist/vis/theme.d.ts

@@ -0,0 +1,130 @@
+export declare const VegaTheme: {
+    readonly light: {
+        readonly background: "transparent";
+    };
+    readonly dark: {
+        readonly background: "transparent";
+        readonly axis: {
+            readonly gridColor: "#666";
+            readonly domainColor: "#d1d5db";
+            readonly tickColor: "#d1d5db";
+            readonly labelColor: "#d1d5db";
+        };
+        readonly legend: {
+            readonly labelColor: "#d1d5db";
+            readonly titleColor: "#d1d5db";
+        };
+    };
+};
+export declare const AntVTheme: {
+    readonly light: {
+        readonly area: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly bar: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly circle: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly line: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly point: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly rect: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly tick: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly boxplot: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly errorbar: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly errorband: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly arc: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly background: "transparent";
+        readonly range: {
+            readonly category: readonly ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262FD", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"];
+            readonly diverging: readonly ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly heatmap: readonly ["#000000", "#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly ramp: readonly ["#EBCCFF", "#CCB0FF", "#AE95FF", "#907BFF", "#7262FD", "#5349E0", "#2F32C3", "#001BA7", "#00068C"];
+        };
+        readonly scale: {
+            readonly continuous: {
+                readonly range: readonly ["#f7fbff", "#08306b"];
+            };
+        };
+    };
+    readonly dark: {
+        readonly area: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly bar: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly circle: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly line: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly point: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly rect: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly tick: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly boxplot: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly errorbar: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly errorband: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly arc: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly background: "transparent";
+        readonly axis: {
+            readonly gridColor: "#666";
+            readonly domainColor: "#d1d5db";
+            readonly tickColor: "#d1d5db";
+            readonly labelColor: "#d1d5db";
+        };
+        readonly legend: {
+            readonly labelColor: "#d1d5db";
+            readonly titleColor: "#d1d5db";
+        };
+        readonly range: {
+            readonly category: readonly ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262FD", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"];
+            readonly diverging: readonly ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly heatmap: readonly ["#000000", "#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly ramp: readonly ["#EBCCFF", "#CCB0FF", "#AE95FF", "#907BFF", "#7262FD", "#5349E0", "#2F32C3", "#001BA7", "#00068C"];
+        };
+        readonly scale: {
+            readonly continuous: {
+                readonly range: readonly ["#f7fbff", "#08306b"];
+            };
+        };
+    };
+};
+export declare const builtInThemes: {
+    [themeKey: string]: {
+        light: any;
+        dark: any;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -32,6 +32,7 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
     "@kanaries/react-beautiful-dnd": "0.0.1",
     "@kanaries/web-data-loader": "0.1.5",

package/src/App.tsx

@@ -36,9 +36,11 @@ export interface IGWProps {
      * auto parse field key into a safe string. default is true
      */
     fieldKeyGuard?: boolean;
+    /** @default "vega" */
+    themeKey?: 'vega' | 'g2';
 }
 
-const App: React.FC<IGWProps> = (props) => {
+const App = observer<IGWProps>(function App (props) {
     const {
         dataSource = [],
         rawFields = [],
@@ -47,6 +49,7 @@ const App: React.FC<IGWProps> = (props) => {
         i18nResources,
         hideDataSourceConfig,
         fieldKeyGuard = true,
+        themeKey = 'vega',
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
@@ -117,7 +120,7 @@ const App: React.FC<IGWProps> = (props) => {
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className="App">
+        <div className="App font-sans dark:bg-zinc-900 dark:text-white m-0 p-0">
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
@@ -153,7 +156,7 @@ const App: React.FC<IGWProps> = (props) => {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
                                     }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} />}
                                     <InsightBoard />
                                     {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
@@ -184,6 +187,6 @@ const App: React.FC<IGWProps> = (props) => {
             </div>
         </div>
     );
-};
+});
 
-export default observer(App);
+export default App;

package/src/components/button/base.ts

@@ -4,4 +4,5 @@ export interface ButtonBaseProps {
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     text: string;
     disabled?: boolean;
+    className?: string;
 }

package/src/components/button/default.tsx

@@ -2,10 +2,14 @@ import React from "react";
 import { ButtonBaseProps } from "./base";
 
 const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
-    const { text, onClick, disabled } = props;
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-flex items-center rounded border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
     return (
         <button
-            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            className={btnClassName}
             onClick={onClick}
             disabled={disabled}
         >

package/src/components/button/defaultMini.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const DefaultMiniButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default DefaultMiniButton;

package/src/components/button/primary.tsx

@@ -2,10 +2,14 @@ import React from "react";
 import { ButtonBaseProps } from "./base";
 
 const PrimaryButton: React.FC<ButtonBaseProps> = (props) => {
-    const { text, onClick, disabled } = props;
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-flex items-center rounded border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
     return (
         <button
-            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            className={btnClassName}
             onClick={onClick}
             disabled={disabled}
         >

package/src/components/button/primaryMini.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const PrimaryMiniButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white dark:bg-zinc-900  border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
+    return (
+        <button
+            className={btnClassName}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default PrimaryMiniButton;

package/src/components/callout.tsx

@@ -27,6 +27,9 @@ const Bubble = styled.div`
         transform: translate(-50%, -50%) rotate(45deg);
         background-color: #fff;
         border-radius: 1px;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
 `;
 
@@ -49,7 +52,7 @@ const Callout = memo<CalloutProps>(function Callout({ target, children }) {
         root &&
         pos &&
         createPortal(
-            <Bubble role="dialog" className="fixed bg-white z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            <Bubble role="dialog" className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
                 {children}
             </Bubble>,
             root

package/src/components/clickMenu.tsx

@@ -8,9 +8,11 @@ const MenuContainer = styled.div`
     position: absolute;
     z-index: 99;
     cursor: pointer;
-    /* box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.09); */
-    /* border-radius: 2px; */
     padding: 4px;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;
 interface ClickMenuProps {
     x: number;

package/src/components/container.tsx

@@ -5,6 +5,11 @@ export const Container = styled.div`
     padding: 1em;
     margin: 1em;
     background-color: #fff;
+    // dark theme
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;
 
 export const NestContainer = styled.div`
@@ -13,4 +18,8 @@ export const NestContainer = styled.div`
     font-size: 12px;
     margin: 0.2em;
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;

package/src/components/dataTable/index.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import { IMutField, IRow } from "../../interfaces";
 import { useTranslation } from "react-i18next";
 import Pagination from "./pagination";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import DropdownContext from "../dropdownContext";
 
 interface DataTableProps {
     size?: number;
@@ -18,16 +20,6 @@ const Container = styled.div`
         box-sizing: content-box;
         border-collapse: collapse;
         font-size: 12px;
-        thead {
-            th {
-            }
-            th.number {
-                border-top: 3px solid #5cdbd3;
-            }
-            th.text {
-                border-top: 3px solid #69c0ff;
-            }
-        }
         tbody {
             td {
             }
@@ -50,17 +42,17 @@ function getHeaderType(field: IMutField): "number" | "text" {
 }
 
 function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
+    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
 }
 
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
         case "nominal":
-            return "bg-indigo-100 text-indigo-800";
+            return "bg-sky-100 text-sky-800";
         case "ordinal":
-            return "bg-purple-100 text-purple-800";
+            return "bg-indigo-100 text-indigo-800";
         case "quantitative":
-            return "bg-green-100 text-green-800";
+            return "bg-purple-100 text-purple-800";
         case "temporal":
             return "bg-yellow-100 text-yellow-800";
         default:
@@ -91,7 +83,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
     const to = Math.min((pageIndex + 1) * size, data.length - 1);
 
     return (
-        <Container className="rounded border-gray-200 border">
+        <Container className="rounded border-gray-200 dark:border-gray-700 border">
             <Pagination
                 total={data.length}
                 from={from + 1}
@@ -103,74 +95,72 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                     setPageIndex(Math.max(0, pageIndex - 1));
                 }}
             />
-            <table className="min-w-full divide-y divide-gray-30">
-                <thead className="bg-gray-50">
-                    <tr className="divide-x divide-gray-200">
+            <table className="min-w-full divide-y">
+                <thead className="bg-gray-50 dark:bg-gray-900">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-600">
                         {metas.map((field, fIndex) => (
                             <th key={field.fid} className={""}>
                                 <div
                                     className={
                                         getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
+                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
                                     }
                                 >
                                     <b>{field.name || field.fid}</b>
                                     <div>
-                                        <select
-                                            className={
-                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
-                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.analyticType}
-                                            onChange={(e) => {
+                                        <DropdownContext
+                                            options={analyticTypeList}
+                                            onSelect={(value) => {
                                                 onMetaChange(field.fid, fIndex, {
-                                                    analyticType: e.target.value as IMutField["analyticType"],
+                                                    analyticType: value as IMutField["analyticType"],
                                                 });
                                             }}
                                         >
-                                            {analyticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                    (field.analyticType === "dimension" ? "bg-blue-500" : "bg-purple-500")
+                                                }
+                                            >
+                                                {field.analyticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
                                     </div>
                                     <div>
-                                        <select
-                                            className={
-                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                getSemanticColors(field)
-                                            }
-                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
-                                            value={field.semanticType}
-                                            onChange={(e) => {
+                                        <DropdownContext
+                                            options={semanticTypeList}
+                                            onSelect={(value) => {
                                                 onMetaChange(field.fid, fIndex, {
-                                                    semanticType: e.target.value as IMutField["semanticType"],
+                                                    semanticType: value as IMutField["semanticType"],
                                                 });
                                             }}
                                         >
-                                            {semanticTypeList.map((type) => (
-                                                <option key={type.value} value={type.value}>
-                                                    {type.label}
-                                                </option>
-                                            ))}
-                                        </select>
+                                            <span
+                                                className={
+                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
+                                                    getSemanticColors(field)
+                                                }
+                                            >
+                                                {field.semanticType}
+                                                <ChevronUpDownIcon className="ml-2 w-3" />
+                                            </span>
+                                        </DropdownContext>
                                     </div>
                                 </div>
                             </th>
                         ))}
                     </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200 bg-white">
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
                     {data.slice(from, to).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
+                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
                                     className={
                                         getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
+                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
                                     }
                                 >
                                     {row[field.fid]}

package/src/components/dataTable/pagination.tsx

@@ -12,11 +12,11 @@ export default function Pagination(props: PaginationProps) {
     const { t } = useTranslation();
     return (
         <nav
-            className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+            className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
             aria-label="Pagination"
         >
             <div className="hidden sm:block">
-                <p className="text-sm text-gray-700">
+                <p className="text-sm text-gray-800 dark:text-gray-100">
                     Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{" "}
                     <span className="font-medium">{total}</span> results
                 </p>
@@ -26,7 +26,7 @@ export default function Pagination(props: PaginationProps) {
                     onClick={() => {
                         onPrev();
                     }}
-                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                 >
                     {t('actions.prev')}
                 </button>
@@ -34,7 +34,7 @@ export default function Pagination(props: PaginationProps) {
                     onClick={() => {
                         onNext()
                     }}
-                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white dark:bg-zinc-900  px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                 >
                     {t('actions.next')}
                 </button>

package/src/components/dataTypeIcon.tsx

@@ -6,7 +6,7 @@ const DataTypeIcon: React.FC<{ dataType: IMutField["semanticType"]; analyticType
     props
 ) => {
     const { dataType, analyticType } = props;
-    const color = analyticType === "dimension" ? "text-blue-500" : "text-green-500";
+    const color = analyticType === "dimension" ? "text-blue-500" : "text-purple-500";
     const iconClassName = `w-3 inline-block mr-0.5 ${color}`;
     switch (dataType) {
         case "quantitative":