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>

packages/app/client/src/plugins/data-visualization.ts

@@ -0,0 +1 @@
+export { default } from '@nocobase/plugin-data-visualization/client';

packages/core/client/package.json

@@ -61,4 +61,4 @@
     "dumi-theme-nocobase": "^0.2.9"
   },
   "gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
-}
+}

packages/core/client/src/acl/ACLProvider.tsx

@@ -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;
   }

packages/core/client/src/collection-manager/index.tsx

@@ -16,3 +16,4 @@ export { getConfigurableProperties } from './templates/properties';
 export * from './templates/types';
 export * from './types';
 export * from './CollectionHistoryProvider';
+export * from './interfaces/properties';

packages/core/client/src/schema-component/antd/auto-complete/AutoComplete.tsx

@@ -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),
+);

packages/core/client/src/schema-component/antd/auto-complete/index.ts

@@ -0,0 +1 @@
+export * from './AutoComplete';

packages/core/client/src/schema-component/antd/filter/useValues.ts

@@ -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 || {}),

packages/core/client/src/schema-component/antd/index.ts

@@ -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';

packages/core/client/src/schema-initializer/index.ts

@@ -4,6 +4,7 @@ export * from './types';
 export * from './items';
 export {
   gridRowColWrap,
+  useCollectionDataSourceItems,
   useRecordCollectionDataSourceItems,
   createTableBlockSchema,
   createFilterFormBlockSchema,

packages/core/client/src/user/CurrentUser.tsx

@@ -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);

packages/core/database/src/index.ts

@@ -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';

packages/plugins/charts/src/client/index.tsx

@@ -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',
       });
     }

packages/plugins/charts/src/client/locale/zh-CN.ts

@@ -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)': '图表 (旧)',
 };

packages/plugins/data-visualization/LICENSE

@@ -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/>.

packages/plugins/data-visualization/README.md

@@ -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`

packages/plugins/data-visualization/client.d.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './lib/client';
+export { default } from './lib/client';

packages/plugins/data-visualization/client.js

@@ -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];
+    },
+  });
+});

packages/plugins/data-visualization/package.json

@@ -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面板和数据可视化功能"
+}

packages/plugins/data-visualization/server.d.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';

packages/plugins/data-visualization/server.js

@@ -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];
+    },
+  });
+});

packages/plugins/data-visualization/src/client/Settings.tsx

@@ -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>
+  );
+};

packages/plugins/data-visualization/src/client/__tests__/chart-configure.test.tsx

@@ -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();
+  });
+});

packages/plugins/data-visualization/src/client/__tests__/chart-library.test.ts

@@ -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);
+    });
+  });
+});

packages/plugins/data-visualization/src/client/__tests__/chart-renderer.test.tsx

@@ -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();
+  });
+});

packages/plugins/data-visualization/src/client/__tests__/hooks.test.ts

@@ -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({});
+  });
+});

packages/plugins/data-visualization/src/client/block/ChartBlock.tsx

@@ -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>
+  );
+};

packages/plugins/data-visualization/src/client/block/ChartBlockDesigner.tsx

@@ -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>
+  );
+};

packages/plugins/data-visualization/src/client/block/ChartBlockInitializer.tsx

@@ -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',
+            },
+          },
+        });
+      }}
+    />
+  );
+};

packages/plugins/data-visualization/src/client/block/ChartConfigure.tsx

@@ -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 />
+  );
+};

packages/plugins/data-visualization/src/client/block/formatters.ts

@@ -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',
+    },
+  ],
+};

packages/plugins/data-visualization/src/client/block/index.ts

@@ -0,0 +1,4 @@
+export * from './ChartBlock';
+export * from './ChartBlockDesigner';
+export * from './ChartBlockInitializer';
+export * from './ChartConfigure';

packages/plugins/data-visualization/src/client/block/schemas/configure.ts

@@ -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%',
+          },
+        },
+      },
+    ),
+  },
+};

packages/plugins/data-visualization/src/client/block/transformers.ts

@@ -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;

packages/plugins/data-visualization/src/client/hooks.ts

@@ -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);
+};

packages/plugins/data-visualization/src/client/index.tsx

@@ -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 };

packages/plugins/data-visualization/src/client/locale/en-US.ts

@@ -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',
+};

packages/plugins/data-visualization/src/client/locale/index.ts

@@ -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);
+}

packages/plugins/data-visualization/src/client/locale/ja-JP.ts

@@ -0,0 +1 @@
+export default {};

packages/plugins/data-visualization/src/client/locale/pt-BR.ts

@@ -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',
+};

packages/plugins/data-visualization/src/client/locale/ru-RU.ts

@@ -0,0 +1 @@
+export default {};

packages/plugins/data-visualization/src/client/locale/tr-TR.ts

@@ -0,0 +1 @@
+export default {};

packages/plugins/data-visualization/src/client/locale/zh-CN.ts

@@ -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.': '请选择图表类型',
+};

packages/plugins/data-visualization/src/client/renderer/ChartLibrary.tsx

@@ -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,
+    },
+  };
+};

packages/plugins/data-visualization/src/client/renderer/ChartRenderer.tsx

@@ -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>
+  );
+};

packages/plugins/data-visualization/src/client/renderer/ChartRendererProvider.tsx

@@ -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>
+  );
+};

packages/plugins/data-visualization/src/client/renderer/index.ts

@@ -0,0 +1,4 @@
+export * from './ChartLibrary';
+export * from './ChartRenderer';
+export * from './ChartRendererProvider';
+export * from './library';

packages/plugins/data-visualization/src/client/renderer/library/AntdLibrary.tsx

@@ -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/',
+    },
+  },
+};

packages/plugins/data-visualization/src/client/renderer/library/G2PlotLibrary.tsx

@@ -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',
+    },
+  },
+};

packages/plugins/data-visualization/src/client/renderer/library/index.tsx

@@ -0,0 +1,4 @@
+import { AntdLibrary } from './AntdLibrary';
+import { G2PlotLibrary } from './G2PlotLibrary';
+
+export const InternalLibrary = { ...G2PlotLibrary, ...AntdLibrary };

packages/plugins/data-visualization/src/client/utils.ts

@@ -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;
+  });
+};

packages/plugins/data-visualization/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

packages/plugins/data-visualization/src/server/__tests__/api.test.ts

@@ -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();
+  });
+});

packages/plugins/data-visualization/src/server/__tests__/formatter.test.ts

@@ -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');
+    });
+  });
+});

packages/plugins/data-visualization/src/server/__tests__/query.test.ts

@@ -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);
+    });
+  });
+});

packages/plugins/data-visualization/src/server/actions/formatter.ts

@@ -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);
+  }
+};

packages/plugins/data-visualization/src/server/actions/query.ts

@@ -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();
+};

packages/plugins/data-visualization/src/server/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

packages/plugins/data-visualization/src/server/plugin.ts

@@ -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;

packages/plugins/error-handler/package.json

@@ -18,4 +18,4 @@
     "directory": "packages/plugin-error-handler"
   },
   "gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
-}
+}

packages/plugins/mobile-client/package.json

@@ -24,4 +24,4 @@
   "dependencies": {
     "antd-mobile": "^5.29.1"
   }
-}
+}

packages/plugins/ui-schema-storage/package.json

@@ -13,4 +13,4 @@
     "@nocobase/test": "0.10.0-alpha.5"
   },
   "gitHead": "ce588eefb0bfc50f7d5bbee575e0b5e843bf6644"
-}
+}

packages/presets/nocobase/package.json

@@ -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"
-}
+}

packages/presets/nocobase/src/index.ts

@@ -24,6 +24,7 @@ export class PresetNocoBase extends Plugin {
     'iframe-block',
     'formula-field',
     'charts',
+    'data-visualization',
     'auth',
     'sms-auth',
   ];