feat: data visualization (#2160)
* feat(charts-v2): init * chore(charts-v2): init chart renderer * feat(chart-v2): add chart grid and initializer * feat(chart-v2): improve ui * feat(chart-v2): ui * feat(charts-v2): query sort ui * feat(charts-v2): field select component * feat(charts-v2): improve ui && add query action * feat(charts-v2): imporve ui, work in progress * fix(charts-v2): chart renderer request api twice * feat(charts-v2): add dimension formatter * feat(charts-v2): filter, sort, limit * feat(charts-v2): sql mode ui * feat(charts-v2): support duplicate & sql mode * fix(charts-v2): wrong defaultValue of json config * feat(charts-v2): transformer ui * feat(charts-v2): transformer * chore(charts-v2): rename transfromer to transform * feat(charts-v2): support cache * feat(charts-v2): add acl provider * chore(charts-v2): hide sql mode * refactor(charts-v2): add renderer provider * feat: collection permission check * feat(charts-v2): add antd statistic * test(charts-v2): backend * chore: improve code * test(charts-v2): add test * chore: add Chinese translation * fix(charts-v2): locale switch bug * chore: add dependency * feat(charts-v2): init chart config from query * feat: change layout * test: fix frontend test * feat: improve auto infer * fix: ui issues * chore: translation * fix: sql error * fix: some issues * feat: support table * fix: bug * chore: improve code and fix query * feat: add config reference * chore: add translation * fix: process data due to pg issue * test: fix parseBuilder * chore: upgrade formily to 2.2.25 * fix: some issues and import style * fix: bug when query with sort * feat: parse enum data * fix: yarn.lock * fix: type error * fix: infer bug and frontend test * test: fix frontend * fix: test * feat: improve preview * chore: downgrade formily * feat: support associations, draft, in testing * fix: typo * test: frontend & backend * fix: infer bug * feat: measure selection of statistics * fix: bug of group by alias * fix: some issues * fix: order issues * fix: yarn.lock * chore: fix filter include & 'data-visualization' * style: improve style * docs: add readme * chore: add translation --------- Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
YANG QIA
GitHub
parent
dbe6950809
commit
3aa65cb30c
1
packages/app/client/src/plugins/data-visualization.ts
Normal file
1
packages/app/client/src/plugins/data-visualization.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from '@nocobase/plugin-data-visualization/client';
|
||||
@ -61,4 +61,4 @@
|
||||
"dumi-theme-nocobase": "^0.2.9"
|
||||
},
|
||||
"gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
|
||||
}
|
||||
}
|
||||
@ -168,7 +168,7 @@ export const ACLCollectionProvider = (props) => {
|
||||
if (allowAll) {
|
||||
return props.children;
|
||||
}
|
||||
const actionPath = schema['x-acl-action'];
|
||||
const actionPath = schema?.['x-acl-action'];
|
||||
if (!actionPath) {
|
||||
return props.children;
|
||||
}
|
||||
|
||||
@ -16,3 +16,4 @@ export { getConfigurableProperties } from './templates/properties';
|
||||
export * from './templates/types';
|
||||
export * from './types';
|
||||
export * from './CollectionHistoryProvider';
|
||||
export * from './interfaces/properties';
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
import { connect, mapProps, mapReadPretty } from '@formily/react';
|
||||
import { AutoComplete as AntdAutoComplete } from 'antd';
|
||||
import { ReadPretty } from '../input';
|
||||
|
||||
export const AutoComplete = connect(
|
||||
AntdAutoComplete,
|
||||
mapProps({
|
||||
dataSource: 'options',
|
||||
}),
|
||||
mapReadPretty(ReadPretty.Input),
|
||||
);
|
||||
@ -0,0 +1 @@
|
||||
export * from './AutoComplete';
|
||||
@ -23,7 +23,6 @@ const findOption = (dataIndex = [], options) => {
|
||||
export const useValues = () => {
|
||||
const field = useField<any>();
|
||||
const { options } = useContext(FilterContext) || {};
|
||||
|
||||
const data2value = () => {
|
||||
field.value = flat.unflatten({
|
||||
[`${field.data.dataIndex?.join('.')}.${field.data?.operator?.value}`]: field.data?.value,
|
||||
@ -48,7 +47,7 @@ export const useValues = () => {
|
||||
field.data.schema = merge(option?.schema, operator?.schema);
|
||||
field.data.value = get(unflatten(field.value), `${fieldPath}.$${operatorValue}`);
|
||||
};
|
||||
useEffect(value2data, [field.path.entire]);
|
||||
useEffect(value2data, [field.path]);
|
||||
return {
|
||||
fields: options,
|
||||
...(field?.data || {}),
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export * from './action';
|
||||
export * from './association-field';
|
||||
export * from './association-select';
|
||||
export * from './auto-complete';
|
||||
export * from './block-item';
|
||||
export * from './calendar';
|
||||
export * from './card-item';
|
||||
|
||||
@ -4,6 +4,7 @@ export * from './types';
|
||||
export * from './items';
|
||||
export {
|
||||
gridRowColWrap,
|
||||
useCollectionDataSourceItems,
|
||||
useRecordCollectionDataSourceItems,
|
||||
createTableBlockSchema,
|
||||
createFilterFormBlockSchema,
|
||||
|
||||
@ -43,7 +43,6 @@ export const SettingsMenu: React.FC<{
|
||||
.resource('app')
|
||||
.getInfo()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res?.status === 200) {
|
||||
resolve('ok');
|
||||
clearInterval(heartbeat);
|
||||
|
||||
@ -23,3 +23,4 @@ export * from './value-parsers';
|
||||
export * from './collection-group-manager';
|
||||
export * from './view-collection';
|
||||
export * from './view/view-inference';
|
||||
export { default as FilterParser } from './filter-parser';
|
||||
|
||||
@ -50,7 +50,7 @@ const Charts = React.memo((props) => {
|
||||
key: 'chart',
|
||||
type: 'item',
|
||||
icon: 'PieChartOutlined',
|
||||
title: '{{t("Chart",{ns:"charts"})}}',
|
||||
title: '{{t("Chart (Old)",{ns:"charts"})}}',
|
||||
component: 'ChartBlockInitializer',
|
||||
});
|
||||
}
|
||||
|
||||
@ -60,4 +60,5 @@ export default {
|
||||
'1 「Time」 or 「Order Noun」 field, 1 「Value」 field': '1 个「时间」或「有序名词」字段,1 个「数值」字段',
|
||||
'1~ 2 「Unordered Noun」 fields, 1 「Numeric」 field': '1 ~ 2 个「无序名词」字段,1 个「数值」字段',
|
||||
'1 「Numeric」 field, 0~ 1 「Unordered Noun」 field': '1 个「数值」字段,0 ~ 1 个「无序名词」字段',
|
||||
'Chart (Old)': '图表 (旧)',
|
||||
};
|
||||
|
||||
661
packages/plugins/data-visualization/LICENSE
Normal file
661
packages/plugins/data-visualization/LICENSE
Normal file
@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
88
packages/plugins/data-visualization/README.md
Normal file
88
packages/plugins/data-visualization/README.md
Normal file
@ -0,0 +1,88 @@
|
||||
# Data Visualization
|
||||
|
||||
提供BI面板和数据可视化功能。
|
||||
|
||||
## 介绍
|
||||
|
||||
新版数据可视化插件以Collection为基础，提供了可视化的数据检索、图表配置面板，多个图表可以在同一区块内进行组织，支持以插件形式扩展和使用其他图表组件库。未来还计划支持SQL模式，单个及多个图表的时间、条件筛选，数据下钻，图表与数据区块联动等功能。
|
||||
|
||||
## 图表区块
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/vTKZt9EXxS4Im5L.png"/>
|
||||
|
||||
- 图表区块可以组织多个图表，区块中的图表可以像区块一样排列和拖拽。
|
||||
- 区块标题可以编辑。
|
||||
- 图表以Collection为基础，新建图表时需要选定一个Collection.
|
||||
- 有查看权限的Collection才可以用于配置图表，否则将会在选项中被隐藏。
|
||||
- 图表可以修改 (Configure), 复制 (Duplicate), 设置标题 (Edit block title).
|
||||
|
||||
## 配置面板
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/75GMbhCcypHitkE.png"/>
|
||||
|
||||
配置面板整体上分为三个区块：数据配置，图表配置，图表预览。
|
||||
|
||||
### 数据配置
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/34fnM7i6SIPJgFm.png" width="500" />
|
||||
|
||||
- 顶部下拉框代表当前正在配置的Collection，通过下拉菜单可以切换。
|
||||
- 配置完成后，点击"Run query"可以通过配置获取数据，"Data"面板会展示数据。
|
||||
|
||||
#### 度量
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/xZwW6UR1klB4dCs.png" width="500" />
|
||||
|
||||
度量字段，通常是图表需要展示的核心数据。度量数据可以通过聚合函数进行统计，支持常用的数据库统计函数`Sum`, `Count`, `Avg`, `Max`, `Min`. 度量字段可以有多个，可以设置别名。
|
||||
|
||||
#### 维度
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/2eAHvGojmlL1YtQ.png" width="500" />
|
||||
|
||||
维度字段，通常是图表数据分组的依据。对于日期类型字段，支持如图所示的格式化方式，格式化通过数据库函数实现（例如：MySQL对应`date_format`），其他类型数据格式化见[数据转换](数据转换)部分。
|
||||
|
||||
> **维度格式化 (Dimensions Format) VS 数据转换 (Transform)**
|
||||
> - 维度格式化发生在获取最终数据之前，数据分组按照维度格式化后的值进行，通常在按时间段筛选数据时有此需求。
|
||||
> - 数据转换对响应数据做进一步处理，诸如可读性处理，以展现恰当的数据，数据转换在前端进行。
|
||||
|
||||
#### 筛选
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/kvbHO5Y1fsiMm3E.png" width="500" />
|
||||
|
||||
此处配置将对分组前的数据进行过滤。
|
||||
|
||||
#### 排序 (Sort) 和限制 (Limit)
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/HCpiQ4qATcLeKUE.png" width="500" />
|
||||
|
||||
目前图表允许的数据集条数上限为2000.
|
||||
|
||||
#### 缓存
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/OY6JephtbcH4run.png" width="300" />
|
||||
|
||||
开启缓存后，图表将展示缓存的数据。
|
||||
|
||||
### 图表配置
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/KHaPvYsBxh7plGQ.png" width="500" />
|
||||
|
||||
- 图表类型 (Chart Type) - 用于展示的图表类型，目前按图表库分组。如何使用其他图表库？
|
||||
- 基础配置 - 选择图表后，会出现相应的基础可视化配置，字段配置通常提供了下拉菜单供选择，选项中包含了Collection的基础字段和字段别名。
|
||||
- JSON配置 - 当基础配置不满足要求时，可以使用JSON配置其他图表属性。
|
||||
|
||||
### 数据转换
|
||||
|
||||
<img src="https://s2.loli.net/2023/06/30/yf82mYs6V1aCRIj.png" width="500" />
|
||||
|
||||
使用数据转换可以对接口响应的数据做进一步处理，目前支持转换处理的数据类型为 `number`, `date`, `time`, `datetime`, 对于不属于支持的数据类型的字段，可以手动选择为这几个类型，以使用对应的转换方法。
|
||||
|
||||
## 使用其他图表库
|
||||
|
||||
```TypeScript
|
||||
import { ChartLibraryProvider } from '@nocobase/plugin-charts-v2/client';
|
||||
```
|
||||
|
||||
图表插件提供了ChartLibraryProvider组件，组件接收以下属性:
|
||||
- name 图表库名字
|
||||
- charts 图表组件列表，参考`packages/plugins/charts-v2/src/client/renderer/library/G2PlotLibrary.tsx`
|
||||
3
packages/plugins/data-visualization/client.d.ts
vendored
Executable file
3
packages/plugins/data-visualization/client.d.ts
vendored
Executable file
@ -0,0 +1,3 @@
|
||||
// @ts-nocheck
|
||||
export * from './lib/client';
|
||||
export { default } from './lib/client';
|
||||
65
packages/plugins/data-visualization/client.js
Executable file
65
packages/plugins/data-visualization/client.js
Executable file
@ -0,0 +1,65 @@
|
||||
'use strict';
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) {
|
||||
if (typeof WeakMap !== 'function') return null;
|
||||
var cacheBabelInterop = new WeakMap();
|
||||
var cacheNodeInterop = new WeakMap();
|
||||
return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
|
||||
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
||||
})(nodeInterop);
|
||||
}
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) {
|
||||
if (!nodeInterop && obj && obj.__esModule) {
|
||||
return obj;
|
||||
}
|
||||
if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
|
||||
return { default: obj };
|
||||
}
|
||||
var cache = _getRequireWildcardCache(nodeInterop);
|
||||
if (cache && cache.has(obj)) {
|
||||
return cache.get(obj);
|
||||
}
|
||||
var newObj = {};
|
||||
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
||||
for (var key in obj) {
|
||||
if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
||||
if (desc && (desc.get || desc.set)) {
|
||||
Object.defineProperty(newObj, key, desc);
|
||||
} else {
|
||||
newObj[key] = obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
newObj.default = obj;
|
||||
if (cache) {
|
||||
cache.set(obj, newObj);
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
|
||||
var _index = _interopRequireWildcard(require('./lib/client'));
|
||||
|
||||
Object.defineProperty(exports, '__esModule', {
|
||||
value: true,
|
||||
});
|
||||
var _exportNames = {};
|
||||
Object.defineProperty(exports, 'default', {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _index.default;
|
||||
},
|
||||
});
|
||||
|
||||
Object.keys(_index).forEach(function (key) {
|
||||
if (key === 'default' || key === '__esModule') return;
|
||||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
||||
if (key in exports && exports[key] === _index[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _index[key];
|
||||
},
|
||||
});
|
||||
});
|
||||
22
packages/plugins/data-visualization/package.json
Normal file
22
packages/plugins/data-visualization/package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@nocobase/plugin-data-visualization",
|
||||
"version": "0.10.0-alpha.5",
|
||||
"main": "lib/server/index.js",
|
||||
"devDependencies": {
|
||||
"@nocobase/actions": "0.10.0-alpha.5",
|
||||
"@nocobase/cache": "0.10.0-alpha.5",
|
||||
"@nocobase/server": "0.10.0-alpha.5",
|
||||
"@nocobase/test": "0.10.0-alpha.5",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/plots": "^1.2.5",
|
||||
"dayjs": "^1.11.7",
|
||||
"react-error-boundary": "^4.0.4"
|
||||
},
|
||||
"displayName": "Data Visualization",
|
||||
"displayName.zh-CN": "数据可视化",
|
||||
"description": "Provides business intelligence and data visualization features",
|
||||
"description.zh-CN": "提供BI面板和数据可视化功能"
|
||||
}
|
||||
3
packages/plugins/data-visualization/server.d.ts
vendored
Executable file
3
packages/plugins/data-visualization/server.d.ts
vendored
Executable file
@ -0,0 +1,3 @@
|
||||
// @ts-nocheck
|
||||
export * from './lib/server';
|
||||
export { default } from './lib/server';
|
||||
65
packages/plugins/data-visualization/server.js
Executable file
65
packages/plugins/data-visualization/server.js
Executable file
@ -0,0 +1,65 @@
|
||||
'use strict';
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) {
|
||||
if (typeof WeakMap !== 'function') return null;
|
||||
var cacheBabelInterop = new WeakMap();
|
||||
var cacheNodeInterop = new WeakMap();
|
||||
return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
|
||||
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
||||
})(nodeInterop);
|
||||
}
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) {
|
||||
if (!nodeInterop && obj && obj.__esModule) {
|
||||
return obj;
|
||||
}
|
||||
if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
|
||||
return { default: obj };
|
||||
}
|
||||
var cache = _getRequireWildcardCache(nodeInterop);
|
||||
if (cache && cache.has(obj)) {
|
||||
return cache.get(obj);
|
||||
}
|
||||
var newObj = {};
|
||||
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
||||
for (var key in obj) {
|
||||
if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
||||
if (desc && (desc.get || desc.set)) {
|
||||
Object.defineProperty(newObj, key, desc);
|
||||
} else {
|
||||
newObj[key] = obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
newObj.default = obj;
|
||||
if (cache) {
|
||||
cache.set(obj, newObj);
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
|
||||
var _index = _interopRequireWildcard(require('./lib/server'));
|
||||
|
||||
Object.defineProperty(exports, '__esModule', {
|
||||
value: true,
|
||||
});
|
||||
var _exportNames = {};
|
||||
Object.defineProperty(exports, 'default', {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _index.default;
|
||||
},
|
||||
});
|
||||
|
||||
Object.keys(_index).forEach(function (key) {
|
||||
if (key === 'default' || key === '__esModule') return;
|
||||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
||||
if (key in exports && exports[key] === _index[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _index[key];
|
||||
},
|
||||
});
|
||||
});
|
||||
43
packages/plugins/data-visualization/src/client/Settings.tsx
Normal file
43
packages/plugins/data-visualization/src/client/Settings.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { CheckOutlined } from '@ant-design/icons';
|
||||
import { css } from '@emotion/css';
|
||||
import { Form, FormItem } from '@formily/antd';
|
||||
import { Button, Card } from 'antd';
|
||||
import cls from 'classnames';
|
||||
import React, { useContext } from 'react';
|
||||
import { useChartsTranslation } from './locale';
|
||||
import { ChartLibraryContext, useToggleChartLibrary } from './renderer';
|
||||
|
||||
export const Settings = () => {
|
||||
const { t } = useChartsTranslation();
|
||||
const libraries = useContext(ChartLibraryContext);
|
||||
const { toggle } = useToggleChartLibrary();
|
||||
const list = Object.entries(libraries).map(([library, { enabled }]) => {
|
||||
return (
|
||||
<Button
|
||||
key={library}
|
||||
icon={enabled ? <CheckOutlined /> : ''}
|
||||
className={cls(
|
||||
css`
|
||||
margin: 8px 8px 8px 0;
|
||||
`,
|
||||
enabled
|
||||
? css`
|
||||
color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
`
|
||||
: '',
|
||||
)}
|
||||
onClick={() => toggle(library)}
|
||||
>
|
||||
{library}
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Card>
|
||||
<Form layout="vertical">
|
||||
<FormItem label={t('Enabled Chart Library')}>{list}</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
import { vi } from 'vitest';
|
||||
|
||||
describe('ChartConfigure', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('should render correctly', () => {
|
||||
// vi.spyOn(client, 'useDesignable').mockReturnValue({} as any);
|
||||
// render(<ChartConfigure insert={(schema, options) => {}} />);
|
||||
// const modal = document.querySelector('.ant-modal-content') as HTMLInputElement;
|
||||
// expect(modal).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,78 @@
|
||||
import { FieldOption } from '../hooks';
|
||||
import { infer } from '../renderer';
|
||||
|
||||
describe('library', () => {
|
||||
describe('auto infer', () => {
|
||||
const fields = [
|
||||
{
|
||||
name: 'price',
|
||||
value: 'price',
|
||||
type: 'number',
|
||||
label: 'Price',
|
||||
},
|
||||
{
|
||||
name: 'count',
|
||||
value: 'count',
|
||||
type: 'number',
|
||||
label: 'Count',
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
value: 'title',
|
||||
type: 'string',
|
||||
label: 'Title',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
value: 'name',
|
||||
type: 'string',
|
||||
label: 'Name',
|
||||
},
|
||||
{
|
||||
name: 'createdAt',
|
||||
value: 'createdAt',
|
||||
type: 'date',
|
||||
label: 'Created At',
|
||||
},
|
||||
] as FieldOption[];
|
||||
|
||||
test('1 measure, 1 dimension', () => {
|
||||
const { xField, yField } = infer(fields, {
|
||||
measures: [{ field: ['price'] }],
|
||||
dimensions: [{ field: ['title'] }],
|
||||
});
|
||||
expect(yField.value).toEqual('price');
|
||||
expect(xField.value).toEqual('title');
|
||||
});
|
||||
|
||||
test('1 measure, 2 dimensions with date', () => {
|
||||
const { xField, yField, seriesField } = infer(fields, {
|
||||
measures: [{ field: ['price'] }],
|
||||
dimensions: [{ field: ['title'] }, { field: ['createdAt'] }],
|
||||
});
|
||||
expect(yField.value).toEqual('price');
|
||||
expect(xField.value).toEqual('createdAt');
|
||||
expect(seriesField.value).toEqual('title');
|
||||
});
|
||||
|
||||
test('1 measure, 2 dimensions without date', () => {
|
||||
const { xField, yField, seriesField } = infer(fields, {
|
||||
measures: [{ field: ['price'] }],
|
||||
dimensions: [{ field: ['title'] }, { field: ['name'] }],
|
||||
});
|
||||
expect(yField.value).toEqual('price');
|
||||
expect(xField.value).toEqual('title');
|
||||
expect(seriesField.value).toEqual('name');
|
||||
});
|
||||
|
||||
test('2 measures, 1 dimension', () => {
|
||||
const { xField, yField, yFields } = infer(fields, {
|
||||
measures: [{ field: ['price'] }, { field: ['count'] }],
|
||||
dimensions: [{ field: ['title'] }],
|
||||
});
|
||||
expect(yField.value).toEqual('price');
|
||||
expect(xField.value).toEqual('title');
|
||||
expect(yFields.length).toEqual(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
describe('ChartRenderer', () => {
|
||||
it('should render correctly', () => {
|
||||
// render(
|
||||
// <ChartLibraryProvider
|
||||
// name="Test"
|
||||
// charts={{
|
||||
// chart: {
|
||||
// name: 'Chart',
|
||||
// component: () => <div role="chart">Chart</div>,
|
||||
// useProps: (info) => info,
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// <ChartRendererProvider
|
||||
// query={{}}
|
||||
// config={{
|
||||
// chartType: 'chart',
|
||||
// general: {},
|
||||
// advanced: {},
|
||||
// }}
|
||||
// collection=""
|
||||
// transform={[]}
|
||||
// >
|
||||
// <ChartRenderer />
|
||||
// </ChartRendererProvider>
|
||||
// </ChartLibraryProvider>,
|
||||
// );
|
||||
// expect(screen.getByText('Please configure and run query')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,261 @@
|
||||
import * as client from '@nocobase/client';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { vi } from 'vitest';
|
||||
import formatters from '../block/formatters';
|
||||
import transformers from '../block/transformers';
|
||||
import {
|
||||
useChartFields,
|
||||
useFieldsWithAssociation,
|
||||
useFieldTransformer,
|
||||
useFieldTypes,
|
||||
useFormatters,
|
||||
useOrderFieldsOptions,
|
||||
useTransformers,
|
||||
} from '../hooks';
|
||||
|
||||
describe('hooks', () => {
|
||||
beforeEach(() => {
|
||||
vi.spyOn(client, 'useCollectionManager').mockReturnValue({
|
||||
getCollectionFields: (name: string) =>
|
||||
({
|
||||
orders: [
|
||||
{
|
||||
interface: 'string',
|
||||
name: 'name',
|
||||
uiSchema: {
|
||||
title: '{{t("Name")}}',
|
||||
},
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
interface: 'number',
|
||||
name: 'price',
|
||||
uiSchema: {
|
||||
title: '{{t("Price")}}',
|
||||
},
|
||||
type: 'double',
|
||||
},
|
||||
{
|
||||
interface: 'createdAt',
|
||||
name: 'createdAt',
|
||||
uiSchema: {
|
||||
title: '{{t("Created At")}}',
|
||||
},
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
interface: 'm2o',
|
||||
name: 'user',
|
||||
uiSchema: {
|
||||
title: '{{t("User")}}',
|
||||
},
|
||||
target: 'users',
|
||||
type: 'belongsTo',
|
||||
},
|
||||
],
|
||||
users: [
|
||||
{
|
||||
interface: 'string',
|
||||
name: 'name',
|
||||
uiSchema: {
|
||||
title: '{{t("Name")}}',
|
||||
},
|
||||
type: 'string',
|
||||
},
|
||||
],
|
||||
}[name]),
|
||||
} as any);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
test('useFieldsWithAssociation', () => {
|
||||
const { result } = renderHook(() => useFieldsWithAssociation('orders'));
|
||||
expect(result.current).toMatchObject([
|
||||
{
|
||||
key: 'name',
|
||||
label: 'Name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
key: 'price',
|
||||
label: 'Price',
|
||||
value: 'price',
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: 'Created At',
|
||||
value: 'createdAt',
|
||||
},
|
||||
{
|
||||
key: 'user',
|
||||
label: 'User',
|
||||
value: 'user',
|
||||
target: 'users',
|
||||
targetFields: [
|
||||
{
|
||||
key: 'user.name',
|
||||
label: 'User / Name',
|
||||
value: 'user.name',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
test('useChartFields', () => {
|
||||
const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
|
||||
const { result } = renderHook(() => useChartFields(fields));
|
||||
const func = result.current;
|
||||
const field = {
|
||||
query: () => ({
|
||||
get: () => ({
|
||||
measures: [
|
||||
{
|
||||
field: ['price'],
|
||||
alias: 'Price Alias',
|
||||
},
|
||||
],
|
||||
dimensions: [
|
||||
{
|
||||
field: ['user', 'name'],
|
||||
},
|
||||
],
|
||||
}),
|
||||
}),
|
||||
dataSource: [],
|
||||
};
|
||||
func(field);
|
||||
expect(field.dataSource).toMatchObject([
|
||||
{
|
||||
key: 'Price Alias',
|
||||
label: 'Price Alias',
|
||||
value: 'Price Alias',
|
||||
},
|
||||
{
|
||||
key: 'user.name',
|
||||
label: 'User / Name',
|
||||
value: 'user.name',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
test('useFormatters', () => {
|
||||
const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
|
||||
const { result } = renderHook(() => useFormatters(fields));
|
||||
const func = result.current;
|
||||
const field = {
|
||||
query: () => ({
|
||||
get: () => 'createdAt',
|
||||
}),
|
||||
dataSource: [],
|
||||
};
|
||||
func(field);
|
||||
expect(field.dataSource).toEqual(formatters.datetime);
|
||||
});
|
||||
|
||||
test('useFieldTypes', () => {
|
||||
const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
|
||||
const { result } = renderHook(() => useFieldTypes(fields));
|
||||
const func = result.current;
|
||||
let state1 = {};
|
||||
let state2 = {};
|
||||
const field = {
|
||||
dataSource: [],
|
||||
state: {},
|
||||
};
|
||||
const query = (path: string, val: string) => ({
|
||||
get: () => {
|
||||
if (path === 'query') {
|
||||
return { measures: [{ field: ['price'] }, { field: ['name'] }] };
|
||||
}
|
||||
return val;
|
||||
},
|
||||
});
|
||||
const field1 = {
|
||||
query: (path: string) => query(path, 'price'),
|
||||
setState: (state) => (state1 = state),
|
||||
...field,
|
||||
};
|
||||
const field2 = {
|
||||
query: (path: string) => query(path, 'name'),
|
||||
setState: (state) => (state2 = state),
|
||||
...field,
|
||||
};
|
||||
func(field1);
|
||||
func(field2);
|
||||
expect(field1.dataSource.map((item) => item.value)).toEqual(Object.keys(transformers));
|
||||
expect(state1).toEqual({ value: 'number', disabled: true });
|
||||
expect(state2).toEqual({ value: null, disabled: false });
|
||||
});
|
||||
|
||||
test('useTransformers', () => {
|
||||
const field = {
|
||||
query: () => ({
|
||||
get: () => 'datetime',
|
||||
}),
|
||||
dataSource: [],
|
||||
};
|
||||
renderHook(() => useTransformers(field));
|
||||
expect(field.dataSource.map((item) => item.value)).toEqual(Object.keys(transformers['datetime']));
|
||||
});
|
||||
|
||||
test('useFieldTransformers', () => {
|
||||
const { result } = renderHook(() =>
|
||||
useFieldTransformer([
|
||||
{
|
||||
field: '1',
|
||||
type: 'datetime',
|
||||
format: 'YYYY',
|
||||
},
|
||||
{
|
||||
field: '2',
|
||||
type: 'number',
|
||||
format: 'YYYY',
|
||||
},
|
||||
]),
|
||||
);
|
||||
expect(result.current['1']).toBeDefined();
|
||||
expect(result.current['2']).toBeUndefined();
|
||||
});
|
||||
|
||||
test('useOrderFieldsOptions', () => {
|
||||
const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
|
||||
const { result } = renderHook(() => useOrderFieldsOptions([], fields));
|
||||
const func = result.current;
|
||||
const field1 = {
|
||||
query: () => ({
|
||||
get: () => ({
|
||||
measures: [{ field: ['price'] }],
|
||||
}),
|
||||
}),
|
||||
dataSource: [],
|
||||
componentProps: {
|
||||
fieldNames: {},
|
||||
},
|
||||
};
|
||||
const field2 = {
|
||||
query: () => ({
|
||||
get: () => ({
|
||||
measures: [{ field: ['price'], aggregation: 'sum' }],
|
||||
}),
|
||||
}),
|
||||
componentProps: {
|
||||
fieldNames: {},
|
||||
},
|
||||
dataSource: [],
|
||||
};
|
||||
func(field1);
|
||||
func(field2);
|
||||
expect(field1.dataSource).toEqual([]);
|
||||
expect(field1.componentProps.fieldNames).toEqual({
|
||||
label: 'title',
|
||||
value: 'name',
|
||||
children: 'children',
|
||||
});
|
||||
expect(field2.dataSource).toMatchObject([{ key: 'price', value: 'price', label: 'Price' }]);
|
||||
expect(field2.componentProps.fieldNames).toEqual({});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
import { SchemaInitializerButtonContext, useDesignable } from '@nocobase/client';
|
||||
import React, { useState } from 'react';
|
||||
import { ChartConfigContext, ChartConfigCurrent, ChartConfigure } from './ChartConfigure';
|
||||
|
||||
export const ChartV2Block: React.FC = (props) => {
|
||||
const { insertAdjacent } = useDesignable();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [current, setCurrent] = useState<ChartConfigCurrent>({} as any);
|
||||
const [data, setData] = useState<string | any[]>([]);
|
||||
const [initialVisible, setInitialVisible] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
return (
|
||||
<SchemaInitializerButtonContext.Provider
|
||||
value={{ visible: initialVisible, setVisible: setInitialVisible, searchValue, setSearchValue }}
|
||||
>
|
||||
<ChartConfigContext.Provider value={{ visible, setVisible, current, setCurrent, data, setData }}>
|
||||
{props.children}
|
||||
<ChartConfigure insert={(schema, options) => insertAdjacent('beforeEnd', schema, options)} />
|
||||
</ChartConfigContext.Provider>
|
||||
</SchemaInitializerButtonContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
|
||||
import React from 'react';
|
||||
import { useChartsTranslation } from '../locale';
|
||||
|
||||
export const ChartV2BlockDesigner: React.FC = () => {
|
||||
const { t } = useChartsTranslation();
|
||||
return (
|
||||
<GeneralSchemaDesigner title={t('Charts')}>
|
||||
<SchemaSettings.BlockTitleItem />
|
||||
<SchemaSettings.Divider />
|
||||
<SchemaSettings.Remove
|
||||
removeParentsIfNoChildren
|
||||
breakRemoveOn={{
|
||||
'x-component': 'Grid',
|
||||
}}
|
||||
/>
|
||||
</GeneralSchemaDesigner>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,83 @@
|
||||
import { LineChartOutlined } from '@ant-design/icons';
|
||||
import { ISchema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import { SchemaInitializer, useACLRoleContext, useCollectionDataSourceItems } from '@nocobase/client';
|
||||
import React, { useContext } from 'react';
|
||||
import { useChartsTranslation } from '../locale';
|
||||
import { ChartConfigContext } from './ChartConfigure';
|
||||
|
||||
const itemWrap = SchemaInitializer.itemWrap;
|
||||
const ConfigureButton = itemWrap((props) => {
|
||||
const { setVisible, setCurrent, setData } = useContext(ChartConfigContext);
|
||||
return (
|
||||
<SchemaInitializer.Item
|
||||
{...props}
|
||||
onClick={() => {
|
||||
setCurrent({ schema: {}, field: null, collection: props.item?.name });
|
||||
setData([]);
|
||||
setVisible(true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export const ChartInitializers = () => {
|
||||
const { t } = useChartsTranslation();
|
||||
const collections = useCollectionDataSourceItems('Chart');
|
||||
const { allowAll, parseAction } = useACLRoleContext();
|
||||
const children = collections[0].children
|
||||
.filter((item) => {
|
||||
if (allowAll) {
|
||||
return true;
|
||||
}
|
||||
const params = parseAction(`${item.name}:list`);
|
||||
return params;
|
||||
})
|
||||
.map((item) => ({
|
||||
...item,
|
||||
component: ConfigureButton,
|
||||
}));
|
||||
if (!children.length) {
|
||||
// Leave a blank item to show the filter component
|
||||
children.push({} as any);
|
||||
}
|
||||
collections[0].children = children;
|
||||
return (
|
||||
<SchemaInitializer.Button
|
||||
icon={'PlusOutlined'}
|
||||
items={collections as any}
|
||||
dropdown={{
|
||||
placement: 'bottomLeft',
|
||||
}}
|
||||
>
|
||||
{t('Add chart')}
|
||||
</SchemaInitializer.Button>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChartV2BlockInitializer: React.FC<{
|
||||
insert: (s: ISchema) => void;
|
||||
}> = (props) => {
|
||||
const { insert } = props;
|
||||
return (
|
||||
<SchemaInitializer.Item
|
||||
{...props}
|
||||
icon={<LineChartOutlined />}
|
||||
onClick={() => {
|
||||
insert({
|
||||
type: 'void',
|
||||
'x-component': 'CardItem',
|
||||
'x-designer': 'ChartV2BlockDesigner',
|
||||
properties: {
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-decorator': 'ChartV2Block',
|
||||
'x-initializer': 'ChartInitializers',
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,450 @@
|
||||
import { RightSquareOutlined } from '@ant-design/icons';
|
||||
import { ArrayItems, Editable, Form, FormCollapse, FormItem, Switch } from '@formily/antd';
|
||||
import { createForm, Form as FormType, ObjectField, onFieldChange, onFormInit } from '@formily/core';
|
||||
import { FormConsumer, ISchema, Schema } from '@formily/react';
|
||||
import {
|
||||
AutoComplete,
|
||||
Cascader,
|
||||
DatePicker,
|
||||
Filter,
|
||||
gridRowColWrap,
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
SchemaComponent,
|
||||
Select,
|
||||
useCollectionFieldsOptions,
|
||||
useCollectionFilterOptions,
|
||||
useDesignable,
|
||||
} from '@nocobase/client';
|
||||
import { Alert, Button, Card, Col, Modal, Row, Space, Table, Tabs, Typography } from 'antd';
|
||||
import { cloneDeep, isEqual } from 'lodash';
|
||||
import React, { createContext, useContext, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
useChartFields,
|
||||
useCollectionOptions,
|
||||
useFieldsWithAssociation,
|
||||
useFieldTypes,
|
||||
useFormatters,
|
||||
useOrderFieldsOptions,
|
||||
useOrderReaction,
|
||||
useTransformers,
|
||||
} from '../hooks';
|
||||
import { useChartsTranslation } from '../locale';
|
||||
import { ChartRenderer, ChartRendererProvider, useCharts, useChartTypes } from '../renderer';
|
||||
import { createRendererSchema, getField, getSelectedFields } from '../utils';
|
||||
import { getConfigSchema, querySchema, transformSchema } from './schemas/configure';
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
export type ChartConfigCurrent = {
|
||||
schema: ISchema;
|
||||
field: any;
|
||||
collection: string;
|
||||
};
|
||||
|
||||
export type SelectedField = {
|
||||
field: string | string[];
|
||||
alias?: string;
|
||||
};
|
||||
|
||||
export const ChartConfigContext = createContext<{
|
||||
visible: boolean;
|
||||
setVisible?: (visible: boolean) => void;
|
||||
current?: ChartConfigCurrent;
|
||||
setCurrent?: (current: ChartConfigCurrent) => void;
|
||||
data?: any[] | string;
|
||||
setData?: (data: any[] | string) => void;
|
||||
}>({
|
||||
visible: true,
|
||||
});
|
||||
|
||||
export const ChartConfigure: React.FC<{
|
||||
insert: (
|
||||
s: ISchema,
|
||||
options: {
|
||||
onSuccess: () => void;
|
||||
wrap?: (schema: ISchema) => ISchema;
|
||||
},
|
||||
) => void;
|
||||
}> & {
|
||||
Renderer: React.FC<{
|
||||
runQuery?: any;
|
||||
}>;
|
||||
Config: React.FC;
|
||||
Query: React.FC;
|
||||
Transform: React.FC;
|
||||
Data: React.FC;
|
||||
} = (props) => {
|
||||
const { t } = useChartsTranslation();
|
||||
const { visible, setVisible, current } = useContext(ChartConfigContext);
|
||||
const { schema, field, collection } = current || {};
|
||||
const { dn } = useDesignable();
|
||||
const { insert } = props;
|
||||
|
||||
const charts = useCharts();
|
||||
const fields = useFieldsWithAssociation(collection);
|
||||
const initChart = (overwrite = false) => {
|
||||
if (!form.modified) {
|
||||
return;
|
||||
}
|
||||
const chartType = form.values.config?.chartType;
|
||||
if (!chartType) {
|
||||
return;
|
||||
}
|
||||
const chart = charts[chartType];
|
||||
const init = chart?.init;
|
||||
if (!init) {
|
||||
if (overwrite) {
|
||||
form.values.config.general = {};
|
||||
form.values.config.advanced = {};
|
||||
}
|
||||
return;
|
||||
}
|
||||
const query = form.values.query;
|
||||
const selectedFields = getSelectedFields(fields, query);
|
||||
const { general, advanced } = init(selectedFields, query);
|
||||
if (general || overwrite) {
|
||||
form.values.config.general = general;
|
||||
}
|
||||
if (advanced || overwrite) {
|
||||
form.values.config.advanced = advanced || {};
|
||||
}
|
||||
};
|
||||
|
||||
const [measures, setMeasures] = React.useState([]);
|
||||
const [dimensions, setDimensions] = React.useState([]);
|
||||
const queryReact = (form: FormType, reaction?: () => void) => {
|
||||
const currentMeasures = form.values.query?.measures.filter((item) => item.field) || [];
|
||||
const currentDimensions = form.values.query?.dimensions.filter((item) => item.field) || [];
|
||||
if (isEqual(currentMeasures, measures) && isEqual(currentDimensions, dimensions)) {
|
||||
return;
|
||||
}
|
||||
reaction?.();
|
||||
setMeasures(cloneDeep(currentMeasures));
|
||||
setDimensions(cloneDeep(currentDimensions));
|
||||
};
|
||||
const chartTypes = useChartTypes();
|
||||
const form = useMemo(
|
||||
() => {
|
||||
const chartType = chartTypes[0]?.children?.[0]?.value;
|
||||
return createForm({
|
||||
values: { config: { chartType }, ...schema?.['x-decorator-props'], collection, data: '' },
|
||||
effects: (form) => {
|
||||
onFieldChange('config.chartType', () => initChart(true));
|
||||
onFormInit(() => queryReact(form));
|
||||
},
|
||||
});
|
||||
},
|
||||
// visible, collection added here to re-initialize form when visible, collection change
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[schema, visible, collection],
|
||||
);
|
||||
|
||||
const runQuery = useRef(null);
|
||||
const RunButton: React.FC = () => {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
return (
|
||||
<Button
|
||||
type="link"
|
||||
loading={loading}
|
||||
icon={<RightSquareOutlined />}
|
||||
onClick={async () => {
|
||||
const queryField = form.query('query').take() as ObjectField;
|
||||
try {
|
||||
await queryField?.validate();
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await runQuery?.current(form.values.query);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
queryReact(form, initChart);
|
||||
setLoading(false);
|
||||
}}
|
||||
>
|
||||
{t('Run query')}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
const queryRef = useRef(null);
|
||||
const configRef = useRef(null);
|
||||
return (
|
||||
<Modal
|
||||
title={t('Configure chart')}
|
||||
open={visible}
|
||||
onOk={() => {
|
||||
const { query, config, transform, mode } = form.values;
|
||||
const rendererProps = {
|
||||
query,
|
||||
config,
|
||||
collection,
|
||||
transform,
|
||||
mode: mode || 'builder',
|
||||
};
|
||||
if (schema && schema['x-uid']) {
|
||||
schema['x-decorator-props'] = rendererProps;
|
||||
field.decoratorProps = rendererProps;
|
||||
field['x-acl-action'] = `${collection}:list`;
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
setVisible(false);
|
||||
queryRef.current.scrollTop = 0;
|
||||
configRef.current.scrollTop = 0;
|
||||
return;
|
||||
}
|
||||
insert(createRendererSchema(rendererProps), {
|
||||
onSuccess: () => setVisible(false),
|
||||
wrap: gridRowColWrap,
|
||||
});
|
||||
}}
|
||||
onCancel={() => {
|
||||
Modal.confirm({
|
||||
title: t('Are you sure to cancel?'),
|
||||
content: t('You changes are not saved. If you click OK, your changes will be lost.'),
|
||||
okButtonProps: {
|
||||
danger: true,
|
||||
},
|
||||
onOk: () => {
|
||||
setVisible(false);
|
||||
queryRef.current.scrollTop = 0;
|
||||
configRef.current.scrollTop = 0;
|
||||
},
|
||||
});
|
||||
}}
|
||||
width={'95%'}
|
||||
bodyStyle={{
|
||||
background: 'rgba(128, 128, 128, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Form layout="vertical" form={form}>
|
||||
<Row gutter={8}>
|
||||
<Col span={7}>
|
||||
<Card
|
||||
style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
overflow: 'scroll',
|
||||
}}
|
||||
ref={queryRef}
|
||||
>
|
||||
<Tabs
|
||||
tabBarExtraContent={<RunButton />}
|
||||
items={[
|
||||
{
|
||||
label: t('Query'),
|
||||
key: 'query',
|
||||
children: <ChartConfigure.Query />,
|
||||
},
|
||||
{
|
||||
label: t('Data'),
|
||||
key: 'data',
|
||||
children: <ChartConfigure.Data />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
style={{
|
||||
height: 'calc(100vh - 300px)',
|
||||
overflow: 'scroll',
|
||||
}}
|
||||
ref={configRef}
|
||||
>
|
||||
<Tabs
|
||||
items={[
|
||||
{
|
||||
label: t('Chart'),
|
||||
key: 'chart',
|
||||
children: <ChartConfigure.Config />,
|
||||
},
|
||||
{
|
||||
label: t('Transform'),
|
||||
key: 'transform',
|
||||
children: <ChartConfigure.Transform />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={11}>
|
||||
<Card>
|
||||
<ChartConfigure.Renderer runQuery={runQuery} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
ChartConfigure.Renderer = function Renderer(props) {
|
||||
const { current } = useContext(ChartConfigContext);
|
||||
const { collection } = current || {};
|
||||
return (
|
||||
<FormConsumer>
|
||||
{(form) => {
|
||||
// Any change of config and transform will trigger rerender
|
||||
// Change of query only trigger rerender when "Run query" button is clicked
|
||||
const config = cloneDeep(form.values.config);
|
||||
const transform = cloneDeep(form.values.transform);
|
||||
return (
|
||||
<ChartRendererProvider
|
||||
collection={collection}
|
||||
query={form.values.query}
|
||||
config={config}
|
||||
transform={transform}
|
||||
mode={form.values.mode}
|
||||
>
|
||||
<ChartRenderer configuring={true} {...props} />
|
||||
</ChartRendererProvider>
|
||||
);
|
||||
}}
|
||||
</FormConsumer>
|
||||
);
|
||||
};
|
||||
|
||||
ChartConfigure.Query = function Query() {
|
||||
const { t } = useChartsTranslation();
|
||||
const { t: lang } = useTranslation();
|
||||
const fields = useFieldsWithAssociation();
|
||||
const useFormatterOptions = useFormatters(fields);
|
||||
const collectionOptions = useCollectionOptions();
|
||||
const { current, setCurrent } = useContext(ChartConfigContext);
|
||||
const { collection } = current || {};
|
||||
const fieldOptions = useCollectionFieldsOptions(collection, 1);
|
||||
const compiledFieldOptions = Schema.compile(fieldOptions, { t: lang });
|
||||
const filterOptions = useCollectionFilterOptions(collection);
|
||||
const formCollapse = FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
|
||||
const onCollectionChange = (value: string) => {
|
||||
const { schema, field } = current;
|
||||
const newSchema = { ...schema };
|
||||
newSchema['x-decorator-props'] = { collection: value };
|
||||
newSchema['x-acl-action'] = `${value}:list`;
|
||||
setCurrent({
|
||||
schema: newSchema,
|
||||
field,
|
||||
collection: value,
|
||||
});
|
||||
};
|
||||
const FromSql = () => (
|
||||
<Text code>
|
||||
From <span style={{ color: '#1890ff' }}>{current?.collection}</span>
|
||||
</Text>
|
||||
);
|
||||
return (
|
||||
<SchemaComponent
|
||||
schema={querySchema}
|
||||
scope={{
|
||||
t,
|
||||
formCollapse,
|
||||
fieldOptions: compiledFieldOptions,
|
||||
filterOptions,
|
||||
useOrderOptions: useOrderFieldsOptions(compiledFieldOptions, fields),
|
||||
collectionOptions,
|
||||
useFormatterOptions,
|
||||
onCollectionChange,
|
||||
collection: current?.collection,
|
||||
useOrderReaction: useOrderReaction(compiledFieldOptions, fields),
|
||||
}}
|
||||
components={{
|
||||
ArrayItems,
|
||||
Editable,
|
||||
FormCollapse,
|
||||
Card,
|
||||
Switch,
|
||||
Select,
|
||||
Input,
|
||||
InputNumber,
|
||||
FormItem,
|
||||
Radio,
|
||||
Space,
|
||||
Filter,
|
||||
DatePicker,
|
||||
Text,
|
||||
FromSql,
|
||||
Cascader,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ChartConfigure.Config = function Config() {
|
||||
const { t } = useChartsTranslation();
|
||||
const chartTypes = useChartTypes();
|
||||
const fields = useFieldsWithAssociation();
|
||||
const charts = useCharts();
|
||||
const getChartFields = useChartFields(fields);
|
||||
const getReference = (chartType: string) => {
|
||||
const reference = charts[chartType]?.reference;
|
||||
if (!reference) return '';
|
||||
const { title, link } = reference;
|
||||
return (
|
||||
<span>
|
||||
{t('Config reference: ')}
|
||||
<a href={link} target="_blank" rel="noreferrer">
|
||||
{t(title)}
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormConsumer>
|
||||
{(form) => {
|
||||
const chartType = form.values.config?.chartType;
|
||||
const chart = charts[chartType];
|
||||
const schema = chart?.schema || {};
|
||||
return (
|
||||
<SchemaComponent
|
||||
schema={getConfigSchema(schema)}
|
||||
scope={{ t, chartTypes, useChartFields: getChartFields, getReference }}
|
||||
components={{ Card, Select, Input, FormItem, ArrayItems, Space, AutoComplete }}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</FormConsumer>
|
||||
);
|
||||
};
|
||||
|
||||
ChartConfigure.Transform = function Transform() {
|
||||
const { t } = useChartsTranslation();
|
||||
const fields = useFieldsWithAssociation();
|
||||
const useFieldTypeOptions = useFieldTypes(fields);
|
||||
const getChartFields = useChartFields(fields);
|
||||
return (
|
||||
<SchemaComponent
|
||||
schema={transformSchema}
|
||||
components={{ Select, FormItem, ArrayItems, Space }}
|
||||
scope={{ useChartFields: getChartFields, useFieldTypeOptions, useTransformers, t }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ChartConfigure.Data = function Data() {
|
||||
const { data } = useContext(ChartConfigContext);
|
||||
const fields = useFieldsWithAssociation();
|
||||
return Array.isArray(data) ? (
|
||||
<Table
|
||||
dataSource={data}
|
||||
columns={Object.keys(data[0] || {}).map((col) => {
|
||||
const field = getField(fields, col.split('.'));
|
||||
return {
|
||||
title: field?.label || col,
|
||||
dataIndex: col,
|
||||
key: col,
|
||||
};
|
||||
})}
|
||||
size="small"
|
||||
/>
|
||||
) : (
|
||||
<Alert message="Error" type="error" description={data} showIcon />
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,70 @@
|
||||
import { lang } from '../locale';
|
||||
|
||||
export default {
|
||||
datetime: [
|
||||
{
|
||||
label: lang('YYYY'),
|
||||
value: 'YYYY',
|
||||
},
|
||||
{
|
||||
label: lang('MM'),
|
||||
value: 'MM',
|
||||
},
|
||||
{
|
||||
label: lang('DD'),
|
||||
value: 'DD',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM'),
|
||||
value: 'YYYY-MM',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM-DD'),
|
||||
value: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM-DD hh:mm'),
|
||||
value: 'YYYY-MM-DD hh:mm',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM-DD hh:mm:ss'),
|
||||
value: 'YYYY-MM-DD hh:mm:ss',
|
||||
},
|
||||
],
|
||||
date: [
|
||||
{
|
||||
label: lang('YYYY'),
|
||||
value: 'YYYY',
|
||||
},
|
||||
{
|
||||
label: lang('MM'),
|
||||
value: 'MM',
|
||||
},
|
||||
{
|
||||
label: lang('DD'),
|
||||
value: 'DD',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM'),
|
||||
value: 'YYYY-MM',
|
||||
},
|
||||
{
|
||||
label: lang('YYYY-MM-DD'),
|
||||
value: 'YYYY-MM-DD',
|
||||
},
|
||||
],
|
||||
time: [
|
||||
{
|
||||
label: lang('hh:mm:ss'),
|
||||
value: 'hh:mm:ss',
|
||||
},
|
||||
{
|
||||
label: lang('hh:mm'),
|
||||
value: 'hh:mm',
|
||||
},
|
||||
{
|
||||
label: lang('hh'),
|
||||
value: 'hh',
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
export * from './ChartBlock';
|
||||
export * from './ChartBlockDesigner';
|
||||
export * from './ChartBlockInitializer';
|
||||
export * from './ChartConfigure';
|
||||
@ -0,0 +1,474 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import { lang } from '../../locale';
|
||||
|
||||
const getArraySchema = (fields = {}, extra = {}) => ({
|
||||
type: 'array',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems',
|
||||
...extra,
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
space: {
|
||||
type: 'void',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
sort: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.SortHandle',
|
||||
},
|
||||
...fields,
|
||||
remove: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: '{{t("Add field")}}',
|
||||
'x-component': 'ArrayItems.Addition',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const getConfigSchema = (general: any): ISchema => ({
|
||||
type: 'void',
|
||||
properties: {
|
||||
config: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
chartType: {
|
||||
type: 'string',
|
||||
title: '{{t("Chart type")}}',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Please select a chart type.")}}',
|
||||
},
|
||||
enum: '{{ chartTypes }}',
|
||||
},
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
general,
|
||||
},
|
||||
},
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
advanced: {
|
||||
type: 'json',
|
||||
title: '{{t("JSON config")}}',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-decorator-props': {
|
||||
extra: lang('Same properties set in the form above will be overwritten by this JSON config.'),
|
||||
},
|
||||
'x-component': 'Input.JSON',
|
||||
'x-component-props': {
|
||||
autoSize: {
|
||||
minRows: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
reference: {
|
||||
type: 'string',
|
||||
'x-reactions': {
|
||||
dependencies: ['.chartType'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-content': '{{ getReference($deps[0]) }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const querySchema: ISchema = {
|
||||
type: 'void',
|
||||
properties: {
|
||||
settings: {
|
||||
type: 'void',
|
||||
// 'x-component': 'FormItem',
|
||||
properties: {
|
||||
// mode: {
|
||||
// type: 'string',
|
||||
// 'x-decorator': 'FormItem',
|
||||
// 'x-decorator-props': {
|
||||
// style: {
|
||||
// display: 'inline-block',
|
||||
// width: '45%',
|
||||
// },
|
||||
// },
|
||||
// 'x-component': 'Radio.Group',
|
||||
// 'x-component-props': {
|
||||
// defaultValue: 'builder',
|
||||
// optionType: 'button',
|
||||
// buttonStyle: 'solid',
|
||||
// },
|
||||
// enum: [
|
||||
// {
|
||||
// label: lang('Builder mode'),
|
||||
// value: 'builder',
|
||||
// },
|
||||
// {
|
||||
// label: lang('SQL mode'),
|
||||
// value: 'sql',
|
||||
// },
|
||||
// ],
|
||||
// 'x-reactions': [
|
||||
// {
|
||||
// target: 'query.builder',
|
||||
// fulfill: {
|
||||
// state: {
|
||||
// visible: '{{ $self.value !== "sql" }}',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// target: 'query.sql',
|
||||
// fulfill: {
|
||||
// state: {
|
||||
// visible: '{{ $self.value === "sql" }}',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
collection: {
|
||||
title: '{{t("Collection")}}',
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
options: '{{ collectionOptions }}',
|
||||
onChange: '{{ onCollectionChange }}',
|
||||
placeholder: lang('Collection'),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
query: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
builder: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
collapse: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'FormCollapse',
|
||||
'x-component-props': {
|
||||
formCollapse: '{{formCollapse}}',
|
||||
},
|
||||
properties: {
|
||||
pane1: {
|
||||
type: 'void',
|
||||
'x-component': 'FormCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
header: lang('Measures'),
|
||||
key: 'measures',
|
||||
},
|
||||
properties: {
|
||||
measures: getArraySchema(
|
||||
{
|
||||
field: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Cascader',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Field")}}',
|
||||
fieldNames: {
|
||||
label: 'title',
|
||||
value: 'name',
|
||||
children: 'children',
|
||||
},
|
||||
},
|
||||
enum: '{{ fieldOptions }}',
|
||||
required: true,
|
||||
},
|
||||
aggregation: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Aggregation")}}',
|
||||
},
|
||||
enum: [
|
||||
{ label: lang('Sum'), value: 'sum' },
|
||||
{ label: lang('Count'), value: 'count' },
|
||||
{ label: lang('Avg'), value: 'avg' },
|
||||
{ label: lang('Max'), value: 'max' },
|
||||
{ label: lang('Min'), value: 'min' },
|
||||
],
|
||||
},
|
||||
alias: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Alias")}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
{ required: true },
|
||||
),
|
||||
},
|
||||
},
|
||||
pane2: {
|
||||
type: 'void',
|
||||
'x-component': 'FormCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
header: lang('Dimensions'),
|
||||
key: 'dimensions',
|
||||
},
|
||||
properties: {
|
||||
dimensions: getArraySchema({
|
||||
field: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Cascader',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Field")}}',
|
||||
fieldNames: {
|
||||
label: 'title',
|
||||
value: 'name',
|
||||
children: 'children',
|
||||
},
|
||||
},
|
||||
enum: '{{ fieldOptions }}',
|
||||
required: true,
|
||||
},
|
||||
format: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Format")}}',
|
||||
style: {
|
||||
maxWidth: '120px',
|
||||
},
|
||||
},
|
||||
'x-reactions': '{{ useFormatterOptions }}',
|
||||
'x-visible': '{{ $self.dataSource && $self.dataSource.length }}',
|
||||
},
|
||||
alias: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Alias")}}',
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
pane3: {
|
||||
type: 'void',
|
||||
'x-component': 'FormCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
header: lang('Filter'),
|
||||
key: 'filter',
|
||||
},
|
||||
properties: {
|
||||
filter: {
|
||||
type: 'object',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-decorator-props': {
|
||||
style: {
|
||||
overflow: 'scroll',
|
||||
},
|
||||
},
|
||||
'x-component': 'Filter',
|
||||
'x-component-props': {
|
||||
options: '{{ filterOptions }}',
|
||||
// dynamicComponent: 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
pane4: {
|
||||
type: 'void',
|
||||
'x-component': 'FormCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
header: lang('Sort'),
|
||||
key: 'sort',
|
||||
},
|
||||
properties: {
|
||||
orders: getArraySchema(
|
||||
{
|
||||
field: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Cascader',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Field")}}',
|
||||
},
|
||||
'x-reactions': '{{ useOrderOptions }}',
|
||||
required: true,
|
||||
},
|
||||
order: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Radio.Group',
|
||||
'x-component-props': {
|
||||
defaultValue: 'ASC',
|
||||
optionType: 'button',
|
||||
},
|
||||
enum: ['ASC', 'DESC'],
|
||||
},
|
||||
},
|
||||
{
|
||||
'x-reactions': '{{ useOrderReaction }}',
|
||||
},
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
limit: {
|
||||
title: '{{t("Limit")}}',
|
||||
type: 'number',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'InputNumber',
|
||||
'x-component-props': {
|
||||
defaultValue: 2000,
|
||||
max: 2000,
|
||||
min: 1,
|
||||
style: {
|
||||
width: '100px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// sql: {
|
||||
// type: 'object',
|
||||
// properties: {
|
||||
// select: {
|
||||
// type: 'void',
|
||||
// 'x-decorator': 'p',
|
||||
// 'x-component': 'Text',
|
||||
// 'x-component-props': {
|
||||
// code: true,
|
||||
// },
|
||||
// 'x-content': 'SELECT',
|
||||
// },
|
||||
// fields: {
|
||||
// type: 'string',
|
||||
// 'x-decorator': 'FormItem',
|
||||
// 'x-component': 'Input.TextArea',
|
||||
// 'x-component-props': {
|
||||
// autoSize: {
|
||||
// minRows: 2,
|
||||
// },
|
||||
// placeholder: 'Fields',
|
||||
// },
|
||||
// required: true,
|
||||
// },
|
||||
// from: {
|
||||
// type: 'void',
|
||||
// 'x-decorator': 'p',
|
||||
// 'x-component': 'FromSql',
|
||||
// },
|
||||
// clauses: {
|
||||
// type: 'string',
|
||||
// 'x-decorator': 'FormItem',
|
||||
// 'x-component': 'Input.TextArea',
|
||||
// 'x-component-props': {
|
||||
// autoSize: {
|
||||
// minRows: 5,
|
||||
// },
|
||||
// placeholder: 'Join, Where, Group By, Having, Order By, Limit',
|
||||
// },
|
||||
// required: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
cache: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
enabled: {
|
||||
type: 'boolean',
|
||||
title: '{{t("Enable cache")}}',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Switch',
|
||||
},
|
||||
ttl: {
|
||||
type: 'number',
|
||||
title: '{{t("TTL (second)")}}',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'InputNumber',
|
||||
'x-component-props': {
|
||||
defaultValue: 60,
|
||||
min: 1,
|
||||
style: {
|
||||
width: '100px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const transformSchema: ISchema = {
|
||||
type: 'void',
|
||||
properties: {
|
||||
transform: getArraySchema(
|
||||
{
|
||||
field: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Field")}}',
|
||||
style: {
|
||||
maxWidth: '100px',
|
||||
},
|
||||
},
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
},
|
||||
type: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Type")}}',
|
||||
},
|
||||
'x-reactions': '{{ useFieldTypeOptions }}',
|
||||
},
|
||||
format: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-component-props': {
|
||||
placeholder: '{{t("Format")}}',
|
||||
},
|
||||
'x-reactions': '{{ useTransformers }}',
|
||||
'x-visible': '{{ $self.dataSource && $self.dataSource.length }}',
|
||||
},
|
||||
},
|
||||
{
|
||||
'x-decorator-props': {
|
||||
style: {
|
||||
width: '50%',
|
||||
},
|
||||
},
|
||||
},
|
||||
),
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,52 @@
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const transformers: {
|
||||
[key: string]: {
|
||||
[key: string]: (val: any, locale?: string) => string | number;
|
||||
};
|
||||
} = {
|
||||
datetime: {
|
||||
YYYY: (val: string) => dayjs(val).format('YYYY'),
|
||||
MM: (val: string) => dayjs(val).format('MM'),
|
||||
DD: (val: string) => dayjs(val).format('DD'),
|
||||
'YYYY-MM': (val: string) => dayjs(val).format('YYYY-MM'),
|
||||
'YYYY-MM-DD': (val: string) => dayjs(val).format('YYYY-MM-DD'),
|
||||
'YYYY-MM-DD hh:mm': (val: string) => dayjs(val).format('YYYY-MM-DD hh:mm'),
|
||||
'YYYY-MM-DD hh:mm:ss': (val: string) => dayjs(val).format('YYYY-MM-DD hh:mm:ss'),
|
||||
},
|
||||
date: {
|
||||
YYYY: (val: string) => dayjs(val).format('YYYY'),
|
||||
MM: (val: string) => dayjs(val).format('MM'),
|
||||
DD: (val: string) => dayjs(val).format('DD'),
|
||||
'YYYY-MM': (val: string) => dayjs(val).format('YYYY-MM'),
|
||||
'YYYY-MM-DD': (val: string) => dayjs(val).format('YYYY-MM-DD'),
|
||||
},
|
||||
time: {
|
||||
'hh:mm:ss': (val: string) => dayjs(val).format('hh:mm:ss'),
|
||||
'hh:mm': (val: string) => dayjs(val).format('hh:mm'),
|
||||
hh: (val: string) => dayjs(val).format('hh'),
|
||||
},
|
||||
number: {
|
||||
Percent: (val: number) =>
|
||||
new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(
|
||||
val,
|
||||
),
|
||||
Currency: (val: number, locale = 'en-US') => {
|
||||
const currency = {
|
||||
'zh-CN': 'CNY',
|
||||
'en-US': 'USD',
|
||||
'ja-JP': 'JPY',
|
||||
'ko-KR': 'KRW',
|
||||
'pt-BR': 'BRL',
|
||||
'ru-RU': 'RUB',
|
||||
'tr-TR': 'TRY',
|
||||
'es-ES': 'EUR',
|
||||
}[locale];
|
||||
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(val);
|
||||
},
|
||||
Exponential: (val: number | string) => (+val)?.toExponential(),
|
||||
Abbreviation: (val: number, locale = 'en-US') => new Intl.NumberFormat(locale, { notation: 'compact' }).format(val),
|
||||
},
|
||||
};
|
||||
|
||||
export default transformers;
|
||||
239
packages/plugins/data-visualization/src/client/hooks.ts
Normal file
239
packages/plugins/data-visualization/src/client/hooks.ts
Normal file
@ -0,0 +1,239 @@
|
||||
import { ArrayField } from '@formily/core';
|
||||
import { ISchema, Schema } from '@formily/react';
|
||||
import { useACLRoleContext, useCollectionManager } from '@nocobase/client';
|
||||
import { useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ChartConfigContext } from './block/ChartConfigure';
|
||||
import formatters from './block/formatters';
|
||||
import transformers from './block/transformers';
|
||||
import { lang } from './locale';
|
||||
import { ChartRendererProps } from './renderer';
|
||||
import { getField, getSelectedFields, parseField } from './utils';
|
||||
|
||||
export type FieldOption = {
|
||||
value: string;
|
||||
label: string;
|
||||
key: string;
|
||||
alias?: string;
|
||||
name?: string;
|
||||
type?: string;
|
||||
interface?: string;
|
||||
uiSchema?: ISchema;
|
||||
target?: string;
|
||||
targetFields?: FieldOption[];
|
||||
};
|
||||
|
||||
export const useFields = (collection?: string) => {
|
||||
const { current } = useContext(ChartConfigContext);
|
||||
if (!collection) {
|
||||
collection = current?.collection || '';
|
||||
}
|
||||
const { getCollectionFields } = useCollectionManager();
|
||||
const fields = (getCollectionFields(collection) || [])
|
||||
.filter((field) => {
|
||||
return field.interface;
|
||||
})
|
||||
.map((field) => ({
|
||||
...field,
|
||||
key: field.name,
|
||||
label: field.uiSchema?.title || field.name,
|
||||
value: field.name,
|
||||
}));
|
||||
return fields;
|
||||
};
|
||||
|
||||
export const useFieldsWithAssociation = (collection?: string) => {
|
||||
const { getCollectionFields } = useCollectionManager();
|
||||
const { t } = useTranslation();
|
||||
const fields = useFields(collection);
|
||||
return fields.map((field) => {
|
||||
const label = Schema.compile(field.uiSchema?.title || field.name, { t });
|
||||
if (!field.target) {
|
||||
return { ...field, label };
|
||||
}
|
||||
const targetFields = (getCollectionFields(field.target) || [])
|
||||
.filter((targetField) => {
|
||||
return targetField.interface;
|
||||
})
|
||||
.map((targetField) => ({
|
||||
...targetField,
|
||||
key: `${field.name}.${targetField.name}`,
|
||||
label: `${label} / ${Schema.compile(targetField.uiSchema?.title || targetField.name, { t })}`,
|
||||
value: `${field.name}.${targetField.name}`,
|
||||
}));
|
||||
return {
|
||||
...field,
|
||||
label,
|
||||
targetFields,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const useChartFields = (fields: FieldOption[]) => (field: any) => {
|
||||
const query = field.query('query').get('value') || {};
|
||||
const selectedFields = getSelectedFields(fields, query);
|
||||
field.dataSource = selectedFields;
|
||||
};
|
||||
|
||||
export const useFormatters = (fields: FieldOption[]) => (field: any) => {
|
||||
const selectedField = field.query('.field').get('value');
|
||||
if (!selectedField) {
|
||||
field.dataSource = [];
|
||||
return;
|
||||
}
|
||||
let options = [];
|
||||
const fieldInterface = getField(fields, selectedField)?.interface;
|
||||
switch (fieldInterface) {
|
||||
case 'datetime':
|
||||
case 'createdAt':
|
||||
case 'updatedAt':
|
||||
options = formatters.datetime;
|
||||
break;
|
||||
case 'date':
|
||||
options = formatters.date;
|
||||
break;
|
||||
case 'time':
|
||||
options = formatters.time;
|
||||
break;
|
||||
default:
|
||||
options = [];
|
||||
}
|
||||
field.dataSource = options;
|
||||
};
|
||||
|
||||
export const useCollectionOptions = () => {
|
||||
const { t } = useTranslation();
|
||||
const { collections } = useCollectionManager();
|
||||
const { allowAll, parseAction } = useACLRoleContext();
|
||||
const options = collections
|
||||
.filter((collection: { name: string }) => {
|
||||
if (allowAll) {
|
||||
return true;
|
||||
}
|
||||
const params = parseAction(`${collection.name}:list`);
|
||||
return params;
|
||||
})
|
||||
.map((collection: { name: string; title: string }) => ({
|
||||
label: collection.title,
|
||||
value: collection.name,
|
||||
key: collection.name,
|
||||
}));
|
||||
return Schema.compile(options, { t });
|
||||
};
|
||||
|
||||
/**
|
||||
* useFieldTypes
|
||||
* Get field types for using transformers
|
||||
* Only supported types will be displayed
|
||||
* Some interfaces and types will be mapped to supported types
|
||||
*/
|
||||
export const useFieldTypes = (fields: FieldOption[]) => (field: any) => {
|
||||
const selectedField = field.query('.field').get('value');
|
||||
const query = field.query('query').get('value') || {};
|
||||
const selectedFields = getSelectedFields(fields, query);
|
||||
const fieldProps = selectedFields.find((field) => field.value === selectedField);
|
||||
const supports = Object.keys(transformers);
|
||||
field.dataSource = supports.map((key) => ({
|
||||
label: lang(key),
|
||||
value: key,
|
||||
}));
|
||||
const map = {
|
||||
createdAt: 'datetime',
|
||||
updatedAt: 'datetime',
|
||||
double: 'number',
|
||||
integer: 'number',
|
||||
percent: 'number',
|
||||
};
|
||||
const fieldInterface = fieldProps?.interface;
|
||||
const fieldType = fieldProps?.type;
|
||||
const key = map[fieldInterface] || map[fieldType] || fieldType;
|
||||
if (supports.includes(key)) {
|
||||
field.setState({
|
||||
value: key,
|
||||
disabled: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
field.setState({
|
||||
value: null,
|
||||
disabled: false,
|
||||
});
|
||||
};
|
||||
|
||||
export const useTransformers = (field: any) => {
|
||||
const selectedType = field.query('.type').get('value');
|
||||
if (!selectedType) {
|
||||
field.dataSource = [];
|
||||
return;
|
||||
}
|
||||
const options = Object.keys(transformers[selectedType] || {}).map((key) => ({
|
||||
label: lang(key),
|
||||
value: key,
|
||||
}));
|
||||
field.dataSource = options;
|
||||
};
|
||||
|
||||
export const useFieldTransformer = (transform: ChartRendererProps['transform'], locale = 'en-US') => {
|
||||
return (transform || [])
|
||||
.filter((item) => item.field && item.type && item.format)
|
||||
.reduce((mp, item) => {
|
||||
const transformer = transformers[item.type][item.format];
|
||||
if (!transformer) {
|
||||
return mp;
|
||||
}
|
||||
mp[item.field] = (val: any) => transformer(val, locale);
|
||||
return mp;
|
||||
}, {});
|
||||
};
|
||||
|
||||
export const useOrderFieldsOptions = (defaultOptions: any[], fields: FieldOption[]) => (field: any) => {
|
||||
const query = field.query('query').get('value') || {};
|
||||
const { measures = [] } = query;
|
||||
const hasAgg = measures.some((measure: { aggregation?: string }) => measure.aggregation);
|
||||
if (!hasAgg) {
|
||||
field.componentProps.fieldNames = {
|
||||
label: 'title',
|
||||
value: 'name',
|
||||
children: 'children',
|
||||
};
|
||||
field.dataSource = defaultOptions;
|
||||
return;
|
||||
}
|
||||
const selectedFields = getSelectedFields(fields, query);
|
||||
field.componentProps.fieldNames = {};
|
||||
field.dataSource = selectedFields;
|
||||
};
|
||||
|
||||
export const useOrderReaction = (defaultOptions: any[], fields: FieldOption[]) => (field: ArrayField) => {
|
||||
const query = field.query('query').get('value') || {};
|
||||
const { measures = [] } = query;
|
||||
const hasAgg = measures.some((measure: { aggregation?: string }) => measure.aggregation);
|
||||
let dataSource = defaultOptions;
|
||||
const allValues = [];
|
||||
if (hasAgg) {
|
||||
dataSource = getSelectedFields(fields, query);
|
||||
dataSource.forEach((field) => {
|
||||
allValues.push(field.value);
|
||||
});
|
||||
} else {
|
||||
dataSource.forEach((field) => {
|
||||
const children = field.children || [];
|
||||
if (!children.length) {
|
||||
allValues.push(field.value || field.name);
|
||||
}
|
||||
children.forEach((child: any) => {
|
||||
allValues.push(`${field.name}.${child.name}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const orders = field.value || [];
|
||||
const newOrders = orders.reduce((newOrders: any[], item: any) => {
|
||||
const { alias } = parseField(item.field);
|
||||
if (!item.field || allValues.includes(alias)) {
|
||||
newOrders.push(item);
|
||||
}
|
||||
return newOrders;
|
||||
}, []);
|
||||
field.setValue(newOrders);
|
||||
};
|
||||
41
packages/plugins/data-visualization/src/client/index.tsx
Normal file
41
packages/plugins/data-visualization/src/client/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { SchemaComponentOptions, SchemaInitializerContext, SchemaInitializerProvider } from '@nocobase/client';
|
||||
import React, { useContext } from 'react';
|
||||
import { ChartInitializers, ChartV2Block, ChartV2BlockDesigner, ChartV2BlockInitializer } from './block';
|
||||
import { useChartsTranslation } from './locale';
|
||||
import { ChartRenderer, ChartRendererProvider, InternalLibrary } from './renderer';
|
||||
import { ChartLibraryProvider } from './renderer/ChartLibrary';
|
||||
|
||||
const Chart: React.FC = (props) => {
|
||||
const { t } = useChartsTranslation();
|
||||
const initializers = useContext<any>(SchemaInitializerContext);
|
||||
const children = initializers.BlockInitializers.items[0].children;
|
||||
const has = children.some((initializer) => initializer.component === 'ChartV2BlockInitializer');
|
||||
if (!has) {
|
||||
children.push({
|
||||
key: 'chart-v2',
|
||||
type: 'item',
|
||||
title: t('Chart'),
|
||||
component: 'ChartV2BlockInitializer',
|
||||
});
|
||||
}
|
||||
return (
|
||||
<SchemaComponentOptions
|
||||
components={{
|
||||
ChartV2BlockInitializer,
|
||||
ChartRenderer,
|
||||
ChartV2BlockDesigner,
|
||||
ChartV2Block,
|
||||
ChartRendererProvider,
|
||||
}}
|
||||
>
|
||||
<SchemaInitializerProvider initializers={{ ...initializers, ChartInitializers }}>
|
||||
<ChartLibraryProvider name="Built-in" charts={InternalLibrary}>
|
||||
{props.children}
|
||||
</ChartLibraryProvider>
|
||||
</SchemaInitializerProvider>
|
||||
</SchemaComponentOptions>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chart;
|
||||
export { ChartLibraryProvider };
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
Edit: 'Edit',
|
||||
Delete: 'Delete',
|
||||
Cancel: 'Cancel',
|
||||
Submit: 'Submit',
|
||||
Actions: 'Actions',
|
||||
Title: 'Title',
|
||||
Enable: 'Enable',
|
||||
'SAML manager': 'SAML manager',
|
||||
'SAML Providers': 'SAML Providers',
|
||||
'Redirect url': 'Redirect url',
|
||||
'SP entity id': 'SP entity id',
|
||||
'Add provider': 'Add',
|
||||
'Edit provider': 'Edit',
|
||||
'Client id': 'Client id',
|
||||
'Entity id or issuer': 'Entity id or issuer',
|
||||
'Login Url': 'Login Url',
|
||||
'Public cert': 'Public cert',
|
||||
'Delete provider': 'Delete',
|
||||
'Are you sure you want to delete it?': 'Are you sure you want to delete it?',
|
||||
'Sign in button name, which will be displayed on the sign in page':
|
||||
'Sign in button name, which will be displayed on the sign in page',
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
import { i18n } from '@nocobase/client';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import zhCN from './zh-CN';
|
||||
|
||||
export const NAMESPACE = 'charts-v2';
|
||||
|
||||
i18n.addResources('zh-CN', NAMESPACE, zhCN);
|
||||
// i18n.addResources('en-US', NAMESPACE, enUS);
|
||||
// i18n.addResources('ja-JP', NAMESPACE, jaJP);
|
||||
// i18n.addResources('ru-RU', NAMESPACE, ruRU);
|
||||
// i18n.addResources('tr-TR', NAMESPACE, trTR);
|
||||
|
||||
export function lang(key: string) {
|
||||
return i18n.t(key, { ns: NAMESPACE });
|
||||
}
|
||||
|
||||
export function useChartsTranslation() {
|
||||
return useTranslation(NAMESPACE);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
Edit: 'Editar',
|
||||
Delete: 'Delete',
|
||||
Cancel: 'Cancelar',
|
||||
Submit: 'Enviar',
|
||||
Actions: 'Ações',
|
||||
Title: 'Titulo',
|
||||
Enable: 'Ativo',
|
||||
'SAML manager': 'Gerenciador SAML',
|
||||
'SAML Providers': 'Provedores SAML',
|
||||
'Redirect url': 'URL de redirecionamento',
|
||||
'SP entity id': 'ID de entidade do provedor de serviço (SP)',
|
||||
'Add provider': 'Adicionar',
|
||||
'Edit provider': 'Editar',
|
||||
'Client id': 'ID do cliente',
|
||||
'Entity id or issuer': 'ID de entidade ou emissor',
|
||||
'Login Url': 'URL de login',
|
||||
'Public cert': 'Certificado público',
|
||||
'Delete provider': 'Excluir',
|
||||
'Are you sure you want to delete it?': 'Tem certeza de que deseja excluí-lo?',
|
||||
'Sign in button name, which will be displayed on the sign in page':
|
||||
'Nome do botão de login, que será exibido na página de login',
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1,71 @@
|
||||
export default {
|
||||
Edit: '编辑',
|
||||
Delete: '删除',
|
||||
Cancel: '取消',
|
||||
Submit: '提交',
|
||||
Actions: '操作',
|
||||
Title: '名称',
|
||||
Enable: '启用',
|
||||
Chart: '图表',
|
||||
ChartV2: '图表V2',
|
||||
Charts: '图表',
|
||||
Configure: '配置',
|
||||
Duplicate: '复制',
|
||||
'Configure chart': '配置图表',
|
||||
Transform: '数据转换',
|
||||
'Chart type': '图表类型',
|
||||
'JSON config': 'JSON 配置',
|
||||
Query: '查询',
|
||||
Data: '数据',
|
||||
'Run query': '执行查询',
|
||||
Measures: '度量',
|
||||
Dimensions: '维度',
|
||||
Filter: '过滤',
|
||||
Sort: '排序',
|
||||
Limit: '结果数量',
|
||||
'Enable cache': '启用缓存',
|
||||
'TTL (second)': '缓存时间 (秒)',
|
||||
Field: '字段',
|
||||
Aggregation: '聚合',
|
||||
Alias: '别名',
|
||||
Format: '格式',
|
||||
'The first 10 records of the query result:': '查询结果的前 10 条记录：',
|
||||
'Please run query to retrive data.': '请执行查询来获取数据。',
|
||||
Type: '类型',
|
||||
'Add field': '添加字段',
|
||||
'Add chart': '添加图表',
|
||||
xField: 'x轴字段',
|
||||
yField: 'y轴字段',
|
||||
seriesField: '分类字段',
|
||||
angleField: '角度字段',
|
||||
colorField: '颜色字段',
|
||||
'Line Chart': '折线图',
|
||||
'Area Chart': '面积图',
|
||||
'Column Chart': '柱状图',
|
||||
'Bar Chart': '条形图',
|
||||
'Pie Chart': '饼图',
|
||||
'Dual Axes Chart': '双轴图',
|
||||
'Scatter Chart': '散点图',
|
||||
'Gauge Chart': '仪表盘',
|
||||
Statistic: '统计',
|
||||
Currency: '货币',
|
||||
Percent: '百分比',
|
||||
Exponential: '科学记数法',
|
||||
Abbreviation: '缩写',
|
||||
'Please configure and run query': '请配置并执行数据查询',
|
||||
'Please configure chart': '请配置图表',
|
||||
'Are you sure to cancel?': '确定要取消吗？',
|
||||
'You changes are not saved. If you click OK, your changes will be lost.':
|
||||
'您的更改尚未保存。如果您点击“确定”，您的更改将丢失。',
|
||||
'Same properties set in the form above will be overwritten by this JSON config.':
|
||||
'上面表单中设置的相同属性将被JSON配置覆盖。',
|
||||
'Built-in': '内置图表',
|
||||
'Config reference: ': '配置参考: ',
|
||||
Table: '表格',
|
||||
Sum: '求和',
|
||||
Avg: '平均值',
|
||||
Count: '计数',
|
||||
Min: '最小值',
|
||||
Max: '最大值',
|
||||
'Please select a chart type.': '请选择图表类型',
|
||||
};
|
||||
@ -0,0 +1,178 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import { FieldOption } from '../hooks';
|
||||
import { lang } from '../locale';
|
||||
import { parseField } from '../utils';
|
||||
import { QueryProps } from './ChartRendererProvider';
|
||||
|
||||
/**
|
||||
* @params {usePropsFunc} useProps - Accept the information that the chart component needs to render,
|
||||
* process it and return the props of the chart component.
|
||||
*/
|
||||
export type usePropsFunc = (props: {
|
||||
data: any[];
|
||||
fieldProps: {
|
||||
[field: string]: FieldOption & {
|
||||
transformer: (val: any) => string;
|
||||
};
|
||||
};
|
||||
general: any;
|
||||
advanced: any;
|
||||
}) => any;
|
||||
|
||||
export type ChartProps = {
|
||||
name: string;
|
||||
component: React.FC<any>;
|
||||
schema?: ISchema;
|
||||
useProps?: usePropsFunc;
|
||||
// The init function is used to initialize the configuration of the chart component from the query configuration.
|
||||
init?: (
|
||||
fields: FieldOption[],
|
||||
query: {
|
||||
measures?: QueryProps['measures'];
|
||||
dimensions?: QueryProps['dimensions'];
|
||||
},
|
||||
) => {
|
||||
general?: any;
|
||||
advanced?: any;
|
||||
};
|
||||
reference?: {
|
||||
title: string;
|
||||
link: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type Charts = {
|
||||
[type: string]: ChartProps;
|
||||
};
|
||||
|
||||
export type ChartLibraries = {
|
||||
[library: string]: {
|
||||
enabled: boolean;
|
||||
charts: Charts;
|
||||
};
|
||||
};
|
||||
|
||||
export const ChartLibraryContext = createContext<ChartLibraries>({});
|
||||
|
||||
export const useCharts = (): Charts => {
|
||||
const library = useContext(ChartLibraryContext);
|
||||
return Object.values(library)
|
||||
.filter((l) => l.enabled)
|
||||
.reduce((charts, l) => ({ ...charts, ...l.charts }), {});
|
||||
};
|
||||
|
||||
export const useChartTypes = (): {
|
||||
label: string;
|
||||
children: (ChartProps & {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string;
|
||||
})[];
|
||||
}[] => {
|
||||
const library = useContext(ChartLibraryContext);
|
||||
return Object.entries(library)
|
||||
.filter(([_, l]) => l.enabled)
|
||||
.reduce((charts, [name, l]) => {
|
||||
const children = Object.entries(l.charts).map(([type, chart]) => ({
|
||||
...chart,
|
||||
key: type,
|
||||
label: chart.name,
|
||||
value: type,
|
||||
}));
|
||||
return [
|
||||
...charts,
|
||||
{
|
||||
label: lang(name),
|
||||
children,
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
};
|
||||
|
||||
export const useToggleChartLibrary = () => {
|
||||
const ctx = useContext(ChartLibraryContext);
|
||||
return {
|
||||
toggle: (library: string) => {
|
||||
ctx[library].enabled = !ctx[library].enabled;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const ChartLibraryProvider: React.FC<{
|
||||
name: string;
|
||||
charts: Charts;
|
||||
}> = (props) => {
|
||||
const { children, charts, name } = props;
|
||||
const ctx = useContext(ChartLibraryContext);
|
||||
const library = {
|
||||
...ctx,
|
||||
[name]: {
|
||||
charts,
|
||||
enabled: true,
|
||||
},
|
||||
};
|
||||
return <ChartLibraryContext.Provider value={library}>{children}</ChartLibraryContext.Provider>;
|
||||
};
|
||||
|
||||
export const infer = (
|
||||
fields: FieldOption[],
|
||||
{
|
||||
measures,
|
||||
dimensions,
|
||||
}: {
|
||||
measures?: QueryProps['measures'];
|
||||
dimensions?: QueryProps['dimensions'];
|
||||
},
|
||||
) => {
|
||||
let xField: FieldOption;
|
||||
let yField: FieldOption;
|
||||
let seriesField: FieldOption;
|
||||
let yFields: FieldOption[];
|
||||
const getField = (fields: FieldOption[], selected: { field: string | string[]; alias?: string }) => {
|
||||
if (selected.alias) {
|
||||
return fields.find((f) => f.value === selected.alias);
|
||||
}
|
||||
const { alias } = parseField(selected.field);
|
||||
return fields.find((f) => f.value === alias);
|
||||
};
|
||||
if (measures?.length) {
|
||||
yField = getField(fields, measures[0]);
|
||||
yFields = measures.map((m) => getField(fields, m));
|
||||
}
|
||||
if (dimensions) {
|
||||
if (dimensions.length === 1) {
|
||||
xField = getField(fields, dimensions[0]);
|
||||
} else if (dimensions.length > 1) {
|
||||
// If there is a time field, it is used as the x-axis field by default.
|
||||
let xIndex: number;
|
||||
dimensions.forEach((d, i) => {
|
||||
const field = getField(fields, d);
|
||||
if (['date', 'time', 'datetime'].includes(field?.type)) {
|
||||
xField = field;
|
||||
xIndex = i;
|
||||
}
|
||||
});
|
||||
if (xIndex) {
|
||||
// If there is a time field, the other field is used as the series field by default.
|
||||
const index = xIndex === 0 ? 1 : 0;
|
||||
seriesField = getField(fields, dimensions[index]);
|
||||
} else {
|
||||
xField = getField(fields, dimensions[0]);
|
||||
seriesField = getField(fields, dimensions[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return { xField, yField, seriesField, yFields };
|
||||
};
|
||||
|
||||
export const commonInit: ChartProps['init'] = (fields, { measures, dimensions }) => {
|
||||
const { xField, yField, seriesField } = infer(fields, { measures, dimensions });
|
||||
return {
|
||||
general: {
|
||||
xField: xField?.value,
|
||||
yField: yField?.value,
|
||||
seriesField: seriesField?.value,
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,201 @@
|
||||
import { useField, useFieldSchema } from '@formily/react';
|
||||
import {
|
||||
GeneralSchemaDesigner,
|
||||
gridRowColWrap,
|
||||
SchemaSettings,
|
||||
useAPIClient,
|
||||
useCollection,
|
||||
useDesignable,
|
||||
useRequest,
|
||||
} from '@nocobase/client';
|
||||
import { Empty, Result, Typography } from 'antd';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import { ChartConfigContext } from '../block';
|
||||
import { useFieldsWithAssociation, useFieldTransformer } from '../hooks';
|
||||
import { useChartsTranslation } from '../locale';
|
||||
import { createRendererSchema, getField, parseField, processData } from '../utils';
|
||||
import { useCharts } from './ChartLibrary';
|
||||
import { ChartRendererContext, DimensionProps, MeasureProps, QueryProps } from './ChartRendererProvider';
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
export const ChartRenderer: React.FC<{
|
||||
configuring?: boolean;
|
||||
runQuery?: any;
|
||||
}> & {
|
||||
Designer: React.FC;
|
||||
} = (props) => {
|
||||
const { t } = useChartsTranslation();
|
||||
const { setData: setQueryData, current } = useContext(ChartConfigContext);
|
||||
const { query, config, collection, transform } = useContext(ChartRendererContext);
|
||||
const { configuring, runQuery } = props;
|
||||
const general = config?.general || {};
|
||||
const advanced = config?.advanced || {};
|
||||
const schema = useFieldSchema();
|
||||
const currentSchema = schema || current?.schema;
|
||||
const fields = useFieldsWithAssociation(collection);
|
||||
const api = useAPIClient();
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const { runAsync } = useRequest(
|
||||
(query) =>
|
||||
api
|
||||
.request({
|
||||
url: 'charts:query',
|
||||
method: 'POST',
|
||||
data: {
|
||||
uid: currentSchema?.['x-uid'],
|
||||
collection,
|
||||
...query,
|
||||
dimensions: (query?.dimensions || []).map((item: DimensionProps) => {
|
||||
const dimension = { ...item };
|
||||
if (item.format && !item.alias) {
|
||||
const { alias } = parseField(item.field);
|
||||
dimension.alias = alias;
|
||||
}
|
||||
return dimension;
|
||||
}),
|
||||
measures: (query?.measures || []).map((item: MeasureProps) => {
|
||||
const measure = { ...item };
|
||||
if (item.aggregation && !item.alias) {
|
||||
const { alias } = parseField(item.field);
|
||||
measure.alias = alias;
|
||||
}
|
||||
return measure;
|
||||
}),
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res?.data?.data || [];
|
||||
return processData(fields, data, { t });
|
||||
}),
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
setData(data);
|
||||
},
|
||||
onFinally(params, data, error: any) {
|
||||
if (!configuring) {
|
||||
return;
|
||||
}
|
||||
if (error) {
|
||||
const message = error?.response?.data?.errors?.map?.((error: any) => error.message).join('\n');
|
||||
setQueryData(message || error.message);
|
||||
return;
|
||||
}
|
||||
setQueryData(data);
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setData([]);
|
||||
const run = async (query: QueryProps) => {
|
||||
if (
|
||||
query?.measures?.length
|
||||
// || (query?.sql?.fields && query?.sql?.clauses)
|
||||
) {
|
||||
await runAsync(query);
|
||||
}
|
||||
};
|
||||
if (runQuery) {
|
||||
runQuery.current = run;
|
||||
}
|
||||
run(query);
|
||||
}, [query, runAsync, runQuery]);
|
||||
|
||||
const charts = useCharts();
|
||||
const chart = charts[config?.chartType];
|
||||
const Component = chart?.component;
|
||||
const locale = api.auth.getLocale();
|
||||
const transformers = useFieldTransformer(transform, locale);
|
||||
const info = {
|
||||
data,
|
||||
general,
|
||||
advanced,
|
||||
fieldProps: Object.keys(data[0] || {}).reduce((props, name) => {
|
||||
if (!props[name]) {
|
||||
const field = getField(fields, name.split('.'));
|
||||
const transformer = transformers[name];
|
||||
props[name] = { ...field, transformer };
|
||||
}
|
||||
return props;
|
||||
}, {}),
|
||||
locale,
|
||||
};
|
||||
const componentProps = chart?.useProps?.(info) || info;
|
||||
const C = () =>
|
||||
Component ? (
|
||||
<ErrorBoundary
|
||||
onError={(error) => {
|
||||
console.error(error);
|
||||
}}
|
||||
FallbackComponent={ErrorFallback}
|
||||
>
|
||||
<Component {...componentProps} />
|
||||
</ErrorBoundary>
|
||||
) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />
|
||||
);
|
||||
|
||||
return data && data.length ? (
|
||||
<C />
|
||||
) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure and run query')} />
|
||||
);
|
||||
};
|
||||
|
||||
ChartRenderer.Designer = function Designer() {
|
||||
const { t } = useChartsTranslation();
|
||||
const { setVisible, setCurrent } = useContext(ChartConfigContext);
|
||||
const field = useField();
|
||||
const schema = useFieldSchema();
|
||||
const { insertAdjacent } = useDesignable();
|
||||
const { name, title } = useCollection();
|
||||
return (
|
||||
<GeneralSchemaDesigner disableInitializer title={title || name}>
|
||||
<SchemaSettings.Item
|
||||
key="configure"
|
||||
onClick={() => {
|
||||
setCurrent({ schema, field, collection: name });
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
{t('Configure')}
|
||||
</SchemaSettings.Item>
|
||||
<SchemaSettings.Item
|
||||
key="duplicate"
|
||||
onClick={() =>
|
||||
insertAdjacent('afterEnd', createRendererSchema(schema?.['x-decorator-props']), {
|
||||
wrap: gridRowColWrap,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('Duplicate')}
|
||||
</SchemaSettings.Item>
|
||||
<SchemaSettings.BlockTitleItem />
|
||||
<SchemaSettings.Divider />
|
||||
<SchemaSettings.Remove
|
||||
// removeParentsIfNoChildren
|
||||
breakRemoveOn={{
|
||||
'x-component': 'ChartV2Block',
|
||||
}}
|
||||
/>
|
||||
</GeneralSchemaDesigner>
|
||||
);
|
||||
};
|
||||
|
||||
const ErrorFallback = ({ error }) => {
|
||||
const { t } = useChartsTranslation();
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: 'white' }}>
|
||||
<Result status="error" title={t('Render Failed')} subTitle={t('Please check the configuration.')}>
|
||||
<Paragraph copyable>
|
||||
<Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
|
||||
{error.message}
|
||||
</Text>
|
||||
</Paragraph>
|
||||
</Result>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,58 @@
|
||||
import { MaybeCollectionProvider } from '@nocobase/client';
|
||||
import React, { createContext } from 'react';
|
||||
|
||||
export type MeasureProps = {
|
||||
field: string | string[];
|
||||
aggregation?: string;
|
||||
alias?: string;
|
||||
};
|
||||
|
||||
export type DimensionProps = {
|
||||
field: string | string[];
|
||||
alias?: string;
|
||||
format?: string;
|
||||
};
|
||||
|
||||
export type TransformProps = {
|
||||
field: string;
|
||||
type: string;
|
||||
format: string;
|
||||
};
|
||||
|
||||
export type QueryProps = Partial<{
|
||||
measures: MeasureProps[];
|
||||
dimensions: DimensionProps[];
|
||||
orders: {
|
||||
field: string;
|
||||
order: 'asc' | 'desc';
|
||||
}[];
|
||||
filter: any;
|
||||
limit: number;
|
||||
sql: {
|
||||
fields?: string;
|
||||
clauses?: string;
|
||||
};
|
||||
}>;
|
||||
|
||||
export type ChartRendererProps = {
|
||||
collection: string;
|
||||
query?: QueryProps;
|
||||
config?: {
|
||||
chartType: string;
|
||||
general: any;
|
||||
advanced: any;
|
||||
};
|
||||
transform?: TransformProps[];
|
||||
mode?: 'builder' | 'sql';
|
||||
};
|
||||
|
||||
export const ChartRendererContext = createContext<ChartRendererProps>({} as any);
|
||||
|
||||
export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
|
||||
const { collection } = props;
|
||||
return (
|
||||
<MaybeCollectionProvider collection={collection}>
|
||||
<ChartRendererContext.Provider value={{ ...props }}>{props.children}</ChartRendererContext.Provider>
|
||||
</MaybeCollectionProvider>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
export * from './ChartLibrary';
|
||||
export * from './ChartRenderer';
|
||||
export * from './ChartRendererProvider';
|
||||
export * from './library';
|
||||
@ -0,0 +1,94 @@
|
||||
import { Statistic, Table } from 'antd';
|
||||
import { lang } from '../../locale';
|
||||
import { Charts, infer } from '../ChartLibrary';
|
||||
|
||||
export const AntdLibrary: Charts = {
|
||||
statistic: {
|
||||
name: lang('Statistic'),
|
||||
component: Statistic,
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
field: {
|
||||
title: lang('Field'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
title: lang('Title'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
init: (fields, { measures, dimensions }) => {
|
||||
const { yField } = infer(fields, { measures, dimensions });
|
||||
return {
|
||||
general: {
|
||||
field: yField?.value,
|
||||
title: yField?.label,
|
||||
},
|
||||
};
|
||||
},
|
||||
useProps: ({ data, fieldProps, general, advanced }) => {
|
||||
const record = data[0] || {};
|
||||
const field = general?.field;
|
||||
const props = fieldProps[field];
|
||||
return {
|
||||
value: record[field],
|
||||
formatter: props?.transformer,
|
||||
...general,
|
||||
...advanced,
|
||||
};
|
||||
},
|
||||
reference: {
|
||||
title: lang('Statistic'),
|
||||
link: 'https://ant.design/components/statistic/',
|
||||
},
|
||||
},
|
||||
table: {
|
||||
name: lang('Table'),
|
||||
component: Table,
|
||||
useProps: ({ data, fieldProps, general, advanced }) => {
|
||||
const columns = data.length
|
||||
? Object.keys(data[0]).map((item) => ({
|
||||
title: fieldProps[item]?.label || item,
|
||||
dataIndex: item,
|
||||
key: item,
|
||||
}))
|
||||
: [];
|
||||
const dataSource = data.map((item: any) => {
|
||||
Object.keys(item).map((key: string) => {
|
||||
const props = fieldProps[key];
|
||||
if (props?.transformer) {
|
||||
item[key] = props.transformer(item[key]);
|
||||
}
|
||||
});
|
||||
return item;
|
||||
});
|
||||
const pageSize = advanced?.pagination?.pageSize || 10;
|
||||
return {
|
||||
bordered: true,
|
||||
size: 'middle',
|
||||
pagination:
|
||||
dataSource.length < pageSize
|
||||
? false
|
||||
: {
|
||||
pageSize,
|
||||
},
|
||||
dataSource,
|
||||
columns,
|
||||
...general,
|
||||
...advanced,
|
||||
};
|
||||
},
|
||||
reference: {
|
||||
title: lang('Table'),
|
||||
link: 'https://ant.design/components/table/',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,236 @@
|
||||
import { Area, Bar, Column, DualAxes, Line, Pie, Scatter } from '@ant-design/plots';
|
||||
import { lang } from '../../locale';
|
||||
import { Charts, commonInit, infer, usePropsFunc } from '../ChartLibrary';
|
||||
const init = commonInit;
|
||||
|
||||
const basicSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
xField: {
|
||||
title: lang('xField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
yField: {
|
||||
title: lang('yField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
seriesField: {
|
||||
title: lang('seriesField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const useProps: usePropsFunc = ({ data, fieldProps, general, advanced }) => {
|
||||
const meta = {};
|
||||
Object.entries(fieldProps).forEach(([key, props]) => {
|
||||
meta[key] = {
|
||||
formatter: props.transformer,
|
||||
alias: props.label,
|
||||
};
|
||||
});
|
||||
return {
|
||||
data,
|
||||
meta,
|
||||
...general,
|
||||
...advanced,
|
||||
};
|
||||
};
|
||||
|
||||
export const G2PlotLibrary: Charts = {
|
||||
line: {
|
||||
name: lang('Line Chart'),
|
||||
component: Line,
|
||||
schema: basicSchema,
|
||||
init,
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Line Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/bar',
|
||||
},
|
||||
},
|
||||
area: {
|
||||
name: lang('Area Chart'),
|
||||
component: Area,
|
||||
schema: basicSchema,
|
||||
init,
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Area Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/area',
|
||||
},
|
||||
},
|
||||
column: {
|
||||
name: lang('Column Chart'),
|
||||
component: Column,
|
||||
schema: basicSchema,
|
||||
init,
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Column Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/column',
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
name: lang('Bar Chart'),
|
||||
component: Bar,
|
||||
schema: basicSchema,
|
||||
init: (fields, { measures, dimensions }) => {
|
||||
const { xField, yField, seriesField } = infer(fields, { measures, dimensions });
|
||||
return {
|
||||
general: {
|
||||
xField: yField?.value,
|
||||
yField: xField?.value,
|
||||
seriesField: seriesField?.value,
|
||||
},
|
||||
};
|
||||
},
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Bar Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/bar',
|
||||
},
|
||||
},
|
||||
pie: {
|
||||
name: lang('Pie Chart'),
|
||||
component: Pie,
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
angleField: {
|
||||
title: lang('angleField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
colorField: {
|
||||
title: lang('colorField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
init: (fields, { measures, dimensions }) => {
|
||||
const { xField, yField } = infer(fields, { measures, dimensions });
|
||||
return {
|
||||
general: {
|
||||
colorField: xField?.value,
|
||||
angleField: yField?.value,
|
||||
},
|
||||
};
|
||||
},
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Pie Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/pie',
|
||||
},
|
||||
},
|
||||
dualAxes: {
|
||||
name: lang('Dual Axes Chart'),
|
||||
component: DualAxes,
|
||||
useProps: ({ data, fieldProps, general, advanced }) => {
|
||||
return {
|
||||
...useProps({ data, fieldProps, general, advanced }),
|
||||
data: [data, data],
|
||||
};
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
xField: {
|
||||
title: lang('xField'),
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
required: true,
|
||||
},
|
||||
yField: {
|
||||
title: lang('yField'),
|
||||
type: 'array',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'void',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
sort: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.SortHandle',
|
||||
},
|
||||
input: {
|
||||
type: 'string',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Select',
|
||||
'x-reactions': '{{ useChartFields }}',
|
||||
'x-component-props': {
|
||||
style: {
|
||||
'min-width': '200px',
|
||||
},
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
remove: {
|
||||
type: 'void',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'ArrayItems.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: lang('Add'),
|
||||
'x-component': 'ArrayItems.Addition',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
init: (fields, { measures, dimensions }) => {
|
||||
const { xField, yFields } = infer(fields, { measures, dimensions });
|
||||
return {
|
||||
general: {
|
||||
xField: xField?.value,
|
||||
yField: yFields?.map((f) => f.value).slice(0, 2) || [],
|
||||
},
|
||||
};
|
||||
},
|
||||
reference: {
|
||||
title: lang('Dual Axes Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/dual-axes',
|
||||
},
|
||||
},
|
||||
// gauge: {
|
||||
// name: lang('Gauge Chart'),
|
||||
// component: Gauge,
|
||||
// },
|
||||
scatter: {
|
||||
name: lang('Scatter Chart'),
|
||||
component: Scatter,
|
||||
schema: basicSchema,
|
||||
init,
|
||||
useProps,
|
||||
reference: {
|
||||
title: lang('Scatter Chart'),
|
||||
link: 'https://g2plot.antv.antgroup.com/api/plots/scatter',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
import { AntdLibrary } from './AntdLibrary';
|
||||
import { G2PlotLibrary } from './G2PlotLibrary';
|
||||
|
||||
export const InternalLibrary = { ...G2PlotLibrary, ...AntdLibrary };
|
||||
102
packages/plugins/data-visualization/src/client/utils.ts
Normal file
102
packages/plugins/data-visualization/src/client/utils.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { Schema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import { SelectedField } from './block';
|
||||
import { FieldOption } from './hooks';
|
||||
import { QueryProps } from './renderer';
|
||||
|
||||
export const createRendererSchema = (decoratorProps: any, componentProps = {}) => {
|
||||
const { collection } = decoratorProps;
|
||||
return {
|
||||
type: 'void',
|
||||
'x-decorator': 'ChartRendererProvider',
|
||||
'x-decorator-props': decoratorProps,
|
||||
'x-acl-action': `${collection}:list`,
|
||||
'x-designer': 'ChartRenderer.Designer',
|
||||
'x-component': 'CardItem',
|
||||
'x-component-props': {
|
||||
size: 'small',
|
||||
},
|
||||
'x-initializer': 'ChartInitializers',
|
||||
properties: {
|
||||
[uid()]: {
|
||||
type: 'void',
|
||||
'x-component': 'ChartRenderer',
|
||||
'x-component-props': componentProps,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// For AssociationField, the format of field is [targetField, field]
|
||||
export const parseField = (field: string | string[]) => {
|
||||
let target: string;
|
||||
let name: string;
|
||||
if (!Array.isArray(field)) {
|
||||
name = field;
|
||||
} else if (field.length === 1) {
|
||||
name = field[0];
|
||||
} else if (field.length > 1) {
|
||||
[target, name] = field;
|
||||
}
|
||||
return { target, name, alias: target ? `${target}.${name}` : name };
|
||||
};
|
||||
|
||||
export const getField = (fields: FieldOption[], field: string | string[]) => {
|
||||
const { target, name } = parseField(field);
|
||||
if (!target) {
|
||||
return fields.find((f) => f.name === name);
|
||||
}
|
||||
const targetField = fields.find((f) => f.name === target)?.targetFields?.find((f) => f.name === name);
|
||||
return targetField;
|
||||
};
|
||||
|
||||
export const getSelectedFields = (fields: FieldOption[], query: QueryProps) => {
|
||||
// When field alias is set, appends it to the field list
|
||||
const process = (selectedFields: SelectedField[]) => {
|
||||
return selectedFields.map((selectedField) => {
|
||||
const fieldProps = getField(fields, selectedField.field);
|
||||
return {
|
||||
...fieldProps,
|
||||
key: selectedField.alias || fieldProps?.key,
|
||||
label: selectedField.alias || fieldProps?.label,
|
||||
value: selectedField.alias || fieldProps?.value,
|
||||
};
|
||||
});
|
||||
};
|
||||
const measures = query.measures || [];
|
||||
const dimensions = query.dimensions || [];
|
||||
// unique
|
||||
const map = new Map([...process(measures), ...process(dimensions)].map((item) => [item.value, item]));
|
||||
const selectedFields = [...map.values()];
|
||||
return selectedFields;
|
||||
};
|
||||
|
||||
export const processData = (fields: FieldOption[], data: any[], scope: any) => {
|
||||
const parseEnum = (field: FieldOption, value: any) => {
|
||||
const options = field.uiSchema?.enum as { value: string; label: string }[];
|
||||
if (!options || !Array.isArray(options)) {
|
||||
return value;
|
||||
}
|
||||
const option = options.find((option) => option.value === value);
|
||||
return Schema.compile(option?.label || value, scope);
|
||||
};
|
||||
return data.map((record) => {
|
||||
const processed = {};
|
||||
Object.entries(record).forEach(([key, value]) => {
|
||||
const field = getField(fields, key.split('.'));
|
||||
if (!field) {
|
||||
processed[key] = value;
|
||||
return;
|
||||
}
|
||||
switch (field.interface) {
|
||||
case 'select':
|
||||
case 'radioGroup':
|
||||
processed[key] = parseEnum(field, value);
|
||||
break;
|
||||
default:
|
||||
processed[key] = value;
|
||||
}
|
||||
});
|
||||
return processed;
|
||||
});
|
||||
};
|
||||
1
packages/plugins/data-visualization/src/index.ts
Normal file
1
packages/plugins/data-visualization/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './server';
|
||||
@ -0,0 +1,105 @@
|
||||
import { Database } from '@nocobase/database';
|
||||
import { MockServer, mockServer } from '@nocobase/test';
|
||||
import { queryData } from '../actions/query';
|
||||
import ChartsV2Plugin from '../plugin';
|
||||
|
||||
describe('api', () => {
|
||||
let app: MockServer;
|
||||
let db: Database;
|
||||
|
||||
beforeAll(async () => {
|
||||
app = mockServer({
|
||||
acl: true,
|
||||
plugins: ['users', 'auth'],
|
||||
});
|
||||
app.plugin(ChartsV2Plugin);
|
||||
await app.loadAndInstall({ clean: true });
|
||||
db = app.db;
|
||||
|
||||
db.collection({
|
||||
name: 'chart_test',
|
||||
fields: [
|
||||
{
|
||||
type: 'double',
|
||||
name: 'price',
|
||||
},
|
||||
{
|
||||
type: 'bigInt',
|
||||
name: 'count',
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
name: 'title',
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
name: 'createdAt',
|
||||
},
|
||||
],
|
||||
});
|
||||
await db.sync();
|
||||
const repo = db.getRepository('chart_test');
|
||||
await repo.create({
|
||||
values: [
|
||||
{ price: 1, count: 1, title: 'title1' },
|
||||
{ price: 2, count: 2, title: 'title2' },
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await db.close();
|
||||
});
|
||||
|
||||
test('query', () => {
|
||||
expect.assertions(1);
|
||||
return expect(
|
||||
queryData({ db } as any, {
|
||||
collection: 'chart_test',
|
||||
measures: [
|
||||
{
|
||||
field: ['price'],
|
||||
alias: 'Price',
|
||||
},
|
||||
{
|
||||
field: ['count'],
|
||||
alias: 'Count',
|
||||
},
|
||||
],
|
||||
dimensions: [
|
||||
{
|
||||
field: ['title'],
|
||||
alias: 'Title',
|
||||
},
|
||||
],
|
||||
}),
|
||||
).resolves.toBeDefined();
|
||||
});
|
||||
|
||||
test('query with sort', () => {
|
||||
expect.assertions(1);
|
||||
return expect(
|
||||
queryData({ db } as any, {
|
||||
collection: 'chart_test',
|
||||
measures: [
|
||||
{
|
||||
field: ['price'],
|
||||
aggregation: 'sum',
|
||||
alias: 'Price',
|
||||
},
|
||||
],
|
||||
dimensions: [
|
||||
{
|
||||
field: ['title'],
|
||||
alias: 'Title',
|
||||
},
|
||||
{
|
||||
field: ['createdAt'],
|
||||
format: 'YYYY',
|
||||
},
|
||||
],
|
||||
orders: [{ field: 'createdAt', order: 'asc' }],
|
||||
}),
|
||||
).resolves.toBeDefined();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
import { dateFormatFn } from '../actions/formatter';
|
||||
|
||||
describe('formatter', () => {
|
||||
const field = 'field';
|
||||
const format = 'YYYY-MM-DD hh:mm:ss';
|
||||
describe('dateFormatFn', () => {
|
||||
it('should return correct format for sqlite', () => {
|
||||
const sequelize = {
|
||||
fn: jest.fn().mockImplementation((fn: string, format: string, field: string) => ({
|
||||
fn,
|
||||
format,
|
||||
field,
|
||||
})),
|
||||
col: jest.fn().mockImplementation((field: string) => field),
|
||||
};
|
||||
const dialect = 'sqlite';
|
||||
const result = dateFormatFn(sequelize, dialect, field, format);
|
||||
expect(result.format).toEqual('%Y-%m-%d %H:%M:%S');
|
||||
});
|
||||
|
||||
it('should return correct format for mysql', () => {
|
||||
const sequelize = {
|
||||
fn: jest.fn().mockImplementation((fn: string, field: string, format: string) => ({
|
||||
fn,
|
||||
format,
|
||||
field,
|
||||
})),
|
||||
col: jest.fn().mockImplementation((field: string) => field),
|
||||
};
|
||||
const dialect = 'mysql';
|
||||
const result = dateFormatFn(sequelize, dialect, field, format);
|
||||
expect(result.format).toEqual('%Y-%m-%d %H:%i:%S');
|
||||
});
|
||||
|
||||
it('should return correct format for postgres', () => {
|
||||
const sequelize = {
|
||||
fn: jest.fn().mockImplementation((fn: string, field: string, format: string) => ({
|
||||
fn,
|
||||
format,
|
||||
field,
|
||||
})),
|
||||
col: jest.fn().mockImplementation((field: string) => field),
|
||||
};
|
||||
const dialect = 'postgres';
|
||||
const result = dateFormatFn(sequelize, dialect, field, format);
|
||||
expect(result.format).toEqual('YYYY-MM-DD HH24:MI:SS');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,220 @@
|
||||
import { MockServer, mockServer } from '@nocobase/test';
|
||||
import * as formatter from '../actions/formatter';
|
||||
import { cacheWrap, parseBuilder, parseFieldAndAssociations } from '../actions/query';
|
||||
|
||||
describe('query', () => {
|
||||
describe('parseBuilder', () => {
|
||||
const sequelize = {
|
||||
fn: jest.fn().mockImplementation((fn: string, field: string) => [fn, field]),
|
||||
col: jest.fn().mockImplementation((field: string) => field),
|
||||
};
|
||||
let ctx: any;
|
||||
let app: MockServer;
|
||||
|
||||
beforeAll(() => {
|
||||
app = mockServer();
|
||||
app.db.collection({
|
||||
name: 'orders',
|
||||
fields: [
|
||||
{
|
||||
name: 'id',
|
||||
type: 'bigInt',
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
type: 'double',
|
||||
},
|
||||
{
|
||||
name: 'createdAt',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
type: 'belongsTo',
|
||||
name: 'user',
|
||||
target: 'users',
|
||||
targetKey: 'id',
|
||||
foreignKey: 'userId',
|
||||
},
|
||||
],
|
||||
});
|
||||
app.db.collection({
|
||||
name: 'users',
|
||||
fields: [
|
||||
{
|
||||
name: 'id',
|
||||
type: 'bigInt',
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
type: 'string',
|
||||
},
|
||||
],
|
||||
});
|
||||
ctx = {
|
||||
db: {
|
||||
sequelize,
|
||||
getRepository: (name: string) => app.db.getRepository(name),
|
||||
getModel: (name: string) => app.db.getModel(name),
|
||||
getCollection: (name: string) => app.db.getCollection(name),
|
||||
options: {
|
||||
underscored: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
it('should parse field and associations', () => {
|
||||
const associations = parseFieldAndAssociations(ctx, {
|
||||
collection: 'orders',
|
||||
measures: [{ field: ['price'], aggregation: 'sum', alias: 'price' }],
|
||||
dimensions: [{ field: ['createdAt'] }, { field: ['user', 'name'] }],
|
||||
});
|
||||
expect(associations).toMatchObject({
|
||||
measures: [{ field: 'orders.price', aggregation: 'sum', alias: 'price', type: 'double' }],
|
||||
dimensions: [
|
||||
{ field: 'orders.created_at', alias: 'createdAt', type: 'date' },
|
||||
{ field: 'user.name', alias: 'user.name' },
|
||||
],
|
||||
include: [{ association: 'user' }],
|
||||
});
|
||||
});
|
||||
|
||||
it('should parse measures', () => {
|
||||
const measures1 = [
|
||||
{
|
||||
field: ['price'],
|
||||
},
|
||||
];
|
||||
const { queryParams: result1 } = parseBuilder(ctx, { collection: 'orders', measures: measures1 });
|
||||
expect(result1.attributes).toEqual([['orders.price', 'price']]);
|
||||
|
||||
const measures2 = [
|
||||
{
|
||||
field: ['price'],
|
||||
aggregation: 'sum',
|
||||
alias: 'price-alias',
|
||||
},
|
||||
];
|
||||
const { queryParams: result2 } = parseBuilder(ctx, { collection: 'orders', measures: measures2 });
|
||||
expect(result2.attributes).toEqual([[['sum', 'orders.price'], 'price-alias']]);
|
||||
});
|
||||
|
||||
it('should parse dimensions', () => {
|
||||
jest.spyOn(formatter, 'formatter').mockReturnValue('formatted-field');
|
||||
const dimensions = [
|
||||
{
|
||||
field: ['createdAt'],
|
||||
format: 'YYYY-MM-DD',
|
||||
alias: 'Created at',
|
||||
},
|
||||
];
|
||||
const { queryParams: result } = parseBuilder(ctx, { collection: 'orders', dimensions });
|
||||
expect(result.attributes).toEqual([['formatted-field', 'Created at']]);
|
||||
expect(result.group).toEqual([]);
|
||||
|
||||
const measures = [
|
||||
{
|
||||
field: ['field'],
|
||||
aggregation: 'sum',
|
||||
},
|
||||
];
|
||||
const { queryParams: result2 } = parseBuilder(ctx, { collection: 'orders', measures, dimensions });
|
||||
expect(result2.group).toEqual(['formatted-field']);
|
||||
});
|
||||
|
||||
it('should parse filter', () => {
|
||||
const filter = {
|
||||
createdAt: {
|
||||
$gt: '2020-01-01',
|
||||
},
|
||||
};
|
||||
const { queryParams: result } = parseBuilder(ctx, { collection: 'orders', filter });
|
||||
expect(result.where.createdAt).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('cacheWrap', () => {
|
||||
const key = 'test-key';
|
||||
const value = 'test-val';
|
||||
class MockCache {
|
||||
map: Map<string, any> = new Map();
|
||||
async func() {
|
||||
return value;
|
||||
}
|
||||
|
||||
get(key: string) {
|
||||
return this.map.get(key);
|
||||
}
|
||||
set(key: string, value: any) {
|
||||
this.map.set(key, value);
|
||||
}
|
||||
}
|
||||
let cache: any;
|
||||
let query: () => Promise<any>;
|
||||
|
||||
beforeEach(() => {
|
||||
cache = new MockCache();
|
||||
});
|
||||
|
||||
it('should use cache', async () => {
|
||||
query = async () =>
|
||||
await cacheWrap(cache, {
|
||||
key,
|
||||
func: cache.func,
|
||||
useCache: true,
|
||||
refresh: false,
|
||||
});
|
||||
|
||||
const spy = jest.spyOn(cache, 'func');
|
||||
expect(cache.get(key)).toBeUndefined();
|
||||
const result = await query();
|
||||
expect(cache.func).toBeCalled();
|
||||
expect(result).toEqual(value);
|
||||
expect(cache.get(key)).toEqual(value);
|
||||
|
||||
spy.mockReset();
|
||||
const result2 = await query();
|
||||
expect(result2).toEqual(value);
|
||||
expect(cache.func).not.toBeCalled();
|
||||
});
|
||||
|
||||
it('should not use cache', async () => {
|
||||
query = async () =>
|
||||
await cacheWrap(cache, {
|
||||
key,
|
||||
func: cache.func,
|
||||
useCache: false,
|
||||
refresh: false,
|
||||
});
|
||||
|
||||
cache.set(key, value);
|
||||
expect(cache.get(key)).toBeDefined();
|
||||
jest.spyOn(cache, 'func');
|
||||
const result = await query();
|
||||
expect(cache.func).toBeCalled();
|
||||
expect(result).toEqual(value);
|
||||
});
|
||||
|
||||
it('should refresh', async () => {
|
||||
query = async () =>
|
||||
await cacheWrap(cache, {
|
||||
key,
|
||||
func: cache.func,
|
||||
useCache: true,
|
||||
refresh: true,
|
||||
});
|
||||
|
||||
const spy = jest.spyOn(cache, 'func');
|
||||
expect(cache.get(key)).toBeUndefined();
|
||||
const result = await query();
|
||||
expect(cache.func).toBeCalled();
|
||||
expect(result).toEqual(value);
|
||||
expect(cache.get(key)).toEqual(value);
|
||||
|
||||
spy.mockClear();
|
||||
const result2 = await query();
|
||||
expect(cache.func).toBeCalled();
|
||||
expect(result2).toEqual(value);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
export const dateFormatFn = (sequelize: any, dialect: string, field: string, format: string) => {
|
||||
switch (dialect) {
|
||||
case 'sqlite':
|
||||
format = format
|
||||
.replace(/YYYY/g, '%Y')
|
||||
.replace(/MM/g, '%m')
|
||||
.replace(/DD/g, '%d')
|
||||
.replace(/hh/g, '%H')
|
||||
.replace(/mm/g, '%M')
|
||||
.replace(/ss/g, '%S');
|
||||
return sequelize.fn('strftime', format, sequelize.col(field));
|
||||
case 'mysql':
|
||||
format = format
|
||||
.replace(/YYYY/g, '%Y')
|
||||
.replace(/MM/g, '%m')
|
||||
.replace(/DD/g, '%d')
|
||||
.replace(/hh/g, '%H')
|
||||
.replace(/mm/g, '%i')
|
||||
.replace(/ss/g, '%S');
|
||||
return sequelize.fn('date_format', sequelize.col(field), format);
|
||||
case 'postgres':
|
||||
format = format.replace(/hh/g, 'HH24').replace(/mm/g, 'MI').replace(/ss/g, 'SS');
|
||||
return sequelize.fn('to_char', sequelize.col(field), format);
|
||||
default:
|
||||
return field;
|
||||
}
|
||||
};
|
||||
|
||||
export const formatFn = (sequelize: any, dialect: string, field: string, format: string) => {
|
||||
switch (dialect) {
|
||||
case 'sqlite':
|
||||
case 'postgres':
|
||||
return sequelize.fn('format', format, sequelize.col(field));
|
||||
default:
|
||||
return field;
|
||||
}
|
||||
};
|
||||
|
||||
export const formatter = (sequelize: any, type: string, field: string, format: string) => {
|
||||
const dialect = sequelize.getDialect();
|
||||
switch (type) {
|
||||
case 'date':
|
||||
case 'datetime':
|
||||
case 'time':
|
||||
return dateFormatFn(sequelize, dialect, field, format);
|
||||
default:
|
||||
return formatFn(sequelize, dialect, field, format);
|
||||
}
|
||||
};
|
||||
285
packages/plugins/data-visualization/src/server/actions/query.ts
Normal file
285
packages/plugins/data-visualization/src/server/actions/query.ts
Normal file
@ -0,0 +1,285 @@
|
||||
import { Context, Next } from '@nocobase/actions';
|
||||
import { Cache } from '@nocobase/cache';
|
||||
import { FilterParser, snakeCase } from '@nocobase/database';
|
||||
import ChartsV2Plugin from '../plugin';
|
||||
import { formatter } from './formatter';
|
||||
|
||||
type MeasureProps = {
|
||||
field: string | string[];
|
||||
type?: string;
|
||||
aggregation?: string;
|
||||
alias?: string;
|
||||
};
|
||||
|
||||
type DimensionProps = {
|
||||
field: string | string[];
|
||||
type?: string;
|
||||
alias?: string;
|
||||
format?: string;
|
||||
};
|
||||
|
||||
type OrderProps = {
|
||||
field: string | string[];
|
||||
alias?: string;
|
||||
order?: 'asc' | 'desc';
|
||||
};
|
||||
|
||||
type QueryParams = Partial<{
|
||||
uid: string;
|
||||
collection: string;
|
||||
measures: MeasureProps[];
|
||||
dimensions: DimensionProps[];
|
||||
orders: OrderProps[];
|
||||
filter: any;
|
||||
limit: number;
|
||||
sql: {
|
||||
fields?: string;
|
||||
clauses?: string;
|
||||
};
|
||||
cache: {
|
||||
enabled: boolean;
|
||||
ttl: number;
|
||||
};
|
||||
// Get the latest data from the database
|
||||
refresh: boolean;
|
||||
}>;
|
||||
|
||||
export const parseFieldAndAssociations = (ctx: Context, params: QueryParams) => {
|
||||
const { collection: collectionName, measures, dimensions, orders, filter } = params;
|
||||
const collection = ctx.db.getCollection(collectionName);
|
||||
const fields = collection.fields;
|
||||
const underscored = ctx.db.options.underscored;
|
||||
const models: {
|
||||
[target: string]: {
|
||||
type: string;
|
||||
};
|
||||
} = {};
|
||||
const parseField = (selected: { field: string | string[]; alias?: string }) => {
|
||||
let target: string;
|
||||
let name: string;
|
||||
if (!Array.isArray(selected.field)) {
|
||||
name = selected.field;
|
||||
} else if (selected.field.length === 1) {
|
||||
name = selected.field[0];
|
||||
} else if (selected.field.length > 1) {
|
||||
[target, name] = selected.field;
|
||||
}
|
||||
let field = underscored ? snakeCase(name) : name;
|
||||
let type = fields.get(name)?.type;
|
||||
if (target) {
|
||||
field = `${target}.${field}`;
|
||||
name = `${target}.${name}`;
|
||||
type = fields.get(target)?.type;
|
||||
if (!models[target]) {
|
||||
models[target] = { type };
|
||||
}
|
||||
} else {
|
||||
field = `${collectionName}.${field}`;
|
||||
}
|
||||
return {
|
||||
...selected,
|
||||
field,
|
||||
name,
|
||||
type,
|
||||
alias: selected.alias || name,
|
||||
};
|
||||
};
|
||||
|
||||
const parsedMeasures = measures?.map(parseField) || [];
|
||||
const parsedDimensions = dimensions?.map(parseField) || [];
|
||||
const parsedOrders = orders?.map(parseField) || [];
|
||||
const include = Object.entries(models).map(([target, { type }]) => ({
|
||||
association: target,
|
||||
attributes: [],
|
||||
...(type === 'belongsToMany' ? { through: { attributes: [] } } : {}),
|
||||
}));
|
||||
|
||||
const filterParser = new FilterParser(filter, {
|
||||
collection,
|
||||
});
|
||||
const { where, include: filterInclude } = filterParser.toSequelizeParams();
|
||||
const parsedFilterInclude = filterInclude?.map((item) => {
|
||||
if (fields.get(item.association)?.type === 'belongsToMany') {
|
||||
item.through = { attributes: [] };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
return {
|
||||
where,
|
||||
measures: parsedMeasures,
|
||||
dimensions: parsedDimensions,
|
||||
orders: parsedOrders,
|
||||
include: [...include, ...(parsedFilterInclude || [])],
|
||||
};
|
||||
};
|
||||
|
||||
export const parseBuilder = (ctx: Context, builder: QueryParams) => {
|
||||
const { sequelize } = ctx.db;
|
||||
const { limit } = builder;
|
||||
const { measures, dimensions, orders, include, where } = parseFieldAndAssociations(ctx, builder);
|
||||
const attributes = [];
|
||||
const group = [];
|
||||
const order = [];
|
||||
const fieldMap = {};
|
||||
let hasAgg = false;
|
||||
|
||||
measures.forEach((measure: MeasureProps & { field: string }) => {
|
||||
const { field, aggregation, alias } = measure;
|
||||
const attribute = [];
|
||||
const col = sequelize.col(field);
|
||||
if (aggregation) {
|
||||
hasAgg = true;
|
||||
attribute.push(sequelize.fn(aggregation, col));
|
||||
} else {
|
||||
attribute.push(col);
|
||||
}
|
||||
if (alias) {
|
||||
attribute.push(alias);
|
||||
}
|
||||
attributes.push(attribute.length > 1 ? attribute : attribute[0]);
|
||||
fieldMap[alias || field] = measure;
|
||||
});
|
||||
|
||||
dimensions.forEach((dimension: DimensionProps & { field: string }) => {
|
||||
const { field, format, alias, type } = dimension;
|
||||
const attribute = [];
|
||||
const col = sequelize.col(field);
|
||||
if (format) {
|
||||
attribute.push(formatter(sequelize, type, field, format));
|
||||
} else {
|
||||
attribute.push(col);
|
||||
}
|
||||
if (alias) {
|
||||
attribute.push(alias);
|
||||
}
|
||||
attributes.push(attribute.length > 1 ? attribute : attribute[0]);
|
||||
if (hasAgg) {
|
||||
group.push(attribute[0]);
|
||||
}
|
||||
fieldMap[alias || field] = dimension;
|
||||
});
|
||||
|
||||
orders.forEach((item: OrderProps) => {
|
||||
const name = hasAgg ? sequelize.literal(`"${item.alias}"`) : sequelize.col(item.field as string);
|
||||
order.push([name, item.order || 'ASC']);
|
||||
});
|
||||
|
||||
return {
|
||||
queryParams: {
|
||||
where,
|
||||
attributes,
|
||||
include,
|
||||
group,
|
||||
order,
|
||||
limit: limit > 2000 ? 2000 : limit,
|
||||
raw: true,
|
||||
},
|
||||
fieldMap,
|
||||
};
|
||||
};
|
||||
|
||||
export const processData = (ctx: Context, data: any[], fieldMap: { [source: string]: { type?: string } }) => {
|
||||
const { sequelize } = ctx.db;
|
||||
const dialect = sequelize.getDialect();
|
||||
switch (dialect) {
|
||||
case 'postgres':
|
||||
// https://github.com/sequelize/sequelize/issues/4550
|
||||
return data.map((record) => {
|
||||
const result = {};
|
||||
Object.entries(record).forEach(([key, value]) => {
|
||||
const { type } = fieldMap[key] || {};
|
||||
switch (type) {
|
||||
case 'bigInt':
|
||||
case 'integer':
|
||||
case 'float':
|
||||
case 'double':
|
||||
value = Number(value);
|
||||
break;
|
||||
}
|
||||
result[key] = value;
|
||||
});
|
||||
return result;
|
||||
});
|
||||
default:
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
export const queryData = async (ctx: Context, builder: QueryParams) => {
|
||||
const { collection, measures, dimensions, orders, filter, limit, sql } = builder;
|
||||
const model = ctx.db.getModel(collection);
|
||||
const { queryParams, fieldMap } = parseBuilder(ctx, { collection, measures, dimensions, orders, filter, limit });
|
||||
const data = await model.findAll(queryParams);
|
||||
return processData(ctx, data, fieldMap);
|
||||
// if (!sql) {
|
||||
// return await repository.find(parseBuilder(ctx, { collection, measures, dimensions, orders, filter, limit }));
|
||||
// }
|
||||
|
||||
// const statement = `SELECT ${sql.fields} FROM ${collection} ${sql.clauses}`;
|
||||
// const [data] = await ctx.db.sequelize.query(statement);
|
||||
// return data;
|
||||
};
|
||||
|
||||
export const cacheWrap = async (
|
||||
cache: Cache,
|
||||
options: {
|
||||
func: () => Promise<any>;
|
||||
key: string;
|
||||
ttl?: number;
|
||||
useCache?: boolean;
|
||||
refresh?: boolean;
|
||||
},
|
||||
) => {
|
||||
const { func, key, ttl, useCache, refresh } = options;
|
||||
if (useCache && !refresh) {
|
||||
const data = await cache.get(key);
|
||||
if (data) {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
const data = await func();
|
||||
if (useCache) {
|
||||
await cache.set(key, data, ttl);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
export const query = async (ctx: Context, next: Next) => {
|
||||
const {
|
||||
uid,
|
||||
collection,
|
||||
measures,
|
||||
dimensions,
|
||||
orders,
|
||||
filter,
|
||||
limit,
|
||||
sql,
|
||||
cache: cacheConfig,
|
||||
refresh,
|
||||
} = ctx.action.params.values as QueryParams;
|
||||
const roleName = ctx.state.currentRole || 'anonymous';
|
||||
const can = ctx.app.acl.can({ role: roleName, resource: collection, action: 'list' });
|
||||
if (!can && roleName !== 'root') {
|
||||
ctx.throw(403, 'No permissions');
|
||||
}
|
||||
|
||||
const plugin = ctx.app.getPlugin('data-visualization') as ChartsV2Plugin;
|
||||
const cache = plugin.cache;
|
||||
const useCache = cacheConfig?.enabled && uid;
|
||||
|
||||
try {
|
||||
ctx.body = await cacheWrap(cache, {
|
||||
func: async () => await queryData(ctx, { collection, measures, dimensions, orders, filter, limit, sql }),
|
||||
key: uid,
|
||||
ttl: cacheConfig?.ttl || 30,
|
||||
useCache: useCache ? true : false,
|
||||
refresh,
|
||||
});
|
||||
} catch (err) {
|
||||
ctx.app.logger.error('charts query: ', err);
|
||||
ctx.throw(500, err);
|
||||
}
|
||||
|
||||
await next();
|
||||
};
|
||||
1
packages/plugins/data-visualization/src/server/index.ts
Normal file
1
packages/plugins/data-visualization/src/server/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './plugin';
|
||||
37
packages/plugins/data-visualization/src/server/plugin.ts
Normal file
37
packages/plugins/data-visualization/src/server/plugin.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { Cache, createCache } from '@nocobase/cache';
|
||||
import { InstallOptions, Plugin } from '@nocobase/server';
|
||||
import { query } from './actions/query';
|
||||
|
||||
export class DataVisualizationPlugin extends Plugin {
|
||||
cache: Cache;
|
||||
|
||||
afterAdd() {}
|
||||
|
||||
beforeLoad() {
|
||||
this.app.resource({
|
||||
name: 'charts',
|
||||
actions: {
|
||||
query,
|
||||
},
|
||||
});
|
||||
this.app.acl.allow('charts', 'query', 'loggedIn');
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.cache = createCache({
|
||||
ttl: 30, // seconds
|
||||
max: 1000,
|
||||
store: 'memory',
|
||||
});
|
||||
}
|
||||
|
||||
async install(options?: InstallOptions) {}
|
||||
|
||||
async afterEnable() {}
|
||||
|
||||
async afterDisable() {}
|
||||
|
||||
async remove() {}
|
||||
}
|
||||
|
||||
export default DataVisualizationPlugin;
|
||||
@ -18,4 +18,4 @@
|
||||
"directory": "packages/plugin-error-handler"
|
||||
},
|
||||
"gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
|
||||
}
|
||||
}
|
||||
@ -24,4 +24,4 @@
|
||||
"dependencies": {
|
||||
"antd-mobile": "^5.29.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,4 +13,4 @@
|
||||
"@nocobase/test": "0.10.0-alpha.5"
|
||||
},
|
||||
"gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,7 @@
|
||||
"@nocobase/plugin-client": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-collection-manager": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-duplicator": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-data-visualization": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-error-handler": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-excel-formula-field": "0.10.0-alpha.5",
|
||||
"@nocobase/plugin-export": "0.10.0-alpha.5",
|
||||
@ -47,4 +48,4 @@
|
||||
"directory": "packages/presets/nocobase"
|
||||
},
|
||||
"gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
|
||||
}
|
||||
}
|
||||
@ -24,6 +24,7 @@ export class PresetNocoBase extends Plugin {
|
||||
'iframe-block',
|
||||
'formula-field',
|
||||
'charts',
|
||||
'data-visualization',
|
||||
'auth',
|
||||
'sms-auth',
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user