@kanaries/graphic-walker 0.2.13 → 0.2.14

package/src/vis/react-vega.tsx

@@ -11,6 +11,8 @@ import { COUNT_FIELD_ID } from '../constants';
 import { IViewField, IRow, IStackMode } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
+import { builtInThemes } from './theme';
+import { useCurrentMediaTheme } from '../utils/media';
 
 const CanvaContainer = styled.div<{rowSize: number; colSize: number;}>`
   display: grid;
@@ -46,6 +48,8 @@ interface ReactVegaProps {
   onGeomClick?: (values: any, e: any) => void
   selectEncoding: SingleViewProps['selectEncoding'];
   brushEncoding: SingleViewProps['brushEncoding'];
+  /** @default "vega" */
+  themeKey?: 'vega' | 'g2';
 }
 const NULL_FIELD: IViewField = {
   dragId: '',
@@ -119,7 +123,15 @@ function channelEncode(props: EncodeProps) {
       encoding[c] = {
         field: props[c].fid,
         title: props[c].name,
-        type: props[c].semanticType
+        type: props[c].semanticType,
+      }
+      if (props[c].analyticType !== 'measure') {
+        // if `aggregate` is set to null,
+        // do not aggregate this field
+        encoding[c].aggregate = null;
+      }
+      if (props[c].analyticType === 'measure') {
+        encoding[c].type = 'quantitative'
       }
     }
   })
@@ -143,7 +155,7 @@ function channelEncode(props: EncodeProps) {
 }
 function channelAggregate(encoding: {[key: string]: any}, fields: IViewField[]) {
   Object.values(encoding).forEach(c => {
-    const targetField = fields.find(f => f.fid === c.field);
+    const targetField = fields.find(f => f.fid === c.field && !('aggregate' in c));
     if (targetField && targetField.fid === COUNT_FIELD_ID) {
       c.field = undefined;
       c.aggregate = 'count';
@@ -378,11 +390,14 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     height,
     selectEncoding,
     brushEncoding,
+    themeKey = 'vega',
   } = props;
   // const container = useRef<HTMLDivElement>(null);
   // const containers = useRef<(HTMLDivElement | null)[]>([]);
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
   const { i18n } = useTranslation();
+  const mediaTheme = useCurrentMediaTheme();
+  const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
   useEffect(() => {
     const clickSub = geomClick$.subscribe(([values, e]) => {
       if (onGeomClick) {
@@ -502,7 +517,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         spec.params.push(...singleView.params!);
       }
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
-        embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language) }).then(res => {
+        embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: themeConfig }).then(res => {
           vegaRefs.current = [res.view];
           try {
             res.view.addEventListener('click', (e) => {
@@ -583,7 +598,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             ans.params = commonSpec.params;
           }
           if (node) {
-            embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language) }).then(res => {
+            embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: themeConfig }).then(res => {
               vegaRefs.current.push(res.view);
               const paramStores = (res.vgSpec.data?.map(d => d.name) ?? []).filter(
                 name => [BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].map(p => `${p}_store`).includes(name)
@@ -673,6 +688,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     selectEncoding,
     brushEncoding,
     crossFilterTriggerIdx,
+    themeConfig,
   ]);
 
   useImperativeHandle(ref, () => ({

package/src/vis/theme.ts

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

package/src/visualSettings/index.tsx

@@ -41,6 +41,10 @@ export const LiteContainer = styled.div`
     border: 1px solid #e5e7eb;
     padding: 1em;
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
     .menu-root {
         position: relative;
         & > *:not(.trigger) {
@@ -74,6 +78,10 @@ const FormContainer = styled.div`
     padding: 0.5em;
     display: flex;
     flex-direction: column;
+    color: #444;
+    @media (prefers-color-scheme: dark) {
+        color: #aaa;
+    }
 `;
 
 interface IVisualSettings {
@@ -153,6 +161,11 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 key: 'mark_type',
                 label: tGlobal('constant.mark_type.__enum__'),
                 icon: StopIcon,
+                styles: {
+                    icon: {
+                        color: 'rgb(294,115,22)',
+                    },
+                },
                 options: GEMO_TYPES.map(g => ({
                     key: g,
                     label: tGlobal(`constant.mark_type.${g}`),
@@ -327,14 +340,14 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 form: (
                     <FormContainer>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
                             aria-label={t('button.export_chart_as', { type: 'png' })}
                             onClick={() => downloadPNG()}
                         >
                             {t('button.export_chart_as', { type: 'png' })}
                         </button>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
                             aria-label={t('button.export_chart_as', { type: 'svg' })}
                             onClick={() => downloadSVG()}
                         >
@@ -343,7 +356,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                     </FormContainer>
                 ),
             },
-        ];
+        ] as ToolbarItemProps[];
     }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
@@ -352,15 +365,18 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
             styles={{
                 root: {
                     '--background-color': '#fff',
+                    '--dark-background-color': '#000',
                     '--color': '#777',
                     '--color-hover': '#555',
-                    '--blue': '#282958',
-                    '--blue-dark': '#1d1e38',
+                    '--dark-color': '#999',
+                    '--dark-color-hover': '#bbb',
+                    '--blue': 'rgb(79,70,229)',
+                    '--blue-dark': 'rgb(9, 6, 65)',
                 },
                 container: {
-                    border: '1px solid #e5e7eb',
-                    boxSizing: 'content-box',
-                    borderRadius: '1px',
+                    // border: '1px solid #e5e7eb',
+                    // boxSizing: 'content-box',
+                    // borderRadius: '1px',
                 },
             }}
         />