@kanaries/graphic-walker 0.2.13 → 0.2.15

package/src/vis/react-vega.tsx

@@ -8,9 +8,11 @@ import styled from 'styled-components';
 import { autoMark } from '../utils/autoMark';
 import { COUNT_FIELD_ID } from '../constants';
 
-import { IViewField, IRow, IStackMode } from '../interfaces';
+import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } 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,9 @@ interface ReactVegaProps {
   onGeomClick?: (values: any, e: any) => void
   selectEncoding: SingleViewProps['selectEncoding'];
   brushEncoding: SingleViewProps['brushEncoding'];
+  /** @default "vega" */
+  themeKey?: IThemeKey;
+  dark?: IDarkMode;
 }
 const NULL_FIELD: IViewField = {
   dragId: '',
@@ -100,6 +105,7 @@ interface SingleViewProps {
   asCrossFilterTrigger: boolean;
   selectEncoding: 'default' | 'none';
   brushEncoding: 'x' | 'y' | 'default' | 'none';
+  hideLegend?: boolean;
 }
 
 function availableChannels (geomType: string): Set<string> {
@@ -119,7 +125,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 +157,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';
@@ -190,9 +204,16 @@ function getSingleView(props: SingleViewProps) {
     brushEncoding,
     enableCrossFilter,
     asCrossFilterTrigger,
+    hideLegend = false,
   } = props
   const fields: IViewField[] = [x, y, color, opacity, size, shape, row, column, xOffset, yOffset, theta, radius]
   let markType = geomType;
+  let config: any = {};
+  if (hideLegend) {
+    config.legend = {
+      disable: true
+    };
+  }
   if (geomType === 'auto') {
     const types: ISemanticType[] = [];
     if (x !== NULL_FIELD) types.push(x.semanticType)//types.push(getFieldType(x));
@@ -207,6 +228,7 @@ function getSingleView(props: SingleViewProps) {
   channelStack(encoding, stack);
   if (!enableCrossFilter || brushEncoding === 'none' && selectEncoding === 'none') {
     return {
+      config,
       mark: {
         type: markType,
         opacity: 0.96,
@@ -314,6 +336,7 @@ function getSingleView(props: SingleViewProps) {
 
   if (brushEncoding !== 'none') {
     return {
+      config,
       transform: asCrossFilterTrigger ? [] : [
         { filter: { param: BRUSH_SIGNAL_NAME } }
       ],
@@ -334,6 +357,7 @@ function getSingleView(props: SingleViewProps) {
   }
 
   return {
+    config,
     transform: asCrossFilterTrigger ? [] : [
       { filter: { param: POINT_SIGNAL_NAME } }
     ],
@@ -378,11 +402,15 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     height,
     selectEncoding,
     brushEncoding,
+    themeKey = 'vega',
+    dark = 'media'
   } = props;
   // const container = useRef<HTMLDivElement>(null);
   // const containers = useRef<(HTMLDivElement | null)[]>([]);
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
   const { i18n } = useTranslation();
+  const mediaTheme = useCurrentMediaTheme(dark);
+  const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
   useEffect(() => {
     const clickSub = geomClick$.subscribe(([values, e]) => {
       if (onGeomClick) {
@@ -502,7 +530,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) => {
@@ -538,6 +566,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
       for (let i = 0; i < rowRepeatFields.length; i++) {
         for (let j = 0; j < colRepeatFields.length; j++, index++) {
           const sourceId = index;
+          const hasLegend = i === 0 && j === colRepeatFields.length - 1;
           const singleView = getSingleView({
             x: colRepeatFields[j] || NULL_FIELD,
             y: rowRepeatFields[i] || NULL_FIELD,
@@ -558,6 +587,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             brushEncoding,
             enableCrossFilter: crossFilterTriggerIdx !== -1,
             asCrossFilterTrigger: crossFilterTriggerIdx === sourceId,
+            hideLegend: !hasLegend,
           });
           const node = i * colRepeatFields.length + j < viewPlaceholders.length ? viewPlaceholders[i * colRepeatFields.length + j].current : null
           let commonSpec = { ...spec };
@@ -583,7 +613,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 +703,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     selectEncoding,
     brushEncoding,
     crossFilterTriggerIdx,
+    themeConfig,
   ]);
 
   useImperativeHandle(ref, () => ({

package/src/vis/theme.ts

@@ -0,0 +1,124 @@
+const DEFAULT_COLOR = "#5B8FF9";
+const DARK_COMMON_DESIGN = {
+    background: "transparent",
+    header: {
+        titleColor: "#d1d5db", // change title color to white
+        labelColor: "#d1d5db", // change label color to white
+    },
+    axis: {
+        gridColor: "#666",
+        domainColor: "#d1d5db", // change axis color to white
+        tickColor: "#d1d5db", // change tick color to white
+        labelColor: "#d1d5db", // change label color to white
+        titleColor: "#d1d5db", // change title color to white
+    },
+    legend: {
+        labelColor: "#d1d5db", // change legend label color to white
+        titleColor: "#d1d5db" // change legend title color to white
+    },
+    view: {
+        stroke: '#666'
+    }
+}
+export const VegaTheme = {
+    light: {
+        background: "transparent",
+    },
+    dark: DARK_COMMON_DESIGN
+} 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: {
+        ...DARK_COMMON_DESIGN,
+        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 },
+        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

@@ -29,34 +29,14 @@ import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
 import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
-import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS } from '../interfaces';
+import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
 import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
+import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
 
 
-export const LiteContainer = styled.div`
-    margin: 0.2em;
-    border: 1px solid #e5e7eb;
-    padding: 1em;
-    background-color: #fff;
-    .menu-root {
-        position: relative;
-        & > *:not(.trigger) {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            right: 0;
-            top: 100%;
-            border: 1px solid #8884;
-        }
-        &:not(:hover) > *:not(.trigger):not(:hover) {
-            display: none;
-        }
-    }
-`;
-
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -74,13 +54,18 @@ const FormContainer = styled.div`
     padding: 0.5em;
     display: flex;
     flex-direction: column;
+    color: #444;
+    .dark {
+        color: #aaa;
+    }
 `;
 
 interface IVisualSettings {
+    darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 
-const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
+const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference }) => {
     const { vizStore } = useGlobalStore();
     const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
@@ -99,6 +84,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
         rendererHandler?.current?.downloadSVG();
     }, 200), [rendererHandler]);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     const items = useMemo<ToolbarItemProps[]>(() => {
         return [
             {
@@ -153,6 +140,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}`),
@@ -325,16 +317,16 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 label: t('button.export_chart'),
                 icon: PhotoIcon,
                 form: (
-                    <FormContainer>
+                    <FormContainer className={dark ? 'dark' : ''}>
                         <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 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             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 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             aria-label={t('button.export_chart_as', { type: 'svg' })}
                             onClick={() => downloadSVG()}
                         >
@@ -343,24 +335,28 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                     </FormContainer>
                 ),
             },
-        ];
-    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG]);
+        ] as ToolbarItemProps[];
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG, dark]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
         <Toolbar
+            darkModePreference={darkModePreference}
             items={items}
             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',
                 },
             }}
         />

package/dist/components/container.d.ts

@@ -1,2 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NestContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/src/components/container.tsx

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-    border: 1px solid #e5e7eb;
-    padding: 1em;
-    margin: 1em;
-    background-color: #fff;
-`;
-
-export const NestContainer = styled.div`
-    border: 1px solid #e5e7eb;
-    padding: 0.4em;
-    font-size: 12px;
-    margin: 0.2em;
-    background-color: #fff;
-`;