@apia/charts 2.0.9 → 2.0.10

package/dist/charts/chartJsRenderer/ChartComponent.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ChartData } from 'chart.js';
+
+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;
+
+export { ChartComponent, type TChartData };
+//# sourceMappingURL=ChartComponent.d.ts.map

package/dist/charts/chartJsRenderer/ChartComponent.d.ts.map

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

package/dist/charts/chartJsRenderer/ChartComponent.js

@@ -0,0 +1,248 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { arrayOrArray, getValueByPath } from '@apia/util';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarController, BarElement, PieController, ArcElement, LineController } from 'chart.js';
+import { useMemo } from 'react';
+import { Chart as Chart$1 } from 'react-chartjs-2';
+import { useThemeUI } from '@apia/theme';
+
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarController,
+  BarElement,
+  PieController,
+  ArcElement,
+  LineController
+);
+const ChartComponent = (props) => {
+  const actualProps = Object.assign(
+    {
+      chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },
+      type: "bar",
+      indexAxis: "x",
+      showLegend: true,
+      showValues: true,
+      showXAxisValues: true,
+      showYAxisValues: true,
+      showTable: true,
+      xAxisTitle: "",
+      yAxisTitle: "",
+      aspectRatio: 2.5
+    },
+    props
+  );
+  const { theme } = useThemeUI();
+  if (!theme.layout)
+    console.error("The layout property is missing in the current theme");
+  const data = useMemo(() => {
+    const charts = theme.layout?.charts ?? {};
+    return {
+      datasets: (actualProps.type === "waterfall" ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {
+        let sum = 0;
+        const newData = dataset.data.map((dataValue) => {
+          if (typeof dataValue === "number") {
+            const currentValue = sum;
+            sum += dataValue;
+            return [currentValue, sum];
+          } else {
+            return dataValue;
+          }
+        });
+        return {
+          ...dataset,
+          data: newData
+        };
+      }) : actualProps.chartData.datasets).map((dataset, datasetIndex) => {
+        const isSingle = arrayOrArray(actualProps.chartData.datasets).every(
+          (dataset2) => arrayOrArray(dataset2.data).length === 1
+        ) || actualProps.type === "pie";
+        return {
+          ...dataset,
+          backgroundColor: dataset.backgroundColor.map((color, i) => {
+            let schemaArray = [];
+            if (typeof color === "string") {
+              if (color in charts) {
+                const currentBackgroundStylescheme = {
+                  schema: getValueByPath(
+                    theme.colors,
+                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                    charts[color.toLowerCase()]?.schema
+                  )
+                };
+                if (typeof currentBackgroundStylescheme.schema === "object" && currentBackgroundStylescheme.schema) {
+                  if (isSingle) {
+                    if (actualProps.type === "pie") {
+                      schemaArray = Object.values(
+                        currentBackgroundStylescheme.schema
+                      ).map((varColor) => {
+                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                      });
+                    } else {
+                      schemaArray = new Array(6).fill(
+                        Object.values(currentBackgroundStylescheme.schema)[datasetIndex % 6]
+                      ).map((varColor) => {
+                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                      });
+                    }
+                  } else {
+                    schemaArray = new Array(6).fill(
+                      Object.values(currentBackgroundStylescheme.schema).map(
+                        (varColor) => {
+                          return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                        }
+                      )[datasetIndex % 6]
+                    );
+                  }
+                }
+              } else {
+                schemaArray = [color, color, color, color, color, color];
+              }
+            } else {
+              return color[datasetIndex % color.length];
+            }
+            return schemaArray[i % 6];
+          }),
+          borderColor: dataset.borderColor.map(
+            (color, i) => {
+              let schemaBorderArray = [];
+              if (typeof color === "string") {
+                if (color in charts) {
+                  const currentBorderStylescheme = {
+                    schema: getValueByPath(
+                      theme.colors,
+                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                      charts[color.toLowerCase()]?.schema
+                    )
+                  };
+                  if (typeof currentBorderStylescheme.schema === "object" && currentBorderStylescheme.schema) {
+                    schemaBorderArray = Object.values(
+                      currentBorderStylescheme.schema
+                    ).map((varColor) => {
+                      return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
+                    });
+                  }
+                } else {
+                  schemaBorderArray = [
+                    color,
+                    color,
+                    color,
+                    color,
+                    color,
+                    color
+                  ];
+                }
+              } else {
+                return color[datasetIndex % color.length];
+              }
+              return schemaBorderArray[i % 6];
+            }
+          )
+        };
+      }),
+      labels: actualProps.chartData.labels
+    };
+  }, [
+    actualProps.chartData.datasets,
+    actualProps.chartData.labels,
+    actualProps.type,
+    theme.colors,
+    theme.layout
+  ]);
+  const options = useMemo(() => {
+    return {
+      plugins: {
+        legend: { position: "right", display: actualProps.showLegend },
+        tooltip: {
+          callbacks: {
+            label(tooltipItem) {
+              const XLabel = tooltipItem.dataset.label ?? "";
+              let YValue = tooltipItem.formattedValue;
+              if (isNaN(parseFloat(YValue))) {
+                const arrayValue = tooltipItem.raw;
+                const realValue = arrayValue[1] - arrayValue[0];
+                YValue = `${realValue}`;
+              }
+              let finalString = "";
+              if (actualProps.showLegend || actualProps.type === "pie") {
+                finalString += XLabel;
+                if (actualProps.showValues) {
+                  finalString += ": " + YValue;
+                }
+              } else if (actualProps.showValues) {
+                finalString += YValue;
+              }
+              return finalString;
+            },
+            title(tooltipItems) {
+              if (actualProps.type !== "pie" && !actualProps.showXAxisValues && actualProps.indexAxis === "x" || actualProps.type !== "pie" && !actualProps.showYAxisValues && actualProps.indexAxis === "y" || actualProps.type === "pie" && !actualProps.showLegend) {
+                return "";
+              }
+              return tooltipItems[0].label;
+            }
+          },
+          enabled: (actualProps.indexAxis === "y" ? actualProps.showYAxisValues : actualProps.showXAxisValues) || actualProps.showValues || actualProps.showLegend
+        }
+      },
+      aspectRatio: actualProps.aspectRatio,
+      indexAxis: actualProps.indexAxis,
+      scales: {
+        x: {
+          display: actualProps.type !== "pie",
+          title: {
+            display: actualProps.showXAxisValues,
+            text: actualProps.indexAxis === "y" ? actualProps.yAxisTitle : actualProps.xAxisTitle
+          },
+          ticks: {
+            display: !!actualProps.showXAxisValues
+          },
+          grid: {
+            display: actualProps.showTable
+          }
+        },
+        y: {
+          axis: actualProps.indexAxis === "y" ? "x" : "y",
+          display: actualProps.type !== "pie",
+          title: {
+            display: actualProps.showYAxisValues,
+            text: actualProps.indexAxis === "y" ? actualProps.xAxisTitle : actualProps.yAxisTitle
+          },
+          ticks: {
+            display: !!actualProps.showYAxisValues
+          },
+          grid: {
+            display: actualProps.showTable
+          }
+        }
+      }
+    };
+  }, [
+    actualProps.aspectRatio,
+    actualProps.indexAxis,
+    actualProps.showLegend,
+    actualProps.showTable,
+    actualProps.showValues,
+    actualProps.showXAxisValues,
+    actualProps.showYAxisValues,
+    actualProps.type,
+    actualProps.xAxisTitle,
+    actualProps.yAxisTitle
+  ]);
+  return /* @__PURE__ */ jsx(
+    Chart$1,
+    {
+      id: actualProps.id ?? void 0,
+      className: actualProps.chartId ?? "",
+      type: actualProps.type === "waterfall" ? "bar" : actualProps.type,
+      options,
+      data
+    }
+  );
+};
+
+export { ChartComponent };
+//# sourceMappingURL=ChartComponent.js.map

package/dist/charts/chartJsRenderer/ChartComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartComponent.js","sources":["../../../src/charts/chartJsRenderer/ChartComponent.tsx"],"sourcesContent":["import { arrayOrArray, getValueByPath } from '@apia/util';\r\nimport {\r\n  ChartData,\r\n  ChartOptions,\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  ChartTypeRegistry,\r\n  TooltipItem,\r\n  LineController,\r\n} from 'chart.js';\r\nimport { useMemo } from 'react';\r\nimport { Chart } from 'react-chartjs-2';\r\nimport { ColorModesScale, ThemeUIStyleObject, useThemeUI } from '@apia/theme';\r\nimport { IChartStylesSchemes } from '../types';\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  BarElement,\r\n  PieController,\r\n  ArcElement,\r\n  LineController,\r\n);\r\n\r\nexport type TChartData = {\r\n  chartData: ChartData;\r\n  showLegend?: boolean;\r\n  showValues?: boolean;\r\n  showXAxisValues?: boolean;\r\n  showYAxisValues?: boolean;\r\n  showTable?: boolean;\r\n  type:\r\n    | 'bar'\r\n    | 'line'\r\n    | 'scatter'\r\n    | 'bubble'\r\n    | 'pie'\r\n    | 'doughnut'\r\n    | 'polarArea'\r\n    | 'radar'\r\n    | 'waterfall';\r\n  indexAxis?: 'x' | 'y';\r\n  xAxisTitle?: string;\r\n  yAxisTitle?: string;\r\n  id?: string;\r\n  chartId?: string;\r\n  aspectRatio?: number;\r\n};\r\n\r\nexport type TDataset = {\r\n  backgroundColor?: string | string[];\r\n  borderColor?: string | string[];\r\n  borderWidth?: number;\r\n  label?: string;\r\n  data: number[] | [number, number][];\r\n}[];\r\n\r\nexport const ChartComponent = (props: TChartData) => {\r\n  const actualProps: TChartData = Object.assign(\r\n    {\r\n      chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },\r\n      type: 'bar',\r\n      indexAxis: 'x',\r\n      showLegend: true,\r\n      showValues: true,\r\n      showXAxisValues: true,\r\n      showYAxisValues: true,\r\n      showTable: true,\r\n      xAxisTitle: '',\r\n      yAxisTitle: '',\r\n      aspectRatio: 2.5,\r\n    },\r\n    props,\r\n  );\r\n  const { theme } = useThemeUI();\r\n\r\n  if (!theme.layout)\r\n    console.error('The layout property is missing in the current theme');\r\n\r\n  const data: ChartData = useMemo(() => {\r\n    const charts = ((theme.layout as Record<string, ThemeUIStyleObject>)\r\n      ?.charts ?? {}) as IChartStylesSchemes;\r\n    return {\r\n      datasets: (actualProps.type === 'waterfall'\r\n        ? arrayOrArray(actualProps.chartData.datasets).map((dataset) => {\r\n            let sum = 0;\r\n            const newData = dataset.data.map<[number, number]>((dataValue) => {\r\n              if (typeof dataValue === 'number') {\r\n                const currentValue = sum;\r\n                sum += dataValue;\r\n                return [currentValue, sum] as [number, number];\r\n              } else {\r\n                return dataValue as [number, number];\r\n              }\r\n            });\r\n\r\n            return {\r\n              ...dataset,\r\n              data: newData,\r\n            };\r\n          })\r\n        : actualProps.chartData.datasets\r\n      ).map((dataset, datasetIndex) => {\r\n        const isSingle =\r\n          arrayOrArray(actualProps.chartData.datasets).every(\r\n            (dataset) => arrayOrArray(dataset.data).length === 1,\r\n          ) || actualProps.type === 'pie';\r\n\r\n        return {\r\n          ...dataset,\r\n          backgroundColor: (\r\n            dataset.backgroundColor as string[] | string[][]\r\n          ).map((color, i) => {\r\n            let schemaArray: string[] = [];\r\n            if (typeof color === 'string') {\r\n              if (color in charts) {\r\n                const currentBackgroundStylescheme: {\r\n                  schema: Record<string, string>;\r\n                } = {\r\n                  schema: getValueByPath(\r\n                    theme.colors as ColorModesScale,\r\n                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                    charts[color.toLowerCase()]?.schema as string,\r\n                  ) as Record<string, string>,\r\n                };\r\n\r\n                if (\r\n                  typeof currentBackgroundStylescheme.schema === 'object' &&\r\n                  currentBackgroundStylescheme.schema\r\n                ) {\r\n                  if (isSingle) {\r\n                    if (actualProps.type === 'pie') {\r\n                      schemaArray = Object.values(\r\n                        currentBackgroundStylescheme.schema,\r\n                      ).map((varColor) => {\r\n                        return window\r\n                          .getComputedStyle(document.documentElement)\r\n                          .getPropertyValue(varColor.slice(4, -1));\r\n                      });\r\n                    } else {\r\n                      schemaArray = new Array<string>(6)\r\n                        .fill(\r\n                          Object.values(currentBackgroundStylescheme.schema)[\r\n                            datasetIndex % 6\r\n                          ],\r\n                        )\r\n                        .map((varColor) => {\r\n                          return window\r\n                            .getComputedStyle(document.documentElement)\r\n                            .getPropertyValue(varColor.slice(4, -1));\r\n                        });\r\n                    }\r\n                  } else {\r\n                    schemaArray = new Array<string>(6).fill(\r\n                      Object.values(currentBackgroundStylescheme.schema).map(\r\n                        (varColor) => {\r\n                          return window\r\n                            .getComputedStyle(document.documentElement)\r\n                            .getPropertyValue(varColor.slice(4, -1));\r\n                        },\r\n                      )[datasetIndex % 6],\r\n                    );\r\n                  }\r\n                }\r\n              } else {\r\n                schemaArray = [color, color, color, color, color, color];\r\n              }\r\n            } else {\r\n              return color[datasetIndex % color.length];\r\n            }\r\n\r\n            return schemaArray[i % 6];\r\n          }),\r\n          borderColor: (dataset.borderColor as string[] | string[][]).map(\r\n            (color, i) => {\r\n              let schemaBorderArray: string[] = [];\r\n              if (typeof color === 'string') {\r\n                if (color in charts) {\r\n                  const currentBorderStylescheme: {\r\n                    schema: Record<string, string>;\r\n                  } = {\r\n                    schema: getValueByPath(\r\n                      theme.colors as ColorModesScale,\r\n                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\r\n                      charts[color.toLowerCase()]?.schema as string,\r\n                    ) as Record<string, string>,\r\n                  };\r\n\r\n                  if (\r\n                    typeof currentBorderStylescheme.schema === 'object' &&\r\n                    currentBorderStylescheme.schema\r\n                  ) {\r\n                    schemaBorderArray = Object.values(\r\n                      currentBorderStylescheme.schema,\r\n                    ).map((varColor) => {\r\n                      return window\r\n                        .getComputedStyle(document.documentElement)\r\n                        .getPropertyValue(varColor.slice(4, -1));\r\n                    });\r\n                  }\r\n                } else {\r\n                  schemaBorderArray = [\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                    color,\r\n                  ];\r\n                }\r\n              } else {\r\n                return color[datasetIndex % color.length];\r\n              }\r\n              return schemaBorderArray[i % 6];\r\n            },\r\n          ),\r\n        };\r\n      }),\r\n      labels: actualProps.chartData.labels,\r\n    };\r\n  }, [\r\n    actualProps.chartData.datasets,\r\n    actualProps.chartData.labels,\r\n    actualProps.type,\r\n    theme.colors,\r\n    theme.layout,\r\n  ]);\r\n\r\n  const options: ChartOptions = useMemo(() => {\r\n    return {\r\n      plugins: {\r\n        legend: { position: 'right', display: actualProps.showLegend },\r\n        tooltip: {\r\n          callbacks: {\r\n            label(tooltipItem: TooltipItem<keyof ChartTypeRegistry>) {\r\n              const XLabel = tooltipItem.dataset.label ?? '';\r\n              let YValue = tooltipItem.formattedValue;\r\n              if (isNaN(parseFloat(YValue))) {\r\n                const arrayValue: [number, number] = tooltipItem.raw as [\r\n                  number,\r\n                  number,\r\n                ];\r\n                const realValue = arrayValue[1] - arrayValue[0];\r\n                YValue = `${realValue}`;\r\n              }\r\n              let finalString = '';\r\n              if (actualProps.showLegend || actualProps.type === 'pie') {\r\n                finalString += XLabel;\r\n                if (actualProps.showValues) {\r\n                  finalString += ': ' + YValue;\r\n                }\r\n              } else if (actualProps.showValues) {\r\n                finalString += YValue;\r\n              }\r\n              return finalString;\r\n            },\r\n            title(tooltipItems: TooltipItem<keyof ChartTypeRegistry>[]) {\r\n              if (\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showXAxisValues &&\r\n                  actualProps.indexAxis === 'x') ||\r\n                (actualProps.type !== 'pie' &&\r\n                  !actualProps.showYAxisValues &&\r\n                  actualProps.indexAxis === 'y') ||\r\n                (actualProps.type === 'pie' && !actualProps.showLegend)\r\n              ) {\r\n                return '';\r\n              }\r\n              return tooltipItems[0].label;\r\n            },\r\n          },\r\n          enabled:\r\n            (actualProps.indexAxis === 'y'\r\n              ? actualProps.showYAxisValues\r\n              : actualProps.showXAxisValues) ||\r\n            actualProps.showValues ||\r\n            actualProps.showLegend,\r\n        },\r\n      },\r\n      aspectRatio: actualProps.aspectRatio,\r\n      indexAxis: actualProps.indexAxis,\r\n      scales: {\r\n        x: {\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showXAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.yAxisTitle\r\n                : actualProps.xAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showXAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n        y: {\r\n          axis: (actualProps.indexAxis === 'y' ? 'x' : 'y') as 'x' | 'y' | 'r',\r\n          display: actualProps.type !== 'pie',\r\n          title: {\r\n            display: actualProps.showYAxisValues,\r\n            text:\r\n              actualProps.indexAxis === 'y'\r\n                ? actualProps.xAxisTitle\r\n                : actualProps.yAxisTitle,\r\n          },\r\n          ticks: {\r\n            display: !!actualProps.showYAxisValues,\r\n          },\r\n          grid: {\r\n            display: actualProps.showTable,\r\n          },\r\n        },\r\n      },\r\n    };\r\n  }, [\r\n    actualProps.aspectRatio,\r\n    actualProps.indexAxis,\r\n    actualProps.showLegend,\r\n    actualProps.showTable,\r\n    actualProps.showValues,\r\n    actualProps.showXAxisValues,\r\n    actualProps.showYAxisValues,\r\n    actualProps.type,\r\n    actualProps.xAxisTitle,\r\n    actualProps.yAxisTitle,\r\n  ]);\r\n\r\n  return (\r\n    <Chart\r\n      id={actualProps.id ?? undefined}\r\n      className={actualProps.chartId ?? ''}\r\n      type={actualProps.type === 'waterfall' ? 'bar' : actualProps.type}\r\n      options={options}\r\n      data={data}\r\n    />\r\n  );\r\n};\r\n"],"names":["ChartJS","dataset","Chart"],"mappings":"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"}

package/dist/charts/types.d.ts

@@ -0,0 +1,173 @@
+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';
+    axisXTitle?: string;
+    axisYTitle?: string;
+    aspectRatio?: number;
+    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;
+    };
+};
+
+export type { TApiaChartColumn, TApiaChartCoordinate, TApiaChartDefinition };
+//# sourceMappingURL=types.d.ts.map

package/dist/charts/types.d.ts.map

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