Merge pull request #700 from zBritva/update_table_view
Update dataset/table view
This commit is contained in:
Ilfat Galiev
GitHub
Коммит
b9d66a7bd5
|
|
@ -162,8 +162,6 @@
|
|||
th {
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
background: $gray-140;
|
||||
color: white;
|
||||
}
|
||||
td {
|
||||
@include font-mono();
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import {
|
|||
getFileNameWithoutExtension,
|
||||
getConvertableDataKind,
|
||||
} from "../../utils";
|
||||
import { Button, DropdownListView } from "../panels/widgets/controls";
|
||||
import { DropdownListView } from "../panels/widgets/controls";
|
||||
import { kind2Icon, type2DerivedColumns } from "./common";
|
||||
import { TableView } from "./table_view";
|
||||
import { TableType } from "../../../core/dataset";
|
||||
|
|
@ -37,6 +37,8 @@ import { ChartTemplate } from "../../../container";
|
|||
import { FileViewImport, MappingMode } from "../file_view/import_view";
|
||||
import { strings } from "../../../strings";
|
||||
import { EditorType } from "../../stores/app_store";
|
||||
import { Callout, DefaultButton } from "@fluentui/react";
|
||||
import { defultBindButtonSize } from "../panels/widgets/controls/fluentui_customized_components";
|
||||
|
||||
export interface DatasetViewProps {
|
||||
store: AppStore;
|
||||
|
|
@ -89,8 +91,19 @@ export interface ColumnsViewProps {
|
|||
|
||||
export interface ColumnsViewState {
|
||||
selectedColumn: string;
|
||||
tableViewIsOpened: boolean;
|
||||
}
|
||||
|
||||
const buttonStyles = {
|
||||
root: {
|
||||
height: `${defultBindButtonSize}px`,
|
||||
width: `${defultBindButtonSize}px`,
|
||||
minWidth: `${defultBindButtonSize}px`,
|
||||
padding: "0px",
|
||||
border: "none",
|
||||
},
|
||||
};
|
||||
|
||||
export class ColumnsView extends React.Component<
|
||||
ColumnsViewProps,
|
||||
ColumnsViewState
|
||||
|
|
@ -101,20 +114,17 @@ export class ColumnsView extends React.Component<
|
|||
super(props);
|
||||
this.state = {
|
||||
selectedColumn: null,
|
||||
tableViewIsOpened: false,
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
public render() {
|
||||
const table = this.props.table;
|
||||
let anchor: HTMLDivElement;
|
||||
return (
|
||||
<>
|
||||
<PopupContainer controller={this.popupController} />
|
||||
<div
|
||||
className="charticulator__dataset-view-columns"
|
||||
ref={(e) => (anchor = e)}
|
||||
>
|
||||
<div className="charticulator__dataset-view-columns">
|
||||
<h2 className="el-title">
|
||||
<span className="el-text">
|
||||
{this.props.table.type === TableType.Links
|
||||
|
|
@ -122,10 +132,12 @@ export class ColumnsView extends React.Component<
|
|||
: strings.dataset.tableTitleColumns}
|
||||
</span>
|
||||
{this.props.store.editorType === EditorType.Chart ? (
|
||||
<Button
|
||||
icon="general/replace"
|
||||
<DefaultButton
|
||||
iconProps={{
|
||||
iconName: "general/replace",
|
||||
}}
|
||||
styles={buttonStyles}
|
||||
title={strings.dataset.replaceWithCSV}
|
||||
active={false}
|
||||
// eslint-disable-next-line
|
||||
onClick={() => {
|
||||
// eslint-disable-next-line
|
||||
|
|
@ -281,51 +293,58 @@ export class ColumnsView extends React.Component<
|
|||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Button
|
||||
icon="general/more-horizontal"
|
||||
<DefaultButton
|
||||
iconProps={{
|
||||
iconName: "More",
|
||||
}}
|
||||
styles={buttonStyles}
|
||||
id="charticulator__dataset-view-detail"
|
||||
title={strings.dataset.showDataValues}
|
||||
active={false}
|
||||
// ={false}
|
||||
onClick={() => {
|
||||
globals.popupController.popupAt(
|
||||
(context) => (
|
||||
<PopupView context={context}>
|
||||
<div className="charticulator__dataset-view-detail">
|
||||
<h2>{table.displayName || table.name}</h2>
|
||||
<p>
|
||||
{strings.dataset.dimensions(
|
||||
table.rows.length,
|
||||
table.columns.length
|
||||
)}
|
||||
</p>
|
||||
<TableView
|
||||
table={table}
|
||||
onTypeChange={
|
||||
this.props.store.editorType === EditorType.Chart
|
||||
? (column, type) => {
|
||||
const store = this.props.store;
|
||||
|
||||
store.dispatcher.dispatch(
|
||||
new Actions.ConvertColumnDataType(
|
||||
table.name,
|
||||
column,
|
||||
type as DataType
|
||||
)
|
||||
);
|
||||
}
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</PopupView>
|
||||
),
|
||||
{
|
||||
anchor,
|
||||
alignX: PopupAlignment.Outer,
|
||||
alignY: PopupAlignment.StartInner,
|
||||
}
|
||||
);
|
||||
this.setState({
|
||||
tableViewIsOpened: !this.state.tableViewIsOpened,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{this.state.tableViewIsOpened ? (
|
||||
<Callout
|
||||
target="#charticulator__dataset-view-detail"
|
||||
onDismiss={() => {
|
||||
this.setState({
|
||||
tableViewIsOpened: false,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="charticulator__dataset-view-detail">
|
||||
<h2>{table.displayName || table.name}</h2>
|
||||
<p>
|
||||
{strings.dataset.dimensions(
|
||||
table.rows.length,
|
||||
table.columns.length
|
||||
)}
|
||||
</p>
|
||||
<TableView
|
||||
table={table}
|
||||
onTypeChange={
|
||||
this.props.store.editorType === EditorType.Chart
|
||||
? (column, type) => {
|
||||
const store = this.props.store;
|
||||
|
||||
store.dispatcher.dispatch(
|
||||
new Actions.ConvertColumnDataType(
|
||||
table.name,
|
||||
column,
|
||||
type as DataType
|
||||
)
|
||||
);
|
||||
}
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Callout>
|
||||
) : null}
|
||||
</h2>
|
||||
<p className="el-details">{table.displayName || table.name}</p>
|
||||
{table.columns
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
import * as React from "react";
|
||||
import { Dataset } from "../../../core";
|
||||
import { Select } from "../panels/widgets/controls";
|
||||
import { getConvertableTypes } from "../../utils";
|
||||
import { Dropdown } from "@fluentui/react";
|
||||
|
||||
export interface TableViewProps {
|
||||
table: Dataset.Table;
|
||||
|
|
@ -59,18 +59,24 @@ export class TableView extends React.Component<TableViewProps, any> {
|
|||
return (
|
||||
<td key={`${c.name}-${index}`}>
|
||||
{
|
||||
<Select
|
||||
onChange={(newType) => {
|
||||
onTypeChange(c.name, newType);
|
||||
<Dropdown
|
||||
onChange={(ev, newType) => {
|
||||
onTypeChange(c.name, newType.key as string);
|
||||
this.forceUpdate();
|
||||
}}
|
||||
value={c.type}
|
||||
options={convertableTypes}
|
||||
labels={convertableTypes.map((type) => {
|
||||
styles={{
|
||||
title: {
|
||||
borderWidth: "0px",
|
||||
},
|
||||
}}
|
||||
selectedKey={c.type}
|
||||
options={convertableTypes.map((type) => {
|
||||
const str = type.toString();
|
||||
return str[0].toUpperCase() + str.slice(1);
|
||||
return {
|
||||
key: type,
|
||||
text: str[0].toUpperCase() + str.slice(1),
|
||||
};
|
||||
})}
|
||||
showText={true}
|
||||
/>
|
||||
}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -2684,6 +2684,198 @@ export function initializeIcons(
|
|||
<path d="M2048 853v171H462l622 622-120 121-829-828 829-829 120 121-622 622h1586z" />
|
||||
</svg>
|
||||
),
|
||||
"general/replace": (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<title>icons</title>
|
||||
<path
|
||||
d="M9.11449,15.75411v4.99441a2.86179,2.86179,0,0,0,2.8534,2.85339h3.04864"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="9.11449"
|
||||
y1="15.75411"
|
||||
x2="11.79822"
|
||||
y2="18.43784"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="9.11449"
|
||||
y1="15.75411"
|
||||
x2="6.43076"
|
||||
y2="18.43784"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<rect
|
||||
x="4.91958"
|
||||
y="4.20318"
|
||||
width="8.38982"
|
||||
height="8.38982"
|
||||
transform="translate(17.51258 -0.7164) rotate(90)"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.5px",
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M22.88551,16.24589V11.25148a2.86179,2.86179,0,0,0-2.8534-2.85339H16.98347"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="22.88551"
|
||||
y1="16.24589"
|
||||
x2="20.20178"
|
||||
y2="13.56216"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="22.88551"
|
||||
y1="16.24589"
|
||||
x2="25.56924"
|
||||
y2="13.56216"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "1.20px",
|
||||
}}
|
||||
/>
|
||||
<polyline
|
||||
points="19.878 19.407 18.691 19.407 18.691 20.595"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="18.69061"
|
||||
y1="22.85014"
|
||||
x2="18.69061"
|
||||
y2="25.48134"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
strokeDasharray: "1.5035455226898193,2.2553179264068604",
|
||||
}}
|
||||
/>
|
||||
<polyline
|
||||
points="18.691 26.609 18.691 27.797 19.878 27.797"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="22.13373"
|
||||
y1="27.79683"
|
||||
x2="24.76495"
|
||||
y2="27.79683"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
strokeDasharray: "1.5035455226898193,2.2553179264068604",
|
||||
}}
|
||||
/>
|
||||
<polyline
|
||||
points="25.893 27.797 27.08 27.797 27.08 26.609"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="27.08044"
|
||||
y1="24.35368"
|
||||
x2="27.08044"
|
||||
y2="21.72249"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
strokeDasharray: "1.5035455226898193,2.2553179264068604",
|
||||
}}
|
||||
/>
|
||||
<polyline
|
||||
points="27.08 20.595 27.08 19.407 25.893 19.407"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
}}
|
||||
/>
|
||||
<line
|
||||
x1="23.63727"
|
||||
y1="19.407"
|
||||
x2="21.0061"
|
||||
y2="19.407"
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#000",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
strokeWidth: "1.2000000000000002px",
|
||||
strokeDasharray: "1.5035455226898193,2.2553179264068604",
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче