Giter Site home page Giter Site logo

charts's Introduction

CUBA Charts Add-on

license Build Status Documentation

Charts Add-on provides integration with AmCharts and GoogleMaps for applications based on CUBA Platform.

For more information see github.com/cuba-platform/cuba.

Build and install

In order to build the add-on from source, you need to install the following:

Let's assume that you have cloned sources into the following directories:

work/
    cuba/
    cuba-gradle-plugin/
    charts/

Open terminal in the work directory and run the following command to build and install the plugin into your local Maven repository (~/.m2):

cd cuba-gradle-plugin
gradlew install

After that, go to the cuba directory and build and install it with the same command:

cd ../cuba
gradlew install

Finally, go to the charts directory and build and install it with the same command:

cd ../charts
gradlew install

charts's People

Contributors

alexbudarov avatar belyaev-andrey avatar daxzel avatar flaurite avatar gglcrash avatar glebfox avatar gorbunkov avatar jreznot avatar knstvk avatar pribavkindenis avatar tinhol avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

pks-os joyfun

charts's Issues

Split web module on web and web-widgets

At the moment web contains all the code including UI components and Spring beans. Let's move Vaadin UI components to the separate web-widgets module as it is done for cuba.

Create an action to export pivot contents to Excel

Current way of CSV copy-paste is very clumsy.


Description

Created extension for PivotTable component - PivotTableExtension. It is not a component and can't be created in ComponentsFactory.

Given extension provides API for downloading PivotTable with aggregated data to excel with *.xls format.

Note, the extension works only for the following renderers types: "Table", "Table Barchart", "Heatmap", "Row Heatmap", "Col Heatmap". And doesn't get the color of cells.

In PivotTableExtension interface we have two methods for downloading file:

void exportTableToXls();
void exportTableToXls(ExportDisplay display);

If it is neccessary to define file name we can use following method:

void setFileName(String fileName);

If file name is not defined it will use localized caption of entity in PivotTable

At the server side we can get JSON representation of PivotTable with data or serialized object (PivotData):

String getPivotDataJSON();
PivotData getPivotData();

Note, if PivotTable contains more than 65536 rows (XLS doesn't support more rows) content will be cut by the last row and you will see a warning message.

How to use

In screen controller we should create an instance of extension. And, for example, create method save(), that will be invoked from some button;

@Inject
private PivotTable pivotTable;

private PivotTableExtension extension;

@Override
public void init(Map<String, Object> params) {
    extension = new WebPivotTableExtension(pivotTable);
}

public void save() {
    extension.exportTableToXls();
}

XML:

<layout expand="pivotTable">
    <button caption="download" invoke="save"/>
    <chart:pivotTable id="pivotTable"
                      autoSortUnusedProperties="true"
                      datasource="tipsDs"
                      editable="true">
        <chart:properties>
            <chart:property name="row"/>
            <chart:property name="totalBill"/>
            <chart:property name="tip"/>
            <chart:property name="sex"/>
            <chart:property name="smoker"/>
            <chart:property name="day"/>
            <chart:property name="time"/>
            <chart:property name="size"/>
        </chart:properties>

      . . .

    </chart:pivotTable>
</layout>

For QA

Test cases:

  1. Check all browsers: IE 9 and 10 (for 6.10), IE 11, Edge, Chrome, FireFox, Safari, (also, Safari iOS);
  2. Check file name and default file name;
  3. Check warning notification if pivot data rows more than 65536;
  4. Check supported renderes type;
  5. Check an exception if renderer type is not supported;
  6. In the file check that numeric type is numeric and string is string;
  7. Try with editable and not editable pivotTable;
  8. Check MS Excel in our Dell notebook (Ru and En). Check types of cells (numbers are numbers, strings are strings)
    Also, try your test cases.

Can't delete polygon from MapViewer

When I trying delete programmaticaly polygon overlay (i.e. if polygon is not valid) from MapViewer using method MapViewer#removePolygonOverlay nothing changes.

For example a piece of code

private PolygonCompleteListener polygonComplete = event -> {
        PolygonDelegate pd = (PolygonDelegate) event.getPolygon();
        if (!mvHelper.isValid(pd)) {
            showNotification(
                    "Polygon draw warning",
                    "Polygon topology incorrect. Discard drawing",
                    NotificationType.ERROR
            );

            mvZoneMap.removePolygonOverlay(event.getPolygon());

       }
}

Original issue: https://youtrack.haulmont.com/issue/PL-8246

PivotTable does not refresh UI on editable change

Environment

  • Platform version: 6.9.0
  • Client type: Web

Description of the bug or enhancement

  • Minimal reproducible example
  1. Try to change editable of PivotTable on click
public class ClientBrowse extends AbstractLookup {
    @Inject
    private PivotTable clientPivotTable;

    public void switchMe() {
        clientPivotTable.setEditable(!clientPivotTable.isEditable());
    }
}
  • Expected behavior

UI should change between editable and readonly representation.

  • Actual behavior

UI is changed only if we use F5 key and refresh the page

Implement renderingDelay attribute for AmCharts rendering delay

====Changes====

All charts have renderingDelay attribute except stockChart;

renderingDelay - sets rendering delay in which the chart should be rendered (renders instantly if not set). The delay is time in ms.
[AmCharts doc link|https://docs.amcharts.com/3/javascriptcharts/AmCharts#makeChart]

Usage exmaple:
XML

<chart:pieChart id="pieChart"
                renderingDelay="1000.25">

Java

pieChart.setRenderingDelay(1000.25); // takes Double value;
pieChart.getRenderingDelay();

🔗 Related links: {"relates to:": "https://youtrack.haulmont.com/issue/PL-9969", "causes:": "https://youtrack.haulmont.com/issue/PL-10539"}


Original issue: https://youtrack.haulmont.com/issue/PL-10294

Create an "Analyze" action to upload selected table records to Pivot

See Warlord implementation for details (by @tinhol )


Changes

Using new Action - ShowPivotAction you can export data from components that extends ListComponent class to the PivotTable component.

Description

ShowPivotAction has several modes for export: all rows and selected rows. You don't have to select it, because it depends on selected rows.

All rows will be exported by default without confirmation dialog if you didn't select rows.
A confirmation dialog will be shown If you select some rows and click on a button with action:
image.png

The PivotTable component will be shown in a new tab with editable = true by default.

In the opened tab, PivotTable has an extension that allows you to export pivot data to excel (if the current renderer is supported).

Note, if property has any type from following list:

  1. collection type;
  2. byte array
  3. uuid
    or has system level annotation, or doesn't have security access for view, it will be ignored.

API

To create action, you should send component that extends ListComponent class as a parameter. Also, you can send an action id otherwise default id will be used.

ShowPivotAction action = ShowPivotAction.create(table);
//or
ShowPivotAction action = ShowPivotAction.create(table, "actionId");

By default ShowPivotAction send all properties that defined in the View of CollectionDatasource. If you want to send certain properties or exclude, you can use the following methods:

withIncludedProperties() // received List<String> of properties name;
withExcludedProperties() // received List<String> of properties name;

As ShowPivotAction has a fluent API, you can use following code entry:

ShowPivotAction action = ShowPivotAction.create(table)
        .withIncludedProperties(Arrays.asList("login", "name", "active", "group", "position"))
        .withExcludedProperties(Arrays.asList("name", "position"));

The order of methods doesn't matter:
In the above example, the result of applied properties is: ("login", "active", "group")
If we change the order of invoked methods:

ShowPivotAction action = ShowPivotAction.create(table)
        .withExcludedProperties(Arrays.asList("name", "position"))
        .withIncludedProperties(Arrays.asList("login", "name", "active", "group", "position"));

The result of applied properties will be: ("login", "active", "group").
All incorrect properties are ignored.

To configure pivot table, you must use the following method:

withNativeJson() // received String json;

JSON structure for a non-editable pivot table:

{
	"cols": ["localized property", "localized property"],
	"rows": ["localized property"],
	"editable": false,
	"renderer": "heatmap",
	"aggregation": {
		"id": "d8fc3fdf-730d-c94f-a0c8-72a9ce3dcb3a",
		"mode": "sumOverSum",
		"properties": ["localized property", "localized property"]
	}
}

JSON structure for editable pivot table:

{
	"cols": ["localized property"],
	"rows": ["localized property"],
	"editable": true,
	"renderers": {
		"selectedRenderer": "barChart"
	},
	"autoSortUnusedProperties": true,
	"aggregationProperties": ["localized property", "localized property"],
	"aggregations": {
		"selectedAggregation": "count",
		"aggregations": [{
			"id": "647780f0-c6d0-6ade-a63a-542b5c8cdbd5",
			"mode": "count",
			"caption": "Count"
		}, {
			"id": "c2663238-2654-67f0-2dec-add6962d867c",
			"mode": "sumOverSum"
		}]
	}
}

For more information about configuration properties see https://github.com/nicolaskruchten/pivottable/wiki/Parameters

For QA

For non-persistent Entity (e.g. TipInfo)
Without and with view:
a) without "include" and "exclude" properties - should show all available properties
b) using withIncludedProperties() - should show only included
c) using withExcludedProperties() - should show available properties minus excluded
d) using both methods - excluded properties will be applied to included. If count of result properties is zero - all available properties will be shown.

For peristent Entity (e.g. User)
Without and with view
a - d) same steps
e) Check security for properties
f) Check uuid property
g) Check byte array property
h) Try to use in withIncludedProperties() propertyPath (e.g. group.name)

Update PivotTable to v2.21.0

Added:

  • Use barmode: 'relative' for best Plotly bar-stacking behaviour
  • showUI parameter in pivotUI() to hide UI and paper over differences between pivot() and pivotUI()
  • rowTotals and colTotals options for table renderers

Changes

New properties:

  • showRowTotals - options for row with total values (true by default);
  • showColTotals - options for column with total values (true by default);
  • showUI - it can be used only with editable PivotTable and can hide or show UI elementes (true by default).

showRowTotals and showColTotals properties work only with table-renderers (heatmap, table, etc).

Examples

  • XML:
...
<chart:pivotTable id="tipsPivotTable"
                  datasource="tipsDs"
                  showRowTotals="false"
                  showColTotals="false"
                  renderer="HEATMAP">
...
<chart:pivotTable id="tipsPivotTableUI"
                  showUI="false"
                  datasource="tipsDs"
                  editable="true">
...
  • Java:
tipsPivotTable.setShowColTotals(false);
tipsPivotTable.isColTotalsShown();
        
tipsPivotTable.setShowRowTotals(false);
tipsPivotTable.isRowTotalsShown();

tipsPivotTableUI.setShowUI(false);
tipsPivotTableUI.isShowUI();
  • Native JSON for show col and row totals:
{
   "rendererOptions": {
      "table": {
         "rowTotals": false,
         "colTotals": false
      }
   }
}
  • Native JSON for showUI property:
{
   "showUI": false
}

QA

  • check properties from XML layout
  • check properties from Java API
  • check native JSON;

Adding marker to the Map via addMapClickListener doesn't redraw marker with new position

Проблема в том, что когда имплементируешь MapViewer#addMapClickListener с возможностью добавлять маркер на карту маркер не отрисовывается до момента, пока не подвигаешь курсором.
Пример как был заимплементирован листенер:
{code:lang=java|title=Code}
mvZoneMap.addMapClickListener(new MapClickListener() {
@OverRide
public void onClick(MapClickEvent event) {
if (mZoneLocation != null)
mvZoneMap.removeMarker(mZoneLocation);

            gpZoneLocation = event.getPosition();
            mZoneLocation = mvZoneMap.createMarker("Zone center", gpZoneLocation, true);
            mvZoneMap.addMarker(mZoneLocation);
        }

});



---
Original issue: https://youtrack.haulmont.com/issue/PL-7866

Add 'add marker' button to 'Drawing Panel' on map

Очень хотелось бы иметь на панели для рисования на карте кнопочку с возможностью установки маркера. Это удобно, например, если нужно на уже нарисованных объектах отметить какую-то точку, поскольку сейчас это можно сделать либо установкой маркера заранее, либо поставить маркер где-либо, а затем передвинуть в интересующее место.


Original issue: https://youtrack.haulmont.com/issue/PL-7867

Cleanup charts.xsd

We can get rid of duplication in charts.xsd using xmlns reference on window.xsd.

Example:

<xs:schema targetNamespace="http://strangeway.org/xsd/responsive/responsive.xsd"
           xmlns:cuba="http://schemas.haulmont.com/cuba/window.xsd"
           xmlns:xs="http://www.w3.org/2001/XMLSchema"
           xmlns="http://strangeway.org/xsd/responsive/responsive.xsd"
           elementFormDefault="qualified">

    <xs:complexType name="responsiveColumnType">
        <xs:complexContent>
            <xs:extension base="cuba:baseComponent">
                <xs:sequence>
                    <xs:choice minOccurs="0" maxOccurs="unbounded">
                        <xs:group ref="cuba:layoutOrComponent"/>
                    </xs:choice>
                </xs:sequence>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>
</xs:schema>

PivotTable does not set aggregation and renderers in editable mode

Environment

  • Platform version: 6.9.5
  • Client type: Web

Description of the bug or enhancement

  • Minimal reproducible example
  1. Define pivotTable
<chart:pivotTable id="pivotTable"
                  datasource="clientsPivotDs"
                  height="300px"
                  width="100%">
    <chart:properties>
        <chart:property name="title"/>
        <chart:property name="rank"/>
        <chart:property name="money"/>
    </chart:properties>
</chart:pivotTable>
  1. Set editable by default:
public class ClientBrowse extends AbstractLookup {
    @Inject
    private PivotTable pivotTable;

    @Override
    public void ready() {
        super.ready();

        pivotTable.setEditable(true);
    }
  1. On button click we want to apply specific renderer and aggregation:
public void onTestBtnClick() {
    pivotTable.setEditable(true);
    pivotTable.setRows(Collections.singletonList("money"));
    pivotTable.setColumns(Collections.singletonList("rank"));
    pivotTable.setAggregationProperties(Collections.singletonList("money"));

    pivotTable.setRenderers(new Renderers());
    pivotTable.getRenderers().setDefaultRenderer(Renderer.TABLE);

    pivotTable.setAggregations(new Aggregations());
    pivotTable.getAggregations().setDefaultAggregation(AggregationMode.SUM);
    pivotTable.repaint();
}
  1. Open screen and click on Switch Pivot button

Strange thing happens: we receive RefreshEvent from client side with incorrect aggregation and renderers back to server side after button click.

Demo project:
https://app.zenhub.com/files/131167043/98b13cdf-cc27-4600-93d8-33fdfb3941fb/download

  • Expected behavior

Settings applied, renderer and aggregation is set after click

  • Actual behavior

Settings are not applied on button click

PivotTable should implement HasCaption

Environment

  • Platform version: 6.9.0
  • Client type: Web

Description of the bug or enhancement

Now we cannot set simple caption attribute supported by all Vaadin components

Add date format to PivotTableExtension

Add date format property for serialization and deserialization of Date object.

The main idea is to provide dateFormat property to show formatted date in the PivotTable cells.
For instance:

dateFormat="yyyy-MM-dd"
date in the cell: 2019-01-01

It would allow us to detect date property from the client side and handle it in the PivotExcelExporter. So in the generated excel file, we will set "date format" style to cells with Date.


Changes

PivotTableExtension now available detect dateTime, date and time types and set corresponding format in the excel file. By default it does not detect given types.

In order to export with corresponding type it is necessary to set specific parsing format using the following methods:

setDateTimeParseFormat(String) // DateTime
setDateParseFormat(String) // Date
setTimeParseFormat(String) // Time

It will be applied for all dateTime, date, time properties in the PivotTable.

How to use

@Inject
private PivotTable pivotTable;
private PivotTableExtension extension;

@Subscribe
private void onInit(InitEvent event) {
    extension = new WebPivotTableExtension(pivotTable);
    extension.setDateTimeParseFormat("dd/MM/yyyy HH:mm");
    extension.setDateParseFormat("dd/MM/yyyy");
    extension.setTimeParseFormat("HH:mm");
}

Another little improvement is automatic resizing column width according to the length of content in the widest cell in column.

image

How test

  1. Try DateTime, Date, Time datatypes and their defaults formats; In the excel cell can have types:: custom, time and date;
  2. In the output file make sure that columns are resized to the widest cell in column.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.