@elliemae/ds-dataviz-pie 3.6.0-next.3

package/dist/cjs/Pie.js

@@ -0,0 +1,49 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pie_exports = {};
+__export(Pie_exports, {
+  PieChart: () => PieChart
+});
+module.exports = __toCommonJS(Pie_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ChartContainer = require("./parts/ChartContainer");
+var import_Pie = require("./parts/Pie");
+var import_PieContext = require("./PieContext");
+var import_usePie = require("./config/usePie");
+var import_ColorLegend = require("./parts/ColorLegend");
+const PieChart = (props) => {
+  const ctx = (0, import_usePie.usePie)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieContext.PieContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartContainer.ChartContainer, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorLegend.ColorLegend, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pie.Pie, {})
+      ]
+    })
+  });
+};
+//# sourceMappingURL=Pie.js.map

package/dist/cjs/Pie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Pie.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './parts/Pie';\nimport { PieContext } from './PieContext';\nimport { usePie } from './config/usePie';\nimport type { DSPieT } from './react-desc-prop-types';\nimport { ColorLegend } from './parts/ColorLegend';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,4BAA+B;AAC/B,iBAAoB;AACpB,wBAA2B;AAC3B,oBAAuB;AAEvB,yBAA4B;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,UAAM,sBAAO,KAAK;AACxB,SACE,4CAAC,6BAAW,UAAX;AAAA,IAAoB,OAAO;AAAA,IAC1B,uDAAC;AAAA,MACC;AAAA,oDAAC,kCAAY;AAAA,QACb,4CAAC,kBAAI;AAAA;AAAA,KACP;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/PieContext.js

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PieContext_exports = {};
+__export(PieContext_exports, {
+  PieContext: () => PieContext
+});
+module.exports = __toCommonJS(PieContext_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_d3 = require("d3");
+const pieChartdefaultContext = {
+  innerHeight: 0,
+  innerWidth: 0,
+  activeSerie: "",
+  setActiveSerie: () => {
+  },
+  containerRef: (0, import_react.createRef)(),
+  groups: [],
+  colorScale: (0, import_d3.scaleOrdinal)()
+};
+const PieContext = (0, import_react.createContext)(pieChartdefaultContext);
+//# sourceMappingURL=PieContext.js.map

package/dist/cjs/PieContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/PieContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { DSPieT } from './react-desc-prop-types';\n\ninterface PieChartContextT {\n  props: Partial<DSPieT.Props>;\n  innerHeight: number;\n  innerWidth: number;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst pieChartdefaultContext: PieChartContextT = {\n  // props: defaultProps,\n  innerHeight: 0,\n  innerWidth: 0,\n  activeSerie: '',\n  setActiveSerie: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n};\n\nexport const PieContext = createContext(pieChartdefaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,gBAA2C;AAc3C,MAAM,yBAA2C;AAAA,EAE/C,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAC3B;AAEO,MAAM,iBAAa,4BAAc,sBAAsB;",
+  "names": []
+}

package/dist/cjs/config/useKeyboardNavigation.js

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useKeyboardNavigation_exports = {};
+__export(useKeyboardNavigation_exports, {
+  findInCircularList: () => findInCircularList,
+  useKeyboardNavigation: () => useKeyboardNavigation
+});
+module.exports = __toCommonJS(useKeyboardNavigation_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_PieContext = require("../PieContext");
+const findInCircularList = (list, from, step = 1) => {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
+    if (list[i])
+      return i;
+  }
+  return from;
+};
+const useKeyboardNavigation = () => {
+  const {
+    activePoint,
+    setActivePoint,
+    containerRef,
+    groups,
+    yScale,
+    props: { data }
+  } = (0, import_react.useContext)(import_PieContext.PieContext);
+  const [currentFocusedDataset, setCurrentFocusedDataset] = (0, import_react.useState)(groups[0]);
+  const currentGroup = (0, import_react.useMemo)(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
+  const currentItemIndex = (0, import_react.useMemo)(
+    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
+    [activePoint, currentGroup]
+  );
+  const handleOnFocus = (0, import_react.useCallback)(
+    (e) => {
+      console.log("focus");
+      if (containerRef?.current === e.target) {
+        setActivePoint(currentGroup.data[0].key);
+      }
+    },
+    [containerRef, currentGroup, setActivePoint]
+  );
+  const handleOnBlur = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
+        console.log("blur");
+        setActivePoint("");
+      }
+    });
+  }, [containerRef, setActivePoint]);
+  const navigateSerie = (0, import_react.useCallback)(
+    (step) => {
+      const newValue = findInCircularList(
+        currentGroup.data.map((d) => d.value),
+        currentItemIndex,
+        step
+      );
+      setActivePoint(currentGroup.data[newValue].key);
+    },
+    [currentGroup.data, currentItemIndex, setActivePoint]
+  );
+  const changeSerie = (0, import_react.useCallback)(
+    (step) => {
+      setCurrentFocusedDataset((prev) => {
+        const nextGroup = findInCircularList(
+          groups,
+          groups.findIndex((item) => item === prev),
+          step
+        );
+        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);
+        setActivePoint(nextGroupData.data[currentItemIndex].key);
+        return groups[nextGroup];
+      });
+    },
+    [currentItemIndex, data, setActivePoint, groups]
+  );
+  const onInputKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.code !== "Tab") {
+        e.preventDefault();
+      }
+      if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
+        if (yScale.bandwidth)
+          changeSerie(e.code === "ArrowLeft" ? -1 : 1);
+        else
+          navigateSerie(e.code === "ArrowLeft" ? -1 : 1);
+      }
+      if (["ArrowDown", "ArrowUp"].includes(e.code)) {
+        if (yScale.bandwidth)
+          navigateSerie(e.code === "ArrowDown" ? -1 : 1);
+        else
+          changeSerie(e.code === "ArrowDown" ? -1 : 1);
+      }
+    },
+    [changeSerie, navigateSerie, yScale.bandwidth]
+  );
+  return { onInputKeyDown, handleOnBlur, handleOnFocus };
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/cjs/config/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/useKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const findInCircularList = (\n  list,\n  from: number,\n  //criteria: (item) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    groups,\n    yScale,\n    props: { data },\n  } = useContext(PieContext);\n\n  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);\n\n  const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n  const currentItemIndex = useMemo(\n    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),\n    [activePoint, currentGroup],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      console.log('focus');\n\n      if (containerRef?.current === e.target) {\n        setActivePoint(currentGroup.data[0].key);\n      }\n    },\n    [containerRef, currentGroup, setActivePoint],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (\n        !containerRef?.current?.contains(document.activeElement) ||\n        containerRef?.current === document.activeElement\n      ) {\n        console.log('blur');\n        setActivePoint('');\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentGroup.data.map((d) => d.value),\n        currentItemIndex,\n        step,\n      );\n      setActivePoint(currentGroup.data[newValue].key);\n    },\n    [currentGroup.data, currentItemIndex, setActivePoint],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      setCurrentFocusedDataset((prev) => {\n        const nextGroup = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === prev),\n          step,\n        );\n        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);\n        setActivePoint(nextGroupData.data[currentItemIndex].key);\n        return groups[nextGroup];\n      });\n    },\n    [currentItemIndex, data, setActivePoint, groups],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        if (yScale.bandwidth) changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n        else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n\n      if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n        if (yScale.bandwidth) navigateSerie(e.code === 'ArrowDown' ? -1 : 1);\n        else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n      }\n    },\n    [changeSerie, navigateSerie, yScale.bandwidth],\n  );\n\n  return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/config/usePie.js

@@ -0,0 +1,61 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePie_exports = {};
+__export(usePie_exports, {
+  usePie: () => usePie
+});
+module.exports = __toCommonJS(usePie_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_d3 = require("d3");
+const usePie = (props) => {
+  const { series, width, height, margin } = props;
+  const containerRef = (0, import_react.useRef)(null);
+  const svgRef = (0, import_react.useRef)(null);
+  const [activeSerie, setActiveSerie] = (0, import_react.useState)("");
+  const innerHeight = height - margin.top - margin.bottom;
+  const innerWidth = width - margin.left - margin.right;
+  const groups = series.map((serie) => serie.name);
+  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
+  const pieGenerator = (0, import_d3.pie)().value(function(d) {
+    return d[1];
+  }).sort(null).padAngle(0.02);
+  const pieData = pieGenerator(Object.entries(data));
+  return (0, import_react.useMemo)(
+    () => ({
+      props,
+      innerHeight,
+      innerWidth,
+      groups,
+      svgRef,
+      containerRef,
+      activeSerie,
+      pieData,
+      setActiveSerie
+    }),
+    [props, pieData, innerHeight, innerWidth, groups, activeSerie]
+  );
+};
+//# sourceMappingURL=usePie.js.map

package/dist/cjs/config/usePie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/usePie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, width, height, margin } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [activeSerie, setActiveSerie] = useState('');\n\n  const innerHeight = height - margin.top - margin.bottom;\n  const innerWidth = width - margin.left - margin.right;\n\n  const groups = series.map((serie) => serie.name);\n\n  const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n  const pieGenerator = pie()\n    .value(function (d) {\n      return d[1];\n    })\n    .sort(null)\n    .padAngle(0.02);\n  const pieData = pieGenerator(Object.entries(data));\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      svgRef,\n      containerRef,\n      activeSerie,\n      pieData,\n      setActiveSerie,\n    }),\n    [props, pieData, innerHeight, innerWidth, groups, activeSerie],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,mBAAe,eAAI,EACtB,MAAM,SAAU,GAAG;AAClB,WAAO,EAAE;AAAA,EACX,CAAC,EACA,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,SAAS,aAAa,YAAY,QAAQ,WAAW;AAAA,EAC/D;AACF;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  PieChart: () => import_Pie.PieChart
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_Pie = require("./Pie");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { PieChart } from './Pie';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iBAAyB;",
+  "names": []
+}

package/dist/cjs/parts/ChartContainer.js

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ChartContainer_exports = {};
+__export(ChartContainer_exports, {
+  ChartContainer: () => ChartContainer
+});
+module.exports = __toCommonJS(ChartContainer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_styles = require("../styles");
+var import_PieContext = require("../PieContext");
+const ChartContainer = ({ children }) => {
+  const {
+    props: { width, height, margin, responsive },
+    containerRef,
+    activeSerie,
+    svgRef
+  } = (0, import_react.useContext)(import_PieContext.PieContext);
+  const dimensions = (0, import_react.useMemo)(
+    () => responsive ? {
+      viewBox: `0 0 ${width} ${height}`
+    } : {
+      width,
+      height
+    },
+    [height, responsive, width]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
+    ref: containerRef,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+      ref: svgRef,
+      ...dimensions,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        className: "container",
+        transform: `translate(${margin.left},${margin.top})`,
+        children
+      })
+    })
+  });
+};
+//# sourceMappingURL=ChartContainer.js.map

package/dist/cjs/parts/ChartContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/ChartContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive },\n    containerRef,\n    activeSerie,\n    svgRef,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n  //  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      // onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      // tabIndex={activeSerie ? -1 : 0}\n      // onBlur={handleOnBlur}\n      // onFocus={handleOnFocus}\n      // onMouseDown={(e) => e.preventDefault()}\n    >\n      <svg ref={svgRef} {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAAiC;AAEjC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,4BAAU;AAEzB,QAAM,iBAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IAQL,sDAAC;AAAA,MAAI,KAAK;AAAA,MAAS,GAAG;AAAA,MACpB,sDAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/ColorLegend.js

@@ -0,0 +1,70 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ColorLegend_exports = {};
+__export(ColorLegend_exports, {
+  ColorLegend: () => ColorLegend
+});
+module.exports = __toCommonJS(ColorLegend_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_PieContext = require("../PieContext");
+const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {
+  const {
+    colorScale,
+    innerWidth,
+    props: { colorLegend, circleRadius }
+  } = (0, import_react.useContext)(import_PieContext.PieContext);
+  if (!colorLegend)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    transform: `translate(${innerWidth + 30},30)`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+        x: 35,
+        y: -25,
+        className: "axis-label",
+        textAnchor: "middle",
+        children: colorLegend.label
+      }),
+      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        className: "tick",
+        transform: `translate(0,${i * tickSpacing})`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+            fill: colorScale(domainValue),
+            r: circleRadius ?? tickSize
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+            x: tickTextOffset,
+            dy: ".32em",
+            children: domainValue
+          })
+        ]
+      }))
+    ]
+  });
+};
+//# sourceMappingURL=ColorLegend.js.map

package/dist/cjs/parts/ColorLegend.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/ColorLegend.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,wBAA2B;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,QAAI,yBAAW,4BAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa;AAAA,IACtC;AAAA,kDAAC;AAAA,QAAK,GAAG;AAAA,QAAI,GAAG;AAAA,QAAK,WAAU;AAAA,QAAa,YAAW;AAAA,QACpD,sBAAY;AAAA,OACf;AAAA,MACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC;AAAA,QAAE,WAAU;AAAA,QAAO,WAAW,eAAe,IAAI;AAAA,QAChD;AAAA,sDAAC;AAAA,YAAO,MAAM,WAAW,WAAW;AAAA,YAAG,GAAG,gBAAgB;AAAA,WAAU;AAAA,UACpE,4CAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/Pie.js

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pie_exports = {};
+__export(Pie_exports, {
+  Pie: () => Pie
+});
+module.exports = __toCommonJS(Pie_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Slice = require("./Slice");
+var import_PieContext = require("../PieContext");
+const Pie = () => {
+  const {
+    innerHeight,
+    innerWidth,
+    pieData,
+    props: { isHalfPie, label, innerRadius }
+  } = (0, import_react.useContext)(import_PieContext.PieContext);
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    transform: `translate(${innerWidth / 2},${currentInnerHeight})`,
+    children: [
+      pieData.map((slice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Slice.Slice, {
+        data: slice
+      }, slice.index)),
+      !isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+        x: 0,
+        y: 0,
+        textAnchor: "middle",
+        alignmentBaseline: "middle",
+        children: label
+      }) : null,
+      isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+        x: 0,
+        y: -innerRadius / 4,
+        textAnchor: "middle",
+        alignmentBaseline: "middle",
+        children: label
+      }) : null
+    ]
+  });
+};
+//# sourceMappingURL=Pie.js.map

package/dist/cjs/parts/Pie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/Pie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\n\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <text x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n      {isHalfPie && label ? (\n        <text x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </text>\n      ) : null}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,mBAAsB;AACtB,wBAA2B;AAEpB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,QAAI,yBAAW,4BAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,4CAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,4CAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACrD;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,4CAAC;AAAA,QAAK,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QACpE;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "names": []
+}