Charts addon

[vyacheslav-pushkin]

Charts addon

Port Charts addon from CUBA:

• ~20 charts
• PivotTable component

Chart addon will be implented using Nivo chart library.

Nivo vs CUBA charts comparison:

Serial (11)

• [x] line
• [ ] line with different colors for ups and downs
• [x] smoothed line
• [x] stacked area
• [x] stacked column (bar chart)
• [x] clustered bar
• [ ] column with line - not supported out of the box, but https://codesandbox.io/s/m4ro13jjn8
• [ ] 3d column - did not find any 3d charts in Nivo
• [ ] multiple value axis - not supported out of the box, but some working examples in issue comments https://github.com/plouc/nivo/issues/172
• [ ] micro chart - not sure, how we should implement this
• [ ] cylinder chart

Charts with gaps (2)

• [ ] make gaps using gap field - I think could be implemented using the same approach as described in point below
• [ ] make gaps using connect - looks like we can use two series in Nivo https://nivo.rocks/storybook/?path=/story/line--different-serie-lengths

XY (Scatter) (3)

a set of nivo examples, but they didn't completely match cuba screens https://nivo.rocks/storybook/?path=/story/scatterplot--default

• [ ] simple XY
• [ ] chart with date based axis
• [ ] chart with fills to the axis

Pie (3)

• [x] simple
• [ ] 3d - did not find any 3d charts in Nivo
• [x] donut

Radar (2)

• [x] radar chart
• [ ] polar chart

Gantt (2)

No gantt implementation in Nivo

• [ ] gantt chart
• [ ] gantt chart with dates

Gauge (3)

• [ ] angular gauge
• [ ] angular with two axes
• [ ] solid gauge

Funnel (2)

• [x] funnel chart
• [ ] 3d funnel

QA Notes

Pivot table

Usage example:

import {EntityPivotTable} from @haulmont/jmix-addon-charts;

// ...

    <EntityPivotTable<Car> 
                 entities={data.scr_CarList}
                 fields={['model', 'ecoRank', 'carType', 'mileage', 'maxPassengers', 'price']}
    />

Chart addon usage example

Example of usage components from chart addon available at https://github.com/jmix-projects/front-demo-r2/tree/vb/chart-examples

Chart addon installation

Chart addon could be installed using commands below (example based on front-demo-r2 project, commands should be executed from frontend directory )

npm install @haulmont/jmix-addon-charts@0.1.0-next.4
npx gen-jmix-front react-typescript:addon --dest src --addonPackageName @haulmont/jmix-addon-charts --model generation/projectModel.json 

[GuoRuiLv]

Hi @vyacheslav-pushkin ,is echarts a possible option?

[vyacheslav-pushkin]

Hi @lugreen

Sounds like a valid option to me.

[vyacheslav-pushkin]

~Superseded by https://github.com/Amplicode/amplicode-frontend/issues/38~

[vyacheslav-pushkin]

@vadimbasko pls add QA Notes on how to test charts

[vadimbasko]

@owlet1997 Examples and installation instruction added in QA Notes.