@syncfusion/ej2-vue-treemap
Advanced tools
Weekly downloads
Changelog
v21.1.35
#I396062
, #F166897
, #I412247
- Provided the provide/inject support for Vue template components.#FB38812
- Provided the Nuxt 3
framework compatible support for the Vue components.#F178140
- Provided the pnpm
framework compatible support for the Vue components.#F176652
- Provided the Vitest
testing framework compatible support for the Vue components.#FB38517
- Provided the support to use the Vue components in Vue applications without requiring the vue-class-component
package.#I437629
- Issue with "Breadcrumb overflow mode menu creates a dark point for multiple click " has been resolved.#I444557
- Resolved the issue where the legend and the chart were overlapping.#I431278
- Resolved issue with overlapping chart and data label when rotation is enabled.#I320485
- Provided support to place a label at the center of the pie and donut charts.#I416444
- Provided support for a new chart type called range step area which is used to display the difference between minimum and maximum values over a certain time period.#I396453
, #I314160
- Provided support to customize the height and color of the error bar of each data point.#I427235
- The issue cssClass
property not updated properly while string with a white space in the end of the property in checkbox has been fixed.#I422263
- The Chip component now supports htmlAttributes, which enables users to add required attributes such as 'aria-label', 'title', 'class', and more to the Chip item.#I416334
- The entire circular gauge, including the tooltip and legend, can now be rendered in the right-to-left (RTL) direction, which may be useful in some cultures.#I425173
- The issue with "Context menu Submenus not opening properly with multiple levels " has been resolved.#I424794
- The issue with "Script error thrown in context menu when navigate using the keyboard" has been resolved.#I425402
- Accessibility issue in context menu has been fixed.#I304073, #I301329, #I441756
- Now, the filtering functionality has been enhanced to include additional filter operators such as notcontains
, notstartwith
, notendwith
, null
, notnull
, isempty
, and isnotempty
. Additionally, like
and wildcard
support have been added.#F171486
- Issue with "performance delay in the popup open while entering invalid start or end date value" has been resolved.#F180478
- Now, the performance of diagram while enabling virtualization is improved.#F180478
- Now, Overview is updated properly while enabling virtualization.#I422299
- Now, swimlane child nodes is selectable after save and load.#I436649
- Now, connector segment does not get split into multiple segment for top to bottom approach.#I440967
- Now, Free hand connector segment collection restored after save and load the diagram.#I441075
- Now, position change event does not get triggered while click on the swimlane header.#I412159
- Provided support to trigger event when connector segment is dragged.#425697
- Resolved the positioning and line spacing issue in shape document#I249004
, #I250933
, #I256703
, #I286287
, #I290760
, #I301513
, #I313194
, #I314827
, #I316496
, #I317964
, #I320201
, #I320872
, #I327636
, #I331310
, #I333899
, #I334058
, #I334929
, #I337202
, #I341931
, #I341953
, #I345929
, #I348344
, #I349206
, #I349683
, #I349895
, #I354081
, #I356432
- Added support for continuous section break in DocumentEditor.#I422408
, #I435125
- Optimized SFDT file to reduce the file size relative to a Docx file.#I330729
, #I256794
- Added support to display bookmark start and end in DocumentEditor.#I333042
, #I349829
- Added support disable the auto focus to DocumentEditor.#I175038
- Added API to modify the predefine styles in DocumentEditor.#I397894
- The issue "aria-label added on input element instead of wrapper element while adding the aria-label by using Html Attribute property" has been resolved.Preview
The Floating Action Button (FAB) component performs the primary action that appears in front of all screen contents. It can be positioned in relation to a page or a target container.
WAI-ARIA
specifications and it is achieved through attributes.#I419169
- Provided Taskbar drag and drop support and preventing taskbar overlap support by rendering in multiples lines for resource view in Gantt Chart. Please find the demo link here.#I417330
- Provided support to disable parent predecessor by using allowParentDependency
property. Please find the allowParentDependency
link here.#I413261
- Restricted offset value update based on enabling or disabling the UpdateOffsetOnTaskbarEdit
. Please find the UpdateOffsetOnTaskbarEdit
link here.#I420482
- Provided option to disable date validation at initial load based on enabling or disabling the autoCalculateDateScheduling
By disabling this autoCalculateDateScheduling
we can improve load time performance by two time. Please find the autoCalculateDateScheduling
link here.#I439725
- The issue where an exception was thrown when attempting to filter 'Blanks' value using URL Adaptor in Excel filter has been resolved.#F41177
- Resolved the issue exporting the hierarchy grid with different mode.#I342921
, #I407440
- The issue related to Content Security Policy violation that occurred while using grid paging and grouping has been resolved.#I446747
- Script error occurred on foreignkey
sample while trying to auto complete in filter menu issue has been fixed.#I428772
- Fixed alignment issue with Dialog component header content and close icon on fluent theme. More Information.#I428772
- Fixed alignment issue with Dialog component header content and close icon on fluent theme. More Information.#I225917
, #F146138
, #F150441
- Provided support to dynamically change both new columns and datasource simultaneously by using inbuilt changeDataSource
method of Grid.#I304073, #I301329, #I441756
- Now, the filtering functionality has been enhanced to include additional filter operators such as notcontains
, notstartwith
, notendwith
, null
, notnull
, isempty
, and isnotempty
. Additionally, like
and wildcard
support have been added.#I432547
- The security of the Grid component has been improved by the use of sanitization to remove any potentially untrusted strings and scripts. This feature can be enabled by setting the property enableHtmlSanitizer
as true.td
element for e-detailcell
in detail element has been only changed from a td
element to the th
element to enhance accessibility standards.td
element for e-detailcell
in detail element has been only changed from a td
element to the th
element to enhance accessibility standards.#F177543
- enableMultiSelect
property is exposed to enable or disable multiple selection of the HeatMap cells.| Previous Enum Name | Modified Enum Name | |---|---| | ImageFinetuneOptions | ImageFinetuneOption | | ImageFilterOptions | ImageFilterOption | | ImageEditorCommands | ImageEditorCommand |
#I440965
- Now, the validation works properly when using two way binding for the value
property.#I443357
- Now, when you click the cancel button in the In-place Editor, the Rich Text Editor will no longer be focused.#I432638
- Now, when using the kanban sortSettings
the cards are dropped and sorted properly.#I409839
- Issue with "Script error thrown while drag and drop after removed the item from listbox using removeItem method" has been resolved.#F168185
- The issue with "Sorting is not applied properly when entering different values in the text field of the ListView component" has been resolved.#I275734
, #I293775
- The appearance of the buttons and tooltips in the zoom toolbar can now be customized using properties in the buttonSettings
and tooltipSettings
in the toolbarSettings
property of zoomSettings
.#I425592
- The marker rendered in the Maps can now be dragged and dropped in the desired location based on the requirement. Events are also supported to notify the drag start and end.#I440814
- The issue "Script error is thrown when we dynamically call the showPopup method and select the value" has been resolved.Message
component content template" has been resolved.#I399919
- Resolved the bar chart rendering issue.#I437765
- Now, the script error does not occur when the update form field value API is used when a signature already has signature content.#F180666
- Now, the exception does not occur while downloading the document after adding the type and uploading the handwritten signature and initial annotation.#I428493
- Now, the signature image in the signature field is visible while printing in the other viewers changes made on the server side.#I441773
- Now, the annotation positions are moving properly.PDFium
package has been updated.#I438960
- Now, the different culture date time is working properly while exporting annotations.#I444307
- Now, the check box is not added to the left-most corner of the page.#I444707
- Now, the signature dialog box footer button alignment is proper in the fluent theme.#I440251
- Now, the typed handwritten signature is not broken into a new line after downloading and viewing in other viewers.#I429508
- Now, the form fields appear properly in mobile mode.#I433831
- The A4 document size is now properly set during printing.#F180764
- Now, if you move the arrow or line annotations programmatically, their position won't be changed during export.#I429549
- Now, the checkbox displays properly during the print preview.#I436286
- Now that the enable shape annotation is false, the script error no longer occurs.#I429775
- Now, the problem with some specific document's slow rendering has been resolved.#I437396
- Now, when the page's zoom level is higher, the resizer will not enable inside the annotation.#I435370
- Now, the border color is preserved properly for the transparent textbox field.#I438421
- Now, the script error does not occur while loading an annotation restricted document when the enableAnnotation
API is set to false.#F180082
- Now, while adding the text markup annotation programmatically, the text markup content is added properly.#I434198
- Now, the custom stamp is added properly on the form fields.#I180081
- Now, when attempting to delete a post in the comment panel, the annotations are not deleted from the comment panel.#I431466
- Now, the toolbar behavior is stable in mobile mode.#I432820
, #I432145
, #F179720
- Now, the formFields with the same name in non-rendered pages are downloaded successfully.#I429549
- Now, the checkboxes are no longer offset to the right in the print preview.#I429288
- Now, the delete option for a draw signature type will be visible in the context menu.#I431758
- Now, the checkboxes with the same name are correctly selected.#I429416
- The checkbox layer is now rendered properly when loading the provided PDF document.#I431679
- Now, the handwritten signature does not become empty when a random signature is added.#I431466
- Now, the toolbar icon is properly visible in mobile mode.#I431286
- Now, the radio button selector size is proper in the given document.#I408530
, #I428623
- Now, the free text annotations do not shift towards the left side in edit mode.#I344527
- Now, the support provided is navigated to the next and previous signature field in the form designer.#I443775
- Now, support is provided for the saving type and image signatures in the form fields.#I411856
- Now, support is provided to render the accessibility tags in the PDF Viewer.#I426307
- Improvements to page rendering for zoom levels under 25% by using thumbnail images.#I437267
- During initial rendering, the spinner will now be properly displayed in the pivot table.#F165214
- Provided paging support in server side engine that allows to break and display large amounts of data page by page.The property type of pivotValues
has been changed from IPivotValues
to IAxisSet[][]
.
The property type of toolbar
has been changed from (ToolbarItems | ItemModel)[]
to ToolbarItems[] | ItemModel[]
.
In the server side controller, the imported namespace name has been changed from Syncfusion.Blazor.PivotView
to Syncfusion.EJ2.Pivot
.
#I386691
- Provided support to display tooltips during initial load of progress bars and mouse hover with numeric or text values of the progress.#I375472
Issue with Rule template default rendered while add condition/group in query builder, if first column as rule template has been fixed.#I388333
Issue with Value template not destroy properly when we use complex data source in query builder has been fixed.#F40707
- Value change event triggered twice in Radio Button component has been fixed.The Ribbon provides a structured and easy-to-use user interface for users to access different features and functions through series of tabs, improving user experience and efficiency.
The Ribbon is a structured layout to manage tools with tabs and groups. The Ribbon control supports buttons, split buttons, toggle buttons, file menu and multiple layouts.
#I442919
- Now, when focusing out of the Rich Text Editor, the embed YouTube video will not be removed.#I442920
- An issue with appointments misaligned in timeline year view with ignoreWhiteSpace
property has been fixed.#I324269
, #I347160
- Provided support to display multi month event as single event in vertical orientation of timeline year view.#I419677
- Provided the support to sanitize the appointment inputs, improving the security of the Scheduler component.#I425713
- Provided in-built filter support to the Scheduler component, allowing users to easily filter events when requesting data from the server.#FB40709
- Provided generateEventOccurrences
public method to retrieve all the occurrences from the series.#I433821
- Correcting the signature scaling issue while resizing the web browser has been resolved.Preview
The Speed Dial component is an extension of the floating action button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for the page.
WAI-ARIA
specifications and it is achieved through attributes.#I442925
- Issue with "spreadsheet hangs while navigating the cells in the protected sheet with the arrow keys" has been resolved.#I439673
- Resolved an issue where tooltip text was getting cut off when the text was longer.#I440991
- Fixed an issue where the Donut chart tooltip was being cropped when displayed outside of the area bounds.#I427994
- Provided the htmlAttributes
support to the switch component.#I441253
- An issue with the aria-disabled
role accessibility has been fixed.#I434633
- Provided the htmlAttributes support for the Tooltip component which allows to add attributes for the root element of Tooltip popup.td
element for e-detailcell
in detail element has been only changed from a td
element to the th
element to enhance accessibility standards.#I415237
- The TreeView performance issue in Vue3 framework has been resolved.#F178267
- Fixed issue unable to upload the same file again after using the remove method.Readme
The Vue TreeMap component provides a simple and effective way to visualize flat or hierarchical data as clustered rectangles with a specific, weighted attribute determining the size of each rectangle.
Getting started . Online demos . Learn more
Trusted by the world's leading companies
You can use Vue CLI
to setup your Vue 2 applications. To install Vue CLI, use the following commands.
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve
Initiating a new project prompts us to choose the type of project to be used for the current application. Select the option Default ([Vue 2] babel, eslint)
from the menu.
All Syncfusion Vue packages are published in npmjs.com registry. To install Vue TreeMap package, use the following command.
npm install @syncfusion/ej2-vue-treemap --save
You can register the TreeMap component in your application by using the Vue.use(). Refer to the code example given below.
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.use(TreeMapPlugin);
Registering TreeMapPlugin in Vue, will register the TreeMap component along with its required child directives globally.
Add the Vue TreeMap by using ejs-treemap selector in template section of the App.vue file.
<template>
<div id="app">
<ejs-treemap :dataSource='data' weightValuePath='Count'
:leafItemSettings='leafItemSettings'></ejs-treemap>
</div>
</template>
<script>
import Vue from 'vue';
import { TreeMapPlugin } from '@syncfusion/ej2-vue-treemap';
Vue.use(TreeMapPlugin);
export default Vue.extend ({
data: function() {
return {
dataSource: [
{ State: 'Brazil', Count: 25 },
{ State: 'Colombia', Count: 12 },
{ State: 'Argentina', Count: 9 },
{ State: 'Ecuador', Count: 7 },
{ State: 'Chile', Count: 6 },
{ State: 'Peru', Count: 3 },
{ State: 'Venezuela', Count: 3 },
{ State: 'Bolivia', Count: 2 },
{ State: 'Paraguay', Count: 2 },
{ State: 'Uruguay', Count: 2 },
{ State: 'Falkland Islands',Count: 1 },
{ State: 'French Guiana', Count:1 },
{ State: 'Guyana', Count: 1 },
{ State: 'Suriname', Count: 1 },
],
leafItemSettings: { labelPath: 'State' }
}
}
});
</script>
Refer the Getting Started with Vue3 topic for using Syncfusion Vue components in Vue 3 applications.
TreeMap component is also offered in the following list of frameworks.
JavaScript | Angular | React | ASP.NET Core | ASP.NET MVC |
---|
Product support is available through the following mediums.
Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ Vue UI components, you can purchase or start a free 30-day trial.
A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
See LICENSE FILE for more info.
© Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
FAQs
Essential JS 2 TreeMap Components for Vue
The npm package @syncfusion/ej2-vue-treemap receives a total of 960 weekly downloads. As such, @syncfusion/ej2-vue-treemap popularity was classified as not popular.
We found that @syncfusion/ej2-vue-treemap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.