abc-charts

The library for visualisation data via charts.

$3

``npm
npm i abc-charts --save
`

$3

- `abc-charts` - almost all the modules, except below
- `abc-charts/widgetFactory` - factory to create widgets
- `abc-charts/widgetConfig` - config to provide to the widget factory
- `abc-charts/dataProvider` - data provider for GraphQL
- `abc-charts/constants` - constants for using in selectors only
- `abc-charts/settings` - widget settings, helping functions and controls
- `abc-charts/types` - general types

$3

Importing needed classes

`js
import {WidgetConfig} from 'abc-charts/widgetConfig';
import {WidgetFactory} from 'abc-charts/widgetFactory'; // Фабрика
import {DataProvider} from "abc-charts/dataProvider"; // Провайдер данных
import {Constants} from "abc-charts/constants"; // Значения литеральных типов и перечислений
import {SomeInterface} from 'abc-charts/interfaces';
import {SomeType} from 'abc-charts/types';
`

If your intergration system does not includes "material design" or needed fonts you can import these from the "abc-charts".
For example:

`
TypeScript:
require('abc-charts/styles.css');
`
`
Less/Scss:
@import '~abc-charts/styles.css';
`

Running WidgetFactory to draw widget from template.
Also you can use Promise for receiving signals about complete of loading widget or errors.

(Looking example below...)

Interface IChart has method for getting available variables for EventBus:
`
interface IChart {
getVariables(): IWidgetVariables;
...
}
`
where IWidgetVariables is
`
{
: {
description?: string;
}
}
`

###### Full example with massive sending
Service:
`
class EventBusService {
private eventBus: EventBus = null;

constructor() {
this.eventBus = new EventBus();
this.eventBus.useStateDeferredMerging = false;
}

getWrapper(): EventBusWrapper {
return new EventBusWrapper(this.eventBus);
}

appendWidgetVariables(eventBusWrapper: EventBusWrapper, widgetVars: IWidgetVariables): void {
eventBusWrapper.varAliases = [...Object.keys(widgetVars), '_cb']
.reduce((obj, key) => {
obj[key] = {listen: key, trigger: key};
return obj;
}, {})
}

async sendMassive(eventBusWrapper: EventBusWrapper, widgetVars: IWidgetVariables, values: NameValue[]): Promise {
return new Promise(resolve => {
let params: IEventData = {
_cb: {
func: resolve
}
};
values.forEach((v: NameValue) => {
const regExp: RegExp = new RegExp(^${v.name}, 'g')
params = {
...params,
...Object.keys(widgetVars)
.filter(v => regExp.test(v))
.reduce((obj, key) => {
obj[key] = v.value;
return obj;
}, {})
};
});
eventBusWrapper.triggerStateChange(params);
}
}
}
`

Main code:
`
class Example {
private widget: IChart = null;

create() {
const eventBusWrapper: EventBusWrapper = eventBusService.getWrapper();

this.widgetConfig = new WidgetConfig();
this.widgetConfig.apiUrl = ;
this.widgetConfig.eventBus = eventBus;
this.widgetConfig.templateId =