tachybase_todo/packages/plugins/charts/src/client/select/CustomSelect.tsx
Frozen FIsh b276ce1258
feat: add chart plugin (#1477)
* feat: add pie schema template

* chore: refactor

* chore: update

* chore: init server

* feat: add pie schema template

* chore: add chart utils

* chore: update

* chore: update

* chore: update

* chore: update

* feat: mvp

* chore: update

* chore: test

* feat: example

* fix: templates map error

* chore: update

* feat: add ChartBlockEngineDesigner.tsx

* chore: clean code

* chore: update templates

* chore: init bat template

* chore: update chart block engine

* feat: add chart block engine designer

* chore: update chart block initializer

* chore: update pie template

* chore: update

* feat: split sql

* chore: update

* chore: clean

* feat: support bar

* chore: add bar template

* chore: clean code

* chore: clean code

* fix: chart block initializer title

* chore: update

* fix: use title

* chore: update

* fix: bugs

* chore: clean code

* chore: update pie template

* chore: update ChartBlockInitializer.tsx

* chore: update

* feat: support chart config

* chore: add local plugin

* feat: add column template

* feat: add column chart action

* feat: add line chart template

* feat: add line action

* feat: add area template

* feat: add area action

* chore: update pie template

* chore: update

* chore: update dep

* fix: export missing utils

* chore: update dep

* chore: update dep

* chore: update pie template

* fix(charts): sql table capitalization

* fix(charts): improve sql compatibility

* fix: support choices type

* chore: update

* chore: clean code

* chore: get collection fields in chart engine

* feat(demo): chart block initializer

* fix: hello block

* chore: init data analyse plugin

* chore: add data-analyse plugin

* chore: init plugin

* chore: update

* chore: export schema initializers

* feat: add data analyse block

* chore: update data analyse block initializer

* chore: rename plugin name

* chore: update

* chore: update enum

* chore: update add block

* feat: add pie schema template

* chore: refactor

* chore: update

* chore: init server

* feat: add pie schema template

* chore: add chart utils

* chore: update

* chore: update

* chore: update

* chore: update

* feat: mvp

* chore: update

* chore: test

* feat: example

* fix: templates map error

* chore: update

* feat: add ChartBlockEngineDesigner.tsx

* chore: clean code

* chore: update templates

* chore: init bat template

* chore: update chart block engine

* feat: add chart block engine designer

* chore: update chart block initializer

* chore: update pie template

* chore: update

* feat: split sql

* chore: update

* chore: clean

* feat: support bar

* chore: add bar template

* chore: clean code

* chore: clean code

* fix: chart block initializer title

* chore: update

* fix: use title

* chore: update

* fix: bugs

* chore: clean code

* chore: update pie template

* chore: update ChartBlockInitializer.tsx

* chore: update

* feat: support chart config

* chore: add local plugin

* feat: add column template

* feat: add column chart action

* feat: add line chart template

* feat: add line action

* feat: add area template

* feat: add area action

* chore: update pie template

* chore: update

* chore: update dep

* fix: export missing utils

* chore: update dep

* chore: update dep

* chore: update pie template

* fix(charts): sql table capitalization

* fix(charts): improve sql compatibility

* fix: support choices type

* chore: update

* chore: clean code

* chore: get collection fields in chart engine

* chore: init dataset plugin

* chore: init dataset designer

* chore: init dataset block initializer

* chore: update

* chore: update

* chore: update deps

* chore: add tests

* chore: update utils

* chore: init plugin

* feat: add datasets client

* chore: update tests

* chore: update datastructures

* chore: update

* feat: add DataSetBlockInitializer

* chore: use dataset initializer

* chore: update deps

* chore: update

* chore: update pie template

* chore: update ChartBlockInitializer

* chore: update ChartBlockEngine

* chore: remove mdg file

* chore: update ChartBlockEngine

* chore: update

* chore: update g2plot

* chore: update template

* chore: update pie handler

* chore: update DataSetPreviewTable

* chore: update ChartBlockEngine

* chore: update ChartBlockEngineDesigner

* chore: remove useless files

* chore: update ChartBlockInitializer

* chore: update template

* chore: feat area template

* chore: update tests

* chore: update local plugins

* chore: update deps

* chore: update templates

* chore: update template

* feat: add CustomSelect

* chore: update select component

* fix: seriesField color error

* chore: update template

* chore: update

* fix: bar

* chore: update templates & clean code

* chore: update templates

* feat: add FunnelTemplate

* feat: charts queries

* fix: data shift

* feat: add ChartQueryMetadataProvider

* chore: update

* chore: remove dataset

* chore: update

* chore: update

* chore: clean code

* fix: delete query query list wrong behavior

* fix: delete all queries query list behavior

* chore: add empty occupancy

* chore: update description

* chore: update chart icon

* chore: update funnel template

* chore: update template title

* chore: add references

* chore: update dialog height

* fix: scatter template

* chore: update popup description

* refactor: schema level

* refactor: charts schema

* chore: remove console

* chore: remove console

* fix: error message

* chore: remove console

* chore: update DataSetPreviewTable

* feat: chart icons

* feat: update i18n

* feat: update i18n

* chore: update i18n

* chore: update i18n

* chore: update i18n

* feat: add tittle

* chore: update icons

* chore: update i18n

* chore: update i18n

* chore: update i18n

* chore: update i18n

* chore: update i18n

* fix: improve code

* chore: update i18n

* chore: update i18n

* fix: chart icon

* feat: quick add query (#1527)

* feat: quick add query

* feat: query

* chore: remove useless files

* fix: json5 validator error

* chore: update

* chore: update style

* chore: lint

* feat: improve code

* feat: sql validation

* refactor: clean code

* Update utils.ts

* chore: format code

* chore: remove useless file

* chore: update

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
2023-03-04 19:36:58 +08:00

128 lines
4.0 KiB
TypeScript

import { LoadingOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { connect, mapProps, mapReadPretty } from '@formily/react';
import { isValid } from '@formily/shared';
import { Icon } from '@nocobase/client';
import type { SelectProps } from 'antd';
import { Popover, Select as AntdSelect } from 'antd';
import React from 'react';
import { lang } from '../locale';
import { ReadPretty } from './ReadPretty';
type Props = SelectProps<any, any> & { objectValue?: boolean; onChange?: (v: any) => void; multiple: boolean };
const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
const { Option, OptGroup } = AntdSelect;
const filterOption = (input, option) => (option?.label ?? '').toLowerCase().includes((input || '').toLowerCase());
const InternalSelect = connect(
(props: Props) => {
const { ...others } = props;
const { options, ...othersProps } = { ...others };
const mode = props.mode || props.multiple ? 'multiple' : undefined;
const group1 = options.filter((option) => option.group === 2);
const group2 = options.filter((option) => option.group === 1);
return (
<AntdSelect
showSearch
filterOption={filterOption}
allowClear
{...othersProps}
onChange={(changed) => {
props.onChange?.(changed === undefined ? null : changed);
}}
mode={mode}
>
<OptGroup label={lang('Basic charts')}>
{group1.map((option) => (
<Option value={option.key} label={lang(option.title)}>
<Popover
placement={'right'}
zIndex={99999999999}
content={() => (
<span>
{lang(option?.description)
?.split(',')
.map((item) => (
<div>{item}</div>
))}
</span>
)}
trigger="hover"
>
<div
className={css`
display: flex;
gap: 4px;
align-items: center;
`}
>
<Icon type={option.iconId} />
<span role="img" aria-label={lang(option.title)}>
{lang(option.title)}
</span>
</div>
</Popover>
</Option>
))}
</OptGroup>
<OptGroup label={lang('More charts')}>
{group2.map((option) => (
<Option value={option.key} label={lang(option.title)}>
<Popover
placement={'right'}
zIndex={99999999999}
content={() => (
<span>
{lang(option?.description)
?.split(',')
.map((item) => (
<div>{item}</div>
))}
</span>
)}
trigger="hover"
>
<div
className={css`
display: flex;
gap: 4px;
align-items: center;
`}
>
<Icon type={option.iconId} />
<span role="img" aria-label={lang(option.title)}>
{lang(option.title)}
</span>
</div>
</Popover>
</Option>
))}
</OptGroup>
</AntdSelect>
);
},
mapProps(
{
dataSource: 'options',
loading: true,
},
(props, field) => {
return {
...props,
suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props?.suffixIcon,
};
},
),
mapReadPretty(ReadPretty),
);
export const CustomSelect = InternalSelect as unknown as typeof InternalSelect & {
ReadPretty: typeof ReadPretty;
};
CustomSelect.ReadPretty = ReadPretty;
export default CustomSelect;