@redsift/charts 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/ScatterPlot/styles.js

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { ChartContainer } from '../ChartContainer/ChartContainer.js';
+
+/**
+ * Component style.
+ */
+const StyledScatterPlot = styled(ChartContainer)``;
+const StyledScatterPlotEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref => {
+  let {
+    $maxWidth
+  } = _ref;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-size: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+    line-height: ${_ref4 => {
+  let {
+    $textSize
+  } = _ref4;
+  return $textSize;
+}}px;
+  }
+`;
+
+export { StyledScatterPlot, StyledScatterPlotEmptyText };
+//# sourceMappingURL=styles.js.map

package/components/ScatterPlot/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/ScatterPlot/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledScatterPlotProps } from './types';\nimport { ChartContainer } from '../ChartContainer';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledScatterPlot = styled(ChartContainer)<StyledScatterPlotProps>``;\n\nexport const StyledScatterPlotEmptyText = styled.div<{\n  $maxWidth: number;\n  $textSize: number;\n  $theme: Theme;\n}>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n\n  > * {\n    max-width: ${({ $maxWidth }) => $maxWidth}px;\n  }\n\n  > span {\n    font-family: var(--redsift-typography-font-family-poppins);\n    color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-text-primary)`};\n    font-size: ${({ $textSize }) => $textSize}px;\n    line-height: ${({ $textSize }) => $textSize}px;\n  }\n`;\n"],"names":["StyledScatterPlot","styled","ChartContainer","StyledScatterPlotEmptyText","div","_ref","$maxWidth","_ref2","$theme","_ref3","$textSize","_ref4"],"mappings":";;;AAKA;AACA;AACA;MACaA,iBAAiB,GAAGC,MAAM,CAACC,cAAc,CAA0B,CAAC,EAAA;AAEpEC,MAAAA,0BAA0B,GAAGF,MAAM,CAACG,GAI9C,CAAA;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAA,EAAiBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,SAAS,CAAA;AAAA,CAAC,CAAA;AAC9C;AACA;AACA;AACA;AACA,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBC,MAAO,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACtF,eAAA,EAAiBC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,SAAS,CAAA;AAAA,CAAC,CAAA;AAC9C,iBAAA,EAAmBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,SAAAA;AAAU,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAKD,SAAS,CAAA;AAAA,CAAC,CAAA;AAChD;AACA;;;;"}

package/components/ScatterPlot/types.d.ts

@@ -0,0 +1,109 @@
+import { ValueOf, Theme } from '@redsift/design-system';
+import { ReactNode, ReactElement, MutableRefObject } from 'react';
+import { ScaleLinear } from 'd3';
+import { SortingMethod } from '../../utils/index.js';
+import { CoordinatesCategoryData, DotDatum, Statistics } from '../../types/data.js';
+import { ChartDimensions, MarginProps, ChartSize } from '../../types/size.js';
+import { ChartContainerProps } from '../ChartContainer/types.js';
+import { ChartAxesProps } from '../../types/axis.js';
+import { AnchorProps } from '../DataPoint/types.js';
+import { DotProps } from '../Dot/types.js';
+import { LegendProps } from '../Legend/types.js';
+import { ChartTheme } from '../../types/theme.js';
+import { TooltipVariant } from '../../types/legend.js';
+
+/**
+ * Component variant.
+ */
+declare const ScatterPlotVariant: {
+    readonly default: "default";
+    readonly gridded: "gridded";
+};
+type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;
+/**
+ * Component's labels variant.
+ */
+declare const ScatterPlotLegendVariant: {
+    readonly none: "none";
+    readonly externalLabel: "externalLabel";
+    readonly externalLabelValue: "externalLabelValue";
+    readonly externalLabelPercent: "externalLabelPercent";
+    readonly custom: "custom";
+};
+type ScatterPlotLegendVariant = ValueOf<typeof ScatterPlotLegendVariant>;
+interface LocaleText {
+    emptyChartText: string;
+}
+type ScatterPlotDimensions = ChartDimensions & {
+    fontSize: number;
+};
+/**
+ * Component props.
+ */
+interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
+    /** Dataset to use to generate the chart. */
+    data?: CoordinatesCategoryData;
+    /** Method used to define the anchor props to use when the dot is a navigation link. */
+    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
+    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
+    dotRole?: DotProps['role'];
+    /** Component to use if the chart is empty (replacing the default one). */
+    emptyComponent?: ReactNode;
+    /** Whether the Control Keys panel is displayed or not. */
+    hideControlKeyPanel?: boolean;
+    /** Whether the scatter plot dots are selectable using brush or not. */
+    isBrushable?: boolean;
+    /** Method to determine whether a dot is selected or not. */
+    isDotSelected?: (datum: DotDatum) => boolean | undefined;
+    /** Method to override the data point labels. */
+    labelDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Method modifying what's displayed within the legend when the legendVariant is "custom". */
+    legendDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
+    legendVariant?: ScatterPlotLegendVariant;
+    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
+        extraLegendItems?: Statistics;
+    };
+    /** Labels and texts. */
+    localeText?: LocaleText;
+    /** Custom margins, used to give more space for axes labels and legend for instance. */
+    margins?: MarginProps;
+    /** Method called on brush. */
+    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear<number, number>, scaleY: ScaleLinear<number, number>) => void;
+    /** Method called on brush end. */
+    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX?: ScaleLinear<number, number>, scaleY?: ScaleLinear<number, number>) => void;
+    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
+    onDotClick?: (datum: DotDatum) => void;
+    /** ScatterPlot size. */
+    size?: ChartSize | ScatterPlotDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
+    /** Reference to the SVG tag. */
+    svgRef?: MutableRefObject<SVGSVGElement>;
+    /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
+    colorTheme?: ChartTheme;
+    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
+    tooltipDecorator?: (data: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Tooltip variant. */
+    tooltipVariant?: TooltipVariant;
+    /** Variant. */
+    variant?: ScatterPlotVariant;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledScatterPlotProps = ScatterPlotProps & {};
+
+export { ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, StyledScatterPlotProps };

package/components/ScatterPlot/types.js

@@ -0,0 +1,24 @@
+/**
+ * Component variant.
+ */
+const ScatterPlotVariant = {
+  default: 'default',
+  gridded: 'gridded'
+};
+/**
+ * Component's labels variant.
+ */
+const ScatterPlotLegendVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
+export { ScatterPlotLegendVariant, ScatterPlotVariant };
+//# sourceMappingURL=types.js.map

package/components/ScatterPlot/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/ScatterPlot/types.ts"],"sourcesContent":["import {\n  ChartDimensions,\n  ChartSize,\n  ChartTheme,\n  TooltipVariant,\n  DotDatum,\n  CoordinatesCategoryData,\n  ChartAxesProps,\n  MarginProps,\n  Statistics,\n} from '../../types';\nimport { Theme, ValueOf } from '@redsift/design-system';\nimport { ChartContainerProps } from '../ChartContainer';\nimport { MutableRefObject, ReactElement, ReactNode } from 'react';\nimport { DotProps } from '../Dot';\nimport { ScaleLinear as d3ScaleLinear } from 'd3';\nimport { LegendProps } from '../Legend';\nimport { SortingMethod } from '../../utils';\nimport { AnchorProps } from '../DataPoint';\n\n/**\n * Component variant.\n */\nexport const ScatterPlotVariant = {\n  default: 'default',\n  gridded: 'gridded',\n} as const;\nexport type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;\n\n/**\n * Component's labels variant.\n */\nexport const ScatterPlotLegendVariant = {\n  none: 'none',\n  externalLabel: 'externalLabel',\n  externalLabelValue: 'externalLabelValue',\n  externalLabelPercent: 'externalLabelPercent',\n  custom: 'custom',\n} as const;\nexport type ScatterPlotLegendVariant = ValueOf<typeof ScatterPlotLegendVariant>;\n\ninterface LocaleText {\n  emptyChartText: string;\n}\n\nexport type ScatterPlotDimensions = ChartDimensions & {\n  fontSize: number;\n};\n\n/**\n * Component props.\n */\nexport interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {\n  /** Dataset to use to generate the chart. */\n  data?: CoordinatesCategoryData;\n  /** Method used to define the anchor props to use when the dot is a navigation link. */\n  getDotAnchorProps?: (datum: DotDatum) => AnchorProps;\n  /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */\n  dotRole?: DotProps['role'];\n  /** Component to use if the chart is empty (replacing the default one). */\n  emptyComponent?: ReactNode;\n  /** Whether the Control Keys panel is displayed or not. */\n  hideControlKeyPanel?: boolean;\n  /** Whether the scatter plot dots are selectable using brush or not. */\n  isBrushable?: boolean;\n  /** Method to determine whether a dot is selected or not. */\n  isDotSelected?: (datum: DotDatum) => boolean | undefined;\n  /** Method to override the data point labels. */\n  labelDecorator?: (\n    datum: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Method modifying what's displayed within the legend when the legendVariant is \"custom\". */\n  legendDecorator?: (\n    datum: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to \"custom\", use `legendDecorator` to customize it. */\n  legendVariant?: ScatterPlotLegendVariant;\n  /** Props to forward to the Legend block. Can be used to make the legend selectable. */\n  legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {\n    extraLegendItems?: Statistics;\n  };\n  /** Labels and texts. */\n  localeText?: LocaleText;\n  /** Custom margins, used to give more space for axes labels and legend for instance. */\n  margins?: MarginProps;\n  /** Method called on brush. */\n  onBrush?: (\n    selection: [[number, number], [number, number]] | null,\n    scaleX: d3ScaleLinear<number, number>,\n    scaleY: d3ScaleLinear<number, number>\n  ) => void;\n  /** Method called on brush end. */\n  onBrushEnd?: (\n    selection: [[number, number], [number, number]] | null,\n    scaleX?: d3ScaleLinear<number, number>,\n    scaleY?: d3ScaleLinear<number, number>\n  ) => void;\n  /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */\n  onDotClick?: (datum: DotDatum) => void;\n  /** ScatterPlot size. */\n  size?: ChartSize | ScatterPlotDimensions;\n  /** Define how to sort categories. */\n  sortingMethod?: SortingMethod;\n  /** Reference to the SVG tag. */\n  svgRef?: MutableRefObject<SVGSVGElement>;\n  /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */\n  colorTheme?: ChartTheme;\n  /** Method modifying what's displayed within the tooltip when the tooltipVariant is \"custom\".  */\n  tooltipDecorator?: (\n    data: DotDatum,\n    props?: { index?: number; isSelected?: boolean; color?: string }\n  ) => string | ReactElement;\n  /** Tooltip variant. */\n  tooltipVariant?: TooltipVariant;\n  /** Variant. */\n  variant?: ScatterPlotVariant;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledScatterPlotProps = ScatterPlotProps & {};\n"],"names":["ScatterPlotVariant","default","gridded","ScatterPlotLegendVariant","none","externalLabel","externalLabelValue","externalLabelPercent","custom"],"mappings":"AAoBA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGV;AACA;AACA;AACO,MAAMC,wBAAwB,GAAG;AACtCC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,oBAAoB,EAAE,sBAAsB;AAC5CC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAWV;AACA;AACA;;;;"}

package/components/ScatterPlot/utils.js

@@ -0,0 +1,70 @@
+import { getSortingMethod } from '../../utils/index.js';
+import { ChartSize } from '../../types/size.js';
+
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 600,
+        height: 300,
+        fontSize: 30
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 750,
+        height: 375,
+        fontSize: 34
+      };
+    case ChartSize.large:
+      return {
+        width: 900,
+        height: 450,
+        fontSize: 38
+      };
+  }
+};
+const BASE_NUMBER_OF_TICKS = 20;
+const getClosestLineIndex = (value, scale) => {
+  const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);
+  const delta = ticks[1] - ticks[0];
+  const index = Math.round(value / delta);
+  const roundValue = index * delta;
+  return [index, roundValue];
+};
+const group = (data, x, y) => {
+  const groupDict = {};
+  data.forEach(d => {
+    const [i, rx] = getClosestLineIndex(d.key[0], x);
+    const [j, ry] = getClosestLineIndex(d.key[1], y);
+    const key = `${i}_${j}_${d.key[2]}`;
+    if (!(key in groupDict)) {
+      groupDict[key] = {
+        category: d.key[2],
+        x: rx,
+        y: ry,
+        data: {
+          key: d.key,
+          value: 0
+        },
+        points: []
+      };
+    }
+    groupDict[key].points.push(d);
+    groupDict[key].data.value += 1;
+  });
+  return Object.values(groupDict);
+};
+const countBy = (arr, sortingMethod) => {
+  const counts = arr.reduce((prev, curr) => (prev[curr.key[2]] = ++prev[curr.key[2]] || 1, prev), {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key]
+  })).sort(getSortingMethod(sortingMethod));
+};
+
+export { BASE_NUMBER_OF_TICKS, countBy, getClosestLineIndex, group, sizeToDimension };
+//# sourceMappingURL=utils.js.map

package/components/ScatterPlot/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/ScatterPlot/utils.ts"],"sourcesContent":["import { ScaleLinear as d3ScaleLinear } from 'd3';\n\nimport { CoordinatesCategoryData, CoordinatesCategoryDatum } from '../../types';\n\nimport { ChartSize } from '../../types';\nimport { ScatterPlotDimensions } from './types';\nimport { SortingMethod, getSortingMethod } from '../../utils';\n\nexport const sizeToDimension = (size: ChartSize | ScatterPlotDimensions): ScatterPlotDimensions => {\n  if (typeof size !== 'string') {\n    return size;\n  }\n\n  switch (size) {\n    case ChartSize.small:\n      return { width: 600, height: 300, fontSize: 30 };\n    case ChartSize.medium:\n    default:\n      return { width: 750, height: 375, fontSize: 34 };\n    case ChartSize.large:\n      return { width: 900, height: 450, fontSize: 38 };\n  }\n};\n\nexport const BASE_NUMBER_OF_TICKS = 20;\n\nexport const getClosestLineIndex = (value: number, scale: d3ScaleLinear<number, number, never>) => {\n  const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);\n  const delta = ticks[1] - ticks[0];\n  const index = Math.round(value / delta);\n  const roundValue = index * delta;\n  return [index, roundValue];\n};\n\nexport const group = (\n  data: CoordinatesCategoryData,\n  x: d3ScaleLinear<number, number, never>,\n  y: d3ScaleLinear<number, number, never>\n) => {\n  const groupDict: Record<\n    string,\n    {\n      category: string;\n      x: number;\n      y: number;\n      data: CoordinatesCategoryDatum;\n      points: CoordinatesCategoryData;\n    }\n  > = {};\n\n  data.forEach((d) => {\n    const [i, rx] = getClosestLineIndex(d.key[0], x);\n    const [j, ry] = getClosestLineIndex(d.key[1], y);\n\n    const key = `${i}_${j}_${d.key[2]}`;\n    if (!(key in groupDict)) {\n      groupDict[key] = {\n        category: d.key[2] as string,\n        x: rx,\n        y: ry,\n        data: {\n          key: d.key,\n          value: 0,\n        },\n        points: [],\n      };\n    }\n\n    groupDict[key].points.push(d);\n    groupDict[key].data.value += 1;\n  });\n\n  return Object.values(groupDict);\n};\n\nexport const countBy = (arr: CoordinatesCategoryData, sortingMethod: SortingMethod) => {\n  const counts = arr.reduce(\n    (prev, curr) => ((prev[curr.key[2] as string] = ++(prev[curr.key[2] as string] as number) || 1), prev),\n    {} as Record<string, number>\n  );\n\n  return Object.keys(counts)\n    .map((key) => ({ key: key, value: counts[key] as number }))\n    .sort(getSortingMethod(sortingMethod));\n};\n"],"names":["sizeToDimension","size","ChartSize","small","width","height","fontSize","medium","large","BASE_NUMBER_OF_TICKS","getClosestLineIndex","value","scale","ticks","delta","index","Math","round","roundValue","group","data","x","y","groupDict","forEach","d","i","rx","key","j","ry","category","points","push","Object","values","countBy","arr","sortingMethod","counts","reduce","prev","curr","keys","map","sort","getSortingMethod"],"mappings":"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"}

package/config.js

@@ -0,0 +1,15 @@
+import './node_modules/@react-spring/web/dist/esm/index.js';
+import { easings as Lt } from './node_modules/@react-spring/shared/dist/esm/index.js';
+import './node_modules/@react-spring/core/dist/esm/index.js';
+
+const config = (() => ({
+  config: {
+    duration: 700,
+    easing: Lt.easeInOutQuad
+  },
+  reset: true,
+  immediate: false
+}))();
+
+export { config };
+//# sourceMappingURL=config.js.map

package/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../src/config.ts"],"sourcesContent":["import { easings } from '@react-spring/web';\n\nexport const config = (() => ({\n  config: {\n    duration: 700,\n    easing: easings.easeInOutQuad,\n  },\n  reset: true,\n  immediate: false,\n}))();\n"],"names":["config","duration","easing","easings","easeInOutQuad","reset","immediate"],"mappings":";;;;AAEaA,MAAAA,MAAM,GAAG,CAAC,OAAO;AAC5BA,EAAAA,MAAM,EAAE;AACNC,IAAAA,QAAQ,EAAE,GAAG;IACbC,MAAM,EAAEC,EAAO,CAACC,aAAAA;GACjB;AACDC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,SAAS,EAAE,KAAA;AACb,CAAC,CAAC;;;;"}

package/design-system/src/react-aria/react-aria/i18n/useMessageFormatter.d.ts

@@ -0,0 +1,5 @@
+type FormatMessage = (key: string, variables?: {
+    [key: string]: any;
+}) => string;
+
+export { FormatMessage };

package/hooks/useBrush.d.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject } from 'react';
+import { BrushBehavior, ScaleLinear } from 'd3';
+
+interface UseBrushProps {
+    brushRef: MutableRefObject<BrushBehavior<unknown> | undefined>;
+    svgRef: MutableRefObject<SVGSVGElement | SVGGElement | undefined>;
+    extent?: [[number, number], [number, number]];
+    scaleX: ScaleLinear<number, number>;
+    scaleY: ScaleLinear<number, number>;
+    isBrushable?: boolean;
+    isGridded?: boolean;
+    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear<number, number>, scaleY: ScaleLinear<number, number>) => void;
+    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear<number, number>, scaleY: ScaleLinear<number, number>) => void;
+}
+declare const useBrush: ({ brushRef: propsBrushRef, svgRef, extent, scaleX, scaleY, isBrushable, isGridded, onBrush, onBrushEnd, }: UseBrushProps) => void;
+
+export { UseBrushProps, useBrush };

package/hooks/useBrush.js

@@ -0,0 +1,48 @@
+import { useRef, useEffect } from 'react';
+import { brush, select } from 'd3';
+
+const getRoundedIntermediaryPoint = (selection, scaleX, scaleY) => {
+  if (!selection) {
+    return null;
+  }
+  const xTicks = scaleX.ticks(20);
+  const xDelta = xTicks[1] - xTicks[0];
+  const yTicks = scaleY.ticks(20);
+  const yDelta = yTicks[1] - yTicks[0];
+  return [[scaleX(Math.round(scaleX.invert(selection[0][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[0][1]) / yDelta) * yDelta - yDelta / 2)], [scaleX(Math.round(scaleX.invert(selection[1][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[1][1]) / yDelta) * yDelta - yDelta / 2)]];
+};
+const useBrush = _ref => {
+  let {
+    brushRef: propsBrushRef,
+    svgRef,
+    extent,
+    scaleX,
+    scaleY,
+    isBrushable,
+    isGridded,
+    onBrush,
+    onBrushEnd
+  } = _ref;
+  const brushRef = propsBrushRef || useRef();
+  useEffect(() => {
+    if (svgRef.current && isBrushable) {
+      brushRef.current = brush().extent(extent).keyModifiers(false).filter(event => event.shiftKey).on('brush', event => {
+        if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
+        if (isGridded) {
+          const selection = getRoundedIntermediaryPoint(event.selection, scaleX, scaleY);
+          select(svgRef.current).call(brushRef.current.move, selection);
+          onBrush === null || onBrush === void 0 ? void 0 : onBrush(selection, scaleX, scaleY);
+        } else {
+          onBrush === null || onBrush === void 0 ? void 0 : onBrush(event.selection, scaleX, scaleY);
+        }
+      }).on('end', event => {
+        if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
+        onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd(event.selection, scaleX, scaleY);
+      });
+      select(svgRef.current).call(brushRef.current);
+    }
+  });
+};
+
+export { useBrush };
+//# sourceMappingURL=useBrush.js.map

package/hooks/useBrush.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrush.js","sources":["../../src/hooks/useBrush.tsx"],"sourcesContent":["import { MutableRefObject, useEffect, useRef } from 'react';\nimport {\n  BrushBehavior as d3BrushBehavior,\n  brush as d3brush,\n  ScaleLinear as d3ScaleLinear,\n  select as d3select,\n} from 'd3';\n\nexport interface UseBrushProps {\n  brushRef: MutableRefObject<d3BrushBehavior<unknown> | undefined>;\n  svgRef: MutableRefObject<SVGSVGElement | SVGGElement | undefined>;\n  extent?: [[number, number], [number, number]];\n  scaleX: d3ScaleLinear<number, number>;\n  scaleY: d3ScaleLinear<number, number>;\n  isBrushable?: boolean;\n  isGridded?: boolean;\n  onBrush?: (\n    selection: [[number, number], [number, number]] | null,\n    scaleX: d3ScaleLinear<number, number>,\n    scaleY: d3ScaleLinear<number, number>\n  ) => void;\n  onBrushEnd?: (\n    selection: [[number, number], [number, number]] | null,\n    scaleX: d3ScaleLinear<number, number>,\n    scaleY: d3ScaleLinear<number, number>\n  ) => void;\n}\n\nconst getRoundedIntermediaryPoint = (\n  selection: [[number, number], [number, number]],\n  scaleX: d3ScaleLinear<number, number>,\n  scaleY: d3ScaleLinear<number, number>\n) => {\n  if (!selection) {\n    return null;\n  }\n\n  const xTicks = scaleX.ticks(20);\n  const xDelta = xTicks[1] - xTicks[0];\n  const yTicks = scaleY.ticks(20);\n  const yDelta = yTicks[1] - yTicks[0];\n\n  return [\n    [\n      scaleX(\n        Math.round(scaleX.invert(selection[0][0]) / xDelta) * xDelta -\n          xDelta / 2\n      ),\n      scaleY(\n        Math.round(scaleY.invert(selection[0][1]) / yDelta) * yDelta -\n          yDelta / 2\n      ),\n    ],\n    [\n      scaleX(\n        Math.round(scaleX.invert(selection[1][0]) / xDelta) * xDelta -\n          xDelta / 2\n      ),\n\n      scaleY(\n        Math.round(scaleY.invert(selection[1][1]) / yDelta) * yDelta -\n          yDelta / 2\n      ),\n    ],\n  ] as [[number, number], [number, number]];\n};\n\nexport const useBrush = ({\n  brushRef: propsBrushRef,\n  svgRef,\n  extent,\n  scaleX,\n  scaleY,\n  isBrushable,\n  isGridded,\n  onBrush,\n  onBrushEnd,\n}: UseBrushProps) => {\n  const brushRef = propsBrushRef || useRef<d3BrushBehavior<unknown>>();\n\n  useEffect(() => {\n    if (svgRef.current && isBrushable) {\n      brushRef.current = d3brush()\n        .extent(extent!)\n        .keyModifiers(false)\n        .filter((event) => event.shiftKey)\n        .on('brush', (event) => {\n          if (!event.sourceEvent || !brushRef.current || !svgRef.current)\n            return;\n\n          if (isGridded) {\n            const selection = getRoundedIntermediaryPoint(\n              event.selection,\n              scaleX,\n              scaleY\n            );\n            d3select(svgRef.current).call(\n              brushRef.current.move as any,\n              selection\n            );\n            onBrush?.(selection, scaleX, scaleY);\n          } else {\n            onBrush?.(event.selection, scaleX, scaleY);\n          }\n        })\n        .on('end', (event) => {\n          if (!event.sourceEvent || !brushRef.current || !svgRef.current)\n            return;\n\n          onBrushEnd?.(event.selection, scaleX, scaleY);\n        });\n      d3select(svgRef.current).call(brushRef.current as any);\n    }\n  });\n};\n"],"names":["getRoundedIntermediaryPoint","selection","scaleX","scaleY","xTicks","ticks","xDelta","yTicks","yDelta","Math","round","invert","useBrush","_ref","brushRef","propsBrushRef","svgRef","extent","isBrushable","isGridded","onBrush","onBrushEnd","useRef","useEffect","current","d3brush","keyModifiers","filter","event","shiftKey","on","sourceEvent","d3select","call","move"],"mappings":"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"}

package/hooks/useColor.d.ts

@@ -0,0 +1,18 @@
+import { ScaleOrdinal } from 'd3';
+import { Theme } from '@redsift/design-system';
+import { JSONArray, JSONObject } from '../types/data.js';
+import { ChartTheme } from '../types/theme.js';
+
+interface UseColorProps {
+    /** Dataset to use to generate the chart. */
+    data: JSONArray;
+    /** Color palette to use. */
+    colorTheme: ChartTheme;
+    /** Name of the field that will be used to categorize the data. */
+    category: string | ((d: JSONObject) => string);
+    /** Theme */
+    theme: Theme;
+}
+declare const useColor: ({ data, colorTheme, category, theme }: UseColorProps) => ScaleOrdinal<string, string, never>;
+
+export { UseColorProps, useColor };

package/hooks/useColor.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { getColorScale } from '../scheme.js';
+
+const useColor = _ref => {
+  let {
+    data,
+    colorTheme,
+    category,
+    theme
+  } = _ref;
+  const colorScale = useMemo(() => getColorScale({
+    colorTheme,
+    domain: data.map(d => typeof category === 'string' ? d[category] : category(d)),
+    theme
+  }), [colorTheme]);
+  return colorScale;
+};
+
+export { useColor };
+//# sourceMappingURL=useColor.js.map

package/hooks/useColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColor.js","sources":["../../src/hooks/useColor.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { ScaleOrdinal as d3ScaleOrdinal } from 'd3';\nimport { getColorScale } from '../scheme';\nimport { ChartTheme, JSONArray, JSONObject } from '../types';\nimport { Theme } from '@redsift/design-system';\n\nexport interface UseColorProps {\n  /** Dataset to use to generate the chart. */\n  data: JSONArray;\n  /** Color palette to use. */\n  colorTheme: ChartTheme;\n  /** Name of the field that will be used to categorize the data. */\n  category: string | ((d: JSONObject) => string);\n  /** Theme */\n  theme: Theme;\n}\n\nexport const useColor = ({ data, colorTheme, category, theme }: UseColorProps) => {\n  const colorScale = useMemo<d3ScaleOrdinal<string, string>>(\n    () =>\n      getColorScale({\n        colorTheme,\n        domain: data.map((d) => (typeof category === 'string' ? (d[category] as string) : category(d))),\n        theme,\n      }),\n    [colorTheme]\n  );\n\n  return colorScale;\n};\n"],"names":["useColor","_ref","data","colorTheme","category","theme","colorScale","useMemo","getColorScale","domain","map","d"],"mappings":";;;AAiBaA,MAAAA,QAAQ,GAAGC,IAAA,IAA0D;EAAA,IAAzD;IAAEC,IAAI;IAAEC,UAAU;IAAEC,QAAQ;AAAEC,IAAAA,KAAAA;AAAqB,GAAC,GAAAJ,IAAA,CAAA;AAC3E,EAAA,MAAMK,UAAU,GAAGC,OAAO,CACxB,MACEC,aAAa,CAAC;IACZL,UAAU;IACVM,MAAM,EAAEP,IAAI,CAACQ,GAAG,CAAEC,CAAC,IAAM,OAAOP,QAAQ,KAAK,QAAQ,GAAIO,CAAC,CAACP,QAAQ,CAAC,GAAcA,QAAQ,CAACO,CAAC,CAAE,CAAC;AAC/FN,IAAAA,KAAAA;AACF,GAAC,CAAC,EACJ,CAACF,UAAU,CACb,CAAC,CAAA;AAED,EAAA,OAAOG,UAAU,CAAA;AACnB;;;;"}

package/hooks/useFormatCategoricalData.d.ts

@@ -0,0 +1,26 @@
+import * as d3_scale from 'd3-scale';
+import { SortingMethod } from '../utils/index.js';
+import { Theme } from '@redsift/design-system';
+import { CategoryData } from '../types/data.js';
+import { ChartTheme } from '../types/theme.js';
+
+interface UseFormatCategoricalDataProps {
+    /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
+    data: CategoryData;
+    /** Color palette to use. */
+    colorTheme: ChartTheme;
+    /** Define how to sort categories. */
+    sortingMethod: SortingMethod;
+    /** Number of categories to use, the rest being put into a new category called "Others". */
+    caping?: number;
+    /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
+    others?: boolean | string;
+    /** Theme */
+    theme: Theme;
+}
+declare const useFormatCategoricalData: ({ data, caping, sortingMethod, others, colorTheme, theme, }: UseFormatCategoricalDataProps) => {
+    data: CategoryData;
+    colorScale: d3_scale.ScaleOrdinal<string, string, never>;
+};
+
+export { UseFormatCategoricalDataProps, useFormatCategoricalData };

package/hooks/useFormatCategoricalData.js

@@ -0,0 +1,57 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useMemo } from 'react';
+import { useColor } from './useColor.js';
+import { getSortingMethod } from '../utils/index.js';
+
+const useFormatCategoricalData = _ref => {
+  let {
+    data,
+    caping,
+    sortingMethod,
+    others,
+    colorTheme,
+    theme
+  } = _ref;
+  const computedData = useMemo(() => {
+    let computedData;
+    if (data === undefined || data === null) {
+      return undefined;
+    }
+    computedData = [...data].sort(getSortingMethod(sortingMethod));
+    if (caping) {
+      if (typeof others === 'boolean' && !others) {
+        computedData = computedData.slice(0, caping);
+      } else {
+        computedData = computedData.reduce((acc, curr, index) => {
+          if (index < caping) {
+            acc[index] = curr;
+          } else if (index === caping) {
+            acc[index] = {
+              key: typeof others === 'string' ? others : 'Others',
+              value: curr.value
+            };
+          } else {
+            acc[caping] = _objectSpread2(_objectSpread2({}, acc[caping]), {}, {
+              value: acc[caping].value + curr.value
+            });
+          }
+          return acc;
+        }, []);
+      }
+    }
+    return computedData;
+  }, [data, caping]);
+  const colorScale = useColor({
+    data: computedData,
+    colorTheme,
+    category: 'key',
+    theme
+  });
+  return {
+    data: computedData,
+    colorScale
+  };
+};
+
+export { useFormatCategoricalData };
+//# sourceMappingURL=useFormatCategoricalData.js.map

package/hooks/useFormatCategoricalData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormatCategoricalData.js","sources":["../../src/hooks/useFormatCategoricalData.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { CategoryData, ChartTheme } from '../types';\nimport { useColor } from './useColor';\nimport { SortingMethod, getSortingMethod } from '../utils';\nimport { Theme } from '@redsift/design-system';\n\nexport interface UseFormatCategoricalDataProps {\n  /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */\n  data: CategoryData;\n  /** Color palette to use. */\n  colorTheme: ChartTheme;\n  /** Define how to sort categories. */\n  sortingMethod: SortingMethod;\n  /** Number of categories to use, the rest being put into a new category called \"Others\". */\n  caping?: number;\n  /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */\n  others?: boolean | string;\n  /** Theme */\n  theme: Theme;\n}\n\nexport const useFormatCategoricalData = ({\n  data,\n  caping,\n  sortingMethod,\n  others,\n  colorTheme,\n  theme,\n}: UseFormatCategoricalDataProps) => {\n  const computedData = useMemo(() => {\n    let computedData;\n\n    if (data === undefined || data === null) {\n      return undefined;\n    }\n\n    computedData = [...data!].sort(getSortingMethod(sortingMethod));\n\n    if (caping) {\n      if (typeof others === 'boolean' && !others) {\n        computedData = computedData.slice(0, caping);\n      } else {\n        computedData = computedData.reduce<CategoryData>((acc, curr, index) => {\n          if (index < caping) {\n            acc[index] = curr;\n          } else if (index === caping) {\n            acc[index] = {\n              key: typeof others === 'string' ? others : 'Others',\n              value: curr.value,\n            };\n          } else {\n            acc[caping] = {\n              ...acc[caping],\n              value: acc[caping].value + curr.value,\n            };\n          }\n          return acc;\n        }, []);\n      }\n    }\n\n    return computedData;\n  }, [data, caping]);\n\n  const colorScale = useColor({ data: computedData!, colorTheme, category: 'key', theme });\n\n  return { data: computedData as CategoryData, colorScale };\n};\n"],"names":["useFormatCategoricalData","_ref","data","caping","sortingMethod","others","colorTheme","theme","computedData","useMemo","undefined","sort","getSortingMethod","slice","reduce","acc","curr","index","key","value","_objectSpread","colorScale","useColor","category"],"mappings":";;;;;AAqBaA,MAAAA,wBAAwB,GAAGC,IAAA,IAOH;EAAA,IAPI;IACvCC,IAAI;IACJC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,UAAU;AACVC,IAAAA,KAAAA;AAC6B,GAAC,GAAAN,IAAA,CAAA;AAC9B,EAAA,MAAMO,YAAY,GAAGC,OAAO,CAAC,MAAM;AACjC,IAAA,IAAID,YAAY,CAAA;AAEhB,IAAA,IAAIN,IAAI,KAAKQ,SAAS,IAAIR,IAAI,KAAK,IAAI,EAAE;AACvC,MAAA,OAAOQ,SAAS,CAAA;AAClB,KAAA;AAEAF,IAAAA,YAAY,GAAG,CAAC,GAAGN,IAAK,CAAC,CAACS,IAAI,CAACC,gBAAgB,CAACR,aAAa,CAAC,CAAC,CAAA;AAE/D,IAAA,IAAID,MAAM,EAAE;AACV,MAAA,IAAI,OAAOE,MAAM,KAAK,SAAS,IAAI,CAACA,MAAM,EAAE;QAC1CG,YAAY,GAAGA,YAAY,CAACK,KAAK,CAAC,CAAC,EAAEV,MAAM,CAAC,CAAA;AAC9C,OAAC,MAAM;QACLK,YAAY,GAAGA,YAAY,CAACM,MAAM,CAAe,CAACC,GAAG,EAAEC,IAAI,EAAEC,KAAK,KAAK;UACrE,IAAIA,KAAK,GAAGd,MAAM,EAAE;AAClBY,YAAAA,GAAG,CAACE,KAAK,CAAC,GAAGD,IAAI,CAAA;AACnB,WAAC,MAAM,IAAIC,KAAK,KAAKd,MAAM,EAAE;YAC3BY,GAAG,CAACE,KAAK,CAAC,GAAG;cACXC,GAAG,EAAE,OAAOb,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,QAAQ;cACnDc,KAAK,EAAEH,IAAI,CAACG,KAAAA;aACb,CAAA;AACH,WAAC,MAAM;YACLJ,GAAG,CAACZ,MAAM,CAAC,GAAAiB,cAAA,CAAAA,cAAA,CACNL,EAAAA,EAAAA,GAAG,CAACZ,MAAM,CAAC,CAAA,EAAA,EAAA,EAAA;cACdgB,KAAK,EAAEJ,GAAG,CAACZ,MAAM,CAAC,CAACgB,KAAK,GAAGH,IAAI,CAACG,KAAAA;aACjC,CAAA,CAAA;AACH,WAAA;AACA,UAAA,OAAOJ,GAAG,CAAA;SACX,EAAE,EAAE,CAAC,CAAA;AACR,OAAA;AACF,KAAA;AAEA,IAAA,OAAOP,YAAY,CAAA;AACrB,GAAC,EAAE,CAACN,IAAI,EAAEC,MAAM,CAAC,CAAC,CAAA;EAElB,MAAMkB,UAAU,GAAGC,QAAQ,CAAC;AAAEpB,IAAAA,IAAI,EAAEM,YAAa;IAAEF,UAAU;AAAEiB,IAAAA,QAAQ,EAAE,KAAK;AAAEhB,IAAAA,KAAAA;AAAM,GAAC,CAAC,CAAA;EAExF,OAAO;AAAEL,IAAAA,IAAI,EAAEM,YAA4B;AAAEa,IAAAA,UAAAA;GAAY,CAAA;AAC3D;;;;"}

package/hooks/useZoom.d.ts

@@ -0,0 +1,26 @@
+import { MutableRefObject } from 'react';
+import { ScaleLinear } from 'd3';
+
+interface UseZoomProps {
+    svgRef: MutableRefObject<SVGSVGElement | undefined>;
+    scaleX: ScaleLinear<number, number>;
+    scaleY: ScaleLinear<number, number>;
+    defaultTransform?: {
+        k: number;
+        x: number;
+        y: number;
+    };
+    size?: any;
+    onZoom?: () => void;
+}
+declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, size, onZoom, }: UseZoomProps) => {
+    transform: {
+        k: number;
+        x: number;
+        y: number;
+    };
+    scaleX: ScaleLinear<number, number, never>;
+    scaleY: ScaleLinear<number, number, never>;
+};
+
+export { UseZoomProps, useZoom };

package/hooks/useZoom.js

@@ -0,0 +1,39 @@
+import { useRef, useState, useEffect } from 'react';
+import { zoom, interpolateRound, select } from 'd3';
+
+const useZoom = _ref => {
+  let {
+    svgRef,
+    scaleX,
+    scaleY,
+    defaultTransform = {
+      k: 1,
+      x: 0,
+      y: 0
+    },
+    size,
+    onZoom
+  } = _ref;
+  const zx = useRef(scaleX);
+  const zy = useRef(scaleY);
+  const [transform, setTransform] = useState(defaultTransform);
+  useEffect(() => {
+    if (svgRef.current) {
+      const zoom$1 = zoom().filter(event => !event.shiftKey).scaleExtent([1 / 2 ** 3, 2 ** 3]).on('zoom', event => {
+        onZoom === null || onZoom === void 0 ? void 0 : onZoom();
+        zx.current = event.transform.rescaleX(scaleX).interpolate(interpolateRound);
+        zy.current = event.transform.rescaleY(scaleY).interpolate(interpolateRound);
+        setTransform(event.transform);
+      });
+      select(svgRef.current).call(zoom$1);
+    }
+  }, [svgRef.current, size]);
+  return {
+    transform,
+    scaleX: zx.current,
+    scaleY: zy.current
+  };
+};
+
+export { useZoom };
+//# sourceMappingURL=useZoom.js.map

package/hooks/useZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoom.js","sources":["../../src/hooks/useZoom.tsx"],"sourcesContent":["import { MutableRefObject, useEffect, useRef, useState } from 'react';\nimport {\n  zoom as d3zoom,\n  interpolateRound as d3interpolateRound,\n  ScaleLinear as d3ScaleLinear,\n  select as d3select,\n} from 'd3';\n\nexport interface UseZoomProps {\n  svgRef: MutableRefObject<SVGSVGElement | undefined>;\n  scaleX: d3ScaleLinear<number, number>;\n  scaleY: d3ScaleLinear<number, number>;\n  defaultTransform?: { k: number; x: number; y: number };\n  size?: any;\n  onZoom?: () => void;\n}\n\nexport const useZoom = ({\n  svgRef,\n  scaleX,\n  scaleY,\n  defaultTransform = { k: 1, x: 0, y: 0 },\n  size,\n  onZoom,\n}: UseZoomProps) => {\n  const zx = useRef<d3ScaleLinear<number, number>>(scaleX);\n  const zy = useRef<d3ScaleLinear<number, number>>(scaleY);\n  const [transform, setTransform] = useState(defaultTransform);\n\n  useEffect(() => {\n    if (svgRef.current) {\n      const zoom = d3zoom()\n        .filter((event) => !event.shiftKey)\n        .scaleExtent([1 / 2 ** 3, 2 ** 3])\n        .on('zoom', (event) => {\n          onZoom?.();\n          zx.current = event.transform\n            .rescaleX(scaleX)\n            .interpolate(d3interpolateRound);\n          zy.current = event.transform\n            .rescaleY(scaleY)\n            .interpolate(d3interpolateRound);\n          setTransform(event.transform);\n        });\n      d3select(svgRef.current).call(zoom as any);\n    }\n  }, [svgRef.current, size]);\n\n  return { transform, scaleX: zx.current, scaleY: zy.current };\n};\n"],"names":["useZoom","_ref","svgRef","scaleX","scaleY","defaultTransform","k","x","y","size","onZoom","zx","useRef","zy","transform","setTransform","useState","useEffect","current","zoom","d3zoom","filter","event","shiftKey","scaleExtent","on","rescaleX","interpolate","d3interpolateRound","rescaleY","d3select","call"],"mappings":";;;AAiBaA,MAAAA,OAAO,GAAGC,IAAA,IAOH;EAAA,IAPI;IACtBC,MAAM;IACNC,MAAM;IACNC,MAAM;AACNC,IAAAA,gBAAgB,GAAG;AAAEC,MAAAA,CAAC,EAAE,CAAC;AAAEC,MAAAA,CAAC,EAAE,CAAC;AAAEC,MAAAA,CAAC,EAAE,CAAA;KAAG;IACvCC,IAAI;AACJC,IAAAA,MAAAA;AACY,GAAC,GAAAT,IAAA,CAAA;AACb,EAAA,MAAMU,EAAE,GAAGC,MAAM,CAAgCT,MAAM,CAAC,CAAA;AACxD,EAAA,MAAMU,EAAE,GAAGD,MAAM,CAAgCR,MAAM,CAAC,CAAA;EACxD,MAAM,CAACU,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAACX,gBAAgB,CAAC,CAAA;AAE5DY,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIf,MAAM,CAACgB,OAAO,EAAE;AAClB,MAAA,MAAMC,MAAI,GAAGC,IAAM,EAAE,CAClBC,MAAM,CAAEC,KAAK,IAAK,CAACA,KAAK,CAACC,QAAQ,CAAC,CAClCC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CACjCC,EAAE,CAAC,MAAM,EAAGH,KAAK,IAAK;AACrBZ,QAAAA,MAAM,KAANA,IAAAA,IAAAA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,EAAI,CAAA;AACVC,QAAAA,EAAE,CAACO,OAAO,GAAGI,KAAK,CAACR,SAAS,CACzBY,QAAQ,CAACvB,MAAM,CAAC,CAChBwB,WAAW,CAACC,gBAAkB,CAAC,CAAA;AAClCf,QAAAA,EAAE,CAACK,OAAO,GAAGI,KAAK,CAACR,SAAS,CACzBe,QAAQ,CAACzB,MAAM,CAAC,CAChBuB,WAAW,CAACC,gBAAkB,CAAC,CAAA;AAClCb,QAAAA,YAAY,CAACO,KAAK,CAACR,SAAS,CAAC,CAAA;AAC/B,OAAC,CAAC,CAAA;MACJgB,MAAQ,CAAC5B,MAAM,CAACgB,OAAO,CAAC,CAACa,IAAI,CAACZ,MAAW,CAAC,CAAA;AAC5C,KAAA;GACD,EAAE,CAACjB,MAAM,CAACgB,OAAO,EAAET,IAAI,CAAC,CAAC,CAAA;EAE1B,OAAO;IAAEK,SAAS;IAAEX,MAAM,EAAEQ,EAAE,CAACO,OAAO;IAAEd,MAAM,EAAES,EAAE,CAACK,OAAAA;GAAS,CAAA;AAC9D;;;;"}