@apia/charts 1.0.4 → 2.0.1

package/dist/charts/verticalBars/VerticalBars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalBars.js","sources":["../../../src/charts/verticalBars/VerticalBars.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { parseMargin } from '../util/parseMargin';\nimport { scaleLinear, scaleBand, scaleLog, scaleOrdinal } from '@visx/scale';\nimport { useLayoutEffect, useMemo } from 'react';\nimport { Box, Heading } from '@apia/theme';\nimport { Grid } from '@visx/visx';\nimport { Group } from '@visx/group';\nimport { BarGroup } from '@visx/shape';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { Bar } from './Bar';\nimport { getBarColor } from '../util/getBarColor';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n  columnName: string;\n  [key: string]: string;\n}\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\nconst getXValue = (d: IParsedColumn) => d.columnName;\n\nexport type TVerticalBarsEvents = { highlight: { barName: string } };\n\n/**\n * Acepta parámetro pieces que debe ser compuesto por...\n *\n * @example\n *\n * // Instanciar con solamente x\n * <Pie pieces={{x: 3}} />\n *\n * // Instanciar con x e y\n * <Pie pieces={{x: 3, y: 5}} />\n */\nconst VerticalBars = ({\n  margin = { top: 20, left: 100, bottom: 24, right: 0 },\n  chart,\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  const effectiveMargin = parseMargin(margin);\n  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n    effectiveMargin.left = 50;\n  }\n  let innerWidth =\n    chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n  let innerHeight =\n    chart.ratio.height +\n    (chart.showAxisXTitle\n      ? -effectiveMargin.top - effectiveMargin.bottom\n      : (-effectiveMargin.top - effectiveMargin.bottom) / 2);\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 styles = useChartStyles(chart.colorSchema);\n\n  const columnas = arrayOrArray(chart.dataSets?.data)\n    .filter((column) => !!column.sets)\n    .map((column) => {\n      return {\n        ...column,\n        sets: column.sets,\n      };\n    });\n\n  const xValues = arrayOrArray(columnas[0].sets).map(\n    (innerCoord) => innerCoord.key,\n  );\n  const columnNames = columnas.map((col) => {\n    return col.name;\n  });\n\n  const parsedData: IParsedColumn[] = xValues.map((x) => {\n    const obj: IParsedColumn = columnas.reduce<IParsedColumn>(\n      (acc, column) => {\n        return {\n          ...acc,\n          [column.name]: arrayOrArray(column.sets).filter((coord) => {\n            return coord.key === x;\n          })[0].value,\n        };\n      },\n      { columnName: x },\n    );\n    return obj;\n  });\n\n  const xScale = scaleBand<string>({\n    range: [\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.left,\n      chart.ratio.width,\n    ],\n    domain: parsedData.map(getXValue),\n    padding: 0.2,\n  });\n\n  const numericXScale = scaleBand<string>({\n    range: [\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.left,\n      chart.ratio.width,\n    ],\n    domain: parsedData.map((_, i) => `${i + 1}`),\n    padding: 0.2,\n  });\n\n  const columnGroupScale = scaleBand<string>({\n    domain: columnNames,\n    range: [0, xScale.bandwidth()],\n  });\n\n  const yScaleLog = scaleLog<number>({\n    range: [\n      innerHeight,\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.top,\n    ],\n    domain: [\n      1,\n      Math.max(\n        ...parsedData.map((d) =>\n          Math.max(...columnNames.map((key) => Number(d[key]))),\n        ),\n      ),\n    ],\n    base: 10,\n  });\n\n  const yScaleLine = scaleLinear<number>({\n    range: [\n      innerHeight,\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.top,\n    ],\n    domain: [\n      0,\n      Math.max(\n        ...parsedData.map((d) =>\n          Math.max(...columnNames.map((key) => Number(d[key]))),\n        ),\n      ),\n    ],\n  });\n\n  const color = scaleOrdinal<string, string>({\n    domain: columnNames,\n    range: columnas.map((col) => col.color),\n  });\n\n  // const hideLegendsColors = arrayOrArray(chart.dataSets.data).some((data) => {\n  //   return arrayOrArray(data.sets).some(\n  //     (set) => set.color !== undefined && set.color !== '',\n  //   );\n  // });\n\n  const isLogScale = false;\n\n  const yScale = useMemo(() => {\n    if (!isLogScale) {\n      return yScaleLine;\n    }\n    return yScaleLog;\n  }, [isLogScale, yScaleLine, yScaleLog]);\n\n  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);\n  useLayoutEffect(() => {\n    document\n      .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n      .forEach((current) => {\n        const box = current.getBoundingClientRect();\n        if (box.width > 125) {\n          // eslint-disable-next-line no-param-reassign\n          current.style.width = '125px';\n          // eslint-disable-next-line no-param-reassign\n          current.style.overflow = 'hidden';\n          // eslint-disable-next-line no-param-reassign\n          current.style.textOverflow = 'ellipsis';\n          // eslint-disable-next-line no-param-reassign\n          current.style.whiteSpace = 'nowrap';\n        }\n        // eslint-disable-next-line no-param-reassign\n        current.style.transformOrigin =\n          (current.getAttribute('x') as string) + 'px 14px';\n        // eslint-disable-next-line no-param-reassign\n        current.style.transform = `rotate(25deg)`;\n      });\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n\n  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {\n    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n    const dataColor =\n      data.color !== '' && data.color !== undefined\n        ? data.color\n        : arrayOrArray(\n              styles\n                ? styles.schema\n                : [\n                    '#7ad6f4',\n                    '#45bdee',\n                    '#28a7ea',\n                    '#006cbb',\n                    '#034698',\n                    '#032f64',\n                  ],\n            ).length > 0\n          ? getBarColor(\n              arrayOrArray(\n                styles\n                  ? styles.schema\n                  : [\n                      '#7ad6f4',\n                      '#45bdee',\n                      '#28a7ea',\n                      '#006cbb',\n                      '#034698',\n                      '#032f64',\n                    ],\n              ),\n              index,\n              isSingle,\n            )\n          : '';\n    const returnColumnsArray: TApiaChartColorDisposition[] = [];\n    arrayOrArray(data.sets).forEach((set) => {\n      if (set.color !== '' && set.color !== undefined) {\n        returnColumnsArray.push({ ...set, columnName: data.name });\n      } else {\n        returnColumnsArray.push({\n          ...set,\n          color: dataColor,\n          columnName: data.name,\n        });\n      }\n    });\n    return returnColumnsArray;\n  });\n\n  const colorReference: TChartReference = arrayOrArray(chart.dataSets.data).map(\n    (data, index) => {\n      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n      const dataColor =\n        data.color !== '' && data.color !== undefined\n          ? data.color\n          : arrayOrArray(\n                styles\n                  ? styles.schema\n                  : [\n                      '#7ad6f4',\n                      '#45bdee',\n                      '#28a7ea',\n                      '#006cbb',\n                      '#034698',\n                      '#032f64',\n                    ],\n              ).length > 0\n            ? getBarColor(\n                arrayOrArray(\n                  styles\n                    ? styles.schema\n                    : [\n                        '#7ad6f4',\n                        '#45bdee',\n                        '#28a7ea',\n                        '#006cbb',\n                        '#034698',\n                        '#032f64',\n                      ],\n                ),\n                index,\n                isSingle,\n              )\n            : '';\n      return {\n        color: dataColor,\n        title: data.name,\n      };\n    },\n  );\n  let numberReference: TChartReference = [];\n  if (colorReference.length === 1) {\n    numberReference = arrayOrArray(\n      arrayOrArray(chart.dataSets.data)[0].sets,\n    ).map((data, index) => {\n      return {\n        color: `${index + 1}`,\n        title: data.key,\n      };\n    });\n  }\n\n  arrayOrArray(chart.dataSets.data)\n    .map((data) => {\n      const returnArray: { color: string; title: string }[] = [];\n      arrayOrArray(data.sets).forEach((set) => {\n        if (set.color !== '' && set.color !== undefined) {\n          returnArray.push({\n            color: set.color,\n            title: data.name + ' - ' + set.key,\n          });\n        }\n      });\n      return returnArray;\n    })\n    .flat()\n    .forEach((addRef) => colorReference.push(addRef));\n\n  return (\n    <>\n      <Box\n        ref={boxRef}\n        id={id}\n        className={`${className ?? ''} ${chart.title} chartBox chartContainer`}\n        sx={{\n          overflow: 'hidden',\n        }}\n      >\n        <svg\n          ref={elementRef}\n          className={`_${chartId} chart__svg`}\n          height={chart.ratio.height}\n          width={chart.ratio.width}\n        >\n          {chart.showGrid && (\n            <Grid.Grid\n              xScale={xScale}\n              yScale={yScale}\n              left={0}\n              width={chart.ratio.width}\n              height={innerHeight}\n              numTicksRows={10}\n              numTicksColumns={10}\n              top={\n                (typeof effectiveMargin === 'number'\n                  ? effectiveMargin\n                  : effectiveMargin.top) - 20\n              }\n            />\n          )}\n          <Group\n            top={\n              (typeof effectiveMargin === 'number'\n                ? effectiveMargin\n                : effectiveMargin.top) - 20\n            }\n          >\n            <BarGroup\n              data={parsedData}\n              keys={columnNames}\n              height={innerHeight}\n              x0={getXValue}\n              x0Scale={xScale}\n              x1Scale={columnGroupScale}\n              yScale={yScale}\n              color={color}\n            >\n              {(barGroups) =>\n                barGroups.map((barGroup) => {\n                  return (\n                    <Group\n                      key={`bar-group-${barGroup.index}-${barGroup.x0}`}\n                      left={barGroup.x0}\n                    >\n                      {barGroup.bars.map((bar) => {\n                        const key = `${barGroup.index}-${bar.index}-${bar.key}`;\n\n                        return (\n                          <Bar\n                            isSingle={barGroup.bars.length === 1}\n                            key={key}\n                            bar={bar}\n                            barGroup={barGroup}\n                            chart={chart}\n                            parsedData={parsedData}\n                            setsWithColor={setsWithColor.flat()}\n                          />\n                        );\n                      })}\n                    </Group>\n                  );\n                })\n              }\n            </BarGroup>\n          </Group>\n          <AxisLeft\n            scale={yScale}\n            left={effectiveMargin.left}\n            label={\n              chart.chartType !== 'pie2D' && chart.showAxisYTitle\n                ? chart.axisYTitle\n                : ''\n            }\n            tickComponent={(props) => {\n              let value = Number(props.formattedValue?.replace(',', ''));\n              let counter = -1;\n              const units = ['k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y', 'R', 'Q'];\n              while (value >= 1000) {\n                value = value / 1000;\n                counter++;\n              }\n              let stringValue = `${value}`;\n              if (stringValue.length > 3) {\n                stringValue = stringValue.slice(0, 3);\n              }\n              if (stringValue.endsWith('.')) {\n                stringValue = stringValue.replace('.', '');\n              }\n              const newValue = `${stringValue}${\n                counter >= 0 ? units[counter] : ''\n              }`;\n\n              return (\n                <>\n                  {chart.showAxisYTitle && (\n                    <text\n                      dx={props.dx}\n                      dy={props.dy}\n                      fill={props.fill}\n                      fontSize={props.fontSize}\n                      textAnchor={props.textAnchor}\n                      x={props.x}\n                      y={props.y}\n                    >\n                      {newValue}\n                    </text>\n                  )}\n                </>\n              );\n            }}\n          />\n          <AxisBottom\n            top={innerHeight}\n            scale={\n              colorReference.length === 1 && numberReference.length > 0\n                ? numericXScale\n                : xScale\n            }\n            label={\n              chart.chartType !== 'pie2D' && chart.showAxisXTitle\n                ? chart.axisXTitle\n                : ''\n            }\n            tickLabelProps={{ display: 'none' }}\n            tickLineProps={{ display: 'none' }}\n            labelOffset={0}\n          />\n        </svg>\n      </Box>\n      <Box className=\"chartLegend__Wrapper\">\n        {chart.showLegend && colorReference.length !== 0 && (\n          <Box className=\"chart__legend__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n            <LegendContainer\n              id={chartId}\n              references={\n                colorReference.length === 1 && numberReference.length > 0\n                  ? numberReference\n                  : colorReference\n              }\n              useNumbered={colorReference.length === 1}\n            />\n          </Box>\n        )}\n      </Box>\n    </>\n  );\n};\n\nexport { VerticalBars };\n"],"names":[],"mappings":"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"}

package/dist/charts/waterfallBars/WaterfallBar.js

@@ -0,0 +1,84 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { Line } from '@visx/shape';
+import { useMemo } from 'react';
+import tinycolor from 'tinycolor2';
+import { Box } from '@apia/theme';
+import { ApiaUtil } from '@apia/components';
+
+const WaterfallBar = ({
+  width,
+  height,
+  x,
+  y,
+  fill,
+  x1,
+  lineY,
+  x2,
+  stroke,
+  strokeDashArray,
+  textX,
+  textY,
+  textContent,
+  isLast,
+  step,
+  columnName,
+  chart
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "rect",
+        sx: useMemo(() => {
+          return {
+            width: `${width}px`,
+            height: `${height}px`,
+            x: `${x}px`,
+            y: `${y}px`,
+            fill: `${fill}`,
+            "&:hover": {
+              fill: `#${tinycolor(fill).saturate(25).toHex()}`
+            },
+            transition: "fill 500ms"
+          };
+        }, [fill, height, width, x, y]),
+        onMouseEnter: (ev) => {
+          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
+            ApiaUtil.instance.tooltips.open({
+              children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: step.color
+                    },
+                    children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? columnName : chart.showLegend ? step.x : "" })
+                  }
+                ),
+                chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
+                /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? step.x : "" })
+              ] }),
+              attachToElement: () => ev.target,
+              attachToElementAnchorPoint: "center"
+            });
+          }
+        }
+      }
+    ),
+    !isLast && /* @__PURE__ */ jsx(
+      Line,
+      {
+        x1,
+        x2,
+        y1: lineY,
+        y2: lineY,
+        stroke,
+        strokeDasharray: strokeDashArray
+      }
+    ),
+    chart.showValues && /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
+  ] });
+};
+
+export { WaterfallBar };
+//# sourceMappingURL=WaterfallBar.js.map

package/dist/charts/waterfallBars/WaterfallBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallBar.js","sources":["../../../src/charts/waterfallBars/WaterfallBar.tsx"],"sourcesContent":["import { Line } from '@visx/shape';\nimport { useMemo } from 'react';\nimport { TApiaChartDefinition } from '../types';\nimport tinycolor from 'tinycolor2';\nimport { Box } from '@apia/theme';\nimport { ApiaUtil } from '@apia/components';\n\nconst WaterfallBar = ({\n  width,\n  height,\n  x,\n  y,\n  fill,\n  x1,\n  lineY,\n  x2,\n  stroke,\n  strokeDashArray,\n  textX,\n  textY,\n  textContent,\n  isLast,\n  step,\n  columnName,\n  chart,\n}: {\n  width: number;\n  height: number;\n  x: string | number;\n  y: string | number;\n  fill: string;\n  x1: string | number;\n  x2: string | number;\n  lineY: string | number;\n  stroke: string;\n  strokeDashArray: string | number;\n  textX: string | number;\n  textY: string | number;\n  textContent: string;\n  isLast: boolean;\n  step: {\n    x: string;\n    y: string;\n    start: number;\n    end: number;\n    color: string;\n  };\n  columnName: string;\n  chart: TApiaChartDefinition;\n}) => {\n  return (\n    <>\n      <Box\n        as={'rect'}\n        sx={useMemo(() => {\n          return {\n            width: `${width}px`,\n            height: `${height}px`,\n            x: `${x}px`,\n            y: `${y}px`,\n            fill: `${fill}`,\n            '&:hover': {\n              fill: `#${tinycolor(fill).saturate(25).toHex()}`,\n            },\n            transition: 'fill 500ms',\n          };\n        }, [fill, height, width, x, y])}\n        onMouseEnter={(ev) => {\n          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n            ApiaUtil.instance.tooltips.open({\n              children: (\n                <>\n                  <div\n                    style={{\n                      color: step.color,\n                    }}\n                  >\n                    <strong>\n                      {chart.showAxisXTitle\n                        ? columnName\n                        : chart.showLegend\n                          ? step.x\n                          : ''}\n                    </strong>\n                  </div>\n                  {chart.showValues && <div>{step.y}</div>}\n                  <div>\n                    {chart.showAxisXTitle && chart.showLegend ? step.x : ''}\n                  </div>\n                </>\n              ),\n              attachToElement: () => ev.target as HTMLElement,\n              attachToElementAnchorPoint: 'center',\n            });\n          }\n        }}\n      />\n\n      {!isLast && (\n        <Line\n          x1={x1}\n          x2={x2}\n          y1={lineY}\n          y2={lineY}\n          stroke={stroke}\n          strokeDasharray={strokeDashArray}\n        />\n      )}\n      {chart.showValues && (\n        <text textAnchor=\"middle\" x={textX} y={textY}>\n          {textContent}\n        </text>\n      )}\n    </>\n  );\n};\n\nexport { WaterfallBar };\n"],"names":[],"mappings":"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"}

package/dist/charts/waterfallBars/WaterfallBars.js

@@ -0,0 +1,289 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { Box, Heading } from '@apia/theme';
+import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
+import { useState, useMemo, useLayoutEffect } from 'react';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { extent } from 'd3-array';
+import { parseMargin } from '../util/parseMargin.js';
+import { Group } from '@visx/group';
+import { GridRows } from '@visx/grid';
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import uniqueId from 'lodash-es/uniqueId';
+import ChartSelector from '../util/ChartSelector.js';
+import { WaterfallBar } from './WaterfallBar.js';
+
+const calculateWaterfallSteps = ({
+  data,
+  xAccessor,
+  yAccessor,
+  showFinal,
+  colors
+}) => {
+  let cumulativeTotal = 0;
+  const steps = data.map((datum) => {
+    const xValue = xAccessor(datum);
+    const yValue = yAccessor(datum);
+    const prevTotal = cumulativeTotal;
+    cumulativeTotal += Number(yValue);
+    return {
+      x: xValue,
+      y: yValue,
+      start: prevTotal,
+      end: cumulativeTotal,
+      color: Number(yValue) > 0 ? colors.positive : colors.negative
+    };
+  });
+  if (showFinal) {
+    steps.push({
+      x: "Total",
+      y: cumulativeTotal,
+      start: 0,
+      end: cumulativeTotal,
+      color: colors.total
+    });
+  }
+  return steps;
+};
+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 WaterfallBars = ({
+  margin = { top: 20, left: 100, bottom: 150, right: 70 },
+  chart: {
+    waterfallColors = {
+      positive: "#49b86f",
+      negative: "#c92e5b",
+      total: "#434857",
+      stepConnector: "#888d94"
+    },
+    ...chart
+  },
+  className,
+  chartId,
+  allowZoom
+}) => {
+  console.log({ margin });
+  const effectiveMargin = parseMargin(margin);
+  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
+    effectiveMargin.left = 50;
+  }
+  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
+  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const getXValue = (d) => d.key;
+  const getYValue = (d) => d.value;
+  const charts = arrayOrArray(chart.dataSets?.data).filter((piece) => !!piece.sets).map((piece) => {
+    return {
+      ...piece,
+      coordinate: piece.sets
+    };
+  });
+  const [currentPie, setCurrentPie] = useState("0");
+  const chartNames = charts.map((piece) => {
+    return piece.name;
+  });
+  const steps = useMemo(
+    () => calculateWaterfallSteps({
+      data: arrayOrArray(chart.dataSets.data)[currentPie].sets,
+      xAccessor: getXValue,
+      yAccessor: getYValue,
+      showFinal: chart.showTotal ?? true,
+      colors: waterfallColors
+    }),
+    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors]
+  );
+  const padding = 0.2;
+  const xScale = scaleBand({
+    domain: steps.map((step) => step.x),
+    padding,
+    range: [0, innerWidth]
+  });
+  const yDomain = useMemo(() => {
+    const values = steps.flatMap((step) => [step.start, step.end]);
+    const [min, max] = extent(values);
+    return min != null && max != null ? [min, max + 3] : void 0;
+  }, [steps]);
+  const yScale = scaleLinear({
+    domain: yDomain,
+    nice: true,
+    range: [innerHeight, 0]
+  });
+  const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
+      const width = current.getBoundingClientRect().width;
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
+    });
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        id,
+        className: `${className ? className : ""} chartBox chartContainer`,
+        ref: boxRef,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            height: chart.ratio.height,
+            width: chart.ratio.width,
+            ref: elementRef,
+            children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
+              chart.showGrid && /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
+              steps.map((step, index) => {
+                const x = xScale(step.x);
+                const y = yScale(Math.max(step.start, step.end));
+                if (x == null || y == null) {
+                  return null;
+                }
+                const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
+                const isLast = index === steps.length - 1;
+                const linePadding = 2;
+                const x1 = x + xScale.bandwidth() + linePadding;
+                const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
+                const lineY = step.end < step.start ? y + barHeight : y;
+                const labelOffset = 10;
+                const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
+                let currentYValue = 0;
+                steps.filter((_, i) => {
+                  if ((chart.showTotal ?? true) && !steps[i + 1]) {
+                    return false;
+                  }
+                  return i <= index;
+                }).forEach((step2) => {
+                  currentYValue += Number(step2.y);
+                });
+                return /* @__PURE__ */ jsx(
+                  WaterfallBar,
+                  {
+                    chart,
+                    columnName: chartNames[currentPie],
+                    fill: step.color,
+                    height: barHeight,
+                    isLast,
+                    lineY,
+                    step,
+                    stroke: waterfallColors.stepConnector,
+                    strokeDashArray: 2,
+                    textContent: chart.showTotal ?? true ? step.y : currentYValue,
+                    textX: x + xScale.bandwidth() / 2,
+                    textY: labelY + 5,
+                    width: xScale.bandwidth(),
+                    x,
+                    y,
+                    x1,
+                    x2
+                  },
+                  index
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                AxisLeft,
+                {
+                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  scale: yScale,
+                  hideTicks: true,
+                  tickLabelProps: () => ({
+                    textAnchor: "end",
+                    verticalAnchor: "middle",
+                    display: chart.showAxisYTitle ? "auto" : "none"
+                  }),
+                  tickComponent: (props) => {
+                    let value = Number(props.formattedValue?.replace(",", ""));
+                    let counter = -1;
+                    const units = [
+                      "k",
+                      "M",
+                      "G",
+                      "T",
+                      "P",
+                      "E",
+                      "Z",
+                      "Y",
+                      "R",
+                      "Q"
+                    ];
+                    while (value >= 1e3) {
+                      value = value / 1e3;
+                      counter++;
+                    }
+                    let stringValue = `${value}`;
+                    if (stringValue.length > 3) {
+                      stringValue = stringValue.slice(0, 3);
+                    }
+                    if (stringValue.endsWith(".")) {
+                      stringValue = stringValue.replace(".", "");
+                    }
+                    const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
+                    return /* @__PURE__ */ jsx(Fragment, { children: chart.showAxisYTitle && /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        dx: props.dx,
+                        dy: props.dy,
+                        fill: props.fill,
+                        fontSize: props.fontSize,
+                        textAnchor: props.textAnchor,
+                        x: props.x,
+                        y: props.y,
+                        children: newValue
+                      }
+                    ) });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisBottom,
+                {
+                  scale: xScale,
+                  top: innerHeight,
+                  tickLabelProps: { display: "none" },
+                  tickLineProps: { display: "none" },
+                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : ""
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(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
+        }
+      )
+    ] }) })
+  ] });
+};
+
+export { WaterfallBars };
+//# sourceMappingURL=WaterfallBars.js.map

package/dist/charts/waterfallBars/WaterfallBars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallBars.js","sources":["../../../src/charts/waterfallBars/WaterfallBars.tsx"],"sourcesContent":["import { Box, Heading } from '@apia/theme';\nimport { TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport React, { useMemo, useLayoutEffect, useState } from 'react';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { extent } from 'd3-array';\nimport { parseMargin } from '../util/parseMargin';\nimport { Group } from '@visx/group';\nimport { GridRows } from '@visx/grid';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\nimport { WaterfallBar } from './WaterfallBar';\n// import { LegendContainer } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n  columnName: string;\n  [key: string]: string;\n}\n\ntype TDatum = { key: string; value: string };\n\nconst calculateWaterfallSteps = ({\n  data,\n  xAccessor,\n  yAccessor,\n  showFinal,\n  colors,\n}: {\n  data: TDatum[];\n  xAccessor: (d: TDatum) => string;\n  yAccessor: (d: TDatum) => string;\n  showFinal: boolean;\n  colors: {\n    positive: string;\n    negative: string;\n    total: string;\n    stepConnector: string;\n  };\n}) => {\n  // Holds cumulative value\n  let cumulativeTotal = 0;\n\n  // Calculate bars for each data point\n  const steps = data.map((datum) => {\n    const xValue = xAccessor(datum);\n    const yValue = yAccessor(datum);\n\n    const prevTotal = cumulativeTotal;\n    cumulativeTotal += Number(yValue);\n\n    return {\n      x: xValue,\n      y: yValue,\n      start: prevTotal,\n      end: cumulativeTotal,\n      color: Number(yValue) > 0 ? colors.positive : colors.negative,\n    };\n  });\n\n  // Add final Total bar\n  if (showFinal) {\n    steps.push({\n      x: 'Total',\n      y: cumulativeTotal as unknown as string,\n      start: 0,\n      end: cumulativeTotal,\n      color: colors.total,\n    });\n  }\n\n  return steps;\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}\nexport const WaterfallBars = ({\n  margin = { top: 20, left: 100, bottom: 150, right: 70 },\n  chart: {\n    waterfallColors = {\n      positive: '#49b86f',\n      negative: '#c92e5b',\n      total: '#434857',\n      stepConnector: '#888d94',\n    },\n    ...chart\n  },\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  console.log({ margin });\n\n  const effectiveMargin = parseMargin(margin);\n\n  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n    effectiveMargin.left = 50;\n  }\n  let innerWidth =\n    chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n  let innerHeight =\n    chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;\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 getXValue = (d: TDatum) => d.key;\n  const getYValue = (d: TDatum) => d.value;\n\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 [currentPie, setCurrentPie] = useState('0');\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  const steps = useMemo(\n    () =>\n      calculateWaterfallSteps({\n        data: arrayOrArray(chart.dataSets.data)[currentPie as unknown as number]\n          .sets as TDatum[],\n        xAccessor: getXValue,\n        yAccessor: getYValue,\n        showFinal: chart.showTotal ?? true,\n        colors: waterfallColors,\n      }),\n    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors],\n  );\n\n  // Build scales\n  const padding = 0.2;\n\n  const xScale = scaleBand({\n    domain: steps.map((step) => step.x),\n    padding,\n    range: [0, innerWidth],\n  });\n\n  const yDomain = useMemo(() => {\n    const values = steps.flatMap((step) => [step.start, step.end]);\n    const [min, max] = extent<number>(values);\n    return min != null && max != null ? [min, max + 3] : undefined;\n  }, [steps]);\n\n  const yScale = scaleLinear({\n    domain: yDomain,\n    nice: true,\n    range: [innerHeight, 0],\n  });\n\n  const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);\n  useLayoutEffect(() => {\n    document\n      .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n      .forEach((current) => {\n        const width = current.getBoundingClientRect().width;\n        // eslint-disable-next-line no-param-reassign\n        current.style.transformOrigin =\n          (current.getAttribute('x') as string) + 'px 14px';\n        // eslint-disable-next-line no-param-reassign\n        current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;\n      });\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  return (\n    <>\n      <Box\n        id={id}\n        className={`${className ? className : ''} chartBox chartContainer`}\n        ref={boxRef}\n      >\n        <svg\n          height={chart.ratio.height}\n          width={chart.ratio.width}\n          ref={elementRef}\n        >\n          <Group left={effectiveMargin.left} top={effectiveMargin.top}>\n            {chart.showGrid && (\n              <GridRows scale={yScale} width={innerWidth} strokeDasharray=\"5\" />\n            )}\n            {steps.map((step, index) => {\n              const x = xScale(step.x);\n              const y = yScale(Math.max(step.start, step.end));\n\n              if (x == null || y == null) {\n                return null;\n              }\n\n              const barHeight = Math.abs(yScale(step.start) - yScale(step.end));\n\n              const isLast = index === steps.length - 1;\n              const linePadding = 2;\n              const x1 = x + xScale.bandwidth() + linePadding;\n              const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;\n              const lineY = step.end < step.start ? y + barHeight : y;\n\n              const labelOffset = 10;\n              const labelY =\n                yScale(step.end) +\n                ((step.y as unknown as number) < 0\n                  ? labelOffset\n                  : -labelOffset);\n\n              let currentYValue = 0;\n              steps\n                .filter((_, i) => {\n                  if ((chart.showTotal ?? true) && !steps[i + 1]) {\n                    return false;\n                  }\n                  return i <= index;\n                })\n                .forEach((step) => {\n                  currentYValue += Number(step.y);\n                });\n\n              return (\n                <WaterfallBar\n                  chart={chart}\n                  columnName={chartNames[currentPie as unknown as number]}\n                  fill={step.color}\n                  height={barHeight}\n                  isLast={isLast}\n                  key={index}\n                  lineY={lineY}\n                  step={step}\n                  stroke={waterfallColors.stepConnector}\n                  strokeDashArray={2}\n                  textContent={\n                    chart.showTotal ?? true\n                      ? step.y\n                      : (currentYValue as unknown as string)\n                  }\n                  textX={x + xScale.bandwidth() / 2}\n                  textY={labelY + 5}\n                  width={xScale.bandwidth()}\n                  x={x}\n                  y={y}\n                  x1={x1}\n                  x2={x2}\n                />\n              );\n            })}\n            <AxisLeft\n              label={\n                chart.chartType !== 'pie2D' && chart.showAxisYTitle\n                  ? chart.axisYTitle\n                  : ''\n              }\n              scale={yScale}\n              hideTicks\n              tickLabelProps={() => ({\n                textAnchor: 'end',\n                verticalAnchor: 'middle',\n                display: chart.showAxisYTitle ? 'auto' : 'none',\n              })}\n              tickComponent={(props) => {\n                let value = Number(props.formattedValue?.replace(',', ''));\n                let counter = -1;\n                const units = [\n                  'k',\n                  'M',\n                  'G',\n                  'T',\n                  'P',\n                  'E',\n                  'Z',\n                  'Y',\n                  'R',\n                  'Q',\n                ];\n                while (value >= 1000) {\n                  value = value / 1000;\n                  counter++;\n                }\n                let stringValue = `${value}`;\n                if (stringValue.length > 3) {\n                  stringValue = stringValue.slice(0, 3);\n                }\n                if (stringValue.endsWith('.')) {\n                  stringValue = stringValue.replace('.', '');\n                }\n                const newValue = `${stringValue}${\n                  counter >= 0 ? units[counter] : ''\n                }`;\n\n                return (\n                  <>\n                    {chart.showAxisYTitle && (\n                      <text\n                        dx={props.dx}\n                        dy={props.dy}\n                        fill={props.fill}\n                        fontSize={props.fontSize}\n                        textAnchor={props.textAnchor}\n                        x={props.x}\n                        y={props.y}\n                      >\n                        {newValue}\n                      </text>\n                    )}\n                  </>\n                );\n              }}\n            />\n            <AxisBottom\n              scale={xScale}\n              top={innerHeight}\n              tickLabelProps={{ display: 'none' }}\n              tickLineProps={{ display: 'none' }}\n              label={\n                chart.chartType !== 'pie2D' && chart.showAxisXTitle\n                  ? chart.axisXTitle\n                  : ''\n              }\n            />\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        {/* {chart.showLegend && (\n          <Box className=\"chart__legend__wrapper\"> */}\n        {/* TODO LABEL */}\n        {/* <Heading as={'h6'}>Legend</Heading>\n            <LegendContainer\n              id={chartId}\n              avoidEvent\n              references={[\n                {\n                  title: arrayOrArray(chart.dataSets.data)[\n                    currentPie as unknown as number\n                  ].name,\n                  color: 'transparent',\n                },\n              ]}\n            />\n          </Box>\n        )} */}\n      </Box>\n    </>\n  );\n};\n"],"names":["step"],"mappings":"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"}