Skip to content

Commit

Permalink
feat: add i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
@islxyqwe
islxyqwe committed Sep 12, 2023
1 parent d3c4f07 commit 24b4baa
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 32 deletions.
4 changes: 3 additions & 1 deletion packages/graphic-walker/src/components/leafletRenderer/ChoroplethRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { isValidLatLng } from "./POIRenderer";
import { TooltipContent } from "./tooltip";
import { useAppRootContext } from "../appRoot";
import { useGeoJSON } from "../../hooks/service";
import { useTranslation } from "react-i18next";


export interface IChoroplethRendererProps {
Expand Down Expand Up @@ -95,6 +96,7 @@ const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendere
useImperativeHandle(ref, () => ({}));

const features = useGeoJSON(localFeatures, featuresUrl)
const { t } = useTranslation('translation');

const geoIndices = useMemo(() => {
if (geoId) {
Expand Down Expand Up @@ -219,7 +221,7 @@ const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendere
}, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);

if (!features) {
return <div className="flex items-center justify-center w-full h-full">Loading Geo Data...</div>
return <div className="flex items-center justify-center w-full h-full">{t('main.tabpanel.settings.geography_settings.loading')}</div>
}

return (
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/components/leafletRenderer/geoConfigPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const GeoConfigPanel = ({ geoList = emptyList }: { geoList?: IGeoDataItem[] }) =
/>
<DefaultButton
text={t('geography_settings.load')}
className="mr-2"
className="mr-2 flex-shrink-0"
disabled={loading}
icon={loading ? <Spinner className="text-black" /> : undefined}
onClick={() => {
Expand Down
4 changes: 3 additions & 1 deletion packages/graphic-walker/src/components/leafletRenderer/geojsonRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { IGeoUrl } from '../../interfaces';
import { FeatureCollection, Geometry } from 'geojson';
import { feature } from 'topojson-client';
import { canvas } from 'leaflet';
import { useTranslation } from 'react-i18next';

const resolveCoords = (featureGeom: Geometry): [lat: number, lng: number][][] => {
switch (featureGeom.type) {
Expand Down Expand Up @@ -47,12 +48,13 @@ export function GeojsonRenderer(props: { url?: IGeoUrl; data?: string; type?: 'G
const data = useGeoJSON(d, props.url);
const [k, setK] = useState(0);
useEffect(() => setK((x) => x + 1), [data]);
const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });

if (!d && !props.url) return null;
if (!data) {
return (
<div className="w-full flex-1 flex items-center justify-center border-l border-gray-500">
Loading Geo Data...
{t('geography_settings.loading')}
</div>
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/graphic-walker/src/fields/datasetFields/binPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ const FieldScalePanel: React.FC = (props) => {
}}
>
<div className="flex flex-col justify-center items-start">
<h2 className="font-medium text-xl">Bins</h2>
<p className="font-normal">Set bin config for field</p>
<h2 className="font-medium text-xl">{t('calc.bin_panel_title')}</h2>
<p className="font-normal">{t('calc.bin_panel_desc')}</p>
<fieldset className="mt-2 gap-1 flex flex-col justify-center items-start">
{options.map((option,index) => {
return (
Expand All @@ -46,11 +46,11 @@ const FieldScalePanel: React.FC = (props) => {
/>
</div>
<div className="ml-3">
<label htmlFor={option}>{`Bin with equal ${option}`}</label>
<label htmlFor={option}>{t(`calc.bin_panel_option_${option}`)}</label>
</div>
</div>
{chosenOption === option && (<div className="flex items-center space-x-2">
<label className="text-ml whitespace-nowrap">Bin number</label>
<label className="text-ml whitespace-nowrap">{t(`calc.bin_panel_number`)}</label>
<input
type="text"
className="block w-full text-gray-700 dark:text-gray-200 rounded-md border-0 py-1 px-2 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-zinc-900 "
Expand Down
6 changes: 3 additions & 3 deletions packages/graphic-walker/src/fields/datasetFields/logPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ const FieldScalePanel: React.FC = (props) => {
}}
>
<div className="flex flex-col justify-center items-start">
<h2 className="font-medium text-xl my-2">Logarithm Transformation</h2>
<p className="font-normal ">Set log config for field</p>
<h2 className="font-medium text-xl my-2">{t(`calc.log_panel_title`)}</h2>
<p className="font-normal ">{t(`calc.log_panel_desc`)}</p>
<fieldset className="mt-2 gap-1 flex flex-col justify-center items-start">
<div className="flex items-center space-x-2">
<label className="text-ml whitespace-nowrap">Logarithmic base</label>
<label className="text-ml whitespace-nowrap">{t(`calc.log_panel_number`)}</label>
<input
type="text"
value={baseNum}
Expand Down
20 changes: 10 additions & 10 deletions packages/graphic-walker/src/fields/datasetFields/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,46 +38,46 @@ export const useMenuActions = (channel: "dimensions" | "measures"): IActionMenuI
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
children: [
{
label: "Bin",
label: t('bin'),
onPress() {
vizStore.createBinField(channel, index, "bin");
},
},
{
label: "Bin Count",
label: t('binCount'),
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
onPress() {
vizStore.createBinField(channel, index, "binCount");
},
},
{
label: "Log10",
label: t('log', {base: 10}),
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
onPress() {
vizStore.createLogField(channel, index, "log", 10);
},
},
{
label: "Log2",
label: t('log', {base: 2}),
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
onPress() {
vizStore.createLogField(channel, index, "log", 2);
},
},
{
label:"Log(customize)",
label:t('binCustom'),
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
onPress(){
commonStore.setShowLogSettingPanel(true);
commonStore.setCreateField({channel:channel,index:index})
commonStore.setShowBinSettingPanel(true);
commonStore.setCreateField({channel:channel,index:index});
}
},
{
label:"Bin(customize)",
label:t('logCustom'),
disabled: f.semanticType === 'nominal' || f.semanticType === 'ordinal',
onPress(){
commonStore.setShowBinSettingPanel(true);
commonStore.setCreateField({channel:channel,index:index});
commonStore.setShowLogSettingPanel(true);
commonStore.setCreateField({channel:channel,index:index})
}
},

Expand Down
24 changes: 21 additions & 3 deletions packages/graphic-walker/src/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,11 @@
"ascending": "Sort in Ascending Order",
"descending": "Sort in Descending Order",
"transpose": "Transpose",
"config": "Config",
"export_chart": "Export",
"export_chart_as": "Export as {{type}}",
"export_code": "Export Code"
"export_code": "Export Code",
"geojson": "Geography Configuration"
},
"limit": "Limit",
"size": "Resize",
Expand All @@ -194,7 +196,8 @@
"jsonInputPlaceholder": "Drop {{format}} file here",
"href": "{{format}} URL",
"hrefPlaceholder": "Enter {{format}} URL",
"load": "Load"
"load": "Load",
"loading": "Loading Geographic Data..."
}
},
"DatasetFields": {
Expand Down Expand Up @@ -253,8 +256,13 @@
"to_dim": "Move to dimensions",
"to_mea": "Move to measures",
"new_calc": "New calculation",
"bin": "Bin",
"binCount": "Bin Count",
"log": "Log{{ base }}",
"binCustom": "Bin(customize)",
"logCustom": "Log(customize)",
"drill": {
"name": "Drill down / up",
"name": "Time Unit",
"levels": {
"year": "Year",
"quarter": "Quarter",
Expand All @@ -266,5 +274,15 @@
"second": "Second"
}
}
},
"calc": {
"bin_panel_title": "Bins",
"bin_panel_desc": "Set bin config for field",
"bin_panel_option_widths": "Bin with equal widths",
"bin_panel_option_counts": "Bin with equal counts",
"bin_panel_number": "Bin number",
"log_panel_title": "Logarithm Transformation",
"log_panel_desc": "Set log config for field",
"log_panel_number": "Logarithmic base"
}
}
26 changes: 22 additions & 4 deletions packages/graphic-walker/src/locales/ja-JP.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"timeFormat": "日付",
"normalizedNumberFormat": "正規化された数字",
"background": "背景",
"color":"色",
"color": "色",
"independence": "独立したスケーリング",
"x": "x軸",
"y": "y軸",
Expand Down Expand Up @@ -165,9 +165,11 @@
"ascending": "昇順に並べ替える",
"descending": "降順に並べ替える",
"transpose": "転置",
"config": "設定",
"export_chart": "エクスポート",
"export_chart_as": "{{type}}としてエクスポート",
"export_code": "コードをエクスポート"
"export_code": "コードをエクスポート",
"geojson": "地理情報設定"
},
"limit": "上限",
"size": "サイズ変更",
Expand All @@ -188,7 +190,8 @@
"jsonInputPlaceholder": "{{format}}ファイルをここに",
"href": "{{format}} URL",
"hrefPlaceholder": "{{format}} URLを入力",
"load": "ロード"
"load": "ロード",
"loading": "地理データを読み込んでいます..."
}
},
"DatasetFields": {
Expand Down Expand Up @@ -247,8 +250,13 @@
"to_dim": "ディメンションに変更",
"to_mea": "メジャーに変更",
"new_calc": "計算フィールドを作成",
"bin": "ビン",
"binCount": "ビンカウント",
"log": "対数({{ base }})",
"binCustom": "ビン（カスタム）",
"logCustom": "対数（カスタム）",
"drill": {
"name": "ドリルダウン/アップ",
"name": "時間単位",
"levels": {
"year": "年",
"quarter": "四半期",
Expand All @@ -260,5 +268,15 @@
"second": "秒"
}
}
},
"calc": {
"bin_panel_title": "ビン",
"bin_panel_desc": "フィールドのビン構成を設定する",
"bin_panel_option_widths": "等しい幅のビン",
"bin_panel_option_counts": "等しい数のビン",
"bin_panel_number": "ビンの数",
"log_panel_title": "対数変換",
"log_panel_desc": "フィールドの対数設定を設定する",
"log_panel_number": "対数の底"
}
}
26 changes: 22 additions & 4 deletions packages/graphic-walker/src/locales/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"timeFormat": "时间格式",
"normalizedNumberFormat": "标准化数字格式",
"background": "背景",
"color":"颜色",
"color": "颜色",
"independence": "独立性",
"x": "x轴",
"y": "y轴",
Expand Down Expand Up @@ -171,9 +171,11 @@
"ascending": "升序排序",
"descending": "降序排序",
"transpose": "转置",
"config": "配置",
"export_chart": "导出",
"export_chart_as": "导出 {{type}}",
"export_code": "导出代码"
"export_code": "导出代码",
"geojson": "地理信息配置"
},
"limit": "上限",
"size": "调整尺寸",
Expand All @@ -194,7 +196,8 @@
"jsonInputPlaceholder": "拖动{{format}}文件到此",
"href": "{{format}} URL",
"hrefPlaceholder": "输入在线资源地址",
"load": "加载"
"load": "加载",
"loading": "加载地理数据中..."
}
},
"DatasetFields": {
Expand Down Expand Up @@ -253,8 +256,13 @@
"to_dim": "移动到维度",
"to_mea": "移动到度量",
"new_calc": "新的计算字段",
"bin": "分箱",
"binCount": "计数分箱",
"log": "对数（{{ base }}）",
"binCustom": "自定义分箱",
"logCustom": "自定义对数",
"drill": {
"name": "钻取",
"name": "时间粒度",
"levels": {
"year": "年",
"quarter": "季度",
Expand All @@ -266,5 +274,15 @@
"second": "秒"
}
}
},
"calc": {
"bin_panel_title": "分箱",
"bin_panel_desc": "设置字段的箱体配置",
"bin_panel_option_widths": "等宽箱体",
"bin_panel_option_counts": "等量箱体",
"bin_panel_number": "箱体数量",
"log_panel_title": "对数变换",
"log_panel_desc": "设置字段的对数配置",
"log_panel_number": "对数底数"
}
}
1 change: 1 addition & 0 deletions packages/graphic-walker/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ if (!import.meta.env.DEV) {
}

embedGraphicWalker(document.getElementById('root') as HTMLElement, {
i18nLang: 'zh-CN',
geoList: [
{ name: 'World Countries', type: 'TopoJSON', url: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json' },
{
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/visualSettings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -526,7 +526,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
}]:[],
{
key: 'config',
label: 'config',
label: t('button.config'),
icon: Cog6ToothIcon,
onClick: () => {
commonStore.setShowVisualConfigPanel(true);
Expand Down

1 comment on commit 24b4baa

@vercel
Copy link

@vercel vercel bot commented on 24b4baa Sep 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

graphic-walker – ./

graphic-walker-app.vercel.app
graphic-walker-kanaries.vercel.app
graphic-walker-git-main-kanaries.vercel.app
graphic-walker.kanaries.net

Please sign in to comment.