@apia/charts 1.0.4 → 2.0.1

package/dist/charts/types.d.ts

@@ -0,0 +1,188 @@
+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;
+    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 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;
+};
+
+export type { TApiaChartColumn, TApiaChartCoordinate, TApiaChartDefinition, TChartMargin, TChartRendererProps };
+//# 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":""}

package/dist/charts/util/ChartSelector.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Select } from '@apia/theme';
+
+function ChartSelector({
+  chartId,
+  pieces,
+  className,
+  current,
+  setCurrent
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      sx: { width: "auto" },
+      name: `chartSelector_${chartId}`,
+      className: `chartSelector_${chartId} ${className ?? ""}`,
+      value: current ?? "0",
+      onChange: (ev) => {
+        ev.preventDefault();
+        setCurrent(ev.target.value);
+      },
+      children: [
+        pieces.map((piece, i) => {
+          return {
+            label: piece,
+            value: `${i}`
+          };
+        }).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)),
+        " "
+      ]
+    }
+  );
+}
+
+export { ChartSelector as default };
+//# sourceMappingURL=ChartSelector.js.map

package/dist/charts/util/ChartSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSelector.js","sources":["../../../src/charts/util/ChartSelector.tsx"],"sourcesContent":["import { Select } from '@apia/theme';\n\nfunction ChartSelector({\n  chartId,\n  pieces,\n  className,\n  current,\n  setCurrent,\n}: {\n  chartId: string;\n  pieces: string[];\n  className?: string;\n  current: string;\n  setCurrent: React.Dispatch<React.SetStateAction<string>>;\n}) {\n  return (\n    <Select\n      sx={{ width: 'auto' }}\n      name={`chartSelector_${chartId}`}\n      className={`chartSelector_${chartId} ${className ?? ''}`}\n      value={current ?? '0'}\n      onChange={(ev) => {\n        ev.preventDefault();\n        setCurrent(ev.target.value);\n      }}\n    >\n      {pieces\n        .map((piece, i) => {\n          return {\n            label: piece,\n            value: `${i}`,\n          };\n        })\n        .map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}{' '}\n    </Select>\n  );\n}\n\nexport default ChartSelector;\n"],"names":[],"mappings":";;;AAEA,SAAS,aAAc,CAAA;AAAA,EACrB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AACF,CAMG,EAAA;AACD,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,MACpB,IAAA,EAAM,iBAAiB,OAAO,CAAA,CAAA;AAAA,MAC9B,SAAW,EAAA,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAA,EAAI,aAAa,EAAE,CAAA,CAAA;AAAA,MACtD,OAAO,OAAW,IAAA,GAAA;AAAA,MAClB,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAW,UAAA,CAAA,EAAA,CAAG,OAAO,KAAK,CAAA,CAAA;AAAA,OAC5B;AAAA,MAEC,QAAA,EAAA;AAAA,QACE,MAAA,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,CAAM,KAAA;AACjB,UAAO,OAAA;AAAA,YACL,KAAO,EAAA,KAAA;AAAA,YACP,KAAA,EAAO,GAAG,CAAC,CAAA,CAAA;AAAA,WACb,CAAA;AAAA,SACD,CAAA,CACA,GAAI,CAAA,CAAC,2BACH,GAAA,CAAA,QAAA,EAAA,EAA0B,KAAO,EAAA,MAAA,CAAO,KACtC,EAAA,QAAA,EAAA,MAAA,CAAO,KADG,EAAA,EAAA,MAAA,CAAO,KAEpB,CACD,CAAA;AAAA,QAAG,GAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACR,CAAA;AAEJ;;;;"}

package/dist/charts/util/ColoredLegendItem.js

@@ -0,0 +1,46 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { ApiaUtil, SimpleButton } from '@apia/components';
+import { icons } from '@apia/icons';
+import { useCallback } from 'react';
+import { chartMethods } from '../ChartRenderer.js';
+import { useImperativeComponentContext } from '@apia/util';
+
+const ColoredLegendItem = ({
+  groupId,
+  title,
+  color,
+  className,
+  isHighlighted,
+  isAnyHighlighted,
+  avoidEvent
+}) => {
+  const { id: chartId } = useImperativeComponentContext();
+  const handleMouseEnter = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    chartMethods(chartId, "highlight", groupId);
+  }, [avoidEvent, chartId, groupId]);
+  const handleMouseLeave = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    ApiaUtil.instance.tooltips.closeAll();
+    chartMethods(chartId, "highlight", "");
+  }, [avoidEvent, chartId]);
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      variant: "link",
+      className: `${className ?? ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
+      iconColor: color || "black",
+      icon: color === "transparent" ? void 0 : icons.SquareFilled,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: title
+    }
+  );
+};
+
+export { ColoredLegendItem };
+//# sourceMappingURL=ColoredLegendItem.js.map

package/dist/charts/util/ColoredLegendItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColoredLegendItem.js","sources":["../../../src/charts/util/ColoredLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { icons } from '@apia/icons';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\nimport { useImperativeComponentContext } from '@apia/util';\n\nconst ColoredLegendItem = ({\n  groupId,\n  title,\n  color,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  color: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    ApiaUtil.instance.tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      iconColor={color || 'black'}\n      icon={color === 'transparent' ? undefined : icons.SquareFilled}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { ColoredLegendItem };\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,oBAAoB,CAAC;AAAA,EACzB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAS,QAAA,CAAA,QAAA,CAAS,SAAS,QAAS,EAAA,CAAA;AACpC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,WAAW,KAAS,IAAA,OAAA;AAAA,MACpB,IAAM,EAAA,KAAA,KAAU,aAAgB,GAAA,KAAA,CAAA,GAAY,KAAM,CAAA,YAAA;AAAA,MAClD,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/charts/util/EmptyGrid.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+declare const EmptyGrid: ({ width }: {
+    width?: number | undefined;
+}) => React.JSX.Element;
+
+export { EmptyGrid };
+//# sourceMappingURL=EmptyGrid.d.ts.map

package/dist/charts/util/EmptyGrid.d.ts.map

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

package/dist/charts/util/EmptyGrid.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import { scaleBand } from '@visx/scale';
+import { Grid } from '@visx/visx';
+
+const EmptyGrid = ({ width }) => {
+  const xScale = scaleBand({
+    range: [0, width ?? 400],
+    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
+    padding: 0.2
+  });
+  const yScale = scaleBand({
+    range: [0, 400],
+    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
+    padding: 0.2
+  });
+  return /* @__PURE__ */ jsxs("svg", { height: 400, width: width ?? 400, children: [
+    /* @__PURE__ */ jsx(
+      Grid.Grid,
+      {
+        height: 400,
+        width: width ?? 400,
+        numTicksRows: 10,
+        numTicksColumns: 10,
+        xScale,
+        yScale
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AxisLeft,
+      {
+        scale: yScale,
+        left: 20,
+        hideTicks: true,
+        tickLabelProps: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AxisBottom,
+      {
+        scale: xScale,
+        top: 380,
+        hideTicks: true,
+        tickLabelProps: { display: "none" }
+      }
+    )
+  ] });
+};
+
+export { EmptyGrid };
+//# sourceMappingURL=EmptyGrid.js.map

package/dist/charts/util/EmptyGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyGrid.js","sources":["../../../src/charts/util/EmptyGrid.tsx"],"sourcesContent":["import { AxisBottom, AxisLeft } from '@visx/axis';\nimport { scaleBand } from '@visx/scale';\nimport { Grid } from '@visx/visx';\n\nexport const EmptyGrid = ({ width }: { width?: number }) => {\n  const xScale = scaleBand<string>({\n    range: [0, width ?? 400],\n    domain: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],\n    padding: 0.2,\n  });\n  const yScale = scaleBand<string>({\n    range: [0, 400],\n    domain: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],\n    padding: 0.2,\n  });\n  return (\n    <svg height={400} width={width ?? 400}>\n      <Grid.Grid\n        height={400}\n        width={width ?? 400}\n        numTicksRows={10}\n        numTicksColumns={10}\n        xScale={xScale}\n        yScale={yScale}\n      />\n      <AxisLeft\n        scale={yScale}\n        left={20}\n        hideTicks={true}\n        tickLabelProps={{ display: 'none' }}\n      />\n      <AxisBottom\n        scale={xScale}\n        top={380}\n        hideTicks={true}\n        tickLabelProps={{ display: 'none' }}\n      />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,SAAY,GAAA,CAAC,EAAE,KAAA,EAAgC,KAAA;AAC1D,EAAA,MAAM,SAAS,SAAkB,CAAA;AAAA,IAC/B,KAAO,EAAA,CAAC,CAAG,EAAA,KAAA,IAAS,GAAG,CAAA;AAAA,IACvB,MAAQ,EAAA,CAAC,GAAK,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,KAAK,CAAA;AAAA,IACzE,OAAS,EAAA,GAAA;AAAA,GACV,CAAA,CAAA;AACD,EAAA,MAAM,SAAS,SAAkB,CAAA;AAAA,IAC/B,KAAA,EAAO,CAAC,CAAA,EAAG,GAAG,CAAA;AAAA,IACd,MAAQ,EAAA,CAAC,GAAK,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,KAAK,CAAA;AAAA,IACzE,OAAS,EAAA,GAAA;AAAA,GACV,CAAA,CAAA;AACD,EAAA,4BACG,KAAI,EAAA,EAAA,MAAA,EAAQ,GAAK,EAAA,KAAA,EAAO,SAAS,GAChC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,IAAA;AAAA,MAAL;AAAA,QACC,MAAQ,EAAA,GAAA;AAAA,QACR,OAAO,KAAS,IAAA,GAAA;AAAA,QAChB,YAAc,EAAA,EAAA;AAAA,QACd,eAAiB,EAAA,EAAA;AAAA,QACjB,MAAA;AAAA,QACA,MAAA;AAAA,OAAA;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,MAAA;AAAA,QACP,IAAM,EAAA,EAAA;AAAA,QACN,SAAW,EAAA,IAAA;AAAA,QACX,cAAA,EAAgB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,OAAA;AAAA,KACpC;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,MAAA;AAAA,QACP,GAAK,EAAA,GAAA;AAAA,QACL,SAAW,EAAA,IAAA;AAAA,QACX,cAAA,EAAgB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,OAAA;AAAA,KACpC;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/charts/util/LegendContainer.js

@@ -0,0 +1,53 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Box } from '@apia/theme';
+import { ColoredLegendItem } from './ColoredLegendItem.js';
+import { makeImperativeComponent } from '@apia/util';
+import { NumberedLegendItem } from './NumberedLegendItem.js';
+
+const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
+  initialState: {
+    highlightedBarGroup: ""
+  },
+  methods: {
+    highlight(setState, highlightedBarGroup) {
+      setState({ highlightedBarGroup });
+    }
+  },
+  Component: ({
+    references,
+    highlightedBarGroup,
+    avoidEvent,
+    useNumbered
+  }) => {
+    return /* @__PURE__ */ jsx(Box, { className: `legendContainer`, children: !useNumbered ? references.map((data) => {
+      return /* @__PURE__ */ jsx(
+        ColoredLegendItem,
+        {
+          isHighlighted: data.title === highlightedBarGroup,
+          isAnyHighlighted: highlightedBarGroup !== "",
+          groupId: data.title,
+          color: data.color,
+          title: data.title,
+          avoidEvent: avoidEvent ?? false
+        },
+        data.title
+      );
+    }) : references.map((data, i) => {
+      return /* @__PURE__ */ jsx(
+        NumberedLegendItem,
+        {
+          isHighlighted: data.title === highlightedBarGroup,
+          isAnyHighlighted: highlightedBarGroup !== "",
+          groupId: data.title,
+          position: `${i + 1}`,
+          title: data.title,
+          avoidEvent: avoidEvent ?? false
+        },
+        data.title
+      );
+    }) });
+  }
+});
+
+export { LegendContainer, legendContainerMethods };
+//# sourceMappingURL=LegendContainer.js.map

package/dist/charts/util/LegendContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendContainer.js","sources":["../../../src/charts/util/LegendContainer.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { ColoredLegendItem } from './ColoredLegendItem';\nimport { makeImperativeComponent } from '@apia/util';\nimport { NumberedLegendItem } from './NumberedLegendItem';\n\nexport type TChartReference = {\n  color: string;\n  title: string;\n}[];\n\nexport const [legendContainerMethods, , LegendContainer] =\n  makeImperativeComponent<\n    {\n      references: TChartReference;\n      itemClassName?: string;\n      avoidEvent?: boolean;\n      useNumbered?: boolean;\n    },\n    never\n  >()({\n    initialState: {\n      highlightedBarGroup: '',\n    },\n    methods: {\n      highlight(setState, highlightedBarGroup: string) {\n        setState({ highlightedBarGroup });\n      },\n    },\n    Component: ({\n      references,\n      highlightedBarGroup,\n      avoidEvent,\n      useNumbered,\n    }) => {\n      return (\n        <Box className={`legendContainer`}>\n          {!useNumbered\n            ? references.map((data) => {\n                return (\n                  <ColoredLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    color={data.color}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })\n            : references.map((data, i) => {\n                return (\n                  <NumberedLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    position={`${i + 1}`}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })}\n        </Box>\n      );\n    },\n  });\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,CAAC,sBAAwB,IAAE,eAAe,CAAA,GACrD,yBAQI,CAAA;AAAA,EACF,YAAc,EAAA;AAAA,IACZ,mBAAqB,EAAA,EAAA;AAAA,GACvB;AAAA,EACA,OAAS,EAAA;AAAA,IACP,SAAA,CAAU,UAAU,mBAA6B,EAAA;AAC/C,MAAS,QAAA,CAAA,EAAE,qBAAqB,CAAA,CAAA;AAAA,KAClC;AAAA,GACF;AAAA,EACA,WAAW,CAAC;AAAA,IACV,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,GACI,KAAA;AACJ,IACE,uBAAA,GAAA,CAAC,OAAI,SAAW,EAAA,CAAA,eAAA,CAAA,EACb,WAAC,WACE,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,IAAS,KAAA;AACvB,MACE,uBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACD,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,MAAM,CAAM,KAAA;AAC1B,MACE,uBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,QAAA,EAAU,CAAG,EAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AAAA,UAClB,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACP,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAC;;;;"}

package/dist/charts/util/NumberedLegendItem.js

@@ -0,0 +1,45 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { ApiaUtil, SimpleButton } from '@apia/components';
+import { useCallback } from 'react';
+import { chartMethods } from '../ChartRenderer.js';
+import { useImperativeComponentContext } from '@apia/util';
+
+const NumberedLegendItem = ({
+  groupId,
+  title,
+  className,
+  isHighlighted,
+  isAnyHighlighted,
+  avoidEvent
+}) => {
+  const { id: chartId } = useImperativeComponentContext();
+  const handleMouseEnter = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    chartMethods(chartId, "highlight", groupId);
+  }, [avoidEvent, chartId, groupId]);
+  const handleMouseLeave = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    ApiaUtil.instance.tooltips.closeAll();
+    chartMethods(chartId, "highlight", "");
+  }, [avoidEvent, chartId]);
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      variant: "link",
+      className: `${className ?? ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
+      sx: {
+        opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: title
+    }
+  );
+};
+
+export { NumberedLegendItem };
+//# sourceMappingURL=NumberedLegendItem.js.map

package/dist/charts/util/NumberedLegendItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberedLegendItem.js","sources":["../../../src/charts/util/NumberedLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { useImperativeComponentContext } from '@apia/util';\nimport { ApiaUtil } from '@apia/components';\n\nconst NumberedLegendItem = ({\n  groupId,\n  title,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  position: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    ApiaUtil.instance.tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      sx={{\n        opacity: isAnyHighlighted && !isHighlighted ? '0.15' : '1',\n      }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { NumberedLegendItem };\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAS,QAAA,CAAA,QAAA,CAAS,SAAS,QAAS,EAAA,CAAA;AACpC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,MAAS,GAAA,GAAA;AAAA,OACzD;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/charts/util/getBarColor.js

@@ -0,0 +1,29 @@
+import tinycolor from 'tinycolor2';
+
+function getBarColor(colors, index, alwaysDiffer = false) {
+  const module = colors.length;
+  let count = 0;
+  let barColor = "";
+  if (!alwaysDiffer) {
+    if (colors[index]) {
+      barColor = colors[index];
+    } else {
+      let innerIndex = index;
+      while (innerIndex >= module) {
+        innerIndex = index / module;
+        count++;
+      }
+      barColor = tinycolor(colors[index % module]).desaturate(count * 5).toHex().startsWith("#") ? tinycolor(colors[index % module]).desaturate(count * 5).toHex() : `#${tinycolor(colors[index % module]).desaturate(count * 5).toHex()}`;
+    }
+  } else {
+    if (colors[index]) {
+      barColor = colors[index];
+    } else {
+      barColor = tinycolor(colors[index % module]).toHex();
+    }
+  }
+  return barColor;
+}
+
+export { getBarColor };
+//# sourceMappingURL=getBarColor.js.map

package/dist/charts/util/getBarColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBarColor.js","sources":["../../../src/charts/util/getBarColor.tsx"],"sourcesContent":["import tinycolor from 'tinycolor2';\n\nexport function getBarColor(\n  colors: string[],\n  index: number,\n  alwaysDiffer = false,\n) {\n  const module = colors.length;\n  let count = 0;\n  let barColor = '';\n  if (!alwaysDiffer) {\n    if (colors[index]) {\n      barColor = colors[index];\n    } else {\n      let innerIndex = index;\n      while (innerIndex >= module) {\n        innerIndex = index / module;\n        count++;\n      }\n      barColor = tinycolor(colors[index % module])\n        .desaturate(count * 5)\n        .toHex()\n        .startsWith('#')\n        ? tinycolor(colors[index % module])\n            .desaturate(count * 5)\n            .toHex()\n        : `#${tinycolor(colors[index % module])\n            .desaturate(count * 5)\n            .toHex()}`;\n    }\n  } else {\n    if (colors[index]) {\n      barColor = colors[index];\n    } else {\n      barColor = tinycolor(colors[index % module]).toHex();\n    }\n  }\n  return barColor;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,WACd,CAAA,MAAA,EACA,KACA,EAAA,YAAA,GAAe,KACf,EAAA;AACA,EAAA,MAAM,SAAS,MAAO,CAAA,MAAA,CAAA;AACtB,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AACZ,EAAA,IAAI,QAAW,GAAA,EAAA,CAAA;AACf,EAAA,IAAI,CAAC,YAAc,EAAA;AACjB,IAAI,IAAA,MAAA,CAAO,KAAK,CAAG,EAAA;AACjB,MAAA,QAAA,GAAW,OAAO,KAAK,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,IAAI,UAAa,GAAA,KAAA,CAAA;AACjB,MAAA,OAAO,cAAc,MAAQ,EAAA;AAC3B,QAAA,UAAA,GAAa,KAAQ,GAAA,MAAA,CAAA;AACrB,QAAA,KAAA,EAAA,CAAA;AAAA,OACF;AACA,MAAA,QAAA,GAAW,UAAU,MAAO,CAAA,KAAA,GAAQ,MAAM,CAAC,EACxC,UAAW,CAAA,KAAA,GAAQ,CAAC,CAAA,CACpB,OACA,CAAA,UAAA,CAAW,GAAG,CACb,GAAA,SAAA,CAAU,OAAO,KAAQ,GAAA,MAAM,CAAC,CAAA,CAC7B,WAAW,KAAQ,GAAA,CAAC,EACpB,KAAM,EAAA,GACT,IAAI,SAAU,CAAA,MAAA,CAAO,KAAQ,GAAA,MAAM,CAAC,CACjC,CAAA,UAAA,CAAW,QAAQ,CAAC,CAAA,CACpB,OAAO,CAAA,CAAA,CAAA;AAAA,KAChB;AAAA,GACK,MAAA;AACL,IAAI,IAAA,MAAA,CAAO,KAAK,CAAG,EAAA;AACjB,MAAA,QAAA,GAAW,OAAO,KAAK,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,QAAA,GAAW,UAAU,MAAO,CAAA,KAAA,GAAQ,MAAM,CAAC,EAAE,KAAM,EAAA,CAAA;AAAA,KACrD;AAAA,GACF;AACA,EAAO,OAAA,QAAA,CAAA;AACT;;;;"}

package/dist/charts/util/parseMargin.js

@@ -0,0 +1,11 @@
+function parseMargin(margin = {
+  left: 100,
+  right: 50,
+  top: 50,
+  bottom: 70
+}) {
+  return typeof margin === "number" ? { left: margin, right: margin, top: margin, bottom: margin } : margin;
+}
+
+export { parseMargin };
+//# sourceMappingURL=parseMargin.js.map

package/dist/charts/util/parseMargin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseMargin.js","sources":["../../../src/charts/util/parseMargin.ts"],"sourcesContent":["import { TChartRendererProps } from '../types';\n\nexport function parseMargin(\n  margin: TChartRendererProps['margin'] = {\n    left: 100,\n    right: 50,\n    top: 50,\n    bottom: 70,\n  },\n) {\n  return typeof margin === 'number'\n    ? { left: margin, right: margin, top: margin, bottom: margin }\n    : margin;\n}\n"],"names":[],"mappings":"AAEO,SAAS,YACd,MAAwC,GAAA;AAAA,EACtC,IAAM,EAAA,GAAA;AAAA,EACN,KAAO,EAAA,EAAA;AAAA,EACP,GAAK,EAAA,EAAA;AAAA,EACL,MAAQ,EAAA,EAAA;AACV,CACA,EAAA;AACA,EAAA,OAAO,OAAO,MAAA,KAAW,QACrB,GAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,KAAO,EAAA,MAAA,EAAQ,GAAK,EAAA,MAAA,EAAQ,MAAQ,EAAA,MAAA,EACpD,GAAA,MAAA,CAAA;AACN;;;;"}

package/dist/charts/util/useChartStyles.js

@@ -0,0 +1,35 @@
+import { useThemeUI } from '@apia/theme';
+import { getValueByPath } from '@apia/util';
+
+function useChartStyles(schemeName) {
+  const { theme } = useThemeUI();
+  if (!theme.layout)
+    console.error("The layout property is missing in the current theme");
+  const charts = theme.layout?.charts ?? {};
+  const defaultStyles = charts.common;
+  const currentStylescheme = {
+    schema: getValueByPath(
+      theme.colors,
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      charts[schemeName && schemeName !== "0" ? schemeName : "blue"]?.schema
+    )
+  };
+  if (typeof currentStylescheme.schema === "object" && currentStylescheme.schema) {
+    const returnStyles = Object.entries(
+      currentStylescheme.schema
+    ).map((e) => {
+      const element = document.querySelector("*");
+      if (element) {
+        if (e[1].startsWith("var(")) {
+          return window.getComputedStyle(element).getPropertyValue(e[1].slice(4, -1));
+        }
+        return window.getComputedStyle(element).getPropertyValue(e[1]);
+      }
+      return window.getComputedStyle(document.querySelector("*")).getPropertyValue(e[1]);
+    });
+    return { ...defaultStyles, schema: returnStyles };
+  }
+}
+
+export { useChartStyles };
+//# sourceMappingURL=useChartStyles.js.map

package/dist/charts/util/useChartStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartStyles.js","sources":["../../../src/charts/util/useChartStyles.ts"],"sourcesContent":["import { ColorModesScale, ThemeUIStyleObject, useThemeUI } from '@apia/theme';\nimport { IChartStylesSchemes, TChartStylesDefinition } from '../types';\nimport { getValueByPath } from '@apia/util';\n\nexport function useChartStyles(\n  schemeName?: string,\n): TChartStylesDefinition | undefined {\n  const { theme } = useThemeUI();\n\n  if (!theme.layout)\n    console.error('The layout property is missing in the current theme');\n\n  const charts = ((theme.layout as Record<string, ThemeUIStyleObject>)\n    ?.charts ?? {}) as IChartStylesSchemes;\n  const defaultStyles = charts.common;\n  const currentStylescheme = {\n    schema: getValueByPath(\n      theme.colors as ColorModesScale,\n      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n      charts[schemeName && schemeName !== '0' ? schemeName : 'blue']\n        ?.schema as string,\n    ),\n  };\n  if (\n    typeof currentStylescheme.schema === 'object' &&\n    currentStylescheme.schema\n  ) {\n    const returnStyles: string[] = Object.entries(\n      currentStylescheme.schema,\n    ).map((e) => {\n      const element = document.querySelector('*');\n      if (element) {\n        if ((e[1] as string).startsWith('var(')) {\n          return window\n            .getComputedStyle(element)\n            .getPropertyValue((e[1] as string).slice(4, -1));\n        }\n        return window\n          .getComputedStyle(element)\n          .getPropertyValue(e[1] as unknown as string);\n      }\n\n      return window\n        .getComputedStyle(document.querySelector('*') as Element)\n        .getPropertyValue(e[1] as unknown as string);\n    });\n    return { ...defaultStyles, schema: returnStyles };\n  }\n  // return {\n  //   ...defaultStyles,\n  //   ...currentStylescheme,\n  // };\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,eACd,UACoC,EAAA;AACpC,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,UAAW,EAAA,CAAA;AAE7B,EAAA,IAAI,CAAC,KAAM,CAAA,MAAA;AACT,IAAA,OAAA,CAAQ,MAAM,qDAAqD,CAAA,CAAA;AAErE,EAAA,MAAM,MAAW,GAAA,KAAA,CAAM,MACnB,EAAA,MAAA,IAAU,EAAC,CAAA;AACf,EAAA,MAAM,gBAAgB,MAAO,CAAA,MAAA,CAAA;AAC7B,EAAA,MAAM,kBAAqB,GAAA;AAAA,IACzB,MAAQ,EAAA,cAAA;AAAA,MACN,KAAM,CAAA,MAAA;AAAA;AAAA,MAEN,OAAO,UAAc,IAAA,UAAA,KAAe,GAAM,GAAA,UAAA,GAAa,MAAM,CACzD,EAAA,MAAA;AAAA,KACN;AAAA,GACF,CAAA;AACA,EAAA,IACE,OAAO,kBAAA,CAAmB,MAAW,KAAA,QAAA,IACrC,mBAAmB,MACnB,EAAA;AACA,IAAA,MAAM,eAAyB,MAAO,CAAA,OAAA;AAAA,MACpC,kBAAmB,CAAA,MAAA;AAAA,KACrB,CAAE,GAAI,CAAA,CAAC,CAAM,KAAA;AACX,MAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AAC1C,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAK,CAAE,CAAA,CAAC,CAAa,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AACvC,UAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,OAAO,CACxB,CAAA,gBAAA,CAAkB,CAAE,CAAA,CAAC,CAAa,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,SACnD;AACA,QAAA,OAAO,OACJ,gBAAiB,CAAA,OAAO,EACxB,gBAAiB,CAAA,CAAA,CAAE,CAAC,CAAsB,CAAA,CAAA;AAAA,OAC/C;AAEA,MAAO,OAAA,MAAA,CACJ,gBAAiB,CAAA,QAAA,CAAS,aAAc,CAAA,GAAG,CAAY,CACvD,CAAA,gBAAA,CAAiB,CAAE,CAAA,CAAC,CAAsB,CAAA,CAAA;AAAA,KAC9C,CAAA,CAAA;AACD,IAAA,OAAO,EAAE,GAAG,aAAe,EAAA,MAAA,EAAQ,YAAa,EAAA,CAAA;AAAA,GAClD;AAKF;;;;"}