@apia/charts 2.0.11 → 3.0.2

package/dist/index.d.ts

@@ -1,5 +1,337 @@
-export { TApiaChartColumn, TApiaChartDefinition } from './charts/types.js';
-export { TApiaWidgetBaseProps, TApiaWidgetCounterProps, TApiaWidgetOxfordProps, TApiaWidgetProps, TApiaWidgetRingProps, TApiaWidgetScaleProps, TApiaWidgetSpeedMeterProps, TApiaWidgetTLightProps, TApiaWidgetThermometerProps, TWidgetData, TWidgetZone } from './widgets/types.js';
-export { WidgetComponent } from './widgets/WidgetComponent.js';
-export { ChartComponent } from './charts/chartJsRenderer/ChartComponent.js';
+import * as react from 'react';
+import { ChartData } from 'chart.js';
+import { PivotTableUIProps } from '@imc-trading/react-pivottable';
+export { PivotTableUIProps, TQuerySort } from '@imc-trading/react-pivottable';
+
+type TApiaChartCoordinate = {
+    /**
+     * Value shown in the X axis.
+     * In the case of pie charts, it defines the name of each slice.
+     */
+    key: string;
+    /**
+     * Value shown in the Y axis, or to determine the size and value of slices of
+     * a pie chart.
+     */
+    value: string;
+    /**
+     * Optional value shown only on the slices of pie charts
+     */
+    percentage?: string;
+    color?: string;
+};
+type TApiaChartColumn = {
+    /**
+     * Specific color of a column, does not work on pie charts
+     */
+    color: string;
+    /**
+     * Values of each element
+     */
+    sets: TApiaChartCoordinate | TApiaChartCoordinate[];
+    /**
+     * Name of each column.
+     *
+     * On bars and line based charts, the legend will show this value.
+     *
+     * On the pie and waterfall charts, a chart will be created for each column.
+     */
+    name: string;
+};
+type TApiaChartDefinition = {
+    chartType?: 'barH2D' | 'barV2D' | 'linear' | 'waterfall' | 'pie2D';
+    aspectRatio?: number;
+    axisXTitle?: string;
+    axisYTitle?: string;
+    hideSelector?: boolean;
+    /**
+     * The colors of the waterfall chart are defined by the bars with positive
+     * values and the bars with negative values. So in order to mantain cohesion
+     * in the color schema of the chart, this prop establishes the required colors
+     * for the chart
+     */
+    waterfallColors?: {
+        positive: string;
+        negative: string;
+        total: string;
+        stepConnector: string;
+    };
+    /**
+     * Name of the schema of colors shown in the chart. Pie charts must always include a schema
+     */
+    colorSchema?: string;
+    /**
+     * Main data to be parsed and shown in the chart.
+     * Depending on the ```chartType``` and the amount of ```column``` objects,
+     * the data can be considered differently.
+     *
+     * Examples:
+     * ```
+     * const columnsWithSingleColumnObject = columns: {
+     *   column: {
+     *     color: 'red',
+     *     coordinate: [
+     *       { xValue: '1', yValue: '1' },
+     *       ...,
+     *     ],
+     *     name: 'col1',
+     *   }
+     * };
+     * ```
+     * ```
+     * const columnsWithMultipleColumnObject = columns: {
+     *   column: [
+     *     {
+     *      color: 'red',
+     *      coordinate: [
+     *        { xValue: '1', yValue: '1' },
+     *        ...,
+     *      ],
+     *      name: 'col1',
+     *    },
+     *    ...,
+     *  ]
+     * };
+     *```
+     *
+     *
+     * ***Horizontal and Vertical bars***:
+     *
+     * ```1 column object```:
+     *
+     * Each ```coordinate``` is considered an individual separate 'column bar',
+     * and the ```colorSchema``` is separated between each ```coordinate``` made
+     * 'column bar'.
+     *
+     *
+     * ```Multiple column objects```:
+     *
+     * Each ```column``` object should have the same amount of coordinates and
+     * the coordinates in the same index of the array should have the same
+     * ```xValue```
+     *
+     * Each ```coordinate``` is considered an individual separate 'column bar',
+     * but the coordinates of each column are re-accommodated based on their
+     * ```xValue``` in order to make groups of columns with the same value on the
+     * X axis.
+     *
+     * In this case there will be 6 groups of columns (based on the length of the
+     * coordinate array), each group containing 3 'column bars' (based on the
+     * amount of column objects) and the ```colorSchema``` will be distributed
+     * inside each group, meaning each column having one single color.
+     *
+     *
+     * ***Linear***:
+     *
+     * ```N column objects```:
+  
+     *
+     * Each ```column``` object is considered a line path, the coordinates being
+     * the nodes of said line.
+     *
+     * ***Pie charts***:
+     *
+     * ```N column objects```:
+     *
+     * Each ```column``` object is considered a unique Pie chart, the coordinates
+     * being the slices of said pie.
+     *
+     * ***Waterfall***:
+     *
+     * ```N column objects```:
+     *
+     * Each ```column``` object is considered a unique Waterfall chart, the coordinates
+     * being bars with the ```yValue``` determining if it goes up or down. Only this
+     * type of chart admits negative values on its coordinates.
+     *
+     */
+    dataSets: {
+        data: TApiaChartColumn | TApiaChartColumn[];
+    };
+    margin?: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    } | number;
+    pnl_id?: string;
+    showAxisXTitle?: boolean;
+    showAxisYTitle?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showValues?: boolean;
+    /**
+     * Specific for waterfall charts to show the total sum of the values of the
+     * chart at the end while each column shows its value. Otherwise the values
+     * shown on each bar will represent the current sum of values
+     */
+    showTotal?: boolean;
+    title: string;
+    ratio: {
+        height: number;
+        width: number;
+        maxWidth: number;
+    };
+};
+
+type TWidgetZone = {
+    minimum: number;
+    maximum: number;
+    transparency: number;
+    color: string;
+};
+type TWidgetData = {
+    border: boolean;
+    backgroundColor: string;
+    currentValue: number;
+    forceProp?: Record<string, unknown>;
+    height: number;
+    maxValue: number;
+    minValue: number;
+    noValueColor: string;
+    pointerColor: string;
+    ringAnchor: number;
+    scaleFontSize: string | number;
+    valueColor: string;
+    valueDecimals: number;
+    valueFontSize: string | number;
+    valueType: string | number;
+    viewBtnDshAssociated: boolean;
+    viewBtnHistory: boolean;
+    viewBtnInfo: boolean;
+    viewBtnComments: boolean;
+    viewBtnUpdate: boolean;
+    viewBtnOpenCbe: boolean;
+    viewBtnOpenQry: boolean;
+    viewBtnOpenOtherQry: boolean;
+    viewBtnOpenOtherQbe: boolean;
+    viewWidName: boolean;
+    widKpiType: string | number;
+    width: number;
+    zones: {
+        Zone: TWidgetZone | TWidgetZone[];
+    };
+};
+type TApiaWidgetProps = {
+    colorRanges: string[];
+    currentValue: number;
+    height: number;
+    valueRanges: number[];
+    width: number;
+    decimals?: number;
+    addBorder?: boolean;
+    addInnerWhiteBorder?: boolean;
+    backgroundColor?: string;
+    currentValueColor?: string;
+    currentValueFontSize?: string | number;
+    forceProp?: Record<string, unknown>;
+    minValue?: number;
+    maxValue?: number;
+    pointerColor?: string;
+    scaleValuesSize?: string | number;
+    ringWidth?: number;
+    ringEmptyColor?: string;
+};
+type TApiaWidgetBaseProps<T> = {
+    currentValue: number;
+    currentValueFontSize?: string | number;
+    height: number;
+    maxValue?: number;
+    minValue?: number;
+    valueDecimals: number;
+    valueType: string | number;
+    valueRanges: number[];
+    width: number;
+} & T;
+type TApiaWidgetThermometerProps = {
+    colorRanges: string[];
+};
+type TApiaWidgetTLightProps = {
+    addBorder: boolean;
+    colorRanges: string[];
+    currentValueColor?: string;
+};
+type TApiaWidgetSpeedMeterProps = {
+    backgroundColor: string;
+    colorRanges: string[];
+    currentValueColor: string;
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetScaleProps = {
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetRingProps = {
+    colorRanges: string[];
+    currentValueColor: string;
+    ringEmptyColor: string;
+    ringWidth: number;
+};
+type TApiaWidgetOxfordProps = {
+    backgroundColor: string;
+    colorRanges: string[];
+    currentValueColor: string;
+    pointerColor: string;
+    scaleValuesSize: string | number;
+};
+type TApiaWidgetCounterProps = {
+    addBorder: boolean;
+    colorRanges: string[];
+};
+
+declare const WidgetComponent: ({ data, type, }: {
+    data: TApiaWidgetBaseProps<any>;
+    type: 'SpeedMeter' | 'Oxford' | 'Counter' | 'TLight' | 'Thermometer' | 'Scale' | 'Ring';
+}) => react.JSX.Element;
+
+type TChartData = {
+    chartData: ChartData;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showXAxisValues?: boolean;
+    showYAxisValues?: boolean;
+    showTable?: boolean;
+    type: 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar' | 'waterfall';
+    indexAxis?: 'x' | 'y';
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    id?: string;
+    chartId?: string;
+    aspectRatio?: number;
+};
+declare const ChartComponent: (props: TChartData) => react.JSX.Element;
+
+declare const PivotTableComponent: react.MemoExoticComponent<(props: Omit<PivotTableUIProps, 'onChange'>) => react.JSX.Element>;
+
+type ColumnSort = 'label_asc' | 'value_asc' | 'value_desc';
+type RowSort = 'label_asc' | 'value_asc' | 'value_desc';
+type Renderer = 'Table' | 'Table Heatmap' | 'Table Col Heatmap' | 'Table Row Heatmap' | 'Exportable TSV' | 'Grouped Column Chart' | 'Stacked Column Chart' | 'Grouped Bar Chart' | 'Stacked Bar Chart' | 'Line Chart' | 'Dot Chart' | 'Area Chart' | 'Scatter Chart' | 'Multiple Pie Chart';
+type Aggregator = 'Count' | 'Count Unique Values' | 'List Unique Values' | 'Sum' | 'Integer Sum' | 'Average' | 'Median' | 'Sample Variance' | 'Sample Standard Deviation' | 'Minimum' | 'Maximum' | 'First' | 'Last' | 'Sum over Sum' | 'Sum as Fraction of Total' | 'Sum as Fraction of Rows' | 'Sum as Fraction of Columns' | 'Count as Fraction of Total' | 'Count as Fraction of Rows' | 'Count as Fraction of Columns';
+type ShowAs = 'row' | 'column' | 'none';
+interface Column {
+    title: string;
+    showAs: ShowAs;
+}
+interface Row {
+    cell: string[];
+}
+interface Pivot {
+    title: string;
+    description: string;
+    mainPivot: boolean;
+    columnSort: ColumnSort;
+    rowSort: RowSort;
+    renderer: Renderer;
+    aggregator: Aggregator;
+    columns: Column[];
+    rows: Row[];
+}
+interface TPivotTableData {
+    load: {
+        pivots: Pivot[];
+    };
+}
+
+export { ChartComponent, type ColumnSort, PivotTableComponent, type TApiaChartColumn, type TApiaChartDefinition, type TApiaWidgetBaseProps, type TApiaWidgetCounterProps, type TApiaWidgetOxfordProps, type TApiaWidgetProps, type TApiaWidgetRingProps, type TApiaWidgetScaleProps, type TApiaWidgetSpeedMeterProps, type TApiaWidgetTLightProps, type TApiaWidgetThermometerProps, type TPivotTableData, type TWidgetData, type TWidgetZone, WidgetComponent };
 //# sourceMappingURL=index.d.ts.map