@apia/charts 1.0.4 → 2.0.1

package/dist/charts/linear/Node.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Fragment } from 'react';
+import tinycolor from 'tinycolor2';
+
+const Node = ({
+  currentCircle,
+  innerKey,
+  cx,
+  cy,
+  // coordinate,
+  color,
+  setCurrentCircle
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    currentCircle.includes(innerKey) && /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 6,
+        cx,
+        cy,
+        stroke: `#${tinycolor(color).saturate(25).toHex()}`,
+        fill: `#${tinycolor(color).saturate(25).toHex()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 3,
+        cx,
+        cy,
+        stroke: `#${tinycolor(color).darken(15).toHex()}`,
+        fill: `#${tinycolor(color).darken(15).toHex()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 6,
+        cx,
+        cy,
+        stroke: "transparent",
+        fill: "transparent",
+        onMouseEnter: () => {
+          setCurrentCircle([innerKey]);
+        },
+        onMouseLeave: () => {
+          setCurrentCircle([]);
+        },
+        style: { cursor: "pointer" }
+      }
+    )
+  ] }, innerKey);
+};
+
+export { Node };
+//# sourceMappingURL=Node.js.map

package/dist/charts/linear/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.js","sources":["../../../src/charts/linear/Node.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { TApiaChartColumn, TApiaChartCoordinate } from '../types';\n\nexport const Node = ({\n  currentCircle,\n  innerKey,\n  cx,\n  cy,\n  // coordinate,\n  color,\n  setCurrentCircle,\n}: // column,\n{\n  currentCircle: string[];\n  innerKey: string;\n  cx: number;\n  cy: number;\n  coordinate: TApiaChartCoordinate;\n  color: string;\n  setCurrentCircle: (value: React.SetStateAction<string[]>) => void;\n  column: TApiaChartColumn;\n}) => {\n  return (\n    <Fragment key={innerKey}>\n      {currentCircle.includes(innerKey) && (\n        <circle\n          r={6}\n          cx={cx}\n          cy={cy}\n          stroke={`#${tinycolor(color).saturate(25).toHex()}`}\n          fill={`#${tinycolor(color).saturate(25).toHex()}`}\n        />\n      )}\n      <circle\n        r={3}\n        cx={cx}\n        cy={cy}\n        stroke={`#${tinycolor(color).darken(15).toHex()}`}\n        fill={`#${tinycolor(color).darken(15).toHex()}`}\n      />\n      <circle\n        r={6}\n        cx={cx}\n        cy={cy}\n        stroke=\"transparent\"\n        fill=\"transparent\"\n        onMouseEnter={() => {\n          setCurrentCircle([innerKey]);\n        }}\n        onMouseLeave={() => {\n          setCurrentCircle([]);\n        }}\n        style={{ cursor: 'pointer' }}\n      />\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;AAIO,MAAM,OAAO,CAAC;AAAA,EACnB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,EAAA;AAAA;AAAA,EAEA,KAAA;AAAA,EACA,gBAAA;AACF,CAUM,KAAA;AACJ,EAAA,4BACG,QACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAc,aAAA,CAAA,QAAA,CAAS,QAAQ,CAC9B,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,CAAG,EAAA,CAAA;AAAA,QACH,EAAA;AAAA,QACA,EAAA;AAAA,QACA,MAAA,EAAQ,IAAI,SAAU,CAAA,KAAK,EAAE,QAAS,CAAA,EAAE,CAAE,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,QACjD,IAAA,EAAM,IAAI,SAAU,CAAA,KAAK,EAAE,QAAS,CAAA,EAAE,CAAE,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,OAAA;AAAA,KACjD;AAAA,oBAEF,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,CAAG,EAAA,CAAA;AAAA,QACH,EAAA;AAAA,QACA,EAAA;AAAA,QACA,MAAA,EAAQ,IAAI,SAAU,CAAA,KAAK,EAAE,MAAO,CAAA,EAAE,CAAE,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,QAC/C,IAAA,EAAM,IAAI,SAAU,CAAA,KAAK,EAAE,MAAO,CAAA,EAAE,CAAE,CAAA,KAAA,EAAO,CAAA,CAAA;AAAA,OAAA;AAAA,KAC/C;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,CAAG,EAAA,CAAA;AAAA,QACH,EAAA;AAAA,QACA,EAAA;AAAA,QACA,MAAO,EAAA,aAAA;AAAA,QACP,IAAK,EAAA,aAAA;AAAA,QACL,cAAc,MAAM;AAClB,UAAiB,gBAAA,CAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AAAA,SAC7B;AAAA,QACA,cAAc,MAAM;AAClB,UAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,SACrB;AAAA,QACA,KAAA,EAAO,EAAE,MAAA,EAAQ,SAAU,EAAA;AAAA,OAAA;AAAA,KAC7B;AAAA,GAAA,EAAA,EA9Ba,QA+Bf,CAAA,CAAA;AAEJ;;;;"}

package/dist/charts/pie/Pie.js

@@ -0,0 +1,184 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
+import { Box, spacing, Heading } from '@apia/theme';
+import { Group } from '@visx/group';
+import { Pie } from '@visx/shape';
+import { Slice } from './Slice.js';
+import { useChartStyles } from '../util/useChartStyles.js';
+import { useState, useMemo, useRef } from 'react';
+import { LegendContainer } from '../util/LegendContainer.js';
+import { getBarColor } from '../util/getBarColor.js';
+import { usePieAnimation } from './usePieAnimation.js';
+import uniqueId from 'lodash-es/uniqueId';
+import ChartSelector from '../util/ChartSelector.js';
+
+function adjustDimensions({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const PieChart = ({
+  chart,
+  className,
+  chartId,
+  allowZoom
+}) => {
+  const [dataset, setDataset] = useState(
+    arrayOrArray(chart.dataSets?.data)
+  );
+  const [currentPie, setCurrentPie] = useState("0");
+  const piezas = useMemo(() => {
+    return dataset.filter((piece) => !!piece.sets).map((piece) => {
+      return {
+        ...piece,
+        coordinate: piece.sets
+      };
+    })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];
+  }, [currentPie, dataset]);
+  usePieAnimation({
+    incomingColumn: arrayOrArray(chart.dataSets?.data)[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0],
+    piezas,
+    setDataset
+  });
+  let innerWidth = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
+  let innerHeight = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const centerY = useMemo(() => {
+    return innerHeight / 2.5;
+  }, [innerHeight]);
+  const centerX = useMemo(() => {
+    return innerWidth / 2.5;
+  }, [innerWidth]);
+  const top = centerY;
+  const left = centerX;
+  const getValue = (d) => Number(d.value) === 0 && arrayOrArray(piezas.coordinate).length === 1 ? 100 : d.value === void 0 ? 0 : Number(d.value);
+  const radius = Math.min(innerHeight, innerWidth) / 2.5;
+  const styles = useChartStyles(chart.colorSchema);
+  const colorsArray = styles ? styles.schema : ["#7ad6f4", "#45bdee", "#28a7ea", "#006cbb", "#034698", "#032f64"];
+  const names = arrayOrArray(
+    (dataset[parseInt(currentPie)] ?? dataset[0]).sets
+  ).map((coord) => {
+    return coord.key;
+  });
+  const colorReference = names.map((name, index) => {
+    return {
+      title: name,
+      color: getBarColor(arrayOrArray(colorsArray), index)
+    };
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  const previousPaths = useRef([]);
+  const id = useMemo(() => `Pie${uniqueId()}`, []);
+  const charts = arrayOrArray(chart.dataSets?.data).filter((piece) => !!piece.sets).map((piece) => {
+    return {
+      ...piece,
+      coordinate: piece.sets
+    };
+  });
+  const chartNames = charts.map((piece) => {
+    return piece.name;
+  });
+  if (!piezas) {
+    return null;
+  }
+  console.log(arrayOrArray(piezas.coordinate));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: boxRef,
+        id,
+        className: `${className ? className : ""} ${chartId} chartBox chartContainer`,
+        sx: { textAlign: "center", pb: spacing(5) },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            ref: elementRef,
+            height: radius * 2,
+            width: radius * 2,
+            className: `_${chartId} chart__svg`,
+            children: /* @__PURE__ */ jsx(Group, { top: top ?? 0, left: left ?? 0, children: /* @__PURE__ */ jsx(
+              Pie,
+              {
+                data: arrayOrArray(piezas.coordinate),
+                pieValue: getValue,
+                pieSort: null,
+                outerRadius: radius,
+                children: (pie) => {
+                  const paths = arrayOrArray(pie.arcs).map((arc) => {
+                    return pie.path(arc);
+                  });
+                  const result = pie.arcs.map((arc) => {
+                    const name = arc.data;
+                    const arcPath = pie.path(arc);
+                    return /* @__PURE__ */ jsx(
+                      Slice,
+                      {
+                        arc,
+                        chartId: id,
+                        arcPath,
+                        chart,
+                        actualColor: colorReference.find((color) => {
+                          return color.title === name.key;
+                        })?.color.startsWith("#") ? colorReference.find((color) => {
+                          return color.title === name.key;
+                        })?.color ?? "" : `#${colorReference.find((color) => {
+                          return color.title === name.key;
+                        })?.color ?? ""}`
+                      },
+                      `${name.key}_${name.value}`
+                    );
+                  });
+                  previousPaths.current = paths;
+                  return result;
+                }
+              }
+            ) })
+          }
+        )
+      },
+      piezas.name
+    ),
+    /* @__PURE__ */ jsxs(Box, { className: "chartLegend__Wrapper", children: [
+      !chart.hideSelector && charts.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__combo__wrapper", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("lblChartSel").text }),
+        /* @__PURE__ */ jsx(
+          ChartSelector,
+          {
+            chartId,
+            pieces: chartNames,
+            className: "chartSelectorCombo",
+            current: currentPie,
+            setCurrent: setCurrentPie
+          }
+        )
+      ] }),
+      chart.showLegend && colorReference.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
+        /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+      ] })
+    ] })
+  ] });
+};
+
+export { PieChart };
+//# sourceMappingURL=Pie.js.map

package/dist/charts/pie/Pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.js","sources":["../../../src/charts/pie/Pie.tsx"],"sourcesContent":["import {\n  TApiaChartColumn,\n  TApiaChartCoordinate,\n  TChartRendererProps,\n} from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { Box, Heading } from '@apia/theme';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Slice } from './Slice';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { useRef, useMemo, useState } from 'react';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\nimport { getBarColor } from '../util/getBarColor';\nimport { spacing } from '@apia/theme';\nimport { usePieAnimation } from './usePieAnimation';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\n\nfunction adjustDimensions({\n  width,\n  height,\n  maxWidth,\n}: {\n  width: number;\n  height: number;\n  maxWidth: number;\n}) {\n  if (width <= maxWidth) {\n    return { width, height };\n  }\n\n  const ratio = width / height;\n  const newWidth = maxWidth;\n  const newHeight = Math.floor(newWidth / ratio);\n\n  return { width: newWidth, height: newHeight };\n}\n\nexport type TPieChartEvents = { highlight: { barName: string } };\n\nconst PieChart = ({\n  chart,\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  const [dataset, setDataset] = useState<TApiaChartColumn[]>(\n    arrayOrArray(chart.dataSets?.data),\n  );\n  const [currentPie, setCurrentPie] = useState('0');\n  const piezas = useMemo(() => {\n    return dataset\n      .filter((piece) => !!piece.sets)\n      .map((piece) => {\n        return {\n          ...piece,\n          coordinate: piece.sets,\n        };\n      })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];\n  }, [currentPie, dataset]);\n\n  usePieAnimation({\n    incomingColumn: arrayOrArray(chart.dataSets?.data)[\n      dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0\n    ],\n    piezas,\n    setDataset,\n  });\n\n  let innerWidth =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  let innerHeight =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  if (innerWidth > chart.ratio.maxWidth) {\n    const newValues = adjustDimensions({\n      height: innerHeight,\n      width: innerWidth,\n      maxWidth: chart.ratio.maxWidth,\n    });\n    innerWidth = newValues.width;\n    innerHeight = newValues.height;\n  }\n\n  const centerY = useMemo(() => {\n    return innerHeight / 2.5;\n  }, [innerHeight]);\n  const centerX = useMemo(() => {\n    return innerWidth / 2.5;\n  }, [innerWidth]);\n  const top = centerY;\n  const left = centerX;\n\n  const getValue = (d: TApiaChartCoordinate) =>\n    Number(d.value) === 0 && arrayOrArray(piezas.coordinate).length === 1\n      ? 100\n      : d.value === undefined\n        ? 0\n        : Number(d.value);\n  const radius = Math.min(innerHeight, innerWidth) / 2.5;\n\n  const styles = useChartStyles(chart.colorSchema);\n\n  const colorsArray = styles\n    ? styles.schema\n    : ['#7ad6f4', '#45bdee', '#28a7ea', '#006cbb', '#034698', '#032f64'];\n  const names = arrayOrArray(\n    (dataset[parseInt(currentPie)] ?? dataset[0]).sets,\n  ).map((coord) => {\n    return coord.key;\n  });\n  const colorReference: TChartReference = names.map((name, index) => {\n    return {\n      title: name,\n      color: getBarColor(arrayOrArray(colorsArray), index),\n    };\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  const previousPaths = useRef<(string | null)[]>([]);\n  const id = useMemo(() => `Pie${uniqueId()}`, []);\n  const charts = arrayOrArray(chart.dataSets?.data)\n    .filter((piece) => !!piece.sets)\n    .map((piece) => {\n      return {\n        ...piece,\n        coordinate: piece.sets,\n      };\n    });\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  if (!piezas) {\n    return null;\n  }\n\n  console.log(arrayOrArray(piezas.coordinate));\n  return (\n    <>\n      <Box\n        ref={boxRef}\n        id={id}\n        key={piezas.name}\n        className={`${\n          className ? className : ''\n        } ${chartId} chartBox chartContainer`}\n        sx={{ textAlign: 'center', pb: spacing(5) }}\n      >\n        <svg\n          ref={elementRef}\n          height={radius * 2}\n          width={radius * 2}\n          className={`_${chartId} chart__svg`}\n        >\n          <Group top={top ?? 0} left={left ?? 0}>\n            <Pie\n              data={arrayOrArray(piezas.coordinate)}\n              pieValue={getValue}\n              pieSort={null}\n              outerRadius={radius}\n            >\n              {(pie) => {\n                const paths = arrayOrArray(pie.arcs).map((arc) => {\n                  return pie.path(arc);\n                });\n\n                const result = pie.arcs.map((arc) => {\n                  const name = arc.data;\n\n                  const arcPath = pie.path(arc);\n                  return (\n                    <Slice\n                      arc={arc}\n                      chartId={id}\n                      arcPath={arcPath}\n                      chart={chart}\n                      key={`${name.key}_${name.value}`}\n                      actualColor={\n                        colorReference\n                          .find((color) => {\n                            return color.title === name.key;\n                          })\n                          ?.color.startsWith('#')\n                          ? colorReference.find((color) => {\n                              return color.title === name.key;\n                            })?.color ?? ''\n                          : `#${\n                              colorReference.find((color) => {\n                                return color.title === name.key;\n                              })?.color ?? ''\n                            }`\n                      }\n                    />\n                  );\n                });\n                previousPaths.current = paths;\n\n                return result;\n              }}\n            </Pie>\n          </Group>\n        </svg>\n      </Box>\n      <Box className=\"chartLegend__Wrapper\">\n        {!chart.hideSelector && charts.length > 1 && (\n          <Box className=\"chart__combo__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('lblChartSel').text}</Heading>\n            <ChartSelector\n              chartId={chartId}\n              pieces={chartNames}\n              className=\"chartSelectorCombo\"\n              current={currentPie}\n              setCurrent={setCurrentPie}\n            />\n          </Box>\n        )}\n\n        {chart.showLegend && colorReference.length > 1 && (\n          <Box className=\"chart__legend__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n            <LegendContainer id={chartId} references={colorReference} />\n          </Box>\n        )}\n      </Box>\n    </>\n  );\n};\n\nexport { PieChart };\n"],"names":[],"mappings":"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"}

package/dist/charts/pie/Slice.js

@@ -0,0 +1,96 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { useState, useRef, useMemo } from 'react';
+import tinycolor from 'tinycolor2';
+import { localPoint } from '@visx/event';
+import { useImperativeComponentContext, useImperativeComponentEvents } from '@apia/util';
+import { legendContainerMethods } from '../util/LegendContainer.js';
+import { chartMethods } from '../ChartRenderer.js';
+import { ApiaUtil } from '@apia/components';
+
+const Slice = ({
+  arc,
+  arcPath,
+  chart,
+  actualColor,
+  chartId: outerChartId
+}) => {
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
+  const ref = useRef(null);
+  const name = arc.data;
+  const { id: chartId } = useImperativeComponentContext();
+  useImperativeComponentEvents({
+    highlight(barNameId) {
+      const barName = barNameId.split("_$_")[0];
+      setIsHighlighted(barName === arc.data.key);
+      setIsAnyHighlighted(barName !== arc.data.key && barName !== "");
+      if (barName === arc.data.key) {
+        ApiaUtil.instance.tooltips.open({
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  color: `#${tinycolor(actualColor).toHex()}`
+                },
+                children: /* @__PURE__ */ jsx("strong", { children: arc.data.key })
+              }
+            ),
+            chart.showValues && /* @__PURE__ */ jsx("div", { children: `${arc.value} ${arc.data.percentage !== "" && arc.data.percentage !== void 0 ? "- " + arc.data.percentage : ""}${arc.data.percentage !== "" && arc.data.percentage !== void 0 ? "%" : ""}` })
+          ] }),
+          attachToElement: () => {
+            return ref.current;
+          },
+          attachToElementAnchorPoint: "center",
+          closeOnClickOut: () => {
+            return window.innerWidth > 700;
+          },
+          closeOnMouseLeaveAttachedElement: (ev) => {
+            return !ev.relatedTarget.closest(".legendItem");
+          },
+          className: arc.data.key
+        });
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      id: `arc-${name.key}-${name.value}-${outerChartId}`,
+      ref,
+      style: useMemo(
+        () => ({
+          "&:hover": {
+            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`
+          },
+          transition: "fill 500ms, opacity 500ms"
+        }),
+        [actualColor]
+      ),
+      color: isAnyHighlighted ? `#${tinycolor(actualColor).desaturate(70).toHex()}` : actualColor,
+      fill: isAnyHighlighted ? `#${tinycolor(actualColor).desaturate(70).toHex()}` : actualColor,
+      opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+      d: arcPath ?? "",
+      onMouseEnter: (ev) => {
+        legendContainerMethods.highlight(chartId, arc.data.key);
+        chartMethods(chartId, "highlight", `${name.key}_$_${outerChartId}`);
+        ev.target.classList?.add("over");
+        const point = {
+          x: localPoint(ev)?.x,
+          y: localPoint(ev)?.y
+        };
+        if (!point)
+          return;
+      },
+      onMouseLeave: (ev) => {
+        legendContainerMethods.highlight(chartId, "");
+        chartMethods(chartId, "highlight", "");
+        ev.target.classList?.remove("over");
+      }
+    },
+    `arc-${name.key}-${name.value}-${outerChartId}`
+  );
+};
+
+export { Slice };
+//# sourceMappingURL=Slice.js.map

package/dist/charts/pie/Slice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slice.js","sources":["../../../src/charts/pie/Slice.tsx"],"sourcesContent":["import { TApiaChartCoordinate, TChartRendererProps } from '../types';\nimport { useMemo, useState, useRef } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { localPoint } from '@visx/event';\nimport { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport {\n  useImperativeComponentContext,\n  useImperativeComponentEvents,\n} from '@apia/util';\nimport { legendContainerMethods } from '../util/LegendContainer';\nimport { TChartEvents, chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\n// import uniqueId from 'lodash-es/uniqueId';\n\nexport const Slice = ({\n  arc,\n  arcPath,\n  chart,\n  actualColor,\n  chartId: outerChartId,\n}: Pick<TChartRendererProps, 'chart'> &\n  Pick<TChartRendererProps, 'chartId'> & {\n    arc: PieArcDatum<TApiaChartCoordinate>;\n    arcPath: string | null;\n    actualColor: string;\n  }) => {\n  // const uId = uniqueId();\n  const [isHighlighted, setIsHighlighted] = useState(false);\n  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);\n  const ref = useRef<SVGPathElement | null>(null);\n  const name = arc.data;\n  const { id: chartId } = useImperativeComponentContext();\n  useImperativeComponentEvents<TChartEvents>({\n    highlight(barNameId) {\n      const barName = barNameId.split('_$_')[0];\n      setIsHighlighted(barName === arc.data.key);\n      setIsAnyHighlighted(barName !== arc.data.key && barName !== '');\n      if (barName === arc.data.key) {\n        ApiaUtil.instance.tooltips.open({\n          children: (\n            <>\n              <div\n                style={{\n                  color: `#${tinycolor(actualColor).toHex()}`,\n                }}\n              >\n                <strong>{arc.data.key}</strong>\n              </div>\n              {chart.showValues && (\n                <div>{`${arc.value} ${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '- ' + arc.data.percentage\n                    : ''\n                }${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '%'\n                    : ''\n                }`}</div>\n              )}\n            </>\n          ),\n          attachToElement: () => {\n            return ref.current as unknown as HTMLElement;\n          },\n          attachToElementAnchorPoint: 'center',\n          closeOnClickOut: () => {\n            return window.innerWidth > 700;\n          },\n          closeOnMouseLeaveAttachedElement: (ev) => {\n            return !(ev.relatedTarget as HTMLElement).closest('.legendItem');\n          },\n          className: arc.data.key,\n        });\n      }\n    },\n  });\n\n  return (\n    <path\n      key={`arc-${name.key}-${name.value}-${outerChartId}`}\n      id={`arc-${name.key}-${name.value}-${outerChartId}`}\n      ref={ref}\n      style={useMemo(\n        () => ({\n          '&:hover': {\n            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`,\n          },\n          transition: 'fill 500ms, opacity 500ms',\n        }),\n        [actualColor],\n      )}\n      color={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      fill={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      opacity={isAnyHighlighted && !isHighlighted ? 0.15 : 1}\n      d={arcPath ?? ''}\n      onMouseEnter={(ev) => {\n        legendContainerMethods.highlight(chartId, arc.data.key);\n        chartMethods(chartId, 'highlight', `${name.key}_$_${outerChartId}`);\n        (ev.target as HTMLElement).classList?.add('over');\n        const point = {\n          x: localPoint(ev)?.x,\n          y: localPoint(ev)?.y,\n        };\n        if (!point) return;\n      }}\n      onMouseLeave={(ev) => {\n        legendContainerMethods.highlight(chartId, '');\n\n        chartMethods(chartId, 'highlight', '');\n        (ev.target as HTMLElement).classList?.remove('over');\n      }}\n    ></path>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/charts/pie/usePieAnimation.js

@@ -0,0 +1,123 @@
+import { useRef } from 'react';
+import { arrayOrArray, animate, addBoundary } from '@apia/util';
+
+const usePieAnimation = ({
+  incomingColumn,
+  piezas,
+  setDataset
+}) => {
+  const previousObjectRef = useRef(void 0);
+  const actualObjectRef = useRef(void 0);
+  const isAnimating = useRef(false);
+  if (previousObjectRef.current && piezas) {
+    const previousCoordinates = isAnimating.current && actualObjectRef.current ? arrayOrArray(actualObjectRef.current.coordinate) : arrayOrArray(previousObjectRef.current.coordinate);
+    const currentCoordinates = arrayOrArray(incomingColumn.sets);
+    const hasValueChanged = previousCoordinates.some((prevCoord, index) => {
+      const currentCoord = currentCoordinates[index];
+      return prevCoord.value !== currentCoord?.value || prevCoord.value === currentCoord?.value && prevCoord.key !== currentCoord.key;
+    });
+    if (hasValueChanged) {
+      isAnimating.current = true;
+      const difference = [];
+      for (let i = 0; i < Math.max(previousCoordinates.length, currentCoordinates.length); i++) {
+        const coord1 = previousCoordinates[i];
+        const coord2 = currentCoordinates[i];
+        if (coord1 && coord2) {
+          const newValue = Math.abs(
+            parseInt(coord1.value) - parseInt(coord2.value)
+          ).toString();
+          const newCoordinate = {
+            key: coord2.key,
+            color: coord2.color,
+            // Assuming color is the same for both coordinates
+            value: newValue,
+            percentage: coord2.percentage !== "" && coord2.percentage !== void 0 ? coord2.percentage : void 0
+          };
+          difference.push(newCoordinate);
+        } else if (!coord1 && coord2 && previousCoordinates.length > 0) {
+          const newValue = Math.abs(0 - parseInt(coord2.value)).toString();
+          const newCoordinate = {
+            key: coord2.key,
+            color: coord2.color,
+            // Assuming color is the same for both coordinates
+            value: newValue,
+            percentage: coord2.percentage !== "" && coord2.percentage !== void 0 ? coord2.percentage : void 0
+          };
+          difference.push(newCoordinate);
+        }
+      }
+      return animate(
+        500,
+        (progress) => {
+          const step = {
+            color: piezas.color,
+            name: incomingColumn.name,
+            sets: difference.map((coord, i) => {
+              return {
+                key: coord.key,
+                color: coord.color,
+                percentage: coord.percentage,
+                value: addBoundary(
+                  Number(currentCoordinates[i].value) > Number(
+                    previousCoordinates[i] ? previousCoordinates[i].value : 0
+                  ) ? Number(coord.value) * progress + Number(
+                    previousCoordinates[i] ? previousCoordinates[i].value : 0
+                  ) : Number(
+                    previousCoordinates[i] ? previousCoordinates[i].value : 0
+                  ) - Number(coord.value) * progress,
+                  Math.min(
+                    Number(
+                      previousCoordinates[i] ? previousCoordinates[i].value : 0
+                    ),
+                    Number(currentCoordinates[i].value)
+                  ),
+                  Math.max(
+                    Number(
+                      previousCoordinates[i] ? previousCoordinates[i].value : 0
+                    ),
+                    Number(currentCoordinates[i].value)
+                  )
+                ).toString()
+              };
+            })
+          };
+          actualObjectRef.current = {
+            color: step.color,
+            coordinate: step.sets,
+            name: step.name
+          };
+          setDataset((prev) => {
+            const newIndex = prev.findIndex((col) => {
+              return col.name === step.name;
+            });
+            const returnObj = [...prev];
+            if (newIndex >= 0) {
+              returnObj[newIndex] = step;
+              return returnObj;
+            } else {
+              return [step];
+            }
+          });
+        },
+        () => {
+          const newPrev = {
+            ...incomingColumn,
+            coordinate: incomingColumn.sets
+          };
+          previousObjectRef.current = newPrev;
+          isAnimating.current = false;
+        }
+      );
+    }
+  } else if (!previousObjectRef.current) {
+    const newPrev = {
+      ...incomingColumn,
+      coordinate: incomingColumn.sets
+    };
+    previousObjectRef.current = newPrev;
+    isAnimating.current = false;
+  }
+};
+
+export { usePieAnimation };
+//# sourceMappingURL=usePieAnimation.js.map

package/dist/charts/pie/usePieAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePieAnimation.js","sources":["../../../src/charts/pie/usePieAnimation.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { TApiaChartColumn, TApiaChartCoordinate } from '../types';\nimport {\n  addBoundary,\n  animate,\n  arrayOrArray,\n  // useUpdateEffect,\n} from '@apia/util';\n\nexport const usePieAnimation = ({\n  incomingColumn,\n  piezas,\n  setDataset,\n}: {\n  incomingColumn: TApiaChartColumn;\n  setDataset: React.Dispatch<React.SetStateAction<TApiaChartColumn[]>>;\n  piezas: {\n    coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n    color: string;\n    sets: TApiaChartCoordinate | TApiaChartCoordinate[];\n    name: string;\n  };\n}) => {\n  const previousObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const actualObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const isAnimating = useRef(false);\n\n  if (previousObjectRef.current && piezas) {\n    const previousCoordinates =\n      isAnimating.current && actualObjectRef.current\n        ? arrayOrArray(actualObjectRef.current.coordinate)\n        : arrayOrArray(previousObjectRef.current.coordinate);\n\n    const currentCoordinates = arrayOrArray(incomingColumn.sets);\n\n    const hasValueChanged = previousCoordinates.some((prevCoord, index) => {\n      const currentCoord = currentCoordinates[index];\n\n      return (\n        prevCoord.value !== currentCoord?.value ||\n        (prevCoord.value === currentCoord?.value &&\n          prevCoord.key !== currentCoord.key)\n      );\n    });\n\n    if (hasValueChanged) {\n      isAnimating.current = true;\n      const difference: TApiaChartCoordinate[] = [];\n      for (\n        let i = 0;\n        i < Math.max(previousCoordinates.length, currentCoordinates.length);\n        i++\n      ) {\n        const coord1 = previousCoordinates[i];\n        const coord2 = currentCoordinates[i];\n\n        if (coord1 && coord2) {\n          const newValue = Math.abs(\n            parseInt(coord1.value) - parseInt(coord2.value),\n          ).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        } else if (!coord1 && coord2 && previousCoordinates.length > 0) {\n          const newValue = Math.abs(0 - parseInt(coord2.value)).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        }\n      }\n\n      return animate(\n        500,\n        (progress) => {\n          const step: TApiaChartColumn = {\n            color: piezas.color,\n            name: incomingColumn.name,\n            sets: difference.map((coord, i) => {\n              return {\n                key: coord.key,\n                color: coord.color,\n                percentage: coord.percentage,\n                value: addBoundary(\n                  Number(currentCoordinates[i].value) >\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    )\n                    ? Number(coord.value) * progress +\n                        Number(\n                          previousCoordinates[i]\n                            ? previousCoordinates[i].value\n                            : 0,\n                        )\n                    : Number(\n                        previousCoordinates[i]\n                          ? previousCoordinates[i].value\n                          : 0,\n                      ) -\n                        Number(coord.value) * progress,\n                  Math.min(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                  Math.max(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                ).toString(),\n              };\n            }),\n          };\n          actualObjectRef.current = {\n            color: step.color,\n            coordinate: step.sets,\n            name: step.name,\n          };\n          setDataset((prev) => {\n            const newIndex = prev.findIndex((col) => {\n              return col.name === step.name;\n            });\n            const returnObj = [...prev];\n            if (newIndex >= 0) {\n              returnObj[newIndex] = step;\n              return returnObj;\n            } else {\n              return [step];\n            }\n          });\n        },\n        () => {\n          const newPrev = {\n            ...incomingColumn,\n            coordinate: incomingColumn.sets,\n          };\n          previousObjectRef.current = newPrev;\n          isAnimating.current = false;\n        },\n      );\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }\n  } else if (!previousObjectRef.current) {\n    const newPrev = {\n      ...incomingColumn,\n      coordinate: incomingColumn.sets,\n    };\n    previousObjectRef.current = newPrev;\n    isAnimating.current = false;\n  }\n};\n"],"names":[],"mappings":"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"}