@kanaries/graphic-walker 0.4.0 → 0.4.2

package/src/components/pivotTable/utils.ts

@@ -3,12 +3,13 @@ import { INestNode } from "./inteface";
 
 const key_prefix = 'nk_';
 
-export function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number) {
+function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number, collapsedKeyList: string[]) {
     if (depth >= layerKeys.length) {
         // tree.key = nodeData[layerKeys[depth]];
         return;   
     }
     const key = nodeData[layerKeys[depth]];
+    const uniqueKey = `${tree.uniqueKey}__${key}`;
     // console.log({
     //     key,
     //     nodeData,
@@ -23,25 +24,78 @@ export function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow
         child = {
             key,
             value: key,
+            uniqueKey: uniqueKey, 
             fieldKey: layerKeys[depth],
             children: [],
+            path: [...tree.path, {key: layerKeys[depth], value: key}],
+            height: layerKeys.length - depth - 1,
+            isCollapsed: false,
         }
-        tree.children.push(child);
+        if (collapsedKeyList.includes(tree.uniqueKey)) {
+            tree.isCollapsed = true;
+        }
+        tree.children.splice(binarySearchIndex(tree.children, child.key), 0, child);
     }
-    insertNode(child, layerKeys, nodeData, depth + 1);
+    insertNode(child, layerKeys, nodeData, depth + 1, collapsedKeyList);
+
+}
+
+// Custom binary search function to find appropriate index for insertion.
+function binarySearchIndex(arr: INestNode[], keyVal: string | number): number {
+    let start = 0, end = arr.length - 1;
 
+    while (start <= end) {
+        let middle = Math.floor((start + end) / 2);
+        let middleVal = arr[middle].key;
+        if (typeof middleVal === 'number' && typeof keyVal === 'number') {
+            if (middleVal < keyVal) start = middle + 1;
+            else end = middle - 1;
+        } else {
+            let cmp = String(middleVal).localeCompare(String(keyVal));
+            if (cmp < 0) start = middle + 1;
+            else end = middle - 1;
+        }
+    }
+    return start;
 }
+
 const ROOT_KEY = '__root';
+const TOTAL_KEY = '__total'
 
-export function buildNestTree (layerKeys: string[], data: IRow[]): INestNode {
+function insertSummaryNode (node: INestNode): void {
+    if (node.children.length > 0) {
+        node.children.push({
+            key: TOTAL_KEY,
+            value: 'total',
+            fieldKey: node.children[0].fieldKey,
+            uniqueKey: `${node.uniqueKey}${TOTAL_KEY}`,
+            children: [],
+            path: [],
+            height: node.children[0].height,
+            isCollapsed: true,
+        });
+        for (let i = 0; i < node.children.length - 1; i ++) {
+            insertSummaryNode(node.children[i]);
+        }
+    }
+};
+
+export function buildNestTree (layerKeys: string[], data: IRow[], collapsedKeyList: string[], showSummary: boolean): INestNode {
     const tree: INestNode = {
         key: ROOT_KEY,
         value: 'root',
         fieldKey: 'root',
+        uniqueKey: ROOT_KEY,
         children: [],
+        path: [],
+        height: layerKeys.length,
+        isCollapsed: false,
     };
     for (let row of data) {
-        insertNode(tree, layerKeys, row, 0);
+        insertNode(tree, layerKeys, row, 0, collapsedKeyList);
+    }
+    if (showSummary) {
+        insertSummaryNode(tree);
     }
     return tree;
 }
@@ -56,7 +110,7 @@ class NodeIterator {
     public first () {
         let node = this.tree
         this.nodeStack = [node];
-        while (node.children.length > 0) {
+        while (node.children.length > 0 && !node.isCollapsed) {
             this.nodeStack.push(node.children[0])
             node = node.children[0]
         }
@@ -75,7 +129,7 @@ class NodeIterator {
             if (nodeIndex === -1) break;
             // console.log(this.nodeStack.map(n => `${n.fieldKey}-${n.value}`))
             if (cursorMoved) {
-                if (node.children.length > 0) {
+                if (node.children.length > 0 && !node.isCollapsed) {
                     this.nodeStack.push(node.children[0]);
                     continue;
                 } else {
@@ -102,7 +156,7 @@ class NodeIterator {
         // console.log(this.current)
         return this.current;
     }
-    public predicates (): { key: string; value: any }[] {
+    public predicates (): { key: string; value: string | number }[] {
         return this.nodeStack.filter(node => node.key !== ROOT_KEY).map(node => ({
             key: node.fieldKey,
             value: node.value
@@ -121,9 +175,14 @@ export function buildMetricTableFromNestTree (leftTree: INestNode, topTree: INes
         const vec: any[] = [];
         iteTop.first();
         while (iteTop.current !== null) {
-            const predicates = iteLeft.predicates().concat(iteTop.predicates());
-            const row = data.find(r => predicates.every(pre => r[pre.key] === pre.value))
-            vec.push(row)
+            const predicates = iteLeft.predicates().concat(iteTop.predicates()).filter((ele) => ele.value !== "total");
+            const matchedRows = data.filter(r => predicates.every(pre => r[pre.key] === pre.value));
+            if (matchedRows.length > 0) {
+                // If multiple rows are matched, then find the most matched one (the row with smallest number of keys)
+                vec.push(matchedRows.reduce((a, b) => Object.keys(a).length < Object.keys(b).length ? a : b));
+            } else {
+                vec.push(undefined);
+            }
             iteTop.next();
         }
         mat.push(vec)

package/src/components/sizeSetting.tsx

@@ -1,6 +1,7 @@
 import { ArrowsPointingOutIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useDebounceValueBind } from "../hooks";
 
 interface SizeSettingProps {
     onWidthChange: (val: number) => void;
@@ -12,7 +13,8 @@ interface SizeSettingProps {
 export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
     const { onWidthChange, onHeightChange, width, height, children } = props;
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.settings.size_setting" });
-
+    const [innerWidth, setInnerWidth] = useDebounceValueBind(width, onWidthChange);
+    const [innerHeight, setInnerHeight] = useDebounceValueBind(height, onHeightChange);
     return (
         <div className="text-zinc-400">
             {children}
@@ -22,16 +24,16 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     style={{ cursor: "ew-resize" }}
                     type="range"
                     name="width"
-                    value={Math.sqrt(width / 1000)}
+                    value={Math.sqrt(innerWidth / 1000)}
                     min="0"
                     max="1"
                     step="0.01"
                     onChange={(e) => {
-                        onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000));
+                        setInnerWidth(Math.round(Number(e.target.value) ** 2 * 1000));
                     }}
                 />
                 <output className="text-sm ml-1" htmlFor="width">
-                    {`${t("width")}: ${width}`}
+                    {`${t("width")}: ${innerWidth}`}
                 </output>
             </div>
             <div className=" mt-2">
@@ -40,16 +42,16 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     style={{ cursor: "ew-resize" }}
                     type="range"
                     name="height"
-                    value={Math.sqrt(height / 1000)}
+                    value={Math.sqrt(innerHeight / 1000)}
                     min="0"
                     max="1"
                     step="0.01"
                     onChange={(e) => {
-                        onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000));
+                        setInnerHeight(Math.round(Number(e.target.value) ** 2 * 1000));
                     }}
                 />
                 <output className="text-sm ml-1" htmlFor="height">
-                    {`${t("height")}: ${height}`}
+                    {`${t("height")}: ${innerHeight}`}
                 </output>
             </div>
         </div>

package/src/components/visualConfig/index.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useGlobalStore } from '../../store';
 import { NonPositionChannelConfigList,PositionChannelConfigList } from '../../config'; 
 
@@ -15,6 +15,8 @@ const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
     const { showVisualConfigPanel } = commonStore;
     const { visualConfig } = vizStore;
+    const { coordSystem, geoms: [markType] } = visualConfig;
+    const isChoropleth = coordSystem === 'geographic' && markType === 'choropleth';
     const { t } = useTranslation();
     const formatConfigList: (keyof IVisualConfig['format'])[] = [
         'numberFormat',
@@ -35,12 +37,14 @@ const VisualConfigPanel: React.FC = (props) => {
         size: visualConfig.resolve.size,
     });
     const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
+    const [scaleIncludeUnmatchedChoropleth, setScaleIncludeUnmatchedChoropleth] = useState<boolean>(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
     const [background, setBackground] = useState<string | undefined>(visualConfig.background);
 
     useEffect(() => {
         setZeroScale(visualConfig.zeroScale);
         setBackground(visualConfig.background);
         setResolve(toJS(visualConfig.resolve));
+        setScaleIncludeUnmatchedChoropleth(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
         setFormat({
             numberFormat: visualConfig.format.numberFormat,
             timeFormat: visualConfig.format.timeFormat,
@@ -140,6 +144,17 @@ const VisualConfigPanel: React.FC = (props) => {
                         }}
                     />
                 </div>
+                {isChoropleth && (
+                    <div className="my-2">
+                        <Toggle
+                            label="include unmatched choropleth in scale"
+                            enabled={scaleIncludeUnmatchedChoropleth}
+                            onChange={(en) => {
+                                setScaleIncludeUnmatchedChoropleth(en);
+                            }}
+                        />
+                    </div>
+                )}
                 <div className="mt-4">
                     <PrimaryButton
                         text={t('actions.confirm')}
@@ -148,6 +163,7 @@ const VisualConfigPanel: React.FC = (props) => {
                             runInAction(() => {
                                 vizStore.setVisualConfig('format', format);
                                 vizStore.setVisualConfig('zeroScale', zeroScale);
+                                vizStore.setVisualConfig('scaleIncludeUnmatchedChoropleth', scaleIncludeUnmatchedChoropleth);
                                 vizStore.setVisualConfig('background', background);
                                 vizStore.setVisualConfig('resolve', resolve);
                                 commonStore.setShowVisualConfigPanel(false);

package/src/computation/serverComputation.ts

@@ -29,7 +29,7 @@ export const datasetStatsServer = async (service: IComputationFunction): Promise
         ],
     })) as [{ count: number }];
     return {
-        rowCount: res[0].count,
+        rowCount: res[0]?.count ?? 0,
     };
 };
 
@@ -72,7 +72,7 @@ export const dataQueryServer = async (
     }
     const res = await service({
         workflow,
-        limit
+        limit,
     });
     return res;
 };
@@ -132,7 +132,12 @@ export const fieldStatServer = async (
             },
         ],
     };
-    const [rangeRes] = range
+    const [
+        rangeRes = {
+            [MIN_ID]: 0,
+            [MAX_ID]: 0,
+        },
+    ] = range
         ? await service(rangeQueryPayload)
         : [
               {

package/src/config.ts

@@ -1,20 +1,31 @@
-import { DraggableFieldState, IStackMode, IVisualConfig } from "./interfaces";
+import { DraggableFieldState, ICoordMode, IStackMode, IVisualConfig } from "./interfaces";
 
-export const GEMO_TYPES: Readonly<string[]> = [
-    'auto',
-    'bar',
-    'line',
-    'area',
-    'trail',
-    'point',
-    'circle',
-    'tick',
-    'rect',
-    'arc',
-    'text',
-    'boxplot',
-    'table'
-] as const;
+export const GEMO_TYPES: Record<ICoordMode, Readonly<string[]>> = {
+    generic: [
+        'auto',
+        'bar',
+        'line',
+        'area',
+        'trail',
+        'point',
+        'circle',
+        'tick',
+        'rect',
+        'arc',
+        'text',
+        'boxplot',
+        'table',
+    ],
+    geographic: [
+        'poi',
+        'choropleth',
+    ],
+} as const;
+
+export const COORD_TYPES: Readonly<ICoordMode[]> = [
+    'generic',
+    'geographic',
+];
 
 export const STACK_MODE: Readonly<IStackMode[]> = [
     'none',

package/src/dataSource/table.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useGlobalStore } from "../store";
 import DataTable from "../components/dataTable";
 import { toJS } from "mobx";
+import { getComputation } from "../computation/clientComputation";
 
 interface TableProps {
     size?: number;
@@ -13,19 +14,18 @@ const Table: React.FC<TableProps> = (props) => {
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
 
-    const tempDataset = React.useMemo(() => {
-        return {
-            id: "tmp",
-            name: "tmp",
-            dataSource: tmpDataSource,
-            rawFields: toJS(tmpDSRawFields),
-        };
-    }, [tmpDataSource, tmpDSRawFields]);
+    const computation = React.useMemo(() => getComputation(tmpDataSource), [tmpDataSource])
 
     return (
         <DataTable
             size={size}
-            dataset={tempDataset}
+            dataset={{
+                id: "tmp",
+                name: "tmp",
+                dataSource: tmpDataSource,
+                rawFields: toJS(tmpDSRawFields),
+            }}
+            computation={computation}
             total={tmpDataSource.length}
             onMetaChange={(fid, fIndex, diffMeta) => {
                 commonStore.updateTempDatasetMetas(fid, diffMeta);

package/src/fields/aestheticFields.tsx

@@ -26,6 +26,10 @@ const AestheticFields: React.FC = props => {
                 return aestheticFields.filter(f => f.id === 'text' || f.id === 'color' || f.id === 'size' || f.id === 'opacity');
             case 'table':
                 return []
+            case 'poi':
+                return aestheticFields.filter(f => f.id === 'color' || f.id === 'opacity' || f.id === 'size' || f.id === 'details');
+            case 'choropleth':
+                return aestheticFields.filter(f => f.id === 'color' || f.id === 'opacity' || f.id === 'text' || f.id === 'details');
             default:
                 return aestheticFields.filter(f => f.id !== 'text');
         }

package/src/fields/fieldsContext.tsx

@@ -48,6 +48,9 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'shape', mode: 1},
     { id: 'theta', mode: 1 },
     { id: 'radius', mode: 1 },
+    { id: 'longitude', mode: 1 },
+    { id: 'latitude', mode: 1 },
+    { id: 'geoId', mode: 1 },
     { id: 'filters', mode: 1 },
     { id: 'details', mode: 1 },
     { id: 'text', mode: 1 },

package/src/fields/posFields/index.tsx

@@ -9,14 +9,20 @@ import OBFieldContainer from '../obComponents/obFContainer';
 const PosFields: React.FC = props => {
     const { vizStore } = useGlobalStore();
     const { visualConfig } = vizStore;
-    const { geoms } = visualConfig;
+    const { geoms, coordSystem = 'generic' } = visualConfig;
 
     const channels = useMemo(() => {
+        if (coordSystem === 'geographic') {
+            if (geoms[0] === 'choropleth') {
+                return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'geoId');
+            }
+            return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'longitude' || f.id === 'latitude');
+        }
         if (geoms[0] === 'arc') {
             return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'radius' || f.id === 'theta');
         }
         return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'columns' || f.id === 'rows');
-    }, [geoms[0]])
+    }, [geoms[0], coordSystem])
     return <div>
         {
             channels.map(dkey => <FieldListContainer name={dkey.id} key={dkey.id}>

package/src/global.d.ts

@@ -1,7 +1,7 @@
 declare module '@kanaries/react-beautiful-dnd' {
-    export const DOM: {
-        setHead: (head: HTMLElement | ShadowRoot) => void;
-        setBody: (body: HTMLElement | ShadowRoot) => void;
-    };
+    export const DOMProvider: import('react').Provider<{
+        head: HTMLElement | ShadowRoot;
+        body: HTMLElement | ShadowRoot;
+    }>;
     export * from 'react-beautiful-dnd';
 }

package/src/hooks/index.ts

@@ -8,3 +8,11 @@ export function useDebounceValue<T>(value: T, timeout = 200): T {
     }, [value]);
     return innerValue;
 }
+
+export function useDebounceValueBind<T>(value: T, setter: (v: T) => void, timeout = 200): [T, (v: T) => void] {
+    const [innerValue, setInnerValue] = useState(value);
+    const valueToSet = useDebounceValue(innerValue, timeout);
+    useEffect(() => setInnerValue(value), [value])
+    useEffect(() => setter(valueToSet), [valueToSet]);
+    return [innerValue, setInnerValue];
+}

package/src/index.tsx

@@ -1,5 +1,5 @@
-import React, { type ForwardedRef, forwardRef } from "react";
-import { DOM } from "@kanaries/react-beautiful-dnd";
+import React, { type ForwardedRef, forwardRef, useState } from "react";
+import { DOMProvider } from "@kanaries/react-beautiful-dnd";
 import { observer } from "mobx-react-lite";
 import App, { IGWProps } from "./App";
 import { StoreWrapper } from "./store/index";
@@ -13,22 +13,24 @@ import "./empty_sheet.css";
 export const GraphicWalker = observer(forwardRef<IGWHandler, IGWProps>((props, ref) => {
     const { storeRef } = props;
 
+    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+
     const handleMount = (shadowRoot: ShadowRoot) => {
-        DOM.setBody(shadowRoot);
-        DOM.setHead(shadowRoot);
+        setShadowRoot(shadowRoot);
     };
     const handleUnmount = () => {
-        DOM.setBody(document.body);
-        DOM.setHead(document.head);
+        setShadowRoot(null);
     };
 
     return (
         <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
             <AppRoot ref={ref as ForwardedRef<IGWHandlerInsider>}>
                 <ShadowDom onMount={handleMount} onUnmount={handleUnmount}>
-                    <FieldsContextWrapper>
-                        <App {...props} />
-                    </FieldsContextWrapper>
+                    <DOMProvider value={{ head: shadowRoot ?? document.head, body: shadowRoot ?? document.body }}>
+                        <FieldsContextWrapper>
+                            <App {...props} />
+                        </FieldsContextWrapper>
+                    </DOMProvider>
                 </ShadowDom>
             </AppRoot>
         </StoreWrapper>

package/src/interfaces.ts

@@ -1,5 +1,7 @@
 import {Config as VgConfig, View} from 'vega';
 import {Config as VlConfig} from 'vega-lite';
+import type { FeatureCollection } from 'geojson';
+import type { feature } from 'topojson-client';
 import type {IViewQuery} from "./lib/viewQuery";
 
 export type DeepReadonly<T extends Record<keyof any, any>> = {
@@ -86,6 +88,8 @@ export interface IExpression {
     as: string;
 }
 
+export type IGeoRole = 'longitude' | 'latitude' | 'none';
+
 export interface IField {
     /**
      * fid: key in data record
@@ -101,6 +105,7 @@ export interface IField {
     aggName?: string;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
+    geoRole?: IGeoRole;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
     expression?: IExpression;
@@ -183,6 +188,9 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    longitude: IViewField[];
+    latitude: IViewField[];
+    geoId: IViewField[];
     details: IViewField[];
     filters: IFilterField[];
     text: IViewField[];
@@ -209,14 +217,21 @@ export type IFilterRule =
 
 export type IStackMode = 'none' | 'stack' | 'normalize' | 'zero' | 'center';
 
+export type ICoordMode = 'generic' | 'geographic';
+
 export interface IVisualConfig {
     defaultAggregated: boolean;
     geoms: string[];
+    showTableSummary: boolean;
+    /** @default "generic" */
+    coordSystem?: ICoordMode;
     stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
     sorted: ISortMode;
     zeroScale: boolean;
+    /** @default false */
+    scaleIncludeUnmatchedChoropleth?: boolean;
     background?: string;
     format: {
         numberFormat?: string;
@@ -236,6 +251,8 @@ export interface IVisualConfig {
         width: number;
         height: number;
     };
+    geojson?: FeatureCollection;
+    geoKey?: string;
     limit: number;
 }
 
@@ -448,3 +465,20 @@ export type IResponse<T> = (
         };
     }
 );
+
+export type Topology = Parameters<typeof feature>[0];
+
+export type IGeographicData = (
+    | {
+        type: 'GeoJSON';
+        data: FeatureCollection;
+    }
+    | {
+        type: 'TopoJSON';
+        data: Topology;
+        /**
+         * default to the first key of `objects` in Topology
+         */
+        objectKey?: string;
+    }
+);

package/src/locales/en-US.json

@@ -39,7 +39,14 @@
             "arc": "Arc",
             "boxplot": "Box (Box Plot)",
             "table": "Table",
-            "text": "Text"
+            "text": "Text",
+            "poi": "POI",
+            "choropleth": "Choropleth"
+        },
+        "coord_system": {
+            "__enum__": "Coordinate System",
+            "generic": "Generic",
+            "geographic": "Geographic"
         },
         "stack_mode": {
             "__enum__": "Stack Mode",
@@ -77,7 +84,10 @@
             "radius": "Radius",
             "filters": "Filters",
             "details": "Details",
-            "text": "Text"
+            "text": "Text",
+            "longitude": "Longitude",
+            "latitude": "Latitude",
+            "geoId": "Geometry ID"
         },
         "aggregator": {
             "sum": "Sum",
@@ -168,6 +178,21 @@
                 "size_setting": {
                     "width": "Width",
                     "height": "Height"
+                },
+                "table": {
+                    "summary": "Show summary"
+                },
+                "geography": "Geography Configuration",
+                "geography_settings": {
+                    "geoKey": "Feature ID",
+                    "format": "Format",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "Extract Feature Key",
+                    "jsonInputPlaceholder": "Paste {{format}} here",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "Enter {{format}} URL",
+                    "load": "Load"
                 }
             },
             "DatasetFields": {

package/src/locales/ja-JP.json

@@ -39,7 +39,14 @@
             "arc": "アーク",
             "boxplot": "ボックスプロット",
             "table": "表",
-            "text": "本文"
+            "text": "テキスト",
+            "poi": "POI",
+            "choropleth": "コロプレス"
+        },
+        "coord_system": {
+            "__enum__": "座標系",
+            "generic": "ジェネリック",
+            "geographic": "地理"
         },
         "stack_mode": {
             "__enum__": "スタックモード",
@@ -76,7 +83,10 @@
             "theta": "角度",
             "radius": "半径",
             "filters": "フィルター",
-            "text": "本文"
+            "text": "本文",
+            "longitude": "経度",
+            "latitude": "緯度",
+            "geoId": "地理ID"
         },
         "aggregator": {
             "sum": "合計",
@@ -167,6 +177,21 @@
                 "size_setting": {
                     "width": "幅",
                     "height": "高さ"
+                },
+                "table": {
+                    "summary": "サマリを表示"
+                },
+                "geography": "地理情報設定",
+                "geography_settings": {
+                    "geoKey": "フィーチャーID",
+                    "format": "データ形式",
+                    "geojson": "GeoJSON",
+                    "topojson": "TopoJSON",
+                    "objectKey": "Feature のキー",
+                    "jsonInputPlaceholder": "{{format}}をここに貼り付けてください",
+                    "href": "{{format}} URL",
+                    "hrefPlaceholder": "{{format}} URLを入力",
+                    "load": "ロード"
                 }
             },
             "DatasetFields": {