@apia/charts 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Charts

package/dist/index.d.ts

@@ -0,0 +1,207 @@
+import * as _apia_util from '@apia/util';
+import React$1 from 'react';
+import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+
+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 TPie = {
+    chartType: 'pie2D';
+};
+type TNoPie = {
+    chartType: 'barH2D' | 'barV2D' | 'linear' | 'waterfall';
+    axisXTitle: string;
+    axisYTitle: string;
+};
+type TApiaChartDefinitionBase = {
+    /**
+     * 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[];
+    };
+    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 TApiaPieChartDefinition = TPie & TApiaChartDefinitionBase;
+type TApiaNoPieChartDefinition = TNoPie & TApiaChartDefinitionBase;
+type TApiaChartDefinition = TApiaPieChartDefinition | TApiaNoPieChartDefinition;
+declare function isPieChart(chart: TApiaChartDefinition): chart is TApiaPieChartDefinition;
+type TChartMargin = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+type TChartRendererProps = {
+    chart: TApiaChartDefinition;
+    margin?: number | TChartMargin;
+    disableEvents?: boolean;
+    className?: string;
+    chartId: string;
+    parentRef?: React.MutableRefObject<HTMLElement>;
+    outerClassName?: string;
+    allowZoom?: boolean;
+};
+
+declare const ChartRenderer: React$1.FC<{
+    currentChart: TApiaChartDefinition;
+    chartConfig?: Partial<Omit<TApiaChartDefinition, "columns">> | undefined;
+    chartProps?: Partial<TChartRendererProps> | undefined;
+    allowScaleChange?: boolean | undefined;
+    chartId: string;
+    allowZoom?: boolean | undefined;
+} & React$1.RefAttributes<HTMLElement> & {
+    id: _apia_util.TId;
+}>;
+
+declare const WidgetContainer: () => theme_ui_jsx_runtime.JSX.Element;
+
+export { ChartRenderer, TApiaChartDefinition, WidgetContainer, isPieChart };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}