Merge pull request #117 from jojocys/master

fix: styles & locales
Kanaries · Sep 14, 2022 · 98be7ad · 98be7ad
2 parents a43e5cc + 0c19330
commit 98be7ad
Show file tree

Hide file tree

Showing 15 changed files with 116 additions and 197 deletions.
diff --git a/packages/dev/package.json b/packages/dev/package.json
diff --git a/packages/dev/src/index.ts b/packages/dev/src/index.ts
diff --git a/packages/dev/tsconfig.json b/packages/dev/tsconfig.json
diff --git a/packages/rath-client/package.json b/packages/rath-client/package.json
@@ -14,7 +14,6 @@
     "@kanaries/graphic-walker": "0.1.0",
     "@kanaries/loa": "0.0.5",
     "@kanaries/web-data-loader": "0.1.7",
-    "@kanaries/dev": "1.0.0",
     "@material-ui/core": "^5.0.0-beta.5",
     "@uifabric/icons": "^7.5.17",
     "@uifabric/react-hooks": "^7.13.9",

diff --git a/packages/rath-client/public/locales/en-US.json b/packages/rath-client/public/locales/en-US.json
@@ -7,7 +7,14 @@
         "settings": "Settings",
         "history": "History",
         "hide": "Hide",
-        "expand": "Expand"
+        "expand": "Expand",
+        "filter": "Filter",
+        "semanticType": {
+            "nominal": "nominal",
+            "ordinal": "ordinal",
+            "temporal": "temporal",
+            "quantitative": "quantitative"
+        }
     },
     "menu": {
         "dataSource": "DataSource",

diff --git a/packages/rath-client/public/locales/zh-CN.json b/packages/rath-client/public/locales/zh-CN.json
@@ -7,7 +7,14 @@
         "settings": "设置",
         "history": "历史记录",
         "hide": "隐藏",
-        "expand": "展开"
+        "expand": "展开",
+        "filter": "筛选",
+        "semanticType": {
+            "nominal": "类别类型",
+            "ordinal": "有序类型",
+            "temporal": "时间类型",
+            "quantitative": "数值类型"
+        }
     },
     "menu": {
         "dataSource": "数据源",

diff --git a/packages/rath-client/src/components/dropDownSelect.tsx b/packages/rath-client/src/components/dropDownSelect.tsx
@@ -46,7 +46,7 @@ const Cont = styled.div<{border?: boolean}>`
         font-size: inherit;
         height: 100%;
         outline: none;
-        padding-left: 7px;
+        padding-left: ${props => props.border ? '7px' : '0px'};
         width: 100%;
     }
 `

diff --git a/packages/rath-client/src/components/fieldFilter/index.tsx b/packages/rath-client/src/components/fieldFilter/index.tsx
@@ -2,12 +2,13 @@ import { useId } from '@uifabric/react-hooks';
 import produce from 'immer';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { Callout, ChoiceGroup, DefaultButton, IconButton, PrimaryButton, Stack, Selection, SelectionMode, Toggle } from 'office-ui-fabric-react';
+import { Callout, ChoiceGroup, DefaultButton, PrimaryButton, Stack, Selection, SelectionMode, Toggle, ActionButton } from 'office-ui-fabric-react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { IFilter } from '../../interfaces';
 import { useGlobalStore } from '../../store';
 import RangeSelection from './rangeSelection';
 import SetSelection from './setSelection';
+import intl from 'react-intl-universal';
 
 
 interface FieldFilterProps {
@@ -75,8 +76,8 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
     }, [])
 
     return <div>
-        <IconButton id={buttonId}
-            text="Filter"
+        <ActionButton
+            text={intl.get('common.filter')}
             iconProps={{ iconName: 'filter' }}
             onClick={toggleShowFilter}
         />

diff --git a/packages/rath-client/src/pages/dataSource/dataTable/distributionMiniChart.tsx b/packages/rath-client/src/pages/dataSource/dataTable/distributionMiniChart.tsx
diff --git a/packages/rath-client/src/pages/dataSource/dataTable/headerCell.tsx b/packages/rath-client/src/pages/dataSource/dataTable/headerCell.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
-// import DistributionMiniChart from './distributionMiniChart';
 import DistributionChart from '../metaView/distChart';
 import DropdownSelect from '../../../components/dropDownSelect'
 import { IFieldMeta, IRawField } from '../../../interfaces';
@@ -18,6 +17,12 @@ const HeaderCellContainer = styled.div`
         right: 0px;
         top: 0px;
         margin: 0px 1px;
+    }
+    .info-container{
+        min-height: 50px;
+    }
+    .viz-container{
+
     }
     .dim {
         background-color: #1890ff;
@@ -31,10 +36,20 @@ const HeaderCellContainer = styled.div`
     .header{
         margin-top: 0px;
         margin-bottom: 0px;
+        font-size: 18px;
+        line-height: 36px;
+    }
+    .checkbox-container{
+        display: flex;
+        items-align: center;
+        margin-top: 2px;
+        label{
+            margin-right: 6px;
+        }
     }
 `;
 
-function getClassName (type: 'dimension' | 'measure', disable: boolean) {
+function getClassName(type: 'dimension' | 'measure', disable: boolean) {
     if (disable) return 'disable'
     return type === "dimension" ? "dim" : "mea"
 }
@@ -56,7 +71,7 @@ const DataTypeOptions: IOption<ISemanticType>[] = [
     { key: 'temporal', text: 'temporal' }
 ]
 
-function useBIFieldTypeOptions (): IOption<IAnalyticType>[] {
+function useBIFieldTypeOptions(): IOption<IAnalyticType>[] {
     const dimensionLabel = intl.get('meta.dimension');
     const measureLabel = intl.get('meta.measure');
     const options = useMemo<IOption<IAnalyticType>[]>(() => {
@@ -75,76 +90,81 @@ const HeaderCell: React.FC<HeaderCellProps> = props => {
     const buttonId = useId('edit-button');
     return (
         <HeaderCellContainer>
-            <h3 className="header">
-                {name}
-                <IconButton id={buttonId}
-                    iconProps={{ iconName: 'edit', style: { fontSize: '12px' } }}
-                    onClick={() => {
-                        setShowNameEditor(true)
-                    }}
-                />
-                {meta && meta.geoRole !== 'none' && 'lalal'}
+            <div className="info-container">
+                <h3 className="header">
+                    {name}
+                    <IconButton id={buttonId}
+                        iconProps={{ iconName: 'edit', style: { fontSize: '12px' } }}
+                        onClick={() => {
+                            setShowNameEditor(true)
+                        }}
+                    />
+                    {meta && meta.geoRole !== 'none' && 'lalal'}
+                    {
+                        meta && meta.geoRole !== 'none' && <IconButton iconProps={{ iconName: 'globe', style: { fontSize: '12px' } }} />
+                    }
+                </h3>
                 {
-                    meta && meta.geoRole !== 'none' && <IconButton iconProps={{ iconName: 'globe', style: { fontSize: '12px' } }} />
-                }
-            </h3>
-            {
-                showNameEditor && <Callout
-                    target={`#${buttonId}`}
-                    onDismiss={() => { setShowNameEditor(false); }}
-                >
-                    <div className="p-4">
-                        <h1 className="text-xl">{intl.get('dataSource.table.edit')}</h1>
+                    showNameEditor && <Callout
+                        target={`#${buttonId}`}
+                        onDismiss={() => { setShowNameEditor(false); }}
+                    >
                         <div className="p-4">
-                            <TextField label={intl.get('dataSource.table.fieldName')} value={name} onChange={(e, val) => {
-                                onChange && onChange(code, 'name', `${val}`)
-                            }} />
+                            <h1 className="text-xl">{intl.get('dataSource.table.edit')}</h1>
+                            <div className="p-4">
+                                <TextField label={intl.get('dataSource.table.fieldName')} value={name} onChange={(e, val) => {
+                                    onChange && onChange(code, 'name', `${val}`)
+                                }} />
+                            </div>
                         </div>
-                    </div>
-                </Callout>
-            }
-            {meta && (
-                <DropdownSelect aria-readonly value={meta.semanticType} onChange={e => {
-                    if (onChange) {
-                        onChange(code, 'semanticType', e.target.value as ISemanticType)
-                    }
-                }}>
-                    {DataTypeOptions.map((op) => (
-                        <option key={op.key} value={op.key}>
-                            {op.text}
-                        </option>
-                    ))}
-                </DropdownSelect>
-            )}
-            {
-                <DropdownSelect value={meta?.analyticType} onChange={(e) => {
-                    if (onChange) {
-                        // FIXME: 弱约束问题
-                        onChange(code, 'analyticType', e.target.value as IAnalyticType);
-                    }
-                }}>
-                    {
-                        optionsOfBIFieldType.map(op => <option key={op.key} value={op.key}>{op.text}</option>)
-                    }
-                </DropdownSelect>
-            }
-            <div>
-                <label>{intl.get('dataSource.useField')}</label>
-                <input checked={!disable} type="checkbox" onChange={e => {
-                    onChange && onChange(code, 'disable', !e.target.checked)
-                }} />
+                    </Callout>
+                }
+                {meta && (
+                    <DropdownSelect aria-readonly value={meta.semanticType} onChange={e => {
+                        if (onChange) {
+                            onChange(code, 'semanticType', e.target.value as ISemanticType)
+                        }
+                    }}>
+                        {DataTypeOptions.map((op) => (
+                            <option key={op.key} value={op.key}>
+                                {intl.get(`common.semanticType.${op.key}`)}
+                            </option>
+                        ))}
+                    </DropdownSelect>
+                )}
+                {
+                    <DropdownSelect value={meta?.analyticType} onChange={(e) => {
+                        if (onChange) {
+                            // FIXME: 弱约束问题
+                            onChange(code, 'analyticType', e.target.value as IAnalyticType);
+                        }
+                    }}>
+                        {
+                            optionsOfBIFieldType.map(op => <option key={op.key} value={op.key}>{op.text}</option>)
+                        }
+                    </DropdownSelect>
+                }
+                <div className="checkbox-container">
+                    <label>{intl.get('dataSource.useField')}</label>
+                    <input checked={!disable} type="checkbox" onChange={e => {
+                        onChange && onChange(code, 'disable', !e.target.checked)
+                    }} />
+                </div>
+            </div>
+            <div className="viz-container">
+                {meta && <DistributionChart
+                    dataSource={meta.distribution}
+                    x="memberName"
+                    y="count"
+                    analyticType={meta.analyticType}
+                    semanticType={meta.semanticType}
+                />}
             </div>
             {/* <Checkbox label="use" checked={!disable} onChange={(e, isChecked) => {
                 onChange && onChange(code, 'disable', !isChecked)
             }} /> */}
             {/* {meta && <DistributionMiniChart dataSource={meta ? meta.distribution : []} x="memberName" y="count" fieldType={meta?.semanticType || 'nominal'} />} */}
-            {meta && <DistributionChart
-                dataSource={meta.distribution}
-                x="memberName"
-                y="count"
-                analyticType={meta.analyticType}
-                semanticType={meta.semanticType}
-            />}
+
             <div className={`bottom-bar ${getClassName(meta?.analyticType || 'dimension', disable)}`}></div>
         </HeaderCellContainer>
     );

diff --git a/packages/rath-client/src/pages/dataSource/dataTable/index.tsx b/packages/rath-client/src/pages/dataSource/dataTable/index.tsx
@@ -12,6 +12,9 @@ const CustomBaseTable = styled(BaseTable)`
     .${Classes.tableHeaderCell} {
         position: relative;
     }
+    thead{
+        vertical-align: top;
+    }
 `;
 
 const TableInnerStyle = {